@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
218 lines (208 loc) • 7.84 kB
JavaScript
/**** Libraries ****/
import React from 'react';
import { MultiSelectWithAvatar_propTypes } from "./props/propTypes";
import { MultiSelectWithAvatar_defaultProps } from "./props/defaultProps";
import { defaultProps as MobileHeader_defaultProps } from "./MobileHeader/props/defaultProps";
import { MULTISELECT_I18N_KEYS } from "./constants";
/**** Components ****/
import { MultiSelectComponent } from "./MultiSelect";
import Popup from "../Popup/Popup";
import { Container, Box } from "../Layout";
import Card, { CardContent, CardHeader } from "../Card/Card";
import Suggestions from "./Suggestions";
import EmptyState from "./EmptyState";
import CssProvider from "../Provider/CssProvider";
import { getUniqueId } from "../Provider/IdProvider";
import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox"; // import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
import Loader from '@zohodesk/svg/lib/Loader/Loader';
import MultiSelectHeader from "./MultiSelectHeader";
import isMobilePopover from "../DropBox/utils/isMobilePopover";
/**** CSS ****/
import style from "./MultiSelect.module.css";
import MobileHeader from "./MobileHeader/MobileHeader";
/*eslint-disable react/sort-prop-types*/
/* eslint-disable react/forbid-component-props */
/* eslint-disable react/no-unused-prop-types */
class MultiSelectWithAvatarComponent extends MultiSelectComponent {
constructor(props) {
super(props);
this.handleFormatOptions = this.handleFormatOptions.bind(this);
this.getNextAriaId = getUniqueId(this);
}
handleFormatOptions(props) {
const {
options,
valueField,
textField,
imageField,
disabledOptions,
allowValueFallback,
searchFields,
secondaryField
} = props;
return this.formatOptions({
options,
valueField,
textField,
imageField,
optionType: 'avatar',
disabledOptions,
allowValueFallback,
searchFields,
secondaryField
});
}
render() {
let {
isReadOnly,
needSelectAll,
searchEmptyMessage,
emptyMessage,
noMoreOptionsMessage,
dropBoxSize,
isPopupOpen,
isPopupReady,
position,
defaultDropBoxPosition,
selectAllText,
getContainerRef,
removeClose,
isAbsolutePositioningNeeded,
positionsOffset,
targetOffset,
isRestrictScroll,
isAnimate,
animationStyle,
isDisabled,
title,
dataId,
dataSelectorId,
needResponsive,
borderColor,
disableAction,
palette,
i18nKeys,
isBoxPaddingNeed,
needEffect,
isLoading,
keepSelectedOptions,
customProps,
limit
} = this.props;
let {
SuggestionsProps = {}
} = customProps;
let {
limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
} = i18nKeys;
i18nKeys = Object.assign({}, MobileHeader_defaultProps.i18nKeys, i18nKeys, {
emptyText: i18nKeys.emptyText || emptyMessage,
searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage,
noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
});
const {
selectedOptions,
searchStr,
hoverOption,
options,
isFetchingOptions,
selectedOptionIds
} = this.state;
const suggestions = this.handleFilterSuggestions();
const setAriaId = this.getNextAriaId();
const ariaErrorId = this.getNextAriaId();
const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
let isModel = isMobilePopover(needResponsive);
return /*#__PURE__*/React.createElement("div", {
className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
"data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
"data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
"data-title": isDisabled ? title : null,
onClick: this.handleInputFocus,
"data-selector-id": dataSelectorId
}, this.getSelectionUI(), popUpState ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
animationStyle: animationStyle,
boxPosition: position || `${defaultDropBoxPosition}Center`,
getRef: getContainerRef,
isActive: isPopupReady,
isAnimate: isAnimate,
isArrow: false,
onClick: removeClose,
needResponsive: needResponsive,
isPadding: false,
isBoxPaddingNeed: isBoxPaddingNeed,
isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
positionsOffset: positionsOffset,
targetOffset: targetOffset,
isRestrictScroll: isRestrictScroll,
palette: palette,
htmlId: setAriaId,
a11y: {
ariaMultiselectable: true,
role: 'listbox'
},
isResponsivePadding: true,
alignBox: "row",
dataId: `${dataId}_dropbox`
}, /*#__PURE__*/React.createElement(Box, {
flexible: true
}, /*#__PURE__*/React.createElement(Card, {
customClass: `${style.box} ${style[`${palette}Box`]}`,
onScroll: this.handleScroll
}, isModel ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileHeader, {
selectedOptions: selectedOptions,
i18nKeys: i18nKeys,
onClick: this.handlePopupClose
}, /*#__PURE__*/React.createElement("div", {
className: style.effect
}, this.getSelectionUI(true)))) : null, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
onSelect: this.handleSelectAll,
selectAllText: selectAllText,
suggestions: suggestions,
dataId: dataId
})) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
align: "both",
className: style.loader
}, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
shrink: true,
customClass: !isModel && dropBoxSize ? style[dropBoxSize] : '',
eleRef: this.suggestionContainerRef
}, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
needTick: keepSelectedOptions,
suggestions: suggestions,
getRef: this.suggestionItemRef,
hoverOption: hoverOption,
onClick: this.handleSelectOption,
onMouseEnter: this.handleMouseEnter,
needBorder: false,
dataId: `${dataId}_Options`,
palette: palette,
selectedOptions: selectedOptionIds,
a11y: {
role: 'option'
},
limit: limit,
limitReachedMessage: limitReachedMessage,
...SuggestionsProps
}) : /*#__PURE__*/React.createElement(EmptyState, {
isLoading: isFetchingOptions,
options: options,
searchString: searchStr,
suggestions: suggestions,
dataId: dataId,
palette: palette,
i18nKeys: i18nKeys,
htmlId: ariaErrorId
}), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
isCover: false,
align: "both"
}, /*#__PURE__*/React.createElement(Loader, null)))))) : null);
}
}
MultiSelectWithAvatarComponent.propTypes = MultiSelectWithAvatar_propTypes;
MultiSelectWithAvatarComponent.defaultProps = MultiSelectWithAvatar_defaultProps;
MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
const MultiSelectWithAvatar = Popup(MultiSelectWithAvatarComponent);
MultiSelectWithAvatar.defaultProps = MultiSelectWithAvatarComponent.defaultProps;
MultiSelectWithAvatar.propTypes = MultiSelectWithAvatarComponent.propTypes;
export default MultiSelectWithAvatar;