intelicoreact 0.0.3 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (227) hide show
  1. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js +6 -2
  2. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +92 -63
  3. package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +2 -4
  4. package/dist/Atomic/FormElements/DateTime/DateTime.stories.js +1 -3
  5. package/dist/Atomic/FormElements/DoubleString/DoubleString.stories.js +0 -2
  6. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +56 -25
  7. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +26 -3
  8. package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js +40 -11
  9. package/dist/Atomic/FormElements/Header/Header.js +7 -9
  10. package/dist/Atomic/FormElements/Header/Header.scss +16 -5
  11. package/dist/Atomic/FormElements/Header/Header.stories.js +0 -2
  12. package/dist/Atomic/FormElements/Input/Input.js +101 -98
  13. package/dist/Atomic/FormElements/Input/Input.scss +26 -19
  14. package/dist/Atomic/FormElements/Input/Input.stories.js +48 -27
  15. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +89 -0
  16. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +46 -0
  17. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +259 -0
  18. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +594 -0
  19. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +244 -0
  20. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +489 -0
  21. package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +156 -0
  22. package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +46 -0
  23. package/dist/Atomic/FormElements/InputDateRange/dependencies.js +249 -0
  24. package/dist/Atomic/FormElements/InputsRow/InputsRow.js +29 -6
  25. package/dist/Atomic/FormElements/InputsRow/InputsRow.scss +1 -3
  26. package/dist/Atomic/FormElements/InputsRow/InputsRow.stories.js +0 -2
  27. package/dist/Atomic/FormElements/Label/Label.js +4 -13
  28. package/dist/Atomic/FormElements/Label/Label.scss +3 -3
  29. package/dist/Atomic/FormElements/Label/Label.stories.js +5 -6
  30. package/dist/Atomic/FormElements/Modal/Modal.js +5 -7
  31. package/dist/Atomic/FormElements/Modal/Modal.scss +61 -7
  32. package/dist/Atomic/FormElements/Modal/Modal.stories.js +64 -18
  33. package/dist/Atomic/FormElements/MultiSelect/MultiSelect.js +3 -5
  34. package/dist/Atomic/FormElements/MultiSelect/MultiSelect.scss +1 -3
  35. package/dist/Atomic/FormElements/MultiSelect/MultiSelect.stories.js +0 -2
  36. package/dist/Atomic/FormElements/NavLine/NavLine.js +1 -1
  37. package/dist/Atomic/FormElements/NavLine/NavLine.scss +4 -6
  38. package/dist/Atomic/FormElements/NavLine/NavLine.stories.js +20 -12
  39. package/dist/Atomic/FormElements/RadioInput/RadioInput.stories.js +0 -2
  40. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +167 -0
  41. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
  42. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +81 -0
  43. package/dist/Atomic/FormElements/RangeInputs/RangeInputs.stories.js +0 -2
  44. package/dist/Atomic/FormElements/Switcher/Switcher.stories.js +0 -2
  45. package/dist/Atomic/FormElements/Table/Partials/TdHeader.js +2 -2
  46. package/dist/Atomic/FormElements/Table/Table.scss +1 -1
  47. package/dist/Atomic/FormElements/Table/TdTypes/TdActions.js +4 -4
  48. package/dist/Atomic/FormElements/Table/TdTypes/TdPriority.js +2 -2
  49. package/dist/Atomic/FormElements/Table/TdTypes/TdTypes.scss +4 -6
  50. package/dist/Atomic/FormElements/Table/TdTypes/TdWeight.js +2 -2
  51. package/dist/Atomic/FormElements/Tag/Tag.js +1 -1
  52. package/dist/Atomic/FormElements/Tag/Tag.stories.js +0 -2
  53. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +2 -2
  54. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.stories.js +0 -2
  55. package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.stories.js +0 -2
  56. package/dist/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  57. package/dist/Atomic/FormElements/Textarea/Textarea.stories.js +0 -2
  58. package/dist/Atomic/FormElements/TimeRange/TimeRange.js +1 -1
  59. package/dist/Atomic/FormElements/TimeRange/TimeRange.stories.js +0 -2
  60. package/dist/Atomic/MainMenu/MainMenu.js +3 -3
  61. package/dist/Atomic/MainMenu/MainMenu.scss +2 -2
  62. package/dist/Atomic/MainMenu/MainMenu.stories.js +11 -11
  63. package/dist/Atomic/UI/Accordion/Accordion.scss +2 -2
  64. package/dist/Atomic/UI/Accordion/Accordion.stories.js +4 -4
  65. package/dist/Atomic/UI/Accordion/AccordionItem.js +1 -1
  66. package/dist/Atomic/UI/AdvancedTag/AdvTag.js +3 -3
  67. package/dist/Atomic/UI/AdvancedTag/AdvancedTags.js +4 -3
  68. package/dist/Atomic/UI/AdvancedTag/AdvancedTags.scss +3 -5
  69. package/dist/Atomic/UI/AdvancedTag/AdvancedTags.stories.js +1 -3
  70. package/dist/Atomic/UI/Alert/Alert.scss +7 -0
  71. package/dist/Atomic/UI/Alert/Alert.stories.js +1 -3
  72. package/dist/Atomic/UI/Arrow/Arrow.js +80 -0
  73. package/dist/Atomic/UI/Arrow/Arrow.scss +19 -0
  74. package/dist/Atomic/UI/Arrow/Arrow.stories.js +46 -0
  75. package/dist/Atomic/UI/Button/Button.js +10 -19
  76. package/dist/Atomic/UI/Button/Button.scss +69 -41
  77. package/dist/Atomic/UI/Button/Button.stories.js +9 -25
  78. package/dist/Atomic/UI/Calendar/Calendar.js +146 -0
  79. package/dist/Atomic/UI/Calendar/Calendar.scss +544 -0
  80. package/dist/Atomic/UI/Calendar/Calendar.stories.js +38 -0
  81. package/dist/Atomic/UI/Header/partials/default_ava.png +0 -0
  82. package/dist/Atomic/UI/Hint/Hint.js +8 -13
  83. package/dist/Atomic/UI/Hint/Hint.scss +8 -12
  84. package/dist/Atomic/UI/Hint/Hint.stories.js +3 -4
  85. package/dist/Atomic/UI/Price/Price.js +33 -0
  86. package/dist/Atomic/UI/Price/Price.stories.js +42 -0
  87. package/dist/Atomic/UI/Status/Status.scss +1 -1
  88. package/dist/Atomic/UI/Status/Status.stories.js +4 -3
  89. package/dist/Functions/useClickOutside.js +25 -0
  90. package/dist/Functions/utils.js +10 -2
  91. package/dist/Molecular/Datepicker/Datepicker.js +451 -0
  92. package/dist/Molecular/Datepicker/Datepicker.scss +8 -0
  93. package/dist/Molecular/Datepicker/Datepicker.stories.js +44 -0
  94. package/dist/Molecular/Datepicker/components/Calendar.js +156 -0
  95. package/dist/Molecular/FormElements/FormElement.js +40 -0
  96. package/dist/Molecular/FormElements/FormElement.scss +8 -0
  97. package/dist/Molecular/FormElements/FormElement.stories.js +73 -0
  98. package/dist/scss/_vars.scss +3 -1
  99. package/dist/scss/main.scss +3 -3
  100. package/package.json +11 -6
  101. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.js +12 -2
  102. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.scss +92 -63
  103. package/src/Atomic/FormElements/CheckboxInput/CheckboxInput.stories.js +5 -6
  104. package/src/Atomic/FormElements/DateTime/DateTime.stories.js +1 -3
  105. package/src/Atomic/FormElements/DoubleString/DoubleString.stories.js +0 -2
  106. package/src/Atomic/FormElements/Dropdown/Dropdown.js +70 -29
  107. package/src/Atomic/FormElements/Dropdown/Dropdown.scss +26 -3
  108. package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js +37 -16
  109. package/src/Atomic/FormElements/Header/Header.js +8 -9
  110. package/src/Atomic/FormElements/Header/Header.scss +16 -5
  111. package/src/Atomic/FormElements/Header/Header.stories.js +0 -2
  112. package/src/Atomic/FormElements/Input/Input.js +83 -73
  113. package/src/Atomic/FormElements/Input/Input.scss +26 -19
  114. package/src/Atomic/FormElements/Input/Input.stories.js +34 -29
  115. package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +43 -0
  116. package/src/Atomic/FormElements/InputCalendar/InputCalendar.stories.js +27 -0
  117. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +241 -0
  118. package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +594 -0
  119. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +149 -0
  120. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +409 -0
  121. package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +114 -0
  122. package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +24 -0
  123. package/src/Atomic/FormElements/InputDateRange/dependencies.js +161 -0
  124. package/src/Atomic/FormElements/InputsRow/InputsRow.js +28 -5
  125. package/src/Atomic/FormElements/InputsRow/InputsRow.scss +1 -3
  126. package/src/Atomic/FormElements/InputsRow/InputsRow.stories.js +0 -2
  127. package/src/Atomic/FormElements/Label/Label.js +3 -6
  128. package/src/Atomic/FormElements/Label/Label.scss +3 -3
  129. package/src/Atomic/FormElements/Label/Label.stories.js +6 -6
  130. package/src/Atomic/FormElements/Modal/Modal.js +5 -8
  131. package/src/Atomic/FormElements/Modal/Modal.scss +61 -7
  132. package/src/Atomic/FormElements/Modal/Modal.stories.js +60 -15
  133. package/src/Atomic/FormElements/MultiSelect/MultiSelect.js +3 -5
  134. package/src/Atomic/FormElements/MultiSelect/MultiSelect.scss +1 -3
  135. package/src/Atomic/FormElements/MultiSelect/MultiSelect.stories.js +1 -2
  136. package/src/Atomic/FormElements/NavLine/NavLine.js +3 -3
  137. package/src/Atomic/FormElements/NavLine/NavLine.scss +4 -6
  138. package/src/Atomic/FormElements/NavLine/NavLine.stories.js +23 -13
  139. package/src/Atomic/FormElements/RadioInput/RadioInput.stories.js +0 -2
  140. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +146 -0
  141. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
  142. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +54 -0
  143. package/src/Atomic/FormElements/RangeInputs/RangeInputs.stories.js +0 -1
  144. package/src/Atomic/FormElements/Switcher/Switcher.stories.js +0 -2
  145. package/src/Atomic/FormElements/Table/Partials/TdHeader.js +1 -1
  146. package/src/Atomic/FormElements/Table/Table.scss +1 -1
  147. package/src/Atomic/FormElements/Table/TdTypes/TdActions.js +4 -4
  148. package/src/Atomic/FormElements/Table/TdTypes/TdPriority.js +3 -3
  149. package/src/Atomic/FormElements/Table/TdTypes/TdTypes.scss +4 -6
  150. package/src/Atomic/FormElements/Table/TdTypes/TdWeight.js +2 -2
  151. package/src/Atomic/FormElements/Tag/Tag.js +2 -2
  152. package/src/Atomic/FormElements/Tag/Tag.stories.js +0 -2
  153. package/src/Atomic/FormElements/TagsDropdown/TagsDropdown.js +3 -3
  154. package/src/Atomic/FormElements/TagsDropdown/TagsDropdown.stories.js +0 -2
  155. package/src/Atomic/FormElements/TextSwitcher/TextSwitcher.stories.js +0 -2
  156. package/src/Atomic/FormElements/Textarea/Textarea.scss +1 -1
  157. package/src/Atomic/FormElements/Textarea/Textarea.stories.js +0 -2
  158. package/src/Atomic/FormElements/TimeRange/TimeRange.js +1 -1
  159. package/src/Atomic/FormElements/TimeRange/TimeRange.stories.js +0 -2
  160. package/src/Atomic/MainMenu/MainMenu.js +3 -3
  161. package/src/Atomic/MainMenu/MainMenu.scss +2 -2
  162. package/src/Atomic/MainMenu/MainMenu.stories.js +11 -11
  163. package/src/Atomic/UI/Accordion/Accordion.scss +2 -2
  164. package/src/Atomic/UI/Accordion/Accordion.stories.js +4 -4
  165. package/src/Atomic/UI/Accordion/AccordionItem.js +1 -1
  166. package/src/Atomic/UI/AdvancedTag/AdvTag.js +3 -3
  167. package/src/Atomic/UI/AdvancedTag/AdvancedTags.js +3 -3
  168. package/src/Atomic/UI/AdvancedTag/AdvancedTags.scss +3 -5
  169. package/src/Atomic/UI/AdvancedTag/AdvancedTags.stories.js +1 -3
  170. package/src/Atomic/UI/Alert/Alert.scss +7 -0
  171. package/src/Atomic/UI/Alert/Alert.stories.js +1 -3
  172. package/src/Atomic/UI/Arrow/Arrow.js +41 -0
  173. package/src/Atomic/UI/Arrow/Arrow.scss +19 -0
  174. package/src/Atomic/UI/Arrow/Arrow.stories.js +32 -0
  175. package/src/Atomic/UI/Button/Button.js +6 -10
  176. package/src/Atomic/UI/Button/Button.scss +69 -41
  177. package/src/Atomic/UI/Button/Button.stories.js +9 -25
  178. package/src/Atomic/UI/Calendar/Calendar.js +109 -0
  179. package/src/Atomic/UI/Calendar/Calendar.scss +544 -0
  180. package/src/Atomic/UI/Calendar/Calendar.stories.js +24 -0
  181. package/src/Atomic/UI/Header/partials/default_ava.png +0 -0
  182. package/src/Atomic/UI/Hint/Hint.js +6 -9
  183. package/src/Atomic/UI/Hint/Hint.scss +8 -12
  184. package/src/Atomic/UI/Hint/Hint.stories.js +3 -3
  185. package/src/Atomic/UI/Price/Price.js +20 -0
  186. package/src/Atomic/UI/Price/Price.stories.js +30 -0
  187. package/src/Atomic/UI/Status/Status.scss +1 -1
  188. package/src/Atomic/UI/Status/Status.stories.js +4 -3
  189. package/src/Functions/useClickOutside.js +15 -0
  190. package/src/Functions/utils.js +6 -0
  191. package/src/Molecular/Datepicker/Datepicker.js +346 -0
  192. package/src/Molecular/Datepicker/Datepicker.scss +8 -0
  193. package/src/Molecular/Datepicker/Datepicker.stories.js +27 -0
  194. package/src/Molecular/Datepicker/components/Calendar.js +118 -0
  195. package/src/Molecular/FormElements/FormElement.js +18 -0
  196. package/src/Molecular/FormElements/FormElement.scss +8 -0
  197. package/src/Molecular/FormElements/FormElement.stories.js +59 -0
  198. package/src/scss/_vars.scss +3 -1
  199. package/src/scss/main.scss +3 -3
  200. package/dist/scss/anme/_anme-bootstrap-grid.scss +0 -748
  201. package/dist/scss/anme/_anme-elements.scss +0 -269
  202. package/dist/scss/anme/_anme-grid.scss +0 -111
  203. package/dist/scss/anme/_anme-justify.scss +0 -111
  204. package/dist/scss/anme/_anme-mixins-media.scss +0 -116
  205. package/dist/scss/anme/_anme-mixins.scss +0 -166
  206. package/dist/scss/anme/_anme-normalize.scss +0 -8
  207. package/dist/scss/anme/_anme-overall.scss +0 -34
  208. package/dist/scss/anme/_anme-padding-margins.scss +0 -419
  209. package/dist/scss/anme/_anme-table.scss +0 -81
  210. package/dist/scss/anme/_anme-theme.scss +0 -275
  211. package/dist/scss/anme/_anme-vars.scss +0 -91
  212. package/dist/scss/anme/_code-styling.scss +0 -23
  213. package/dist/scss/anme/styles.scss +0 -12
  214. package/src/scss/anme/_anme-bootstrap-grid.scss +0 -748
  215. package/src/scss/anme/_anme-elements.scss +0 -269
  216. package/src/scss/anme/_anme-grid.scss +0 -111
  217. package/src/scss/anme/_anme-justify.scss +0 -111
  218. package/src/scss/anme/_anme-mixins-media.scss +0 -116
  219. package/src/scss/anme/_anme-mixins.scss +0 -166
  220. package/src/scss/anme/_anme-normalize.scss +0 -8
  221. package/src/scss/anme/_anme-overall.scss +0 -34
  222. package/src/scss/anme/_anme-padding-margins.scss +0 -419
  223. package/src/scss/anme/_anme-table.scss +0 -81
  224. package/src/scss/anme/_anme-theme.scss +0 -275
  225. package/src/scss/anme/_anme-vars.scss +0 -91
  226. package/src/scss/anme/_code-styling.scss +0 -23
  227. package/src/scss/anme/styles.scss +0 -12
