versacall-core-library-react 2.0.70 → 2.0.71

package/dist/components/CoreTextField/CoreTextField.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));
+var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+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); }
+class CoreTextField extends _react.Component {
+  constructor() {
+    super();
+    this.state = {
+      textMenuElement: null
+    };
+  }
+  updateValue(value) {
+    if (this.props.updateValue) {
+      this.props.updateValue(value);
+    }
+  }
+  selectOption(value) {
+    if (this.props.selectOption) {
+      this.props.selectOption(value);
+    }
+  }
+  render() {
+    const {
+      id,
+      label,
+      value,
+      fullWidth,
+      multiline,
+      options,
+      placeholder
+    } = this.props;
+    const {
+      textMenuElement
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      value: value,
+      label: label,
+      multiline: multiline,
+      placeholder: placeholder,
+      style: {
+        width: fullWidth ? '100%' : 'auto'
+      },
+      InputLabelProps: {
+        shrink: true
+      },
+      onChange: event => this.updateValue(event.target.value),
+      InputProps: {
+        endAdornment: options.length > 0 ? /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+          position: "end"
+        }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+          size: "small",
+          onClick: event => this.setState({
+            textMenuElement: event.currentTarget
+          })
+        }, /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, null))) : /*#__PURE__*/_react.default.createElement("span", null)
+      },
+      variant: "outlined"
+    }), textMenuElement && /*#__PURE__*/_react.default.createElement(_Menu.default, {
+      anchorEl: textMenuElement,
+      onClose: () => this.setState({
+        textMenuElement: null
+      }),
+      open: true
+    }, options.map((option, index) => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      key: String(index),
+      onClick: () => {
+        this.selectOption(option);
+        this.setState({
+          textMenuElement: null
+        });
+      }
+    }, id ? option[id] : option))));
+  }
+}
+CoreTextField.propTypes = {
+  id: _propTypes.default.string,
+  label: _propTypes.default.string,
+  value: _propTypes.default.string,
+  fullWidth: _propTypes.default.bool,
+  multiline: _propTypes.default.bool,
+  updateValue: _propTypes.default.func,
+  selectOption: _propTypes.default.func,
+  placeholder: _propTypes.default.string,
+  options: _propTypes.default.arrayOf(_propTypes.default.shape())
+};
+CoreTextField.defaultProps = {
+  id: '',
+  label: '',
+  value: '',
+  options: [],
+  placeholder: '',
+  fullWidth: false,
+  multiline: false,
+  updateValue: null,
+  selectOption: null
+};
+var _default = exports.default = CoreTextField;

package/dist/components/CoreTextField/index.js

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

package/dist/components/CoreTheme/CoreTheme.css

@@ -0,0 +1,9 @@
+html, body {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}

package/dist/components/CoreTheme/CoreTheme.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styles = require("@material-ui/core/styles");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+require("./CoreTheme.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// https://v4.mui.com/customization/default-theme/?expand-path=$.palette
+
+const theme = (0, _styles.createTheme)({
+  palette: {
+    primary: {
+      main: '#55b7dc'
+    },
+    secondary: {
+      main: '#496b78'
+    }
+    /* warning: {
+      light: '#ffb74d',
+      main: '#ff9800',
+      dark: '#f57c00',
+      contrastText: 'rgba(0, 0, 0, 0.87)',
+    }, */
+  },
+  typography: {
+    useNextVariants: true
+  }
+});
+const styles = () => ({
+  '@global': {
+    body: {
+      background: '#eff4f8',
+      margin: 0,
+      padding: 0,
+      fontFamily: 'sans-serif'
+    }
+  }
+});
+function CoreTheme(props) {
+  return /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+    theme: theme
+  }, props.children);
+}
+CoreTheme.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = exports.default = (0, _styles.withStyles)(styles)(CoreTheme);

package/dist/components/CoreTheme/README.md

