intelicoreact 0.1.22 → 0.1.25

package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -17,6 +19,8 @@ var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput/CheckboxIn
 
 require("./CheckboxesLine.scss");
 
+var RC = 'checkboxes-line';
+
 var CheckboxesLine = function CheckboxesLine(props) {
   var field = props.field,
       onChange = props.onChange;
@@ -35,15 +39,13 @@ var CheckboxesLine = function CheckboxesLine(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('checkboxes-line', {
-      'checkboxes-line_column': isPositionColumn
-    }, className)
+    className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_column"), isPositionColumn), className)
   }, (items === null || items === void 0 ? void 0 : items.map(function (item, idx) {
     var _value$includes;
 
     return /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
       id: item.id,
-      className: "checkboxes-line__checkbox-input",
+      className: "".concat(RC, "__checkbox-input"),
       key: item.label,
       label: item.label,
       value: (value === null || value === void 0 ? void 0 : (_value$includes = value.includes) === null || _value$includes === void 0 ? void 0 : _value$includes.call(value, item.id)) || false,

package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.stories.js

@@ -15,10 +15,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _CheckboxesLine = _interopRequireDefault(require("./CheckboxesLine"));
 
+require("./partial/AnyOuterClass.scss");
+
+var _excluded = ["isIncludeOuterStyles"];
+
 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; }
@@ -31,6 +37,9 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
+  var isIncludeOuterStyles = args.isIncludeOuterStyles,
+      restArgs = (0, _objectWithoutProperties2.default)(args, _excluded);
+
   var _useState = (0, _react.useState)(args.value),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       value = _useState2[0],
@@ -39,7 +48,8 @@ var Template = function Template(args) {
   (0, _react.useEffect)(function () {
     return console.log(value);
   }, [value]);
-  return /*#__PURE__*/_react.default.createElement(_CheckboxesLine.default, (0, _extends2.default)({}, args, {
+  return /*#__PURE__*/_react.default.createElement(_CheckboxesLine.default, (0, _extends2.default)({}, restArgs, {
+    className: isIncludeOuterStyles ? 'any-outer-class__checkboxes-line' : null,
     value: value,
     onChange: setValue
   }));
@@ -48,6 +58,7 @@ var Template = function Template(args) {
 var TemplateCheckboxesLine = Template.bind({});
 exports.TemplateCheckboxesLine = TemplateCheckboxesLine;
 TemplateCheckboxesLine.args = (0, _defineProperty2.default)({
+  isIncludeOuterStyles: false,
   items: [{
     label: ' - 1',
     id: '1'

package/dist/Atomic/FormElements/CheckboxesLine/partial/AnyOuterClass.scss

@@ -0,0 +1,5 @@
+.any-outer-class__checkboxes-line {
+  .checkboxes-line__checkbox-input {
+    margin-right: 30px;
+  }
+}

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -220,11 +220,13 @@ var Dropdown = function Dropdown(_ref) {
       disabled: disabled
     }),
     ref: dropdownRef,
-    onFocus: function onFocus() {
-      return setIsOpen(true);
+    onKeyDown: function onKeyDown(e) {
+      if (e.code !== 'Tab') return false;
+      setIsOpen(false);
     },
-    onBlur: function onBlur() {
-      return setIsOpen(false);
+    onKeyUp: function onKeyUp(e) {
+      if (e.code !== 'Tab') return false;
+      setIsOpen(true);
     }
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "".concat(RC, "__trigger input__wrap ").concat(isOpen ? 'input__wrap--focus' : '', " ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),

package/dist/Atomic/FormElements/RangeList/RangeList.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,286 +13,182 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = require("react");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _fi = require("react-icons/fi");
+var _react = require("react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _operations = require("../../../Functions/operations");
+
 var _Button = _interopRequireDefault(require("./../../UI/Button/Button"));
 
 var _Input = _interopRequireDefault(require("../Input/Input"));
 
+var _RangeListRow = _interopRequireWildcard(require("./partial/RangeListRow"));
+
 require("./RangeList.scss");
 
-// import { numberFilter, numberFilterWithoutDots, rounded } from '../../../Functions/utils';
-var RC = 'range-list';
+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); }
 
-var RangeListCell = function RangeListCell(_ref) {
-  var children = _ref.children,
-      idx = _ref.idx,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)("".concat(RC, "__cell"), className, (0, _defineProperty2.default)({}, "".concat(RC, "__cell-").concat(idx), idx))
-  }, children);
-};
+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; }
 
-var RangeListRow = function RangeListRow(_ref2) {
-  var from = _ref2.from,
-      to = _ref2.to,
-      idx = _ref2.idx;
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__values"), (0, _defineProperty2.default)({}, "".concat(RC, "__values_first-value"), idx === 0))
-  }, /*#__PURE__*/React.createElement(RangeListCell, {
-    idx: 1,
-    className: "".concat(RC, "__cell-value")
-  }, from), /*#__PURE__*/React.createElement(RangeListCell, {
-    idx: 2,
-    className: "".concat(RC, "__cell-value")
-  }, to), /*#__PURE__*/React.createElement(RangeListCell, {
-    idx: 3,
-    className: "".concat(RC, "__cell-action")
-  }, /*#__PURE__*/React.createElement(_fi.FiTrash2, null)));
+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) { (0, _defineProperty2.default)(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; }
+
+var RC = 'range-list';
+var DEFAULT_STATE = {
+  from: '',
+  to: ''
 };
 
 var RangeList = function RangeList(props) {
-  // const { item, value: inputvalue, fields, onChange, type, isInteger, id: filterId, label, className } = props;
   var className = props.className,
-      value = props.value;
+      _props$value = props.value,
+      value = _props$value === void 0 ? [] : _props$value,
+      disabled = props.disabled,
+      validate = props.validate,
+      onChange = props.onChange,
+      isFloatValues = props.isFloatValues,
+      decimalPlaces = props.decimalPlaces,
+      error = props.error,
+      defaultErrorText = props.defaultErrorText,
+      nullValueText = props.nullValueText;
+  var NULL_VALUE_TEXT = nullValueText !== null && nullValueText !== void 0 ? nullValueText : 'No data';
+
+  var _useState = (0, _react.useState)(DEFAULT_STATE),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      innerError = _useState4[0],
+      setInnerError = _useState4[1];
+
+  var inputFromRef = (0, _react.useRef)(null);
+  var inputToRef = (0, _react.useRef)(null);
+  var isValidRange = !!(state !== null && state !== void 0 && state.from && state !== null && state !== void 0 && state.to && +(state === null || state === void 0 ? void 0 : state.from) <= +(state === null || state === void 0 ? void 0 : state.to));
+  var handle = {
+    inputsChange: function inputsChange(val, prop) {
+      return setState(_objectSpread(_objectSpread({}, state), {}, (0, _defineProperty2.default)({}, prop, val)));
+    },
+    addRange: function addRange() {
+      var _validate;
+
+      if (isValidRange && ((_validate = validate === null || validate === void 0 ? void 0 : validate(+state.from, +state.to)) !== null && _validate !== void 0 ? _validate : true)) {
+        onChange((0, _operations.addRangeDefault)(+state.from, +state.to, value, isFloatValues ? decimalPlaces : null));
+        setState(DEFAULT_STATE);
+        setInnerError('');
+      } else setInnerError(defaultErrorText);
+    },
+    removeRange: function removeRange(index) {
+      return onChange(value.filter(function (item, idx) {
+        return idx !== index;
+      }));
+    },
+    rangeValidation: function rangeValidation(e, key) {
+      var oppositeKey = key === 'from' ? 'to' : 'from';
+
+      if (!(state !== null && state !== void 0 && state.from) && !(state !== null && state !== void 0 && state.to)) {
+        setInnerError('');
+        return e;
+      } else if (!state[oppositeKey]) {
+        var mustToFocus = key === 'from' ? inputToRef.current : inputFromRef.current;
+        mustToFocus.focus();
+      } else if (!isValidRange) setInnerError(defaultErrorText);else {
+        setInnerError('');
+        return e;
+      }
+    },
+    onFocus: function onFocus() {
+      return setInnerError('');
+    },
+    onKeyUpFromInput: function onKeyUpFromInput(code) {
+      if (code === 13) {
+        if (isValidRange) inputFromRef.current.blur();else if (!state.to) inputToRef.current.focus();else if (state.from) inputFromRef.current.select();
+      }
+    },
+    onKeyUpToInput: function onKeyUpToInput(code) {
+      if (code === 13) inputToRef.current.blur();
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(RC, className)
+    className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({}, "".concat(RC, "_disabled"), disabled))
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__labels"))
-  }, /*#__PURE__*/React.createElement(RangeListCell, {
+  }, /*#__PURE__*/React.createElement(_RangeListRow.RangeListCell, {
     className: "".concat(RC, "__cell-label")
-  }, "From"), /*#__PURE__*/React.createElement(RangeListCell, {
+  }, "From"), /*#__PURE__*/React.createElement(_RangeListRow.RangeListCell, {
     className: "".concat(RC, "__cell-label")
   }, "To")), /*#__PURE__*/React.createElement("div", {
     className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__inputs"))
-  }, /*#__PURE__*/React.createElement(RangeListCell, {
+  }, /*#__PURE__*/React.createElement(_RangeListRow.RangeListCell, {
     className: "".concat(RC, "__cell-input")
   }, /*#__PURE__*/React.createElement(_Input.default, {
-    value: 56
-  })), /*#__PURE__*/React.createElement(RangeListCell, {
+    ref: inputFromRef,
+    onlyNumbers: isFloatValues ? {
+      type: 'float',
+      decimalPlaces: decimalPlaces || 0
+    } : {
+      type: 'int'
+    },
+    value: state.from,
+    onFocus: function onFocus() {
+      return handle.onFocus();
+    },
+    onBlur: function onBlur(e) {
+      return handle.rangeValidation(e, 'from');
+    },
+    onChange: function onChange(val) {
+      return handle.inputsChange(val, 'from');
+    },
+    onKeyUp: function onKeyUp(code, e) {
+      return handle.onKeyUpFromInput(code);
+    }
+  })), /*#__PURE__*/React.createElement(_RangeListRow.RangeListCell, {
     className: "".concat(RC, "__cell-input")
   }, /*#__PURE__*/React.createElement(_Input.default, {
-    value: 72
-  })), /*#__PURE__*/React.createElement(RangeListCell, {
+    ref: inputToRef,
+    onlyNumbers: isFloatValues ? {
+      type: 'float',
+      decimalPlaces: decimalPlaces || 0
+    } : {
+      type: 'int'
+    },
+    value: state.to,
+    onFocus: function onFocus() {
+      return handle.onFocus();
+    },
+    onBlur: function onBlur(e) {
+      return handle.rangeValidation(e, 'to');
+    },
+    onChange: function onChange(val) {
+      return handle.inputsChange(val, 'to');
+    },
+    onKeyUp: function onKeyUp(code, e) {
+      return handle.onKeyUpToInput(code);
+    }
+  })), /*#__PURE__*/React.createElement(_RangeListRow.RangeListCell, {
     className: "".concat(RC, "__cell-button")
-  }, /*#__PURE__*/React.createElement(_Button.default, null, "Add"))), value.map(function (row, idx) {
-    return /*#__PURE__*/React.createElement(RangeListRow, (0, _extends2.default)({}, row, {
-      idx: idx
+  }, /*#__PURE__*/React.createElement(_Button.default, {
+    onClick: handle.addRange
+  }, "Add"))), (innerError || error) && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(RC, "__error")
+  }, error || innerError), !(value !== null && value !== void 0 && value.length) && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__values"), "".concat(RC, "__null-value"))
+  }, NULL_VALUE_TEXT), value.map(function (row, idx) {
+    return /*#__PURE__*/React.createElement(_RangeListRow.default, (0, _extends2.default)({
+      key: "idx-".concat(idx, "-from-").concat(row.from, "-to").concat(row.to)
+    }, row, {
+      idx: idx,
+      actionClick: function actionClick() {
+        return handle.removeRange(idx);
+      }
     }));
   }));
 };
 
-var _default = RangeList; // import { useState } from 'react';
-// import { FiTrash2 } from 'react-icons/fi';
-// import cn from 'classnames';
-// import Button from 'intelicoreact/dist/Atomic/UI/Button/Button';
-// import { numberFilter, numberFilterWithoutDots, rounded } from '../../../Functions/utils';
-// import Input from '../Input/Input';
-// import './RangeList.scss';
-// const RC = 'range-list';
-// const RangeList = (props) => {
-//   const { item, value: inputvalue, fields, onChange, type, isInteger, id: filterId, label, className } = props;
-//   const [form, setForm] = useState(fields);
-//   const [error, setError] = useState('');
-//   const keyFrom = 'from';
-//   const keyTo = 'to';
-//   const additive = type === 'rangeList' && !isInteger ? 0.01 : 1;
-//   let value = inputvalue || [];
-//   value?.sort((a, b) => a[keyFrom] - b[keyFrom]);
-//   function removeRow(index) {
-//     value.splice(index, 1);
-//     setForm([...form]);
-//     onChange(value, 'value');
-//   }
-//   function addRange() {
-//     const from = parseFloat(rounded(form[0].value));
-//     let to = parseFloat(form[1].value);
-//     if (isNaN(to)) to = '';
-//     //const result = parseFloat(rounded(form[2]?.value)) || '0';
-//     if ((form[0] && isNaN(form[0]?.value)) || (form[1] && isNaN(form[1]?.value))) {
-//       setError('All fields required');
-//       return false;
-//     } else if (to !== '' && to <= from) {
-//       setError('Set a valid range');
-//       return false;
-//     } else if (isNaN(from) || (!from && isNaN(to)) || from < 0 || (!from && to <= 0)) {
-//       setError('Only numbers >=0 are allowed');
-//       return false;
-//     } else if (to && to - from < 0.05) {
-//       setError('range must be more than 0.05');
-//       return false;
-//     } else if (form[2]?.unit === '%') {
-//       setError(`${form[2]?.label} max 100`);
-//       return false;
-//     } else if (from > 999999 || (!!to && to > 999999)) {
-//       setError('You need to set a smaller number!');
-//       return false;
-//     } else if (from === to) {
-//       setError('You need to set a range');
-//       return false;
-//     } else if (!to) {
-//       setError('Set a valid range');
-//       return false;
-//     } else if (!!to && from > to) {
-//       setError('You need to set a valid range');
-//       return false;
-//     } else if (filterId && label === 'Age' && to > 99) {
-//       setError('99 is the maximum allowed value');
-//       return false;
-//     } else if (filterId && label === 'Age' && from < 18) {
-//       setError('18 is the minimum allowed value');
-//       return false;
-//     }
-//     const duplicate = value?.filter((e) => Number(e[keyFrom]) === from && Number(e[keyTo]) === to);
-//     if (duplicate.length) {
-//       setError('This range was already added');
-//       return false;
-//     }
-//     const newRanges = [];
-//     const prevItems = [];
-//     const postItems = [];
-//     const getRangeObject = (nFrom, nTo) => ({
-//       [keyFrom]: parseFloat(nFrom?.toFixed(3)),
-//       [keyTo]: nTo.toFixed ? parseFloat(nTo?.toFixed(3)) : nTo || '',
-//     });
-//     const [crossFrom, crossTo] = getFilter(value)?.reduce((res, data) => {
-//       if (data[keyFrom] === from) data[keyFrom] = from + additive;
-//       if (data[keyTo] === to) data[keyTo] = to - additive;
-//       if (isNaN(data[keyFrom])) data[keyFrom] = 0;
-//       if (data[keyTo] > 0 && from > data[keyTo]) {
-//         prevItems.push(data);
-//       } else if (to && data[keyFrom] > to) {
-//         postItems.push(data);
-//       } else if (!(from < data[keyFrom] && (!to || data[keyTo] < to))) {
-//         res.push(data);
-//       }
-//       return res;
-//     }, []);
-//     if (crossFrom && crossTo) {
-//       if (to === crossTo.from) {
-//         newRanges.push(...[getRangeObject(crossFrom[keyFrom], from), getRangeObject(to, crossTo[keyTo])]);
-//       } else {
-//         newRanges.push(...[getRangeObject(crossFrom[keyFrom], from), getRangeObject(from + additive, to)]);
-//         if (to) {
-//           newRanges.push(getRangeObject(to + additive, crossTo[keyTo]));
-//         }
-//       }
-//     } else if (crossFrom) {
-//       if (crossFrom[keyFrom] < from && crossFrom[keyTo] > to) {
-//         newRanges.push(getRangeObject(crossFrom[keyFrom], from));
-//         if (to) {
-//           newRanges.push(...[getRangeObject(from + additive, to), getRangeObject(to + additive, crossFrom[keyTo])]);
-//         } else {
-//           newRanges.push(getRangeObject(from + additive, ''));
-//         }
-//       } else if (crossFrom[keyFrom] > from) {
-//         newRanges.push(...[getRangeObject(from, to), getRangeObject(to + additive, crossFrom[keyTo])]);
-//       } else if (crossFrom && to - from > 1) {
-//         newRanges.push(...[getRangeObject(crossFrom[keyFrom], from), getRangeObject(from + additive, to)]);
-//       } else newRanges.push(getRangeObject(crossFrom[keyFrom], to));
-//     } else {
-//       newRanges.push(getRangeObject(from, to));
-//     }
-//     newRanges.unshift(...prevItems);
-//     newRanges.push(...postItems);
-//     value = newRanges;
-//     onChange(value);
-//     form.map((field) => (field.value = ''));
-//     setForm([...form]);
-//   }
-//   const handleFieldFocus = (key) => {
-//     if (key === keyTo && !form[0].value) {
-//       form[0].value = 0;
-//       setForm([...form]);
-//     }
-//   };
-//   const removeFiltersDots = (value) => {
-//     if (filterId) return numberFilterWithoutDots(value);
-//     return value;
-//   };
-//   function renderField(field) {
-//     return (
-//       <td key={field.key} style={{ padding: 0 }}>
-//         {field.label && <label className={`${RC}__input-label`}>{field.label}</label>}
-//         <div>
-//           <Input
-//             value={removeFiltersDots(field.value) || ''}
-//             onFocus={() => handleFieldFocus(field.key)}
-//             placeholder={field.placeholder}
-//             onChange={(e) => {
-//               let value = e || field.key !== 'max' ? numberFilter(e) : '';
-//               if (field.isInt) value = numberFilterWithoutDots(value);
-//               if (value < 0) value = '';
-//               else if (field.key === 'bonus' && value > 100) value = 100;
-//               //if (!field.value) onChange();
-//               field.value = value;
-//               setForm([...form]);
-//               setError('');
-//             }}
-//           />
-//         </div>
-//       </td>
-//     );
-//   }
-//   const renderRowNumbers = (row, field, index) => {
-//     if (field.key === 'max' && row.max === 999999999) row.max = '';
-//     else {
-//       if (field.key === 'bonus' && !row.bonus) row.bonus = '0';
-//       row[field.key] = row[field.key] !== '' ? Number(row[field.key]) : row[field.key];
-//     }
-//     return (
-//       <td key={index} className="table__cell">
-//         {filterId ? row[field.key] : row[field.key].toLocaleString('en-US', { minimumFractionDigits: isInteger ? 0 : 2 })}
-//         {row[field.key] || field.key === 'bonus' ? field.unit : ''}
-//       </td>
-//     );
-//   };
-//   function renderRow(row, index) {
-//     return (
-//       <tr key={index} className="bordered-tr">
-//         {form?.map((field, index) => renderRowNumbers(row, field, index))}
-//         <td className="table__cell range-list--trash-icon">
-//           <FiTrash2 className="pointer color--froly" onClick={() => removeRow(index)} />
-//         </td>
-//       </tr>
-//     );
-//   }
-//   function getFilter(data) {
-//     return data?.slice()?.filter(({ from, to }) => {
-//       return !([0, null].includes(from) && [0, null].includes(to));
-//     });
-//   };
-//   return (
-//     <table className={cn('range-list', ' w100', className)}>
-//       <tbody>
-//         <tr>
-//           {form?.map((field) => renderField(field))}
-//           <td style={{ padding: 0 }}>
-//             <Button type="primary" onClick={addRange} label="+ Add" />
-//           </td>
-//         </tr>
-//         <tr>
-//           <td colSpan={4}>
-//             <span className="input-classic__error">{error}</span>
-//           </td>
-//         </tr>
-//         {!value || !getFilter(value)?.length ? (
-//           <tr className="tableCustom__tr--first bordered-tr read-only">
-//             <td colSpan={4} className="table__cell text-left">
-//               Not set
-//             </td>
-//           </tr>
-//         ) : value ? (
-//           getFilter(value).map((row, index) => renderRow(row, index))
-//         ) : null}
-//       </tbody>
-//     </table>
-//   );
-// };
-// export default RangeList;
-
+var _default = RangeList;
 exports.default = _default;

package/dist/Atomic/FormElements/RangeList/RangeList.scss

@@ -121,4 +121,29 @@
       color: $color--froly;
     }
   }
+
+  &__error {
+    font-size: 10px;
+    line-height: normal;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 400;
+    margin-bottom: 5px;
+    margin-left: 5px;
+    display: block;
+    color: #f06d8d;
+  }
+
+  &_disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &__null-value {
+    border: none;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+  }
 }