@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
946 lines (866 loc) • 43 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.ToggleDropDown = void 0;
var _react = _interopRequireWildcard(require("react"));
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 _ListItem = _interopRequireDefault(require("@zohodesk/components/es/v1/ListItem/ListItem"));
var _ListItemWithIcon = _interopRequireDefault(require("@zohodesk/components/es/v1/ListItem/ListItemWithIcon"));
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 _CommonEmptyState = _interopRequireDefault(require("../../emptystate/CommonEmptyState/CommonEmptyState"));
var _EmptySearch = _interopRequireDefault(require("@zohodesk/svg/lib/emptystate/version3/EmptySearch"));
var _CssProvider = _interopRequireDefault(require("@zohodesk/components/es/Provider/CssProvider"));
var _Common = require("@zohodesk/components/es/utils/Common");
var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
var _RippleEffect = _interopRequireDefault(require("@zohodesk/components/es/v1/RippleEffect/RippleEffect"));
var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox"));
var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
var _ToggleDropDownModule = _interopRequireDefault(require("../../../dropdown/ToggleDropDown/ToggleDropDown.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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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 ToggleDropDown = /*#__PURE__*/function (_Component) {
_inherits(ToggleDropDown, _Component);
var _super = _createSuper(ToggleDropDown);
function ToggleDropDown(props) {
var _this;
_classCallCheck(this, ToggleDropDown);
_this = _super.call(this, props);
_this.state = {
searchValue: '',
// selectedIndex: -1,
options: props.options,
isFetchingOptions: false
};
_this._isMounted = false;
_this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this)); // this.handleKeyDown = this.handleKeyDown.bind(this);
_this.onSelect = _this.onSelect.bind(_assertThisInitialized(_this));
_this.handleTogglePopup = _this.handleTogglePopup.bind(_assertThisInitialized(_this));
_this.showTogglePopup = _this.showTogglePopup.bind(_assertThisInitialized(_this));
_this.hideTogglePopup = _this.hideTogglePopup.bind(_assertThisInitialized(_this));
_this.onSearchAPI = _this.onSearchAPI.bind(_assertThisInitialized(_this));
_this.onSearchClear = _this.onSearchClear.bind(_assertThisInitialized(_this));
_this.handleFilterSuggestions = _this.handleFilterSuggestions.bind(_assertThisInitialized(_this));
_this.scrollContentRef = _this.scrollContentRef.bind(_assertThisInitialized(_this)); // this.handleMouseEnter = this.handleMouseEnter.bind(this);
_this.searchInputRef = _this.searchInputRef.bind(_assertThisInitialized(_this));
_this.itemRef = _this.itemRef.bind(_assertThisInitialized(_this)); // this.inputRef = this.inputRef.bind(this);
_this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this)); // this.getOptionsArray = this.getOptionsArray.bind(this);
_this.emptySearchSVG = _this.emptySearchSVG.bind(_assertThisInitialized(_this));
_this.getAriaId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this)); // this.getSelectedIndex = this.getSelectedIndex.bind(this);
_this.handleGetNextOptions = _this.handleGetNextOptions.bind(_assertThisInitialized(_this));
_this.handleFetchOptions = _this.handleFetchOptions.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(ToggleDropDown, [{
key: "componentDidMount",
value: function componentDidMount() {
this._isMounted = true;
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this._isMounted = false;
}
}, {
key: "emptySearchSVG",
value: function emptySearchSVG() {
return /*#__PURE__*/_react["default"].createElement(_EmptySearch["default"], {
size: "small"
});
} // inputRef(el) {
// this.hiddenInput = el;
// }
}, {
key: "itemRef",
value: function itemRef(ele, index, id) {
this["suggestion_".concat(id)] = ele;
}
}, {
key: "searchInputRef",
value: function searchInputRef(el) {
this.searchInput = el;
}
}, {
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,
removeClose = _this$props.removeClose;
removeClose && removeClose(e);
!isPopupOpen && onSelectLabel && onSelectLabel(e);
togglePopup(e, boxPosition);
}
}, {
key: "showTogglePopup",
value: function showTogglePopup(e) {
var _this$props2 = this.props,
togglePopup = _this$props2.togglePopup,
boxPosition = _this$props2.boxPosition,
onSelectLabel = _this$props2.onSelectLabel,
isPopupOpen = _this$props2.isPopupOpen;
!isPopupOpen && onSelectLabel && onSelectLabel(e);
!isPopupOpen && togglePopup(e, boxPosition);
}
}, {
key: "hideTogglePopup",
value: function hideTogglePopup(e) {
var _this$props3 = this.props,
togglePopup = _this$props3.togglePopup,
boxPosition = _this$props3.boxPosition,
onSelectLabel = _this$props3.onSelectLabel,
isPopupOpen = _this$props3.isPopupOpen;
!isPopupOpen && onSelectLabel && onSelectLabel(e);
isPopupOpen && togglePopup(e, boxPosition);
}
}, {
key: "scrollContentRef",
value: function scrollContentRef(el) {
var isPopupOpen = this.props.isPopupOpen;
if (isPopupOpen) {
this.optionsContainer = el;
}
}
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
options: nextProps.options
});
}
}, {
key: "onSelect",
value: function onSelect(element, e) {
var _this$props4 = this.props,
onClick = _this$props4.onClick,
togglePopup = _this$props4.togglePopup,
preventPopupClose = _this$props4.preventPopupClose;
onClick && onClick(e, element);
!preventPopupClose && togglePopup(e);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
var _this$props5 = this.props,
isPopupOpen = _this$props5.isPopupOpen,
isPopupReady = _this$props5.isPopupReady,
isSearch = _this$props5.isSearch,
idName = _this$props5.idName,
options = _this$props5.options,
onDropDownOpen = _this$props5.onDropDownOpen,
onDropDownClose = _this$props5.onDropDownClose;
var _this$state = this.state,
selectedIndex = _this$state.selectedIndex,
searchValue = _this$state.searchValue; // eslint-disable-next-line
if (prevProps.isPopupReady !== isPopupReady) {// setTimeout(() => {
// isPopupReady
// ? isSearch
// ? this.searchInput.focus({ preventScroll: true })
// : this.hiddenInput.focus({ preventScroll: true })
// : this.hiddenInput.focus({ preventScroll: true });
// }, 10);
} // const optionsArr = this.getOptionsArray();
// const option = optionsArr[selectedIndex];
// const id = (option && option[idName]) || {};
// const selSuggestion = this[`suggestion_${id}`];
// if (isPopupOpen) {
// this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
// }
if (!prevProps.isPopupOpen && isPopupOpen && searchValue.length) {
this.onSearchClear();
}
if (this.props.from == 'activityFilter') {
//Temproary
var results = this.props.options.filter(function (_ref) {
var id1 = _ref.isDisabled;
return !prevProps.options.some(function (_ref2) {
var id2 = _ref2.isDisabled;
return id2 === id1;
});
});
if (results.length > 0) {
this.setState({
options: options
});
}
}
if (prevProps.isPopupOpen !== isPopupOpen) {
if (isPopupOpen) {
onDropDownOpen && onDropDownOpen();
} else {
onDropDownClose && onDropDownClose();
} // this.getSelectedIndex(optionsArr);
}
}
}, {
key: "handleFilterSuggestions",
value: function handleFilterSuggestions(searchValue) {
var _this$props6 = this.props,
options = _this$props6.options,
keyName = _this$props6.keyName,
isGroupDropDown = _this$props6.isGroupDropDown,
groupOptionsKey = _this$props6.groupOptionsKey,
groupNameKey = _this$props6.groupNameKey;
searchValue = searchValue.trim().toLowerCase();
var result = [];
if (isGroupDropDown) {
var filteredGroups = [];
options.map(function (group) {
var needDivider = group.needDivider;
var name = group[groupNameKey];
var groupOptions = group[groupOptionsKey];
var datas = groupOptions.filter(function (list) {
var value = list[keyName];
return value.toLowerCase().includes(searchValue);
});
if (datas.length) {
var _filteredGroups$push;
filteredGroups.push((_filteredGroups$push = {}, _defineProperty(_filteredGroups$push, groupNameKey, name), _defineProperty(_filteredGroups$push, groupOptionsKey, datas), _defineProperty(_filteredGroups$push, "needDivider", needDivider), _filteredGroups$push));
}
});
result = filteredGroups;
} else {
var filteredOptions = options.filter(function (item, i) {
if (item.needDivider) {
return true;
}
return item[keyName].toLowerCase().includes(searchValue);
});
if (filteredOptions.length) {
// to avoid more than one dividers consecutively comes as one by one
var needDividerCount = 0;
var orderedOptions = filteredOptions.filter(function (item) {
if (item.needDivider && needDividerCount === 0) {
needDividerCount++;
return true;
} else if (!item.needDivider) {
needDividerCount = 0;
return true;
}
}); // remove divider if it placed in first or last index
filteredOptions = [];
filteredOptions = orderedOptions.filter(function (item, i) {
if (i == 0 || i == orderedOptions.length - 1) {
if (!item.needDivider) {
return true;
}
} else {
return true;
}
});
result = filteredOptions;
}
}
return result;
} // getOptionsArray() {
// const { searchValue } = this.state;
// const { isGroupDropDown, groupOptionsKey } = this.props;
// const options = searchValue.length ? this.handleFilterSuggestions(searchValue) : this.props.options;
// let optionsArr = [];
// if (isGroupDropDown) {
// for (let i = 0; i < options.length; i++) {
// const groupOptions = options[i][groupOptionsKey];
// Array.prototype.push.apply(optionsArr, groupOptions);
// }
// } else {
// optionsArr = options.filter((item) => !item.needDivider);
// }
// return optionsArr;
// }
// handleKeyDown(e) {
// const { keyCode } = e;
// const { selectedIndex, searchValue } = this.state;
// const optionsArr = this.getOptionsArray();
// const totalIndex = optionsArr.length;
// const { togglePopup, onClick, boxPosition, isPopupReady, value, keyName, idName, preventPopupClose, isSearch } =
// this.props;
// if (isPopupReady && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
// e.preventDefault(); //prevent body scroll
// }
// if (isPopupReady) {
// switch (keyCode) {
// case 40:
// if (selectedIndex === totalIndex - 1) {
// this.setState({ selectedIndex: 0 });
// } else {
// if (selectedIndex === totalIndex - 3) {
// this.handleGetNextOptions();
// }
// this.setState({
// selectedIndex: selectedIndex + 1
// });
// }
// break;
// case 38:
// if (selectedIndex === 0) {
// this.setState({ selectedIndex: totalIndex - 1 });
// } else {
// this.setState({
// selectedIndex: selectedIndex - 1
// });
// }
// break;
// case 13: {
// const selectedId = optionsArr[selectedIndex][idName] || '';
// onClick && onClick(selectedId, optionsArr[selectedIndex]);
// if (!preventPopupClose) {
// togglePopup(e, boxPosition);
// } else if (isSearch) {
// this.searchInput.focus({ preventScroll: true });
// } else {
// this.hiddenInput.focus({ preventScroll: true });
// }
// break;
// }
// }
// } else {
// if (keyCode === 13 || keyCode === 40) {
// togglePopup(e, boxPosition);
// }
// }
// }
// getSelectedIndex(optionsArr) {
// const { selectedId, idName } = this.props;
// if (selectedId) {
// for (let i = 0; i < optionsArr.length; i++) {
// const indexId = optionsArr[i][idName];
// if (selectedId === indexId) {
// this.setState({
// selectedIndex: i
// });
// break;
// }
// }
// } else {
// this.setState({
// selectedIndex: -1
// });
// }
// }
}, {
key: "onSearchAPI",
value: function onSearchAPI() {
var searchValue = this.state.searchValue;
var _this$props7 = this.props,
needSearchFetching = _this$props7.needSearchFetching,
onSearch = _this$props7.onSearch;
if (needSearchFetching && onSearch) {
onSearch(searchValue);
}
}
}, {
key: "handleChange",
value: function handleChange(value, e) {
var _this2 = this;
var filteredOptions = this.handleFilterSuggestions(value);
this.setState({
searchValue: value,
// selectedIndex: -1,
options: filteredOptions
}, function () {
_this2.onSearchAPI();
});
}
}, {
key: "onSearchClear",
value: function onSearchClear() {
var _this3 = this;
var filteredOptions = this.handleFilterSuggestions('');
this.setState({
searchValue: '',
options: filteredOptions
}, function () {
_this3.onSearchAPI();
});
} // handleMouseEnter(id, value, index, e) {
// this.setState({
// selectedIndex: index
// });
// }
}, {
key: "handleScroll",
value: function handleScroll(e) {
var ele = e.target;
var isScrollReachedBottom = (0, _Common.findScrollEnd)(ele);
isScrollReachedBottom && this.handleGetNextOptions();
}
}, {
key: "handleGetNextOptions",
value: function handleGetNextOptions() {
var _this$props8 = this.props,
isNextOptions = _this$props8.isNextOptions,
getNextOptions = _this$props8.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(_ref3) {
var mediaQueryOR = _ref3.mediaQueryOR;
return {
tabletMode: mediaQueryOR([{
maxWidth: 700
}])
};
}
}, {
key: "render",
value: function render() {
var _this5 = this;
var _this$state2 = this.state,
options = _this$state2.options,
selectedIndex = _this$state2.selectedIndex;
var _this$props9 = this.props,
value = _this$props9.value,
removeClose = _this$props9.removeClose,
boxSize = _this$props9.boxSize,
keyName = _this$props9.keyName,
idName = _this$props9.idName,
title = _this$props9.title,
isSearch = _this$props9.isSearch,
isArrow = _this$props9.isArrow,
placeHolderText = _this$props9.placeHolderText,
className = _this$props9.className,
right = _this$props9.right,
left = _this$props9.left,
top = _this$props9.top,
bottom = _this$props9.bottom,
isOpen = _this$props9.isPopupOpen,
isPopupActive = _this$props9.isPopupActive,
needExternalPopupState = _this$props9.needExternalPopupState,
isPopupReady = _this$props9.isPopupReady,
position = _this$props9.position,
getTargetRef = _this$props9.getTargetRef,
getContainerRef = _this$props9.getContainerRef,
dataId = _this$props9.dataId,
dataSelectorId = _this$props9.dataSelectorId,
searchBoxSize = _this$props9.searchBoxSize,
searchEmptyHint = _this$props9.searchEmptyHint,
searchErrorText = _this$props9.searchErrorText,
activeStyle = _this$props9.activeStyle,
showOnHover = _this$props9.showOnHover,
isDisabled = _this$props9.isDisabled,
showIconOnHover = _this$props9.showIconOnHover,
isReadOnly = _this$props9.isReadOnly,
hoverStyle = _this$props9.hoverStyle,
isEditable = _this$props9.isEditable,
iconName = _this$props9.iconName,
iconSize = _this$props9.iconSize,
needTick = _this$props9.needTick,
dataTitle = _this$props9.dataTitle,
isDataLoaded = _this$props9.isDataLoaded,
children = _this$props9.children,
needResponsive = _this$props9.needResponsive,
arrowIconPosition = _this$props9.arrowIconPosition,
isGroupDropDown = _this$props9.isGroupDropDown,
groupOptionsKey = _this$props9.groupOptionsKey,
groupNameKey = _this$props9.groupNameKey,
isToggleStateNeeded = _this$props9.isToggleStateNeeded,
selectedId = _this$props9.selectedId,
isPadding = _this$props9.isPadding,
isNeedEffect = _this$props9.isNeedEffect,
hoverType = _this$props9.hoverType,
palette = _this$props9.palette,
getFooter = _this$props9.getFooter,
customProps = _this$props9.customProps,
needMultiLineText = _this$props9.needMultiLineText,
isAbsolutePositioningNeeded = _this$props9.isAbsolutePositioningNeeded,
positionsOffset = _this$props9.positionsOffset,
targetOffset = _this$props9.targetOffset,
isRestrictScroll = _this$props9.isRestrictScroll,
customClass = _this$props9.customClass;
var _customProps$ToggleDr = customProps.ToggleDropDownProps,
ToggleDropDownProps = _customProps$ToggleDr === void 0 ? {} : _customProps$ToggleDr,
_customProps$DropBoxP = customProps.DropBoxProps,
DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP,
_customProps$TextBoxI = customProps.TextBoxIconProps,
TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
_customProps$ListItem = customProps.ListItemWithIconProps,
ListItemWithIconProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
_customProps$ListItem2 = customProps.ListItemProps,
ListItemProps = _customProps$ListItem2 === void 0 ? {} : _customProps$ListItem2;
var _customClass$customDr = customClass.customDropBox,
customDropBox = _customClass$customDr === void 0 ? '' : _customClass$customDr,
_customClass$customLi = customClass.customListBox,
customListBox = _customClass$customLi === void 0 ? '' : _customClass$customLi;
var isPopupOpen = needExternalPopupState ? isPopupActive && isOpen : isOpen;
var Component = isToggleStateNeeded ? children.type : null,
componentProps = isToggleStateNeeded ? children.props : null;
var _this$state3 = this.state,
searchValue = _this$state3.searchValue,
isFetchingOptions = _this$state3.isFetchingOptions;
var commonClass = "".concat(className ? className : '', " ").concat(isPopupReady ? activeStyle ? activeStyle : '' : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : isReadOnly || !isEditable ? _ToggleDropDownModule["default"].cursorDefault : !showOnHover ? "".concat(_ToggleDropDownModule["default"].cursor, " ").concat(hoverStyle ? hoverStyle : '') : "".concat(hoverStyle ? hoverStyle : '', " ").concat(_ToggleDropDownModule["default"].cursorDefault));
var listIndex = -1;
var ariaTitleId = this.getAriaId(); // const allyOptionsArr = this.getOptionsArray();
return /*#__PURE__*/_react["default"].createElement("div", _extends({
className: _ToggleDropDownModule["default"].wrapper,
onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.showTogglePopup : undefined,
onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined,
"data-selector-id": dataSelectorId
}, ToggleDropDownProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
alignBox: "row",
onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable && this.handleTogglePopup,
eleRef: getTargetRef,
align: "vertical",
isCover: false,
dataId: dataId
}, children ? isToggleStateNeeded ? /*#__PURE__*/_react["default"].createElement(Component, _extends({}, componentProps, {
isActive: isPopupOpen
})) : children : /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
hoverType: hoverType,
isActive: isPopupOpen,
isNeedEffect: isEditable && isNeedEffect
}, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(commonClass, " ").concat(!isPopupOpen && showIconOnHover ? _ToggleDropDownModule["default"].hoverIcon : ''),
isCover: false,
alignBox: "row",
align: "vertical",
tagName: "button",
"aria-labelledby": ariaTitleId,
"aria-haspopup": true,
"aria-expanded": isPopupOpen ? true : false
}, iconName ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
className: value ? _ToggleDropDownModule["default"].iconBox : ''
}, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
name: iconName,
size: iconSize,
dataId: "".concat(dataId, "_icon")
})) : null, value && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
id: ariaTitleId,
"aria-hidden": true,
className: "".concat(_ToggleDropDownModule["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: "6",
name: "ZD-down",
iconClass: 'toggleDropIcon'.concat(" ", _ToggleDropDownModule["default"].arrow, " ").concat(_ToggleDropDownModule["default"]["".concat(arrowIconPosition, "_arrow")]),
dataId: "statusdownarrow"
}) : null)))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
query: this.responsiveFunc,
responsiveId: "Helmet"
}, function (_ref4) {
var tabletMode = _ref4.tabletMode;
return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], _extends({
boxPosition: position,
isActive: isPopupReady,
onClick: removeClose,
size: boxSize,
right: right,
left: left,
top: top,
bottom: bottom,
isArrow: isArrow,
isAnimate: true,
getRef: getContainerRef,
customClass: {
customDropBoxWrap: _ToggleDropDownModule["default"].dropBoxContainer,
customDropBox: customDropBox
},
needResponsive: needResponsive,
isPadding: isPadding,
tabindex: "0",
a11y: {
role: !isSearch ? 'menu' : undefined,
ariaLabelledby: !isSearch ? ariaTitleId : undefined
},
palette: palette,
isResponsivePadding: true,
needFocusScope: true,
isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
positionsOffset: positionsOffset,
targetOffset: targetOffset,
isRestrictScroll: isRestrictScroll,
customProps: {
focusScopeProps: {
loadNextOptions: _this5.handleGetNextOptions,
searchValue: searchValue,
isFetchingOptions: isFetchingOptions
}
},
dataId: "".concat(dataId, "_dropbox")
}, DropBoxProps, {
onClose: _this5.handleTogglePopup
}), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
className: _ToggleDropDownModule["default"].search
}, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
placeHolder: placeHolderText,
onChange: _this5.handleChange,
value: searchValue,
onClear: _this5.onSearchClear,
size: searchBoxSize // inputRef={this.searchInputRef}
,
customProps: {
TextBoxProps: {
'data-a11y-autofocus': true
}
} //search
// onKeyDown={this.handleKeyDown}
,
dataId: "".concat(dataId, "_search"),
a11y: {
role: 'combobox',
ariaOwns: ariaTitleId,
// ariaActivedescendant: allyOptionsArr[selectedIndex] && allyOptionsArr[selectedIndex][keyName],
ariaAutocomplete: 'list',
ariaHaspopup: true,
ariaExpanded: true
}
}, TextBoxIconProps))) : null, title && options.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
className: _ToggleDropDownModule["default"].title
}, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
text: title,
htmlId: ariaTitleId,
palette: palette,
a11y: {
role: 'heading'
},
customClass: _ToggleDropDownModule["default"].dropdown
})), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
id: ariaTitleId,
flexible: true,
shrink: true,
scroll: "vertical",
preventParentScroll: "vertical",
dataId: "".concat(dataId, "_list"),
className: "".concat(tabletMode ? _ToggleDropDownModule["default"].responsivemaxHgt : _ToggleDropDownModule["default"].maxHgt, " ").concat(customListBox),
eleRef: _this5.scrollContentRef,
onScroll: _this5.handleScroll,
role: isSearch ? 'listbox' : 'menu',
"aria-labelledby": isSearch ? ariaTitleId : undefined,
"data-scroll": "true"
}, isDataLoaded ? options && options.length != 0 ? isGroupDropDown ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (group) {
var groupName = group[groupNameKey];
var groupOptions = group[groupOptionsKey];
var needDivider = group.needDivider;
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
key: "index".concat(groupName)
}, needDivider && /*#__PURE__*/_react["default"].createElement("div", {
className: _ToggleDropDownModule["default"].seperatedLine
}), groupName && /*#__PURE__*/_react["default"].createElement("div", {
className: _ToggleDropDownModule["default"].groupName
}, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
text: groupName,
palette: palette,
a11y: {
role: 'heading'
}
})), groupOptions && groupOptions.map(function (item) {
var iconName = item.iconName,
iconSize = item.iconSize,
iconClass = item.iconClass,
title = item.title,
_item$disableTitle = item.disableTitle,
disableTitle = _item$disableTitle === void 0 ? '' : _item$disableTitle,
_item$isDisabled = item.isDisabled,
isDisabled = _item$isDisabled === void 0 ? false : _item$isDisabled;
listIndex += 1;
return iconName ? /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
key: listIndex,
dataId: item[keyName],
value: item[keyName],
id: item[idName],
active: selectedId === item[idName],
onClick: _this5.onSelect.bind(_this5, item),
index: listIndex // highlight={selectedIndex === listIndex}
,
disableTitle: disableTitle,
isDisabled: isDisabled,
iconName: iconName,
iconClass: iconClass,
iconSize: iconSize,
needTick: needTick,
needBorder: false // onMouseEnter={this.handleMouseEnter}
,
getRef: _this5.itemRef,
title: title ? title : item[keyName],
palette: palette,
needMultiLineText: needMultiLineText,
autoHover: true,
a11y: {
role: isSearch ? 'option' : 'menuitem',
ariaSelected: selectedId === item[idName],
ariaLabel: item[keyName]
}
}, ListItemWithIconProps)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
key: listIndex,
dataId: item[keyName],
value: item[keyName],
id: item[idName],
active: selectedId === item[idName],
onClick: _this5.onSelect.bind(_this5, item),
isDisabled: isDisabled,
disableTitle: disableTitle,
index: listIndex // highlight={selectedIndex === listIndex}
,
needTick: needTick,
needBorder: false // onMouseEnter={this.handleMouseEnter}
,
getRef: _this5.itemRef,
title: title ? title : item[keyName],
palette: palette,
needMultiLineText: needMultiLineText,
autoHover: true,
a11y: {
role: isSearch ? 'option' : 'menuitem',
ariaSelected: selectedId === item[idName],
ariaLabel: item[keyName]
}
}, ListItemProps));
}));
}), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
isCover: false,
align: "both"
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (item, i) {
var iconName = item.iconName,
iconSize = item.iconSize,
iconClass = item.iconClass,
title = item.title,
needDivider = item.needDivider,
_item$isDisabled2 = item.isDisabled,
isDisabled = _item$isDisabled2 === void 0 ? false : _item$isDisabled2,
_item$disableTitle2 = item.disableTitle,
disableTitle = _item$disableTitle2 === void 0 ? '' : _item$disableTitle2;
if (!needDivider) {
listIndex += 1;
}
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
key: i
}, needDivider ? /*#__PURE__*/_react["default"].createElement("div", {
className: _ToggleDropDownModule["default"].seperatedLine
}) : iconName ? /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
dataId: item[keyName],
value: item[keyName],
id: item[idName],
active: selectedId === item[idName],
onClick: _this5.onSelect.bind(_this5, item),
index: listIndex,
disableTitle: disableTitle,
isDisabled: isDisabled // highlight={selectedIndex === listIndex}
,
iconName: iconName,
iconClass: iconClass,
iconSize: iconSize,
needTick: needTick,
needBorder: false // onMouseEnter={this.handleMouseEnter}
,
getRef: _this5.itemRef,
title: title ? title : item[keyName],
key: listIndex,
palette: palette,
needMultiLineText: needMultiLineText,
autoHover: true,
a11y: {
role: isSearch ? 'option' : 'menuitem',
ariaSelected: selectedId === item[idName],
ariaLabel: item[keyName]
}
}, ListItemWithIconProps)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
key: listIndex,
dataId: item[keyName],
value: item[keyName],
id: item[idName],
disableTitle: disableTitle,
isDisabled: isDisabled,
active: selectedId === item[idName],
onClick: _this5.onSelect.bind(_this5, item),
index: listIndex // highlight={selectedIndex === listIndex}
,
needTick: needTick,
needBorder: false // onMouseEnter={this.handleMouseEnter}
,
getRef: _this5.itemRef,
title: title ? title : item[keyName],
palette: palette,
needMultiLineText: needMultiLineText,
autoHover: true,
a11y: {
role: isSearch ? 'option' : 'menuitem',
ariaSelected: selectedId === item[idName],
ariaLabel: item[keyName]
}
}, ListItemProps)));
}), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
isCover: false,
align: "both"
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))) : /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
className: _ToggleDropDownModule["default"].svgWrapper,
description: searchEmptyHint,
title: searchErrorText || 'No results',
size: "small",
getEmptyState: _this5.emptySearchSVG
}) : /*#__PURE__*/_react["default"].createElement("div", {
className: _ToggleDropDownModule["default"].loader
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getFooter()) : null));
}) : null);
}
}]);
return ToggleDropDown;
}(_react.Component);
exports.ToggleDropDown = ToggleDropDown;
ToggleDropDown.defaultProps = _defaultProps.defaultProps;
ToggleDropDown.propTypes = _propTypes.propTypes;
var ToggleDropDown_Component = (0, _Popup["default"])(ToggleDropDown);
ToggleDropDown_Component.defaultProps = ToggleDropDown.defaultProps;
ToggleDropDown_Component.propTypes = ToggleDropDown.propTypes; // if (__DOCS__) {
// ToggleDropDown.docs = {
// componentGroup: 'Molecule'
// };
// }
var _default = ToggleDropDown_Component;
exports["default"] = _default;