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

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

@@ -1,254 +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 { 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} ${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: `${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/TextEditorField/docs/TextEditorField__default.docs.js

@@ -1,43 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-/*** Components ***/
-
-import TextEditorField from '../TextEditorField';
-import { Box } from '@zohodesk/components/lib/Layout';
-export default class TextEditorField__default extends Component {
-  constructor(props) {
-    super(props);
-    this.handleEditorStyleOptions = this.handleEditorStyleOptions.bind(this);
-  }
-
-  handleEditorStyleOptions(ZohoDeskEditor_Init, hookToOrganize) {
-    ZohoDeskEditor_Init.toolbarOrder = [['bold', 'Bold (Ctrl+B)', '#KBEditortools_txtbold', 'KBEditortools-txtbold'], ['italic', 'Italic (Ctrl+I)', '#KBEditortools_txtitalic', 'KBEditortools-txtitalic'], ['underline', 'Underline (Ctrl+U)', '#KBEditortools_txtunderline', 'KBEditortools-txtunderline']];
-  }
-
-  render() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextEditorField, {
-      needEditor: false,
-      labelName: "TextArea"
-    }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      style: {
-        fontSize: '12px',
-        color: 'var(--dot_primary)',
-        textAlign: 'right'
-      }
-    }, "Placeholders")), /*#__PURE__*/React.createElement(TextEditorField, {
-      id: "editor",
-      labelName: "TextEditor",
-      EDITORURL: "https://js.zohostatic.com/zde/v2.2.9/js/ZohoDeskEditor.js",
-      initCallback: this.handleEditorStyleOptions,
-      loadingComponent: /*#__PURE__*/React.createElement("div", null, "Loading...")
-    }));
-  }
-
-}
-
-if (false) {
-  TextEditorField__default.docs = {
-    componentGroup: 'Fields'
-  };
-}

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

@@ -1,244 +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); }
-
-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

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