2022-09-02 08:22:26 +00:00
import React from "react" ;
2022-09-02 13:37:45 +00:00
import styled from "styled-components" ;
2022-09-02 08:22:26 +00:00
import Selector from "./" ;
2023-01-27 14:08:30 +00:00
import CustomSvgUrl from "PUBLIC_DIR/images/icons/32/room/custom.svg?url" ;
import ArchiveSvgUrl from "PUBLIC_DIR/images/room.archive.svg?url" ;
import EmptyScreenFilter from "PUBLIC_DIR/images/empty_screen_filter.png" ;
2022-09-02 08:22:26 +00:00
2022-09-02 13:37:45 +00:00
const StyledRowLoader = styled . div `
width : 100 % ;
height : 48 px ;
background : red ;
` ;
const StyledSearchLoader = styled . div `
width : 100 % ;
height : 32 px ;
background : black ;
` ;
2022-09-02 08:22:26 +00:00
export default {
title : "Components/Selector" ,
component : Selector ,
parameters : {
docs : {
description : {
component :
"Selector for displaying items list of people or room selector" ,
} ,
} ,
} ,
} ;
function makeName ( ) {
var result = "" ;
var characters =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789" ;
var charactersLength = characters . length ;
for ( var i = 0 ; i < 15 ; i ++ ) {
result += characters . charAt ( Math . floor ( Math . random ( ) * charactersLength ) ) ;
}
return result ;
}
const getItems = ( count ) => {
const items = [ ] ;
for ( let i = 0 ; i < count / 2 ; i ++ ) {
items . push ( {
key : ` user_ ${ i } ` ,
id : ` user_ ${ i } ` ,
2022-09-02 13:18:41 +00:00
label : makeName ( ) + " " + i ,
2023-01-16 12:47:16 +00:00
avatar : ArchiveSvgUrl ,
2022-09-02 08:22:26 +00:00
} ) ;
}
for ( let i = 0 ; i < count / 2 ; i ++ ) {
items . push ( {
key : ` room_ ${ i } ` ,
id : ` room_ ${ i } ` ,
2022-09-02 13:19:24 +00:00
label : makeName ( ) + " " + i + " room" ,
2023-01-16 12:47:16 +00:00
icon : CustomSvgUrl ,
2022-09-02 08:22:26 +00:00
} ) ;
}
return items ;
} ;
const getAccessRights = ( ) => {
const accesses = [
{
key : "roomManager" ,
label : "Room manager" ,
access : 0 ,
} ,
{
key : "editor" ,
label : "Editor" ,
access : 1 ,
} ,
{
key : "formFiller" ,
label : "Form filler" ,
access : 2 ,
} ,
{
key : "reviewer" ,
label : "Reviewer" ,
access : 3 ,
} ,
{
key : "commentator" ,
label : "Commentator" ,
access : 4 ,
} ,
{
key : "viewer" ,
label : "Viewer" ,
access : 5 ,
} ,
] ;
return accesses ;
} ;
2022-09-05 07:39:08 +00:00
const items = getItems ( 100000 ) ;
2022-09-02 13:18:41 +00:00
const selectedItems = [ items [ 0 ] , items [ 3 ] , items [ 7 ] ] ;
const accessRights = getAccessRights ( ) ;
const selectedAccessRight = accessRights [ 1 ] ;
const renderedItems = items . slice ( 0 , 100 ) ;
const totalItems = items . length ;
2022-09-02 08:22:26 +00:00
const Template = ( args ) => {
2022-09-02 13:18:41 +00:00
const [ rendItems , setRendItems ] = React . useState ( renderedItems ) ;
const loadNextPage = ( index ) => {
setRendItems ( ( val ) => [ ... val , ... items . slice ( index , index + 100 ) ] ) ;
} ;
2022-09-02 13:37:45 +00:00
const rowLoader = < StyledRowLoader / > ;
const searchLoader = < StyledSearchLoader className = "search-loader" / > ;
2022-09-02 08:22:26 +00:00
return (
< div
style = { {
width : "480px" ,
height : args . height ,
border : "1px solid red" ,
margin : "auto" ,
} }
>
2022-09-02 13:18:41 +00:00
< Selector
{ ... args }
items = { rendItems }
loadNextPage = { loadNextPage }
2022-09-02 13:37:45 +00:00
searchLoader = { searchLoader }
rowLoader = { rowLoader }
2022-09-02 13:18:41 +00:00
/ >
2022-09-02 08:22:26 +00:00
< / d i v >
) ;
} ;
export const Default = Template . bind ( { } ) ;
Default . args = {
height : "485px" , // container height
headerLabel : "Room list" ,
onBackClick : ( ) => console . log ( "back click" ) ,
searchPlaceholder : "Search" ,
searchValue : "" ,
2022-09-02 13:18:41 +00:00
items : renderedItems ,
2022-09-02 08:22:26 +00:00
onSelect : ( item ) => console . log ( "select " + item ) ,
isMultiSelect : false ,
2022-09-02 13:18:41 +00:00
selectedItems : selectedItems ,
2022-09-02 08:22:26 +00:00
acceptButtonLabel : "Add" ,
onAccept : ( items , access ) => console . log ( "accept " + items + access ) ,
withSelectAll : false ,
selectAllLabel : "All accounts" ,
2023-01-16 12:47:16 +00:00
selectAllIcon : ArchiveSvgUrl ,
2022-09-02 08:22:26 +00:00
onSelectAll : ( ) => console . log ( "select all" ) ,
2022-09-02 08:50:00 +00:00
withAccessRights : false ,
2022-09-02 08:22:26 +00:00
accessRights ,
selectedAccessRight ,
onAccessRightsChange : ( access ) =>
console . log ( "access rights change " + access ) ,
withCancelButton : false ,
cancelButtonLabel : "Cancel" ,
onCancel : ( ) => console . log ( "cancel" ) ,
2023-01-16 12:47:16 +00:00
emptyScreenImage : EmptyScreenFilter ,
2022-09-02 08:50:00 +00:00
emptyScreenHeader : "No other accounts here yet" ,
emptyScreenDescription :
"The list of users previously invited to DocSpace or separate rooms will appear here. You will be able to invite these users for collaboration at any time." ,
2023-01-16 12:47:16 +00:00
searchEmptyScreenImage : EmptyScreenFilter ,
2022-09-02 13:18:41 +00:00
searchEmptyScreenHeader : "No other accounts here yet search" ,
searchEmptyScreenDescription :
" SEARCH !!! The list of users previously invited to DocSpace or separate rooms will appear here. You will be able to invite these users for collaboration at any time." ,
2022-09-02 13:37:45 +00:00
totalItems ,
hasNextPage : true ,
isNextPageLoading : false ,
isLoading : false ,
2022-09-02 08:22:26 +00:00
} ;