@@ -0,0 +1,3 @@
+# CoreTheme
+
+This wrapper provides a custom [material-ui theme](https://material-ui.com/style/color/) to provide a consistent look and feel to the software.  Can be implemented directly but typically is added to an application through [CoreWrapper](../CoreWrapper).

package/dist/components/CoreTheme/index.js

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

package/dist/components/CoreTile/CoreTile.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Card = _interopRequireDefault(require("@material-ui/core/Card"));
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
+var _reactIntl = require("react-intl");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CoreTileToolbar = _interopRequireDefault(require("./CoreTileToolbar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const style = {
+  padding: {
+    padding: 16
+  }
+};
+function CoreTile(props) {
+  const {
+    id,
+    customToolbar,
+    toolBarIcons,
+    title,
+    data
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement(_CoreTileToolbar.default, {
+    title: title,
+    icons: toolBarIcons,
+    customToolbar: customToolbar
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: style.padding
+  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    spacing: 2,
+    container: true
+  }, data.map((row, index) => /*#__PURE__*/_react.default.createElement(_Grid.default, {
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3,
+    key: String(index),
+    item: true
+  }, props.customTile ? props.customTile({
+    id: id,
+    row: row
+  }) : /*#__PURE__*/_react.default.createElement(_Card.default, null, row[id]))))));
+}
+CoreTile.propTypes = {
+  title: _propTypes.default.string,
+  customTile: _propTypes.default.func,
+  toolBarIcons: _propTypes.default.node,
+  customToolbar: _propTypes.default.func,
+  id: _propTypes.default.string.isRequired,
+  data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
+};
+CoreTile.defaultProps = {
+  title: '',
+  customTile: null,
+  toolBarIcons: null,
+  customToolbar: null
+};
+var _default = exports.default = (0, _reactIntl.injectIntl)(CoreTile);

package/dist/components/CoreTile/CoreTileToolbar.js

@@ -0,0 +1,62 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const styles = theme => ({
+  title: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    justifyContent: 'space-between'
+  },
+  normal: {
+    background: 'lightgray',
+    color: 'black'
+  }
+});
+function CoreTileToolbar(props) {
+  const {
+    title,
+    customToolbar,
+    icons,
+    classes
+  } = props;
+  const toolBarConfig = () => {
+    if (customToolbar) {
+      return customToolbar({
+        title: title,
+        classes: classes
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.title
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      color: "inherit",
+      variant: "h6"
+    }, title), icons);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    variant: "dense",
+    className: classes.normal
+  }, toolBarConfig());
+}
+CoreTileToolbar.propTypes = {
+  icons: _propTypes.default.node,
+  title: _propTypes.default.string,
+  customToolbar: _propTypes.default.func,
+  classes: _propTypes.default.shape().isRequired
+};
+CoreTileToolbar.defaultProps = {
+  icons: null,
+  title: null,
+  customToolbar: null
+};
+var _default = exports.default = (0, _styles.withStyles)(styles)(CoreTileToolbar);

package/dist/components/CoreTile/index.js

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

