@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.212

package/src/lookup/EmptyPage/docs/EmptyPage__product.docs.js

@@ -1,17 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-
-/*** Components ***/
-import EmptyPage from '../EmptyPage';
-
-export default class EmptyPage__product extends Component {
-  render() {
-    return <EmptyPage type='product' title='No Products Found' />;
-  }
-}
-
-if (__DOCS__) {
-  EmptyPage__product.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/src/lookup/Lookup/Lookup.js

@@ -1,80 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/*** Components ***/
-import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/Responsive';
-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 {
-  render() {
-    let {
-      isActive,
-      children,
-      size,
-      dataId,
-      forwardRef,
-      responsiveId
-    } = this.props;
-    return (
-      <FreezeLayer
-        align='horizontal'
-        animationName='fade'
-        childAnimationName='flyDown'
-        isActive={isActive}
-        palette='snow'
-        forwardRef={forwardRef}
-      >
-        <ResponsiveReceiver responsiveId={responsiveId}>
-          {({ deviceUpto, deviceOnly }) => (
-            <Container
-              alignBox='row'
-              className={style.container}
-              dataId='fldValue'
-            >
-              <div
-                className={`${style.box} 
-            ${
-              size === 'medium'
-                ? deviceOnly(['LAPTOP_S'])
-                  ? style.tabSize
-                  : deviceUpto('TABLET')
-                  ? style.mbleSize
-                  : style.mediumSize
-                : style.smallSize
-            }`}
-                data-id={dataId}
-              >
-                {children}
-              </div>
-            </Container>
-          )}
-        </ResponsiveReceiver>
-      </FreezeLayer>
-    );
-  }
-}
-
-Lookup.propTypes = {
-  children: PropTypes.node,
-  dataId: PropTypes.string,
-  isActive: PropTypes.bool,
-  size: PropTypes.oneOf(['small', 'medium']),
-  responsiveId: PropTypes.string
-};
-Lookup.defaultProps = {
-  size: 'medium',
-  responsiveId: 'Helmet'
-};
-
-if (__DOCS__) {
-  Lookup.docs = {
-    componentGroup: 'Lookup'
-  };
-}

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

@@ -1,22 +0,0 @@
-.container {
-  padding-bottom: var(--zd_size10);
-  font-size: var(--zd_size16);
-}
-.box {
-  position: relative;
-  margin: auto;
-  height: 100%;
-}
-/* Size */
-.smallSize {
-  width: var(--zd_size430);
-}
-.mediumSize {
-  width: var(--zd_size840);
-}
-.tabSize{
-  width: var(--zd_size750);
-}
-.mbleSize{
-  width: 99%
-}

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

@@ -1,189 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/*** Components ***/
-import PortalLayer from '@zohodesk/components/lib/PortalLayer/PortalLayer';
-// 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: '' };
-    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);
-    this.handleGetFormAlertToggle = this.handleGetFormAlertToggle.bind(this);
-  }
-
-  handleLookupShow() {
-    this.onFormAlertToggle(true);
-  }
-
-  handleLookupHide() {
-    this.onFormAlertToggle(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
-    });
-  }
-
-  handleGetFormAlertToggle(updateStateFunction) {
-    this.onFormAlertToggle = updateStateFunction;
-  }
-
-  render() {
-    let { value, selected, selectedStartsWithChar, searchStr } = 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}
-         />*/
-            }}
-        <PortalLayer saveUpdateFunction={this.handleGetFormAlertToggle}>
-          {/*<ContactLookup
-            isActive
-            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}
-          />*/}
-        </PortalLayer>
-      </div>
-    );
-  }
-}
-
-Lookup__contact.propTypes = {
-  getLookupTarget: PropTypes.func,
-  onSelect: PropTypes.func
-};
-
-if (__DOCS__) {
-  Lookup__contact.docs = {
-    componentGroup: 'Lookup'
-  };
-}

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

