@maif/react-forms 1.0.4 → 1.0.8

package/lib/inputs/SelectInput.js

@@ -15,6 +15,8 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 
 var _Option = require("../Option");
 
+var _utils = require("../utils");
+
 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 +46,63 @@ 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 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 +115,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 +126,7 @@ var SelectInput = function SelectInput(props) {
         });
       }
     }
-  }, [values, props.isMulti]);
+  }, [props.optionsFrom]);
 
   var onChange = function onChange(changes) {
     setValue(changes);
@@ -122,11 +140,21 @@ 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);
+    }
   };
 
   if (props.createOption) {
@@ -140,7 +168,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,159 @@
+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 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 };
+    }
+    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,151 @@
+"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"
+  },
+  flexColumn: {
+    flexDirection: "column"
+  },
+  justifyContentBetween: {
+    justifyContent: "space-between"
+  },
+  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" | "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" | "flexColumn" | "justifyContentBetween" | "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/lib/utils.d.ts

@@ -0,0 +1 @@
+export function deepEqual(a: any, b: any): boolean;

package/lib/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deepEqual = void 0;
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var deepEqual = function deepEqual(a, b) {
+  if (a === b) return true;
+  if (_typeof(a) !== 'object' || _typeof(b) !== 'object' || a === null || b === null) return false;
+  var keysA = Object.keys(a),
+      keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+
+  for (var _i = 0, _keysA = keysA; _i < _keysA.length; _i++) {
+    var key = _keysA[_i];
+    if (!keysB.includes(key)) return false;
+
+    if (typeof a[key] === 'function' || typeof b[key] === 'function') {
+      if (a[key].toString() !== b[key].toString()) return false;
+    } else {
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+  }
+
+  return true;
+};
+
+exports.deepEqual = deepEqual;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.4",
+  "version": "1.0.8",
   "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",