@maif/react-forms 1.0.5 → 1.0.9

package/lib/inputs/CodeInput.d.ts

@@ -1,6 +1,9 @@
-export function CodeInput({ onChange, value, className, readOnly }: {
+export function CodeInput({ onChange, value, className, readOnly, theme, mode, ...props }: {
+    [x: string]: any;
     onChange: any;
     value: any;
     className?: string | undefined;
     readOnly: any;
+    theme?: string | undefined;
+    mode?: string | undefined;
 }): JSX.Element;

package/lib/inputs/CodeInput.js

@@ -9,45 +9,71 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactAce = _interopRequireDefault(require("react-ace"));
 
+var _extBeautify = _interopRequireDefault(require("ace-builds/src-noconflict/ext-beautify"));
+
 require("ace-builds/src-noconflict/mode-html");
 
 require("ace-builds/src-noconflict/mode-json");
 
 require("ace-builds/src-noconflict/mode-javascript");
 
+require("ace-builds/src-noconflict/mode-css");
+
 require("ace-builds/src-noconflict/mode-markdown");
 
 require("ace-builds/src-noconflict/theme-monokai");
 
+require("ace-builds/src-noconflict/theme-tomorrow");
+
 require("ace-builds/src-noconflict/ext-searchbox");
 
 require("ace-builds/src-noconflict/ext-language_tools");
 
+var _excluded = ["onChange", "value", "className", "readOnly", "theme", "mode"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var CodeInput = function CodeInput(_ref) {
   var onChange = _ref.onChange,
       value = _ref.value,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      readOnly = _ref.readOnly;
+      readOnly = _ref.readOnly,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'monokai' : _ref$theme,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? 'javascript' : _ref$mode,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   return /*#__PURE__*/_react["default"].createElement(_reactAce["default"], {
+    commands: _extBeautify["default"].commands,
     className: className,
     readOnly: readOnly,
     style: {
       zIndex: 0,
       isolation: 'isolate'
     },
-    mode: "javascript",
-    theme: "monokai",
+    mode: mode,
+    theme: theme,
     onChange: onChange,
     value: value,
     name: "scriptParam",
     editorProps: {
       $blockScrolling: true
     },
-    height: "300px",
-    width: "100%",
+    onLoad: function onLoad(editorInstance) {
+      editorInstance.container.style.resize = "both"; // mouseup = css resize end
+
+      document.addEventListener("mouseup", function (e) {
+        return editorInstance.resize();
+      });
+    },
+    height: props.height,
+    width: props.width,
     showGutter: true,
     tabSize: 2,
     highlightActiveLine: true,

package/lib/inputs/Collapse.d.ts

@@ -1,2 +1 @@
 export function Collapse(props: any): JSX.Element;
-export function Panel(props: any): JSX.Element;

package/lib/inputs/Collapse.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Panel = exports.Collapse = void 0;
+exports.Collapse = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -13,12 +13,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactFeather = require("react-feather");
 
+var _styleContext = require("../styleContext");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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."); }
@@ -37,68 +41,25 @@ var Collapse = function Collapse(props) {
       collapsed = _useState2[0],
       setCollapsed = _useState2[1];
 
+  var classes = (0, _styleContext.useCustomStyle)();
+
   var toggle = function toggle(e) {
     if (e && e.preventDefault) e.preventDefault();
     setCollapsed(!collapsed);
   };
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])('form__collapse', {
-      errored: props.errored
-    })
-  }, /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "form-group row"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-sm-10",
-    onClick: toggle,
-    style: {
-      cursor: 'pointer'
-    }
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("hr", {
+    className: (0, _classnames["default"])(_defineProperty({}, classes.collapse_error, props.errored))
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.cursor_pointer, " ").concat(classes.flex, " ").concat(classes.justifyContentBetween),
+    onClick: toggle
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "form__collapse__label",
-    style: {
-      fontWeight: 'bold',
-      marginTop: 7
-    }
+    className: (0, _classnames["default"])(classes.collapse_label, _defineProperty({}, classes.collapse_error, props.errored))
   }, props.label), /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
-    className: "btn btn-access-negative pull-right btn-sm",
-    style: {
-      "float": 'right'
-    },
-    onClick: toggle
-  }, !!collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.Eye, null), !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.EyeOff, null)))), !collapsed && props.children, props.lineEnd && /*#__PURE__*/_react["default"].createElement("hr", null));
-};
-
-exports.Collapse = Collapse;
-
-var Panel = function Panel(props) {
-  var _useState3 = (0, _react.useState)(props.initCollapsed || props.collapsed),
-      _useState4 = _slicedToArray(_useState3, 2),
-      collapsed = _useState4[0],
-      setCollapsed = _useState4[1];
-
-  var toggle = function toggle(e) {
-    if (e && e.preventDefault) e.preventDefault();
-    setCollapsed(!collapsed);
-  };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-xs-12 col-sm-3"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "panel panel-primary",
-    style: {
-      marginBottom: 0
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "panel-heading",
-    style: {
-      cursor: 'pointer'
-    },
+    className: (0, _classnames["default"])(classes.btn, _defineProperty({}, classes.collapse_error, props.errored)),
     onClick: toggle
-  }, props.title), !collapsed && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "panel-body"
-  }, props.children)));
+  }, !!collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.Eye, null), !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.EyeOff, null))), !collapsed && props.children, props.lineEnd && /*#__PURE__*/_react["default"].createElement("hr", null));
 };
 