@@ -1,59 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-
-/*** Components ***/
-import Lookup from '../Lookup';
-import ModuleHeader from '../../header/ModuleHeader/ModuleHeader';
-import Section from '../../Section/Section';
-
-export default class Lookup__default extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { isShow: false, searchStr: '' };
-    this.handleLookupShow = this.handleLookupShow.bind(this);
-    this.handleLookupHide = this.handleLookupHide.bind(this);
-    this.handleLookupSearch = this.handleLookupSearch.bind(this);
-  }
-
-  handleLookupShow() {
-    this.setState({
-      isShow: true
-    });
-  }
-
-  handleLookupHide() {
-    this.setState({
-      isShow: false
-    });
-  }
-
-  handleLookupSearch(val) {
-    this.setState({ searchStr: val });
-  }
-
-  render() {
-    let { isShow, searchStr } = this.state;
-    return (
-      <div style={{ height: '90vh' }}>
-        <span onClick={this.handleLookupShow}>Open</span>
-        <Lookup animationStyle='scale' isActive={isShow}>
-          <ModuleHeader
-            title='Select Contact'
-            needSearch
-            onLookupClose={this.handleLookupHide}
-            onSearchChange={this.handleLookupSearch}
-            searchStr={searchStr}
-            searchPlaceHolder='Search contact'
-          />
-          <Section />
-        </Lookup>
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  Lookup__default.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/src/lookup/Section/LookupSection.module.css

@@ -1,7 +0,0 @@
-.section {
-  max-height: 80%;
-  border-radius: 0 0 5px 5px;
-  background-color: var(--dot_bg_white);
-  min-height: var(--zd_size390);
-  height: auto;
-}

package/src/lookup/Section/Section.js

@@ -1,27 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import style from './LookupSection.module.css';
-export default class Section extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { alignBox, className } = this.props;
-    return (
-      <Container
-        alignBox={alignBox}
-        className={`${style.section} ${className ? className : ''}`}
-      >
-        <Box flexible>{this.props.children}</Box>
-      </Container>
-    );
-  }
-}
-Section.propTypes = {
-  alignBox: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-Section.defaultProps = {};

package/src/lookup/header/Close/Close.js

@@ -1,36 +0,0 @@
-/*** Libraries ***/
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-
-/*** FontIcons ***/
-import GridIcons from '../../../GridIcons/GridIcons';
-
-export default class Close extends PureComponent {
-  render() {
-    let { onClose, dataId, title } = this.props;
-    return (
-      <GridIcons
-        dataId={dataId}
-        onClick={onClose}
-        iconName='ZD-cross'
-        iconSize='11'
-        dataTitle={title}
-      />
-    );
-  }
-}
-
-Close.propTypes = {
-  dataId: PropTypes.string,
-  onClose: PropTypes.func,
-  title: PropTypes.string
-};
-Close.defaultProps = {
-  dataId: 'closeButton'
-};
-
-if (__DOCS__) {
-  Close.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/src/lookup/header/Close/LookupClose.module.css

@@ -1,15 +0,0 @@
-.container {
-  text-align: center;
-  width: var(--zd_size25);
-  height: var(--zd_size25);
-  line-height: var(--zd_size25);
-  cursor: pointer;
-  border-radius: 50%;
-  color: var(--zd_text_dark5);
-  transition: 0.2s cubic-bezier(0.4, 1, 0.65, 1);
-  font-size: var(--zd_size9);
-}
-.container:hover {
-  background-color: var(--zd_bg_smoke5);
-  color: var(--dot_text_black);
-}

package/src/lookup/header/Close/docs/Close__default.docs.js

@@ -1,17 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Close from '../Close';
-export default class Close__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (<Close />);
-  }
-}
-if (__DOCS__) {
-  Close__default.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/src/lookup/header/ModuleHeader/ModuleHeader.js

@@ -1,76 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/*** Components ***/
-import Title from '../Title/Title';
-import Close from '../Close/Close';
-import Search from '../Search/Search';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-
-/*** CSS ***/
-import commonStyle from '../lookupHeaderCommon.module.css';
-import commonResponsive from '../lookupHeaderCommonResponsive.module.css';
-
-/*eslint-disable react/forbid-component-props */
-
-export default class ModuleHeader extends Component {
-  render() {
-    let {
-      title = '',
-      needSearch = false,
-      onLookupClose,
-      searchStr = '',
-      onSearch,
-      onSearchChange,
-      searchPlaceHolder
-    } = this.props;
-    return (
-      <Container
-        align='vertical'
-        alignBox='row'
-        className={`${commonStyle.container} ${commonResponsive.container}`}
-        isCover={false}
-        wrap='wrap'
-      >
-        <div className={commonStyle.closeContainer}>
-          <Close dataId='close' onClose={onLookupClose} />
-        </div>
-        <Box flexible>
-          <div className={commonStyle.title}>
-            <Title text={title} />
-          </div>
-        </Box>
-        {needSearch && (
-          <Box
-            className={`${commonStyle.searchContainer} ${commonResponsive.searchContainer}`}
-          >
-            <Search
-              onSearch={onSearch}
-              searchStr={searchStr}
-              onChange={onSearchChange}
-              placeHolder={searchPlaceHolder}
-              dataId='search'
-            />
-          </Box>
-        )}
-      </Container>
-    );
-  }
-}
-
-ModuleHeader.propTypes = {
-  needSearch: PropTypes.bool,
-  onLookupClose: PropTypes.func,
-  onSearch: PropTypes.func,
-  onSearchChange: PropTypes.func,
-  searchPlaceHolder: PropTypes.string,
-  searchStr: PropTypes.string,
-  title: PropTypes.string
-};
-
-if (__DOCS__) {
-  ModuleHeader.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/src/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js

@@ -1,39 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-
-/*** Components ***/
-import ModuleHeader from '../ModuleHeader';
-
-export default class ModuleHeader__default extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchStr: ''
-    };
-    this.handleSearch = this.handleSearch.bind(this);
-  }
-
-  handleSearch(value) {
-    this.setState({
-      searchStr: value
-    });
-  }
-
-  render() {
-    let { searchStr } = this.state;
-    return (
-      <ModuleHeader
-        title='Select Module'
-        needSearch
-        searchStr={searchStr}
-        onSearchChange={this.handleSearch}
-        searchPlaceHolder='Search'
-      />
-    );
-  }
-}
-if (__DOCS__) {
-  ModuleHeader__default.docs = {
-    componentGroup: 'Lookup'
-  };
-}

package/src/lookup/header/Search/LookupSearch.module.css

@@ -1,14 +0,0 @@
-.inputStyle {
-  vertical-align: text-bottom;
-  transition: 0.3s cubic-bezier(0.4, 1, 0.65, 1);
-  width: var(--zd_size96);
-  background: none;
-}
-.inputStyle:hover {
-  border-bottom: 1px solid var(--dot_inputLineHover);
-}
-
-.inputActive {
-  border-bottom: 1px solid var(--dot_inputLineFocus);
-  width: 100%;
-}