@@ -15,50 +15,50 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
15
15
 
16
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
17
 
18
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
19
-
20
18
  var _react = _interopRequireWildcard(require("react"));
21
19
 
22
20
  var _classnames = _interopRequireDefault(require("classnames"));
23
21
 
24
22
  var _reactFeather = require("react-feather");
25
23
 
26
- var _Label = _interopRequireDefault(require("../Label/Label"));
24
+ var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
27
25
 
28
26
  require("./Input.scss");
29
27
 
30
- var _excluded = ["error", "onChange", "disabled", "withDelete", "isNumeric", "min", "max", "value", "placeholder", "hint", "label", "hintSide", "className", "isLabelBold", "type", "onBlur", "icon", "isRequired"];
31
-
32
28
  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); }
33
29
 
34
30
  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; }
35
31
 
36
- var RC = 'input-classic';
32
+ 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; }
33
+
34
+ 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; }
37
35
 
38
36
  var Input = function Input(_ref) {
39
- var error = _ref.error,
40
- onChange = _ref.onChange,
37
+ var onChange = _ref.onChange,
41
38
  disabled = _ref.disabled,
42
39
  withDelete = _ref.withDelete,
43
40
  isNumeric = _ref.isNumeric,
44
- min = _ref.min,
41
+ _ref$numStep = _ref.numStep,
42
+ numStep = _ref$numStep === void 0 ? 1 : _ref$numStep,
43
+ _ref$min = _ref.min,
44
+ min = _ref$min === void 0 ? 0 : _ref$min,
45
45
  max = _ref.max,
46
- _ref$value = _ref.value,
47
- value = _ref$value === void 0 ? min : _ref$value,
46
+ value = _ref.value,
48
47
  placeholder = _ref.placeholder,
49
- hint = _ref.hint,
50
- label = _ref.label,
51
- hintSide = _ref.hintSide,
52
48
  className = _ref.className,
53
- isLabelBold = _ref.isLabelBold,
54
49
  _ref$type = _ref.type,
55
50
  type = _ref$type === void 0 ? 'text' : _ref$type,
56
- _ref$onBlur = _ref.onBlur,
57
- _onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
51
+ onBlur = _ref.onBlur,
52
+ onFocus = _ref.onFocus,
53
+ onKeyUp = _ref.onKeyUp,
54
+ mask = _ref.mask,
55
+ maskChar = _ref.maskChar,
56
+ formatChars = _ref.formatChars,
57
+ error = _ref.error,
58
58
  icon = _ref.icon,
59
- isRequired = _ref.isRequired,
60
- props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
59
+ symbolsLimit = _ref.symbolsLimit;
61
60
 
61
+ // STATES
62
62
  var _useState = (0, _react.useState)(false),
63
63
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
64
64
  isFocused = _useState2[0],
@@ -66,98 +66,101 @@ var Input = function Input(_ref) {
66
66
 
67
67
  var _useState3 = (0, _react.useState)(false),
68
68
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
69
- onInputHover = _useState4[0],
70
- setOnInputHover = _useState4[1];
71
-
72
- var _useState5 = (0, _react.useState)(false),
73
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
74
- isEditing = _useState6[0],
75
- setEditing = _useState6[1];
69
+ isEditing = _useState4[0],
70
+ setEditing = _useState4[1];
76
71
 
77
- var inputRef = (0, _react.useRef)(null);
72
+ var inputRef = (0, _react.useRef)(null); // HANDLES
78
73
 
79
- var changeHandler = function changeHandler(inputValue) {
80
- if (isNumeric || type === 'number' && inputValue !== '') {
81
- var totalValue = Number(+inputValue);
82
- if (totalValue >= (min !== null && min !== void 0 ? min : -Infinity) && totalValue <= (max !== null && max !== void 0 ? max : Infinity)) onChange(totalValue);
83
- return;
84
- }
74
+ var handle = {
75
+ change: function change(e) {
76
+ var inputValue = e.target ? e.target.value : e;
85
77
 
86
- onChange(inputValue);
87
- };
78
+ if (isNumeric || type === 'number' && inputValue !== '') {
79
+ inputValue = parseFloat(inputValue) || '';
88
80
 
89
- var toggleEditing = function toggleEditing() {
90
- setEditing(!isEditing);
91
- };
81
+ if (min && +min > inputValue) {
82
+ inputValue = min;
83
+ } else if (max && +max < inputValue) inputValue = max;
84
+ } else if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
92
85
 
93
- (0, _react.useEffect)(function () {
94
- if (isEditing) {
95
- inputRef.current.focus();
96
- }
97
- }, [isEditing, isFocused]);
98
- return /*#__PURE__*/_react.default.createElement("div", {
99
- className: (0, _classnames.default)(className, RC)
100
- }, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
101
- className: "".concat(RC, "-label"),
102
- isBold: isLabelBold,
103
- label: label,
104
- hint: hint,
105
- hintSide: hintSide,
106
- isRequired: isRequired
107
- }), /*#__PURE__*/_react.default.createElement("div", {
108
- onMouseEnter: function onMouseEnter() {
109
- return setOnInputHover(true);
86
+ onChange(inputValue.toString());
110
87
  },
111
- onMouseLeave: function onMouseLeave() {
112
- return setOnInputHover(false);
88
+ toggleEdit: function toggleEdit() {
89
+ setEditing(!isEditing);
90
+ onChange('');
113
91
  },
114
- className: (0, _classnames.default)("".concat(RC, "__wrap"), (0, _defineProperty2.default)({}, "".concat(RC, "__wrap_focus"), isFocused), (0, _defineProperty2.default)({}, "".concat(RC, "__wrap_error"), error), (0, _defineProperty2.default)({}, "".concat(RC, "__wrap_disabled"), disabled))
115
- }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
116
- ref: inputRef,
117
- className: (0, _classnames.default)("".concat(RC, "__input")),
118
- type: isNumeric ? 'number' : type,
119
- onChange: function onChange(e) {
120
- return changeHandler(e.target.value);
92
+ focus: function focus(e) {
93
+ setIsFocused(true);
94
+ if (onFocus) onFocus(e);
121
95
  },
122
- value: value || '',
123
- disabled: disabled,
124
- onBlur: function onBlur() {
96
+ blur: function blur(e) {
125
97
  setIsFocused(false);
126
98
  setEditing(false);
127
-
128
- _onBlur();
129
- },
130
- onFocus: function onFocus() {
131
- return setIsFocused(true);
99
+ if (onBlur) onBlur(e);
132
100
  },
133
- placeholder: placeholder
134
- }, props)), isNumeric && /*#__PURE__*/_react.default.createElement("div", {
135
- className: "".concat(RC, "__nums")
136
- }, /*#__PURE__*/_react.default.createElement("button", {
137
- onClick: function onClick() {
138
- return changeHandler(value - 1);
139
- },
140
- className: (0, _classnames.default)("".concat(RC, "__num-btn"), {
141
- disabled: value === min
142
- })
143
- }, /*#__PURE__*/_react.default.createElement(_reactFeather.FiMinus, null)), /*#__PURE__*/_react.default.createElement("button", {
144
- onClick: function onClick() {
145
- return changeHandler(value + 1);
146
- },
147
- className: (0, _classnames.default)("".concat(RC, "__num-btn"), {
148
- disabled: value === max
149
- })
150
- }, /*#__PURE__*/_react.default.createElement(_reactFeather.FiPlus, null))), withDelete && onInputHover && !isNumeric && /*#__PURE__*/_react.default.createElement("button", {
151
- className: (0, _classnames.default)("".concat(RC, "__close"), {
101
+ keyUp: function keyUp(e) {
102
+ return onKeyUp ? onKeyUp(e.keyCode, event) : null;
103
+ }
104
+ };
105
+ (0, _react.useEffect)(function () {
106
+ if (isEditing) inputRef.current.focus();
107
+ }, [isEditing, isFocused]);
108
+
109
+ var uniProps = _objectSpread(_objectSpread({
110
+ className: "input ".concat(className),
111
+ placeholder: placeholder,
112
+ value: value || '',
113
+ disabled: disabled,
114
+ onChange: handle.change,
115
+ onFocus: handle.focus,
116
+ onBlur: handle.blur,
117
+ onKeyUp: handle.keyUp,
118
+ min: min,
119
+ max: max
120
+ }, maskChar ? {
121
+ maskChar: maskChar
122
+ } : {}), formatChars ? {
123
+ formatChars: formatChars
124
+ } : {});
125
+
126
+ function renderInput() {
127
+ if (mask) {
128
+ return /*#__PURE__*/_react.default.createElement(_reactInputMask.default, (0, _extends2.default)({}, uniProps, {
129
+ ref: inputRef,
130
+ mask: mask
131
+ }));
132
+ }
133
+
134
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
135
+ ref: inputRef,
136
+ type: isNumeric ? 'number' : type
137
+ })), isNumeric && /*#__PURE__*/_react.default.createElement("div", {
138
+ className: "input__nums"
139
+ }, /*#__PURE__*/_react.default.createElement("button", {
140
+ onClick: function onClick() {
141
+ return handle.change(value - numStep);
142
+ },
143
+ className: (0, _classnames.default)("input__num-btn", {
144
+ disabled: value <= min
145
+ })
146
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.Minus, null)), /*#__PURE__*/_react.default.createElement("button", {
147
+ onClick: function onClick() {
148
+ return handle.change(+value + +numStep);
149
+ },
150
+ className: (0, _classnames.default)("input__num-btn", {
151
+ disabled: value >= max
152
+ })
153
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.Plus, null))));
154
+ }
155
+
156
+ return /*#__PURE__*/_react.default.createElement("div", {
157
+ className: (0, _classnames.default)("input__wrap", (0, _defineProperty2.default)({}, "input__wrap_focus", isFocused), (0, _defineProperty2.default)({}, "input__wrap_error", error), (0, _defineProperty2.default)({}, "input__wrap_disabled", disabled))
158
+ }, renderInput(), icon, withDelete && !isNumeric && /*#__PURE__*/_react.default.createElement("span", {
159
+ className: (0, _classnames.default)("input__close", {
152
160
  hidden: !value
153
161
  }),
154
- onClick: function onClick() {
155
- toggleEditing();
156
- onChange('');
157
- }
158
- }), icon !== null && icon !== void 0 ? icon : null), error && /*#__PURE__*/_react.default.createElement("span", {
159
- className: "".concat(RC, "__error")
160
- }, error));
162
+ onClick: handle.toggleEdit
163
+ }));
161
164
  };