-exports.Panel = Panel;
+exports.Collapse = Collapse;

package/lib/inputs/SelectInput.js

@@ -9,12 +9,20 @@ exports.SelectInput = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _creatable = _interopRequireDefault(require("react-select/creatable"));
 
 var _reactSelect = _interopRequireDefault(require("react-select"));
 
 var _Option = require("../Option");
 
+var _utils = require("../utils");
+
+var _ = require("..");
+
+var _styleContext = require("../styleContext");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -44,47 +52,64 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var valueToSelectOption = function valueToSelectOption(value) {
-  var isMulti = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var possibleValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var isMulti = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var maybeTransformer = arguments.length > 3 ? arguments[3] : undefined;
 
   if (value === null) {
     return null;
   }
 
   if (isMulti) {
-    return value.map(function (x) {
-      return valueToSelectOption(x);
-    });
+    return (0, _Option.option)(value).map(function (v) {
+      return v.map(function (x) {
+        return valueToSelectOption(x, possibleValues, false, maybeTransformer);
+      });
+    }).getOrElse([]);
   }
 
-  return {
-    label: (value === null || value === void 0 ? void 0 : value.label) || value,
-    value: (value === null || value === void 0 ? void 0 : value.value) || value
-  };
+  var maybeValue = (0, _Option.option)(possibleValues.find(function (v) {
+    return (0, _utils.deepEqual)(v.value, value);
+  }));
+  return maybeValue.getOrElse({
+    label: maybeValue.map(function (v) {
+      return v.label;
+    }).getOrElse(value),
+    value: maybeValue.map(function (v) {
+      return v.value;
+    }).getOrElse(value)
+  });
 };
 
 var SelectInput = function SelectInput(props) {
+  var classes = (0, _styleContext.useCustomStyle)();
+  var possibleValues = (props.possibleValues || []).map(function (v) {
+    return props.transformer ? props.transformer(v) : v;
+  }).map(function (v) {
+    return {
+      label: (v === null || v === void 0 ? void 0 : v.label) || v,
+      value: (v === null || v === void 0 ? void 0 : v.value) || v
+    };
+  });
+
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       loading = _useState2[0],
       setLoading = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(valueToSelectOption(props.value || props.defaultValue, props.isMulti)),
+  var _useState3 = (0, _react.useState)(possibleValues),
       _useState4 = _slicedToArray(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
+      values = _useState4[0],
+      setValues = _useState4[1];
 
-  var _useState5 = (0, _react.useState)((props.possibleValues || []).map(function (v) {
-    return props.transformer ? props.transformer(v) : v;
-  }).map(function (v) {
-    return valueToSelectOption(v);
-  })),
+  var _useState5 = (0, _react.useState)(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti, props.transformer)),
       _useState6 = _slicedToArray(_useState5, 2),
-      values = _useState6[0],
-      setValues = _useState6[1];
+      value = _useState6[0],
+      setValue = _useState6[1];
 
   (0, _react.useEffect)(function () {
-    setValue(valueToSelectOption(props.value || props.defaultValue, props.isMulti));
-  }, []);
+    setValue(valueToSelectOption(props.value, values, props.isMulti, props.transformer));
+  }, [props.value, values]);
   (0, _react.useEffect)(function () {
     if (props.optionsFrom) {
       var cond = (0, _Option.option)(props.fetchCondition).map(function (cond) {
@@ -97,7 +122,7 @@ var SelectInput = function SelectInput(props) {
           return r.json();
         }).then(function (values) {
           return values.map(function (x) {
-            return props.transformer ? props.transformer(x) : valueToSelectOption(x);
+            return props.transformer ? props.transformer(x) : valueToSelectOption(x, values, props.isMulti, props.transformer);
           });
         }).then(function (values) {
           setValues(values);
@@ -108,7 +133,7 @@ var SelectInput = function SelectInput(props) {
         });
       }
     }
-  }, [values, props.isMulti]);
+  }, [props.optionsFrom]);
 
   var onChange = function onChange(changes) {
     setValue(changes);
@@ -122,13 +147,57 @@ var SelectInput = function SelectInput(props) {
     }
   };
 