package/dist/components/CoreTimerInput/CoreTimerInput.js

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable react/jsx-no-duplicate-props */ // !! had to disable duplicate props because InputProps (capital I) vs inputProps(lowercase) target different sub components
+const muiStyle = {
+  styleBox: {
+    position: 'relative',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderColor: 'rgba(0, 0, 0, 0.23)',
+    borderRadius: 4,
+    paddingTop: 11,
+    paddingBottom: 11,
+    paddingLeft: 10
+    // padding: 10,
+  },
+  label: {
+    fontSize: '1rem',
+    padding: 0,
+    paddingLeft: 6,
+    paddingRight: 6,
+    lineHeight: 1,
+    zIndex: 1,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    transformOrigin: 'top left',
+    transform: 'translate(8px, -6px) scale(0.75)',
+    backgroundColor: 'white',
+    color: 'rgba(0, 0, 0, 0.6)'
+  },
+  unitLabel: {
+    marginRight: 10,
+    color: 'rgba(0, 0, 0, 0.4)',
+    fontSize: 'smaller'
+  }
+};
+function CoreTimerInput(props) {
+  const {
+    label,
+    time,
+    handleUpdateTime,
+    showSeconds,
+    showMinutes,
+    showHours,
+    margin,
+    style,
+    disabled
+  } = props;
+  let hours = 0;
+  let min = 0;
+  let sec = time;
+  const getTime = () => {
+    hours = Math.floor(sec / 3600);
+    sec -= hours * 3600;
+    min = Math.floor(sec / 60);
+    sec -= min * 60;
+  };
+  // 1000
+  // divde by 360 get 2.777
+  // math.floor(2.7) = hours
+  // 1000 - hours * 360
+  // 280 divide by 60  get 4.6
+  // math.floor(4.6) = min
+  // 280 - min * 60 = seconds
+
+  getTime();
+  const handleChange = (value, type) => {
+    let newTime = time;
+    if (type === 'hours' && value < 24) {
+      newTime -= hours * 3600;
+      newTime += 3600 * value;
+    }
+    if (type === 'min' && value < 60) {
+      newTime -= min * 60;
+      newTime += 60 * value;
+    }
+    if (type === 'sec' && value < 60) {
+      newTime -= sec;
+      newTime += 1 * value; // added the 1 to convert value to int
+    }
+    return handleUpdateTime(Math.abs(newTime));
+  };
+  function formatValue(value) {
+    const str = value.toString();
+    if (str.length === 1) {
+      return "0".concat(str);
+    }
+    return str;
+  }
+  function getMarginStyle() {
+    if (margin === 'normal') {
+      return {
+        marginTop: 16,
+        marginBottom: 8
+      };
+    }
+    if (margin === 'dense') {
+      return {
+        paddingTop: 3,
+        paddingBottom: 3,
+        marginTop: 8,
+        marginBottom: 4
+      };
+    }
+    return {};
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: _objectSpread(_objectSpread(_objectSpread({}, muiStyle.styleBox), getMarginStyle()), style)
+  }, label && /*#__PURE__*/_react.default.createElement("span", {
+    style: muiStyle.label
+  }, label), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, showHours && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    style: muiStyle.unitLabel
+  }, "H"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flexGrow: 1,
+      paddingRight: 10
+    }
+  }, /*#__PURE__*/_react.default.createElement(_InputBase.default, {
+    id: "hoursInput",
+    value: formatValue(hours),
+    onChange: event => handleChange(event.target.value, 'hours'),
+    type: "number",
+    inputProps: {
+      min: '0'
+    },
+    disabled: disabled
+  }))), showMinutes && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    style: muiStyle.unitLabel
+  }, "M"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flexGrow: 1,
+      paddingRight: 10
+    }
+  }, /*#__PURE__*/_react.default.createElement(_InputBase.default, {
+    id: "minutesInput",
+    value: formatValue(min),
+    onChange: event => handleChange(event.target.value, 'min'),
+    type: "number",
+    inputProps: {
+      min: '0'
+    },
+    disabled: disabled
+  }))), showSeconds && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    style: muiStyle.unitLabel
+  }, "S"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flexGrow: 1,
+      paddingRight: 10
+    }
+  }, /*#__PURE__*/_react.default.createElement(_InputBase.default, {
+    id: "secondsInput",
+    value: formatValue(sec),
+    onChange: event => handleChange(event.target.value, 'sec'),
+    type: "number",
+    inputProps: {
+      min: '0'
+    },
+    disabled: disabled
+  })))));
+
+  // should take prop for time in seconds
+  // should take a handleChange function
+  // pull the event target value and then update the time with that * seconds
+  // might wanna move this coreLibrary after
+}
+CoreTimerInput.propTypes = {
+  label: _propTypes.default.string,
+  time: _propTypes.default.number.isRequired,
+  handleUpdateTime: _propTypes.default.func.isRequired,
+  showSeconds: _propTypes.default.bool,
+  showMinutes: _propTypes.default.bool,
+  showHours: _propTypes.default.bool,
+  margin: _propTypes.default.string,
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  disabled: _propTypes.default.bool
+};
+CoreTimerInput.defaultProps = {
+  label: null,
+  showSeconds: true,
+  showMinutes: true,
+  showHours: true,
+  margin: 'none',
+  style: {},
+  disabled: false
+};
+var _default = exports.default = CoreTimerInput;