@agilemotion/oui-react-js 1.2.7 → 1.2.9

package/dist/components/AlertTemplate.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AlertTemplate = exports.options = exports.AlertStyle = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const AlertStyle = {
+  backgroundColor: '#dc3545',
+  color: 'white',
+  padding: '10px',
+  textTransform: 'uppercase',
+  borderRadius: '3px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  boxShadow: 'rgba(0, 0, 0, 0.03) 0px 2px 2px 2px',
+  fontFamily: 'Arial',
+  width: '300px',
+  boxSizing: 'border-box',
+  margin: '30px'
+};
+exports.AlertStyle = AlertStyle;
+const alertButtonStyle = {
+  marginLeft: '20px',
+  border: 'none',
+  backgroundColor: 'transparent',
+  cursor: 'pointer',
+  color: 'rgb(255, 255, 255)'
+};
+const options = {
+  position: 'top center',
+  timeout: 0,
+  offset: '30px',
+  transition: 'scale',
+  containerStyle: {
+    marginTop: '260px'
+  }
+};
+exports.options = options;
+
+const AlertTemplate = ({
+  options,
+  message,
+  close
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  style: AlertStyle
+}, /*#__PURE__*/_react.default.createElement("span", {
+  className: "fa fa-exclamation-circle fa-2x"
+}), /*#__PURE__*/_react.default.createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "#FF0040",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  style: {
+    marginRight: '20px',
+    minWidth: '24px'
+  }
+}), options.type === 'info' && '', options.type === 'success' && '', options.type === 'error' && '', message, /*#__PURE__*/_react.default.createElement("button", {
+  style: alertButtonStyle,
+  onClick: close
+}, "X"));
+
+exports.AlertTemplate = AlertTemplate;
+var _default = AlertTemplate;
+exports.default = _default;

package/dist/components/Button.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _Observable = _interopRequireDefault(require("../event/Observable"));
+
+var _Utils = _interopRequireDefault(require("../Utils"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Event = _interopRequireDefault(require("../event/Event"));
+
+var _EventType = _interopRequireDefault(require("../event/EventType"));
+
+var _ApplicationContext = _interopRequireDefault(require("../ApplicationContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+const useStyles = (0, _styles.makeStyles)(theme => ({
+  root: {
+    display: 'flex'
+  },
+  paper: {
+    marginRight: theme.spacing(2)
+  },
+  wrapper: {
+    maxHeight: "32px",
+    zIndex: 2
+  }
+}));
+
+const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const classes = useStyles();
+
+  const _React$useState = _react.default.useState(true),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        initializing = _React$useState2[0],
+        setInitializing = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(false),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        disabled = _React$useState4[0],
+        setDisabled = _React$useState4[1];
+
+  let color = _Utils.default.getComponentAttribute(props.config, 'color', 'default');
+
+  let width = !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['width']) ? parseInt(props.config.attributes['width'].toString().replace('px', '')) : null;
+  let height = !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['height']) ? parseInt(props.config.attributes['height'].toString().replace('px', '')) : null;
+
+  let label = _Utils.default.getComponentAttribute(props.config, 'label', null);
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
+
+    if (initializing) {
+      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+
+      _Observable.default.addSystemSubscriptions(parsedConfig);
+
+      setInitializing(false);
+    }
+  });
+
+  _react.default.useEffect(() => {
+    if (!initializing) {
+      props.loadCompleteHandler(props.config.id);
+    }
+  }, [initializing]);
+
+  const handleClick = e => {
+    _ApplicationContext.default.enableFormMarkers(true);
+
+    let event = new _Event.default(props.handle, props.viewId);
+
+    _Observable.default.fireEvent(_EventType.default.CLICK, event);
+  };
+
+  const api = () => {
+    return {
+      get id() {
+        return props.config.id;
+      },
+
+      getChildren: () => {
+        return [];
+      },
+
+      set disabled(disabled) {
+        setDisabled(disabled);
+      },
+
+      refresh() {
+        let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+        setDisabled(_Utils.default.evaluateBooleanExpression(parsedConfig.disabled, parsedConfig.id));
+      }
+
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !initializing ? /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.root,
+    style: {
+      width: width
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.wrapper
+  }, !_Utils.default.isNull(props.config.icon) && !_Utils.default.isNull(label) ? /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: color === 'secondary' || color === 'primary' ? 'contained' : 'text',
+    size: "large",
+    color: !_Utils.default.isNull(color) ? color : null,
+    ref: ref,
+    style: {
+      width: width,
+      height: height
+    },
+    disabled: disabled,
+    onClick: handleClick,
+    startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      id: props.config.icon
+    })
+  }, label) : !_Utils.default.isNull(props.config.icon) ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    "aria-controls": "menu-list-grow",
+    ref: ref,
+    disabled: disabled,
+    style: {
+      width: width
+    },
+    "aria-haspopup": "true",
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    id: props.config.icon
+  })) : /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: color === 'secondary' || color === 'primary' ? 'contained' : 'text',
+    "aria-controls": "menu-list-grow",
+    color: color,
+    ref: ref,
+    style: {
+      width: width,
+      height: height
+    },
+    disabled: disabled,
+    onClick: handleClick,
+    "aria-haspopup": "true"
+  }, label))) : null);
+});
+
+var _default = Button;
+exports.default = _default;

