@maif/react-forms 1.0.2 → 1.0.6

package/lib/inputs/CodeInput.js

@@ -15,10 +15,14 @@ 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");
@@ -30,7 +34,11 @@ var CodeInput = function CodeInput(_ref) {
       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;
   return /*#__PURE__*/_react["default"].createElement(_reactAce["default"], {
     className: className,
     readOnly: readOnly,
@@ -38,8 +46,8 @@ var CodeInput = function CodeInput(_ref) {
       zIndex: 0,
       isolation: 'isolate'
     },
-    mode: "javascript",
-    theme: "monokai",
+    mode: mode,
+    theme: theme,
     onChange: onChange,
     value: value,
     name: "scriptParam",

package/lib/inputs/Collapse.js

@@ -49,7 +49,7 @@ var Collapse = function Collapse(props) {
   }, /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement("div", {
     className: "form-group row"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-sm-10",
+    className: "col-sm-12",
     onClick: toggle,
     style: {
       cursor: 'pointer'

package/lib/inputs/SelectInput.js

@@ -23,6 +23,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 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."); }
@@ -36,7 +44,8 @@ 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;
 
   if (value === null) {
     return null;
@@ -44,39 +53,51 @@ var valueToSelectOption = function valueToSelectOption(value) {
 
   if (isMulti) {
     return value.map(function (x) {
-      return valueToSelectOption(x);
+      return valueToSelectOption(x, possibleValues, false);
     });
   }
 
+  var maybeValue = (0, _Option.option)(possibleValues.find(function (v) {
+    return v.value === value;
+  }));
   return {
-    label: (value === null || value === void 0 ? void 0 : value.label) || value,
-    value: (value === null || value === void 0 ? void 0 : value.value) || value
+    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 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)),
       _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));
-  }, [props.value, props.defaultValue]);
+    setValue(valueToSelectOption(props.value, values, props.isMulti));
+  }, [props.value, values]);
   (0, _react.useEffect)(function () {
     if (props.optionsFrom) {
       var cond = (0, _Option.option)(props.fetchCondition).map(function (cond) {
@@ -114,6 +135,13 @@ 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, values)]));
+    onChange([].concat(_toConsumableArray(value), [valueToSelectOption(option, [].concat(_toConsumableArray(values), [valueToSelectOption(option, values)]))]));
+  };
+
   if (props.createOption) {
     return /*#__PURE__*/_react["default"].createElement(_creatable["default"], _extends({}, props, {
       name: "".concat(props.label, "-search"),
@@ -125,13 +153,8 @@ var SelectInput = function SelectInput(props) {
       onChange: onChange,
       options: values,
       onCreateOption: function onCreateOption(option) {
-        return props.onCreateOption ? props.onCreateOption(option) : undefined;
-      } //todo: default onCreateOption
-      ,
-      formatCreateLabel: function formatCreateLabel(value) {
-        return props.formatCreateLabel ? props.formatCreateLabel(value) : "create ".concat(value, " ?");
-      } //todo: default formatCreateLabel
-      ,
+        return props.onCreateOption ? createOption(option, props.onCreateOption) : createOption(option);
+      },
       classNamePrefix: "react-form-select",
       className: props.className
     }));

package/lib/resolvers/utils.js

@@ -56,7 +56,9 @@ var buildSubResolver = function buildSubResolver(props, key, dependencies, rawDa
     } else if (props.schema) {
       var deps = [];
       subResolver = yup.object().shape(getShapeAndDependencies(props.flow || Object.keys(props.schema), props.schema, deps, rawData).shape, deps);
-      arrayResolver = arrayResolver.of(subResolver);
+      arrayResolver = arrayResolver.of(yup.object().shape({
+        value: subResolver
+      }));
     }
 
     return constraints.reduce(function (resolver, constraint) {

package/lib/style.d.ts

@@ -0,0 +1,156 @@
+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 border: number;
+    }
+    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: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    const btn_green: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    const btn_blue: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    const btn_grey: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    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 flexDirection {
+        const flexDirection_1: string;
+        export { flexDirection_1 as flexDirection };
+    }
+    namespace jc_end {
+        const justifyContent: string;
+    }
+    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_1: string;
+        export { justifyContent_1 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 };
+    }
+    const datepicker: {
+        "& input": {
+            borderRadius: string;
+        };
+    };
+    const code: {};
+    namespace input__boolean__on {
+        const color_1: string;
+        export { color_1 as color };
+    }
+    namespace input__boolean__off {
+        const color_2: string;
+        export { color_2 as color };
+    }
+}

package/lib/style.js

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.style = void 0;
+var style = {
+  input: {
+    display: "block",
+    width: "100%",
+    padding: "8px 12px",
+    fontSize: "1rem",
+    color: "#495057",
+    border: "1px solid #ced4da",
+    borderRadius: 4,
+    "&[readonly]": {
+      backgroundColor: "#e9ecef",
+      opacity: 1
+    }
+  },
+  btn: {
+    borderRadius: 5,
+    padding: 10,
+    fontSize: "1rem",
+    cursor: "pointer",
+    border: 0
+  },
+  btn_sm: {
+    fontSize: "0.875rem",
+    padding: ".25rem .5rem"
+  },
+  btn_group: {
+    "& > button:not(:last-child)": {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    "& > button:not(:first-child)": {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0
+    }
+  },
+  btn_red: {
+    color: "#fff",
+    backgroundColor: "#dc3545",
+    borderColor: "#dc3545",
+    "&:hover": {
+      backgroundColor: "#c82333",
+      borderColor: "#bd2130"
+    }
+  },
+  btn_green: {
+    color: "#fff",
+    backgroundColor: "#28a745",
+    borderColor: "#28a745",
+    "&:hover": {
+      backgroundColor: "#218838",
+      borderColor: "#1e7e34"
+    }
+  },
+  btn_blue: {
+    color: "#fff",
+    backgroundColor: "#007bff",
+    borderColor: "#007bff",
+    "&:hover": {
+      backgroundColor: "#0069d9",
+      borderColor: "#0062cc"
+    }
+  },
+  btn_grey: {
+    color: "#fff",
+    backgroundColor: "#6c757d",
+    borderColor: "#6c757d",
+    "&:hover": {
+      backgroundColor: "#5c636a",
+      borderColor: "#5c636a"
+    }
+  },
+  txt_red: {
+    color: "#dc3545"
+  },
+  ml_5: {
+    marginLeft: 5
+  },
+  ml_10: {
+    marginLeft: 10
+  },
+  mt_5: {
+    marginTop: 5
+  },
+  mt_10: {
+    marginTop: 10
+  },
+  mt_20: {
+    marginTop: 20
+  },
+  mb_5: {
+    marginBottom: 5
+  },
+  p_15: {
+    padding: 15
+  },
+  pr_15: {
+    paddingRight: 15
+  },
+  d_none: {
+    display: "none"
+  },
+  flex: {
+    display: "flex"
+  },
+  flexDirection: {
+    flexDirection: "column"
+  },
+  jc_end: {
+    justifyContent: "end"
+  },
+  ac_center: {
+    alignContent: "center"
+  },
+  ai_center: {
+    alignItems: "center"
+  },
+  cursor_pointer: {
+    cursor: "pointer"
+  },
+  collapse: {
+    display: "flex",
+    justifyContent: "space-between",
+    cursor: "pointer"
+  },
+  collapse_label: {
+    fontWeight: "bold",
+    marginTop: 7
+  },
+  datepicker: {
+    "& input": {
+      borderRadius: "4px"
+    }
+  },
+  code: {},
+  input__boolean__on: {
+    color: "MediumSeaGreen"
+  },
+  input__boolean__off: {
+    color: "tomato"
+  }
+};
+exports.style = style;

package/lib/styleContext.d.ts

@@ -0,0 +1 @@
+export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "flexDirection" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "d_none" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "datepicker" | "input__boolean__on" | "input__boolean__off">;

package/lib/styleContext.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCustomStyle = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactJss = require("react-jss");
+
+var _style = require("./style");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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; }
+
+var useCustomStyle = function useCustomStyle() {
+  var overrideStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var useStyle = (0, _reactJss.createUseStyles)(_objectSpread(_objectSpread({}, _style.style), overrideStyle));
+  var classes = useStyle();
+  return classes;
+};
+
+exports.useCustomStyle = useCustomStyle;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "main": "lib/index.js",
   "author": "MAIF team",
   "keywords": [
@@ -113,8 +113,9 @@
     "react-ace": "9.4.3",
     "react-feather": "2.0.9",
     "react-hook-form": "7.17.1",
+    "react-jss": "10.8.2",
     "react-rainbow-components": "1.26.0",
-    "react-select": "4.3.1",
+    "react-select": "5.2.1",
     "react-tooltip": "4.2.21",
     "showdown": "1.9.1",
     "typescript": "^4.3.5",