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
2023-06-08 15:17:12 +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" ;
2023-06-08 15:17:12 +00:00
import { Item } from "./sub-components/Item/Item.types" ;
2022-09-02 08:22:26 +00:00
2022-09-02 13:37:45 +00:00
const StyledRowLoader = styled . div `
width : 100 % ;
height : 48px ;
` ;
const StyledSearchLoader = styled . div `
width : 100 % ;
height : 32px ;
background : black ;
` ;
2023-06-09 10:10:34 +00:00
const StyledBreadCrumbsLoader = styled . div `
width : 100 % ;
height : 54px ;
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" ,
} ,
} ,
} ,
2023-04-21 12:20:17 +00:00
argTypes : {
2023-05-25 09:58:52 +00:00
height : {
table : {
disable : true ,
} ,
} ,
2023-04-21 12:20:17 +00:00
} ,
2022-09-02 08:22:26 +00:00
} ;
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 ;
}
2023-06-08 15:17:12 +00:00
const getItems = ( count : number ) = > {
const items : Item [ ] = [ ] ;
2022-09-02 08:22:26 +00:00
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-04-13 12:23:06 +00:00
icon : CustomSvgUrl ,
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 ) ;
2023-06-08 15:17:12 +00:00
const loadNextPage = ( index : number ) = > {
2022-09-02 13:18:41 +00:00
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 ,
2023-04-03 13:24:12 +00:00
border : "1px solid #eee" ,
2022-09-02 08:22:26 +00:00
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
< / div >
) ;
} ;
export const Default = Template . bind ( { } ) ;
2023-06-09 10:10:34 +00:00
export const BreadCrumbs = Template . bind ( { } ) ;
2023-06-13 14:05:46 +00:00
export const NewName = Template . bind ( { } ) ;
2022-09-02 08:22:26 +00:00
Default . args = {
height : "485px" , // container height
headerLabel : "Room list" ,
2023-05-31 15:01:38 +00:00
onBackClick : ( ) = > { } ,
2022-09-02 08:22:26 +00:00
searchPlaceholder : "Search" ,
searchValue : "" ,
2022-09-02 13:18:41 +00:00
items : renderedItems ,
2023-05-31 15:01:38 +00:00
onSelect : ( item ) = > { } ,
2022-09-02 08:22:26 +00:00
isMultiSelect : false ,
2022-09-02 13:18:41 +00:00
selectedItems : selectedItems ,
2022-09-02 08:22:26 +00:00
acceptButtonLabel : "Add" ,
2023-05-31 15:01:38 +00:00
onAccept : ( items , access ) = > { } ,
2022-09-02 08:22:26 +00:00
withSelectAll : false ,
selectAllLabel : "All accounts" ,
2023-01-16 12:47:16 +00:00
selectAllIcon : ArchiveSvgUrl ,
2023-05-31 15:01:38 +00:00
onSelectAll : ( ) = > { } ,
2022-09-02 08:50:00 +00:00
withAccessRights : false ,
2022-09-02 08:22:26 +00:00
accessRights ,
selectedAccessRight ,
2023-05-31 15:01:38 +00:00
onAccessRightsChange : ( access ) = > { } ,
2022-09-02 08:22:26 +00:00
withCancelButton : false ,
cancelButtonLabel : "Cancel" ,
2023-05-31 15:01:38 +00:00
onCancel : ( ) = > { } ,
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 ,
2023-06-09 10:10:34 +00:00
withBreadCrumbs : false ,
breadCrumbs : [ ] ,
onSelectBreadCrumb : ( item ) = > { } ,
breadCrumbsLoader : < StyledBreadCrumbsLoader / > ,
2023-06-13 14:05:46 +00:00
withoutBackButton : false ,
2023-06-16 09:41:23 +00:00
withSearch : false ,
2023-06-13 14:05:46 +00:00
isBreadCrumbsLoading : false ,
2023-06-16 09:41:23 +00:00
alwaysShowFooter : false ,
disableAcceptButton : false ,
2023-06-26 11:33:37 +00:00
descriptionText : "" ,
2023-06-09 10:10:34 +00:00
} ;
BreadCrumbs . args = {
height : "485px" , // container height
headerLabel : "Room list" ,
onBackClick : ( ) = > { } ,
searchPlaceholder : "Search" ,
searchValue : "" ,
items : renderedItems ,
onSelect : ( item ) = > { } ,
isMultiSelect : false ,
selectedItems : selectedItems ,
acceptButtonLabel : "Add" ,
onAccept : ( items , access ) = > { } ,
withSelectAll : false ,
selectAllLabel : "All accounts" ,
selectAllIcon : ArchiveSvgUrl ,
onSelectAll : ( ) = > { } ,
withAccessRights : false ,
accessRights ,
selectedAccessRight ,
onAccessRightsChange : ( access ) = > { } ,
withCancelButton : false ,
cancelButtonLabel : "Cancel" ,
onCancel : ( ) = > { } ,
emptyScreenImage : EmptyScreenFilter ,
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." ,
searchEmptyScreenImage : EmptyScreenFilter ,
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." ,
totalItems ,
hasNextPage : true ,
isNextPageLoading : false ,
isLoading : false ,
withBreadCrumbs : true ,
breadCrumbs : [
{ id : 1 , label : "DocSpace" } ,
{ id : 2 , label : "1111111" } ,
{ id : 3 , label : "21222222222" } ,
{ id : 4 , label : "32222222222222222222222222222222222222" } ,
{ id : 5 , label : "4222222222222222222222222222222222222" } ,
] ,
onSelectBreadCrumb : ( item ) = > { } ,
breadCrumbsLoader : < StyledBreadCrumbsLoader / > ,
2023-06-13 14:05:46 +00:00
withoutBackButton : false ,
2023-06-16 09:41:23 +00:00
withSearch : false ,
2023-06-13 14:05:46 +00:00
isBreadCrumbsLoading : false ,
withFooterInput : false ,
footerInputHeader : "" ,
footerCheckboxLabel : "" ,
currentFooterInputValue : "" ,
2023-06-16 09:41:23 +00:00
alwaysShowFooter : false ,
disableAcceptButton : false ,
2023-06-26 11:33:37 +00:00
descriptionText : "" ,
2023-06-13 14:05:46 +00:00
} ;
NewName . args = {
height : "485px" , // container height
headerLabel : "Room list" ,
onBackClick : ( ) = > { } ,
searchPlaceholder : "Search" ,
searchValue : "" ,
items : renderedItems ,
onSelect : ( item ) = > { } ,
isMultiSelect : false ,
selectedItems : selectedItems ,
acceptButtonLabel : "Add" ,
onAccept : ( items , access ) = > { } ,
withSelectAll : false ,
selectAllLabel : "All accounts" ,
selectAllIcon : ArchiveSvgUrl ,
onSelectAll : ( ) = > { } ,
withAccessRights : false ,
accessRights ,
selectedAccessRight ,
onAccessRightsChange : ( access ) = > { } ,
withCancelButton : false ,
cancelButtonLabel : "Cancel" ,
onCancel : ( ) = > { } ,
emptyScreenImage : EmptyScreenFilter ,
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." ,
searchEmptyScreenImage : EmptyScreenFilter ,
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." ,
totalItems ,
hasNextPage : true ,
isNextPageLoading : false ,
isLoading : false ,
withBreadCrumbs : true ,
breadCrumbs : [
{ id : 1 , label : "DocSpace" } ,
{ id : 2 , label : "1111111" } ,
{ id : 3 , label : "21222222222" } ,
] ,
onSelectBreadCrumb : ( item ) = > { } ,
breadCrumbsLoader : < StyledBreadCrumbsLoader / > ,
withoutBackButton : false ,
2023-06-16 09:41:23 +00:00
withSearch : false ,
2023-06-13 14:05:46 +00:00
isBreadCrumbsLoading : false ,
withFooterInput : true ,
footerInputHeader : "File name" ,
footerCheckboxLabel : "Open saved document in new tab" ,
currentFooterInputValue : "OldFIleName.docx" ,
2023-06-16 09:41:23 +00:00
alwaysShowFooter : false ,
disableAcceptButton : false ,
2023-06-26 11:33:37 +00:00
descriptionText : "" ,
2022-09-02 08:22:26 +00:00
} ;