@zohodesk/dot 1.0.0-temp-64 → 1.0.0-temp-65

package/es/list/Thread/Thread.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || 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); }
+
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '@zohodesk/icons/lib/Icon';
@@ -14,14 +16,15 @@ export default class Thread extends Component {
       className,
       iconTitle,
       dataId,
-      align
+      align,
+      customProps
     } = this.props;
     let count = threadCount === '0' ? '1' : threadCount;
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React.createElement(Button, _extends({
       customClass: `${style.container} ${style[`align_${align}`]} ${className}`,
       title: iconTitle,
       dataId: dataId
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, customProps), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-TK-thread",
       size: "9"
     }), /*#__PURE__*/React.createElement("span", {
@@ -35,11 +38,13 @@ Thread.propTypes = {
   className: PropTypes.string,
   count: PropTypes.string,
   dataId: PropTypes.string,
-  iconTitle: PropTypes.string
+  iconTitle: PropTypes.string,
+  customProps: PropTypes.object
 };
 Thread.defaultProps = {
   align: 'left',
-  className: ''
+  className: '',
+  customProps: {}
 };
 
 if (false) {

package/es/list/Thread/docs/Thread__default.docs.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Thread from '../Thread';
+export default class Thread__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Thread, {
+      count: "1"
+    });
+  }
+
+}
+
+if (false) {
+  Thread__default.docs = {
+    folderName: 'List',
+    componentGroup: 'Thread'
+  };
+}

package/es/list/UserTime/docs/UserTime__default.docs.js

@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import UserTime from '../UserTime';
+export default class UserTime__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "closedTime",
+      format: _ref => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "overdue",
+      iconColor: "red",
+      format: _ref2 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref2;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "createdtime",
+      iconColor: "green",
+      format: _ref3 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref3;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "completedTask",
+      format: _ref4 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref4;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(UserTime, {
+      to: "2018-02-28T10:12:31.000Z",
+      icon: "dueTime",
+      iconColor: "orange",
+      format: _ref5 => {
+        let {
+          years,
+          days,
+          months,
+          hours
+        } = _ref5;
+
+        if (years == 0 && days == 0 && months == 0) {
+          return 'hh:mm A';
+        } else if (years == 0 && days < 7 && months == 0) {
+          return 'ddd DD MMM';
+        } else if (years == 0 && months > 1) {
+          return 'DD MMM';
+        }
+
+        return 'DD MMM YYYY';
+      },
+      ago: "ago",
+      later: "late"
+    })));
+  }
+
+}
+
+if (false) {
+  UserTime__default.docs = {
+    folderName: 'List',
+    componentGroup: 'UserTime'
+  };
+}

