@zohodesk/dot 1.0.0-temp-157 → 1.0.0-temp-160

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

@@ -0,0 +1,189 @@
+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, { 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/es/v1/Label/Label';
+import MultiSelect from '@zohodesk/components/es/v1/MultiSelect/MultiSelect';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import FieldContainer from '../FieldContainer/FieldContainer';
+/** CSS */
+
+import style from '../../../../form/fields/Fields.module.css';
+
+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();
+
+  function handleChange(selectedValueIds, selectedValues) {
+    onChange && onChange(id, selectedValueIds, selectedValues);
+  }
+
+  function handleDropBoxOpen() {
+    return onDropBoxOpen && onDropBoxOpen(id);
+  }
+
+  function handleSearch(searchStr) {
+    return onSearch && onSearch(searchStr, {
+      id
+    });
+  }
+
+  function handleGetNextOptions(searchStr) {
+    return getNextOptions && getNextOptions(searchStr, {
+      id
+    });
+  }
+
+  function handleGetRef(el) {
+    multiSelectBox.current = el;
+    getRef && getRef(el, id);
+  } // handleLabelClick() {
+  //   let { isFocusOnLabelClick } = this.props;
+  //   if (
+  //     isFocusOnLabelClick &&
+  //     this.multiSelectBox &&
+  //     this.multiSelectBox.focus
+  //   ) {
+  //     this.multiSelectBox.focus();
+  //   }
+  // }
+
+
+  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)));
+}
+
+MultiSelectField.propTypes = propTypes;
+MultiSelectField.defaultProps = defaultProps;
+const MemoizedMultiSelectField = /*#__PURE__*/memo(MultiSelectField);
+MemoizedMultiSelectField.propTypes = propTypes;
+MemoizedMultiSelectField.defaultProps = defaultProps;
+MemoizedMultiSelectField.displayName = 'MultiSelectField';
+export default MemoizedMultiSelectField;

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

@@ -0,0 +1,161 @@
+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, { memo, useState, useRef } from 'react';
+import { defaultProps } from '../../../../form/fields/PhoneField/props/defaultProps';
+import { propTypes } from '../../../../form/fields/PhoneField/props/propTypes';
+/**** Components ****/
+
+import { Icon } from '@zohodesk/icons';
+import { Container, Box } from '@zohodesk/components/es/v1/Layout';
+import TextBoxField from '../TextBoxField/TextBoxField';
+import Link from '../../../Link/Link';
+/**** CSS ****/
+
+import style from '../../../../form/fields/Fields.module.css';
+import { formatPhoneUrl } from '../../../../utils/General';
+
+function PhoneField(props) {
+  let {
+    labelName,
+    id,
+    textBoxSize,
+    textBoxVariant,
+    textBoxType,
+    isMandatory,
+    validationMessage,
+    maxLength,
+    isReadOnly,
+    value,
+    errorType,
+    isDisabled,
+    title,
+    onBlur,
+    dataId,
+    dataSelectorId,
+    onKeyDown,
+    placeHolder,
+    infoText,
+    isTelephony,
+    providerName,
+    ticketId,
+    contactId,
+    borderColor,
+    fieldSize,
+    labelPalette,
+    labelCustomClass,
+    i18nKeys,
+    onCall,
+    ePhiData,
+    type,
+    onFocus,
+    onChange,
+    getRef,
+    customProps
+  } = props;
+  const {
+    TextBoxFieldProps = {},
+    LinkProps = {}
+  } = customProps;
+  const [isActive, setActive] = useState(false);
+  const textBoxElem = useRef(null);
+  let {
+    callTitle
+  } = i18nKeys;
+  let callBackparam = {
+    contact_id: contactId ? contactId : '',
+    request_id: ticketId,
+    activity_id: '',
+    entity_module: 'Requests'
+  };
+  let phoneValue = value;
+
+  if (isActive) {
+    phoneValue = value;
+  } else {
+    phoneValue = formatPhoneUrl(value);
+  }
+
+  function handleChange(id, value) {
+    onChange && onChange(id, value);
+  }
+
+  function handleGetRef(el) {
+    textBoxElem.current = el;
+    getRef && getRef(el, id);
+  }
+
+  function focusInput(e) {
+    textBoxElem.current.focus();
+  }
+
+  function handleFocus() {
+    setActive(true);
+    onFocus && onFocus();
+  }
+
+  function handleBlur() {
+    setActive(false);
+    onBlur && onBlur();
+  }
+
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: `${style.container} ${isDisabled ? style.disabled : ''}`,
+    "data-title": isDisabled ? title : null,
+    dataSelectorId: dataSelectorId
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(TextBoxField, _extends({
+    labelName: labelName,
+    id: id,
+    palette: isMandatory ? 'mandatory' : 'default',
+    onClick: focusInput,
+    infoText: infoText,
+    type: textBoxType,
+    textBoxVariant: textBoxVariant,
+    size: textBoxSize,
+    maxLength: maxLength,
+    isReadOnly: isReadOnly,
+    getRef: handleGetRef,
+    value: phoneValue,
+    onChange: handleChange,
+    dataId: dataId,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onKeyDown: onKeyDown,
+    placeHolder: placeHolder,
+    validationMessage: validationMessage,
+    borderColor: borderColor,
+    isDisabled: isDisabled,
+    fieldSize: fieldSize,
+    isMandatory: isMandatory,
+    labelPalette: labelPalette,
+    labelCustomClass: labelCustomClass,
+    errorType: errorType,
+    ePhiData: ePhiData
+  }, TextBoxFieldProps))), /*#__PURE__*/React.createElement(Box, null, isTelephony && value ? /*#__PURE__*/React.createElement(Link, _extends({
+    className: style.phoneIcon,
+    callfrom: "phone",
+    pbxname: providerName,
+    phonenum: value,
+    module: "RequestDetailsView",
+    title: callTitle,
+    callBackParam: JSON.stringify(callBackparam),
+    callto: 'RequestPhoneNumber',
+    href: true,
+    onClick: onCall,
+    type: type
+  }, LinkProps), /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-GN-phone",
+    size: "14"
+  })) : null));
+}
+
+PhoneField.propTypes = propTypes;
+PhoneField.defaultProps = defaultProps;
+const MemoizedPhoneField = /*#__PURE__*/memo(PhoneField);
+MemoizedPhoneField.propTypes = propTypes;
+MemoizedPhoneField.defaultProps = defaultProps;
+MemoizedPhoneField.displayName = 'PhoneField';
+export default MemoizedPhoneField;

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

