@zohodesk/dot 1.3.0 → 1.3.2

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

@@ -1,7 +1,7 @@
 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 } from 'react';
 import { defaultProps } from '../../../../form/fields/RadioField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/RadioField/props/propTypes';
 /**** Components ****/
@@ -12,105 +12,97 @@ import ValidationMessage from '../ValidationMessage/ValidationMessage';
 /** Css */
 
 import style from '../../../../form/fields/Fields.module.css';
-export default class RadioField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-  }
 
-  handleChange(value) {
-    let {
-      id,
-      onChange
-    } = this.props;
+const RadioField = props => {
+  const {
+    labelName,
+    id,
+    isMandatory,
+    options,
+    validationMessage,
+    validationPalette,
+    errorType,
+    isDisabled,
+    title,
+    labelPalette,
+    labelSize,
+    size,
+    selectedValue,
+    isActive,
+    dataId,
+    dataSelectorId,
+    validationRuleMessage,
+    validationRulePalette,
+    isReadOnly,
+    variant,
+    customProps,
+    onChange
+  } = props;
+  const {
+    LabelProps = {},
+    RadioProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+
+  const handleChange = value => {
     onChange && onChange(id, value);
-  }
+  };
 
-  render() {
+  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(Label, _extends({
+    text: labelName,
+    size: "medium",
+    id: id,
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
+    customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
+    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+  }, LabelProps)), /*#__PURE__*/React.createElement("div", {
+    className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
+  }, options.map((option, index) => {
     let {
-      labelName,
-      id,
-      isMandatory,
-      options,
-      validationMessage,
-      validationPalette,
-      errorType,
-      isDisabled,
-      title,
-      labelPalette,
-      labelSize,
-      size,
-      selectedValue,
-      isActive,
-      dataId,
-      dataSelectorId,
-      validationRuleMessage,
-      validationRulePalette,
-      isReadOnly,
-      variant,
-      customProps
-    } = this.props;
-    const {
-      LabelProps = {},
-      RadioProps = {},
-      ValidationMessageProps1 = {},
-      ValidationMessageProps2 = {}
-    } = customProps;
-    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(Label, _extends({
-      text: labelName,
-      size: "medium",
-      id: id,
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : 'default',
-      customClass: `${style.fieldLabel} ${isMandatory ? style.labelMandatory : ''}`,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-    }, LabelProps)), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style.fieldMargin_medium : ''} ${style.radioContainer}`
-    }, options.map((option, index) => {
-      let {
-        text,
-        value
-      } = option;
-      return /*#__PURE__*/React.createElement("span", {
-        key: index,
-        className: `${style.radio}`
-      }, /*#__PURE__*/React.createElement(Radio, _extends({
-        id: index,
-        value: value,
-        name: id,
-        text: text,
-        labelPalette: labelPalette,
-        labelSize: labelSize,
-        active: isActive,
-        disabled: isDisabled,
-        onChange: this.handleChange,
-        size: size,
-        checked: selectedValue == value,
-        dataId: dataId,
-        isReadOnly: isReadOnly,
-        variant: variant
-      }, RadioProps)));
-    })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationMessage,
-      palette: validationPalette,
-      type: errorType,
-      dataId: `${dataId}_ValidationMessage`
-    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationRuleMessage,
-      palette: validationRulePalette,
-      type: errorType,
-      dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2)));
-  }
+      text,
+      value
+    } = option;
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: `${style.radio}`
+    }, /*#__PURE__*/React.createElement(Radio, _extends({
+      id: index,
+      value: value,
+      name: id,
+      text: text,
+      labelPalette: labelPalette,
+      labelSize: labelSize,
+      active: isActive,
+      disabled: isDisabled,
+      onChange: handleChange,
+      size: size,
+      checked: selectedValue == value,
+      dataId: dataId,
+      isReadOnly: isReadOnly,
+      variant: variant
+    }, RadioProps)));
+  })), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationMessage`
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    dataId: `${dataId}_ValidationRuleMessage`
+  }, ValidationMessageProps2)));
+};
 
-}
 RadioField.propTypes = propTypes;
-RadioField.defaultProps = defaultProps; // if (__DOCS__) {
-//   RadioField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+RadioField.defaultProps = defaultProps;
+const MemoizedRadioField = /*#__PURE__*/memo(RadioField);
+MemoizedRadioField.propTypes = propTypes;
+MemoizedRadioField.defaultProps = defaultProps;
+MemoizedRadioField.displayName = 'RadioField';
+export default MemoizedRadioField;

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

