@zohodesk/components 1.0.0-alpha-238 → 1.0.0-alpha-239

package/es/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js

@@ -0,0 +1,141 @@
+/**** Libraries ****/
+import React, { Component } from 'react';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+/**** Components ****/
+
+import MultiSelectWithAvatar from '../MultiSelectWithAvatar';
+export default class MultiSelectWithAvatar__default extends Component {
+  constructor(props) {
+    super(props);
+    let photoURL = '';
+    this.state = {
+      options: [{
+        id: 'text1',
+        text: 'text1',
+        photoURL
+      }, {
+        id: 'text2',
+        text: 'text2',
+        photoURL
+      }, {
+        id: 'text3',
+        text: 'text3',
+        photoURL
+      }, {
+        id: 'text4',
+        text: 'text4',
+        photoURL
+      }, {
+        id: 'text5',
+        text: 'text5'
+      }, {
+        id: 'text6',
+        text: 'text6',
+        photoURL
+      }, {
+        id: 'text7',
+        text: 'text7',
+        photoURL
+      }, {
+        id: 'text8',
+        text: 'text8',
+        photoURL
+      }, {
+        id: 'text9',
+        text: 'text9',
+        photoURL
+      }, {
+        id: 'text10',
+        text: 'text10',
+        photoURL
+      }],
+      selectedOptions: ['text1', 'text2', 'text3', 'text4', 'text5']
+    };
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect(options) {
+    this.setState({
+      selectedOptions: options
+    });
+  }
+
+  render() {
+    let {
+      selectedOptions,
+      options
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement("div", null, "Default"), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
+      valueField: "id",
+      textField: "text",
+      imageField: "photoURL",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      }
+    }), /*#__PURE__*/React.createElement("div", null, "Disabled"), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
+      isDisabled: true,
+      valueField: "id",
+      textField: "text",
+      imageField: "photoURL",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      emptyMessage: "No Options",
+      noMoreOptionsMessage: "No More Options",
+      searchEmptyMessage: "No Matches Found"
+    }), /*#__PURE__*/React.createElement("div", null, "Readonly"), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
+      isReadOnly: true,
+      valueField: "id",
+      textField: "text",
+      imageField: "photoURL",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      emptyMessage: "No Options",
+      noMoreOptionsMessage: "No More Options",
+      searchEmptyMessage: "No Matches Found"
+    }), /*#__PURE__*/React.createElement(MultiSelectWithAvatar, {
+      isReadOnly: true,
+      valueField: "id",
+      textField: "text",
+      imageField: "photoURL",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      emptyMessage: "No Options",
+      noMoreOptionsMessage: "No More Options",
+      searchEmptyMessage: "No Matches Found",
+      needBorder: false,
+      disableAction: true
+    })));
+  }
+
+}
+
+if (false) {
+  MultiSelectWithAvatar__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}

package/es/MultiSelect/docs/MultiSelect__default.docs.js

