@zohodesk/dot 1.0.0-temp.999 → 1.0.0-test.239

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

@@ -0,0 +1,16 @@
+import { FieldCommonDefaultProps } from '../../props/FieldCommonDefaultProps';
+export const defaultProps = {
+  errorType: 'primary',
+  textBoxSize: 'xmedium',
+  textBoxType: 'text',
+  textBoxVariant: 'primary',
+  borderColor: 'default',
+  fieldSize: 'medium',
+  // isFocusOnLabelClick: true,
+  labelPalette: 'default',
+  labelCustomClass: '',
+  isClickable: false,
+  needReadOnlyStyle: true,
+  customProps: {},
+  ...FieldCommonDefaultProps()
+};

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

@@ -0,0 +1,37 @@
+import { FieldCommonPropTypes } from '../../props/FieldCommonPropTypes';
+import PropTypes from 'prop-types';
+export const propTypes = {
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  errorType: PropTypes.oneOf(['primary', 'secondary']),
+  fieldSize: PropTypes.oneOf(['small', 'medium']),
+  getRef: PropTypes.func,
+  id: PropTypes.string,
+  // isFocusOnLabelClick: 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,
+  isClickable: PropTypes.bool,
+  needReadOnlyStyle: PropTypes.bool,
+  children: PropTypes.node,
+  customProps: PropTypes.shape({
+    LabelProps: PropTypes.object,
+    TextBoxIconProps: PropTypes.object,
+    ValidationMessageProps1: PropTypes.object,
+    ValidationMessageProps2: PropTypes.object
+  }),
+  ...FieldCommonPropTypes()
+};

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

@@ -1,19 +1,16 @@
 /***** Libraries *****/
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import selectn from 'selectn';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 /***** Methods *****/
-
-import { bind, editorContentValidate, fixEncoding, isFileNameSizeInvalid, isImageFormat, triggerKeyup, getRichEditorContent, changeContent, validateEditorContentOnInsertHtml, loadResource } from '../../../utils/editorUtils'; //import './ZohoDeskEditor_Init';
-
+import { bind, editorContentValidate, fixEncoding, isFileNameSizeInvalid, isImageFormat, triggerKeyup, getRichEditorContent, changeContent, validateEditorContentOnInsertHtml, loadResource } from '../../../utils/editorUtils';
+//import './ZohoDeskEditor_Init';
 /***** components *****/
-
 import styles from './TextEditor.module.css';
 /* eslint-disable camelcase */
-
 /* eslint-disable no-undef */
