versacall-core-library-react 2.0.70 → 2.0.71

package/dist/components/CoreTable/CoreTableChips.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Chip = _interopRequireDefault(require("@material-ui/core/Chip"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function CoreTableToolBarChips(props) {
+  const {
+    activeFilters,
+    onDelete
+  } = props;
+  const filterKeys = Object.keys(activeFilters);
+  const chips = [];
+  filterKeys.forEach(key => {
+    chips.push({
+      id: key,
+      val: activeFilters[key]
+    });
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline'
+    }
+  }, chips.map((chip, i) => {
+    if (chip.val.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_Chip.default, {
+        color: "primary",
+        key: String(i),
+        style: {
+          marginRight: '.5em'
+        },
+        onDelete: () => onDelete(chip.id),
+        label: "".concat(chip.id.toUpperCase(), ": ").concat(chip.val)
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }));
+}
+CoreTableToolBarChips.propTypes = {
+  onDelete: _propTypes.default.func.isRequired,
+  activeFilters: _propTypes.default.objectOf(_propTypes.default.string)
+};
+CoreTableToolBarChips.defaultProps = {
+  activeFilters: {}
+};
+var _default = exports.default = CoreTableToolBarChips;

package/dist/components/CoreTable/CoreTableHead.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _DetailsTwoTone = _interopRequireDefault(require("@material-ui/icons/DetailsTwoTone"));
+var _TableSortLabel = _interopRequireDefault(require("@material-ui/core/TableSortLabel"));
+var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+var _styles = require("@material-ui/core/styles");
+var _Details = _interopRequireDefault(require("@material-ui/icons/Details"));
+var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));
+var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));
+var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
+var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
+var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
+var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const styles = () => ({
+  paperStyle: {
+    margin: '0px',
+    padding: '0px',
+    backgroundColor: 'lightgrey',
+    maxHeight: '2em',
+    overflow: 'hidden',
+    maxWidth: '14em'
+  }
+});
+const buttonStyle = {
+  margin: '0px',
+  padding: '0px',
+  border: '0px',
+  backgroundColor: 'lightgrey'
+};
+class CoreTableHead extends _react.Component {
+  constructor() {
+    super();
+    this.state = {};
+  }
+  componentDidMount() {
+    const displayList = {};
+    this.props.columns.forEach(column => {
+      displayList[column.id] = null;
+    });
+    this.setState({
+      displayList: displayList
+    });
+  }
+  toggleActive(columnID, e) {
+    if (this.state[columnID] === null) {
+      this.setState({
+        [columnID]: e.currentTarget
+      });
+    } else {
+      this.setState({
+        [columnID]: null
+      });
+    }
+  }
+  render() {
+    const {
+      sort,
+      columns,
+      rowCount,
+      selected,
+      onSelectAll,
+      onSort,
+      order,
+      orderBy,
+      multiSelect,
+      activeFilters,
+      classes
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_TableHead.default, null, /*#__PURE__*/_react.default.createElement(_TableRow.default, null, multiSelect && /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+      padding: "checkbox"
+    }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+      color: "primary",
+      onChange: onSelectAll,
+      checked: selected > 0 && selected === rowCount,
+      indeterminate: selected > 0 && selected < rowCount
+    })), columns.map(column => {
+      let cell;
+      if (column.customHeader) {
+        cell = column.customHeader({
+          column: column
+        });
+      } else if (column.filter && activeFilters.hasOwnProperty(column.id)) {
+        cell = /*#__PURE__*/_react.default.createElement(_TableSortLabel.default, {
+          active: orderBy === column.id,
+          direction: order,
+          onClick: () => onSort(column.id)
+        }, /*#__PURE__*/_react.default.createElement("b", null, column.label ? column.label : ''), /*#__PURE__*/_react.default.createElement("div", {
+          id: "".concat(column.id, "menu")
+        }, activeFilters[column.id].length > 0 ? /*#__PURE__*/_react.default.createElement(_DetailsTwoTone.default, {
+          onClick: event => {
+            event.stopPropagation();
+            this.toggleActive(column.id, event);
+          }
+        }) : /*#__PURE__*/_react.default.createElement(_Details.default, {
+          onClick: event => {
+            event.stopPropagation();
+            this.toggleActive(column.id, event);
+          }
+        })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Menu.default, {
+          id: column.id,
+          anchorEl: this.state[column.id],
+          open: Boolean(this.state[column.id]),
+          classes: {
+            paper: classes.paperStyle
+          },
+          onClose: event => {
+            event.stopPropagation();
+            this.toggleActive(column.id, event);
+          },
+          disableAutoFocusItem: true
+        }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+          margin: "none",
+          name: column.id,
+          id: "".concat(column.id, "input"),
+          value: activeFilters[column.id],
+          onChange: target => this.props.updateFilter(target),
+          onClick: event => event.stopPropagation(),
+          endAdornment: /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+            position: "start"
+          }, /*#__PURE__*/_react.default.createElement("button", {
+            style: buttonStyle,
+            type: "button"
+          }, /*#__PURE__*/_react.default.createElement(_Clear.default, {
+            onClick: e => {
+              e.stopPropagation();
+              this.toggleActive(column.id, e);
+            }
+          }))),
+          disableUnderline: true
+        }))));
+      } else {
+        cell = /*#__PURE__*/_react.default.createElement(_TableSortLabel.default, {
+          direction: order,
+          active: orderBy === column.id,
+          onClick: () => sort && column.label && column.label.length > 0 && onSort(column.id)
+        }, /*#__PURE__*/_react.default.createElement("b", null, column.label ? column.label : ''));
+      }
+      return /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+        key: column.id,
+        style: column.style,
+        padding: column.disablePadding ? 'none' : 'default',
+        sortDirection: orderBy === column.id ? order : false
+      }, cell);
+    })));
+  }
+}
+CoreTableHead.propTypes = {
+  sort: _propTypes.default.bool,
+  multiSelect: _propTypes.default.bool,
+  onSort: _propTypes.default.func.isRequired,
+  order: _propTypes.default.string.isRequired,
+  orderBy: _propTypes.default.string.isRequired,
+  classes: _propTypes.default.shape().isRequired,
+  rowCount: _propTypes.default.number.isRequired,
+  selected: _propTypes.default.number.isRequired,
+  onSelectAll: _propTypes.default.func.isRequired,
+  updateFilter: _propTypes.default.func.isRequired,
+  activeFilters: _propTypes.default.objectOf(_propTypes.default.object),
+  columns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
+};
+CoreTableHead.defaultProps = {
+  sort: true,
+  activeFilters: {},
+  multiSelect: false
+};
+var _default = exports.default = (0, _styles.withStyles)(styles)(CoreTableHead);

