@zohodesk/dot 1.0.0-temp-60 → 1.0.0-temp-63

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

@@ -1,184 +0,0 @@
-/*** 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'
-  };
-}

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,8 +0,0 @@
-.section {
-  max-height: 80%;
-  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
-  background-color: var(--zdt_lookupsection_bg);
-  min-height: var(--zd_size390);
-  height: auto;
-  box-shadow: 0px 4px 20px var(--zdt_lookupsection_box_shadow);
-}

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 IconButton from '../../../IconButton/IconButton';
-
-export default class Close extends PureComponent {
-  render() {
-    let { onClose, dataId, title } = this.props;
-    return (
-      <IconButton
-        dataId={dataId}
-        onClick={onClose}
-        iconName='ZD-cross'
-        iconSize='11'
-        title={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: 2.7;
-  cursor: pointer;
-  border-radius: 50%;
-  color: var(--zdt_lookupclose_default_text);
-  transition: var(--zd_transition2) cubic-bezier(0.4, 1, 0.65, 1);
-  font-size: var(--zd_font_size9);
-}
-.container:hover {
-  background-color: var(--zdt_lookupclose_default_hover_bg);
-  color: var(--zdt_lookupclose_default_hover_text);
-}

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,97 +0,0 @@
-/*** Libraries ***/
-import React, { PureComponent } 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 PureComponent {
-  render() {
-    const {
-      title = '',
-      needSearch = false,
-      onLookupClose,
-      searchStr = '',
-      onSearch,
-      onSearchChange,
-      searchPlaceHolder,
-      needOnTypeSearch,
-      getSearchBoxRef,
-      miniDescription,
-      dataId,
-      closeTitle,
-      onSearchKeyDown
-    } = this.props;
-    return (
-      <Container
-        align='vertical'
-        alignBox='row'
-        className={`${commonStyle.container}`}
-        isCover={false}
-        wrap='wrap'
-        dataId={dataId}
-      >
-        {onLookupClose ? (
-          <div className={commonStyle.closeContainer}>
-            <Close dataId='close' onClose={onLookupClose} title={closeTitle} />
-          </div>
-        ) : null}
-        <Box flexible>
-          <div className={commonStyle.title}>
-            <Title text={title} />
-          </div>
-          {miniDescription && (
-            <div className={commonStyle.para}>{miniDescription}</div>
-          )}
-        </Box>
-        {needSearch && (
-          <Box
-            className={`${commonStyle.searchContainer} ${commonResponsive.searchContainer}`}
-          >
-            <Search
-              onSearch={onSearch}
-              searchStr={searchStr}
-              onChange={onSearchChange}
-              placeHolder={searchPlaceHolder}
-              dataId='search'
-              needOnTypeSearch={needOnTypeSearch}
-              getRef={getSearchBoxRef}
-              onKeyDown={onSearchKeyDown}
-            />
-          </Box>
-        )}
-      </Container>
-    );
-  }
-}
-
-ModuleHeader.propTypes = {
-  getSearchBoxRef: PropTypes.func,
-  miniDescription: PropTypes.string,
-  needOnTypeSearch: PropTypes.bool,
-  needSearch: PropTypes.bool,
-  onLookupClose: PropTypes.func,
-  onSearch: PropTypes.func,
-  onSearchChange: PropTypes.func,
-  searchPlaceHolder: PropTypes.string,
-  searchStr: PropTypes.string,
-  title: PropTypes.string,
-  dataId: PropTypes.string,
-  closeTitle: PropTypes.string,
-  onSearchKeyDown: PropTypes.func
-};
-
-if (__DOCS__) {
-  ModuleHeader.docs = {
-    componentGroup: 'Lookup'
-  };
-}

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

@@ -1,40 +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='Find Duplicate'
-        needSearch
-        searchStr={searchStr}
-        onSearchChange={this.handleSearch}
-        searchPlaceHolder='Search'
-        miniDescription="Select a field to search for duplicate records"
-      />
-    );
-  }
-}
-if (__DOCS__) {
-  ModuleHeader__default.docs = {
-    componentGroup: 'Lookup'
-  };
-}

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

@@ -1,48 +0,0 @@
-.searchStyle,
-.boxStyle {
-  transition: var(--zd_transition1);
-  width: var(--zd_size96);
-  height: var(--zd_size28);
-  background: none;
-  position: relative;
-}
-.boxStyle {
-  width: var(--zd_size160);
-  border-radius: 4px;
-  border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
-}
-.searchStyle:hover,
-.boxStyle:hover {
-  border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
-}
-.focusWidth {
-  width: var(--zd_size220);
-}
-.drpSearchBox {
-  position: relative;
-  cursor: pointer;
-  height: var(--zd_size28);
-}
-.drpSearchBox::after {
-  content: '';
-  right: calc(var(--zd_size1) * -1);
-  position: absolute;
-  top: var(--zd_size8);
-  bottom: var(--zd_size8);
-  border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
-}
-.inputBox,
-.drpSearchBox {
-  padding: 0 var(--zd_size9);
-}
-.searchIconBox {
-  padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9);
-}
-.active,
-.boxStyle.active,
-.lineActive.drpSearchBox::after {
-  border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
-}
-.iconArrow {
-  margin-left: var(--zd_size5);
-}