-
 /* eslint-disable react/no-deprecated */
 
 export default class TextEditor extends Component {
@@ -27,10 +24,8 @@ export default class TextEditor extends Component {
     let methods = ['editorCallback', 'handleUpload', 'handleChange', 'focusCallback', 'handleInlineUpload', 'handleDropUpload', 'blurCallback', 'handleGetContent', 'initializeEditor', 'clearEditorData', 'plainTextSwitchCallback', 'onWindowClick', 'toggleEditor'];
     bind.apply(this, methods);
   }
-
   componentDidMount() {
     this.mount = true;
-
     if (typeof global.ZohoDeskEditor === 'undefined') {
       loadResource(this.props.EDITORURL, 'js', 'ZohoDeskEditor').then(() => {
         this.setState({
@@ -42,10 +37,8 @@ export default class TextEditor extends Component {
         isResourceLoaded: true
       });
     }
-
     window.addEventListener('click', this.onWindowClick);
   }
-
   initializeEditor(id, mode) {
     let {
       value,
@@ -59,7 +52,6 @@ export default class TextEditor extends Component {
       handleAlertMessage,
       needInlineAttachment
     } = this.props;
-
     if (id && global.ZohoDeskEditor) {
       let defaultObj = {
         id,
@@ -85,19 +77,18 @@ export default class TextEditor extends Component {
         hookOnInsertHTML: validateEditorContentOnInsertHtml,
         needCustomPaste: function (event, editorObj) {
           return true; // By default reply editor needs customPaste, so returning true.
-        }
-      };
+        },
 
+        htmlVersion: "<!Doctype html>"
+      };
       if (!ZohoDeskEditor_Init.init) {
         global.editorInitialize && global.editorInitialize();
       }
-
       defaultObj = Object.assign(defaultObj, editorOptions);
       ZohoDeskEditor_Init.init(editorMode, fontFamily, initCallback, fontSize);
       ZohoDeskEditor.create && ZohoDeskEditor.create(defaultObj);
     }
   }
-
   plainTextSwitchCallback() {
     let {
       plainTextSwitchCallback,
@@ -106,35 +97,28 @@ export default class TextEditor extends Component {
     let content = this.handleGetContent();
     plainTextSwitchCallback && plainTextSwitchCallback(content, id);
   }
-
   clearEditorData(id) {
     let {
       getRef
     } = this.props;
-
     if (global.editor && global.editor[id]) {
       delete global.editor[id];
     }
-
     getRef && getRef(null);
   }
-
   componentWillReceiveProps(np) {
     let {
       changeEditorContent
     } = this.props;
     let id = np.id;
     let editorObj = global.editor ? global.editor[id] ? global.editor[id] : {} : {};
-
     if (np.isEmptyContent && editorObj) {
       editorObj.setContent('');
     }
-
     if (typeof changeEditorContent !== 'undefined' && np.changeEditorContent != changeEditorContent && np.changeEditorContent) {
       changeContent(id, np.value);
     }
   }
-
   componentDidUpdate(prevProps, prevState) {
     let {
       id,
@@ -145,55 +129,48 @@ export default class TextEditor extends Component {
     let {
       isResourceLoaded
     } = this.state;
-
     if (prevProps.id !== id) {
       global.editor[id] = global.editor[prevProps.id];
       delete global.editor[prevProps.id];
       shouldUpdateContent && changeContent(id, value);
     }
-
     if (prevState.isResourceLoaded !== isResourceLoaded && isResourceLoaded) {
       this.initializeEditor(id, mode);
     }
   }
-
   componentWillUnmount() {
     this.mount = false;
     this.clearEditorData(this.props.id);
     window.removeEventListener('click', this.onWindowClick);
   }
-
   focusCallback() {
     let {
       onFocus
     } = this.props;
     onFocus && onFocus();
   }
-
   handleGetContent() {
     let {
       id
     } = this.props;
     let editorObj = editor[id] ? editor[id] : {};
     let content = getRichEditorContent(id);
-
     if (!editorContentValidate(editorObj)) {
       content = '';
     }
-
     content = content.trim();
     return content;
   }
-
   handleChange() {
     let {
       onChange,
       id
     } = this.props;
-    let content = this.handleGetContent();
-    onChange && onChange(content, id);
+    if (onChange) {
+      let content = this.handleGetContent();
+      onChange(content, id);
+    }
   }
-
   editorCallback(editorObj) {
     let {
       editorCallback,
@@ -208,51 +185,42 @@ export default class TextEditor extends Component {
       id
     } = this.props;
     global.editor = global.editor || {};
-
     if (!editor[id]) {
       editor[id] = editorObj;
     }
-
     const css = 'blockquote {margin:0 0 0 4px; }',
-          head = editorObj.doc.head || editorObj.doc.getElementsByTagName('head')[0],
-          style = document.createElement('style');
+      head = editorObj.doc.head || editorObj.doc.getElementsByTagName('head')[0],
+      style = document.createElement('style');
     style.type = 'text/css';
-
     if (style.styleSheet) {
       style.styleSheet.cssText = css;
     } else {
       style.appendChild(editorObj.doc.createTextNode(css));
     }
-
     head.appendChild(style);
     editorCallback && editorCallback(editorObj);
     const iframe = selectn('iframe.contentDocument.body', editorObj) || null;
     const iframeHead = selectn('iframe.contentDocument.head', editorObj) || null;
     getRef && getRef(iframe);
-
     if (iframe) {
       iframe.addEventListener('click', () => editorObj.iframe.click());
-
       if (isCustomScroll) {
         let link = document.createElement('style');
         link.innerText = "body{font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 0}.scroll{--zd-scroll-width:12px;--zd-scroll-height:12px;--zd-scroll-bg:rgba(255,255,255,0.1);--zd-scroll-corner-bg:transparent;--zd-scroll-thump:rgba(44,51,77,0.2);--zd-scroll-thump-hoverbg:rgba(44,51,77,0.3);--zd-scroll-border:rgba(44,51,77,0.1)}.scroll[data-scroll-palette='dark'],.scroll [data-scroll-palette='dark']{--zd-scroll-thump:rgba(255,255,255,0.2);--zd-scroll-thump-hoverbg:rgba(255,255,255,0.4);--zd-scroll-border:rgba(255,255,255,0.07)}.scroll,.scroll *{scrollbar-color:var(--zd-scroll-thump) var(--zd-scroll-bg);scrollbar-width:thin;-ms-scrollbar-highlight-color:var(--zd-scroll-bg);-ms-scrollbar-face-color:var(--zd-scroll-thump)}.scroll::-webkit-scrollbar,.scroll ::-webkit-scrollbar{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-scrollbar:hover,.scroll ::-webkit-scrollbar:hover{background:var(--zd-scroll-bg)}.scroll::-webkit-scrollbar:horizontal,.scroll ::-webkit-scrollbar:horizontal{height:var(--zd-scroll-height)}.scroll::-webkit-scrollbar:vertical,.scroll ::-webkit-scrollbar:vertical{width:var(--zd-scroll-width)}.scroll::-webkit-scrollbar-button,.scroll ::-webkit-scrollbar-button{display:none;width:0;height:0}.scroll::-webkit-scrollbar-track:vertical,.scroll ::-webkit-scrollbar-track:vertical{border-left:1px solid transparent;border-right:1px solid transparent}.scroll::-webkit-scrollbar-track:vertical:hover,.scroll ::-webkit-scrollbar-track:vertical:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track:horizontal,.scroll ::-webkit-scrollbar-track:horizontal{border-top:1px solid transparent;border-bottom:1px solid transparent}.scroll::-webkit-scrollbar-track:horizontal:hover,.scroll ::-webkit-scrollbar-track:horizontal:hover{border-color:var(--zd-scroll-border)}.scroll::-webkit-scrollbar-track-piece,.scroll ::-webkit-scrollbar-track-piece{background:inherit}.scroll::-webkit-scrollbar-thumb,.scroll ::-webkit-scrollbar-thumb{border-radius:10px;background:var(--zd-scroll-thump);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-thumb:hover,.scroll ::-webkit-scrollbar-thumb:hover{background:var(--zd-scroll-thump-hoverbg);background-clip:padding-box;border:3px solid transparent}.scroll::-webkit-scrollbar-corner,.scroll ::-webkit-scrollbar-corner{background:var(--zd-scroll-corner-bg)}.scroll::-webkit-resizer,.scroll::-webkit-resizer{background:inherit}";
         iframeHead.appendChild(link);
         iframe.classList.add('scroll');
       }
-
       let customFonts = document.createElement('style');
       customFonts.innerText = `@font-face {font-family: 'ZohoPuviRegular';src: url('https://static.zohocdn.com/zohofonts/zohopuvi/4.0/Zoho_Puvi_Regular.woff2') format('woff2');font-style: normal;font-weight: normal;text-rendering: optimizeLegibility;font-display: swap}@font-face {font-family: Regular;src: url('https://static.zohocdn.com/webfonts/lato2regular/font.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: 'RobotoRegular';font-weight: 400;font-style: normal;font-display: swa;src: url('https://static.zohocdn.com/webfonts/robotoregular/font.woff2')}`;
       iframeHead.appendChild(customFonts);
     }
   }
-
   handleInlineUpload(file, successCallback, failureCallback, mode, editorObj) {
     let {
       id,
       setInlineAttachmentInProgress: progress,
       i18nKeys
     } = this.props;
-
     if (!isFileNameSizeInvalid(file.name)) {
       if (file.size != 0) {
         if (file.size <= 3 * 1024 * 1024) {
@@ -261,7 +229,6 @@ export default class TextEditor extends Component {
             this.handleUpload(file).then(res => {
               successCallback(res);
               progress && progress(false);
-
               if (id && editorObj) {
                 triggerKeyup(editorObj.doc);
               }
@@ -281,7 +248,6 @@ export default class TextEditor extends Component {
       failureCallback(i18nKeys.fileNameLimitExceed);
     }
   }
-
   handleDropUpload(file, successCallback, failureCallback) {
     let e = {
       target: {
@@ -297,7 +263,6 @@ export default class TextEditor extends Component {
       failureCallback();
     });
   }
-
   blurCallback() {
     let {
       blurCallback
@@ -305,7 +270,6 @@ export default class TextEditor extends Component {
     let content = this.handleGetContent();
     blurCallback && blurCallback(content);
   }
-
   handleUpload(file) {
     let {
       onUpload,
@@ -313,20 +277,16 @@ export default class TextEditor extends Component {
       getCSRFCookieName,
       getCSRFCookie
     } = this.props;
-
     try {
       let formData = new FormData();
       formData.append('img_file', file, file.name);
-
       if (getCSRFCookieName && getCSRFCookie) {
         formData.append(getCSRFCookieName(), getCSRFCookie());
       }
-
       return onUpload(formData, file).then(res => {
         if (editorMode === 'TicketReply') {
           return `${res.data}&from=r`;
         }
-
         return res.data;
       }, err => {
         throw err;
@@ -335,24 +295,20 @@ export default class TextEditor extends Component {
       return Promise.reject();
     }
   }
-
   onWindowClick(e) {
     let {
       isEditorDefaultOpen
     } = this.props;
     let element = e.target;
-
     if (!element.closest('[data-isEditor]') && !element.closest("[id='KB_Editor_UploadImage_Popup']") && !element.closest("[id='KB_Editor_Overlay']") && !element.closest('.zdeskEditor_popup') && element && typeof element.className === 'string' && !element.className.startsWith('KB') && !element.hasAttribute('data-insertoptions') && !element.closest('.KB_Editor_common_DropDown')) {
       let {
         value = '',
         id
       } = this.props;
       let cont = value;
-
       if (typeof editor !== 'undefined') {
         cont = editor['addFormEditor'] && editor['addFormEditor'].getContent();
       }
-
       if (!isEditorDefaultOpen) {
         if ((cont == '' || cont == '<div><br></div>') && this.mount) {
           this.toggleEditor(false);
@@ -360,14 +316,12 @@ export default class TextEditor extends Component {
       }
     }
   }
-
   toggleEditor(value) {
     let {
       toggleEdit
     } = this.props;
     toggleEdit && toggleEdit(value);
   }
-
   render() {
     let {
       id,
@@ -385,7 +339,7 @@ export default class TextEditor extends Component {
     } = this.state;
     let editorDoc = ImgLazyLoad && global.editor && global.editor[id] ? global.editor[id].doc : null;
     return /*#__PURE__*/React.createElement(Container, {
-      className: `${styles.textEditor} ${styles[type]} ${styles[border]} 
+      className: `${styles.textEditor} ${styles[type]} ${styles[border]}
         ${isNightMode ? styles.night : styles.light} ${isReadOnly ? styles.readOnly : ''} ${!isEditorShow ? styles.editorHide : ''}`,
       dataId: dataId,
       "data-isEditor": true
@@ -399,60 +353,9 @@ export default class TextEditor extends Component {
       class: styles.readOnlyMask
     }) : null);
   }
-
 }
-TextEditor.defaultProps = {
-  border: 'borderTop',
-  type: 'large',
-  changeEditorContent: false,
-  fontFamily: 'Lato',
-  fontSize: '16',
-  shouldUpdateContent: true,
-  i18nKeys: {},
-  needInlineAttachment: false,
-  isNightMode: false,
-  isReadOnly: false
-};
-TextEditor.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
-};
-
+TextEditor.defaultProps = defaultProps;
+TextEditor.propTypes = propTypes;
 if (false) {
   TextEditor.docs = {
     componentGroup: 'Fields',