intelicoreact 0.0.53 → 0.0.64

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 (51) hide show
  1. package/dist/Atomic/FormElements/DateTime/DateTime.stories.js +1 -1
  2. package/dist/Atomic/FormElements/Input/Input.js +5 -5
  3. package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +4 -4
  4. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +265 -0
  5. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss +569 -0
  6. package/dist/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +243 -0
  7. package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +486 -0
  8. package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +154 -0
  9. package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +46 -0
  10. package/dist/Atomic/FormElements/InputDateRange/dependencies.js +249 -0
  11. package/dist/Atomic/FormElements/Modal/Modal.stories.js +64 -18
  12. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +162 -0
  13. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
  14. package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +81 -0
  15. package/dist/Atomic/UI/Arrow/Arrow.js +80 -0
  16. package/dist/Atomic/UI/Arrow/Arrow.scss +19 -0
  17. package/dist/Atomic/UI/Arrow/Arrow.stories.js +46 -0
  18. package/dist/Atomic/UI/Button/Button.js +4 -2
  19. package/dist/Atomic/UI/Button/Button.scss +26 -0
  20. package/dist/Atomic/UI/Button/Button.stories.js +2 -2
  21. package/dist/Atomic/{FormElements → UI}/Calendar/Calendar.js +0 -0
  22. package/dist/Atomic/UI/Calendar/Calendar.scss +544 -0
  23. package/dist/Atomic/{FormElements → UI}/Calendar/Calendar.stories.js +5 -1
  24. package/dist/Functions/utils.js +10 -2
  25. package/package.json +7 -5
  26. package/src/Atomic/FormElements/DateTime/DateTime.stories.js +1 -1
  27. package/src/Atomic/FormElements/Input/Input.js +5 -5
  28. package/src/Atomic/FormElements/InputCalendar/InputCalendar.js +6 -6
  29. package/src/Atomic/FormElements/InputDateRange/InputDateRange.js +247 -0
  30. package/src/Atomic/FormElements/InputDateRange/InputDateRange.scss +569 -0
  31. package/src/Atomic/FormElements/InputDateRange/InputDateRange.stories.js +148 -0
  32. package/src/Atomic/FormElements/InputDateRange/components/Datepicker.js +406 -0
  33. package/src/Atomic/FormElements/InputDateRange/components/OpenedPart.js +112 -0
  34. package/src/Atomic/FormElements/InputDateRange/components/SelectItem.js +24 -0
  35. package/src/Atomic/FormElements/InputDateRange/dependencies.js +161 -0
  36. package/src/Atomic/FormElements/Modal/Modal.stories.js +60 -15
  37. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.js +143 -0
  38. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.scss +101 -0
  39. package/src/Atomic/FormElements/RangeCalendar/RangeCalendar.stories.js +54 -0
  40. package/src/Atomic/UI/Arrow/Arrow.js +41 -0
  41. package/src/Atomic/UI/Arrow/Arrow.scss +19 -0
  42. package/src/Atomic/UI/Arrow/Arrow.stories.js +32 -0
  43. package/src/Atomic/UI/Button/Button.js +3 -3
  44. package/src/Atomic/UI/Button/Button.scss +26 -0
  45. package/src/Atomic/UI/Button/Button.stories.js +4 -3
  46. package/src/Atomic/{FormElements → UI}/Calendar/Calendar.js +0 -0
  47. package/src/Atomic/UI/Calendar/Calendar.scss +544 -0
  48. package/src/Atomic/{FormElements → UI}/Calendar/Calendar.stories.js +5 -1
  49. package/src/Functions/utils.js +6 -0
  50. package/dist/Atomic/FormElements/Calendar/Calendar.scss +0 -543
  51. package/src/Atomic/FormElements/Calendar/Calendar.scss +0 -543
@@ -13,7 +13,7 @@ var _DateTime = _interopRequireDefault(require("./DateTime"));
13
13
 
14
14
  global.lng = 'en';
