@zohodesk/dot 1.0.0-beta.25 → 1.0.0-beta.251

package/es/form/fields/TextEditor/props/propTypes.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  ImgLazyLoad: PropTypes.node,
+  blurCallback: PropTypes.func,
+  border: PropTypes.oneOf(['borderTop', 'borderAll', 'borderNone']),
+  changeEditorContent: PropTypes.bool,
+  dataId: PropTypes.string,
+  editorCallback: PropTypes.func,
+  editorMode: PropTypes.string,
+  editorOptions: PropTypes.object,
+  fontFamily: PropTypes.oneOf(['Lato', 'Roboto', 'Puvi']),
+  fontSize: PropTypes.string,
+  getRef: PropTypes.func,
+  handleAlertMessage: PropTypes.func,
+  handleDropUpload: PropTypes.func,
+  i18nKeys: PropTypes.shape({
+    fileUploadError: PropTypes.string,
+    fileNotSupported: PropTypes.string,
+    fileEmptyError: PropTypes.string,
+    fileNameLimitExceed: PropTypes.string,
+    fileSizeLimitExceed: PropTypes.string
+  }),
+  id: PropTypes.string,
+  initCallback: PropTypes.func.isRequired,
+  isCustomScroll: PropTypes.bool,
+  loadingComponent: PropTypes.node,
+  mode: PropTypes.string,
+  needEditorFocus: PropTypes.bool,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onUpload: PropTypes.func,
+  plainTextSwitchCallback: PropTypes.func,
+  setInlineAttachmentInProgress: PropTypes.func,
+  shouldUpdateContent: PropTypes.bool,
+  type: PropTypes.oneOf(['large', 'xlarge', 'medium', 'small', 'mini', 'default']),
+  value: PropTypes.string,
+  needInlineAttachment: PropTypes.bool,
+  isNightMode: PropTypes.bool,
+  isReadOnly: PropTypes.bool
+};

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

@@ -0,0 +1,172 @@
+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, { PureComponent } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+
+/**** Components ****/
+import Label from '@zohodesk/components/lib/Label/Label';
+import ValidationMessage from '../ValidationMessage/ValidationMessage';
+import TextEditorWrapper from '../TextEditorWrapper/TextEditorWrapper';
+import FieldContainer from '../FieldContainer/FieldContainer';
+
+/** 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);
+    this.renderEnd = this.renderEnd.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();
+    }
+  }
+  renderEnd() {
+    let {
+      children
+    } = this.props;
+    return children ? children : null;
+  }
+  render() {
+    let {
+      labelName,
+      id,
+      isMandatory,
+      value,
+      validationMessage,
+      validationPalette,
+      isReadOnly,
+      onAttachmentUpload,
+      needEditor,
+      dataId,
+      dataSelectorId,
+      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;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${style.container} ${isDisabled ? style.disabled : isReadOnly ? style.readonly : ''} ${className || ''}`,
+      "data-selector-id": dataSelectorId
+    }, labelName && /*#__PURE__*/React.createElement(FieldContainer, {
+      infoText: infoText,
+      isLocked: isLocked,
+      lockedInfoText: lockedInfoText,
+      ePhiData: ePhiData,
+      dataId: dataId,
+      renderProps: {
+        end: this.renderEnd
+      }
+    }, /*#__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))), /*#__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 = propTypes;
+TextEditorField.defaultProps = defaultProps;
+
+// if (__DOCS__) {
+//   TextEditorField.docs = {
+//     componentGroup: 'Fields'
+//   };
+// }

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

@@ -0,0 +1,15 @@
+import { FieldCommonDefaultProps } from '../../props/FieldCommonDefaultProps';
+export const defaultProps = {
+  errorType: 'primary',
+  needEditor: true,
+  isFocusOnLabelClick: true,
+  fieldSize: 'medium',
+  textBoxSize: 'xsmall',
+  textBoxVariant: 'primary',
+  labelPalette: 'default',
+  labelCustomClass: '',
+  className: '',
+  customProps: {},
+  dataSelectorId: 'textEditorField',
+  ...FieldCommonDefaultProps()
+};

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

@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import { FieldCommonPropTypes } from '../../props/FieldCommonPropTypes';
+export const propTypes = {
+  dataId: PropTypes.string,
+  fieldSize: PropTypes.oneOf(['small', 'medium']),
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  isFocusOnLabelClick: 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,
+  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,
+  needInlineAttachment: PropTypes.bool,
+  customProps: PropTypes.shape({
+    LabelProps: PropTypes.object,
+    TextEditorWrapperProps: PropTypes.object,
+    ValidationMessageProps: PropTypes.object
+  }),
+  ...FieldCommonPropTypes()
+};

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

@@ -0,0 +1,195 @@
+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); }
+import React, { Component } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+
+/**** 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,
+      dataSelectorId
+    } = 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,
+      "data-selector-id": dataSelectorId
+    }, !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 = propTypes;
+TextEditorWrapper.defaultProps = defaultProps;

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;
+  }
+}

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

@@ -0,0 +1,9 @@
+export const defaultProps = {
+  textBoxSize: 'small',
+  textBoxVariant: 'primary',
+  editorSize: 'large',
+  editorBorder: 'borderAll',
+  isEditorDefaultOpen: false,
+  customProps: {},
+  dataSelectorId: 'textEditorWrapper'
+};

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

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+export const 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
+  })
+};