@zohodesk/dot 1.0.0-temp-102 → 1.0.0-temp-103

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

@@ -1,28 +1,26 @@
 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 ****/
 
+/**** Components ****/
 import Label from '@zohodesk/components/lib/Label/Label';
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import ValidationMessage from '../ValidationMessage/ValidationMessage';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import FieldContainer from '../FieldContainer/FieldContainer';
-/**** CSS ****/
 
+/**** CSS ****/
 import style from '../Fields.module.css';
 export default class TextBoxField 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.handleGetRef = this.handleGetRef.bind(this);
+    // this.handleLabelClick = this.handleLabelClick.bind(this);
     this.getNextId = getUniqueId(this);
   }
-
   handleChange(value) {
     let {
       id,
@@ -30,7 +28,6 @@ export default class TextBoxField extends PureComponent {
     } = this.props;
     onChange && onChange(id, value);
   }
-
   handleGetRef(el) {
     let {
       getRef,
@@ -38,14 +35,15 @@ export default class TextBoxField extends PureComponent {
     } = this.props;
     this.textBox = el;
     getRef && getRef(el, id);
-  } // handleLabelClick() {
+  }
+
+  // handleLabelClick() {
   //   // let { isFocusOnLabelClick } = this.props;
   //   // if (isFocusOnLabelClick && this.textBox && this.textBox.focus) {
   //   //   this.textBox.focus();
   //   // }
   // }
 
-
   render() {
     let {
       labelName,
@@ -145,11 +143,9 @@ export default class TextBoxField extends PureComponent {
       dataId: `${dataId}_ValidationRuleMessage`
     }, ValidationMessageProps2))));
   }
-
 }
 TextBoxField.propTypes = propTypes;
 TextBoxField.defaultProps = defaultProps;
-
 if (false) {
   TextBoxField.docs = {
     componentGroup: 'Form Fields',

package/es/form/fields/TextBoxField/docs/TextBoxField__default.docs.js

@@ -10,19 +10,15 @@ export default class TextBoxField__default extends Component {
     this.renderMiddle = this.renderMiddle.bind(this);
     this.renderEnd = this.renderEnd.bind(this);
   }
-
   renderStart() {
     return 'Start';
   }
-
   renderMiddle() {
     return 'Middle';
   }
-
   renderEnd() {
     return 'End';
   }
-
   render() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextBoxField, {
       labelName: "Contact Name",
@@ -61,9 +57,7 @@ export default class TextBoxField__default extends Component {
       size: "18"
     }))));
   }
-
 }
-
 if (false) {
   TextBoxField__default.docs = {
     componentGroup: 'Form Fields',

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

@@ -5,16 +5,12 @@ 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 {
@@ -28,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({
@@ -43,10 +37,8 @@ export default class TextEditor extends Component {
         isResourceLoaded: true
       });
     }
-
     window.addEventListener('click', this.onWindowClick);
   }
-
   initializeEditor(id, mode) {
     let {
       value,
@@ -60,7 +52,6 @@ export default class TextEditor extends Component {
       handleAlertMessage,
       needInlineAttachment
     } = this.props;
-
     if (id && global.ZohoDeskEditor) {
       let defaultObj = {
         id,
@@ -87,19 +78,17 @@ export default class TextEditor extends Component {
         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,
@@ -108,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,
@@ -147,58 +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;
-
     if (onChange) {
       let content = this.handleGetContent();
       onChange(content, id);
     }
   }
-
   editorCallback(editorObj) {
     let {
       editorCallback,
@@ -213,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) {
@@ -266,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);
               }
@@ -286,7 +248,6 @@ export default class TextEditor extends Component {
       failureCallback(i18nKeys.fileNameLimitExceed);
     }
   }
-
   handleDropUpload(file, successCallback, failureCallback) {
     let e = {
       target: {
@@ -302,7 +263,6 @@ export default class TextEditor extends Component {
       failureCallback();
     });
   }
-
   blurCallback() {
     let {
       blurCallback
@@ -310,7 +270,6 @@ export default class TextEditor extends Component {
     let content = this.handleGetContent();
     blurCallback && blurCallback(content);
   }
-
   handleUpload(file) {
     let {
       onUpload,
@@ -318,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;
@@ -340,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);
@@ -365,14 +316,12 @@ export default class TextEditor extends Component {
       }
     }
   }
-
   toggleEditor(value) {
     let {
       toggleEdit
     } = this.props;
     toggleEdit && toggleEdit(value);
   }
-
   render() {
     let {
       id,
@@ -404,11 +353,9 @@ export default class TextEditor extends Component {
       class: styles.readOnlyMask
     }) : null);
   }
-
 }
 TextEditor.defaultProps = defaultProps;
 TextEditor.propTypes = propTypes;
-
 if (false) {
   TextEditor.docs = {
     componentGroup: 'Fields',