@zohodesk/dot 1.0.0-temp-60 → 1.0.0-temp.213

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -1,322 +0,0 @@
-import "core-js/modules/es.string.replace";
-
-function _extends() { _extends = Object.assign || 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); }
-
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Label from '@zohodesk/components/lib/Label/Label';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import TagsMultiSelect from '../TagsMultiSelect/TagsMultiSelect';
-import fieldStyle from '../Fields.module.css';
-import style from './TagsMultiSelectField.module.css';
-
-const TagsMultiSelectField = props => {
-  const [selectedSuggestionIndex, updateSelectedSuggestionIndex] = useState(0);
-  const [isValueChanged, updateValueChangedState] = useState(false);
-  let [searchValue, changeSearchValue] = useState(props.searchValue || '');
-  const {
-    fieldProperties,
-    styleProperties,
-    actions,
-    dataId,
-    htmlId,
-    isLoading,
-    isListDisabled,
-    isNewNeeded,
-    isPopupOpen,
-    isPopupReady,
-    removeClose,
-    position,
-    togglePopup,
-    noMoreData,
-    numberOfDisplayedValues,
-    getTargetRef,
-    getContainerRef,
-    i18nKeys = {},
-    getTextBoxChildren,
-    children,
-    ePhiData,
-    customProps
-  } = props;
-  const {
-    LabelProps = {},
-    TagsMultiSelectProps = {},
-    ValidationMessageProps = {}
-  } = customProps;
-  const {
-    labelSize,
-    labelPalette,
-    labelClass,
-    containerClass,
-    needBorder,
-    borderColor,
-    validationPalette,
-    errorType
-  } = styleProperties;
-  let {
-    onChange,
-    onAdd,
-    onDelete,
-    onScroll,
-    onFocus
-  } = actions;
-  let {
-    id,
-    labelName,
-    isMandatory,
-    isDisabled,
-    isReadOnly,
-    value,
-    selectedValueCount,
-    validationMessage,
-    options
-  } = fieldProperties;
-  let {
-    ePhiTitle = '',
-    ePhiText = '',
-    ePhiStatus = false
-  } = ePhiData;
-  options = options || [];
-
-  const handleKeyUp = event => {
-    let {
-      keyCode
-    } = event;
-    onAdd = typeof onAdd !== 'function' ? () => {} : onAdd;
-    onDelete = typeof onDelete !== 'function' ? () => {} : onDelete;
-
-    if (keyCode === 13) {
-      if (selectedSuggestionIndex > -1 && options.length) {
-        if (options.length === 1 && options[0].isNew) {
-          searchValue = searchValue.replace(',', '');
-          onAdd({
-            name: searchValue
-          }, event);
-        } else {
-          onAdd(options[selectedSuggestionIndex], event);
-        }
-      } else {
-        searchValue = searchValue.replace(',', '');
-        onAdd({
-          name: searchValue
-        }, event);
-      }
-
-      changeSearchValue('');
-      updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
-        let newIndex = 0;
-
-        if (options.length) {
-          if (options.length === 1 && options[0].isNew) {
-            return newIndex;
-          }
-
-          newIndex = prevSelectedSuggestionIndex === options.length - 1 ? options.length - 2 : prevSelectedSuggestionIndex;
-        }
-
-        return newIndex;
-      });
-    } else if (keyCode === 188 && !event.shiftKey) {
-      searchValue = searchValue.replace(',', '');
-
-      if (options.length === 1 && options[0].isNew) {
-        onAdd({
-          name: searchValue
-        }, event);
-        changeSearchValue('');
-      }
-    } else if (keyCode === 40) {
-      updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
-        let newIndex = prevSelectedSuggestionIndex >= options.length - 1 ? 0 : prevSelectedSuggestionIndex + 1;
-        return newIndex;
-      });
-    } else if (keyCode === 38) {
-      updateSelectedSuggestionIndex(prevSelectedSuggestionIndex => {
-        let newIndex = prevSelectedSuggestionIndex <= 0 || prevSelectedSuggestionIndex >= options.length - 1 ? options.length - 1 : prevSelectedSuggestionIndex - 1;
-        return newIndex;
-      });
-    } else if (keyCode === 8 && searchValue === '' & !isValueChanged) {
-      let valueLength = value.length;
-      value.length ? onDelete(value[valueLength - 1].name, event) : undefined;
-    }
-
-    updateValueChangedState(false);
-  };
-
-  const handleChange = (searchValue, event) => {
-    updateValueChangedState(true);
-    updateSelectedSuggestionIndex(0);
-    changeSearchValue(searchValue);
-    typeof onChange === 'function' && onChange(searchValue, event);
-
-    if (!isPopupOpen) {
-      togglePopup(event);
-    }
-  };
-
-  const handleTogglePopup = event => {
-    if (isPopupReady) {
-      removeClose(event);
-    } else {
-      togglePopup(event, position);
-      !isPopupOpen && typeof onFocus === 'function' ? onFocus(event) : null;
-      updateSelectedSuggestionIndex(0);
-    }
-  };
-
-  const handleAdd = value => {
-    changeSearchValue('');
-    typeof onAdd === 'function' && onAdd(value);
-  };
-
-  const documentClick = () => {
-    changeSearchValue('');
-  };
-
-  useEffect(() => {
-    window.addEventListener('click', documentClick);
-    return () => {
-      window.removeEventListener('click', documentClick);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: style.container
-  }, /*#__PURE__*/React.createElement(Container, {
-    alignBox: "row",
-    align: "baseline",
-    isCover: false
-  }, labelName && /*#__PURE__*/React.createElement(Label, _extends({
-    text: labelName,
-    title: labelName,
-    id: id,
-    size: labelSize,
-    palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-    customClass: `${isMandatory ? fieldStyle.labelMandatory : ''} ${labelClass ? labelClass : ''}`,
-    dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`,
-    htmlFor: htmlId
-  }, LabelProps)), selectedValueCount ? /*#__PURE__*/React.createElement(Box, {
-    dataId: `${dataId}_tagCount`,
-    className: style.count
-  }, `(${selectedValueCount})`) : null, ePhiStatus ? /*#__PURE__*/React.createElement("span", {
-    "data-title": ePhiTitle,
-    "data-id": `${dataId}_ePHI`,
-    className: fieldStyle.ePhiTag
-  }, ePhiText) : null, children ? children : null), /*#__PURE__*/React.createElement(TagsMultiSelect, _extends({
-    addTag: handleAdd,
-    deleteTag: onDelete,
-    handleChange: handleChange,
-    handleKeyUp: handleKeyUp,
-    isReadOnly: isReadOnly,
-    name: searchValue,
-    noMoreData: noMoreData,
-    searchList: isNewNeeded && searchValue.length && !options.length ? [{
-      isNew: true,
-      name: searchValue
-    }] : options,
-    selectSearchIndex: selectedSuggestionIndex,
-    tagsList: value,
-    i18nKeys: i18nKeys,
-    boxPosition: position,
-    getTargetRef: getTargetRef,
-    getContainerRef: getContainerRef,
-    handleTogglePopup: handleTogglePopup,
-    isPopupReady: isPopupReady,
-    isPopupOpen: isPopupOpen,
-    onScroll: onScroll,
-    isTagListLoading: isLoading,
-    listDisabled: isListDisabled,
-    chipNeedToShow: numberOfDisplayedValues,
-    dataId: dataId,
-    needBorder: needBorder,
-    borderColor: borderColor,
-    htmlId: htmlId,
-    getTextBoxChildren: getTextBoxChildren,
-    className: containerClass
-  }, TagsMultiSelectProps)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
-    text: validationMessage,
-    palette: validationPalette,
-    type: errorType,
-    dataId: `${dataId}_ValidationMessage`,
-    htmlFor: htmlId
-  }, ValidationMessageProps)));
-};
-
-export default Popup(TagsMultiSelectField);
-TagsMultiSelectField.propTypes = {
-  fieldProperties: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    labelName: PropTypes.string,
-    isMandatory: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    isReadOnly: PropTypes.bool,
-    value: PropTypes.string,
-    selectedValueCount: PropTypes.string,
-    validationMessage: PropTypes.string,
-    options: PropTypes.array
-  }),
-  styleProperties: PropTypes.shape({
-    labelSize: PropTypes.string,
-    labelPalette: PropTypes.string,
-    labelClass: PropTypes.string,
-    containerClass: PropTypes.string,
-    needBorder: PropTypes.bool,
-    borderColor: PropTypes.string,
-    validationPalette: PropTypes.string,
-    errorType: PropTypes.string
-  }),
-  actions: PropTypes.shape({
-    onChange: PropTypes.func,
-    onAdd: PropTypes.func,
-    onDelete: PropTypes.func,
-    onScroll: PropTypes.func,
-    onFocus: PropTypes.func
-  }),
-  isNewNeeded: PropTypes.bool,
-  data: PropTypes.string,
-  htmlId: PropTypes.string,
-  isLoading: PropTypes.bool,
-  isListDisabled: PropTypes.bool,
-  numberOfDisplayedValues: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  getTextBoxChildren: PropTypes.func,
-  children: PropTypes.node,
-  i18nKeys: PropTypes.object,
-  noMoreData: PropTypes.bool,
-  position: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  ePhiData: PropTypes.shape({
-    ePhiTitle: PropTypes.string,
-    ePhiText: PropTypes.string,
-    ePhiStatus: PropTypes.bool
-  }),
-  customProps: PropTypes.shape({
-    LabelProps: PropTypes.object,
-    TagsMultiSelectProps: PropTypes.object,
-    ValidationMessageProps: PropTypes.object
-  })
-};
-TagsMultiSelectField.defaultProps = {
-  fieldProperties: {
-    isDisabled: false,
-    isMandatory: false
-  },
-  styleProperties: {
-    containerClass: '',
-    needBorder: true,
-    borderColor: 'default',
-    errorType: 'primary'
-  },
-  isNewNeeded: false,
-  i18nKeys: {},
-  numberOfDisplayedValues: '5',
-  ePhiData: {},
-  customProps: {}
-};
-
-if (false) {
-  TagsMultiSelectField.docs = {
-    componentGroup: 'TagsMultiSelectField'
-  };
-}

package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css

@@ -1,6 +0,0 @@
-.count {
-  color: var(--zdt_tagsmultiselectField_count_text);
-  font-size: var(--zd_font_size12);
-  margin-left: var(--zd_size4);
-  word-break: break-word;
-}

package/es/form/fields/TagsMultiSelectField/docs/TagsMultiSelectField__default.docs.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import TagsMultiSelectField from '../TagsMultiSelectField';
-import Icon from '@zohodesk/icons/lib/Icon';
-
-const TagsMultiSelectField__default = () => {
-  let value = [{
-    name: 'Tag1',
-    tagType: 'MANUAL',
-    id: '5853000007033049'
-  }, {
-    name: 'Tag2',
-    tagType: 'MANUAL',
-    id: '5853000007033069'
-  }, {
-    name: 'Tag3',
-    tagType: 'MANUAL',
-    id: '5853000007033080'
-  }];
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      margin: '20px 20px 0'
-    }
-  }, /*#__PURE__*/React.createElement(TagsMultiSelectField, {
-    ePhiData: {
-      ePhiTitle: 'ehhweh',
-      ePhiText: 'ephi',
-      ePhiStatus: true
-    },
-    fieldProperties: {
-      id: 'tag',
-      name: 'tag',
-      labelName: 'Tags MultiSelect',
-      isReadOnly: false,
-      isDisabled: false,
-      value,
-      options: [],
-      selectedValueCount: '10'
-    },
-    styleProperties: {
-      labelPalette: 'secondary'
-    },
-    i18nKeys: {
-      newTagText: 'New Tag',
-      emptyTitleText: 'OOPS',
-      emptyDescription: 'No tag available',
-      deleteText: 'Delete tag',
-      lessText: 'Less',
-      moreText: 'More'
-    },
-    actions: {
-      onAdd: (tag, event) => {
-        console.log('Add Event=====', tag);
-      },
-      onDelete: (tag, event) => {
-        console.log('Delete Event=====', tag);
-      },
-      onChange: searchValue => {
-        console.log('Value Change Event------>>', searchValue);
-      },
-      onScroll: () => {}
-    },
-    isNewNeeded: true,
-    getTextBoxChildren: () => /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-SE-setpracket",
-      size: "18"
-    })
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontSize: '13px',
-      marginLeft: '5px',
-      color: 'var(--dot_shuttleGrey)'
-    }
-  }, "shift+t")));
-};
-
-export default TagsMultiSelectField__default;
-
-if (false) {
-  TagsMultiSelectField__default.docs = {
-    componentGroup: 'TagsMultiSelectField'
-  };
-}

package/es/form/fields/TextBoxField/TextBoxField.js

@@ -1,234 +0,0 @@
-function _extends() { _extends = Object.assign || 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 PropTypes from 'prop-types';
-/**** Components ****/
-
-import Label from '@zohodesk/components/lib/Label/Label';
-import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
-import ValidationMessage from '../ValidationMessage/ValidationMessage';
-import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
-/**** Icons ****/
-
-import Icon from '@zohodesk/icons/lib/Icon';
-/**** CSS ****/
-
-import style from '../Fields.module.css';
-export default class TextBoxField 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);
-  }
-
-  handleChange(value) {
-    let {
-      id,
-      onChange
-    } = this.props;
-    onChange && onChange(id, value);
-  }
-
-  handleGetRef(el) {
-    let {
-      getRef,
-      id
-    } = this.props;
-    this.textBox = el;
-    getRef && getRef(el, id);
-  } // handleLabelClick() {
-  //   // let { isFocusOnLabelClick } = this.props;
-  //   // if (isFocusOnLabelClick && this.textBox && this.textBox.focus) {
-  //   //   this.textBox.focus();
-  //   // }
-  // }
-
-
-  render() {
-    let {
-      labelName,
-      id,
-      textBoxSize,
-      textBoxVariant,
-      textBoxType,
-      isMandatory,
-      validationMessage,
-      validationPalette,
-      maxLength,
-      isReadOnly,
-      value,
-      errorType,
-      isDisabled,
-      title,
-      onBlur,
-      dataId,
-      validationRuleMessage,
-      validationRulePalette,
-      onKeyDown,
-      placeHolder,
-      infoText,
-      borderColor,
-      fieldSize,
-      labelPalette,
-      labelCustomClass,
-      htmlId,
-      lockedInfoText,
-      isLocked,
-      needReadOnlyStyle,
-      isClickable,
-      onFocus,
-      ePhiData,
-      children,
-      customProps
-    } = this.props;
-    const {
-      LabelProps = {},
-      TextBoxIconProps = {},
-      ValidationMessageProps1 = {},
-      ValidationMessageProps2 = {}
-    } = customProps;
-    let {
-      ePhiTitle = '',
-      ePhiText = '',
-      ePhiStatus = false
-    } = ePhiData;
-    let uniqueId = htmlId ? htmlId : this.getNextId();
-    return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isDisabled ? style.disabled : ''}`,
-      "data-title": isDisabled ? title : ''
-    }, labelName && /*#__PURE__*/React.createElement("div", {
-      className: style.labelContainer
-    }, /*#__PURE__*/React.createElement(Label, _extends({
-      text: labelName,
-      size: fieldSize === 'small' ? 'small' : 'medium',
-      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
-      customClass: `${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
-      htmlFor: uniqueId,
-      dataId: isDisabled ? `${dataId}_label_disabled` : isMandatory ? `${dataId}_label_mandatory` : `${dataId}_label`
-    }, LabelProps)), 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`,
-      className: style.ePhiTag
-    }, ePhiText) : null), /*#__PURE__*/React.createElement("div", {
-      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
-    }, /*#__PURE__*/React.createElement(TextBoxIcon, _extends({
-      htmlId: uniqueId,
-      id: id,
-      type: textBoxType,
-      variant: textBoxVariant,
-      size: fieldSize === 'medium' ? textBoxSize : 'xsmall',
-      maxLength: maxLength,
-      isReadOnly: isReadOnly,
-      inputRef: this.handleGetRef,
-      value: value,
-      onChange: this.handleChange,
-      dataId: dataId,
-      onBlur: onBlur,
-      onKeyDown: onKeyDown,
-      placeHolder: placeHolder,
-      borderColor: borderColor,
-      onFocus: onFocus,
-      isDisabled: isDisabled,
-      needEffect: isReadOnly || isDisabled ? false : true,
-      isClickable: isClickable,
-      needReadOnlyStyle: needReadOnlyStyle
-    }, TextBoxIconProps), 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,
-      htmlFor: uniqueId,
-      dataId: `${dataId}_ValidationRuleMessage`
-    }, ValidationMessageProps2))));
-  }
-
-}
-TextBoxField.propTypes = {
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  dataId: PropTypes.string,
-  errorType: PropTypes.oneOf(['primary', 'secondary']),
-  fieldSize: PropTypes.oneOf(['small', 'medium']),
-  getRef: PropTypes.func,
-  id: PropTypes.string,
-  infoText: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  // isFocusOnLabelClick: PropTypes.bool,
-  isMandatory: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  labelCustomClass: PropTypes.string,
-  labelName: PropTypes.string.isRequired,
-  labelPalette: PropTypes.string,
-  maxLength: PropTypes.number,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  placeHolder: PropTypes.string,
-  textBoxSize: PropTypes.string,
-  textBoxType: PropTypes.string,
-  textBoxVariant: PropTypes.string,
-  title: PropTypes.string,
-  validationMessage: PropTypes.string,
-  validationPalette: PropTypes.string,
-  validationRuleMessage: PropTypes.string,
-  validationRulePalette: PropTypes.string,
-  value: PropTypes.string,
-  lockedInfoText: PropTypes.string,
-  isLocked: PropTypes.bool,
-  isClickable: PropTypes.bool,
-  needReadOnlyStyle: PropTypes.bool,
-  ePhiData: PropTypes.shape({
-    ePhiTitle: PropTypes.string,
-    ePhiText: PropTypes.string,
-    ePhiStatus: PropTypes.bool
-  }),
-  children: PropTypes.node,
-  customProps: PropTypes.shape({
-    LabelProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    ValidationMessageProps1: PropTypes.object,
-    ValidationMessageProps2: PropTypes.object
-  })
-};
-TextBoxField.defaultProps = {
-  errorType: 'primary',
-  isMandatory: false,
-  textBoxSize: 'xmedium',
-  textBoxType: 'text',
-  textBoxVariant: 'primary',
-  borderColor: 'default',
-  isDisabled: false,
-  isReadOnly: false,
-  fieldSize: 'medium',
-  // isFocusOnLabelClick: true,
-  labelPalette: 'default',
-  labelCustomClass: '',
-  isClickable: false,
-  needReadOnlyStyle: true,
-  ePhiData: {},
-  customProps: {}
-};
-
-if (false) {
-  TextBoxField.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}

package/es/form/fields/TextBoxField/docs/TextBoxField__default.docs.js

@@ -1,45 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import TextBoxField from '../TextBoxField';
-import { Container } from '@zohodesk/components/lib/Layout';
-import Icon from '@zohodesk/icons/lib/Icon';
-export default class TextBoxField__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextBoxField, {
-      labelName: "Contact Name",
-      textBoxSize: "xmedium",
-      textBoxVariant: "primary",
-      validationMessage: "Invalid Input"
-    }), /*#__PURE__*/React.createElement("div", {
-      style: {
-        margin: '30px 0 10px',
-        fontFamily: 'var(--zd_semibold)'
-      }
-    }, "Children Option"), /*#__PURE__*/React.createElement(TextBoxField, {
-      labelName: "Contact Name",
-      textBoxSize: "xmedium",
-      textBoxVariant: "primary",
-      validationMessage: "Invalid Input"
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "both",
-      style: {
-        marginRight: '15px'
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-SE-setpracket",
-      size: "18"
-    }))));
-  }
-
-}
-
-if (false) {
-  TextBoxField__default.docs = {
-    componentGroup: 'Form Fields',
-    folderName: 'General'
-  };
-}