@itcase/ui 1.0.11 → 1.0.14

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 (36) hide show
  1. package/dist/components/Avatar.js +4 -2
  2. package/dist/components/DatePicker.js +1091 -342
  3. package/dist/components/Empty.js +95 -0
  4. package/dist/components/FormField.js +1 -2
  5. package/dist/components/Grid.js +8 -14
  6. package/dist/components/InputPassword.js +160 -0
  7. package/dist/components/Label.js +0 -5
  8. package/dist/components/Modal.js +228 -10
  9. package/dist/components/Search.js +3 -4
  10. package/dist/components/Segmented.js +5 -1
  11. package/dist/components/Select.js +2 -3
  12. package/dist/components/Swiper.js +4208 -188
  13. package/dist/components/Switch.js +3 -2
  14. package/dist/components/Textarea.js +5 -1
  15. package/dist/components/Tile.js +0 -3
  16. package/dist/css/components/Choice/Choice.css +6 -0
  17. package/dist/css/components/DatePicker/DatePicker.css +30 -4
  18. package/dist/css/components/Empty/Empty.css +13 -0
  19. package/dist/css/components/Input/Input.css +12 -4
  20. package/dist/css/components/InputPassword/InputPassword.css +68 -0
  21. package/dist/css/components/Segmented/Segmented.css +16 -0
  22. package/dist/css/components/Swiper/Swiper.css +128 -83
  23. package/dist/{defineProperty-72768a50.js → defineProperty-f9e5e1f3.js} +14 -5
  24. package/dist/hooks/styleAttributes.js +5 -1
  25. package/package.json +27 -27
  26. package/dist/Modal-375ef8c3.js +0 -234
  27. package/dist/components/DateRangePicker.js +0 -218
  28. package/dist/components/Emoji.js +0 -124
  29. package/dist/components/Profile.js +0 -105
  30. package/dist/css/components/DateRangePicker/DateRangePicker.css +0 -1021
  31. package/dist/css/components/Emoji/Emoji.css +0 -104
  32. package/dist/css/components/Emoji/css/__icon/emoji__icon-shape.css +0 -12
  33. package/dist/css/components/Emoji/css/__icon/emoji__icon.css +0 -5
  34. package/dist/css/components/Profile/Profile.css +0 -19
  35. package/dist/index-738f53f6.js +0 -787
  36. package/dist/typeof-6dd323c6.js +0 -13
@@ -1,6 +1,14 @@
1
1
  'use strict';
2
2
 
3
- var _typeof = require('./typeof-6dd323c6.js');
3
+ function _typeof(obj) {
4
+ "@babel/helpers - typeof";
5
+
6
+ return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
7
+ return typeof obj;
8
+ } : function (obj) {
9
+ return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
10
+ }, _typeof(obj);
11
+ }
4
12
 
