@zohodesk/components
Version:
In this Package, we Provide Some Basic Components to Build Web App
358 lines (341 loc) • 11.2 kB
JavaScript
/**** Libraries ****/
import React from 'react';
import { SelectWithAvatar_defaultProps } from "./props/defaultProps";
import { SelectWithAvatar_propTypes } from "./props/propTypes";
/**** Components ****/
import { SelectComponent } from "./Select";
import Popup from "../Popup/Popup";
import Tag from "../Tag/Tag";
import Textbox from "../TextBox/TextBox";
import TextBoxIcon from "../TextBoxIcon/TextBoxIcon";
import { Container, Box } from "../Layout";
import Card, { CardContent, CardHeader } from "../Card/Card";
import Suggestions from "../MultiSelect/Suggestions";
import EmptyState from "../MultiSelect/EmptyState";
import DropDownHeading from "../DropDown/DropDownHeading";
import { getUniqueId } from "../Provider/IdProvider";
import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
import { ResponsiveReceiver } from "../Responsive/CustomResponsive";
import Loader from '@zohodesk/svg/lib/Loader/Loader';
/**** CSS ****/
import style from "../MultiSelect/MultiSelect.module.css";
import selectStyle from "./Select.module.css";
class SelectWithAvatarComponent extends SelectComponent {
constructor(props) {
super(props);
this.isSelectWithAvatarComponent = true;
this.handleFormatOptions = this.handleFormatOptions.bind(this);
this.handleActive = this.handleActive.bind(this);
this.handleInactive = this.handleInactive.bind(this);
this.handleSearchChange = this.handleSearchChange.bind(this);
this.handleRemoveOption = this.handleRemoveOption.bind(this);
this.getNextAriaId = getUniqueId(this);
}
handleFormatOptions(props) {
let {
options,
valueField,
textField,
imageField,
allowValueFallback
} = props;
return this.formatOptions({
options,
valueField,
textField,
imageField,
optionType: 'avatar',
allowValueFallback
});
}
handleActive(e) {
let {
isActive
} = this.state;
if (!isActive) {
this.setState({
isActive: true
});
}
let {
target
} = e || {};
target && target.setSelectionRange(target, 0);
let {
onFocus
} = this.props;
onFocus && onFocus(this.state.searchStr);
}
handleInactive() {
let {
isActive
} = this.state;
if (isActive) {
this.setState({
isActive: false
});
}
}
handleSearchChange(e) {
let {
isPopupOpen
} = this.props;
!isPopupOpen && this.togglePopup(e);
this.handleSearch(e);
}
handleRemoveOption(e) {
let {
keyCode
} = e;
let {
searchStr = ''
} = this.state;
let {
isDefaultSelectValue
} = this.props;
if (keyCode === 8 && searchStr.length === 0 && !isDefaultSelectValue) {
this.handleChange('');
} else {
this.handleKeyDown(e);
}
}
responsiveFunc(_ref) {
let {
mediaQueryOR
} = _ref;
return {
tabletMode: mediaQueryOR([{
maxWidth: 700
}])
};
}
render() {
let {
dropBoxSize,
emptyMessage,
searchEmptyMessage,
needBorder,
position,
defaultDropBoxPosition,
getContainerRef,
isPopupOpen,
removeClose,
isPopupReady,
isAbsolutePositioningNeeded,
positionsOffset,
targetOffset,
isRestrictScroll,
animationStyle,
textBoxSize,
textBoxVariant,
maxLength,
isDisabled,
title,
size,
isReadOnly,
placeHolder,
className,
needResponsive,
dataId,
borderColor,
searchBoxPlaceHolder,
searchBoxSize,
needSearch,
textBoxClass,
onRemove,
avatarPalette,
tagSize,
groupName,
i18nKeys,
htmlId,
needEffect,
isLoading,
dataSelectorId,
getTargetRef
} = this.props;
i18nKeys = Object.assign({}, i18nKeys, {
emptyText: i18nKeys.emptyText || emptyMessage,
searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
});
let {
hoverIndex,
searchStr,
isFetchingOptions,
selectedId,
isActive,
options
} = this.state;
let suggestions = this.handleFilterSuggestions();
let {
id,
value: text,
photoURL
} = this.normalizedFormatOptions[selectedId] || {};
let setAriaId = this.getNextAriaId();
let ariaErrorId = this.getNextAriaId();
return /*#__PURE__*/React.createElement("div", {
className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
"data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
"data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
"data-title": isDisabled ? title : null,
"data-selector-id": dataSelectorId
}, /*#__PURE__*/React.createElement(Container, {
align: "vertical",
alignBox: "row",
className: `${style.container} ${style[size]} ${style[`borderColor_${borderColor}`]} ${isActive && needBorder ? style.active : ''} ${textBoxClass ? textBoxClass : ''} ${needBorder ? style.hasBorder : ''}`,
eleRef: getTargetRef,
onClick: !isDisabled && this.togglePopup
}, selectedId ? /*#__PURE__*/React.createElement(Box, {
className: style.tag,
"data-id": `${dataId}_SelectTag`,
"data-test-id": `${dataId}_SelectTag`,
key: `${id}tag`
}, /*#__PURE__*/React.createElement(Tag, {
avatarPalette: avatarPalette,
hasAvatar: true,
id: id,
imageURL: photoURL,
initial: text,
onRemove: onRemove,
text: text,
disabled: isReadOnly || isDisabled,
size: tagSize
})) : null, /*#__PURE__*/React.createElement(Box, {
flexible: true,
className: style.textBox,
dataId: `${dataId}_textBox`
}, /*#__PURE__*/React.createElement(Textbox, {
a11y: {
ariaActivedescendant: selectedId,
role: 'combobox',
ariaControls: setAriaId,
ariaOwns: setAriaId,
ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
ariaHaspopup: true,
ariaReadonly: true
},
isDisabled: isDisabled,
needEffect: isReadOnly || isDisabled ? false : true,
inputRef: this.valueInputRef,
maxLength: maxLength,
needBorder: false,
onBlur: this.handleInactive,
onChange: this.handleSearchChange,
onFocus: this.handleActive,
onKeyDown: this.handleRemoveOption,
onKeyPress: this.handleValueInputChange,
placeHolder: !selectedId ? placeHolder : '',
size: textBoxSize,
variant: textBoxVariant,
needReadOnlyStyle: isReadOnly ? true : false,
isReadOnly: true,
isClickable: isReadOnly || isDisabled ? false : true,
borderColor: borderColor,
htmlId: htmlId,
autoComplete: false
}))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
query: this.responsiveFunc,
responsiveId: "Helmet"
}, _ref2 => {
let {
tabletMode
} = _ref2;
return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
animationStyle: animationStyle,
boxPosition: position || `${defaultDropBoxPosition}Center`,
getRef: getContainerRef,
isActive: isPopupReady,
isAnimate: true,
isArrow: false,
onClick: removeClose,
needResponsive: needResponsive,
isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
positionsOffset: positionsOffset,
targetOffset: targetOffset,
isRestrictScroll: isRestrictScroll,
isPadding: false,
isResponsivePadding: true,
alignBox: "row",
dataId: `${dataId}_dropbox`
}, isLoading ? /*#__PURE__*/React.createElement(Container, {
align: "both",
className: style.loader
}, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
flexible: true
}, /*#__PURE__*/React.createElement(Card, {
onScroll: this.handleScroll
}, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
className: `${selectStyle.search} ${selectStyle[size]}`
}, /*#__PURE__*/React.createElement(TextBoxIcon, {
inputRef: this.searchInputRef,
maxLength: maxLength,
onChange: this.handleSearch,
onKeyDown: this.handleKeyDown,
placeHolder: searchBoxPlaceHolder,
size: searchBoxSize,
value: searchStr,
onClear: this.handleClearSearch,
dataId: `${dataId}_search`,
a11y: {
ariaAutocomplete: 'list',
ariaControls: setAriaId,
ariaDescribedby: ariaErrorId
},
autoComplete: false
}))) : null, /*#__PURE__*/React.createElement(CardContent, {
shrink: true,
customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
eleRef: this.suggestionContainerRef
}, groupName ? /*#__PURE__*/React.createElement("div", {
className: style.title
}, /*#__PURE__*/React.createElement(DropDownHeading, {
text: groupName,
a11y: {
role: 'heading'
}
})) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
dataId: `${dataId}_Options`,
activeId: selectedId,
suggestions: suggestions,
getRef: this.suggestionItemRef,
hoverOption: hoverIndex,
onClick: this.handleChange,
onMouseEnter: this.handleMouseEnter,
needTick: true,
needBorder: false,
selectedOptions: [selectedId],
className: selectStyle.listItemContainer,
htmlId: setAriaId,
a11y: {
ariaParentRole: 'listbox',
role: 'option'
}
}) : /*#__PURE__*/React.createElement(EmptyState, {
isLoading: isFetchingOptions,
options: options,
searchString: searchStr,
suggestions: suggestions,
dataId: dataId,
i18nKeys: i18nKeys,
htmlId: ariaErrorId
}), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
isCover: false,
align: "both"
}, /*#__PURE__*/React.createElement(Loader, null))))));
}) : null);
}
}
SelectWithAvatarComponent.propTypes = SelectWithAvatar_propTypes;
SelectWithAvatarComponent.defaultProps = SelectWithAvatar_defaultProps;
SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
let SelectWithAvatar = Popup(SelectWithAvatarComponent);
SelectWithAvatar.defaultProps = SelectWithAvatarComponent.defaultProps;
SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes; // if (__DOCS__) {
// SelectWithAvatar.docs = {
// componentGroup: 'Form Elements',
// folderName: 'Style Guide'
// };
// // eslint-disable-next-line react/forbid-foreign-prop-types
// SelectWithAvatar.propTypes = SelectWithAvatarComponent.propTypes;
// }
export default SelectWithAvatar;