@maif/react-forms 1.0.7 → 1.0.11

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); }
@@ -46,31 +54,35 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var valueToSelectOption = function valueToSelectOption(value) {
   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, possibleValues, false);
-    });
+    return (0, _Option.option)(value).map(function (v) {
+      return v.map(function (x) {
+        return valueToSelectOption(x, possibleValues, false, maybeTransformer);
+      });
+    }).getOrElse([]);
   }
 
   var maybeValue = (0, _Option.option)(possibleValues.find(function (v) {
-    return v.value === value;
+    return (0, _utils.deepEqual)(v.value, value);
   }));
-  return {
+  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) {
@@ -90,13 +102,13 @@ var SelectInput = function SelectInput(props) {
       values = _useState4[0],
       setValues = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti)),
+  var _useState5 = (0, _react.useState)(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti, props.transformer)),
       _useState6 = _slicedToArray(_useState5, 2),
       value = _useState6[0],
       setValue = _useState6[1];
 
   (0, _react.useEffect)(function () {
-    setValue(valueToSelectOption(props.value, values, props.isMulti));
+    setValue(valueToSelectOption(props.value, values, props.isMulti, props.transformer));
   }, [props.value, values]);
   (0, _react.useEffect)(function () {
     if (props.optionsFrom) {
@@ -110,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);
@@ -121,7 +133,7 @@ var SelectInput = function SelectInput(props) {
         });
       }
     }
-  }, [values, props.isMulti]);
+  }, [props.optionsFrom]);
 
   var onChange = function onChange(changes) {
     setValue(changes);
@@ -135,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, values)]));
-    onChange([].concat(_toConsumableArray(value), [valueToSelectOption(option, [].concat(_toConsumableArray(values), [valueToSelectOption(option, values)]))]));
+  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"),
@@ -153,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

@@ -17,7 +17,8 @@ export namespace style {
         const padding: number;
         const fontSize: string;
         const cursor: string;
-        const border: number;
+        const borderWidth: string;
+        const backgroundColor: string;
     }
     namespace btn_sm {
         const fontSize_1: string;
@@ -36,39 +37,59 @@ export namespace style {
         };
     };
     const btn_red: {
-        color: string;
-        backgroundColor: string;
-        borderColor: string;
+        color: any;
+        borderColor: any;
         "&:hover": {
-            backgroundColor: string;
-            borderColor: string;
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
         };
     };
     const btn_green: {
-        color: string;
-        backgroundColor: string;
-        borderColor: string;
+        color: any;
+        borderColor: any;
         "&:hover": {
-            backgroundColor: string;
-            borderColor: string;
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
         };
     };
     const btn_blue: {
-        color: string;
-        backgroundColor: string;
-        borderColor: string;
+        color: any;
+        borderColor: any;
         "&:hover": {
-            backgroundColor: string;
-            borderColor: string;
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
         };
     };
     const btn_grey: {
-        color: string;
-        backgroundColor: string;
-        borderColor: string;
+        color: any;
+        borderColor: any;
         "&:hover": {
-            backgroundColor: string;
-            borderColor: string;
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
         };
     };
     namespace txt_red {
@@ -109,13 +130,16 @@ export namespace style {
         const display_1: string;
         export { display_1 as display };
     }
-    namespace flexDirection {
-        const flexDirection_1: string;
-        export { flexDirection_1 as flexDirection };
+    namespace flexColumn {
+        const flexDirection: string;
     }
-    namespace jc_end {
+    namespace justifyContentBetween {
         const justifyContent: string;
     }
+    namespace jc_end {
+        const justifyContent_1: string;
+        export { justifyContent_1 as justifyContent };
+    }
     namespace ac_center {
         const alignContent: string;
     }
@@ -129,8 +153,8 @@ export namespace style {
     namespace collapse {
         const display_2: string;
         export { display_2 as display };
-        const justifyContent_1: string;
-        export { justifyContent_1 as justifyContent };
+        const justifyContent_2: string;
+        export { justifyContent_2 as justifyContent };
         const cursor_2: string;
         export { cursor_2 as cursor };
     }
@@ -139,6 +163,10 @@ export namespace style {
         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;
@@ -146,11 +174,23 @@ export namespace style {
     };
     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 };
     }
+    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 };
+    }
 }

package/lib/style.js

@@ -4,7 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.style = void 0;
-var style = {
+
+var _style;
+
+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 buttonOutline = function buttonOutline(color, darker) {
+  return {
+    color: color,
+    borderColor: color,
+    "&:hover": {
+      color: '#fff',
+      backgroundColor: color,
+      borderColor: darker
+    },
+    "&.active": {
+      color: '#fff',
+      backgroundColor: color,
+      borderColor: darker
+    }
+  };
+};
+
+var style = (_style = {
   input: {
     display: "block",
     width: "100%",
@@ -23,7 +45,8 @@ var style = {
     padding: 10,
     fontSize: "1rem",
     cursor: "pointer",
-    border: 0
+    borderWidth: '1px',
+    backgroundColor: '#fff'
   },
   btn_sm: {
     fontSize: "0.875rem",
@@ -39,42 +62,10 @@ var style = {
       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"
-    }
-  },
+  btn_red: buttonOutline("#dc3545", "#bd2130"),
+  btn_green: buttonOutline("#28a745", "#1e7e34"),
+  btn_blue: buttonOutline("#007bff", "#0069d9"),
+  btn_grey: buttonOutline("#6c757d", "#5c636a"),
   txt_red: {
     color: "#dc3545"
   },
@@ -108,9 +99,12 @@ var style = {
   flex: {
     display: "flex"
   },
-  flexDirection: {
+  flexColumn: {
     flexDirection: "column"
   },
+  justifyContentBetween: {
+    justifyContent: "space-between"
+  },
   jc_end: {
     justifyContent: "end"
   },
@@ -131,18 +125,26 @@ var style = {
   collapse_label: {
     fontWeight: "bold",
     marginTop: 7
-  },
-  datepicker: {
-    "& input": {
-      borderRadius: "4px"
-    }
-  },
-  code: {},
-  input__boolean__on: {
-    color: "MediumSeaGreen"
-  },
-  input__boolean__off: {
-    color: "tomato"
   }
-};
+}, _defineProperty(_style, "collapse_label", {
+  fontWeight: "bold",
+  marginTop: 7
+}), _defineProperty(_style, "collapse_error", {
+  color: '#dc3545'
+}), _defineProperty(_style, "datepicker", {
+  "& input": {
+    borderRadius: "4px"
+  }
+}), _defineProperty(_style, "code", {}), _defineProperty(_style, "input__boolean__on", {
+  color: "MediumSeaGreen"
+}), _defineProperty(_style, "input__boolean__off", {
+  color: "tomato"
+}), _defineProperty(_style, "input__invalid", {
+  borderColor: '#dc3545 !important'
+}), _defineProperty(_style, "invalid_feedback", {
+  width: "100%",
+  marginTop: ".25rem",
+  fontSize: "80%",
+  color: "#dc3545"
+}), _style);
 exports.style = style;

package/lib/styleContext.d.ts

@@ -1 +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">;
+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" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback">;

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.7",
+  "version": "1.0.11",
   "main": "lib/index.js",
   "author": "MAIF team",
   "keywords": [
@@ -97,6 +97,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@hookform/resolvers": "2.4.0",
+    "@popperjs/core": "^2.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",