@zohodesk/dot
Version:
In this Library, we Provide Some Basic Components to Build Your Application
194 lines (182 loc) • 6.42 kB
JavaScript
/**** Libraries ****/
import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
/**** Components ****/
import { SelectComponent } from '@zohodesk/components/es/v1/Select/Select';
import Popup from '@zohodesk/components/es/v1/Popup/Popup';
import ListItem from '@zohodesk/components/es/v1/ListItem/ListItem';
import DropDownSearch from '@zohodesk/components/es/v1/DropDown/DropDownSearch';
import { Card, CardHeader, CardContent } from '@zohodesk/components/es/v1/Card';
import ResponsiveDropBox from '@zohodesk/components/es/v1/ResponsiveDropBox/ResponsiveDropBox';
import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
/**** Icons ****/
import { Icon } from '@zohodesk/icons';
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import Loader from '@zohodesk/svg/lib/Loader/Loader';
import style from "../../../../lookup/header/ViewDropDown/ViewDropDown.module.css";
/* eslint-disable react/forbid-component-props */
/*eslint-disable react/sort-prop-types*/
class DropDown extends SelectComponent {
constructor(props) {
super(props);
this.onSearchKeyDown = this.onSearchKeyDown.bind(this);
}
onSearchKeyDown(e) {
const {
closePopupOnly
} = this.props;
if (e.keyCode === 27) {
closePopupOnly && closePopupOnly(e);
} else {
this.handleKeyDown(e);
}
}
responsiveFunc(_ref) {
let {
mediaQueryOR
} = _ref;
return {
tabletMode: mediaQueryOR([{
maxWidth: 700
}])
};
}
render() {
var _this = this;
const {
needSearch,
dropBoxSize,
emptyMessage,
searchEmptyMessage,
position,
defaultDropBoxPosition,
getTargetRef,
getContainerRef,
isPopupOpen,
removeClose,
isPopupReady,
animationStyle,
searchBoxSize,
searchBoxVariant,
searchBoxPlaceHolder,
maxLength,
dataId,
isAbsolutePositioningNeeded,
isRestrictScroll,
positionsOffset,
targetOffset
} = this.props;
const {
hoverIndex,
selected,
searchStr,
isFetchingOptions,
selectedId
} = this.state;
const suggestions = this.handleFilterSuggestions();
return /*#__PURE__*/React.createElement("div", {
className: style.container,
"data-id": dataId,
"data-test-id": dataId
}, /*#__PURE__*/React.createElement("div", {
onClick: this.togglePopup,
ref: getTargetRef
}, /*#__PURE__*/React.createElement("div", {
className: `${style.labelCnt} ${isPopupOpen ? style.focused : ''}`
}, /*#__PURE__*/React.createElement("span", {
className: style.labelText,
"data-title": selected,
"data-id": `${dataId}_selectedValue`,
"data-test-id": `${dataId}_selectedValue`
}, selected), /*#__PURE__*/React.createElement(Icon, {
name: "ZD-down",
size: "7",
iconClass: style.arrowIcon,
dataId: `${dataId}_icon`
}))), isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
query: this.responsiveFunc,
responsiveId: "Helmet"
}, _ref2 => {
let {
tabletMode
} = _ref2;
return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
isAnimate: true,
isArrow: false,
isActive: isPopupReady,
boxPosition: position || `${defaultDropBoxPosition}Center`,
getRef: getContainerRef,
onClick: removeClose,
animationStyle: animationStyle,
size: "large",
alignBox: "row",
isResponsivePadding: true,
dataId: `${dataId}_dropbox`,
isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
isRestrictScroll: isRestrictScroll,
positionsOffset: positionsOffset,
targetOffset: targetOffset
}, /*#__PURE__*/React.createElement(Box, {
flexible: true
}, /*#__PURE__*/React.createElement(Card, null, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(DropDownSearch, {
value: searchStr,
onChange: this.handleSearch,
onKeyDown: this.onSearchKeyDown,
getRef: this.searchInputRef,
size: searchBoxSize,
variant: searchBoxVariant,
placeHolder: searchBoxPlaceHolder,
maxLength: maxLength,
dataId: `${dataId}_search`
})) : null, /*#__PURE__*/React.createElement(CardContent, {
shrink: true,
eleRef: this.suggestionContainerRef,
customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : ''
}, suggestions.length ? /*#__PURE__*/React.createElement("div", {
className: style.listItemContainer,
"data-id": `${dataId}_Options`
}, suggestions.map(function () {
let option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
let index = arguments.length > 1 ? arguments[1] : undefined;
const {
id,
value
} = option;
return /*#__PURE__*/React.createElement(ListItem, {
active: id === selectedId,
getRef: _this.suggestionItemRef,
highlight: hoverIndex === index ? true : false,
id: id,
key: `${id}dropDown`,
onClick: _this.handleChange,
onMouseEnter: _this.handleMouseEnter,
size: "medium",
value: value,
index: index,
needTick: true,
needBorder: false
});
})) : isFetchingOptions ? /*#__PURE__*/React.createElement(Container, {
align: "both",
className: style.loader
}, /*#__PURE__*/React.createElement(Loader, null)) : searchStr ? /*#__PURE__*/React.createElement("div", {
className: style.emptyState
}, searchEmptyMessage || emptyMessage) : /*#__PURE__*/React.createElement("div", {
className: style.emptyState
}, emptyMessage)))));
}) : null);
}
}
DropDown.propTypes = propTypes;
DropDown.defaultProps = defaultProps;
const ViewDropDown = Popup(DropDown);
ViewDropDown.defaultProps = DropDown.defaultProps;
ViewDropDown.propTypes = DropDown.propTypes; // if (__DOCS__) {
// DropDown.docs = {
// componentGroup: 'Lookup'
// };
// // eslint-disable-next-line react/forbid-foreign-prop-types
// ViewDropDown.propTypes = DropDown.propTypes;
// }
export default ViewDropDown;