@zohodesk/components
Version:
In this Package, we Provide Some Basic Components to Build Web App
607 lines (546 loc) • 26 kB
JavaScript
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _defaultProps = require("./props/defaultProps");
var _propTypes = require("./props/propTypes");
var _Popup = _interopRequireDefault(require("../Popup/Popup"));
var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
var _icons = require("@zohodesk/icons");
var _ListItemWithIcon = _interopRequireDefault(require("../ListItem/ListItemWithIcon"));
var _Card = _interopRequireWildcard(require("../Card/Card"));
var _EmptyState = _interopRequireDefault(require("../MultiSelect/EmptyState"));
var _Layout = require("../Layout");
var _IdProvider = require("../../Provider/IdProvider");
var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
var _CustomResponsive = require("../../Responsive/CustomResponsive");
var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
var _Common = require("../../utils/Common.js");
var _SelectModule = _interopRequireDefault(require("../../Select/Select.module.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var SelectWithIcon = /*#__PURE__*/function (_Component) {
_inherits(SelectWithIcon, _Component);
var _super = _createSuper(SelectWithIcon);
function SelectWithIcon(props) {
var _this;
_classCallCheck(this, SelectWithIcon);
_this = _super.call(this, props);
_this.state = {
searchValue: '',
selectedIndex: 0,
options: props.options,
isFetchingOptions: false
};
_this._isMounted = false;
_this.onSearchClear = _this.onSearchClear.bind(_assertThisInitialized(_this));
_this.onSearch = _this.onSearch.bind(_assertThisInitialized(_this));
_this.togglePopup = _this.togglePopup.bind(_assertThisInitialized(_this));
_this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
_this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
_this.handleMouseEnter = _this.handleMouseEnter.bind(_assertThisInitialized(_this));
_this.scrollContentRef = _this.scrollContentRef.bind(_assertThisInitialized(_this));
_this.itemRef = _this.itemRef.bind(_assertThisInitialized(_this));
_this.searchInputRef = _this.searchInputRef.bind(_assertThisInitialized(_this));
_this.inputRef = _this.inputRef.bind(_assertThisInitialized(_this));
_this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
_this.getNextAriaId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
_this.handleGetNextOptions = _this.handleGetNextOptions.bind(_assertThisInitialized(_this));
_this.handleFetchOptions = _this.handleFetchOptions.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(SelectWithIcon, [{
key: "componentDidMount",
value: function componentDidMount() {
this._isMounted = true;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._isMounted = false;
}
}, {
key: "inputRef",
value: function inputRef(el) {
this.input = el;
}
}, {
key: "itemRef",
value: function itemRef(ele, index, id) {
this["suggestion_".concat(id)] = ele;
}
}, {
key: "searchInputRef",
value: function searchInputRef(el) {
this.searchInput = el;
}
}, {
key: "scrollContentRef",
value: function scrollContentRef(el) {
var isPopupOpen = this.props.isPopupOpen;
if (isPopupOpen) {
this.optionsContainer = el;
}
}
}, {
key: "handleMouseEnter",
value: function handleMouseEnter(id, value, index, e) {
this.setState({
selectedIndex: index
});
}
}, {
key: "handleKeyDown",
value: function handleKeyDown(e) {
var _this2 = this;
var keyCode = e.keyCode;
var _this$state = this.state,
selectedIndex = _this$state.selectedIndex,
options = _this$state.options;
var _this$props = this.props,
idKey = _this$props.idKey,
valueKey = _this$props.valueKey,
isPopupOpen = _this$props.isPopupOpen,
selectedId = _this$props.selectedId;
if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
e.preventDefault(); //prevent body scroll
} else if (!isPopupOpen && (keyCode === 40 || keyCode === 13)) {
e.preventDefault(); //prevent body scroll
this.togglePopup(e);
options.map(function (list, index) {
if (list.id === selectedId) {
_this2.setState({
selectedIndex: index
});
}
});
}
if (isPopupOpen) {
switch (keyCode) {
case 40:
if (selectedIndex === options.length - 1) {
this.setState({
selectedIndex: 0
});
} else {
if (selectedIndex === options.length - 3) {
this.handleGetNextOptions();
}
this.setState({
selectedIndex: selectedIndex + 1
});
}
break;
case 38:
if (selectedIndex === 0) {
this.setState({
selectedIndex: options.length - 1
});
} else {
this.setState({
selectedIndex: selectedIndex - 1
});
}
break;
case 13:
{
var option = options[selectedIndex];
this.handleChange && this.handleChange(option[idKey], option[valueKey], selectedIndex, e);
break;
}
}
}
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this3 = this;
var _this$props2 = this.props,
idKey = _this$props2.idKey,
isPopupOpen = _this$props2.isPopupOpen,
needSearch = _this$props2.needSearch;
var _this$state2 = this.state,
selectedIndex = _this$state2.selectedIndex,
options = _this$state2.options;
if (prevProps.isPopupOpen != isPopupOpen) {
setTimeout(function () {
isPopupOpen ? needSearch ? _this3.searchInput.focus({
preventScroll: true
}) : _this3.input.focus({
preventScroll: true
}) : _this3.input.focus({
preventScroll: true
});
}, 10);
}
var option = options[selectedIndex];
var id = option && option[idKey] || {};
var selSuggestion = this["suggestion_".concat(id)];
if (isPopupOpen) {
this.optionsContainer && (0, _Common.scrollTo)(this.optionsContainer, selSuggestion);
}
}
}, {
key: "searchList",
value: function searchList(searchValue) {
var datas = [];
var _this$props3 = this.props,
options = _this$props3.options,
valueKey = _this$props3.valueKey;
if (options.length) {
datas = options.filter(function (obj) {
return obj[valueKey].toLowerCase().includes(searchValue.toLowerCase());
});
}
return datas;
}
}, {
key: "onSearchClear",
value: function onSearchClear() {
var options = this.searchList(''); // this.searchInput.focus({preventScroll:false});
this.setState({
searchValue: '',
options: options
});
}
}, {
key: "onSearch",
value: function onSearch(searchValue) {
var options = this.searchList(searchValue);
this.setState({
searchValue: searchValue,
selectedIndex: -1,
options: options
});
}
}, {
key: "togglePopup",
value: function togglePopup(e) {
var _this$props4 = this.props,
togglePopup = _this$props4.togglePopup,
isReadOnly = _this$props4.isReadOnly,
boxPosition = _this$props4.boxPosition;
!isReadOnly && togglePopup(e, boxPosition);
}
}, {
key: "handleChange",
value: function handleChange(id, value, index, e) {
var _this$props5 = this.props,
onChange = _this$props5.onChange,
isReadOnly = _this$props5.isReadOnly;
!isReadOnly && onChange && onChange(id, value, index, e);
this.togglePopup(e);
}
}, {
key: "handleScroll",
value: function handleScroll(e) {
var ele = e.target;
var isScrollReachedBottom = (0, _Common.findScrollEnd)(ele);
isScrollReachedBottom && this.handleGetNextOptions();
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.options.length != this.props.options.length) {
this.setState({
options: nextProps.options
});
}
}
}, {
key: "handleGetNextOptions",
value: function handleGetNextOptions() {
var _this$props6 = this.props,
isNextOptions = _this$props6.isNextOptions,
getNextOptions = _this$props6.getNextOptions;
var searchValue = this.state.searchValue;
isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchValue);
}
}, {
key: "handleFetchOptions",
value: function handleFetchOptions(APICall) {
var _this4 = this;
var searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var _this$state$isFetchin = this.state.isFetchingOptions,
isFetchingOptions = _this$state$isFetchin === void 0 ? false : _this$state$isFetchin;
var _isMounted = this._isMounted;
if (!isFetchingOptions && APICall) {
this.setState({
isFetchingOptions: true
});
try {
return APICall(searchValue).then(function () {
_isMounted && _this4.setState({
isFetchingOptions: false
});
}, function () {
_isMounted && _this4.setState({
isFetchingOptions: false
});
});
} catch (e) {
_isMounted && this.setState({
isFetchingOptions: false
});
}
}
}
}, {
key: "responsiveFunc",
value: function responsiveFunc(_ref) {
var mediaQueryOR = _ref.mediaQueryOR;
return {
tabletMode: mediaQueryOR([{
maxWidth: 700
}])
};
}
}, {
key: "render",
value: function render() {
var _this5 = this;
var _this$props7 = this.props,
animationStyle = _this$props7.animationStyle,
removeClose = _this$props7.removeClose,
selectedValue = _this$props7.selectedValue,
searchBoxPlaceHolder = _this$props7.searchBoxPlaceHolder,
needSearch = _this$props7.needSearch,
searchEmptyMessage = _this$props7.searchEmptyMessage,
dataId = _this$props7.dataId,
maxLength = _this$props7.maxLength,
isDisabled = _this$props7.isDisabled,
isReadOnly = _this$props7.isReadOnly,
placeHolder = _this$props7.placeHolder,
textBoxSize = _this$props7.textBoxSize,
textBoxVariant = _this$props7.textBoxVariant,
selectedId = _this$props7.selectedId,
isPopupOpen = _this$props7.isPopupOpen,
isPopupReady = _this$props7.isPopupReady,
position = _this$props7.position,
getContainerRef = _this$props7.getContainerRef,
isAbsolutePositioningNeeded = _this$props7.isAbsolutePositioningNeeded,
positionsOffset = _this$props7.positionsOffset,
targetOffset = _this$props7.targetOffset,
isRestrictScroll = _this$props7.isRestrictScroll,
valueKey = _this$props7.valueKey,
idKey = _this$props7.idKey,
needListBorder = _this$props7.needListBorder,
needTick = _this$props7.needTick,
size = _this$props7.size,
borderColor = _this$props7.borderColor,
title = _this$props7.title,
className = _this$props7.className,
needBorder = _this$props7.needBorder,
searchBoxSize = _this$props7.searchBoxSize,
getTargetRef = _this$props7.getTargetRef,
needResponsive = _this$props7.needResponsive,
boxSize = _this$props7.boxSize,
dropBoxSize = _this$props7.dropBoxSize,
emptyMessage = _this$props7.emptyMessage,
needIcon = _this$props7.needIcon,
iconName = _this$props7.iconName,
iconSize = _this$props7.iconSize,
iconClass = _this$props7.iconClass,
i18nKeys = _this$props7.i18nKeys,
htmlId = _this$props7.htmlId,
isLoading = _this$props7.isLoading,
dataSelectorId = _this$props7.dataSelectorId;
i18nKeys = Object.assign({}, i18nKeys, {
emptyText: i18nKeys.emptyText || emptyMessage,
searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
});
var _this$state3 = this.state,
searchValue = _this$state3.searchValue,
selectedIndex = _this$state3.selectedIndex,
options = _this$state3.options,
isFetchingOptions = _this$state3.isFetchingOptions;
var setAriaId = this.getNextAriaId();
var ariaErrorId = this.getNextAriaId();
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
"data-title": isDisabled ? title : null,
"data-selector-id": dataSelectorId
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(className ? className : ''),
onClick: isDisabled || isReadOnly ? null : this.togglePopup,
ref: getTargetRef,
"data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
"data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
}, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
alignBox: "row"
}, needIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
align: "both",
className: "".concat(_SelectModule["default"].leftIcon, " ").concat(isDisabled ? _SelectModule["default"].disable : '')
}, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
name: iconName,
size: iconSize,
iconClass: iconClass,
dataId: "".concat(dataId, "_icon")
})) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
flexible: true
}, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
a11y: {
role: 'combobox',
ariaLabel: 'click to select options',
ariaControls: setAriaId,
ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
ariaHaspopup: true,
ariaReadonly: true,
ariaActivedescendant: selectedId,
ariaOwns: setAriaId
},
htmlId: htmlId,
value: selectedValue,
isReadOnly: true,
needReadOnlyStyle: isReadOnly ? true : false,
dataId: "".concat(dataId, "_textBox"),
maxLength: maxLength,
needBorder: needBorder,
isDisabled: isDisabled,
placeHolder: placeHolder,
size: textBoxSize,
variant: textBoxVariant,
iconRotated: isPopupOpen,
inputRef: this.inputRef,
onKeyDown: this.handleKeyDown,
isClickable: isReadOnly || isDisabled ? false : true,
customClass: {
customTBoxWrap: "".concat(isReadOnly || isDisabled ? '' : _SelectModule["default"].input, " ").concat(needIcon ? _SelectModule["default"].iconSelect : '')
},
needEffect: isReadOnly || isDisabled ? false : true,
borderColor: borderColor,
autoComplete: false,
isFocus: isPopupReady
}, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
align: "both",
dataId: "".concat(dataId, "_downIcon")
}, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
name: "ZD-down",
size: "7"
})))))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
query: this.responsiveFunc,
responsiveId: "Helmet"
}, function (_ref2) {
var tabletMode = _ref2.tabletMode;
return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
animationStyle: animationStyle,
boxPosition: position,
isActive: isPopupReady,
isAnimate: true,
isArrow: false,
onClick: removeClose,
getRef: getContainerRef,
needResponsive: needResponsive,
isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
positionsOffset: positionsOffset,
targetOffset: targetOffset,
isRestrictScroll: isRestrictScroll,
dataId: "".concat(dataId, "_suggestions"),
size: boxSize,
isPadding: false,
isResponsivePadding: true,
alignBox: "row"
}, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
align: "both",
className: _SelectModule["default"].loader
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
flexible: true
}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
onScroll: _this5.handleScroll,
htmlId: setAriaId,
a11y: {
role: 'listbox'
}
}, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
}, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
onClear: _this5.onSearchClear,
onChange: _this5.onSearch,
placeHolder: searchBoxPlaceHolder,
value: searchValue,
maxLength: maxLength,
onKeyDown: _this5.handleKeyDown,
inputRef: _this5.searchInputRef,
size: searchBoxSize,
dataId: "".concat(dataId, "_search"),
a11y: {
ariaDescribedby: ariaErrorId
},
autoComplete: false
}))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
customClass: "".concat(tabletMode ? _SelectModule["default"].responsivedropBoxList : _SelectModule["default"].dropBoxList, " ").concat(!tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : ''),
shrink: true,
eleRef: _this5.scrollContentRef,
dataId: "".concat(dataId, "_Options")
}, options.length ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (options, i) {
var iconName = options.iconName,
iconSize = options.iconSize,
iconColor = options.iconColor;
return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
key: options[idKey],
value: options[valueKey],
size: "medium",
onClick: _this5.handleChange,
id: options[idKey],
index: i,
title: options[valueKey],
palette: "default",
dataId: options[idKey],
iconName: iconName,
iconSize: iconSize,
iconClass: iconColor,
active: selectedId === options[idKey],
needBorder: needListBorder,
needTick: needTick,
onMouseEnter: _this5.handleMouseEnter,
highlight: selectedIndex === i,
getRef: _this5.itemRef,
a11y: {
role: 'option',
ariaSelected: selectedId === options[idKey],
ariaLabel: options[valueKey]
}
});
})) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
isLoading: isFetchingOptions,
options: options,
searchString: searchValue,
suggestions: options,
dataId: dataId,
i18nKeys: i18nKeys,
htmlId: ariaErrorId
}), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
isCover: false,
align: "both"
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))))));
}) : null);
}
}]);
return SelectWithIcon;
}(_react.Component);
SelectWithIcon.propTypes = _propTypes.SelectWithIcon_propTypes;
SelectWithIcon.defaultProps = _defaultProps.SelectWithIcon_defaultProps;
var SelectWithIconComponent = (0, _Popup["default"])(SelectWithIcon);
SelectWithIconComponent.defaultProps = SelectWithIcon.defaultProps;
SelectWithIconComponent.propTypes = SelectWithIcon.propTypes; // if (__DOCS__) {
// SelectWithIcon.docs = {
// componentGroup: 'Form Elements',
// folderName: 'Style Guide'
// };
// }
var _default = SelectWithIconComponent;
exports["default"] = _default;