162
165
 
163
166
  var _default = Input;
@@ -1,8 +1,14 @@
1
- @import "../../../scss/vars";
2
-
3
- .input-classic {
1
+ .input {
4
2
  position: relative;
5
3
  word-break: break-all;
4
+ border: none;
5
+ background: none;
6
+ padding: 0 10px;
7
+ width: 100%;
8
+ &::-webkit-outer-spin-button,
9
+ &::-webkit-inner-spin-button {
10
+ -webkit-appearance: none;
11
+ }
6
12
 
7
13
  &__wrap {
8
14
  display: flex;
@@ -12,8 +18,9 @@
12
18
  background-color: #fff;
13
19
  height: 28px;
14
20
  border-radius: 4px;
21
+
15
22
  &_focus {
16
- border-color: $color--primary;
23
+ border-color: #6b81dd;
17
24
  filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
18
25
  }
19
26
 
@@ -25,7 +32,7 @@
25
32
  }
26
33
 
27
34
  &_error {
28
- border-color: $color--secondary;
35
+ border-color: #f06d8d;
29
36
  }
30
37
  }
31
38
 
@@ -37,7 +44,7 @@
37
44
  }
38
45
 
39
46
  &_error {
40
- border-color: $color--secondary;
47
+ border-color: #f06d8d;
41
48
  }
