DocSpace-client/packages/components/selector

SelectedItem

Usage

import Selector from "@docspace/components/selector";

<Selector
  acceptButtonLabel="Add"
  accessRights={[]}
  cancelButtonLabel="Cancel"
  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."
  emptyScreenHeader="No other accounts here yet"
  emptyScreenImage={EmptyScreenFilterPng}
  hasNextPage={false}
  headerLabel="Room list"
  items={[]}
  isLoading={false}
  loadNextPage={() => {}}
  onAccept={function noRefCheck() {}}
  onAccessRightsChange={function noRefCheck() {}}
  onBackClick={function noRefCheck() {}}
  onCancel={function noRefCheck() {}}
  onClearSearch={function noRefCheck() {}}
  onSearch={function noRefCheck() {}}
  onSelect={function noRefCheck() {}}
  onSelectAll={function noRefCheck() {}}
  rowLoader={<></>}
  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."
  searchEmptyScreenHeader="No other accounts here yet search"
  searchEmptyScreenImage={EmptyScreenFilterPng}
  searchLoader={<></>}
  searchPlaceholder="Search"
  searchValue=""
  selectAllIcon={RoomArchiveSvgUrl}
  selectAllLabel="All accounts"
  selectedAccessRight={{}}
  selectedItems={[]}
  totalItems={0}
/>

Properties

Props	Type	Required	Values	Default	Description
id	string	-	-	-	Accepts id
className	string	-	-	-	Accepts class
style	obj, array	-	-	-	Accepts css style
headerLabel	string	-	-	-	Selector header text
onBackClick	func	-	-	-	What the header arrow will trigger when clicked
searchPlaceholder	string	-	-	-	Placeholder for search input
onSearch	func	-	-	-	What the search input will trigger when user stopped typing
onClearSearch	func	-	-	-	What the clear icon of search input will trigger when clicked
items	array	-	-	-	Displaying items
onSelect	func	-	-	-	What the item will trigger when clicked
isMultiSelect	bool	-	-	false	Allows you to select multiple objects
selectedItems	array	-	-	[]	Tells when the items should present a checked state
acceptButtonLabel	string	-	-	-	Accept button text
onAccept	func	-	-	-	What the accept button will trigger when clicked
withSelectAll	bool	-	-	false	Add option for select all items
selectAllLabel	string	-	-	-	Text for select all component
selectAllIcon	string	-	-	-	Icon for select all component
onSelectAll	func	-	-	-	What the select all will trigger when clicked
withAccessRights	bool	-	-	false	Add combobox for displaying access rights at footer
accessRights	array	-	-	-	Access rights items
selectedAccessRight	object	-	-	-	Selected access rights items
onAccessRightsChange	func	-	-	-	What the access right will trigger when changed
withCancelButton	bool	-	-	false	Add cancel button at footer
cancelButtonLabel	string	-	-	-	Displaying text at cancel button
onCancel	func	-	-	-	What the cancel button will trigger when clicked
emptyScreenImage	string	-	-	-	Image for default empty screen
emptyScreenHeader	string	-	-	-	Header for default empty screen
emptyScreenDescription	string	-	-	-	Description for default empty screen
searchEmptyScreenImage	string	-	-	-	Image for search empty screen
searchEmptyScreenHeader	string	-	-	-	Header for search empty screen
searchEmptyScreenDescription	string	-	-	-	Description for search empty screen
totalItems	number	-	-	-	Count items for infinity scroll
hasNextPage	bool	-	-	-	Has next page for infinity scroll
isNextPageLoading	bool	-	-	-	Tells when next page already loading
loadNextPage	func	-	-	-	Function for load next page
isLoading	bool	-	-	-	Set loading state for select
searchLoader	node	-	-	-	Loader element for search block
rowLoader	node	-	-	-	Loader element for item