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

package/src/form/fields/TextEditorField/TextEditorField.js

@@ -0,0 +1,286 @@
+/**** 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 (
+      <div className={`${style.container} ${className}`}>
+        <Container isCover={false} alignBox='row' align='vertical'>
+          {labelName && (
+            <Box>
+              <Label
+                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}
+              />
+            </Box>
+          )}
+          {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}
+          {children ? children : null}
+        </Container>
+        <div
+          className={`${style.fieldContainer} ${
+            labelName ? style[`fieldMargin_${fieldSize}`] : ''
+          }`}
+        >
+          <TextEditorWrapper
+            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}
+          />
+        </div>
+        {validationMessage && (
+          <ValidationMessage
+            text={validationMessage}
+            palette={validationPalette}
+            type={errorType}
+            dataId={`${dataId}_ValidationMessage`}
+            {...ValidationMessageProps}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+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 (__DOCS__) {
+  TextEditorField.docs = {
+    componentGroup: 'Fields'
+  };
+}

package/src/form/fields/TextEditorField/docs/TextEditorField__default.docs.js

@@ -0,0 +1,62 @@
+/*** 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 (
+      <React.Fragment>
+        <TextEditorField
+          needEditor={false}
+          labelName='TextArea'
+        >
+        <Box flexible style={{fontSize: '12px',color: 'var(--dot_text_primary)',textAlign: 'right'}}>Placeholders</Box>
+      </TextEditorField>
+
+        <TextEditorField
+          id='editor'
+          labelName='TextEditor'
+          EDITORURL='https://js.zohostatic.com/zde/v2.2.9/js/ZohoDeskEditor.js'
+          initCallback={this.handleEditorStyleOptions}
+          loadingComponent={<div>Loading...</div>}
+        />
+      </React.Fragment>
+    )
+  }
+}
+
+if (__DOCS__) {
+  TextEditorField__default.docs = {
+    componentGroup: 'Fields'
+  };
+}

package/src/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -0,0 +1,239 @@
+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.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 (
+      <div className={style.container}>
+        {!isEditorShow ? (
+          <Textarea
+            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}
+        <VelocityAnimationGroup
+          name='slideDown'
+          runOnMount
+          enterDuration={'300'}
+          exitDuration={'400'}
+          isActive={isEditorShow}
+          component='div'
+        >
+          <div className={style.textEditor}>
+            {isEditorShow && needEditor ? (
+              <TextEditor
+                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}
+              />
+            ) : (
+              <Textarea
+                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}
+              />
+            )}
+          </div>
+        </VelocityAnimationGroup>
+      </div>
+    );
+  }
+}
+
+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/src/form/fields/TextEditorWrapper/TextEditorWrapper.module.css

@@ -0,0 +1,26 @@
+.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;
+  }
+}