@zohodesk/dot 1.2.4 → 1.3.0

package/es/v1/form/fields/FieldContainer/FieldContainer.js

@@ -1,71 +1,66 @@
 /**** Libraries ****/
-import React, { PureComponent } from 'react';
+import React, { memo } from 'react';
 import { defaultProps } from '../../../../form/fields/FieldContainer/props/defaultProps';
 import { propTypes } from '../../../../form/fields/FieldContainer/props/propTypes';
 /**** Components ****/
 
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/v1/Layout';
 /**** Icons ****/
 
 import { Icon } from '@zohodesk/icons';
 /**** CSS ****/
 
 import style from '../../../../form/fields/Fields.module.css';
-export default class FieldContainer extends PureComponent {
-  constructor(props) {
-    super(props);
-  }
 
-  render() {
-    let {
-      children,
-      ePhiData,
-      isLocked,
-      lockedInfoText,
-      infoText,
-      dataId,
-      renderProps,
-      alignContainer,
-      dataSelectorId
-    } = this.props;
-    let {
-      ePhiTitle = '',
-      ePhiText = '',
-      ePhiStatus = false
-    } = ePhiData;
-    let {
-      start: renderStart = null,
-      middle: renderMiddle = null,
-      end: renderEnd = null
-    } = renderProps;
-    return /*#__PURE__*/React.createElement(Container, {
-      align: alignContainer,
-      alignBox: "row",
-      isCover: false,
-      dataSelectorId: dataSelectorId
-    }, renderStart ? renderStart() : null, children, renderMiddle ? renderMiddle() : null, infoText ? /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-GN-info",
-      iconClass: style.infoIcon,
-      title: infoText,
-      size: "15"
-    }) : null, isLocked ? /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-GN-lock",
-      size: "13",
-      iconClass: style.lockIcon,
-      title: lockedInfoText
-    }) : null, ePhiStatus ? /*#__PURE__*/React.createElement("span", {
-      "data-title": ePhiTitle,
-      "data-id": `${dataId}_ePHI`,
-      "data-test-id": `${dataId}_ePHI`,
-      className: style.ePhiTag
-    }, ePhiText) : null, renderEnd ? renderEnd() : null);
-  }
+function FieldContainer(props) {
+  let {
+    children,
+    ePhiData,
+    isLocked,
+    lockedInfoText,
+    infoText,
+    dataId,
+    renderProps,
+    alignContainer,
+    dataSelectorId
+  } = props;
+  let {
+    ePhiTitle = '',
+    ePhiText = '',
+    ePhiStatus = false
+  } = ePhiData;
+  let {
+    start: renderStart = null,
+    middle: renderMiddle = null,
+    end: renderEnd = null
+  } = renderProps;
+  return /*#__PURE__*/React.createElement(Container, {
+    align: alignContainer,
+    alignBox: "row",
+    isCover: false,
+    dataSelectorId: dataSelectorId
+  }, renderStart ? renderStart() : null, children, renderMiddle ? renderMiddle() : null, infoText ? /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-GN-info",
+    iconClass: style.infoIcon,
+    title: infoText,
+    size: "15"
+  }) : null, isLocked ? /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-GN-lock",
+    size: "13",
+    iconClass: style.lockIcon,
+    title: lockedInfoText
+  }) : null, ePhiStatus ? /*#__PURE__*/React.createElement("span", {
+    "data-title": ePhiTitle,
+    "data-id": `${dataId}_ePHI`,
+    "data-test-id": `${dataId}_ePHI`,
+    className: style.ePhiTag
+  }, ePhiText) : null, renderEnd ? renderEnd() : null);
+} // const MomoizedFieldContainer = memo(FieldContainer);
+// export default MomoizedFieldContainer;
+// MomoizedFieldContainer.propTypes = propTypes;
+// MomoizedFieldContainer.defaultProps = defaultProps;
+
 
-}
 FieldContainer.propTypes = propTypes;
-FieldContainer.defaultProps = defaultProps; // if (__DOCS__) {
-//   FieldContainer.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+FieldContainer.defaultProps = defaultProps;
+export default FieldContainer;

package/es/v1/form/fields/MultiSelectField/MultiSelectField.js

@@ -1,73 +1,105 @@
 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); }
 
 /**** Libraries ****/
-import React, { PureComponent } from 'react';
+import React, { memo, useRef } from 'react';
 import { defaultProps } from '../../../../form/fields/MultiSelectField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/MultiSelectField/props/propTypes';
 /**** Components ****/
 