@@ -0,0 +1,161 @@
+/**** Libraries ****/
+import React, { Component } from 'react';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+import { Container } from '../../Layout';
+import Icon from '@zohodesk/icons/lib/Icon';
+/**** Components ****/
+
+import MultiSelect from '../MultiSelect';
+export default class MultiSelect__default extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      options: ['text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9', 'text10'],
+      selectedOptions: ['text1', 'text2', 'text3']
+    };
+    this.handleSelect = this.handleSelect.bind(this);
+    this.getFooter = this.getFooter.bind(this);
+  }
+
+  handleSelect(options) {
+    this.setState({
+      selectedOptions: options
+    });
+  }
+
+  getFooter() {
+    return /*#__PURE__*/React.createElement("div", null, "Custom Footer");
+  }
+
+  render() {
+    const {
+      selectedOptions,
+      options
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement("div", null, "Default"), /*#__PURE__*/React.createElement(MultiSelect, {
+      valueField: "id",
+      textField: "text",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      }
+    }), /*#__PURE__*/React.createElement("div", null, "Disabled"), /*#__PURE__*/React.createElement(MultiSelect, {
+      isDisabled: true,
+      valueField: "id",
+      textField: "text",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      emptyMessage: "No Options",
+      noMoreOptionsMessage: "No More Options",
+      searchEmptyMessage: "No Matches Found"
+    }), /*#__PURE__*/React.createElement("div", null, "Readonly"), /*#__PURE__*/React.createElement(MultiSelect, {
+      isReadOnly: true,
+      valueField: "id",
+      textField: "text",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      emptyMessage: "No Options",
+      noMoreOptionsMessage: "No More Options",
+      searchEmptyMessage: "No Matches Found"
+    }), /*#__PURE__*/React.createElement("div", null, "disableAction"), /*#__PURE__*/React.createElement(MultiSelect, {
+      valueField: "id",
+      textField: "text",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      emptyMessage: "No Options",
+      noMoreOptionsMessage: "No More Options",
+      searchEmptyMessage: "No Matches Found",
+      needBorder: false,
+      disableAction: true
+    }), /*#__PURE__*/React.createElement("div", null, "Children"), /*#__PURE__*/React.createElement(MultiSelect, {
+      valueField: "id",
+      textField: "text",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      }
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both",
+      style: {
+        marginRight: '15px'
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-SE-setpracket",
+      size: "18"
+    }))), /*#__PURE__*/React.createElement("div", null, "Disabled Options"), /*#__PURE__*/React.createElement(MultiSelect, {
+      valueField: "id",
+      textField: "text",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      },
+      disabledOptions: ['text2', 'text3']
+    }), /*#__PURE__*/React.createElement("div", null, "Custom Footer"), /*#__PURE__*/React.createElement(MultiSelect, {
+      valueField: "id",
+      textField: "text",
+      options: options,
+      onChange: this.handleSelect,
+      selectedOptions: selectedOptions,
+      needSelectAll: true,
+      selectAllText: "Select All",
+      placeHolder: "Select Text",
+      i18nKeys: {
+        clearText: 'Clear Selected Items',
+        loadingText: 'Fetching...',
+        emptyText: 'No Options .',
+        noMoreText: 'No More Options .',
+        searchEmptyText: 'No Matches Found .'
+      },
+      getFooter: this.getFooter
+    })));
+  }
+
+}
+
+if (false) {
+  MultiSelect__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}

package/es/PopOver/docs/PopOver__default.docs.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver';
+import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
+export default class PopOver__default extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement("span", {
+      style: {
+        width: '200px',
+        display: 'inline-block'
+      },
+      className: 'popParent'
+    }, /*#__PURE__*/React.createElement(PopOver, {
+      isArrow: true,
+      isAnimate: true,
+      boxPosition: "bottomRight"
+    }, /*#__PURE__*/React.createElement(PopOverTarget, null, " Click Me! "), /*#__PURE__*/React.createElement(PopOverContainer, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '20px'
+      }
+    }, "Content"), ' ')));
+  }
+
+}
+
+if (false) {
+  PopOver__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' ',
+    external: true
+  };
+}

package/es/Provider/docs/Provider_Id__Class.docs.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { getUniqueId, setGlobalIdPrefix } from '../IdProvider';
+export default class Provider_Id__Class extends React.Component {
+  constructor(props) {
+    super(props);
+    setGlobalIdPrefix('zohodesk');
+    this.getNextId = getUniqueId(this);
+  }
+
+  render() {
+    let id = this.getNextId();
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      id: id
+    }, "Id ", id), /*#__PURE__*/React.createElement("div", {
+      id: id
+    }, "Id ", id));
+  }
+
+}
+
+if (false) {
+  Provider_Id__Class.docs = {
+    componentGroup: 'Provider',
+    folderName: 'Functions'
+  };
+} // setGlobalIdPrefix  => to set prefix for all id
+// removeGlobalIdPrefix => remove prfeix
+// useUniqueId => for function components
+// getUniqueId => for class components

package/es/Provider/docs/Provider_Id__Function.docs.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useUniqueId } from '../IdProvider';
+export default function Provider_Id__Function() {
+  let getNextId = useUniqueId();
+  let id = getNextId();
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    id: id
+  }, "Id ", id), /*#__PURE__*/React.createElement("div", {
+    id: id
+  }, "Id ", id));
+}
+
+if (false) {
+  Provider_Id__Function.docs = {
+    componentGroup: 'Provider',
+    folderName: 'Functions'
+  };
+}