package/dist/components/CoreTable/CoreTableToolbar.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _styles = require("@material-ui/core/styles");
+var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));
+var _reactIntl = require("react-intl");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CoreTableChips = _interopRequireDefault(require("./CoreTableChips"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const styles = theme => ({
+  title: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    justifyContent: 'space-between'
+  },
+  icons: {
+    display: 'flex',
+    flexWrap: 'nowrap'
+  },
+  normal: {
+    background: 'lightgray',
+    color: 'black'
+  },
+  highlight: {
+    background: theme.palette.secondary.light,
+    color: theme.palette.secondary.contrastText
+  }
+});
+function CoreTableToolbar(props) {
+  const {
+    title,
+    selected,
+    customToolbar,
+    activeFilters,
+    handleChipDelete,
+    icons,
+    classes
+  } = props;
+  const toolBarConfig = () => {
+    if (customToolbar) {
+      return customToolbar({
+        title: title,
+        selected: selected,
+        classes: classes
+      });
+    }
+    if (Object.keys(activeFilters).length > 0) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.title
+      }, selected.length > 0 || !title ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        color: "inherit"
+      }, "".concat(selected.length, " "), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+        id: "__selected"
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.icon
+      }, /*#__PURE__*/_react.default.createElement(_CoreTableChips.default, {
+        activeFilters: activeFilters,
+        onDelete: id => handleChipDelete(id)
+      }), icons)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        color: "inherit",
+        variant: "h6",
+        id: "tableTitle"
+      }, title), /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.icon
+      }, /*#__PURE__*/_react.default.createElement(_CoreTableChips.default, {
+        activeFilters: activeFilters,
+        onDelete: id => handleChipDelete(id)
+      }), icons)));
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.title
+    }, selected.length > 0 || !title ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "inherit"
+    }, "".concat(selected.length, " "), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "__selected"
+    })), icons) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "inherit",
+      variant: "h6",
+      id: "tableTitle"
+    }, title), icons));
+  };
+  return /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    variant: "dense",
+    className: selected.length > 0 ? classes.highlight : classes.normal
+  }, toolBarConfig());
+}
+CoreTableToolbar.propTypes = {
+  icons: _propTypes.default.node,
+  title: _propTypes.default.string,
+  customToolbar: _propTypes.default.func,
+  classes: _propTypes.default.shape().isRequired,
+  handleChipDelete: _propTypes.default.func.isRequired,
+  activeFilters: _propTypes.default.objectOf(_propTypes.default.string),
+  selected: _propTypes.default.arrayOf(_propTypes.default.string).isRequired
+};
+CoreTableToolbar.defaultProps = {
+  icons: null,
+  title: null,
+  activeFilters: {},
+  customToolbar: null
+};
+var _default = exports.default = (0, _styles.withStyles)(styles)(CoreTableToolbar);