-  var createOption = function createOption(option) {
-    var fn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
-    fn(option);
-    setValues([].concat(_toConsumableArray(values), [valueToSelectOption(option)]));
-    onChange(valueToSelectOption(option));
+  var handleCreate = function handleCreate(label, fn) {
+    var createdValue = (0, _Option.option)(fn).map(function (func) {
+      return func(label);
+    }).map(function (createdOpt) {
+      return (0, _Option.option)(props.transformer).map(function (t) {
+        return t(createdOpt);
+      }).getOrElse(createdOpt);
+    }).getOrElse(valueToSelectOption(label, values));
+    setValues([].concat(_toConsumableArray(values), [createdValue]));
+
+    if (props.isMulti) {
+      onChange([].concat(_toConsumableArray(value), [createdValue]));
+    } else {
+      onChange(createdValue);
+    }
+  };
+
+  var handleSelectButtonClick = function handleSelectButtonClick(v) {
+    if (props.isMulti) {
+      if (value.includes(v)) {
+        return onChange(value.filter(function (val) {
+          return val.value !== v.value;
+        }));
+      } else {
+        return onChange([].concat(_toConsumableArray(value), [v]));
+      }
+    }
+
+    return onChange(v);
   };
 
+  if (props.format === _.format.buttonsSelect) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, values.map(function (v, idx) {
+      var active = props.isMulti ? value.includes(v) : v.value === value.value;
+      return /*#__PURE__*/_react["default"].createElement("button", {
+        key: idx,
+        type: "button",
+        className: (0, _classnames["default"])(props.className, classes.btn, classes.btn_grey, classes.ml_5, {
+          active: active
+        }),
+        onClick: function onClick() {
+          return handleSelectButtonClick(v);
+        }
+      }, v.label);
+    }));
+  }
+
   if (props.createOption) {
     return /*#__PURE__*/_react["default"].createElement(_creatable["default"], _extends({}, props, {
       name: "".concat(props.label, "-search"),
@@ -140,7 +209,7 @@ var SelectInput = function SelectInput(props) {
       onChange: onChange,
       options: values,
       onCreateOption: function onCreateOption(option) {
-        return props.onCreateOption ? createOption(option, props.onCreateOption) : createOption(option);
+        return handleCreate(option, props.onCreateOption);
       },
       classNamePrefix: "react-form-select",
       className: props.className

package/lib/style.d.ts

@@ -0,0 +1,196 @@
+export namespace style {
+    const input: {
+        display: string;
+        width: string;
+        padding: string;
+        fontSize: string;
+        color: string;
+        border: string;
+        borderRadius: number;
+        "&[readonly]": {
+            backgroundColor: string;
+            opacity: number;
+        };
+    };
+    namespace btn {
+        const borderRadius: number;
+        const padding: number;
+        const fontSize: string;
+        const cursor: string;
+        const borderWidth: string;
+        const backgroundColor: string;
+    }
+    namespace btn_sm {
+        const fontSize_1: string;
+        export { fontSize_1 as fontSize };
+        const padding_1: string;
+        export { padding_1 as padding };
+    }
+    const btn_group: {
+        "& > button:not(:last-child)": {
+            borderTopRightRadius: number;
+            borderBottomRightRadius: number;
+        };
+        "& > button:not(:first-child)": {
+            borderTopLeftRadius: number;
+            borderBottomLeftRadius: number;
+        };
+    };
+    const btn_red: {
+        color: any;
+        borderColor: any;
+        "&:hover": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+    };
+    const btn_green: {
+        color: any;
+        borderColor: any;
+        "&:hover": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+    };
+    const btn_blue: {
+        color: any;
+        borderColor: any;
+        "&:hover": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+    };
+    const btn_grey: {
+        color: any;
+        borderColor: any;
+        "&:hover": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+    };
+    namespace txt_red {
+        const color: string;
+    }
+    namespace ml_5 {
+        const marginLeft: number;
+    }
+    namespace ml_10 {
+        const marginLeft_1: number;
+        export { marginLeft_1 as marginLeft };
+    }
+    namespace mt_5 {
+        const marginTop: number;
+    }
+    namespace mt_10 {
+        const marginTop_1: number;
+        export { marginTop_1 as marginTop };
+    }
+    namespace mt_20 {
+        const marginTop_2: number;
+        export { marginTop_2 as marginTop };
+    }
+    namespace mb_5 {
+        const marginBottom: number;
+    }
+    namespace p_15 {
+        const padding_2: number;
+        export { padding_2 as padding };
+    }
+    namespace pr_15 {
+        const paddingRight: number;
+    }
+    namespace d_none {
+        const display: string;
+    }
+    namespace flex {
+        const display_1: string;
+        export { display_1 as display };
+    }
+    namespace flexColumn {
+        const flexDirection: string;
+    }
+    namespace justifyContentBetween {
+        const justifyContent: string;
+    }
+    namespace jc_end {
+        const justifyContent_1: string;
+        export { justifyContent_1 as justifyContent };
+    }
+    namespace ac_center {
+        const alignContent: string;
+    }
+    namespace ai_center {
+        const alignItems: string;
+    }
+    namespace cursor_pointer {
+        const cursor_1: string;
+        export { cursor_1 as cursor };
+    }
+    namespace collapse {
+        const display_2: string;
+        export { display_2 as display };
+        const justifyContent_2: string;
+        export { justifyContent_2 as justifyContent };
+        const cursor_2: string;
+        export { cursor_2 as cursor };
+    }
+    namespace collapse_label {
+        export const fontWeight: string;
+        const marginTop_3: number;
+        export { marginTop_3 as marginTop };
+    }
+    namespace collapse_error {
+        const color_1: string;
+        export { color_1 as color };
+    }
+    const datepicker: {
+        "& input": {
+            borderRadius: string;
+        };
+    };
+    const code: {};
+    namespace input__boolean__on {
+        const color_2: string;
+        export { color_2 as color };
+    }
+    namespace input__boolean__off {
+        const color_3: string;
+        export { color_3 as color };
+    }
+    namespace input__invalid {
+        const borderColor: string;
+    }
+    namespace invalid_feedback {
+        export const width: string;
+        const marginTop_4: string;
+        export { marginTop_4 as marginTop };
+        const fontSize_2: string;
+        export { fontSize_2 as fontSize };
+        const color_4: string;
+        export { color_4 as color };
+    }
+}