package/dist/components/ConfirmationDialog.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ConfirmationDialog;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
+
+var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ConfirmationDialog(props) {
+  const handler = result => {
+    props.handler(result);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    open: props.open,
+    "aria-labelledby": "alert-dialog-title",
+    "aria-describedby": "alert-dialog-description"
+  }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
+    id: "alert-dialog-title"
+  }, props.title), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, /*#__PURE__*/_react.default.createElement(_DialogContentText.default, {
+    id: "alert-dialog-description"
+  }, props.message)), /*#__PURE__*/_react.default.createElement(_DialogActions.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => {
+      handler(false);
+    },
+    color: "primary"
+  }, "No"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => {
+      handler(true);
+    },
+    color: "primary",
+    autoFocus: true
+  }, "Yes")));
+}

package/dist/components/DataGrid.css

@@ -0,0 +1,182 @@
+.ouiTable thead th {
+    border: none !important;
+    font-weight: 500;
+}
+
+.ouiTable thead tr {
+    border-bottom: 1px solid #e2e2e2;
+}
+
+table.responsive-table {
+    display: table;
+    /* required for table-layout to be used (not normally necessary; included for completeness) */
+    table-layout: fixed;
+    /* this keeps your columns with fixed with exactly the right width */
+    width: 100% !important;
+    /* table must have width set for fixed layout to work as expected */
+    height: 100%;
+}
+
+table.responsive-table thead {
+        position: fixed;
+        top: 50px;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 50px;
+        line-height: 3em;
+        background: #eee;
+        table-layout: fixed;
+        display: table;
+    }
+
+    table.responsive-table th {
+        background: #eee;
+    }
+
+    table.responsive-table td {
+        line-height: 2em;
+    }
+
+    table.responsive-table tr > td,
+    table.responsive-table th {
+        text-align: left;
+    }
+
+.ouiTable td,.tableCellContentContainer td {
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+    min-width: 32px !important;
+}
+
+.selectCell {
+    white-space: normal !important;
+    text-overflow: unset !important;
+}
+
+.selectCell span{
+    padding: 0 !important;
+}
+
+.ouiTable td {
+    padding: 16px 0 12px 8px;
+    height: 54px;
+    border-top: none;
+    display: table-cell;
+    font-size: 12px;
+    text-align: left;
+    font-weight: 500;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    border-bottom: 1px solid #e2e2e2;
+    letter-spacing: 0.01071em;
+    vertical-align: inherit;
+    color: rgba(0, 0, 0, 0.87);
+}
+
+.cellError, .editCellError {
+    border: 1px solid red !important;
+    border-radius: 4px;
+}
+
+.editCell, .editCell td,
+.editCellError, .editCellError td {
+    padding: 0 4px 0 4px !important;
+}
+
+.ouiTable td:first-child, .ouiTable th:first-child {
+    padding-left: 32px;
+}
+
+.ouiTable th:last-child, .ouiTable td:last-child {
+    padding-right: 32px;
+}
+
+.filterHead th {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+.transferListFilterWraper .row, .editCell .row {
+    margin-left: 0 !important;
+    margin-right: -8px !important;
+}
+
+.transferListFilterWraper, .filterWraper, .filterWraperBlank {
+    height: 54px;
+}
+
+.transferListFilterWraper table tr, .filterWraper table tr {
+    border-top: none !important;
+    border-bottom: none !important;
+}
+
+.transferListFilterWraper table td, .filterWraper table td {
+    height: 54px;
+    padding: 0 !important;
+    border-top: none !important;
+    border-bottom: none !important;
+}
+
+.filterWraper .col {
+    padding-right: 0 !important;
+}
+
+.filterWraperBlank {
+    padding-right: 4px !important;
+    text-align: right;
+}
+
+.filterWraperSearchIcon{
+    padding-right: 4px !important;
+    width: 20px;
+}
+
+.columnFilterEditor {
+}
+
+.ouiTable th {
+    color: rgba(0, 0, 0, 0.54);
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1.3125rem;
+    padding: 12px 0 12px 8px;
+}
+
+.ouiTable {
+    table-layout: fixed;
+}
+
+.ouiTable-scrollbar {
+    position: relative;
+    overflow: auto;
+}
+
+.tableCellContentContainer:hover {
+    background-color: transparent !important;
+}
+
+.tableCellContentContainer {
+    width: 100%;
+    background-color: transparent !important;
+}
+
+.tableCellContentContainer td {
+    padding: 0 4px 0 0 !important;
+    height: auto !important;
+    border: none !important;
+    background-color: transparent !important;
+}
+
+.tableCellContentContainer td:hover {
+    background-color: transparent !important;
+}
+
+.tableCellContentContainer td:first-child {
+    padding-left: 0 !important;
+}
+
+@media screen and (max-width: 40em) {
+
+
+}