@itcase/ui 1.0.9 → 1.0.11
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/Modal-375ef8c3.js +234 -0
- package/dist/components/Chips.js +2 -0
- package/dist/components/Choice.js +118 -0
- package/dist/components/DatePicker.js +9452 -0
- package/dist/components/DateRangePicker.js +218 -0
- package/dist/components/Dot.js +67 -0
- package/dist/components/FormField.js +2 -1
- package/dist/components/Group.js +5 -1
- package/dist/components/Input.js +2 -0
- package/dist/components/Logo.js +4 -4
- package/dist/components/Modal.js +20 -224
- package/dist/components/RangeSlider.js +7 -1978
- package/dist/components/Scrollbar.js +5 -3826
- package/dist/components/Search.js +1 -1
- package/dist/components/Select.js +349 -270
- package/dist/components/Tab.js +0 -1
- package/dist/css/components/Choice/Choice.css +67 -0
- package/dist/css/components/DatePicker/DatePicker.css +898 -0
- package/dist/css/components/DateRangePicker/DateRangePicker.css +1021 -0
- package/dist/css/components/Dot/Dot.css +23 -0
- package/dist/css/components/Modal/Modal.css +11 -26
- package/dist/css/components/Select/Select.css +11 -4
- package/dist/css/components/Select/css/__menu/select__menu.css +7 -3
- package/dist/css/styles/fill/fill.css +4 -4
- package/dist/css/styles/fill/fill_active.css +5 -5
- package/dist/defineProperty-72768a50.js +157 -0
- package/dist/index-738f53f6.js +787 -0
- package/dist/typeof-6dd323c6.js +13 -0
- package/package.json +4 -1
- package/dist/objectWithoutProperties-ea190611.js +0 -188
|
@@ -0,0 +1,218 @@
|
|
|
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;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var PropTypes = require('prop-types');
|
|
5
|
+
var clsx = require('clsx');
|
|
6
|
+
var borderType = require('../constants/componentProps/borderType.js');
|
|
7
|
+
var fill = require('../constants/componentProps/fill.js');
|
|
8
|
+
var shape = require('../constants/componentProps/shape.js');
|
|
9
|
+
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
10
|
+
require('lodash/castArray');
|
|
11
|
+
require('lodash/camelCase');
|
|
12
|
+
require('../context/UIContext.js');
|
|
13
|
+
require('../hooks/useMediaQueries.js');
|
|
14
|
+
require('react-responsive');
|
|
15
|
+
|
|
16
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
|
+
|
|
18
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
19
|
+
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
20
|
+
var clsx__default = /*#__PURE__*/_interopDefault(clsx);
|
|
21
|
+
|
|
22
|
+
function Dot(props) {
|
|
23
|
+
var className = props.className,
|
|
24
|
+
children = props.children;
|
|
25
|
+
var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
26
|
+
prefix: 'border-color_',
|
|
27
|
+
propsKey: 'border'
|
|
28
|
+
});
|
|
29
|
+
var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
30
|
+
prefix: 'border_',
|
|
31
|
+
propsKey: 'borderType'
|
|
32
|
+
});
|
|
33
|
+
var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
34
|
+
prefix: 'fill_',
|
|
35
|
+
propsKey: 'fill'
|
|
36
|
+
});
|
|
37
|
+
var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
38
|
+
prefix: 'dot_shape_',
|
|
39
|
+
propsKey: 'shape'
|
|
40
|
+
});
|
|
41
|
+
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
42
|
+
className: clsx__default.default(className, 'dot', borderClass, borderTypeClass, fillClass, shapeClass)
|
|
43
|
+
}, children);
|
|
44
|
+
}
|
|
45
|
+
Dot.propTypes = {
|
|
46
|
+
children: PropTypes__default.default.any,
|
|
47
|
+
className: PropTypes__default.default.string,
|
|
48
|
+
border: PropTypes__default.default.string,
|
|
49
|
+
borderDesktop: PropTypes__default.default.string,
|
|
50
|
+
borderMobile: PropTypes__default.default.string,
|
|
51
|
+
borderTablet: PropTypes__default.default.string,
|
|
52
|
+
borderType: PropTypes__default.default.oneOf(borderType.default),
|
|
53
|
+
borderTypeDesktop: PropTypes__default.default.oneOf(borderType.default),
|
|
54
|
+
borderTypeMobile: PropTypes__default.default.oneOf(borderType.default),
|
|
55
|
+
borderTypeTablet: PropTypes__default.default.oneOf(borderType.default),
|
|
56
|
+
fill: PropTypes__default.default.oneOf(fill.default),
|
|
57
|
+
fillMobile: PropTypes__default.default.oneOf(fill.default),
|
|
58
|
+
fillTablet: PropTypes__default.default.oneOf(fill.default),
|
|
59
|
+
fillDesktop: PropTypes__default.default.oneOf(fill.default),
|
|
60
|
+
shape: PropTypes__default.default.oneOf(shape.default),
|
|
61
|
+
shapeDesktop: PropTypes__default.default.oneOf(shape.default),
|
|
62
|
+
shapeMobile: PropTypes__default.default.oneOf(shape.default),
|
|
63
|
+
shapeTablet: PropTypes__default.default.oneOf(shape.default)
|
|
64
|
+
};
|
|
65
|
+
Dot.defaultProps = {};
|
|
66
|
+
|
|
67
|
+
exports.Dot = Dot;
|
|
@@ -37,7 +37,8 @@ require('../constants/componentProps/textGradient.js');
|
|
|
37
37
|
require('../constants/componentProps/type.js');
|
|
38
38
|
require('../constants/componentProps/underline.js');
|
|
39
39
|
require('react-select');
|
|
40
|
-
require('../
|
|
40
|
+
require('../defineProperty-72768a50.js');
|
|
41
|
+
require('../typeof-6dd323c6.js');
|
|
41
42
|
require('react-dom');
|
|
42
43
|
|
|
43
44
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
package/dist/components/Group.js
CHANGED
|
@@ -93,11 +93,15 @@ function Group(props) {
|
|
|
93
93
|
prefix: 'flex-grow_',
|
|
94
94
|
propsKey: 'flexGrow'
|
|
95
95
|
});
|
|
96
|
+
var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
97
|
+
prefix: 'elevation_',
|
|
98
|
+
propsKey: 'elevation'
|
|
99
|
+
});
|
|
96
100
|
var _useStyles = useStyles.useStyles(props),
|
|
97
101
|
groupStyles = _useStyles.styles,
|
|
98
102
|
groupWrapperStyles = _useStyles.wrapper;
|
|
99
103
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
100
|
-
className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, justifyContentClass),
|
|
104
|
+
className: clsx__default.default(className, 'group', widthClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
|
|
101
105
|
id: id,
|
|
102
106
|
style: Object.assign({}, groupStyles, style)
|
|
103
107
|
}, horizontalScroll ? /*#__PURE__*/React__default.default.createElement("div", {
|
package/dist/components/Input.js
CHANGED
|
@@ -33,6 +33,7 @@ function Input(props) {
|
|
|
33
33
|
value = props.value,
|
|
34
34
|
onBlur = props.onBlur,
|
|
35
35
|
onChange = props.onChange,
|
|
36
|
+
onFocus = props.onFocus,
|
|
36
37
|
onKeyDown = props.onKeyDown;
|
|
37
38
|
var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
38
39
|
prefix: 'fill_',
|
|
@@ -87,6 +88,7 @@ function Input(props) {
|
|
|
87
88
|
value: value,
|
|
88
89
|
onBlur: onBlur,
|
|
89
90
|
onChange: onChange,
|
|
91
|
+
onFocus: onFocus,
|
|
90
92
|
onKeyDown: onKeyDown
|
|
91
93
|
});
|
|
92
94
|
}
|
package/dist/components/Logo.js
CHANGED
|
@@ -14,14 +14,14 @@ require('../constants/componentProps/textStyle.js');
|
|
|
14
14
|
require('../constants/componentProps/textWeight.js');
|
|
15
15
|
require('../constants/componentProps/type.js');
|
|
16
16
|
require('../constants/componentProps/underline.js');
|
|
17
|
-
require('lodash/castArray');
|
|
18
17
|
require('lodash/camelCase');
|
|
19
|
-
require('../context/UIContext.js');
|
|
20
|
-
require('../hooks/useMediaQueries.js');
|
|
21
|
-
require('react-responsive');
|
|
22
18
|
require('lodash/maxBy');
|
|
23
19
|
require('lodash/upperFirst');
|
|
24
20
|
require('../hooks/styleAttributes.js');
|
|
21
|
+
require('../context/UIContext.js');
|
|
22
|
+
require('../hooks/useMediaQueries.js');
|
|
23
|
+
require('react-responsive');
|
|
24
|
+
require('lodash/castArray');
|
|
25
25
|
|
|
26
26
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
27
27
|
|
package/dist/components/Modal.js
CHANGED
|
@@ -1,247 +1,43 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var Modal = require('../Modal-375ef8c3.js');
|
|
3
4
|
var React = require('react');
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
require('
|
|
8
|
-
require('./
|
|
9
|
-
|
|
5
|
+
var index = require('./Loader.js');
|
|
6
|
+
require('prop-types');
|
|
7
|
+
require('react-dom');
|
|
8
|
+
require('clsx');
|
|
9
|
+
require('./Fader.js');
|
|
10
|
+
require('../constants/componentProps/fill.js');
|
|
11
|
+
require('../constants/componentProps/fillGradient.js');
|
|
12
|
+
require('../hooks/useDeviceTargetClass.js');
|
|
13
|
+
require('lodash/castArray');
|
|
10
14
|
require('lodash/camelCase');
|
|
11
|
-
require('lodash/maxBy');
|
|
12
|
-
require('lodash/upperFirst');
|
|
13
15
|
require('../context/UIContext.js');
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
require('react-inlinesvg');
|
|
17
|
-
require('../constants/componentProps/fill.js');
|
|
18
|
-
require('../constants/componentProps/iconSize.js');
|
|
19
|
-
require('../constants/componentProps/shape.js');
|
|
20
|
-
require('../constants/componentProps/strokeColor.js');
|
|
21
|
-
require('./Link.js');
|
|
16
|
+
require('../hooks/useMediaQueries.js');
|
|
17
|
+
require('react-responsive');
|
|
22
18
|
require('../useStyles-e4accb53.js');
|
|
19
|
+
require('lodash/maxBy');
|
|
20
|
+
require('lodash/upperFirst');
|
|
23
21
|
require('../hooks/styleAttributes.js');
|
|
24
|
-
require('
|
|
22
|
+
require('./Text.js');
|
|
25
23
|
require('../constants/componentProps/textColor.js');
|
|
26
|
-
require('../constants/componentProps/textGradient.js');
|
|
27
|
-
require('../constants/componentProps/textStyle.js');
|
|
28
|
-
require('../constants/componentProps/textWeight.js');
|
|
29
|
-
require('../constants/componentProps/type.js');
|
|
30
|
-
require('../constants/componentProps/underline.js');
|
|
31
|
-
require('../hooks/useMediaQueries.js');
|
|
32
|
-
require('react-responsive');
|
|
33
|
-
require('lodash/castArray');
|
|
34
24
|
require('../constants/componentProps/textColorActive.js');
|
|
35
25
|
require('../constants/componentProps/textColorHover.js');
|
|
36
|
-
require('../constants/componentProps/
|
|
26
|
+
require('../constants/componentProps/size.js');
|
|
27
|
+
require('../constants/componentProps/textStyle.js');
|
|
28
|
+
require('../constants/componentProps/textWeight.js');
|
|
37
29
|
|
|
38
30
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
39
31
|
|
|
40
32
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
41
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
42
|
-
var require$$2__default = /*#__PURE__*/_interopDefault(require$$2);
|
|
43
|
-
var clsx__default = /*#__PURE__*/_interopDefault(clsx);
|
|
44
|
-
|
|
45
|
-
var getOrCreateModalElement = function getOrCreateModalElement(modalQuerySelector, className) {
|
|
46
|
-
if (className === void 0) {
|
|
47
|
-
className = '';
|
|
48
|
-
}
|
|
49
|
-
// prettier-ignore
|
|
50
|
-
var classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
|
|
51
|
-
var modalElement = document.querySelector(modalQuerySelector);
|
|
52
|
-
if (!modalElement) {
|
|
53
|
-
// Add modal element into the DOM on mount.
|
|
54
|
-
modalElement = document.createElement('div');
|
|
55
|
-
modalElement.setAttribute('id', 'modal-global');
|
|
56
|
-
modalElement.classList.add('modal');
|
|
57
|
-
if (classList.length) {
|
|
58
|
-
var _modalElement$classLi;
|
|
59
|
-
(_modalElement$classLi = modalElement.classList).add.apply(_modalElement$classLi, classList);
|
|
60
|
-
}
|
|
61
|
-
document.body.prepend(modalElement);
|
|
62
|
-
}
|
|
63
|
-
return modalElement;
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
// Modal component that is an abstraction around the portal API.
|
|
67
|
-
var Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(props, ref) {
|
|
68
|
-
var children = props.children,
|
|
69
|
-
className = props.className,
|
|
70
|
-
closeButton = props.closeButton,
|
|
71
|
-
contentClassName = props.contentClassName,
|
|
72
|
-
id = props.id,
|
|
73
|
-
isFader = props.isFader,
|
|
74
|
-
faderFill = props.faderFill,
|
|
75
|
-
faderFillGradient = props.faderFillGradient,
|
|
76
|
-
faderOpacity = props.faderOpacity,
|
|
77
|
-
initialIsOpen = props.isOpen,
|
|
78
|
-
isScrollOnOpen = props.isScrollOnOpen,
|
|
79
|
-
isSetFocusOnOpen = props.isSetFocusOnOpen,
|
|
80
|
-
modalQuerySelector = props.modalQuerySelector,
|
|
81
|
-
isOutsideClose = props.isOutsideClose,
|
|
82
|
-
onCloseModal = props.onCloseModal,
|
|
83
|
-
onOpenModal = props.onOpenModal;
|
|
84
|
-
|
|
85
|
-
// Query DOM element
|
|
86
|
-
var _useState = React.useState(null),
|
|
87
|
-
modalElement = _useState[0],
|
|
88
|
-
setModalElement = _useState[1];
|
|
89
|
-
React.useLayoutEffect(function () {
|
|
90
|
-
var element = getOrCreateModalElement(modalQuerySelector, className);
|
|
91
|
-
setModalElement(element);
|
|
92
|
-
if (element) {
|
|
93
|
-
addModalProps(element);
|
|
94
|
-
}
|
|
95
|
-
}, []);
|
|
96
|
-
var modalContentRef = React.useRef(null);
|
|
97
|
-
var modalFaderRef = React.useRef(null);
|
|
98
|
-
var _useState2 = React.useState(initialIsOpen),
|
|
99
|
-
isOpen = _useState2[0],
|
|
100
|
-
setIsOpen = _useState2[1];
|
|
101
|
-
var addModalProps = React.useCallback(function (element) {
|
|
102
|
-
// Change class need in "useEffect"
|
|
103
|
-
if (isOpen) {
|
|
104
|
-
// Show modal
|
|
105
|
-
element.classList.add('modal_state_visible');
|
|
106
|
-
// Scroll to opened modal
|
|
107
|
-
if (isScrollOnOpen) {
|
|
108
|
-
// modalContentRef.current.style.top = `${window.visualViewport.pageTop}px`
|
|
109
|
-
element.scrollIntoView({
|
|
110
|
-
block: 'center',
|
|
111
|
-
behavior: 'smooth'
|
|
112
|
-
});
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
// "setTimeout" in this implementation is needs for set focus on modal
|
|
116
|
-
// after "onMouseDown" event on button
|
|
117
|
-
if (isSetFocusOnOpen) {
|
|
118
|
-
setTimeout(function () {
|
|
119
|
-
return modalContentRef.current.focus();
|
|
120
|
-
}, 0);
|
|
121
|
-
}
|
|
122
|
-
} else if (!element.children.length) {
|
|
123
|
-
// Hide modal if has no children
|
|
124
|
-
element.classList.remove('modal_state_visible');
|
|
125
|
-
}
|
|
126
|
-
}, [isOpen, isSetFocusOnOpen]);
|
|
127
|
-
React.useEffect(function () {
|
|
128
|
-
if (!modalElement) {
|
|
129
|
-
return;
|
|
130
|
-
}
|
|
131
|
-
addModalProps(modalElement);
|
|
132
|
-
}, [isOpen]); // eslint-disable-line
|
|
133
|
-
|
|
134
|
-
// Show modal with children content
|
|
135
|
-
var openModal = React.useCallback(function () {
|
|
136
|
-
setIsOpen(true);
|
|
137
|
-
|
|
138
|
-
// Callback
|
|
139
|
-
if (typeof onOpenModal === 'function') {
|
|
140
|
-
onOpenModal();
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
/* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
|
|
144
|
-
// If current modal is already opened
|
|
145
|
-
// Move content to end of modal root container. For order in DOM.
|
|
146
|
-
const modalContentElement = modalContentRef.current
|
|
147
|
-
if (modalContentElement) {
|
|
148
|
-
modalContentElement.parentNode.appendChild(modalContentElement)
|
|
149
|
-
}
|
|
150
|
-
// Also move fader to end of modal root container after container
|
|
151
|
-
const modalFaderElement = modalFaderRef.current
|
|
152
|
-
if (modalFaderElement) {
|
|
153
|
-
modalFaderElement.parentNode.appendChild(modalFaderElement)
|
|
154
|
-
}
|
|
155
|
-
*/
|
|
156
|
-
}, [onOpenModal]);
|
|
157
|
-
|
|
158
|
-
// Hide modal and unmount children content
|
|
159
|
-
var closeModal = React.useCallback(function (event) {
|
|
160
|
-
if (event === void 0) {
|
|
161
|
-
event = {};
|
|
162
|
-
}
|
|
163
|
-
var hasRelatedTarget = event.relatedTarget && modalElement.contains(event.relatedTarget);
|
|
164
|
-
if (hasRelatedTarget) {
|
|
165
|
-
return event;
|
|
166
|
-
}
|
|
167
|
-
setIsOpen(false);
|
|
168
|
-
|
|
169
|
-
// Callback
|
|
170
|
-
if (typeof onCloseModal === 'function') {
|
|
171
|
-
onCloseModal();
|
|
172
|
-
}
|
|
173
|
-
}, [modalElement, onCloseModal]);
|
|
174
|
-
|
|
175
|
-
// Save ref things
|
|
176
|
-
React.useImperativeHandle(ref, function () {
|
|
177
|
-
return {
|
|
178
|
-
isOpen: isOpen,
|
|
179
|
-
openModal: openModal,
|
|
180
|
-
closeModal: closeModal,
|
|
181
|
-
modalElement: modalElement
|
|
182
|
-
};
|
|
183
|
-
});
|
|
184
|
-
var contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
185
|
-
prefix: 'fill_',
|
|
186
|
-
propsKey: 'contentFill'
|
|
187
|
-
});
|
|
188
|
-
|
|
189
|
-
// Use a portal to render the children into the element
|
|
190
|
-
return modalElement && /*#__PURE__*/require$$2__default.default.createPortal(
|
|
191
|
-
// Any valid React child: JSX, strings, arrays, etc.
|
|
192
|
-
isOpen ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
|
|
193
|
-
className: clsx__default.default('modal-content', contentClassName, contentFillClass),
|
|
194
|
-
id: id,
|
|
195
|
-
ref: modalContentRef,
|
|
196
|
-
tabIndex: 0,
|
|
197
|
-
onBlur: isOutsideClose ? undefined : closeModal
|
|
198
|
-
}, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
|
|
199
|
-
className: "modal-content__close",
|
|
200
|
-
onClick: closeModal
|
|
201
|
-
}, closeButton), children), /*#__PURE__*/React__default.default.createElement(index.Fader, {
|
|
202
|
-
ref: modalFaderRef,
|
|
203
|
-
fill: faderFill,
|
|
204
|
-
fillGradient: faderFillGradient,
|
|
205
|
-
opacity: faderOpacity,
|
|
206
|
-
className: "modal__fader",
|
|
207
|
-
isFader: isFader
|
|
208
|
-
})) : null,
|
|
209
|
-
// A DOM element
|
|
210
|
-
modalElement);
|
|
211
|
-
});
|
|
212
|
-
Modal.propTypes = {
|
|
213
|
-
children: PropTypes__default.default.any,
|
|
214
|
-
className: PropTypes__default.default.string,
|
|
215
|
-
closeIcon: PropTypes__default.default.string,
|
|
216
|
-
closeText: PropTypes__default.default.string,
|
|
217
|
-
faderFill: PropTypes__default.default.string,
|
|
218
|
-
faderFillGradient: PropTypes__default.default.string,
|
|
219
|
-
faderOpacity: PropTypes__default.default.string,
|
|
220
|
-
contentClassName: PropTypes__default.default.string,
|
|
221
|
-
id: PropTypes__default.default.string,
|
|
222
|
-
isFader: PropTypes__default.default.bool,
|
|
223
|
-
isScrollOnOpen: PropTypes__default.default.bool,
|
|
224
|
-
isSetFocusOnOpen: PropTypes__default.default.bool,
|
|
225
|
-
modalQuerySelector: PropTypes__default.default.string,
|
|
226
|
-
isOutsideClose: PropTypes__default.default.bool,
|
|
227
|
-
onCloseModal: PropTypes__default.default.func,
|
|
228
|
-
onOpenModal: PropTypes__default.default.func
|
|
229
|
-
};
|
|
230
|
-
Modal.defaultProps = {
|
|
231
|
-
isFader: true,
|
|
232
|
-
isOpen: false,
|
|
233
|
-
isScrollOnOpen: true,
|
|
234
|
-
isSetFocusOnOpen: true,
|
|
235
|
-
modalQuerySelector: '#modal-global'
|
|
236
|
-
};
|
|
237
33
|
|
|
238
34
|
function ModalLoader(props) {
|
|
239
35
|
return /*#__PURE__*/React__default.default.createElement("div", {
|
|
240
36
|
className: "modal-loading"
|
|
241
37
|
}, /*#__PURE__*/React__default.default.createElement("div", {
|
|
242
38
|
className: "modal-loading__inner"
|
|
243
|
-
}, /*#__PURE__*/React__default.default.createElement(index
|
|
39
|
+
}, /*#__PURE__*/React__default.default.createElement(index.Loader, null)));
|
|
244
40
|
}
|
|
245
41
|
|
|
246
|
-
exports.Modal = Modal;
|
|
42
|
+
exports.Modal = Modal.Modal;
|
|
247
43
|
exports.ModalLoader = ModalLoader;
|