@zohodesk/dot 1.0.0-temp-49 → 1.0.0-temp-53

package/src/lookup/Lookup/Lookup.js

@@ -1,113 +1,113 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/*** Components ***/
-import FreezeLayer from '../../FreezeLayer/FreezeLayer';
-import { Container } from '@zohodesk/components/lib/Layout';
-
-/*** CSS ***/
-import style from './Lookup.module.css';
-
-/*eslint-disable react/forbid-component-props */
-
-export default class Lookup extends Component {
-  constructor(props) {
-    super(props);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    const { isActive } = this.props;
-    if (prevProps.isActive !== isActive) {
-      isActive
-        ? document.addEventListener('keydown', this.handleKeyDown)
-        : document.removeEventListener('keydown', this.handleKeyDown);
-    }
-  }
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown);
-  }
-
-  handleKeyDown(e) {
-    const { onKeyDown } = this.props;
-    onKeyDown && onKeyDown(e);
-  }
-
-  render() {
-    const {
-      isActive,
-      children,
-      size,
-      dataId,
-      forwardRef,
-      onClick,
-      customClass,
-      htmlId,
-      a11y,
-      childAnimationName
-    } = this.props;
-    const {
-      role = 'dialog',
-      ariaLabelledby,
-      ariaDescribedby,
-      ariaModal = isActive ? true : undefined
-    } = a11y;
-    return (
-      <FreezeLayer
-        align='horizontal'
-        animationName='fade'
-        childAnimationName={childAnimationName}
-        isActive={isActive}
-        palette='snow'
-        forwardRef={forwardRef}
-        onClick={onClick}
-        customClass={customClass}
-      >
-        <Container alignBox='row' className={style.container} dataId='fldValue'>
-          <div
-            tabIndex='0'
-            role={role}
-            aria-labelledby={ariaLabelledby}
-            aria-describedby={ariaDescribedby}
-            aria-modal={ariaModal}
-            id={htmlId}
-            className={`${style.box} ${style[`${size}Size`]}`}
-            data-id={dataId}
-          >
-            {children}
-          </div>
-        </Container>
-      </FreezeLayer>
-    );
-  }
-}
-
-Lookup.propTypes = {
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  isActive: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'xmedium', 'medium', 'large', 'full']),
-  htmlId: PropTypes.string,
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaLabelledby: PropTypes.string,
-    ariaDescribedby: PropTypes.string,
-    ariaModal: PropTypes.bool
-  }),
-  onKeyDown: PropTypes.func,
-  childAnimationName: PropTypes.oneOf(['expand', 'flyDown'])
-};
-Lookup.defaultProps = {
-  size: 'medium',
-  customClass: '',
-  a11y: {},
-  childAnimationName: 'flyDown'
-};
-
-if (__DOCS__) {
-  Lookup.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+/*** Libraries ***/
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/*** Components ***/
+import FreezeLayer from '../../FreezeLayer/FreezeLayer';
+import { Container } from '@zohodesk/components/lib/Layout';
+
+/*** CSS ***/
+import style from './Lookup.module.css';
+
+/*eslint-disable react/forbid-component-props */
+
+export default class Lookup extends Component {
+  constructor(props) {
+    super(props);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { isActive } = this.props;
+    if (prevProps.isActive !== isActive) {
+      isActive
+        ? document.addEventListener('keydown', this.handleKeyDown)
+        : document.removeEventListener('keydown', this.handleKeyDown);
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown(e) {
+    const { onKeyDown } = this.props;
+    onKeyDown && onKeyDown(e);
+  }
+
+  render() {
+    const {
+      isActive,
+      children,
+      size,
+      dataId,
+      forwardRef,
+      onClick,
+      customClass,
+      htmlId,
+      a11y,
+      childAnimationName
+    } = this.props;
+    const {
+      role = 'dialog',
+      ariaLabelledby,
+      ariaDescribedby,
+      ariaModal = isActive ? true : undefined
+    } = a11y;
+    return (
+      <FreezeLayer
+        align='horizontal'
+        animationName='fade'
+        childAnimationName={childAnimationName}
+        isActive={isActive}
+        palette='snow'
+        forwardRef={forwardRef}
+        onClick={onClick}
+        customClass={customClass}
+      >
+        <Container alignBox='row' className={style.container} dataId='fldValue'>
+          <div
+            tabIndex='0'
+            role={role}
+            aria-labelledby={ariaLabelledby}
+            aria-describedby={ariaDescribedby}
+            aria-modal={ariaModal}
+            id={htmlId}
+            className={`${style.box} ${style[`${size}Size`]}`}
+            data-id={dataId}
+          >
+            {children}
+          </div>
+        </Container>
+      </FreezeLayer>
+    );
+  }
+}
+
+Lookup.propTypes = {
+  children: PropTypes.node,
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  isActive: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'xmedium', 'medium', 'large', 'full']),
+  htmlId: PropTypes.string,
+  a11y: PropTypes.shape({
+    role: PropTypes.string,
+    ariaLabelledby: PropTypes.string,
+    ariaDescribedby: PropTypes.string,
+    ariaModal: PropTypes.bool
+  }),
+  onKeyDown: PropTypes.func,
+  childAnimationName: PropTypes.oneOf(['expand', 'flyDown'])
+};
+Lookup.defaultProps = {
+  size: 'medium',
+  customClass: '',
+  a11y: {},
+  childAnimationName: 'flyDown'
+};
+
+if (__DOCS__) {
+  Lookup.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/src/lookup/Lookup/Lookup.module.css

@@ -1,26 +1,26 @@
-.container {
-  padding-bottom: var(--zd_size10);
-  font-size: var(--zd_font_size16);
-}
-.box {
-  position: relative;
-  margin: auto;
-  height: 100%;
-  width: 100%;
-}
-/* Size */
-.smallSize {
-  max-width: var(--zd_size470);
-}
-.xmediumSize {
-  max-width: var(--zd_size620);
-}
-.mediumSize {
-  max-width: var(--zd_size840);
-}
-.largeSize {
-  max-width: 70%;
-}
-.fullSize {
-  max-width: 90%;
-}
+.container {
+  padding-bottom: var(--zd_size10);
+  font-size: var(--zd_font_size16);
+}
+.box {
+  position: relative;
+  margin: auto;
+  height: 100%;
+  width: 100%;
+}
+/* Size */
+.smallSize {
+  max-width: var(--zd_size470);
+}
+.xmediumSize {
+  max-width: var(--zd_size620);
+}
+.mediumSize {
+  max-width: var(--zd_size840);
+}
+.largeSize {
+  max-width: 70%;
+}
+.fullSize {
+  max-width: 90%;
+}

package/src/lookup/Lookup/docs/Lookup__contact.docs.js

@@ -1,184 +1,184 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/*** Components ***/
-import Modal from '@zohodesk/components/lib/Modal/Modal';
-// import ContactLookup from '../../ContactLookup/ContactLookup.js';
-// import ContactLookupController from '../../../moduleForm/lookupController/ContactLookupController/ContactLookupController';
-
-/*** Methods ***/
-import { getFullName } from '../../../utils/General';
-
-let contacts = {
-  id_1: {
-    firstName: 'Antro Arul ',
-    lastName: 'Xavier',
-    src: null,
-    email: 'antro.j@zohocorp.com',
-    mobile: '9600745911',
-    accountId: '1236',
-    account: {
-      accountName: 'Zoho Desk'
-    },
-    id: 'id_1',
-    secondaryEmail: 'antro.j+1@zohocorp.com',
-    phoneNo: '9600745912'
-  },
-  id_2: {
-    firstName: 'Ujil Axper',
-    email: null,
-    mobile: null,
-    id: 'id_2',
-    secondaryEmail: '',
-    phone: '9600745912'
-  },
-  id_3: {
-    lastName: 'Selva Kumar PL',
-    email: '',
-    mobile: null,
-    accountId: '1235',
-    account: {
-      accountName: 'My Account'
-    },
-    id: 'id_3',
-    secondaryEmail: 'selva.kumar+1@zohocorp.com',
-    phone: '9600745912'
-  },
-  id_4: {
-    firstName: 'Arun Kumar M',
-    email: 'arun.kumar@zohocorp.com',
-    mobile: '9089765342',
-    accountId: '1234',
-    account: {
-      accountName: 'Zoho CRM'
-    },
-    id: 'id_4',
-    secondaryEmail: '',
-    phone: ''
-  },
-  id_5: {
-    lastName: 'Ravikumar Selvam',
-    email: '',
-    mobile: '8765432910',
-    accountName: {},
-    id: 'id_5',
-    secondaryEmail: '',
-    phone: ''
-  }
-};
-
-let accounts = {
-  '1234': {
-    accountName: 'Zoho CRM'
-  },
-  '1235': {
-    accountName: 'My Account'
-  },
-  '1236': {
-    accountName: 'Zoho Desk'
-  }
-};
-
-export default class Lookup__contact extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: '', selected: '', searchStr: '',isShowAlert: false };
-    this.handleLookupShow = this.handleLookupShow.bind(this);
-    this.handleLookupHide = this.handleLookupHide.bind(this);
-    this.handleSearch = this.handleSearch.bind(this);
-    this.handleClear = this.handleClear.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleSelectStartsWith = this.handleSelectStartsWith.bind(this);
-    this.handleSearchAPI = this.handleSearchAPI.bind(this);
-  }
-
-  handleLookupShow() {
-    this.setState({isShowAlert: true});
-  }
-
-  handleLookupHide() {
-    this.setState({isShowAlert: false});
-  }
-
-  handleSearch(val) {
-    this.setState({ value: val, selected: '' });
-  }
-
-  handleClear() {
-    this.handleSearch('');
-  }
-
-  handleSelect(id) {
-    let { onSelect } = this.props;
-    onSelect && onSelect(id);
-    let { firstName = '', lastName = '' } = contacts[id];
-    let contactName = getFullName(firstName, lastName);
-    this.setState({ selected: contactName, value: '' });
-    this.handleLookupHide();
-  }
-
-  handleSelectStartsWith(startsWith) {
-    this.setState({ selectedStartsWithChar: startsWith });
-  }
-
-  handleSearchAPI(val) {
-    this.setState({
-      searchStr: val
-    });
-  }
-
-  render() {
-    let { value, selected, selectedStartsWithChar, searchStr,isShowAlert } = this.state;
-    let { getLookupTarget } = this.props;
-
-    return (
-      <div style={{ height: '90vh' }}>
-        {getLookupTarget
-          ? getLookupTarget({ onLookupShow: this.handleLookupShow })
-          : {
-              /* <ContactLookupController
-            value={value || selected}
-            suggestionItems={['id_1', 'id_2', 'id_3', 'id_4', 'id_5']}
-            moduleData={contacts}
-            accounts={accounts}
-            needClearIcon
-            needSearchIcon
-            needSuggestionBox
-            onClear={this.handleClear}
-            onChange={this.handleSearch}
-            onSearch={this.handleLookupShow}
-            onSelect={this.handleSelect}
-            searchStr={searchStr}
-            onSearchAPI={this.handleSearchAPI}
-         />*/
-            }}
-        <Modal>
-          {/*<ContactLookup
-            isActive={isShowAlert}
-            contactItems={['id_1', 'id_2', 'id_3', 'id_4', 'id_5']}
-            contacts={contacts}
-            accounts={accounts}
-            modulePluralName='Contacts'
-            moduleSingularName='Contact'
-            onContactSelect={this.handleSelect}
-            onLookupClose={this.handleLookupHide}
-            onSelectStartsWith={this.handleSelectStartsWith}
-            selectedStartsWithChar={selectedStartsWithChar}
-          />*/}
-        </Modal>
-      </div>
-    );
-  }
-}
-
-Lookup__contact.propTypes = {
-  getLookupTarget: PropTypes.func,
-  onSelect: PropTypes.func
-};
-
-if (__DOCS__) {
-  Lookup__contact.docs = {
-    componentGroup: 'Lookup'
-  };
-}
+/*** Libraries ***/
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+/*** Components ***/
+import Modal from '@zohodesk/components/lib/Modal/Modal';
+// import ContactLookup from '../../ContactLookup/ContactLookup.js';
+// import ContactLookupController from '../../../moduleForm/lookupController/ContactLookupController/ContactLookupController';
+
+/*** Methods ***/
+import { getFullName } from '../../../utils/General';
+
+let contacts = {
+  id_1: {
+    firstName: 'Antro Arul ',
+    lastName: 'Xavier',
+    src: null,
+    email: 'antro.j@zohocorp.com',
+    mobile: '9600745911',
+    accountId: '1236',
+    account: {
+      accountName: 'Zoho Desk'
+    },
+    id: 'id_1',
+    secondaryEmail: 'antro.j+1@zohocorp.com',
+    phoneNo: '9600745912'
+  },
+  id_2: {
+    firstName: 'Ujil Axper',
+    email: null,
+    mobile: null,
+    id: 'id_2',
+    secondaryEmail: '',
+    phone: '9600745912'
+  },
+  id_3: {
+    lastName: 'Selva Kumar PL',
+    email: '',
+    mobile: null,
+    accountId: '1235',
+    account: {
+      accountName: 'My Account'
+    },
+    id: 'id_3',
+    secondaryEmail: 'selva.kumar+1@zohocorp.com',
+    phone: '9600745912'
+  },
+  id_4: {
+    firstName: 'Arun Kumar M',
+    email: 'arun.kumar@zohocorp.com',
+    mobile: '9089765342',
+    accountId: '1234',
+    account: {
+      accountName: 'Zoho CRM'
+    },
+    id: 'id_4',
+    secondaryEmail: '',
+    phone: ''
+  },
+  id_5: {
+    lastName: 'Ravikumar Selvam',
+    email: '',
+    mobile: '8765432910',
+    accountName: {},
+    id: 'id_5',
+    secondaryEmail: '',
+    phone: ''
+  }
+};
+
+let accounts = {
+  '1234': {
+    accountName: 'Zoho CRM'
+  },
+  '1235': {
+    accountName: 'My Account'
+  },
+  '1236': {
+    accountName: 'Zoho Desk'
+  }
+};
+
+export default class Lookup__contact extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: '', selected: '', searchStr: '',isShowAlert: false };
+    this.handleLookupShow = this.handleLookupShow.bind(this);
+    this.handleLookupHide = this.handleLookupHide.bind(this);
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleClear = this.handleClear.bind(this);
+    this.handleSelect = this.handleSelect.bind(this);
+    this.handleSelectStartsWith = this.handleSelectStartsWith.bind(this);
+    this.handleSearchAPI = this.handleSearchAPI.bind(this);
+  }
+
+  handleLookupShow() {
+    this.setState({isShowAlert: true});
+  }
+
+  handleLookupHide() {
+    this.setState({isShowAlert: false});
+  }
+
+  handleSearch(val) {
+    this.setState({ value: val, selected: '' });
+  }
+
+  handleClear() {
+    this.handleSearch('');
+  }
+
+  handleSelect(id) {
+    let { onSelect } = this.props;
+    onSelect && onSelect(id);
+    let { firstName = '', lastName = '' } = contacts[id];
+    let contactName = getFullName(firstName, lastName);
+    this.setState({ selected: contactName, value: '' });
+    this.handleLookupHide();
+  }
+
+  handleSelectStartsWith(startsWith) {
+    this.setState({ selectedStartsWithChar: startsWith });
+  }
+
+  handleSearchAPI(val) {
+    this.setState({
+      searchStr: val
+    });
+  }
+
+  render() {
+    let { value, selected, selectedStartsWithChar, searchStr,isShowAlert } = this.state;
+    let { getLookupTarget } = this.props;
+
+    return (
+      <div style={{ height: '90vh' }}>
+        {getLookupTarget
+          ? getLookupTarget({ onLookupShow: this.handleLookupShow })
+          : {
+              /* <ContactLookupController
+            value={value || selected}
+            suggestionItems={['id_1', 'id_2', 'id_3', 'id_4', 'id_5']}
+            moduleData={contacts}
+            accounts={accounts}
+            needClearIcon
+            needSearchIcon
+            needSuggestionBox
+            onClear={this.handleClear}
+            onChange={this.handleSearch}
+            onSearch={this.handleLookupShow}
+            onSelect={this.handleSelect}
+            searchStr={searchStr}
+            onSearchAPI={this.handleSearchAPI}
+         />*/
+            }}
+        <Modal>
+          {/*<ContactLookup
+            isActive={isShowAlert}
+            contactItems={['id_1', 'id_2', 'id_3', 'id_4', 'id_5']}
+            contacts={contacts}
+            accounts={accounts}
+            modulePluralName='Contacts'
+            moduleSingularName='Contact'
+            onContactSelect={this.handleSelect}
+            onLookupClose={this.handleLookupHide}
+            onSelectStartsWith={this.handleSelectStartsWith}
+            selectedStartsWithChar={selectedStartsWithChar}
+          />*/}
+        </Modal>
+      </div>
+    );
+  }
+}
+
+Lookup__contact.propTypes = {
+  getLookupTarget: PropTypes.func,
+  onSelect: PropTypes.func
+};
+
+if (__DOCS__) {
+  Lookup__contact.docs = {
+    componentGroup: 'Lookup'
+  };
+}