@@ -0,0 +1,108 @@
+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, { memo } from 'react';
+import { defaultProps } from '../../../../form/fields/RadioField/props/defaultProps';
+import { propTypes } from '../../../../form/fields/RadioField/props/propTypes';
+/**** Components ****/
+
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import Radio from '@zohodesk/components/es/v1/Radio/Radio';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+/** Css */
+
+import style from '../../../../form/fields/Fields.module.css';
+
+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);
+  };
+
+  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: 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;
+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

@@ -0,0 +1,168 @@
+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, { memo } from 'react';
+import { defaultProps } from '../../../../form/fields/SelectField/props/defaultProps';
+import { propTypes } from '../../../../form/fields/SelectField/props/propTypes';
+/**** Components ****/
+
+import Label from '@zohodesk/components/es/v1/Label/Label';
+import Select from '@zohodesk/components/es/v1/Select/Select';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import { useUniqueId } from '@zohodesk/components/es/v1/Provider/IdProvider';
+import FieldContainer from '../FieldContainer/FieldContainer';
+/**** props ****/
+
+/** CSS */
+
+import style from '../../../../form/fields/Fields.module.css';
+
+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();
+
+  const handleChange = (selectedId, selectedVal) => {
+    onChange && selectedValue !== selectedId && onChange(id, selectedId, selectedVal);
+  };
+
+  const handleGetRef = el => {
+    getRef && getRef(el, id);
+  }; // handleLabelClick() {
+  //   let { isFocusOnLabelClick } = this.props;
+  //   if (isFocusOnLabelClick && this.selectBox && this.selectBox.focus) {
+  //     this.selectBox.focus();
+  //   }
+  // }
+
+
+  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;
+const MemoizedSelectField = /*#__PURE__*/memo(SelectField);
+MemoizedSelectField.propTypes = propTypes;
+MemoizedSelectField.defaultProps = defaultProps;
+MemoizedSelectField.displayName = 'SelectField';
+export default MemoizedSelectField;