@zohodesk/dot 1.0.0-beta.212 → 1.0.0-beta.213

package/es/form/fields/TextEditorField/TextEditorField.js

@@ -0,0 +1,254 @@
+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 { Container, Box } from '@zohodesk/components/lib/Layout';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import TextEditorWrapper from '../TextEditorWrapper/TextEditorWrapper';
+/**** Icons ****/
+
+import Icon from '@zohodesk/icons/lib/Icon';
+/** Css */
+
+import style from '../Fields.module.css';
+export default class TextEditorField extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleGetRef = this.handleGetRef.bind(this);
+    this.handleLabelClick = this.handleLabelClick.bind(this);
+  }
+
+  handleChange(value) {
+    let {
+      id,
+      onChange
+    } = this.props;
+    onChange && onChange(id, value);
+  }
+
+  handleGetRef(el) {
+    let {
+      getRef,
+      id
+    } = this.props;
+    this.textEditor = el;
+    getRef && getRef(el, id);
+  }
+
+  handleLabelClick() {
+    let {
+      isFocusOnLabelClick,
+      isDisabled,
+      isReadOnly
+    } = this.props;
+
+    if (isFocusOnLabelClick && !isDisabled && !isReadOnly && this.textEditor && this.textEditor.focus) {
+      this.textEditor.focus();
+    }
+  }
+
+  render() {
+    let {
+      labelName,
+      id,
+      isMandatory,
+      value,
+      validationMessage,
+      validationPalette,
+      isReadOnly,
+      onAttachmentUpload,
+      needEditor,
+      dataId,
+      isDisabled,
+      fieldSize,
+      textBoxSize,
+      textBoxVariant,
+      labelPalette,
+      labelCustomClass,
+      infoText,
+      isLocked,
+      lockedInfoText,
+      errorType,
+      EDITORURL,
+      editorMode,
+      isCustomScroll,
+      initCallback,
+      loadingComponent,
+      handleAlertMessage,
+      editorCallback,
+      editorBlurCallback,
+      editorOptions,
+      onFocus,
+      isEditorDefaultOpen,
+      changeEditorContent,
+      shouldEditorUpdateContent,
+      setInlineAttachmentInProgress,
+      handleEditorDropUpload,
+      ImgLazyLoad,
+      needInlineAttachment,
+      i18nKeys,
+      className,
+      children,
+      ePhiData,
+      customProps
+    } = this.props;
+    const {
+      LabelProps = {},
+      TextEditorWrapperProps = {},
+      ValidationMessageProps = {}
+    } = customProps;
+    let {
+      ePhiTitle = '',
+      ePhiText = '',
+      ePhiStatus = false
+    } = ePhiData;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`
+    }, /*#__PURE__*/React.createElement(Container, {
+      isCover: false,
+      alignBox: "row",
+      align: "vertical"
+    }, labelName && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Label, _extends({
+      text: labelName,
+      size: fieldSize === 'small' ? 'small' : 'medium',
+      htmlFor: !isReadOnly && !isDisabled ? id : undefined,
+      palette: isMandatory ? 'mandatory' : isDisabled ? 'primary' : labelPalette,
+      onClick: this.handleLabelClick,
+      customClass: `${style.fieldLabel} ${labelCustomClass} ${isMandatory ? style.labelMandatory : ''}`,
+      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, children ? children : null), /*#__PURE__*/React.createElement("div", {
+      className: `${style.fieldContainer} ${labelName ? style[`fieldMargin_${fieldSize}`] : ''}`
+    }, /*#__PURE__*/React.createElement(TextEditorWrapper, _extends({
+      needEditor: needEditor,
+      onChange: this.handleChange,
+      id: id,
+      value: value,
+      isReadOnly: isReadOnly,
+      getRef: this.handleGetRef,
+      onAttachmentUpload: onAttachmentUpload,
+      dataId: dataId,
+      isDisabled: isDisabled,
+      textBoxSize: fieldSize === 'medium' ? textBoxSize : 'xsmall',
+      textBoxVariant: textBoxVariant,
+      EDITORURL: EDITORURL,
+      editorMode: editorMode,
+      isCustomScroll: isCustomScroll,
+      initCallback: initCallback,
+      loadingComponent: loadingComponent,
+      handleAlertMessage: handleAlertMessage,
+      editorCallback: editorCallback,
+      i18nKeys: i18nKeys,
+      ImgLazyLoad: ImgLazyLoad,
+      editorOptions: editorOptions,
+      editorBlurCallback: editorBlurCallback,
+      onFocus: onFocus,
+      isEditorDefaultOpen: isEditorDefaultOpen,
+      changeEditorContent: changeEditorContent,
+      shouldEditorUpdateContent: shouldEditorUpdateContent,
+      setInlineAttachmentInProgress: setInlineAttachmentInProgress,
+      handleEditorDropUpload: handleEditorDropUpload,
+      needInlineAttachment: needInlineAttachment
+    }, TextEditorWrapperProps))), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
+      text: validationMessage,
+      palette: validationPalette,
+      type: errorType,
+      dataId: `${dataId}_ValidationMessage`
+    }, ValidationMessageProps)));
+  }
+
+}
+TextEditorField.propTypes = {
+  dataId: PropTypes.string,
+  fieldSize: PropTypes.oneOf(['small', 'medium']),
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isFocusOnLabelClick: PropTypes.bool,
+  isMandatory: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  labelCustomClass: PropTypes.string,
+  labelName: PropTypes.string,
+  labelPalette: PropTypes.string,
+  needEditor: PropTypes.bool,
+  onAttachmentUpload: PropTypes.func,
+  onChange: PropTypes.func,
+  textBoxSize: PropTypes.string,
+  textBoxVariant: PropTypes.string,
+  validationMessage: PropTypes.string,
+  validationPalette: PropTypes.string,
+  value: PropTypes.string,
+  infoText: PropTypes.string,
+  isLocked: PropTypes.bool,
+  lockedInfoText: PropTypes.string,
+  errorType: PropTypes.string,
+  EDITORURL: PropTypes.string,
+  editorMode: PropTypes.string,
+  isCustomScroll: PropTypes.bool,
+  initCallback: PropTypes.func,
+  className: PropTypes.string,
+  loadingComponent: PropTypes.node,
+  handleAlertMessage: PropTypes.func,
+  editorCallback: PropTypes.func,
+  i18nKeys: PropTypes.object,
+  ImgLazyLoad: PropTypes.node,
+  editorOptions: PropTypes.object,
+  editorBlurCallback: PropTypes.func,
+  onFocus: PropTypes.func,
+  isEditorDefaultOpen: PropTypes.bool,
+  changeEditorContent: PropTypes.bool,
+  shouldEditorUpdateContent: PropTypes.bool,
+  setInlineAttachmentInProgress: PropTypes.func,
+  handleEditorDropUpload: PropTypes.func,
+  children: PropTypes.node,
+  ePhiData: PropTypes.shape({
+    ePhiTitle: PropTypes.string,
+    ePhiText: PropTypes.string,
+    ePhiStatus: PropTypes.bool
+  }),
+  needInlineAttachment: PropTypes.bool,
+  customProps: PropTypes.shape({
+    LabelProps: PropTypes.object,
+    TextEditorWrapperProps: PropTypes.object,
+    ValidationMessageProps: PropTypes.object
+  })
+};
+TextEditorField.defaultProps = {
+  errorType: 'primary',
+  needEditor: true,
+  isDisabled: false,
+  isReadOnly: false,
+  isFocusOnLabelClick: true,
+  fieldSize: 'medium',
+  textBoxSize: 'xsmall',
+  textBoxVariant: 'primary',
+  labelPalette: 'default',
+  labelCustomClass: '',
+  className: '',
+  ePhiData: {},
+  customProps: {}
+};
+
+if (false) {
+  TextEditorField.docs = {
+    componentGroup: 'Fields'
+  };
+}

package/es/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -0,0 +1,244 @@
+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, { Component } from 'react';
+import PropTypes from 'prop-types';
+/**** Components ****/
+
+import TextEditor from '../TextEditor/TextEditor';
+import Textarea from '@zohodesk/components/lib/Textarea/Textarea';
+import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { editorContentValidate } from '../../../utils/editorUtils';
+import style from './TextEditorWrapper.module.css';
+/* eslint-disable react/no-deprecated */
+
+export default class TextEditorWrapper extends Component {
+  constructor(props) {
+    super(props);
+    let {
+      value,
+      isEditorDefaultOpen
+    } = props;
+    this.state = {
+      isEditorShow: isEditorDefaultOpen ? true : !!value
+    };
+    this.handleTextareaFocus = this.handleTextareaFocus.bind(this);
+    this.toggleEdit = this.toggleEdit.bind(this);
+    this.focusCallback = this.focusCallback.bind(this);
+  }
+
+  handleTextareaFocus() {
+    let {
+      isReadOnly,
+      isDisabled
+    } = this.props;
+
+    if (!isReadOnly && !isDisabled) {
+      this.setState({
+        isEditorShow: true
+      }, () => {
+        setTimeout(() => {
+          editor[this.props.id].squireInstance.focus();
+        }, 300);
+      });
+    }
+  }
+
+  toggleEdit(value) {
+    this.setState({
+      isEditorShow: value
+    });
+  }
+
+  focusCallback() {
+    let {
+      onFocus
+    } = this.props;
+    this.setState({
+      isEditorFocus: true
+    });
+    onFocus && onFocus();
+  }
+
+  componentWillReceiveProps(np) {
+    let {
+      id,
+      value
+    } = this.props;
+
+    if (np.value || typeof editor != 'undefined' && editorContentValidate(editor[id])) {
+      this.setState({
+        isEditorShow: true
+      });
+    } else {
+      if (!this.state.isEditorFocus && !this.props.isEditorDefaultOpen) {
+        this.setState({
+          isEditorShow: false
+        });
+      }
+    } // if (np.value !== value && np.value == '') {
+    //   editor[id].setContent('');
+    // }
+
+  }
+
+  render() {
+    let {
+      isEditorShow
+    } = this.state;
+    let {
+      id,
+      onChange,
+      value,
+      onAttachmentUpload,
+      needEditor,
+      dataId,
+      isReadOnly,
+      isDisabled,
+      getRef,
+      textBoxSize,
+      textBoxVariant,
+      editorMode,
+      editorSize,
+      editorBorder,
+      EDITORURL,
+      isCustomScroll,
+      initCallback,
+      loadingComponent,
+      handleAlertMessage,
+      editorCallback,
+      editorBlurCallback,
+      editorOptions,
+      changeEditorContent,
+      shouldEditorUpdateContent,
+      setInlineAttachmentInProgress,
+      handleEditorDropUpload,
+      ImgLazyLoad,
+      i18nKeys,
+      isEditorDefaultOpen,
+      needInlineAttachment,
+      customProps
+    } = this.props;
+    const {
+      Textarea1Props = {},
+      Textarea2Props = {},
+      TextEditorProps = {}
+    } = customProps;
+    let defaultObj = {
+      needEditorFocus: !value
+    };
+    let editorOptionsObject = Object.assign(defaultObj, editorOptions);
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.container
+    }, !isEditorShow ? /*#__PURE__*/React.createElement(Textarea, _extends({
+      onFocus: this.handleTextareaFocus,
+      text: value,
+      animated: !needEditor,
+      onChange: onChange,
+      dataId: dataId,
+      isReadOnly: isReadOnly,
+      isDisabled: isDisabled,
+      needEffect: !(isReadOnly || isDisabled),
+      getRef: getRef,
+      size: textBoxSize,
+      variant: textBoxVariant,
+      customClass: style.textBox
+    }, Textarea1Props)) : null, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: "slideDown",
+      runOnMount: true,
+      enterDuration: '300',
+      exitDuration: '400',
+      isActive: isEditorShow,
+      component: "div"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.textEditor
+    }, isEditorShow && needEditor ? /*#__PURE__*/React.createElement(TextEditor, _extends({
+      id: id,
+      value: value,
+      onChange: !isReadOnly && !isDisabled ? onChange : null,
+      editorOptions: editorOptionsObject,
+      onUpload: onAttachmentUpload,
+      editorMode: editorMode,
+      type: editorSize,
+      border: editorBorder,
+      dataId: dataId,
+      getRef: getRef,
+      plainTextSwitchCallback: !isReadOnly && !isDisabled ? onChange : null,
+      EDITORURL: EDITORURL,
+      isCustomScroll: isCustomScroll,
+      initCallback: initCallback,
+      loadingComponent: loadingComponent,
+      handleAlertMessage: handleAlertMessage,
+      toggleEdit: this.toggleEdit,
+      isEditorDefaultOpen: isEditorDefaultOpen,
+      editorCallback: editorCallback,
+      i18nKeys: i18nKeys,
+      ImgLazyLoad: ImgLazyLoad,
+      blurCallback: editorBlurCallback,
+      changeEditorContent: changeEditorContent,
+      shouldUpdateContent: shouldEditorUpdateContent,
+      setInlineAttachmentInProgress: setInlineAttachmentInProgress,
+      handleDropUpload: handleEditorDropUpload,
+      onFocus: this.focusCallback,
+      needInlineAttachment: needInlineAttachment
+    }, TextEditorProps)) : /*#__PURE__*/React.createElement(Textarea, _extends({
+      onFocus: this.handleTextareaFocus,
+      text: value,
+      animated: !needEditor,
+      onChange: onChange,
+      dataId: dataId,
+      isReadOnly: isReadOnly,
+      isDisabled: isDisabled,
+      needEffect: !(isReadOnly || isDisabled),
+      getRef: getRef,
+      size: textBoxSize,
+      variant: textBoxVariant
+    }, Textarea2Props)))));
+  }
+
+}
+TextEditorWrapper.propTypes = {
+  dataId: PropTypes.string,
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  needEditor: PropTypes.bool,
+  onAttachmentUpload: PropTypes.func,
+  onChange: PropTypes.func,
+  textBoxSize: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
+  textBoxVariant: PropTypes.string,
+  value: PropTypes.string,
+  editorMode: PropTypes.string,
+  editorSize: PropTypes.string,
+  editorBorder: PropTypes.string,
+  EDITORURL: PropTypes.string,
+  isCustomScroll: PropTypes.bool,
+  initCallback: PropTypes.func,
+  loadingComponent: PropTypes.node,
+  handleAlertMessage: PropTypes.func,
+  editorCallback: PropTypes.func,
+  i18nKeys: PropTypes.object,
+  ImgLazyLoad: PropTypes.node,
+  editorBlurCallback: PropTypes.func,
+  editorOptions: PropTypes.object,
+  isEditorDefaultOpen: PropTypes.bool,
+  changeEditorContent: PropTypes.bool,
+  shouldEditorUpdateContent: PropTypes.bool,
+  setInlineAttachmentInProgress: PropTypes.func,
+  handleEditorDropUpload: PropTypes.func,
+  onFocus: PropTypes.func,
+  needInlineAttachment: PropTypes.bool,
+  customProps: PropTypes.shape({
+    Textarea1Props: PropTypes.object,
+    TextEditorProps: PropTypes.object,
+    Textarea2Props: PropTypes.object
+  })
+};
+TextEditorWrapper.defaultProps = {
+  textBoxSize: 'small',
+  textBoxVariant: 'primary',
+  editorSize: 'large',
+  editorBorder: 'borderAll',
+  isEditorDefaultOpen: false,
+  customProps: {}
+};

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

@@ -0,0 +1,37 @@
+.container{
+  position: relative;
+  min-height: var(--zd_size28);
+}
+.textBox {
+  height: var(--zd_size28);
+  width: 100%;
+  position: absolute;
+  transition: border var(--zd_transition2) linear 0s;
+  cursor: text;
+}
+[dir=ltr] .textBox {
+  left: 0;
+  animation: fadeIn var(--zd_transition4);
+}
+[dir=rtl] .textBox {
+  right: 0;
+  animation: fadeIn var(--zd_transition4);
+}
+.textEditor {
+  position: relative;
+  z-index: 1;
+}
+[dir=ltr] .textEditor {
+  padding-right: 1px;
+}
+[dir=rtl] .textEditor {
+  padding-left: 1px;
+}
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}