@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.
- package/dist/components/Avatar.js +4 -2
- package/dist/components/DatePicker.js +1091 -342
- package/dist/components/Empty.js +95 -0
- package/dist/components/FormField.js +1 -2
- package/dist/components/Grid.js +8 -14
- package/dist/components/InputPassword.js +160 -0
- package/dist/components/Label.js +0 -5
- package/dist/components/Modal.js +228 -10
- package/dist/components/Search.js +3 -4
- package/dist/components/Segmented.js +5 -1
- package/dist/components/Select.js +2 -3
- package/dist/components/Swiper.js +4208 -188
- package/dist/components/Switch.js +3 -2
- package/dist/components/Textarea.js +5 -1
- package/dist/components/Tile.js +0 -3
- package/dist/css/components/Choice/Choice.css +6 -0
- package/dist/css/components/DatePicker/DatePicker.css +30 -4
- package/dist/css/components/Empty/Empty.css +13 -0
- package/dist/css/components/Input/Input.css +12 -4
- package/dist/css/components/InputPassword/InputPassword.css +68 -0
- package/dist/css/components/Segmented/Segmented.css +16 -0
- package/dist/css/components/Swiper/Swiper.css +128 -83
- package/dist/{defineProperty-72768a50.js → defineProperty-f9e5e1f3.js} +14 -5
- package/dist/hooks/styleAttributes.js +5 -1
- package/package.json +27 -27
- package/dist/Modal-375ef8c3.js +0 -234
- package/dist/components/DateRangePicker.js +0 -218
- package/dist/components/Emoji.js +0 -124
- package/dist/components/Profile.js +0 -105
- package/dist/css/components/DateRangePicker/DateRangePicker.css +0 -1021
- package/dist/css/components/Emoji/Emoji.css +0 -104
- package/dist/css/components/Emoji/css/__icon/emoji__icon-shape.css +0 -12
- package/dist/css/components/Emoji/css/__icon/emoji__icon.css +0 -5
- package/dist/css/components/Profile/Profile.css +0 -19
- package/dist/index-738f53f6.js +0 -787
- package/dist/typeof-6dd323c6.js +0 -13
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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.
|
|
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": "^
|
|
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.
|
|
59
|
-
"swiper": "^
|
|
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.
|
|
64
|
-
"@babel/eslint-parser": "^7.22.
|
|
65
|
-
"@babel/preset-env": "^7.22.
|
|
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.
|
|
68
|
-
"@commitlint/config-conventional": "^17.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.
|
|
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.
|
|
77
|
-
"babel-loader": "^9.1.
|
|
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.
|
|
81
|
-
"eslint-config-prettier": "^8.
|
|
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.
|
|
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": "^
|
|
87
|
+
"eslint-plugin-prettier": "^5.0.0",
|
|
88
88
|
"eslint-plugin-promise": "^6.1.1",
|
|
89
|
-
"eslint-plugin-react": "^7.
|
|
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.
|
|
95
|
-
"postcss": "^8.4.
|
|
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": "^
|
|
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": "^
|
|
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": "^
|
|
117
|
+
"prettier": "^3.0.0",
|
|
118
118
|
"react-datepicker": "^4.16.0",
|
|
119
|
-
"rollup": "^3.26.
|
|
119
|
+
"rollup": "^3.26.3",
|
|
120
120
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
121
|
-
"semantic-release": "^21.0.
|
|
122
|
-
"stylelint": "^15.
|
|
123
|
-
"stylelint-config-standard": "^
|
|
124
|
-
"stylelint-no-unsupported-browser-features": "^
|
|
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
|
}
|
package/dist/Modal-375ef8c3.js
DELETED
|
@@ -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;
|