package/es/list/status/StatusDropdown/docs/StatusDropdown__default.docs.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import StatusDropdown from '../StatusDropdown';
+import { StatusText } from '../../../SecondaryText';
+export default class StatusDropdown__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 'Open',
+      options: [{
+        statusType: 'Open',
+        name: 'Opensdd',
+        key: 'Opensdd',
+        statusColor: 'black'
+      }, {
+        statusType: 'Open',
+        name: 'Escalated',
+        key: 'Escalated',
+        statusColor: 'black'
+      }, {
+        statusType: 'Closed',
+        name: 'Closed',
+        key: 'Closed',
+        statusColor: 'green'
+      }, {
+        statusType: 'On Hold',
+        name: 'On Hold Status',
+        key: 'On Hold Status',
+        statusColor: 'orange'
+      }, {
+        statusType: 'Open',
+        name: 'Open',
+        key: 'Open',
+        statusColor: 'black'
+      }, {
+        statusType: 'On Hold',
+        name: 'Pending Developer Implement',
+        key: 'Pending Developer Implement',
+        statusColor: 'orange'
+      }, {
+        statusType: 'Open',
+        name: 'Inprogress',
+        key: 'Inprogress',
+        statusColor: 'black'
+      }]
+    };
+    this.onSelect = this.onSelect.bind(this);
+    this.getNextOptions = this.getNextOptions.bind(this);
+  }
+
+  onSelect(element, e) {
+    this.setState({
+      value: element
+    });
+  }
+
+  getNextOptions() {
+    this.setState({
+      options: [{
+        statusType: 'Open',
+        name: 'Opensdd',
+        key: 'Opensdd',
+        statusColor: 'black'
+      }, {
+        statusType: 'Open',
+        name: 'Escalated',
+        key: 'Escalated',
+        statusColor: 'black'
+      }, {
+        statusType: 'Closed',
+        name: 'Closed',
+        key: 'Closed',
+        statusColor: 'green'
+      }, {
+        statusType: 'On Hold',
+        name: 'On Hold Status',
+        key: 'On Hold Status',
+        statusColor: 'orange'
+      }, {
+        statusType: 'Open',
+        name: 'Open',
+        key: 'Open',
+        statusColor: 'black'
+      }, {
+        statusType: 'On Hold',
+        name: 'Pending Developer Implement',
+        key: 'Pending Developer Implement',
+        statusColor: 'orange'
+      }, {
+        statusType: 'Open',
+        name: 'Inprogress',
+        key: 'Inprogress',
+        statusColor: 'black'
+      }]
+    });
+  }
+
+  render() {
+    let {
+      options
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '30px',
+        display: 'inline-flex',
+        maxWidth: '200px'
+      }
+    }, /*#__PURE__*/React.createElement(StatusDropdown, {
+      value: this.state.value,
+      dataTitle: this.state.value,
+      keyName: "name",
+      onClick: this.onSelect,
+      isSearch: true,
+      title: "Status",
+      options: options,
+      isNextOptions: true,
+      getNextOptions: this.getNextOptions,
+      arrowIconPosition: "overlay",
+      isEditable: true,
+      statusColor: "statusColor",
+      placeHolderText: "Search Status"
+    }, /*#__PURE__*/React.createElement(StatusText, {
+      text: this.state.value
+    })));
+  }
+
+}
+StatusDropdown__default.docs = {
+  componentGroup: 'Molecule'
+};

package/es/list/status/StatusListItem/docs/StatusListItem__default.docs.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import StatusListItem from '../StatusListItem';
+import { StatusText } from '../../../SecondaryText';
+export default class StatusListItem__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '30px',
+        display: 'inline-block'
+      }
+    }, /*#__PURE__*/React.createElement(StatusListItem, {
+      value: "On Hold",
+      bulletColor: "orange"
+    }), /*#__PURE__*/React.createElement(StatusListItem, {
+      value: "Open",
+      bulletColor: "black"
+    }), /*#__PURE__*/React.createElement(StatusListItem, {
+      value: "Closed",
+      bulletColor: "green"
+    }));
+  }
+
+}
+StatusListItem__default.docs = {
+  componentGroup: 'StatusListItem',
+  folderName: 'List'
+};

package/es/lookup/EmptyPage/docs/EmptyPage__account.docs.js

@@ -0,0 +1,20 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Components ***/
+
+import EmptyPage from '../EmptyPage';
+export default class EmptyPage__account extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(EmptyPage, {
+      type: "account",
+      title: "No Accounts Found"
+    });
+  }
+
+}
+
+if (false) {
+  EmptyPage__account.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/EmptyPage/docs/EmptyPage__contact.docs.js

@@ -0,0 +1,20 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Components ***/
+
+import EmptyPage from '../EmptyPage';
+export default class EmptyPage__contact extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(EmptyPage, {
+      type: "contact",
+      title: "No Contacts Found"
+    });
+  }
+
+}
+
+if (false) {
+  EmptyPage__contact.docs = {
+    componentGroup: 'Lookup'
+  };
+}

package/es/lookup/EmptyPage/docs/EmptyPage__default.docs.js

@@ -0,0 +1,17 @@
+/*** Libraries ***/
+import React, { Component } from 'react';
+/*** Components ***/
+
+import EmptyPage from '../EmptyPage';
+export default class EmptyPage__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(EmptyPage, null);
+  }
+
+}
+
+if (false) {
+  EmptyPage__default.docs = {
+    componentGroup: 'Lookup'
+  };
+}

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

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

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

@@ -0,0 +1,196 @@
+/*** 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 /*#__PURE__*/React.createElement("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}
+      />*/
+    }, /*#__PURE__*/React.createElement(Modal, null));
+  }
+
+}
+Lookup__contact.propTypes = {
+  getLookupTarget: PropTypes.func,
+  onSelect: PropTypes.func
+};
+
+if (false) {
+  Lookup__contact.docs = {
+    componentGroup: 'Lookup'
+  };
+}