@@ -1,7 +1,7 @@
 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 } from 'react';
 import { defaultProps } from '../../../../form/fields/SelectField/props/defaultProps';
 import { propTypes } from '../../../../form/fields/SelectField/props/propTypes';
 /**** Components ****/
@@ -9,39 +9,82 @@ import { propTypes } from '../../../../form/fields/SelectField/props/propTypes';
 import Label from '@zohodesk/components/es/v1/Label/Label';
 import Select from '@zohodesk/components/es/v1/Select/Select';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
 /**** props ****/
 
 /** CSS */
 
 import style from '../../../../form/fields/Fields.module.css';
-export default class SelectField extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleGetRef = this.handleGetRef.bind(this); // this.handleLabelClick = this.handleLabelClick.bind(this);
 
-    this.getNextId = getUniqueId(this);
-  }
+const SelectField = props => {
+  const {
+    labelName,
+    isMandatory,
+    options,
+    selectedValue,
+    needSearch,
+    emptyMessage,
+    animationStyle,
+    textBoxSize,
+    textBoxVariant,
+    searchBoxSize,
+    searchBoxPlaceHolder,
+    validationMessage,
+    validationPalette,
+    isReadOnly,
+    valueField,
+    textField,
+    excludeOptions,
+    errorType,
+    isDisabled,
+    title,
+    dataId,
+    dataSelectorId,
+    fieldClass,
+    validationRuleMessage,
+    validationRulePalette,
+    onKeyDown,
+    infoText,
+    isLocked,
+    lockedInfoText,
+    borderColor,
+    fieldSize,
+    isNextOptions,
+    getNextOptions,
+    popupGroup,
+    onSearch,
+    labelPalette,
+    labelCustomClass,
+    htmlId,
+    needLocalSearch,
+    isDefaultSelectValue,
+    placeHolder,
+    children,
+    onFocus,
+    iconOnHover,
+    customProps,
+    renderLabelProps,
+    id,
+    onChange,
+    getRef
+  } = props;
+  const {
+    LabelProps = {},
+    SelectProps = {},
+    ValidationMessageProps1 = {},
+    ValidationMessageProps2 = {}
+  } = customProps;
+  const getNextId = useUniqueId();
+  let uniqueId = htmlId ? htmlId : getNextId();
 
-  handleChange(selctedId, selectedValue) {
-    let {
-      id: fieldId,
-      onChange,
-      selectedValue: propValue
-    } = this.props;
-    onChange && propValue !== selctedId && onChange(fieldId, selctedId, selectedValue);
-  }
+  const handleChange = (selectedId, selectedVal) => {
+    onChange && selectedValue !== selectedId && onChange(id, selectedId, selectedVal);
+  };
 
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
-    this.selectBox = el;
+  const handleGetRef = el => {
     getRef && getRef(el, id);
-  } // handleLabelClick() {
+  }; // handleLabelClick() {
   //   let { isFocusOnLabelClick } = this.props;
   //   if (isFocusOnLabelClick && this.selectBox && this.selectBox.focus) {
   //     this.selectBox.focus();
