@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
363 lines (319 loc) • 17.1 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 _hooks = require("@zohodesk/hooks");
var _defaultProps = require("./props/defaultProps");
var _propTypes = require("./props/propTypes");
var _icons = require("@zohodesk/icons");
var _Popup = _interopRequireDefault(require("@zohodesk/components/es/v1/Popup/Popup"));
var _Layout = require("@zohodesk/components/es/v1/Layout");
var _DropDownHeading = _interopRequireDefault(require("@zohodesk/components/es/v1/DropDown/DropDownHeading"));
var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/es/v1/TextBoxIcon/TextBoxIcon"));
var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
var _EmptySearch = _interopRequireDefault(require("@zohodesk/svg/lib/emptystate/version3/EmptySearch"));
var _CommonEmptyState = _interopRequireDefault(require("../../../emptystate/CommonEmptyState/CommonEmptyState"));
var _StatusListItem = _interopRequireDefault(require("../StatusListItem/StatusListItem"));
var _commonModule = _interopRequireDefault(require("@zohodesk/components/es/common/common.module.css"));
var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox"));
var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
var _StatusDropdownModule = _interopRequireDefault(require("../../../../list/status/StatusDropdown/StatusDropdown.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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function StatusDropdown(props) {
var value = props.value,
removeClose = props.removeClose,
boxSize = props.boxSize,
keyName = props.keyName,
idName = props.idName,
title = props.title,
isSearch = props.isSearch,
isArrow = props.isArrow,
placeHolderText = props.placeHolderText,
className = props.className,
right = props.right,
left = props.left,
top = props.top,
bottom = props.bottom,
isOpen = props.isPopupOpen,
isPopupReady = props.isPopupReady,
position = props.position,
getTargetRef = props.getTargetRef,
getContainerRef = props.getContainerRef,
dataId = props.dataId,
searchBoxSize = props.searchBoxSize,
searchEmptyHint = props.searchEmptyHint,
searchErrorText = props.searchErrorText,
activeStyle = props.activeStyle,
_props$showOnHover = props.showOnHover,
showOnHover = _props$showOnHover === void 0 ? false : _props$showOnHover,
isDisabled = props.isDisabled,
showIconOnHover = props.showIconOnHover,
isReadOnly = props.isReadOnly,
hoverStyle = props.hoverStyle,
isEditable = props.isEditable,
needTick = props.needTick,
dataTitle = props.dataTitle,
isDataLoaded = props.isDataLoaded,
children = props.children,
targetAlign = props.targetAlign,
needResponsive = props.needResponsive,
arrowIconPosition = props.arrowIconPosition,
statusColor = props.statusColor,
_props$needExternalPo = props.needExternalPopupState,
needExternalPopupState = _props$needExternalPo === void 0 ? false : _props$needExternalPo,
_props$isPopupActive = props.isPopupActive,
isPopupActive = _props$isPopupActive === void 0 ? false : _props$isPopupActive,
needMultiLineText = props.needMultiLineText,
boxPosition = props.boxPosition,
togglePopup = props.togglePopup,
onTogglePopup = props.onTogglePopup,
onClick = props.onClick,
onSelectLabel = props.onSelectLabel,
isFetchingOptions = props.isFetchingOptions,
getNextOptions = props.getNextOptions,
options = props.options,
isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
isRestrictScroll = props.isRestrictScroll,
positionsOffset = props.positionsOffset,
targetOffset = props.targetOffset,
renderTargetElement = props.renderTargetElement,
renderFooterElement = props.renderFooterElement,
_props$a11y = props.a11y,
a11y = _props$a11y === void 0 ? {} : _props$a11y;
var _useState = (0, _react.useState)(options),
_useState2 = _slicedToArray(_useState, 2),
optionsList = _useState2[0],
setOptionsList = _useState2[1];
var _useState3 = (0, _react.useState)(''),
_useState4 = _slicedToArray(_useState3, 2),
searchString = _useState4[0],
setSearchString = _useState4[1];
var getAriaId = (0, _IdProvider.useUniqueId)();
var _a11y$tabIndex = a11y.tabIndex,
tabIndex = _a11y$tabIndex === void 0 ? 0 : _a11y$tabIndex,
ariaLabelledby = a11y.ariaLabelledby,
ariaLabel = a11y.ariaLabel;
var isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
var containerClass = "".concat(className ? className : '', " ").concat(isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? _StatusDropdownModule["default"].hoverIcon : '', " ").concat(isDisabled ? _commonModule["default"].disabled : isReadOnly ? _StatusDropdownModule["default"].readOnly : !isEditable ? _StatusDropdownModule["default"].cursorDefault : !showOnHover ? "".concat(_StatusDropdownModule["default"].cursor, " ").concat(hoverStyle ? hoverStyle : '') : "".concat(hoverStyle ? hoverStyle : '', " ").concat(_StatusDropdownModule["default"].cursorDefault));
var ariaTitleId = getAriaId();
function emptySearchSVG() {
return /*#__PURE__*/_react["default"].createElement(_EmptySearch["default"], {
size: "small"
});
}
function handleTogglePopup(e) {
!isPopupOpen && onSelectLabel && onSelectLabel(e);
onTogglePopup && onTogglePopup(isPopupOpen);
togglePopup(e, boxPosition);
}
function onSelect(element, e) {
onClick && onClick(e, element);
onTogglePopup && onTogglePopup(isPopupOpen);
togglePopup(e);
}
function searchList(value) {
var foptions = options.filter(function (dept) {
return dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1;
});
return foptions;
}
function handleChange(value, e) {
var foptions = searchList(value);
setSearchString(value);
setOptionsList(foptions);
}
function onSearchClear() {
var foptions = searchList('');
setSearchString('');
setOptionsList(foptions);
}
function handleScroll(e) {
if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
getNextOptions && getNextOptions(e);
}
}
function responsiveFunc(_ref) {
var mediaQueryOR = _ref.mediaQueryOR;
return {
tabletMode: mediaQueryOR([{
maxWidth: 700
}])
};
}
(0, _hooks.useEffectCallOnlyAfterState)(function () {
setOptionsList(options);
}, [options.length]);
(0, _hooks.useEffectCallOnlyAfterState)(function () {
isPopupOpen && onSearchClear();
}, [isPopupOpen]);
return /*#__PURE__*/_react["default"].createElement("div", {
className: _StatusDropdownModule["default"].posRel,
onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined,
onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : undefined
}, renderTargetElement ? renderTargetElement({
handleTogglePopup: handleTogglePopup,
isPopupOpen: isPopupOpen,
getTargetRef: getTargetRef
}) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
tagName: "button",
alignBox: "row",
className: "".concat(_StatusDropdownModule["default"].container, " ").concat(containerClass, " ").concat(_semanticButtonModule["default"].buttonReset),
onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable ? handleTogglePopup : null,
eleRef: getTargetRef,
align: targetAlign,
isCover: false,
dataId: dataId,
disabled: isDisabled || isReadOnly ? true : false,
"aria-haspopup": isSearch ? 'listbox' : 'menu',
"aria-expanded": isPopupReady && isEditable ? true : false,
tabIndex: tabIndex,
"aria-labelledby": ariaLabelledby,
"aria-label": ariaLabel,
"aria-disabled": isDisabled || isReadOnly
}, children ? children : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
className: "".concat(_StatusDropdownModule["default"].value, " toggleDropText"),
shrink: true,
tagName: "span",
"data-title": dataTitle,
dataId: "".concat(dataId, "_value")
}, value), isEditable ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
"aria-hidden": true,
size: "7",
name: "ZD-down",
iconClass: 'toggleDropIcon'.concat(" ", _StatusDropdownModule["default"].arrow, " ").concat(_StatusDropdownModule["default"]["".concat(arrowIconPosition, "_arrow")]),
dataId: "statusdownarrow"
}) : null), isPopupOpen && isEditable ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
query: responsiveFunc,
responsiveId: "Helmet"
}, function (_ref2) {
var tabletMode = _ref2.tabletMode;
return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
boxPosition: position,
isActive: isPopupReady,
onClick: removeClose,
size: boxSize,
right: right,
left: left,
top: top,
bottom: bottom,
isArrow: isArrow,
isAnimate: true,
getRef: getContainerRef,
customClass: {
customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer
},
needResponsive: needResponsive,
isResponsivePadding: true,
needFocusScope: true,
onClose: handleTogglePopup,
dataId: "".concat(dataId, "_dropbox"),
isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
isRestrictScroll: isRestrictScroll,
positionsOffset: positionsOffset,
targetOffset: targetOffset,
customProps: {
focusScopeProps: {
searchValue: searchString,
loadNextOptions: getNextOptions,
isFetchingOptions: isFetchingOptions
}
}
}, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
className: _StatusDropdownModule["default"].search
}, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
placeHolder: placeHolderText,
onChange: handleChange,
value: searchString,
onClear: onSearchClear,
size: searchBoxSize,
customProps: {
TextBoxProps: {
'data-a11y-autofocus': true
}
},
a11y: {
ariaHaspopup: isSearch ? 'listbox' : 'menu',
ariaExpanded: isPopupReady,
role: 'combobox',
ariaActivedescendant: isPopupReady ? value : '',
ariaOwns: ariaTitleId
},
dataId: "".concat(dataId, "_search")
})) : null, title && optionsList.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
className: _StatusDropdownModule["default"].title
}, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
htmlId: ariaTitleId,
text: title,
a11y: {
role: 'heading'
}
})), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
scroll: "vertical",
flexible: true,
shrink: true,
dataId: "".concat(dataId, "_list"),
preventParentScroll: "vertical",
className: "".concat(tabletMode ? _StatusDropdownModule["default"].responsivemaxHgt : _StatusDropdownModule["default"].maxHgt),
onScroll: handleScroll,
role: isSearch ? 'listbox' : 'menu',
tabindex: "-1",
isScrollAttribute: true
}, optionsList.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, optionsList.map(function (item, i) {
var listItemText = item[keyName];
var isActive = value === listItemText;
return /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], {
key: i,
dataId: "dataid_".concat(i),
value: listItemText,
id: item[idName],
active: isActive,
onClick: function onClick(e) {
return onSelect(item, e);
},
index: i,
needTick: needTick,
needBorder: false,
bulletColor: item[statusColor],
title: listItemText,
needMultiLineText: needMultiLineText,
autoHover: true,
a11y: {
role: isSearch ? 'option' : 'menuitem',
ariaSelected: isActive,
ariaLabel: listItemText
}
});
}), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
isCover: false,
align: "both"
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
className: _StatusDropdownModule["default"].svgWrapper,
title: searchErrorText || 'No results',
description: searchEmptyHint,
size: "small",
getEmptyState: emptySearchSVG
}) : /*#__PURE__*/_react["default"].createElement("div", {
className: _StatusDropdownModule["default"].loader
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), renderFooterElement ? renderFooterElement : null));
}) : null);
}
StatusDropdown.defaultProps = _defaultProps.defaultProps;
StatusDropdown.propTypes = _propTypes.propTypes;
var StatusDropdown_Component = (0, _Popup["default"])(StatusDropdown);
StatusDropdown_Component.defaultProps = _defaultProps.defaultProps;
StatusDropdown_Component.propTypes = _propTypes.propTypes;
var _default = StatusDropdown_Component;
exports["default"] = _default;