@zohodesk/dot 1.0.0-beta.212 → 1.0.0-beta.213

package/es/deprecated/SelectDropdown/SelectDropdown.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+import Popup from '@zohodesk/components/lib/Popup/Popup';
+import ListItem from '@zohodesk/components/lib/ListItem/ListItem';
+import TextBox from '@zohodesk/components/lib/TextBox/TextBox';
+import DropDownHeading from '@zohodesk/components/lib/DropDown/DropDownHeading';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from './SelectDropdown.module.css';
+
+class SelectDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleTogglePopup = this.handleTogglePopup.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(id, value, index, e) {
+    let {
+      onClick,
+      togglePopup
+    } = this.props;
+    onClick && onClick(id, value, index, e);
+    togglePopup(e, 'bottomRight');
+  }
+
+  handleTogglePopup(e) {
+    let {
+      togglePopup
+    } = this.props;
+    togglePopup(e, 'bottomRight');
+  }
+
+  render() {
+    let {
+      title,
+      selectedText,
+      isPopupOpen,
+      isPopupReady,
+      getTargetRef,
+      getContainerRef,
+      removeClose,
+      suggestions,
+      selectedId,
+      isSearchRequired = false
+    } = this.props;
+    let {
+      idKey,
+      valueKey,
+      options = []
+    } = suggestions;
+    return /*#__PURE__*/React.createElement("span", {
+      ref: getTargetRef,
+      className: style.container,
+      onClick: removeClose
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.departName,
+      onClick: this.handleTogglePopup
+    }, selectedText), /*#__PURE__*/React.createElement("span", {
+      className: style.departIcon,
+      onClick: this.handleTogglePopup
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-down1",
+      size: "6"
+    })), /*#__PURE__*/React.createElement(DropBox, {
+      size: "medium",
+      boxPosition: "bottomRight",
+      isArrow: true,
+      isAnimate: true,
+      right: "-25",
+      isActive: isPopupOpen && isPopupReady,
+      getRef: getContainerRef
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "column",
+      className: style.rulesPopup
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.rulesDepart
+    }, /*#__PURE__*/React.createElement(DropDownHeading, {
+      text: title
+    })), isSearchRequired ? /*#__PURE__*/React.createElement(Box, {
+      className: style.searchDepart
+    }, /*#__PURE__*/React.createElement(TextBox, {
+      name: "Test",
+      id: "Test",
+      maxLength: "150",
+      placeHolder: "Search Department"
+    })) : null, /*#__PURE__*/React.createElement(Box, {
+      scroll: "vertical",
+      flexible: true,
+      shrink: true
+    }, options && options.length && options.map((obj, index) => /*#__PURE__*/React.createElement(ListItem, {
+      key: index,
+      autoHover: true,
+      value: obj[valueKey],
+      active: selectedId == obj[idKey],
+      id: obj[idKey],
+      onClick: this.handleClick
+    }))))));
+  }
+
+}
+
+SelectDropdown.propTypes = {
+  getContainerRef: PropTypes.func,
+  getTargetRef: PropTypes.func,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isSearchRequired: PropTypes.bool,
+  onClick: PropTypes.func,
+  removeClose: PropTypes.func,
+  selectedId: PropTypes.string,
+  selectedText: PropTypes.string,
+  suggestions: PropTypes.shape({
+    idKey: PropTypes.string,
+    valueKey: PropTypes.string,
+    options: PropTypes.array
+  }),
+  title: PropTypes.string
+};
+
+if (false) {
+  SelectDropdown.docs = {
+    componentGroup: 'Header',
+    folderName: 'Setup'
+  };
+}
+
+export default Popup(SelectDropdown);

package/es/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -0,0 +1,55 @@
+.container {
+  position: relative;
+  line-height: var(--zd_size18);
+  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  padding: var(--zd_size3) var(--zd_size15);
+  cursor: pointer;
+}[dir=ltr] .container {
+  margin-left: var(--zd_size15);
+}[dir=rtl] .container {
+  margin-right: var(--zd_size15);
+}
+.container:hover {
+  background: var(--zdt_selectdropzdt_selectdropdown_hover_bg down_hover_bg);
+}
+.departName {
+  font-size: var(--zd_font_size13);
+  color: var(--zdt_selectdropdown_departname_text);
+  composes: flexgrow dotted offSelection from '~@zohodesk/components/lib/common/common.module.css';
+}
+.departIcon {
+  color: var(--zdt_selectdropdown_departicon);
+  cursor: pointer;
+}
+[dir=ltr] .departIcon {
+  margin-left: var(--zd_size5);
+}
+[dir=rtl] .departIcon {
+  margin-right: var(--zd_size5);
+}
+.rulesPopup {
+  max-height: var(--zd_size260);
+  padding: var(--zd_size10) 0;
+}
+.rulesDepart {
+  margin: 0 var(--zd_size5) var(--zd_size10) var(--zd_size5);
+}
+.searchDepart {
+  padding: 0 var(--zd_size20);
+  margin: 0 0 var(--zd_size10) 0;
+}
+
+/*Variables */
+/* select dropdown */
+
+[data-mode='dark'] {
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
+}
+
+[data-mode='default'] {
+  --zdt_selectdropdown_hover_bg: var(--dot_smoke64);
+  --zdt_selectdropdown_departname_text: var(--zd_dark4);
+  --zdt_selectdropdown_departicon: var(--zd_dark5);
+}