package/dist/components/CoreTable/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CoreTable.default;
+  }
+});
+var _CoreTable = _interopRequireDefault(require("./CoreTable"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/CoreTable/readMe.md

@@ -0,0 +1,79 @@
+# Core Table
+
+##_Core Table_ should be used for all tables in the application to give them a similar look and suite of features
+
+###_Core Table_ is made of three components:
+
+1. CoreTable
+   - Displays all the data
+2. CoreTableHead
+   - Contains column headers that allows you to order the data
+   - Contains the _filter_ icons, allowing you to filter data
+3. CoreTableToolbar
+   - Contains the title of the Table and any icons
+   - If the table is being filtered, chips with the filter keywords appear here
+   - The Toolbar can also display data on if/how many items are selected
+
+_CoreTable_ takes in the following props:
+
+1. id
+
+   - Type: _String_
+   - Required: **Yes**
+   - Used for identifying table
+
+2. title
+
+   - Type: _String_
+   - Required: **Yes**
+   - Displays in Toolbar
+
+3. columns
+
+   - Type: _Array_
+   - Required: **Yes**
+   - Used to determine header titles as well as column info
+   - An array of objects, one object per column you want in the table, each object should have:
+
+     1. id: _String_, this needs to match the id for each piece of data you pass in inside of the **data** prop. The ids are used to match each rows data to the correct column
+
+     2. align: _String_, use one of: _left, right, center_ to determine how the contents of the column should align
+     3. label: _String_, will be the column header
+     4. filter: _Boolean_, use to determine if you want this column to have a filter or not **(you can also use 'text' instead of a bool, we hope to add different filter types at some point)**
+
+   - **Custom** you can also pass a custom cell to the column through something like: `javascript { id: 'custom', customCell: custom => this.customCell(custom) }` and then pass a function that inserts an edit icon into every row
+
+4. data
+
+   - Type: _Array_
+   - Required: **Yes**
+   - This is an array of objects that will get displayed in the table, think of each object as a "row", each piece of data will be sorted by key, so if a key is 'time' it will match with the column that has an id of 'time'
+
+5. multiSelect
+
+   - Type: _Boolean_
+   - Required: No
+   - This determines if the table has multi-select properties, defaults to false
+
+6. hover
+
+   - Type: _Boolean_
+   - Required: No
+   - Determines if rows highlight on hover, defaults to false
+
+7. icons
+
+   - Type: _Component_
+   - Required: No
+   - Feed this a component for it to appear in the left of the toolbar, must be one parent, unlimited children. Defaults to an empty `<span/>`
+
+8. customToolbar
+
+   - Type: _Function_
+   - Required: No
+   - Similar to customeCell, you can pass your own toolbar with `customToolbar: custom => this.customToolbar(custom)`, note that this replaces the defualt toolbar and all it's functionality
+
+9. customHeader
+   - Type: _Function_
+   - Required: No
+   - Similar to customeCell, you can pass your own header with `customHeader: custom => this.customHeader(custom)`, note that this replaces the defualt header and all it's functionality