@agilemotion/oui-react-js 1.3.0 → 1.3.1

package/dist/components/signatures/SignatureInputProps.js

@@ -0,0 +1,336 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SigPropsLookupField = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+
+var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _core = require("@material-ui/core");
+
+var _SignatorySearch = _interopRequireDefault(require("./SignatorySearch"));
+
+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 isNull = val => {
+  return val === null || typeof val === 'undefined';
+};
+
+const useStyles = (0, _core.makeStyles)(theme => ({
+  button: {
+    width: "288px",
+    height: "40px",
+    backgroundColor: "#e1e1e1",
+    marginTop: "4px",
+    marginBottom: "4px",
+    textAlign: "center",
+    padding: "28px 0",
+    borderRadius: "4px"
+  }
+}));
+
+const SigPropsLookupField = /*#__PURE__*/_react.default.forwardRef(props => {
+  const _React$useState = _react.default.useState(null),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        currentSelection = _React$useState2[0],
+        setCurrentSelection = _React$useState2[1];
+
+  const _React$useState3 = _react.default.useState(props.value),
+        _React$useState4 = _slicedToArray(_React$useState3, 2),
+        value = _React$useState4[0],
+        setValue = _React$useState4[1];
+
+  const _React$useState5 = _react.default.useState(false),
+        _React$useState6 = _slicedToArray(_React$useState5, 2),
+        open = _React$useState6[0],
+        setOpen = _React$useState6[1];
+
+  _react.default.useEffect(() => {
+    setValue(props.value);
+  }, [props.value]);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const setSelectionAsValue = () => {
+    currentSelection.toString = () => {
+      return currentSelection.map['name'];
+    };
+
+    setValue(currentSelection);
+    props.valueChangeHandler('signatory', currentSelection);
+    handleClose();
+  };
+
+  const openSearch = () => {
+    setOpen(true);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "w-100 lookup"
+  }, /*#__PURE__*/_react.default.createElement("table", {
+    className: "w-100"
+  }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+    width: "250px"
+  }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    style: {
+      width: '250px'
+    },
+    InputProps: {
+      readOnly: true
+    },
+    label: 'Signatory',
+    value: value || '',
+    error: props.error,
+    disabled: props.disabled,
+    required: true,
+    size: "small",
+    margin: "normal",
+    variant: "outlined"
+  })), /*#__PURE__*/_react.default.createElement("td", {
+    valign: "middle",
+    align: "left"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    onClick: openSearch,
+    disabled: props.disabled,
+    "aria-label": "search"
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null)))))), /*#__PURE__*/_react.default.createElement(_Dialog.default, {
+    open: open,
+    onClose: handleClose,
+    "aria-labelledby": "form-dialog-title",
+    fullWidth: true,
+    maxWidth: "md",
+    disableBackdropClick: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: "auto",
+      overflow: "auto"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SignatorySearch.default, {
+    signatoryUrl: props.signatoryUrl,
+    onLookupValueChange: selection => setCurrentSelection(selection[0])
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      paddingTop: "4px"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DialogActions.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleClose,
+    color: "primary"
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: setSelectionAsValue,
+    color: "primary",
+    disabled: currentSelection === null || typeof currentSelection === 'undefined'
+  }, "Ok"))))));
+});
+
+exports.SigPropsLookupField = SigPropsLookupField;
+
+const SignatureInputProps = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const classes = useStyles();
+
+  const _React$useState7 = _react.default.useState(props.value),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        value = _React$useState8[0],
+        setValue = _React$useState8[1];
+
+  const _React$useState9 = _react.default.useState(''),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        width = _React$useState10[0],
+        setWidth = _React$useState10[1];
+
+  const _React$useState11 = _react.default.useState(''),
+        _React$useState12 = _slicedToArray(_React$useState11, 2),
+        height = _React$useState12[0],
+        setHeight = _React$useState12[1];
+
+  const _React$useState13 = _react.default.useState(null),
+        _React$useState14 = _slicedToArray(_React$useState13, 2),
+        signatory = _React$useState14[0],
+        setSignatory = _React$useState14[1];
+
+  const _React$useState15 = _react.default.useState(true),
+        _React$useState16 = _slicedToArray(_React$useState15, 2),
+        widthValid = _React$useState16[0],
+        setWidthValid = _React$useState16[1];
+
+  const _React$useState17 = _react.default.useState(true),
+        _React$useState18 = _slicedToArray(_React$useState17, 2),
+        heightValid = _React$useState18[0],
+        setHeightValid = _React$useState18[1];
+
+  const _React$useState19 = _react.default.useState(isNull(props.value) || !isNull(props.value.signatory)),
+        _React$useState20 = _slicedToArray(_React$useState19, 2),
+        signatoryValid = _React$useState20[0],
+        setSignatoryValid = _React$useState20[1];
+
+  _react.default.useEffect(() => {
+    setValue(props.value);
+
+    if (props.value !== null) {
+      setWidth(props.value.width);
+      setHeight(props.value.height);
+      setSignatory(props.value.signatory);
+      setWidthValid(validateNumeric(props.value.width, 320));
+      setHeightValid(validateNumeric(props.value.height, 150));
+      setSignatoryValid(!isNull(props.value.signatory));
+    } else {
+      setWidth('');
+      setHeight('');
+      setSignatory(null);
+    }
+  }, [props.value]);
+
+  _react.default.useEffect(() => {
+    if (!isNull(value)) {
+      let widthCheck = validateNumeric(width, 320);
+      setWidthValid(widthCheck);
+      let heightCheck = validateNumeric(height, 150);
+      setHeightValid(heightCheck);
+      let signatoryCheck = !isNull(signatory);
+      setSignatoryValid(signatoryCheck);
+
+      if (!isNull(value) && widthCheck && heightCheck && signatoryCheck) {
+        save();
+      }
+    }
+  }, [width, height, signatory]);
+
+  const handleDelete = () => {
+    props.deleteHandler(value.id);
+    setWidth('');
+    setHeight('');
+    setSignatory(null);
+    setValue(null);
+    setSignatoryValid(true);
+  };
+
+  const handleApplyToAllPages = () => {
+    props.dublicateHandler(value.id);
+  };
+
+  const validateNumeric = (val, maxVal) => {
+    let regex = new RegExp('^[0-9]+$');
+    return !isNull(val) && regex.test(val) && parseFloat(val) <= maxVal;
+  };
+
+  const valueChangeHandler = (field, fieldValue) => {
+    if ('width' === field) {
+      setWidth(fieldValue);
+    } else if ('height' === field) {
+      setHeight(fieldValue);
+    } else if ('signatory' === field) {
+      setSignatory(fieldValue);
+    }
+  };
+
+  const save = () => {
+    let values = {
+      width: width,
+      height: height,
+      signatory: signatory,
+      type: value.type
+    };
+    props.saveHandler(value.id, values);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col",
+    style: {
+      fontSize: "16px",
+      marginTop: "16px"
+    }
+  }, "Properties"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col"
+  }, /*#__PURE__*/_react.default.createElement(SigPropsLookupField, {
+    value: signatory,
+    valueChangeHandler: valueChangeHandler,
+    disabled: value === null,
+    signatoryUrl: props.signatoryUrl,
+    error: !signatoryValid
+  }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    style: {
+      width: '288px'
+    },
+    label: 'Type',
+    value: value !== null ? value.type : '',
+    disabled: true,
+    size: "small",
+    margin: "dense",
+    variant: "outlined"
+  }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    style: {
+      width: '288px'
+    },
+    label: 'Width',
+    value: width,
+    disabled: value === null,
+    required: true,
+    error: !widthValid,
+    size: "small",
+    margin: "dense",
+    onChange: e => valueChangeHandler("width", e.target.value),
+    variant: "outlined"
+  }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
+    style: {
+      width: '288px'
+    },
+    label: 'Height',
+    value: height,
+    disabled: value === null,
+    required: true,
+    error: !heightValid,
+    size: "small",
+    margin: "dense",
+    onChange: e => valueChangeHandler("height", e.target.value),
+    variant: "outlined"
+  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    component: "span",
+    className: classes.button,
+    onClick: () => handleApplyToAllPages(),
+    disabled: value === null || !widthValid || !heightValid || !signatoryValid,
+    id: "signPaletteButton"
+  }, "DUPLICATE ITEM ON ALL PAGES"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "contained",
+    component: "span",
+    className: classes.button,
+    disabled: value === null,
+    onClick: () => handleDelete(),
+    id: "signPaletteButton"
+  }, "DELETE ITEM")));
+}));
+
+var _default = SignatureInputProps;
+exports.default = _default;