42
49
 
43
50
  svg {
@@ -50,21 +57,12 @@
50
57
  box-sizing: border-box;
51
58
  font-size: 13px;
52
59
  font-weight: 400;
53
- color: $color--dark;
60
+ color: #1e1e2d;
54
61
  border: none;
55
62
  padding: 0 5px;
56
63
  border-radius: 4px;
57
64
  }
58
65
 
59
- &__error {
60
- margin-top: 2px;
61
- margin-left: 1px;
62
- position: absolute;
63
- display: block;
64
- font-size: 10px;
65
- color: $color--secondary;
66
- }
67
-
68
66
  &__close {
69
67
  position: relative;
70
68
  opacity: 0.6;
@@ -73,7 +71,8 @@
73
71
  background: none;
74
72
  cursor: pointer;
75
73
  margin-right: 4px;
76
-
74
+ visibility: hidden;
75
+ pointer-events: none;
77
76
  &:hover {
78
77
  opacity: 1;
79
78
  }
@@ -88,7 +87,7 @@
88
87
  margin: auto;
89
88
  height: 14px;
90
89
  width: 2px;
91
- background-color: $color--gray--dark;
90
+ background-color: #9aa0b9;
92
91
  }
93
92
 
94
93
  &:before {
@@ -117,7 +116,9 @@
117
116
  background: none;
118
117
  font-size: 20px;
119
118
  user-select: none;
120
-
119
+ &.disabled {
120
+ opacity: 0.3;
121
+ }
121
122
  svg {
122
123
  margin-right: 0;
123
124
  }
@@ -127,3 +128,9 @@
127
128
  margin-bottom: 5px;
128
129
  }
