@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp-65

package/src/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -0,0 +1,342 @@
+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 (
+    <div className={style.container}>
+      <Container alignBox='row' align='baseline' isCover={false}>
+        {labelName && (
+          <Label
+            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 ? (
+          <Box
+            dataId={`${dataId}_tagCount`}
+            className={style.count}
+          >{`(${selectedValueCount})`}</Box>
+        ) : null}
+        {ePhiStatus ? (
+          <span
+            data-title={ePhiTitle}
+            data-id={`${dataId}_ePHI`}
+            className={fieldStyle.ePhiTag}
+          >
+            {ePhiText}
+          </span>
+        ) : null}
+        {children ? children : null}
+      </Container>
+      <TagsMultiSelect
+        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 && (
+        <ValidationMessage
+          text={validationMessage}
+          palette={validationPalette}
+          type={errorType}
+          dataId={`${dataId}_ValidationMessage`}
+          htmlFor={htmlId}
+          {...ValidationMessageProps}
+        />
+      )}
+    </div>
+  );
+};
+
+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 (__DOCS__) {
+  TagsMultiSelectField.docs = {
+    componentGroup: 'TagsMultiSelectField'
+  };
+}

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

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

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

@@ -0,0 +1,58 @@
+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 <div style={{margin: '20px 20px 0'}}>
+    <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
+      getTextBoxChildren={() => <Icon name='ZD-SE-setpracket' size='18' />}
+    >
+      <span style={{ fontSize: '13px', marginLeft: '5px', color: 'var(--dot_text_shuttleGrey)' }}>shift+t</span>
+    </TagsMultiSelectField>
+  </div>
+}
+
+export default TagsMultiSelectField__default;
+
+if (__DOCS__) {
+  TagsMultiSelectField__default.docs = {
+    componentGroup: 'TagsMultiSelectField'
+  };
+}

package/src/form/fields/TextBoxField/TextBoxField.js

@@ -0,0 +1,274 @@
+/**** 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 (
+      <div
+        className={`${style.container} ${isDisabled ? style.disabled : ''}`}
+        data-title={isDisabled ? title : ''}
+      >
+        {labelName && (
+          <div className={style.labelContainer}>
+            <Label
+              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 ? (
+              <Icon
+                name='ZD-GN-info'
+                iconClass={style.infoIcon}
+                title={infoText}
+                size='15'
+              />
+            ) : null}
+            {isLocked ? (
+              <Icon
+                name='ZD-GN-lock'
+                size='13'
+                iconClass={style.lockIcon}
+                title={lockedInfoText}
+              />
+            ) : null}
+            {ePhiStatus ? (
+              <span
+                data-title={ePhiTitle}
+                data-id={`${dataId}_ePHI`}
+                className={style.ePhiTag}
+              >
+                {ePhiText}
+              </span>
+            ) : null}
+          </div>
+        )}
+
+        <div
+          className={`${style.fieldContainer} ${
+            labelName ? style[`fieldMargin_${fieldSize}`] : ''
+          }`}
+        >
+          <TextBoxIcon
+            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}
+          </TextBoxIcon>
+          {validationMessage && (
+            <ValidationMessage
+              text={validationMessage}
+              palette={validationPalette}
+              type={errorType}
+              dataId={`${dataId}_ValidationMessage`}
+              htmlFor={uniqueId}
+              {...ValidationMessageProps1}
+            />
+          )}
+          {validationRuleMessage && (
+            <ValidationMessage
+              text={validationRuleMessage}
+              palette={validationRulePalette}
+              type={errorType}
+              htmlFor={uniqueId}
+              dataId={`${dataId}_ValidationRuleMessage`}
+              {...ValidationMessageProps2}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+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 (__DOCS__) {
+  TextBoxField.docs = {
+    componentGroup: 'Form Fields',
+    folderName: 'General'
+  };
+}