package/es/Provider/docs/Provider_Zindex__Class.docs.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { getZIndex, setInitialZIndex } from '../ZindexProvider';
+export default class Provider_Zindex__Class extends React.Component {
+  constructor(props) {
+    super(props);
+    setInitialZIndex('1000');
+    this.getNextId = getZIndex(this);
+  }
+
+  render() {
+    let zIndex = this.getNextId();
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        zIndex: `${zIndex}`
+      }
+    }, "Zindex   ", zIndex), /*#__PURE__*/React.createElement("div", {
+      style: {
+        zIndex: `${zIndex}`
+      }
+    }, "Zindex  ", zIndex));
+  }
+
+}
+
+if (false) {
+  Provider_Zindex__Class.docs = {
+    componentGroup: 'Provider',
+    folderName: 'Functions'
+  };
+} // setGlobalZIndexPrefix
+// useZIndex
+// getZIndex

package/es/Provider/docs/Provider_Zindex__Function.docs.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useZIndex } from '../ZindexProvider';
+export default function Provider_Zindex__Function() {
+  let getNextId = useZIndex();
+  let Zindex = getNextId();
+  let Zindex2 = getNextId();
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      'zIndex': `${Zindex}`
+    }
+  }, "Zindex ", Zindex), /*#__PURE__*/React.createElement("div", {
+    style: {
+      'zIndex': `${Zindex2}`
+    }
+  }, "Zindex ", Zindex2));
+}
+
+if (false) {
+  Provider_Zindex__Function.docs = {
+    componentGroup: 'Provider',
+    folderName: 'Functions'
+  };
+}

package/es/Radio/docs/Radio__custom.docs.js

@@ -0,0 +1,245 @@
+import React, { Component } from 'react';
+import Radio from '../Radio';
+import styles from '../../common/docStyle.module.css';
+export default class Radio__custom extends Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+    this.state = {
+      checked: false
+    };
+  }
+
+  onChange() {
+    this.setState({
+      checked: !this.state.checked
+    });
+  }
+
+  render() {
+    let style = {
+      margin: '10px'
+    },
+        titleStyle = {
+      fontSize: '13px',
+      padding: '15px 0',
+      textTransform: 'upperCase',
+      borderTop: '1px solid #e3e6eb'
+    },
+        spanStyle = {
+      display: 'inline-block',
+      margin: '10px 10px 10px 0'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px 0'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Default Radio Button"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      onChange: this.onChange,
+      checked: this.state.checked
+    })))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Disabled Type Radio Button"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      disabled: true
+    })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      disabled: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Label With Radio Button"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "text1",
+      value: "1",
+      name: "category",
+      text: "Check With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "test2",
+      checked: true,
+      active: true,
+      value: "2",
+      name: "category",
+      text: "Checked Active With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.disabledLabel
+      },
+      id: "text3",
+      value: "1",
+      name: "name",
+      checked: true,
+      disabled: true,
+      text: "Disabled With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "test4",
+      value: "2",
+      name: "name",
+      isReadOnly: true,
+      text: "ReadOnly With Label"
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "text1",
+      value: "1",
+      name: "category",
+      text: "Check With Label",
+      palette: "danger"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "test2",
+      checked: true,
+      active: true,
+      value: "2",
+      name: "category",
+      palette: "danger",
+      text: "Checked Active With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radioDisabled,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.disabledLabel
+      },
+      id: "text3",
+      value: "1",
+      name: "name",
+      checked: true,
+      disabled: true,
+      palette: "danger",
+      text: "Disabled With Label"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      id: "test4",
+      value: "2",
+      name: "name",
+      isReadOnly: true,
+      palette: "danger",
+      text: "ReadOnly With Label"
+    })))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Size"), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      size: "small"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: titleStyle
+    }, "Palette"), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      text: "Primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: spanStyle
+    }, /*#__PURE__*/React.createElement(Radio, {
+      customClass: {
+        customRadio: styles.radio,
+        customRadioWrap: styles.radioWrap,
+        customLabel: styles.customLbl
+      },
+      checked: true,
+      palette: "danger",
+      text: "Danger"
+    }))));
+  }
+
+}
+
+if (false) {
+  Radio__custom.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide',
+    description: ' '
+  };
+}