-import Label from '@zohodesk/components/lib/Label/Label';
-import MultiSelect from '@zohodesk/components/lib/MultiSelect/MultiSelect';
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import MultiSelect from '@zohodesk/components/es/v1/MultiSelect/MultiSelect';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /** CSS */
 
 import style from '../../../../form/fields/Fields.module.css';
-export default class MultiSelectField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleGetRef = this.handleGetRef.bind(this);
-    this.onDropBoxOpen = this.onDropBoxOpen.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);
 
-    this.onSearch = this.onSearch.bind(this);
-    this.getNextOptions = this.getNextOptions.bind(this);
-    this.getNextId = getUniqueId(this);
-  }
+function MultiSelectField(props) {
+  let {
+    labelName,
+    id,
+    isMandatory,
+    options,
+    selectedOptions,
+    needSelectAll,
+    selectAllText,
+    isAnimate,
+    emptyMessage,
+    size,
+    variant,
+    textBoxSize,
+    animationStyle,
+    validationMessage,
+    validationPalette,
+    isReadOnly,
+    errorType,
+    isDisabled,
+    title,
+    dataId,
+    dataSelectorId,
+    validationRuleMessage,
+    validationRulePalette,
+    onKeyDown,
+    infoText,
+    borderColor,
+    placeHolder,
+    fieldSize,
+    valueField,
+    textField,
+    isNextOptions,
+    isSearching,
+    popupGroup,
+    labelPalette,
+    palette,
+    lockedInfoText,
+    isLocked,
+    htmlId,
+    children,
+    customChildrenClass,
+    onFocus,
+    customProps,
+    i18nKeys,
+    renderLabelProps,
+    onChange,
+    onDropBoxOpen,
+    onSearch,
+    getNextOptions,
+    getRef
+  } = props;
+  const {
+    LabelProps = {},
+    MultiSelectProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+  const getNextId = useUniqueId();
+  const multiSelectBox = useRef(null);
+  let isDarkPalette = palette === 'dark';
+  let uniqueId = htmlId ? htmlId : getNextId();
 
-  handleChange(selectedValueIds, selectedValues) {
-    let {
-      id,
-      onChange
-    } = this.props;
+  function handleChange(selectedValueIds, selectedValues) {
     onChange && onChange(id, selectedValueIds, selectedValues);
   }
 
-  onDropBoxOpen() {
-    let {
-      onDropBoxOpen,
-      id
-    } = this.props;
+  function handleDropBoxOpen() {
     return onDropBoxOpen && onDropBoxOpen(id);
   }
 
-  onSearch(searchStr) {
-    let {
-      onSearch,
-      id
-    } = this.props;
+  function handleSearch(searchStr) {
     return onSearch && onSearch(searchStr, {
       id
     });
   }
 
-  getNextOptions(searchStr) {
-    let {
-      getNextOptions,
-      id
-    } = this.props;
+  function handleGetNextOptions(searchStr) {
     return getNextOptions && getNextOptions(searchStr, {
       id
     });
   }
 
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
-    this.multiSelectBox = el;
+  function handleGetRef(el) {
+    multiSelectBox.current = el;
     getRef && getRef(el, id);
   } // handleLabelClick() {
   //   let { isFocusOnLabelClick } = this.props;
@@ -81,133 +113,77 @@ export default class MultiSelectField extends PureComponent {
   // }
 
 
-  render() {
-    let {
-      labelName,
-      id,
-      isMandatory,
-      options,
-      selectedOptions,
-      needSelectAll,
-      selectAllText,
-      isAnimate,
-      emptyMessage,
-      size,
-      variant,
-      textBoxSize,
-      animationStyle,
-      validationMessage,
-      validationPalette,
-      isReadOnly,
-      errorType,
-      isDisabled,
-      title,
-      dataId,
-      dataSelectorId,
-      validationRuleMessage,
-      validationRulePalette,
-      onKeyDown,
-      infoText,
-      borderColor,
-      placeHolder,
-      fieldSize,
-      valueField,
-      textField,
-      isNextOptions,
-      isSearching,
-      popupGroup,
-      labelPalette,
-      palette,
-      lockedInfoText,
-      isLocked,
-      htmlId,
-      children,
-      customChildrenClass,
-      onFocus,
-      customProps,
-      i18nKeys,
-      renderLabelProps
-    } = this.props;
-    const {
-      LabelProps = {},
-      MultiSelectProps = {},
-      ValidationMessageProps1 = {},
-      ValidationMessageProps2 = {}
-    } = customProps;
-    let isDarkPalette = palette === 'dark';
-    let uniqueId = htmlId ? htmlId : this.getNextId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
-      "data-title": isDisabled ? title : null,
-      "data-selector-id": dataSelectorId
-    }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
-      infoText: infoText,
-      isLocked: isLocked,
-      lockedInfoText: lockedInfoText,
-      renderProps: renderLabelProps
-    }, /*#__PURE__*/React.createElement(Label, _extends({
-      text: labelName,
-      id: id,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
-      ,
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-      htmlFor: uniqueId
-    }, LabelProps))), /*#__PURE__*/React.createElement(MultiSelect, _extends({
-      options: options,
-      onChange: this.handleChange,
-      selectedOptions: selectedOptions,
-      getRef: this.handleGetRef,
-      isReadOnly: isReadOnly,
-      needSelectAll: needSelectAll,
-      selectAllText: selectAllText,
-      isAnimate: isAnimate,
-      emptyMessage: emptyMessage,
-      textBoxSize: textBoxSize,
-      variant: variant,
-      size: size,
-      animationStyle: animationStyle,
-      dataId: dataId,
-      onKeyDown: onKeyDown,
-      borderColor: borderColor,
-      placeHolder: placeHolder,
-      isDisabled: isDisabled,
-      textField: textField,
-      valueField: valueField,
-      getNextOptions: this.getNextOptions,
-      onSearch: this.onSearch,
-      onDropBoxOpen: this.onDropBoxOpen,
-      popupGroup: popupGroup,
-      isNextOptions: isNextOptions,
-      isSearching: isSearching,
-      palette: palette,
-      i18nKeys: i18nKeys,
-      htmlId: uniqueId,
-      customChildrenClass: customChildrenClass,
-      onFocus: onFocus
-    }, MultiSelectProps, {
-      ariaLabelledby: uniqueId
-    }), children ? children : null), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationMessage,
-      palette: validationPalette,
-      type: errorType,
-      dataId: `${dataId}_ValidationMessage`,
-      htmlFor: uniqueId
-    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationRuleMessage,
-      palette: validationRulePalette,
-      type: errorType,
-      dataId: `${dataId}_ValidationRuleMessage`,
-      htmlFor: uniqueId
-    }, ValidationMessageProps2)));
-  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''}`,
+    "data-title": isDisabled ? title : null,
+    "data-selector-id": dataSelectorId
+  }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
+    infoText: infoText,
+    isLocked: isLocked,
+    lockedInfoText: lockedInfoText,
+    renderProps: renderLabelProps
+  }, /*#__PURE__*/React.createElement(Label, _extends({
+    text: labelName,
+    id: id,
+    size: fieldSize === 'small' ? 'small' : 'medium',
+    palette: isDarkPalette ? 'dark' : isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette // onClick={this.handleLabelClick}
+    ,
+    customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
+    htmlFor: uniqueId
+  }, LabelProps))), /*#__PURE__*/React.createElement(MultiSelect, _extends({
+    options: options,
+    onChange: handleChange,
+    selectedOptions: selectedOptions,
+    getRef: handleGetRef,
+    isReadOnly: isReadOnly,
+    needSelectAll: needSelectAll,
+    selectAllText: selectAllText,
+    isAnimate: isAnimate,
+    emptyMessage: emptyMessage,
+    textBoxSize: textBoxSize,
+    variant: variant,
+    size: size,
+    animationStyle: animationStyle,
+    dataId: dataId,
+    onKeyDown: onKeyDown,
+    borderColor: borderColor,
+    placeHolder: placeHolder,
+    isDisabled: isDisabled,
+    textField: textField,
+    valueField: valueField,
+    getNextOptions: handleGetNextOptions,
+    onSearch: handleSearch,
+    onDropBoxOpen: handleDropBoxOpen,
+    popupGroup: popupGroup,
+    isNextOptions: isNextOptions,
+    isSearching: isSearching,
+    palette: palette,
+    i18nKeys: i18nKeys,
+    htmlId: uniqueId,
+    customChildrenClass: customChildrenClass,
+    onFocus: onFocus
+  }, MultiSelectProps, {
+    ariaLabelledby: uniqueId
+  }), children ? children : null), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationMessage`,
+    htmlFor: uniqueId
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationRuleMessage`,
+    htmlFor: uniqueId
+  }, ValidationMessageProps2)));
+} // const MomoizedMultiSelectField = memo(MultiSelectField);
+// export default MomoizedMultiSelectField;
+// MomoizedMultiSelectField.propTypes = propTypes;
+// MomoizedMultiSelectField.defaultProps = defaultProps;
+
 
-}
 MultiSelectField.propTypes = propTypes;
-MultiSelectField.defaultProps = defaultProps; // if (__DOCS__) {
-//   MultiSelectField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+MultiSelectField.defaultProps = defaultProps;
+export default MultiSelectField;