@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
425 lines (383 loc) • 20.6 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"] = exports.StatusDropdown = void 0;
var _react = _interopRequireDefault(require("react"));
var _defaultProps = require("./props/defaultProps");
var _propTypes = require("./props/propTypes");
var _icons = require("@zohodesk/icons");
var _Popup = _interopRequireDefault(require("@zohodesk/components/es/Popup/Popup"));
var _Layout = require("@zohodesk/components/es/Layout");
var _DropDownHeading = _interopRequireDefault(require("@zohodesk/components/es/DropDown/DropDownHeading"));
var _TextBoxIcon = _interopRequireDefault(require("@zohodesk/components/es/TextBoxIcon/TextBoxIcon"));
var _Loader = _interopRequireDefault(require("@zohodesk/svg/es/Loader/Loader"));
var _EmptySearch = _interopRequireDefault(require("@zohodesk/svg/es/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/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("./StatusDropdown.module.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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 StatusDropdown = /*#__PURE__*/function (_React$Component) {
_inherits(StatusDropdown, _React$Component);
var _super = _createSuper(StatusDropdown);
function StatusDropdown(props) {
var _this;
_classCallCheck(this, StatusDropdown);
_this = _super.call(this, props);
_this.state = {
searchString: '',
options: props.options
};
_this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
_this.onSelect = _this.onSelect.bind(_assertThisInitialized(_this));
_this.handleTogglePopup = _this.handleTogglePopup.bind(_assertThisInitialized(_this));
_this.onSearchClear = _this.onSearchClear.bind(_assertThisInitialized(_this));
_this.searchList = _this.searchList.bind(_assertThisInitialized(_this));
_this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
_this.emptySearchSVG = _this.emptySearchSVG.bind(_assertThisInitialized(_this));
_this.getAriaId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
return _this;
}
_createClass(StatusDropdown, [{
key: "emptySearchSVG",
value: function emptySearchSVG() {
return /*#__PURE__*/_react["default"].createElement(_EmptySearch["default"], {
size: "small"
});
}
}, {
key: "handleTogglePopup",
value: function handleTogglePopup(e) {
var _this$props = this.props,
togglePopup = _this$props.togglePopup,
boxPosition = _this$props.boxPosition,
onSelectLabel = _this$props.onSelectLabel,
isPopupOpen = _this$props.isPopupOpen,
onTogglePopup = _this$props.onTogglePopup;
!isPopupOpen && onSelectLabel && onSelectLabel(e);
onTogglePopup && onTogglePopup(isPopupOpen);
togglePopup(e, boxPosition);
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.options.length != this.props.options.length) {
this.setState({
options: nextProps.options
});
}
}
}, {
key: "onSelect",
value: function onSelect(element, e) {
var _this$props2 = this.props,
onClick = _this$props2.onClick,
togglePopup = _this$props2.togglePopup,
isPopupOpen = _this$props2.isPopupOpen,
onTogglePopup = _this$props2.onTogglePopup;
onClick && onClick(e, element);
onTogglePopup && onTogglePopup(isPopupOpen);
togglePopup(e);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (!prevProps.isPopupOpen && this.props.isPopupOpen) {
this.onSearchClear();
}
}
}, {
key: "searchList",
value: function searchList(value) {
var _this$props3 = this.props,
options = _this$props3.options,
keyName = _this$props3.keyName;
var foptions = options.filter(function (dept) {
return dept[keyName].toLowerCase().indexOf(value.toLowerCase()) != -1;
});
return foptions;
}
}, {
key: "handleChange",
value: function handleChange(value, e) {
var foptions = this.searchList(value);
this.setState({
searchString: value,
options: foptions
});
}
}, {
key: "onSearchClear",
value: function onSearchClear() {
var foptions = this.searchList('');
this.setState({
searchString: '',
options: foptions
});
}
}, {
key: "handleScroll",
value: function handleScroll(e) {
var getNextOptions = this.props.getNextOptions;
if (e.target.scrollTop + e.target.offsetHeight > e.target.scrollHeight - 1) {
getNextOptions && getNextOptions(e);
}
}
}, {
key: "responsiveFunc",
value: function responsiveFunc(_ref) {
var mediaQueryOR = _ref.mediaQueryOR;
return {
tabletMode: mediaQueryOR([{
maxWidth: 700
}])
};
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var options = this.state.options;
var _this$props4 = this.props,
value = _this$props4.value,
removeClose = _this$props4.removeClose,
boxSize = _this$props4.boxSize,
keyName = _this$props4.keyName,
idName = _this$props4.idName,
title = _this$props4.title,
isSearch = _this$props4.isSearch,
isArrow = _this$props4.isArrow,
placeHolderText = _this$props4.placeHolderText,
className = _this$props4.className,
right = _this$props4.right,
left = _this$props4.left,
top = _this$props4.top,
bottom = _this$props4.bottom,
isOpen = _this$props4.isPopupOpen,
isPopupReady = _this$props4.isPopupReady,
position = _this$props4.position,
getTargetRef = _this$props4.getTargetRef,
getContainerRef = _this$props4.getContainerRef,
dataId = _this$props4.dataId,
searchBoxSize = _this$props4.searchBoxSize,
searchEmptyHint = _this$props4.searchEmptyHint,
searchErrorText = _this$props4.searchErrorText,
activeStyle = _this$props4.activeStyle,
_this$props4$showOnHo = _this$props4.showOnHover,
showOnHover = _this$props4$showOnHo === void 0 ? false : _this$props4$showOnHo,
isDisabled = _this$props4.isDisabled,
showIconOnHover = _this$props4.showIconOnHover,
isReadOnly = _this$props4.isReadOnly,
hoverStyle = _this$props4.hoverStyle,
isEditable = _this$props4.isEditable,
needTick = _this$props4.needTick,
dataTitle = _this$props4.dataTitle,
isDataLoaded = _this$props4.isDataLoaded,
children = _this$props4.children,
targetAlign = _this$props4.targetAlign,
needResponsive = _this$props4.needResponsive,
arrowIconPosition = _this$props4.arrowIconPosition,
statusColor = _this$props4.statusColor,
_this$props4$needExte = _this$props4.needExternalPopupState,
needExternalPopupState = _this$props4$needExte === void 0 ? false : _this$props4$needExte,
_this$props4$isPopupA = _this$props4.isPopupActive,
isPopupActive = _this$props4$isPopupA === void 0 ? false : _this$props4$isPopupA,
needMultiLineText = _this$props4.needMultiLineText,
isFetchingOptions = _this$props4.isFetchingOptions,
getNextOptions = _this$props4.getNextOptions,
isAbsolutePositioningNeeded = _this$props4.isAbsolutePositioningNeeded,
isRestrictScroll = _this$props4.isRestrictScroll,
positionsOffset = _this$props4.positionsOffset,
targetOffset = _this$props4.targetOffset,
renderTargetElement = _this$props4.renderTargetElement,
renderFooterElement = _this$props4.renderFooterElement,
_this$props4$a11y = _this$props4.a11y,
a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y;
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 searchString = this.state.searchString;
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 = this.getAriaId();
return /*#__PURE__*/_react["default"].createElement("div", {
className: _StatusDropdownModule["default"].posRel,
onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
}, renderTargetElement ? renderTargetElement({
handleTogglePopup: this.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 ? this.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: this.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: _this2.handleTogglePopup,
dataId: "".concat(dataId, "_dropbox"),
isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
isRestrictScroll: isRestrictScroll,
positionsOffset: positionsOffset,
targetOffset: targetOffset,
customProps: {
focusScopeProps: {
loadNextOptions: getNextOptions,
searchValue: searchString,
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: _this2.handleChange,
value: searchString,
onClear: _this2.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 && options.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: _this2.handleScroll,
role: isSearch ? 'listbox' : 'menu',
tabindex: "-1",
isScrollAttribute: true
}, options.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.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: _this2.onSelect.bind(_this2, item),
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: _this2.emptySearchSVG
}) : /*#__PURE__*/_react["default"].createElement("div", {
className: _StatusDropdownModule["default"].loader
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), renderFooterElement ? renderFooterElement : null));
}) : null);
}
}]);
return StatusDropdown;
}(_react["default"].Component); // if (__DOCS__) {
// StatusDropdown.docs = {
// componentGroup: 'Molecule'
// };
// }
exports.StatusDropdown = StatusDropdown;
StatusDropdown.defaultProps = _defaultProps.defaultProps;
StatusDropdown.propTypes = _propTypes.propTypes;
var StatusDropdown_Component = (0, _Popup["default"])(StatusDropdown);
StatusDropdown_Component.defaultProps = StatusDropdown.defaultProps;
StatusDropdown_Component.propTypes = StatusDropdown.propTypes;
var _default = StatusDropdown_Component;
exports["default"] = _default;