129
130
  }
131
+
132
+ .input__wrap:hover .input__close {
133
+ visibility: visible;
134
+ pointer-events: all;
135
+ }
136
+
@@ -15,9 +15,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
15
15
 
16
16
  var _react = _interopRequireWildcard(require("react"));
17
17
 
18
- var _Input = _interopRequireDefault(require("./Input"));
18
+ var _reactFeather = require("react-feather");
19
19
 
20
- require("../../../../scss/main.scss");
20
+ var _Input = _interopRequireDefault(require("./Input"));
21
21
 
22
22
  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); }
23
23
 
@@ -25,49 +25,63 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
25
25
 
26
26
  global.lng = 'en';
27
27
  var _default = {
28
- title: 'Input',
28
+ title: 'Form Elements/Input',
29
29
  component: _Input.default,
30
30
  argTypes: {
31
- hintSide: {
32
- description: 'string: ["right", "bottom", "top", "left"]',
33
- control: {
34
- type: 'select',
35
- options: ['right', 'bottom', 'top', 'left']
36
- }
37
- },
38
- hint: {
39
- description: 'string'
40
- },
41
31
  disabled: {
42
32
  description: 'boolean'
43
33
  },
44
34
  error: {
45
- description: 'text'
35
+ description: 'text - coloring input if is errored'
46
36
  },
47
37
  withDelete: {
48
- description: 'boolean'
38
+ description: 'boolean - add clear-cross by hover'
49
39
  },
50
40
  isNumeric: {
51
- description: 'boolean'
41
+ description: 'boolean - add plus/minus buttons, force input to numeric type'
42
+ },
43
+ numStep: {
44
+ description: 'number/text - plus/minus buttons factor (default: 1)'
52
45
  },
53
46
  min: {
54
- description: 'number'
47
+ description: 'number/text - minimal number for numeric input'
55
48
  },
56
49
  max: {
57
- description: 'number'
50
+ description: 'number/text - maximal number for numeric input'
58
51
  },
59
52
  placeholder: {
60
53
  description: 'text'
61
54
  },
62
- label: {
63
- description: 'text'
64
- },
65
55
  type: {
66
- description: 'string: any input type',
56
+ description: "'text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range'",
67
57
  control: {
68
58
  type: 'select',
69
- options: ['text', 'number']
59
+ options: ['text', 'number', 'password', 'color', 'date', 'datetime-local', 'month', 'time', 'email', 'range']
70
60
  }
61
+ },
62
+ icon: {
63
+ description: 'JSX'
64
+ },
65
+ value: {
66
+ description: '(* - required prop)'
67
+ },
68
+ className: {
69
+ description: 'string'
70
+ },
71
+ mask: {
72
+ description: 'string: force input to masked https://www.npmjs.com/package/react-input-mask'
73
+ },
74
+ symbolsLimit: {
75
+ description: 'Set limit of symbols in input, overhead will be ignored'
76
+ },
77
+ onBlur: {
78
+ description: 'custom callback on blur'
79
+ },
80
+ onFocus: {
81
+ description: 'custom callback on focus'
82
+ },
83
+ onKeyUp: {
84
+ description: 'custom callback on keyup, returns event keyCode'
71
85
  }
72
86
  }
73
87
  };