15
15
  var _default = {
16
- title: 'DateTime',
16
+ title: 'Form Elements/DateTime',
17
17
  component: _DateTime.default
18
18
  };
19
19
  exports.default = _default;
@@ -83,17 +83,17 @@ var Input = function Input(_ref) {
83
83
  setEditing(!isEditing);
84
84
  onChange('');
85
85
  },
86
- focus: function focus() {
86
+ focus: function focus(e) {
87
87
  setIsFocused(true);
88
- if (onFocus) onFocus();
88
+ if (onFocus) onFocus(e);
89
89
  },
90
- blur: function blur() {
90
+ blur: function blur(e) {
91
91
  setIsFocused(false);
92
92
  setEditing(false);
93
- if (onBlur) onBlur();
93
+ if (onBlur) onBlur(e);
94
94
  },
95
95
  keyUp: function keyUp(e) {
96
- return onKeyUp ? onKeyUp(e.keyCode) : null;
96
+ return onKeyUp ? onKeyUp(e.keyCode, event) : null;
97
97
  }
98
98
  };
99
99
  (0, _react.useEffect)(function () {
@@ -13,13 +13,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
13
13
 
14
14
  var _react = _interopRequireWildcard(require("react"));
15
15
 
16
- var _useClickOutside = require("../../../Functions/useClickOutside");
17
-
18
- var _Calendar = _interopRequireDefault(require("../Calendar/Calendar"));
16
+ var _moment = _interopRequireDefault(require("moment"));
19
17
 
20
18
  var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
21
19
 
22
- var _moment = _interopRequireDefault(require("moment"));
20
+ var _Calendar = _interopRequireDefault(require("../../UI/Calendar/Calendar"));
21
+
22
+ var _useClickOutside = require("../../../Functions/useClickOutside");
23
23
 
24
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
25
 
@@ -0,0 +1,265 @@
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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
14
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
+
16
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+
18
+ var _react = _interopRequireWildcard(require("react"));
19
+
20
+ var _classnames = _interopRequireDefault(require("classnames"));
21
+
22
+ var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
23
+
24
+ var _dependencies = require("./dependencies");
25
+
26
+ var _OpenedPart = _interopRequireDefault(require("./components/OpenedPart"));
27
+
28
+ var _Arrow = _interopRequireDefault(require("../../UI/Arrow/Arrow"));
29
+
30
+ require("./InputDateRange.scss");
31
+
32
+ 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
+
34
+ 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
+
36
+ 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; }
37
+
38
+ 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; }
39
+
40
+ var InputDateRange = function InputDateRange(props) {
41
+ var _ref, _INTERVALS$actualValu;
42
+
43
+ var txt = props.txt,
44
+ id = props.id,
45
+ label = props.label,
46
+ className = props.className,
47
+ buttonsTypes = props.buttonsTypes,
48
+ value = props.value,
49
+ _props$onChange = props.onChange,
50
+ onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
51
+ error = props.error,
52
+ disabled = props.disabled,
53
+ isHoverable = props.isHoverable,
54
+ short = props.short,
55
+ _props$isCompact = props.isCompact,
56
+ isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
57
+ _props$isIntervalsHid = props.isIntervalsHidden,
58
+ isIntervalsHidden = _props$isIntervalsHid === void 0 ? false : _props$isIntervalsHid,
59
+ _props$isCompareHidde = props.isCompareHidden,
60
+ isCompareHidden = _props$isCompareHidde === void 0 ? false : _props$isCompareHidde,
61
+ _props$hideArrows = props.hideArrows,
62
+ hideArrows = _props$hideArrows === void 0 ? false : _props$hideArrows,
63
+ isOptionsRight = props.isOptionsRight,
64
+ limitRange = props.limitRange,
65
+ isUseAbs = props.isUseAbs,
66
+ absTooltip = props.absTooltip;
67
+ var actualValues = (0, _dependencies.getActualDateRange)(value);
68
+
69
+ var _useToggle = (0, _dependencies.useToggle)(false),
70
+ isToggled = _useToggle.isToggled,
71
+ toggle = _useToggle.toggle,
72
+ toggleOn = _useToggle.toggleOn,
73
+ toggleOff = _useToggle.toggleOff;
74
+
75
+ var _useState = (0, _react.useState)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey),
76
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
77
+ current = _useState2[0],
78
+ setCurrent = _useState2[1];
79
+
80
+ var _useState3 = (0, _react.useState)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.compare),
81
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
82
+ isCompare = _useState4[0],
83
+ setIsCompare = _useState4[1];
84
+
85
+ var ref = !isUseAbs ? (0, _dependencies.useClickOutside)(toggleOff) : (0, _react.useRef)(null);
86
+ var internalContainerRef = (0, _react.useRef)(null);
87
+ var isEndDateNearFuture = (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).isSameOrAfter((0, _momentTimezone.default)());
88
+
89
+ var handleChange = function handleChange(input) {
90
+ var newValue = (0, _dependencies.getActualDateRange)(input);
91
+
92
+ var formatedValue = _objectSpread(_objectSpread(_objectSpread({
93
+ intervalKey: newValue.intervalKey,
94
+ start: newValue.start ? (0, _momentTimezone.default)(newValue.start).format('YYYY-MM-DDTHH:mm') : newValue.start,
95
+ end: newValue.end ? (0, _momentTimezone.default)(newValue.end).format('YYYY-MM-DDTHH:mm') : newValue.end
96
+ }, newValue.compare ? {
97
+ compare: newValue.compare
98
+ } : {}), newValue.startPrevDate ? {
99
+ startPrevDate: (0, _momentTimezone.default)(newValue.startPrevDate).format('YYYY-MM-DDTHH:mm')
100
+ } : {}), newValue.endPrevDate ? {
101
+ endPrevDate: (0, _momentTimezone.default)(newValue.endPrevDate).format('YYYY-MM-DDTHH:mm')
102
+ } : {});
103
+
104
+ onChange(formatedValue);
105
+ return formatedValue;
106
+ };
107
+
108
+ var Range = function Range() {
109
+ var SYMBOLS_QUANTITY_IF_TIME_ADDED = 13;
110
+ var start = actualValues.start,
111
+ end = actualValues.end;
112
+ if (!start || !end) return null;
113
+ var startTime = (0, _momentTimezone.default)(start).format('HH:mm');
114
+ var endTime = (0, _momentTimezone.default)(end).format('HH:mm');
115
+ var firstPart = "".concat((0, _momentTimezone.default)(start).format('ll'), " ").concat(startTime !== '00:00' ? "(".concat(startTime, ")") : '');
116
+ var secondPart = "".concat((endTime !== '00:00' ? (0, _momentTimezone.default)(end) : (0, _momentTimezone.default)(end).subtract(1, 'days')).format('ll'), " ").concat(endTime !== '00:00' ? "(".concat(endTime, ")") : '');
117
+
118
+ var getClasses = function getClasses(base) {
119
+ return (0, _classnames.default)('date-range-input__range-text', {
120
+ 'date-range-input__range-text_little': base.length > SYMBOLS_QUANTITY_IF_TIME_ADDED
121
+ });
122
+ };
123
+
124
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
125
+ className: getClasses(firstPart)
126
+ }, firstPart, endTime === '00:00' && (0, _momentTimezone.default)(end).isSame((0, _momentTimezone.default)(start).add(1, 'days'), 'day') ? '' : " - "), endTime === '00:00' && (0, _momentTimezone.default)(end).isSame((0, _momentTimezone.default)(start).add(1, 'days'), 'day') ? null : /*#__PURE__*/_react.default.createElement("span", {
127
+ className: getClasses(secondPart)
128
+ }, secondPart));
129
+ };
130
+
131
+ var slideInterval = function slideInterval() {
132
+ var _getActualDateRange;
133
+
134
+ var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'forward';
135
+ var start = actualValues.start,
136
+ end = actualValues.end;
137
+ var intervalHoursCount = (0, _momentTimezone.default)(end).diff(start, 'hours');
138
+ var newEnd, newStart;
139
+ var endHours = (0, _momentTimezone.default)(end).hours();
140
+ var startHours = (0, _momentTimezone.default)(start).hours();
141
+
142
+ if (direction === 'forward') {
143
+ newStart = (0, _momentTimezone.default)(end).add(endHours === 0 ? 0 : 1, 'day').hours(startHours).toDate();
144
+ newEnd = (0, _momentTimezone.default)(newStart).add(intervalHoursCount, 'hours');
145
+ } else {
146
+ newEnd = (0, _momentTimezone.default)(start).subtract(endHours === 0 ? 0 : 1, 'day').hours(endHours).toDate();
147
+ newStart = (0, _momentTimezone.default)(newEnd).subtract(intervalHoursCount, 'hours');
148
+ }
149
+
150
+ var startPrevDate = (0, _momentTimezone.default)(newStart).subtract(intervalHoursCount, 'hours').subtract(1, 'seconds');
151
+ var endPrevDate = (0, _momentTimezone.default)(newEnd).subtract(1, 'seconds');
152
+ handleChange(_objectSpread(_objectSpread({}, value), {}, {
153
+ intervalKey: (_getActualDateRange = (0, _dependencies.getActualDateRange)({
154
+ start: newStart,
155
+ end: newEnd
156
+ })) === null || _getActualDateRange === void 0 ? void 0 : _getActualDateRange.intervalKey,
157
+ start: newStart,
158
+ end: newEnd,
159
+ startPrevDate: startPrevDate,
160
+ endPrevDate: endPrevDate
161
+ }));
162
+ };
163
+
164
+ var handleArrowClick = function handleArrowClick(type) {
165
+ slideInterval(type === 'right' ? 'forward' : 'back');
166
+ toggleOff();
167
+ }; // const absData = useMemo(
168
+ // () => ({
169
+ // body: OpenedPart,
170
+ // props: {
171
+ // ...props,
172
+ // key: `${actualValues.start}-${actualValues.end}-${actualValues.intervalKey}-${current}-${isCompare}`,
173
+ // actualValues,
174
+ // current,
175
+ // setCurrent,
176
+ // isCompare,
177
+ // setIsCompare,
178
+ // toggleOff,
179
+ // onChange,
180
+ // },
181
+ // clickOutsideCallback: () => toggleOff(),
182
+ // top: internalContainerRef.current?.getBoundingClientRect()?.bottom || 0,
183
+ // left: internalContainerRef.current?.getBoundingClientRect()?.left || 0,
184
+ // }),
185
+ // [isToggled, value, actualValues, current, isCompare],
186
+ // );
187
+ // useEffect(() => {
188
+ // if (current && isUseAbs && absTooltip) onChange(current, 'absTooltip/props/current');
189
+ // }, [current]);
190
+ // useEffect(() => {
191
+ // if (isUseAbs) onChange(isToggled ? absData : null, 'absTooltip');
192
+ // }, [isToggled]);
193
+
194
+
195
+ return /*#__PURE__*/_react.default.createElement("div", {
196
+ ref: internalContainerRef,
197
+ className: (0, _classnames.default)('date-range-input', className, {
198
+ 'date-range-input_compact': isCompact,
199
+ 'date-range-input_hide-arrows': hideArrows,
200
+ 'date-range-input_focused': isToggled,
201
+ 'date-range-input_error': error,
202
+ 'date-range-input_disabled': disabled
203
+ })
204
+ }, /*#__PURE__*/_react.default.createElement("span", {
205
+ className: "date-range-input__label"
206
+ }, label), /*#__PURE__*/_react.default.createElement("div", {
207
+ className: "date-range-input__wraper",
208
+ ref: ref,
209
+ onMouseEnter: isHoverable && toggleOn,
210
+ onMouseLeave: isHoverable && toggleOff
211
+ }, /*#__PURE__*/_react.default.createElement("div", {
212
+ className: (0, _classnames.default)('date-range-input__absolut-wraper', {
213
+ 'date-range-input__absolut-wraper_right-position': isOptionsRight
214
+ })
215
+ }, /*#__PURE__*/_react.default.createElement("div", {
216
+ className: (0, _classnames.default)('date-range-input__static-part')
217
+ }, /*#__PURE__*/_react.default.createElement("button", {
218
+ id: id,
219
+ className: (0, _classnames.default)('date-range-input__toggle-button') // className={cn(
220
+ // 'date-range-input__toggle-button',
221
+ // { 'form-select__input--disabled': disabled },
222
+ // { 'form-select__input--opened': isToggled },
223
+ // { 'form-select__input--focused': isToggled },
224
+ // className,
225
+ // )}
226
+ ,
227
+ disabled: disabled,
228
+ onClick: !disabled && !isHoverable ? toggle : undefined
229
+ }, /*#__PURE__*/_react.default.createElement("div", {
230
+ className: "date-range-input__interval-key"
231
+ }, /*#__PURE__*/_react.default.createElement("span", null, (_ref = (txt === null || txt === void 0 ? void 0 : txt.labels) && txt.labels[actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey]) !== null && _ref !== void 0 ? _ref : ((_INTERVALS$actualValu = _dependencies.INTERVALS[actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey]) === null || _INTERVALS$actualValu === void 0 ? void 0 : _INTERVALS$actualValu.label) || _dependencies.CUSTOM_INTERVAL_KEY_TEXT), current !== _dependencies.ALL_TIME_KEY && /*#__PURE__*/_react.default.createElement("span", null, ":")), !isCompact && /*#__PURE__*/_react.default.createElement("div", {
232
+ className: (0, _classnames.default)('date-range-input__range', {})
233
+ }, /*#__PURE__*/_react.default.createElement(Range, null))), !isCompact && !hideArrows && /*#__PURE__*/_react.default.createElement("div", {
234
+ className: (0, _classnames.default)('date-range-input__arrows-block')
235
+ }, /*#__PURE__*/_react.default.createElement(_Arrow.default, {
236
+ type: "left",
237
+ className: "date-range-input__arrow",
238
+ onClick: function onClick() {
239
+ return handleArrowClick("left");
240
+ },
241
+ disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY
242
+ }), /*#__PURE__*/_react.default.createElement(_Arrow.default, {
243
+ type: "right",
244
+ className: "date-range-input__arrow",
245
+ onClick: function onClick() {
246
+ return handleArrowClick("right");
247
+ },
248
+ disabled: disabled || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === _dependencies.ALL_TIME_KEY || (actualValues === null || actualValues === void 0 ? void 0 : actualValues.intervalKey) === 'today' || (0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).add((0, _momentTimezone.default)(actualValues === null || actualValues === void 0 ? void 0 : actualValues.end).diff(actualValues === null || actualValues === void 0 ? void 0 : actualValues.start, 'hours'), 'hours').isAfter((0, _momentTimezone.default)().add(1, 'day').startOf('day'))
249
+ }))), isToggled && !isUseAbs && /*#__PURE__*/_react.default.createElement(_OpenedPart.default, (0, _extends2.default)({}, props, {
250
+ ref: internalContainerRef,
251
+ actualValues: actualValues,
252
+ current: current,
253
+ setCurrent: setCurrent,
254
+ isCompare: isCompare,
255
+ setIsCompare: setIsCompare,
256
+ toggleOff: toggleOff,
257
+ onChange: handleChange
258
+ })))), error && /*#__PURE__*/_react.default.createElement("span", {
259
+ className: "date-range-input__error-block"
260
+ }, error));
261
+ };
262
+
263
+ var _default = /*#__PURE__*/_react.default.memo(InputDateRange);
264
+
265
+ exports.default = _default;