@@ -49,135 +92,77 @@ export default class SelectField extends PureComponent {
   // }
 
 
-  render() {
-    let {
-      labelName,
-      id,
-      isMandatory,
-      options,
-      selectedValue,
-      needSearch,
-      emptyMessage,
-      animationStyle,
-      textBoxSize,
-      textBoxVariant,
-      searchBoxSize,
-      searchBoxPlaceHolder,
-      validationMessage,
-      validationPalette,
-      isReadOnly,
-      valueField,
-      textField,
-      excludeOptions,
-      errorType,
-      isDisabled,
-      title,
-      dataId,
-      dataSelectorId,
-      fieldClass,
-      validationRuleMessage,
-      validationRulePalette,
-      onKeyDown,
-      infoText,
-      isLocked,
-      lockedInfoText,
-      borderColor,
-      fieldSize,
-      isNextOptions,
-      getNextOptions,
-      popupGroup,
-      onSearch,
-      labelPalette,
-      labelCustomClass,
-      htmlId,
-      needLocalSearch,
-      isDefaultSelectValue,
-      placeHolder,
-      children,
-      onFocus,
-      iconOnHover,
-      customProps,
-      renderLabelProps
-    } = this.props;
-    const {
-      LabelProps = {},
-      SelectProps = {},
-      ValidationMessageProps1 = {},
-      ValidationMessageProps2 = {}
-    } = customProps;
-    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,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-    }, LabelProps, {
-      id: uniqueId
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
-    }, /*#__PURE__*/React.createElement(Select, _extends({
-      options: options,
-      selectedValue: selectedValue,
-      onChange: this.handleChange,
-      onFocus: onFocus,
-      getRef: this.handleGetRef,
-      needSearch: needSearch,
-      emptyMessage: emptyMessage,
-      animationStyle: animationStyle,
-      textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
-      textBoxVariant: textBoxVariant,
-      searchBoxSize: searchBoxSize,
-      searchBoxPlaceHolder: searchBoxPlaceHolder,
-      valueField: valueField,
-      textField: textField,
-      excludeOptions: excludeOptions,
-      dataId: dataId,
-      onKeyDown: onKeyDown,
-      borderColor: borderColor,
-      isDisabled: isDisabled,
-      isReadOnly: isReadOnly,
-      isNextOptions: isNextOptions,
-      getNextOptions: getNextOptions,
-      popupGroup: popupGroup,
-      onSearch: onSearch,
-      htmlId: uniqueId,
-      needLocalSearch: needLocalSearch,
-      isDefaultSelectValue: isDefaultSelectValue,
-      placeHolder: placeHolder,
-      iconOnHover: iconOnHover
-    }, SelectProps, {
-      ariaLabelledby: uniqueId
-    }), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationMessage,
-      palette: validationPalette,
-      type: errorType,
-      htmlFor: uniqueId,
-      dataId: `${dataId}_ValidationMessage`
-    }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-      text: validationRuleMessage,
-      palette: validationRulePalette,
-      type: errorType,
-      htmlFor: uniqueId,
-      dataId: `${dataId}_ValidationRuleMessage`
-    }, 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,
+    size: fieldSize === 'small' ? 'small' : 'medium',
+    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+    customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+    htmlFor: uniqueId,
+    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
+  }, LabelProps, {
+    id: uniqueId
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''} ${fieldClass ? fieldClass : ''}`
+  }, /*#__PURE__*/React.createElement(Select, _extends({
+    options: options,
+    selectedValue: selectedValue,
+    onChange: handleChange,
+    onFocus: onFocus,
+    getRef: handleGetRef,
+    needSearch: needSearch,
+    emptyMessage: emptyMessage,
+    animationStyle: animationStyle,
+    textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
+    textBoxVariant: textBoxVariant,
+    searchBoxSize: searchBoxSize,
+    searchBoxPlaceHolder: searchBoxPlaceHolder,
+    valueField: valueField,
+    textField: textField,
+    excludeOptions: excludeOptions,
+    dataId: dataId,
+    onKeyDown: onKeyDown,
+    borderColor: borderColor,
+    isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
+    isNextOptions: isNextOptions,
+    getNextOptions: getNextOptions,
+    popupGroup: popupGroup,
+    onSearch: onSearch,
+    htmlId: uniqueId,
+    needLocalSearch: needLocalSearch,
+    isDefaultSelectValue: isDefaultSelectValue,
+    placeHolder: placeHolder,
+    iconOnHover: iconOnHover
+  }, SelectProps, {
+    ariaLabelledby: uniqueId
+  }), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationMessage,
+    palette: validationPalette,
+    type: errorType,
+    htmlFor: uniqueId,
+    dataId: `${dataId}_ValidationMessage`
+  }, ValidationMessageProps1)), validationRuleMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+    text: validationRuleMessage,
+    palette: validationRulePalette,
+    type: errorType,
+    htmlFor: uniqueId,
+    dataId: `${dataId}_ValidationRuleMessage`
+  }, ValidationMessageProps2)));
+};
 
-}
 SelectField.propTypes = propTypes;
-SelectField.defaultProps = defaultProps; // if (__DOCS__) {
-//   SelectField.docs = {
-//     componentGroup: 'Form Fields',
-//     folderName: 'General'
-//   };
-// }
+SelectField.defaultProps = defaultProps;
+const MemoizedSelectField = /*#__PURE__*/memo(SelectField);
+MemoizedSelectField.propTypes = propTypes;
+MemoizedSelectField.defaultProps = defaultProps;
+MemoizedSelectField.displayName = 'SelectField';
+export default MemoizedSelectField;