@@ -93,10 +107,17 @@ InputTemplate.args = {
93
107
  error: '',
94
108
  withDelete: true,
95
109
  isNumeric: false,
110
+ numStep: 1,
96
111
  min: '0',
97
- max: 5,
112
+ max: '5',
98
113
  placeholder: 'Placeholder',
99
- label: 'label',
100
- hint: 'hint',
101
- hintSide: 'bottom'
114
+ // mask: 'nnnnn0129',
115
+ // maskChar: '_',
116
+ // formatChars: {
117
+ // 'n': '[0-9]',
118
+ // 's': '[A-Za-z]',
119
+ // '*': '[A-Za-z0-9]'
120
+ // },
121
+ icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null),
122
+ symbolsLimit: 225
102
123
  };
@@ -0,0 +1,89 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.default = void 0;
11
+
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+
14
+ var _react = _interopRequireWildcard(require("react"));
15
+
16
+ var _moment = _interopRequireDefault(require("moment"));
17
+
18
+ var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
19
+
20
+ var _Calendar = _interopRequireDefault(require("../../UI/Calendar/Calendar"));
21
+
22
+ var _useClickOutside = require("../../../Functions/useClickOutside");
23
+
24
+ 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); }
25
+
26
+ 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; }
27
+
28
+ var InputCalendar = function InputCalendar(_ref) {
29
+ var data = _ref.data,
30
+ params = _ref.params;
31
+
32
+ var _useState = (0, _react.useState)(data),
33
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
34
+ date = _useState2[0],
35
+ setDate = _useState2[1];
36
+
37
+ var _useState3 = (0, _react.useState)(date),
38
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
39
+ inputValue = _useState4[0],
40
+ setInputValue = _useState4[1];
41
+
42
+ var _useState5 = (0, _react.useState)(false),
43
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
44
+ isOpened = _useState6[0],
45
+ setIsOpened = _useState6[1];
46
+
47
+ var calendarRef = (0, _react.useRef)(null);
48
+ (0, _useClickOutside.useClickOutside)(calendarRef, function () {
49
+ return setIsOpened(false);
50
+ });
51
+
52
+ var changeInputValue = function changeInputValue(value) {
53
+ if (!value.includes('_') && value) {
54
+ setDate((0, _moment.default)(value).format('L'));
55
+ setInputValue((0, _moment.default)(value).format('L'));
56
+ } else {
57
+ setInputValue(value);
58
+ }
59
+ };
60
+
61
+ var changeCalendarDay = function changeCalendarDay(value) {
62
+ setDate(value);
63
+ setInputValue(value);
64
+ };
65
+
66
+ return /*#__PURE__*/_react.default.createElement("div", {
67
+ className: "calendar-container",
68
+ ref: calendarRef
69
+ }, /*#__PURE__*/_react.default.createElement(_reactInputMask.default, {
70
+ mask: "99/99/9999",
71
+ value: inputValue,
72
+ onChange: function onChange(e) {
73
+ return changeInputValue(e.target.value);
74
+ },
75
+ className: "calendar-dropdown",
76
+ onFocus: function onFocus() {
77
+ return setIsOpened(!isOpened);
78
+ }
79
+ }), isOpened ? /*#__PURE__*/_react.default.createElement(_Calendar.default, {
80
+ date: date,
81
+ setDate: function setDate(newDate) {
82
+ return changeCalendarDay(newDate);
83
+ },
84
+ params: params
85
+ }) : null);
86
+ };
87
+
88
+ var _default = InputCalendar;
89
+ exports.default = _default;
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+
7
+ Object.defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+ exports.Calendar = exports.default = void 0;
11
+
12
+ var _react = _interopRequireWildcard(require("react"));
13
+
14
+ var _yup = require("yup");
15
+
16
+ var _InputCalendar = _interopRequireDefault(require("./InputCalendar"));
17
+
18
+ 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); }
19
+
20
+ 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; }
21
+
22
+ global.lng = 'en';
23
+ var _default = {
24
+ title: 'Form Elements/InputCalendar',
25
+ component: _InputCalendar.default
26
+ };
27
+ exports.default = _default;
28
+
29
+ var Template = function Template(args) {
30
+ var params = {
31
+ minDate: args === null || args === void 0 ? void 0 : args.minDate,
32
+ maxDate: args === null || args === void 0 ? void 0 : args.maxDate
33
+ };
34
+ return /*#__PURE__*/_react.default.createElement(_InputCalendar.default, {
35
+ data: args.date,
36
+ params: params
37
+ });
38
+ };
39
+
40
+ var Calendar = Template.bind({});
41
+ exports.Calendar = Calendar;
42
+ Calendar.args = {
43
+ date: '10/14/2021',
44
+ minDate: '10/11/2021',
45
+ maxDate: '10/25/2021'
46
+ };