5
13
  function _arrayLikeToArray(arr, len) {
6
14
  if (len == null || len > arr.length) len = arr.length;
@@ -69,7 +77,7 @@ function _isNativeReflectConstruct() {
69
77
  }
70
78
 
71
79
  function _possibleConstructorReturn(self, call) {
72
- if (call && (_typeof._typeof(call) === "object" || typeof call === "function")) {
80
+ if (call && (_typeof(call) === "object" || typeof call === "function")) {
73
81
  return call;
74
82
  } else if (call !== void 0) {
75
83
  throw new TypeError("Derived constructors may only return object or undefined");
@@ -99,11 +107,11 @@ function _classCallCheck(instance, Constructor) {
99
107
  }
100
108
 
101
109
  function _toPrimitive(input, hint) {
102
- if (_typeof._typeof(input) !== "object" || input === null) return input;
110
+ if (_typeof(input) !== "object" || input === null) return input;
103
111
  var prim = input[Symbol.toPrimitive];
104
112
  if (prim !== undefined) {
105
113
  var res = prim.call(input, hint || "default");
106
- if (_typeof._typeof(res) !== "object") return res;
114
+ if (_typeof(res) !== "object") return res;
107
115
  throw new TypeError("@@toPrimitive must return a primitive value.");
108
116
  }
109
117
  return (hint === "string" ? String : Number)(input);
@@ -111,7 +119,7 @@ function _toPrimitive(input, hint) {
111
119
 
112
120
  function _toPropertyKey(arg) {
113
121
  var key = _toPrimitive(arg, "string");
114
- return _typeof._typeof(key) === "symbol" ? key : String(key);
122
+ return _typeof(key) === "symbol" ? key : String(key);
115
123
  }
116
124
 
117
125
  function _defineProperties(target, props) {
@@ -154,4 +162,5 @@ exports._createClass = _createClass;
154
162
  exports._createSuper = _createSuper;
155
163
  exports._defineProperty = _defineProperty;
156
164
  exports._inherits = _inherits;
165
+ exports._typeof = _typeof;
157
166
  exports._unsupportedIterableToArray = _unsupportedIterableToArray;
@@ -28,6 +28,10 @@ var styleAttributes = [
28
28
  /**
29
29
  * Grid
30
30
  */
31
- 'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows'];
31
+ 'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows',
32
+ /**
33
+ * Filter
34
+ */
35
+ 'backdropFilter'];
32
36
 
33
37
  exports.default = styleAttributes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.0.11",
3
+ "version": "1.0.14",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",
@@ -41,7 +41,7 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@itcase/common": "^1.1.2",
44
- "clsx": "^1.2.1",
44
+ "clsx": "^2.0.0",
45
45
  "html5-boilerplate": "^8.0.0",
46
46
  "js-cookie": "^3.0.5",
47
47
  "lodash": "^4.17.21",
@@ -55,44 +55,44 @@
55
55
  "react-paginate": "^8.2.0",
56
56
  "react-responsive": "^9.0.2",
57
57
  "react-scrollbars-custom": "^4.1.1",
58
- "react-select": "^5.7.3",
59
- "swiper": "^9.4.1",
58
+ "react-select": "^5.7.4",
59
+ "swiper": "^10.0.4",
60
60
  "uuid": "^9.0.0"
61
61
  },
62
62
  "devDependencies": {
63
- "@babel/core": "^7.22.5",
64
- "@babel/eslint-parser": "^7.22.5",
65
- "@babel/preset-env": "^7.22.5",
63
+ "@babel/core": "^7.22.9",
64
+ "@babel/eslint-parser": "^7.22.9",
65
+ "@babel/preset-env": "^7.22.9",
66
66
  "@babel/preset-react": "^7.22.5",
67
- "@commitlint/cli": "^17.6.6",
68
- "@commitlint/config-conventional": "^17.6.6",
67
+ "@commitlint/cli": "^17.6.7",
68
+ "@commitlint/config-conventional": "^17.6.7",
69
69
  "@rollup/plugin-babel": "^6.0.3",
70
- "@rollup/plugin-commonjs": "^25.0.2",
70
+ "@rollup/plugin-commonjs": "^25.0.3",
71
71
  "@rollup/plugin-json": "^6.0.0",
72
72
  "@rollup/plugin-node-resolve": "^15.1.0",
73
73
  "@rollup/plugin-terser": "^0.4.3",
74
74
  "@semantic-release/changelog": "^6.0.3",
75
75
  "@semantic-release/git": "^10.0.1",
76
- "@semantic-release/release-notes-generator": "^11.0.3",
77
- "babel-loader": "^9.1.2",
76
+ "@semantic-release/release-notes-generator": "^11.0.4",
77
+ "babel-loader": "^9.1.3",
78
78
  "babel-plugin-inline-react-svg": "^2.0.2",
79
79
  "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
80
- "eslint": "8.43.0",
81
- "eslint-config-prettier": "^8.8.0",
80
+ "eslint": "8.45.0",
81
+ "eslint-config-prettier": "^8.9.0",
82
82
  "eslint-config-standard": "^17.1.0",
83
83
  "eslint-plugin-babel": "^5.3.1",
84
- "eslint-plugin-import": "^2.27.5",
84
+ "eslint-plugin-import": "^2.28.0",
85
85
  "eslint-plugin-n": "^16.0.1",
86
86
  "eslint-plugin-node": "^11.1.0",
87
- "eslint-plugin-prettier": "^4.2.1",
87
+ "eslint-plugin-prettier": "^5.0.0",
88
88
  "eslint-plugin-promise": "^6.1.1",
89
- "eslint-plugin-react": "^7.32.2",
89
+ "eslint-plugin-react": "^7.33.0",
90
90
  "eslint-plugin-react-hooks": "^4.6.0",
91
91
  "eslint-plugin-standard": "^5.0.0",
92
92
  "husky": "^8.0.3",
93
93
  "lint-staged": "^13.2.3",
94
- "npm": "^9.7.2",
95
- "postcss": "^8.4.24",
94
+ "npm": "^9.8.1",
95
+ "postcss": "^8.4.27",
96
96
  "postcss-aspect-ratio-polyfill": "^2.0.0",
97
97
  "postcss-cli": "^10.1.0",
98
98
  "postcss-combine-duplicated-selectors": "^10.0.3",
@@ -100,7 +100,7 @@
100
100
  "postcss-dark-theme-class": "^0.7.3",
101
101
  "postcss-discard-duplicates": "^6.0.0",
102
102
  "postcss-each": "^1.1.0",
103
- "postcss-easings": "^3.0.1",
103
+ "postcss-easings": "^4.0.0",
104
104
  "postcss-flexbugs-fixes": "^5.0.2",
105
105
  "postcss-hexrgba": "^2.1.0",
106
106
  "postcss-import": "^15.1.0",
@@ -110,18 +110,18 @@
110
110
  "postcss-nested-ancestors": "^3.0.0",
111
111
  "postcss-normalize": "^10.0.1",
112
112
  "postcss-prepend-imports": "^1.0.1",
113
- "postcss-preset-env": "^8.5.1",
113
+ "postcss-preset-env": "^9.1.0",
114
114
  "postcss-pxtorem": "^6.0.0",
115
115
  "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
116
116
  "postcss-sort-media-queries": "^5.2.0",
117
- "prettier": "^2.8.8",
117
+ "prettier": "^3.0.0",
118
118
  "react-datepicker": "^4.16.0",
119
- "rollup": "^3.26.0",
119
+ "rollup": "^3.26.3",
120
120
  "rollup-plugin-peer-deps-external": "^2.2.4",
121
- "semantic-release": "^21.0.6",
122
- "stylelint": "^15.9.0",
123
- "stylelint-config-standard": "^33.0.0",
124
- "stylelint-no-unsupported-browser-features": "^6.1.0",
121
+ "semantic-release": "^21.0.7",
122
+ "stylelint": "^15.10.2",
123
+ "stylelint-config-standard": "^34.0.0",
124
+ "stylelint-no-unsupported-browser-features": "^7.0.0",
125
125
  "stylelint-order": "^6.0.3"
126
126
  }
127
127
  }
@@ -1,234 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var PropTypes = require('prop-types');
5
- var ReactDOM = require('react-dom');
6
- var clsx = require('clsx');
7
- var index = require('./components/Fader.js');
8
- var useStyles = require('./useStyles-e4accb53.js');
9
- var useDeviceTargetClass = require('./hooks/useDeviceTargetClass.js');
10
-
11
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
12
-
13
- var React__default = /*#__PURE__*/_interopDefault(React);
14
- var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
15
- var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
16
- var clsx__default = /*#__PURE__*/_interopDefault(clsx);
17
-
18
- var getOrCreateModalElement = function getOrCreateModalElement(modalQuerySelector, className) {
19
- if (className === void 0) {
20
- className = '';
21
- }
22
- // prettier-ignore
23
- var classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
24
- var modalElement = document.querySelector(modalQuerySelector);
25
- if (!modalElement) {
26
- // Add modal element into the DOM on mount.
27
- modalElement = document.createElement('div');
28
- modalElement.setAttribute('id', 'modal-global');
29
- modalElement.classList.add('modal');
30
- if (classList.length) {
31
- var _modalElement$classLi;
32
- (_modalElement$classLi = modalElement.classList).add.apply(_modalElement$classLi, classList);
33
- }
34
- document.body.prepend(modalElement);
35
- }
36
- return modalElement;
37
- };
38
-
39
- // Modal component that is an abstraction around the portal API.
40
- var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props, ref) {
41
- var children = props.children,
42
- className = props.className,
43
- closeButton = props.closeButton,
44
- contentClassName = props.contentClassName,
45
- id = props.id,
46
- isFader = props.isFader,
47
- faderFill = props.faderFill,
48
- faderFillGradient = props.faderFillGradient,
49
- faderOpacity = props.faderOpacity,
50
- initialIsOpen = props.isOpen,
51
- isScrollOnOpen = props.isScrollOnOpen,
52
- isSetFocusOnOpen = props.isSetFocusOnOpen,
53
- modalQuerySelector = props.modalQuerySelector,
54
- isOutsideClose = props.isOutsideClose,
55
- onCloseModal = props.onCloseModal,
56
- onOpenModal = props.onOpenModal;
57
-
58
- // Query DOM element
59
- var _useState = React.useState(null),
60
- modalElement = _useState[0],
61
- setModalElement = _useState[1];
62
- React.useLayoutEffect(function () {
63
- var element = getOrCreateModalElement(modalQuerySelector, className);
64
- setModalElement(element);
65
- if (element) {
66
- addModalProps(element);
67
- }
68
- }, []);
69
- var modalContentRef = React.useRef(null);
70
- var modalFaderRef = React.useRef(null);
71
- var _useState2 = React.useState(initialIsOpen),
72
- isOpen = _useState2[0],
73
- setIsOpen = _useState2[1];
74
- var addModalProps = React.useCallback(function (element) {
75
- // Change class need in "useEffect"
76
- if (isOpen) {
77
- // Show modal
78
- element.classList.add('modal_state_visible');
79
- // Scroll to opened modal
80
- if (isScrollOnOpen) {
81
- // modalContentRef.current.style.top = `${window.visualViewport.pageTop}px`
82
- element.scrollIntoView({
83
- block: 'center',
84
- behavior: 'smooth'
85
- });
86
- }
87
-
88
- // "setTimeout" in this implementation is needs for set focus on modal
89
- // after "onMouseDown" event on button
90
- if (isSetFocusOnOpen) {
91
- setTimeout(function () {
92
- return modalContentRef.current.focus();
93
- }, 0);
94
- }
95
- } else if (!element.children.length) {
96
- // Hide modal if has no children
97
- element.classList.remove('modal_state_visible');
98
- }
99
- }, [isOpen, isSetFocusOnOpen]);
100
- React.useEffect(function () {
101
- if (!modalElement) {
102
- return;
103
- }
104
- addModalProps(modalElement);
105
- }, [isOpen]); // eslint-disable-line
106
-
107
- // Show modal with children content
108
- var openModal = React.useCallback(function () {
109
- setIsOpen(true);
110
-
111
- // Callback
112
- if (typeof onOpenModal === 'function') {
113
- onOpenModal();
114
- }
115
-
116
- /* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
117
- // If current modal is already opened
118
- // Move content to end of modal root container. For order in DOM.
119
- const modalContentElement = modalContentRef.current
120
- if (modalContentElement) {
121
- modalContentElement.parentNode.appendChild(modalContentElement)
122
- }
123
- // Also move fader to end of modal root container after container
124
- const modalFaderElement = modalFaderRef.current
125
- if (modalFaderElement) {
126
- modalFaderElement.parentNode.appendChild(modalFaderElement)
127
- }
128
- */
129
- }, [onOpenModal]);
130
-
131
- // Hide modal and unmount children content
132
- var closeModal = React.useCallback(function (event) {
133
- if (event === void 0) {
134
- event = {};
135
- }
136
- var hasRelatedTarget = event.relatedTarget && modalElement.contains(event.relatedTarget);
137
- if (hasRelatedTarget) {
138
- return event;
139
- }
140
- setIsOpen(false);
141
-
142
- // Callback
143
- if (typeof onCloseModal === 'function') {
144
- onCloseModal();
145
- }
146
- }, [modalElement, onCloseModal]);
147
-
148
- // Save ref things
149
- React.useImperativeHandle(ref, function () {
150
- return {
151
- isOpen: isOpen,
152
- openModal: openModal,
153
- closeModal: closeModal,
154
- modalElement: modalElement
155
- };
156
- });
157
- var contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
158
- prefix: 'fill_',
159
- propsKey: 'contentFill'
160
- });
161
- var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
162
- prefix: 'modal-shape_',
163
- propsKey: 'shape'
164
- });
165
- var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
166
- prefix: 'border-color_',
167
- propsKey: 'borderColor'
168
- });
169
- var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
170
- prefix: 'border-width_',
171
- propsKey: 'borderWidth'
172
- });
173
- var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
174
- prefix: 'border-type_',
175
- propsKey: 'borderType'
176
- });
177
- var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
178
- prefix: 'elevation_',
179
- propsKey: 'elevation'
180
- });
181
- var _useStyles = useStyles.useStyles(props),
182
- modalStyles = _useStyles.styles;
183
-
184
- // Use a portal to render the children into the element
185
- return modalElement && /*#__PURE__*/ReactDOM__default.default.createPortal(
186
- // Any valid React child: JSX, strings, arrays, etc.
187
- isOpen ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
188
- className: clsx__default.default('modal-content', contentClassName, contentFillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass),
189
- id: id,
190
- ref: modalContentRef,
191
- tabIndex: 0,
192
- onBlur: isOutsideClose ? undefined : closeModal,
193
- style: modalStyles
194
- }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
195
- className: "modal-content__close",
196
- onClick: closeModal
197
- }, closeButton), children), /*#__PURE__*/React__default.default.createElement(index.Fader, {
198
- ref: modalFaderRef,
199
- fill: faderFill,
200
- fillGradient: faderFillGradient,
201
- opacity: faderOpacity,
202
- className: "modal__fader",
203
- isFader: isFader
204
- })) : null,
205
- // A DOM element
206
- modalElement);
207
- });
208
- Modal.propTypes = {
209
- children: PropTypes__default.default.any,
210
- className: PropTypes__default.default.string,
211
- closeIcon: PropTypes__default.default.string,
212
- closeText: PropTypes__default.default.string,
213
- faderFill: PropTypes__default.default.string,
214
- faderFillGradient: PropTypes__default.default.string,
215
- faderOpacity: PropTypes__default.default.string,
216
- contentClassName: PropTypes__default.default.string,
217
- id: PropTypes__default.default.string,
218
- isFader: PropTypes__default.default.bool,
219
- isScrollOnOpen: PropTypes__default.default.bool,
220
- isSetFocusOnOpen: PropTypes__default.default.bool,
221
- modalQuerySelector: PropTypes__default.default.string,
222
- isOutsideClose: PropTypes__default.default.bool,
223
- onCloseModal: PropTypes__default.default.func,
224
- onOpenModal: PropTypes__default.default.func
225
- };
226
- Modal.defaultProps = {
227
- isFader: true,
228
- isOpen: false,
229
- isScrollOnOpen: true,
230
- isSetFocusOnOpen: true,
231
- modalQuerySelector: '#modal-global'
232
- };
233
-
234
- exports.Modal = Modal;
@@ -1,218 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var clsx = require('clsx');
5
- var reactDateRange = require('react-date-range');
6
- var luxon = require('luxon');
7
- var index$1 = require('../index-738f53f6.js');
8
- var index$2 = require('./Button.js');
9
- var Modal = require('../Modal-375ef8c3.js');
10
- require('./Loader.js');
11
- var index = require('./Input.js');
12
- require('../typeof-6dd323c6.js');
13
- require('prop-types');
14
- require('../constants/componentProps/borderType.js');
15
- require('../constants/componentProps/fill.js');
16
- require('../constants/componentProps/horizontalResizeMode.js');
17
- require('../constants/componentProps/shape.js');
18
- require('../constants/componentProps/size.js');
19
- require('../constants/componentProps/type.js');
20
- require('../constants/componentProps/width.js');
21
- require('./Icon.js');
22
- require('react-inlinesvg');
23
- require('../constants/componentProps/iconSize.js');
24
- require('../constants/componentProps/strokeColor.js');
25
- require('./Link.js');
26
- require('../useStyles-e4accb53.js');
27
- require('lodash/camelCase');
28
- require('lodash/maxBy');
29
- require('lodash/upperFirst');
30
- require('../hooks/styleAttributes.js');
31
- require('../context/UIContext.js');
32
- require('../hooks/useMediaQueries.js');
33
- require('react-responsive');
34
- require('../constants/componentProps/textColor.js');
35
- require('../constants/componentProps/textGradient.js');
36
- require('../constants/componentProps/textStyle.js');
37
- require('../constants/componentProps/textWeight.js');
38
- require('../constants/componentProps/underline.js');
39
- require('../hooks/useDeviceTargetClass.js');
40
- require('lodash/castArray');
41
- require('./Text.js');
42
- require('../constants/componentProps/textColorActive.js');
43
- require('../constants/componentProps/textColorHover.js');
44
- require('react-dom');
45
- require('./Fader.js');
46
- require('../constants/componentProps/fillGradient.js');
47
-
48
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
49
-
50
- var React__default = /*#__PURE__*/_interopDefault(React);
51
- var clsx__default = /*#__PURE__*/_interopDefault(clsx);
52
-
53
- var DateRangePickerInput = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
54
- var onChange = props.onChange,
55
- onFocus = props.onFocus,
56
- toFormat = props.toFormat,
57
- value = props.value,
58
- _props$initialDate = props.initialDate,
59
- initialDate = _props$initialDate === void 0 ? new Date() : _props$initialDate,
60
- modalIsOpen = props.modalIsOpen,
61
- modalIsFader = props.modalIsFader,
62
- modalIsOutsideClose = props.modalIsOutsideClose,
63
- modalShape = props.modalShape,
64
- modalElevation = props.modalElevation,
65
- modalPadding = props.modalPadding,
66
- dateRangeProps = props.dateRangeProps,
67
- primaryButtonShape = props.primaryButtonShape,
68
- secondaryButtonShape = props.secondaryButtonShape,
69
- primaryButtonFill = props.primaryButtonFill,
70
- primaryButtonFillHover = props.primaryButtonFillHover,
71
- primaryButtonSize = props.primaryButtonSize,
72
- primaryButtonLabelTextColor = props.primaryButtonLabelTextColor,
73
- primaryButtonLabelSize = props.primaryButtonLabelSize,
74
- primaryButtonLabelTextWeight = props.primaryButtonLabelTextWeight,
75
- primaryButtonLabel = props.primaryButtonLabel,
76
- secondaryButtonFill = props.secondaryButtonFill,
77
- secondaryButtonFillHover = props.secondaryButtonFillHover,
78
- secondaryButtonSize = props.secondaryButtonSize,
79
- secondaryButtonLabelTextColor = props.secondaryButtonLabelTextColor,
80
- secondaryButtonLabelSize = props.secondaryButtonLabelSize,
81
- secondaryButtonLabelTextWeight = props.secondaryButtonLabelTextWeight,
82
- secondaryButtonLabel = props.secondaryButtonLabel,
83
- placeholder = props.placeholder,
84
- inputProps = props.inputProps;
85
- var rangeRef = React.useRef(null);
86
- var modalRef = React.useRef(null);
87
- var onClickSave = React.useCallback(function () {
88
- var _rangeRef$current;
89
- var value = (_rangeRef$current = rangeRef.current) == null ? void 0 : _rangeRef$current.value;
90
- if (onChange) {
91
- onChange(value);
92
- }
93
- modalRef.current.closeModal();
94
- }, [onChange]);
95
- var onClickCancel = React.useCallback(function () {
96
- modalRef.current.closeModal();
97
- }, []);
98
-
99
- // Create JS Date object for Calendar component
100
- var _useState = React.useState(function () {
101
- var startDate = initialDate.startDate,
102
- endDate = initialDate.endDate;
103
- if (typeof initialDate === 'string' && initialDate.includes('-')) {
104
- var _initialDate$split = initialDate.split(' - ');
105
- startDate = _initialDate$split[0];
106
- endDate = _initialDate$split[1];
107
- }
108
- var state = {
109
- startDate: null,
110
- endDate: null,
111
- key: 'date'
112
- };
113
- if (!startDate && !endDate) {
114
- return state;
115
- }
116
- if (typeof startDate === 'string' && typeof endDate === 'string') {
117
- state.startDate = luxon.DateTime.fromISO(startDate).toJSDate();
118
- state.endDate = luxon.DateTime.fromISO(endDate).toJSDate();
119
- }
120
- if (startDate instanceof Date && endDate instanceof Date) {
121
- state.startDate = startDate;
122
- state.endDate = endDate;
123
- }
124
- return state;
125
- }),
126
- dateRanges = _useState[0],
127
- setDateRanges = _useState[1];
128
- React.useImperativeHandle(ref, function () {
129
- var startDate = luxon.DateTime.fromJSDate(dateRanges.startDate).toISODate();
130
- var endDate = luxon.DateTime.fromJSDate(dateRanges.endDate).toISODate();
131
- return {
132
- value: startDate + " - " + endDate
133
- };
134
- });
135
- var onChangeDate = React.useCallback(function (range) {
136
- setDateRanges(function (prevState) {
137
- var _range$date, _range$date2;
138
- return Object.assign({}, prevState, {
139
- startDate: (_range$date = range.date) == null ? void 0 : _range$date.startDate,
140
- endDate: (_range$date2 = range.date) == null ? void 0 : _range$date2.endDate
141
- });
142
- });
143
- }, []);
144
- var onFocusInput = React.useCallback(function () {
145
- onFocus && onFocus();
146
- modalRef.current.openModal();
147
- }, [onFocus]);
148
- return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(index.Input, Object.assign({
149
- readonly: "true",
150
- type: "text",
151
- onFocus: onFocusInput,
152
- value: value
153
- // onBlur={input.onBlur}
154
- ,
155
- onChange: function onChange() {
156
- /* set empty function for disable react warning */
157
- },
158
- placeholder: placeholder
159
- }, inputProps)), /*#__PURE__*/React__default.default.createElement(Modal.Modal, {
160
- ref: modalRef,
161
- isOpen: modalIsOpen,
162
- isFader: modalIsFader,
163
- isOutsideClose: modalIsOutsideClose,
164
- shape: modalShape,
165
- elevation: modalElevation,
166
- padding: modalPadding
167
- }, /*#__PURE__*/React__default.default.createElement(reactDateRange.DateRange, Object.assign({
168
- locale: index$1.ru,
169
- className: clsx__default.default('date-range-picker'),
170
- ranges: [dateRanges],
171
- toFormat: toFormat,
172
- weekdayDisplayFormat: "EEEEEE",
173
- dayDisplayFormat: "d",
174
- showDateDisplay: false,
175
- onChange: onChangeDate
176
- }, dateRangeProps)), /*#__PURE__*/React__default.default.createElement(index$2.Button, {
177
- width: "fill",
178
- fill: primaryButtonFill,
179
- fillHover: primaryButtonFillHover,
180
- size: primaryButtonSize,
181
- labelTextColor: primaryButtonLabelTextColor,
182
- labelSize: primaryButtonLabelSize,
183
- labelTextWeight: primaryButtonLabelTextWeight,
184
- label: primaryButtonLabel,
185
- shape: primaryButtonShape,
186
- onClick: onClickSave
187
- }), /*#__PURE__*/React__default.default.createElement(index$2.Button, {
188
- width: "fill",
189
- fill: secondaryButtonFill,
190
- fillHover: secondaryButtonFillHover,
191
- size: secondaryButtonSize,
192
- labelTextColor: secondaryButtonLabelTextColor,
193
- labelSize: secondaryButtonLabelSize,
194
- shape: secondaryButtonShape,
195
- labelTextWeight: secondaryButtonLabelTextWeight,
196
- label: secondaryButtonLabel,
197
- onClick: onClickCancel
198
- })));
199
- });
200
- DateRangePickerInput.displayName = 'DateRangePickerInput';
201
- DateRangePickerInput.defaultProps = {
202
- primaryButtonFill: 'accentPrimary',
203
- primaryButtonFillHover: 'accentPrimaryHover',
204
- primaryButtonSize: 'xl',
205
- primaryButtonShape: 'rounded',
206
- primaryButtonLabelTextColor: 'accentTextPrimary',
207
- primaryButtonLabelSize: 'l',
208
- primaryButtonLabel: 'OK',
209
- secondaryButtonFill: 'surfaceSecondary',
210
- secondaryButtonFillHover: 'surfaceSecondaryHover',
211
- secondaryButtonSize: 'xl',
212
- secondaryButtonShape: 'rounded',
213
- secondaryButtonLabelTextColor: 'surfaceTextPrimary',
214
- secondaryButtonLabelSize: 'l',
215
- secondaryButtonLabel: 'Отмена'
216
- };
217
-
218
- exports.DateRangePickerInput = DateRangePickerInput;