intelicoreact 0.0.51 → 0.0.52

package/dist/Atomic/FormElements/Input/Input.js

@@ -49,7 +49,8 @@ var Input = function Input(_ref) {
       onKeyUp = _ref.onKeyUp,
       mask = _ref.mask,
       error = _ref.error,
-      icon = _ref.icon;
+      icon = _ref.icon,
+      symbolsLimit = _ref.symbolsLimit;
 
   // STATES
   var _useState = (0, _react.useState)(false),
@@ -74,7 +75,7 @@ var Input = function Input(_ref) {
         if (min && +min > inputValue) {
           inputValue = min;
         } else if (max && +max < inputValue) inputValue = max;
-      }
+      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
 
       onChange(inputValue.toString());
     },

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

@@ -71,6 +71,9 @@ var _default = {
     mask: {
       description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
     },
+    symbolsLimit: {
+      description: 'Set limit of symbols in input, overhead will be ignored'
+    },
     onBlur: {
       description: 'custom callback on blur'
     },
@@ -109,5 +112,6 @@ InputTemplate.args = {
   max: '5',
   placeholder: 'Placeholder',
   mask: '',
-  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
+  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null),
+  symbolsLimit: 225
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.51",
-  "description": "",
+  "version": "0.0.52",
+  "description": "Add symbols limit in input",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/src/Atomic/FormElements/Input/Input.js

@@ -23,6 +23,7 @@ const Input = ({
   mask,
   error,
   icon,
+  symbolsLimit,
 }) => {
   // STATES
   const [isFocused, setIsFocused] = useState(false);
@@ -37,7 +38,7 @@ const Input = ({
         if (min && +min > inputValue) {
           inputValue = min;
         } else if (max && +max < inputValue) inputValue = max;
-      }
+      } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
       onChange(inputValue.toString());
     },
     toggleEdit: () => {
@@ -70,7 +71,7 @@ const Input = ({
     onBlur: handle.blur,
     onKeyUp: handle.keyUp,
     min,
-    max
+    max,
   };
 
   function renderInput() {

package/src/Atomic/FormElements/Input/Input.stories.js

@@ -43,6 +43,7 @@ export default {
     value: { description: '(* - required prop)' },
     className: { description: 'string' },
     mask: { description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask' },
+    symbolsLimit: { description: 'Set limit of symbols in input, overhead will be ignored' },
     onBlur: { description: 'custom callback on blur' },
     onFocus: { description: 'custom callback on focus' },
     onKeyUp: { description: 'custom callback on keyup, returns event keyCode' }
@@ -67,5 +68,6 @@ InputTemplate.args = {
   max: '5',
   placeholder: 'Placeholder',
   mask: '',
-  icon: <User />
+  icon: <User />,
+  symbolsLimit: 225
 };

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

@@ -1,75 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CalendarSimple = exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _yup = require("yup");
-
-var _useClickOutside = require("../../../Functions/useClickOutside");
-
-var _Calendar = _interopRequireDefault(require("./Calendar"));
-
-var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
-
-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; }
-
-global.lng = 'en';
-var _default = {
-  title: 'Form Elements/Calendar',
-  component: _Calendar.default
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  var _useState = (0, _react.useState)(args.date),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      date = _useState2[0],
-      _setDate = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      isOpened = _useState4[0],
-      setIsOpened = _useState4[1];
-
-  var calendarRef = (0, _react.useRef)(null);
-  (0, _useClickOutside.useClickOutside)(calendarRef, function () {
-    return setIsOpened(false);
-  });
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "calendar-container",
-    ref: calendarRef
-  }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
-    mask: "99/99/9999",
-    value: date,
-    onChange: function onChange(e) {
-      return _setDate(e.target.value);
-    },
-    className: "calendar-dropdown",
-    onFocus: function onFocus() {
-      return setIsOpened(!isOpened);
-    }
-  }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
-    date: date,
-    setDate: function setDate(newDate) {
-      return _setDate(newDate);
-    }
-  }) : null);
-};
-
-var CalendarSimple = Template.bind({});
-exports.CalendarSimple = CalendarSimple;
-CalendarSimple.args = {
-  date: '10/11/2021'
-};