@cashub/ui 0.21.0 → 0.22.0
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/Tab/Tab.js +9 -13
- package/Tab/TabList.js +14 -32
- package/Tab/TabPanel.js +21 -58
- package/Tab/TabTab.js +20 -40
- package/Tab/index.js +2 -10
- package/Tab/subComponent/TabContext.js +2 -5
- package/animate/Collapse.js +26 -53
- package/animate/Loader.js +21 -26
- package/animate/NumberCounter.js +22 -44
- package/animate/PulseRing.js +9 -21
- package/animate/Spinner.js +2 -10
- package/animate/index.js +5 -11
- package/backdrop/BaseBackdrop.js +2 -9
- package/backdrop/LoadingBackdrop.js +2 -9
- package/backdrop/ModalBackdrop.js +2 -9
- package/backdrop/index.js +3 -7
- package/badge/Badge.js +2 -11
- package/badge/BadgeDot.js +2 -10
- package/badge/BadgeFill.js +15 -20
- package/badge/BadgeWithText.js +6 -13
- package/badge/index.js +4 -9
- package/billing/BarChart.js +10 -17
- package/billing/Grid.js +11 -15
- package/billing/Header2.js +6 -9
- package/billing/Header3.js +9 -16
- package/billing/Paragraph.js +8 -14
- package/billing/ParagraphGroup.js +6 -9
- package/billing/ParagraphText.js +7 -12
- package/billing/Section.js +13 -23
- package/billing/SectionBody.js +5 -8
- package/billing/SectionHeader.js +7 -12
- package/breadcrumb/Breadcrumb.js +11 -21
- package/breadcrumb/index.js +1 -3
- package/button/Button.js +41 -38
- package/button/ButtonGroup.js +21 -18
- package/button/IconButton.js +29 -29
- package/button/ScrollToTopButton.js +12 -39
- package/button/index.js +4 -9
- package/callout/Callout.js +13 -26
- package/callout/index.js +1 -3
- package/chart/BarChart.js +28 -53
- package/chart/DoughnutChart.js +23 -62
- package/chart/LineChart.js +33 -55
- package/chart/SingleBarChart.js +11 -17
- package/chart/index.js +5 -12
- package/chart/utils/customTooltip.js +26 -43
- package/chart/utils/htmlLegendPlugin.js +24 -30
- package/chart/utils/index.js +3 -7
- package/chart/utils/padEmptyChartBar.js +24 -22
- package/container/FlexContainer.js +14 -12
- package/container/index.js +1 -3
- package/cropper/Cropper.js +21 -34
- package/cropper/CropperModalHandler.js +15 -21
- package/cropper/index.js +2 -5
- package/cropper/subComponent/CropImageModal.js +23 -58
- package/datetimePicker/DatePicker.js +103 -217
- package/datetimePicker/DatePickerV2.js +116 -221
- package/datetimePicker/DatetimePicker.js +27 -48
- package/datetimePicker/DatetimePickerV2.js +115 -231
- package/datetimePicker/TimeInput.js +9 -22
- package/datetimePicker/TimePicker.js +94 -151
- package/datetimePicker/TimePickerStyle.js +2 -9
- package/datetimePicker/accordion/Month.js +70 -90
- package/datetimePicker/accordion/Year.js +91 -135
- package/datetimePicker/hooks/index.js +3 -7
- package/datetimePicker/hooks/useChangeNumber.js +14 -27
- package/datetimePicker/hooks/useDecrease.js +19 -35
- package/datetimePicker/hooks/useIncrease.js +19 -35
- package/datetimePicker/index.js +7 -15
- package/datetimePicker/provider/constant.js +2 -3
- package/datetimePicker/subComponent/Accordion.js +108 -158
- package/datetimePicker/subComponent/CustomTimeInput.js +18 -48
- package/datetimePicker/subComponent/DateTimePickerContext.js +2 -5
- package/datetimePicker/utils/GMTDate.js +3 -7
- package/datetimePicker/utils/pad.js +2 -6
- package/datetimePicker/utils/toUTC0.js +3 -6
- package/descriptionList/DescriptionDetail.js +5 -10
- package/descriptionList/DescriptionList.js +5 -10
- package/descriptionList/DescriptionTerm.js +2 -9
- package/descriptionList/index.js +3 -7
- package/divider/Divider.js +9 -12
- package/divider/index.js +1 -3
- package/dropdown/Dropdown.js +28 -65
- package/dropdown/DropdownButtonOption.js +2 -9
- package/dropdown/DropdownContent.js +33 -64
- package/dropdown/DropdownDivOption.js +2 -9
- package/dropdown/DropdownItem.js +10 -16
- package/dropdown/DropdownLinkOption.js +2 -9
- package/dropdown/DropdownToggle.js +18 -38
- package/dropdown/index.js +6 -17
- package/dropdown/subComponent/DropdownContext.js +2 -5
- package/dropzone/FileDropzone.js +148 -302
- package/dropzone/ImageDropzone.js +96 -171
- package/dropzone/index.js +2 -5
- package/dropzone/subComponent/Message.js +7 -14
- package/figure/IconFigure.js +9 -16
- package/figure/ImageFigure.js +11 -17
- package/figure/index.js +2 -5
- package/file/HiddenFileInput.js +5 -14
- package/file/index.js +1 -3
- package/form/Checkbox.js +34 -43
- package/form/FormItem.js +2 -9
- package/form/Input.js +18 -15
- package/form/Label.js +20 -13
- package/form/MutedText.js +5 -10
- package/form/RadioButton.js +20 -32
- package/form/Searchbox.js +21 -65
- package/form/Slider.js +25 -0
- package/form/SwitchButton.js +34 -39
- package/form/Textarea.js +2 -11
- package/form/TreeView.js +64 -0
- package/form/index.js +16 -19
- package/grid/Column.js +17 -17
- package/grid/Grid.js +13 -14
- package/grid/index.js +2 -5
- package/heading/Heading1.js +5 -10
- package/heading/Heading2.js +9 -12
- package/heading/Heading3.js +21 -18
- package/heading/index.js +3 -7
- package/helmet/Helmet.js +6 -9
- package/helmet/index.js +2 -5
- package/iconbox/ApplicationIconBox.js +25 -31
- package/iconbox/IconBox.js +11 -24
- package/iconbox/IconBoxV2.js +14 -26
- package/iconbox/index.js +3 -7
- package/iconbox/subComponent/IconBoxFigure.js +25 -20
- package/iconbox/subComponent/IconBoxImage.js +15 -18
- package/image/ImageFluid.js +2 -10
- package/image/UploadImage.js +65 -113
- package/image/index.js +2 -5
- package/index.js +44 -130
- package/jsoneditor/JsonEditor.js +10 -32
- package/jsoneditor/index.js +1 -3
- package/keyframe/Pulse.js +2 -7
- package/keyframe/Spin.js +2 -7
- package/link/LinkSpan.js +22 -35
- package/link/index.js +1 -3
- package/map/GoogleMap.js +122 -175
- package/map/GoogleReverseGeolocation.js +79 -186
- package/map/LeafletMap.js +78 -132
- package/map/LeafletReverseGeolocation.js +49 -121
- package/map/index.js +4 -9
- package/map/subComponent/BasicLeafletMap.js +8 -14
- package/map/subComponent/GoogleMapContainer.js +5 -10
- package/map/subComponent/GoogleMapPopup.js +66 -123
- package/map/subComponent/GoogleMapWrapper.js +13 -32
- package/map/subComponent/GoogleMarkerSpiderfier.js +14 -24
- package/map/subComponent/LeafletDrawControl.js +47 -84
- package/map/subComponent/LeafletMapContainer.js +5 -10
- package/map/subComponent/MapSearchBoxControl.js +24 -70
- package/modal/StateModal.js +41 -100
- package/modal/TitleModal.js +89 -190
- package/modal/index.js +2 -5
- package/package.json +1 -1
- package/paginate/Paginate.js +40 -54
- package/paginate/index.js +1 -3
- package/popover/Popover.js +39 -87
- package/popover/index.js +1 -3
- package/qrcode/QRCode.js +10 -23
- package/qrcode/QRCodeContainter.js +8 -16
- package/qrcode/index.js +2 -5
- package/ribbon/Ribbon.js +4 -15
- package/ribbon/index.js +1 -3
- package/section/Section.js +57 -39
- package/section/SectionBody.js +15 -22
- package/section/SectionHeader.js +27 -27
- package/section/SectionToolbar.js +2 -9
- package/section/SectionToolbarItem.js +2 -9
- package/section/index.js +5 -11
- package/select/InputSelect.js +103 -215
- package/select/Select.js +204 -362
- package/select/index.js +2 -5
- package/select/subComponent/ListBox.js +9 -12
- package/select/subComponent/Option.js +8 -16
- package/select/subComponent/OptionGroup.js +2 -9
- package/select/subComponent/Options.js +5 -11
- package/select/subComponent/SearchBox.js +9 -29
- package/select/subComponent/SelectedMultiple.js +8 -16
- package/select/subComponent/SelectedSingle.js +2 -9
- package/styles/GlobalStyle.js +169 -91
- package/styles/config/breakpoint.style.js +2 -3
- package/styles/config/header.style.js +2 -3
- package/styles/config/sidebar.style.js +2 -3
- package/styles/index.js +2 -5
- package/styles/mixin/backgroundColor.js +17 -14
- package/styles/mixin/borderColor.js +17 -14
- package/styles/mixin/color.js +17 -14
- package/styles/mixin/colorOnBackground.js +17 -14
- package/styles/mixin/inputPlaceholder.js +3 -9
- package/styles/mixin/media.js +3 -11
- package/styles/mixin/rounded.js +13 -12
- package/styles/mixin/scrollbar.js +7 -13
- package/styles/theme/dark.theme.js +20 -20
- package/styles/theme/light.theme.js +20 -20
- package/styles/theme/white.theme.js +20 -20
- package/styles/themes.js +2 -8
- package/table/GridTable.js +105 -143
- package/table/ImageBox.js +8 -18
- package/table/PermissionTable.js +25 -25
- package/table/Table.js +137 -153
- package/table/__mock__/columns.js +2 -3
- package/table/__mock__/data.js +2 -3
- package/table/hooks/index.js +2 -5
- package/table/hooks/useCalculateDataRange.js +9 -36
- package/table/hooks/useGenerateSort.js +6 -17
- package/table/index.js +4 -9
- package/table/subComponent/BaseTableHeadCell.js +15 -21
- package/table/subComponent/GridTableFooter.js +5 -10
- package/table/subComponent/GridTableHeadCell.js +5 -10
- package/table/subComponent/Resizer.js +17 -44
- package/table/subComponent/TableFooter.js +5 -10
- package/table/subComponent/TableFooterInfo.js +2 -9
- package/table/subComponent/TableFooterPager.js +5 -12
- package/table/subComponent/TableHeadCell.js +2 -9
- package/table/subComponent/TableSort.js +13 -19
- package/tagify/TagifyStyle.js +2 -9
- package/tagify/Tags.js +15 -37
- package/tagify/index.js +2 -5
- package/text/Paragraph.js +25 -20
- package/text/index.js +1 -3
- package/timeline/Timeline.js +28 -37
- package/timeline/index.js +1 -3
- package/toast/CustomToastContainer.js +2 -9
- package/toast/MessageContainer.js +9 -18
- package/toast/index.js +3 -8
- package/toast/show.js +18 -28
- package/tooltip/Tooltip.js +48 -97
- package/tooltip/index.js +1 -3
- package/wizard/Wizard.js +63 -133
- package/wizard/index.js +1 -3
|
@@ -1,188 +1,136 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports.default = void 0;
|
|
9
|
-
|
|
10
7
|
var _react = require("react");
|
|
11
|
-
|
|
12
8
|
var _io = require("react-icons/io");
|
|
13
|
-
|
|
14
9
|
var _md = require("react-icons/md");
|
|
15
|
-
|
|
16
10
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
17
|
-
|
|
18
11
|
var _utils = require("@cashub/utils");
|
|
19
|
-
|
|
20
12
|
var _DateTimePickerContext = _interopRequireDefault(require("../subComponent/DateTimePickerContext"));
|
|
21
|
-
|
|
22
13
|
var _scrollbar = _interopRequireDefault(require("../../styles/mixin/scrollbar"));
|
|
23
|
-
|
|
24
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
-
|
|
26
15
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
27
|
-
|
|
28
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
|
-
|
|
30
|
-
function
|
|
31
|
-
|
|
32
|
-
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; }
|
|
33
|
-
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
34
19
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
var Year = function Year(_ref) {
|
|
57
|
-
var expand = _ref.expand,
|
|
58
|
-
handleDisplayAccordionContent = _ref.handleDisplayAccordionContent;
|
|
59
|
-
|
|
60
|
-
var _useContext = (0, _react.useContext)(_DateTimePickerContext.default),
|
|
61
|
-
fixedYear = _useContext.fixedYear,
|
|
62
|
-
minDate = _useContext.minDate,
|
|
63
|
-
maxDate = _useContext.maxDate,
|
|
64
|
-
selectedDate = _useContext.selectedDate,
|
|
65
|
-
setSelectedDate = _useContext.setSelectedDate,
|
|
66
|
-
setAccordionCurrentDisplayType = _useContext.setAccordionCurrentDisplayType;
|
|
67
|
-
|
|
68
|
-
var bodyRef = (0, _react.useRef)(null);
|
|
69
|
-
var selectedYearRef = (0, _react.useRef)(null);
|
|
70
|
-
|
|
71
|
-
var _useState = (0, _react.useState)([]),
|
|
72
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
73
|
-
yearArr = _useState2[0],
|
|
74
|
-
setYearArr = _useState2[1];
|
|
75
|
-
|
|
76
|
-
var minYear = minDate ? new Date((0, _utils.datetimeTFormat)(minDate)).getFullYear() : 1;
|
|
77
|
-
var maxYear = maxDate ? new Date((0, _utils.datetimeTFormat)(maxDate)).getFullYear() : null;
|
|
78
|
-
var handleChangeYear = (0, _react.useCallback)(function (year) {
|
|
79
|
-
var date = new Date(selectedDate);
|
|
20
|
+
const Year = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
expand,
|
|
23
|
+
handleDisplayAccordionContent
|
|
24
|
+
} = _ref;
|
|
25
|
+
const {
|
|
26
|
+
fixedYear,
|
|
27
|
+
minDate,
|
|
28
|
+
maxDate,
|
|
29
|
+
selectedDate,
|
|
30
|
+
setSelectedDate,
|
|
31
|
+
setAccordionCurrentDisplayType
|
|
32
|
+
} = (0, _react.useContext)(_DateTimePickerContext.default);
|
|
33
|
+
const bodyRef = (0, _react.useRef)(null);
|
|
34
|
+
const selectedYearRef = (0, _react.useRef)(null);
|
|
35
|
+
const [yearArr, setYearArr] = (0, _react.useState)([]);
|
|
36
|
+
const minYear = minDate ? new Date((0, _utils.datetimeTFormat)(minDate)).getFullYear() : 1;
|
|
37
|
+
const maxYear = maxDate ? new Date((0, _utils.datetimeTFormat)(maxDate)).getFullYear() : null;
|
|
38
|
+
const handleChangeYear = (0, _react.useCallback)(year => {
|
|
39
|
+
const date = new Date(selectedDate);
|
|
80
40
|
date.setFullYear(year);
|
|
81
41
|
setSelectedDate((0, _utils.datetimeTFormat)(date));
|
|
82
42
|
setAccordionCurrentDisplayType(null);
|
|
83
43
|
}, [selectedDate, setAccordionCurrentDisplayType, setSelectedDate]);
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
44
|
+
const changeToPreviousYear = (0, _react.useCallback)(() => {
|
|
45
|
+
const date = new Date(selectedDate);
|
|
87
46
|
if (date.getFullYear() > 1) {
|
|
88
47
|
handleChangeYear(date.getFullYear() - 1);
|
|
89
48
|
}
|
|
90
49
|
}, [selectedDate, handleChangeYear]);
|
|
91
|
-
|
|
92
|
-
|
|
50
|
+
const changeToNextYear = (0, _react.useCallback)(() => {
|
|
51
|
+
const date = new Date(selectedDate);
|
|
93
52
|
handleChangeYear(date.getFullYear() + 1);
|
|
94
53
|
}, [selectedDate, handleChangeYear]);
|
|
95
|
-
|
|
54
|
+
const handleYearItemDisable = (0, _react.useCallback)(year => {
|
|
96
55
|
if (minDate !== undefined && maxDate !== undefined) {
|
|
97
56
|
return !(minYear <= year && year <= maxYear);
|
|
98
57
|
}
|
|
99
|
-
|
|
100
58
|
if (minDate) {
|
|
101
59
|
return minYear > year;
|
|
102
60
|
} else if (maxDate) {
|
|
103
61
|
return maxYear < year;
|
|
104
62
|
}
|
|
105
|
-
|
|
106
63
|
return false;
|
|
107
64
|
}, [minYear, maxYear, maxDate, minDate]);
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
65
|
+
const handleDisableArrow = (0, _react.useCallback)(arrowType => {
|
|
66
|
+
const data = new Date(selectedDate);
|
|
111
67
|
if (arrowType === 'previous') {
|
|
112
68
|
return minYear > data.getFullYear() - 1;
|
|
113
69
|
} else if (arrowType === 'next') {
|
|
114
70
|
if (maxYear) {
|
|
115
71
|
return maxYear < data.getFullYear() + 1;
|
|
116
72
|
}
|
|
117
|
-
|
|
118
73
|
return false;
|
|
119
74
|
}
|
|
120
75
|
}, [selectedDate, minYear, maxYear]);
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
return yearArr.map(
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
}, index);
|
|
133
|
-
});
|
|
76
|
+
const yearContent = (0, _react.useMemo)(() => {
|
|
77
|
+
const data = new Date(selectedDate);
|
|
78
|
+
return yearArr.map((year, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, {
|
|
79
|
+
ref: data.getFullYear() === year ? selectedYearRef : null,
|
|
80
|
+
selected: data.getFullYear() === year,
|
|
81
|
+
onClick: () => {
|
|
82
|
+
handleChangeYear(year);
|
|
83
|
+
},
|
|
84
|
+
disabled: handleYearItemDisable(year),
|
|
85
|
+
children: year
|
|
86
|
+
}, index));
|
|
134
87
|
}, [selectedDate, yearArr, handleChangeYear, handleYearItemDisable]);
|
|
135
|
-
(0, _react.useEffect)(
|
|
136
|
-
|
|
137
|
-
|
|
88
|
+
(0, _react.useEffect)(() => {
|
|
89
|
+
const data = new Date(selectedDate);
|
|
138
90
|
if (!fixedYear) {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
91
|
+
const start = data.getFullYear() - 16 > 0 ? data.getFullYear() - 16 : 1;
|
|
92
|
+
const end = data.getFullYear() + 16;
|
|
93
|
+
const yearRange = (0, _utils.generateRange)(start, end);
|
|
142
94
|
setYearArr(yearRange);
|
|
143
95
|
}
|
|
144
96
|
}, [fixedYear, selectedDate]);
|
|
145
|
-
|
|
97
|
+
const scroll = (0, _react.useCallback)(() => {
|
|
146
98
|
if (bodyRef !== null && bodyRef !== void 0 && bodyRef.current && selectedYearRef !== null && selectedYearRef !== void 0 && selectedYearRef.current) {
|
|
147
|
-
|
|
148
|
-
|
|
99
|
+
const body = bodyRef.current;
|
|
149
100
|
if (body.scrollTop + body.clientHeight >= body.scrollHeight - 90) {
|
|
150
101
|
body.removeEventListener('scroll', scroll);
|
|
151
|
-
setTimeout(
|
|
152
|
-
setYearArr(
|
|
102
|
+
setTimeout(() => {
|
|
103
|
+
setYearArr(previousParams => {
|
|
153
104
|
body.addEventListener('scroll', scroll);
|
|
154
|
-
|
|
155
|
-
return [
|
|
105
|
+
const addYearRange = (0, _utils.generateRange)(previousParams[previousParams.length - 1] + 1, previousParams[previousParams.length - 1] + 15);
|
|
106
|
+
return [...previousParams, ...addYearRange];
|
|
156
107
|
});
|
|
157
108
|
}, 400);
|
|
158
109
|
} else if (body.scrollTop < 50) {
|
|
159
110
|
body.removeEventListener('scroll', scroll);
|
|
160
|
-
setTimeout(
|
|
161
|
-
setYearArr(
|
|
111
|
+
setTimeout(() => {
|
|
112
|
+
setYearArr(previousParams => {
|
|
162
113
|
body.addEventListener('scroll', scroll);
|
|
163
|
-
|
|
164
114
|
if (previousParams[0] - 15 <= 0) {
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
return [].concat(_toConsumableArray(_addYearRange), _toConsumableArray(previousParams));
|
|
115
|
+
const addYearRange = (0, _utils.generateRange)(previousParams[0] - (previousParams[0] - 1), previousParams[0] - 1);
|
|
116
|
+
return [...addYearRange, ...previousParams];
|
|
168
117
|
}
|
|
169
|
-
|
|
170
|
-
setTimeout(function () {
|
|
118
|
+
setTimeout(() => {
|
|
171
119
|
body.scrollTo({
|
|
172
120
|
top: body.scrollTop + 96
|
|
173
121
|
});
|
|
174
122
|
}, 400);
|
|
175
|
-
|
|
176
|
-
return [
|
|
123
|
+
const addYearRange = (0, _utils.generateRange)(previousParams[0] - 15, previousParams[0] - 1);
|
|
124
|
+
return [...addYearRange, ...previousParams];
|
|
177
125
|
});
|
|
178
126
|
}, 400);
|
|
179
127
|
}
|
|
180
128
|
}
|
|
181
129
|
}, []);
|
|
182
|
-
(0, _react.useEffect)(
|
|
130
|
+
(0, _react.useEffect)(() => {
|
|
183
131
|
bodyRef.current.addEventListener('scroll', scroll);
|
|
184
132
|
}, [scroll]);
|
|
185
|
-
(0, _react.useEffect)(
|
|
133
|
+
(0, _react.useEffect)(() => {
|
|
186
134
|
if (expand && bodyRef !== null && bodyRef !== void 0 && bodyRef.current && selectedYearRef !== null && selectedYearRef !== void 0 && selectedYearRef.current) {
|
|
187
135
|
bodyRef.current.scrollTo({
|
|
188
136
|
top: selectedYearRef.current.offsetTop - bodyRef.current.offsetTop
|
|
@@ -215,36 +163,44 @@ var Year = function Year(_ref) {
|
|
|
215
163
|
})]
|
|
216
164
|
});
|
|
217
165
|
};
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
166
|
+
const Header = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-content: center;\n position: relative;\n\n > div {\n width: 72px;\n line-height: 36px;\n text-align: center;\n }\n\n &::before {\n content: '';\n border-bottom: var(--border-width) solid var(--border-color);\n position: absolute;\n width: 300px;\n bottom: 0;\n z-index: 1;\n right: -16px;\n }\n"])));
|
|
167
|
+
const IconButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 36px;\n height: 36px;\n background: var(--color-background1);\n border: none;\n color: var(--font-on-background);\n padding: 0;\n transition: 0.3s;\n\n &:hover {\n color: var(--color-primary);\n }\n\n ", "\n\n ", "\n"])), _ref2 => {
|
|
168
|
+
let {
|
|
169
|
+
disabled
|
|
170
|
+
} = _ref2;
|
|
223
171
|
return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n opacity: 0.5;\n\n &:hover {\n color: var(--font-on-background);\n }\n "])));
|
|
224
|
-
},
|
|
225
|
-
|
|
226
|
-
|
|
172
|
+
}, _ref3 => {
|
|
173
|
+
let {
|
|
174
|
+
right,
|
|
175
|
+
$rotate
|
|
176
|
+
} = _ref3;
|
|
227
177
|
return right && "\n position: absolute;\n right: 0;\n ".concat($rotate && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n transform: rotate(180deg);\n "]))), "\n ");
|
|
228
178
|
});
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
179
|
+
const Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n flex-wrap: wrap;\n height: 0;\n width: 100%;\n display: ", ";\n transition: 0.3s;\n overflow-y: scroll;\n gap: 12px 0;\n ", "\n\n ", "\n"])), _ref4 => {
|
|
180
|
+
let {
|
|
181
|
+
expand
|
|
182
|
+
} = _ref4;
|
|
232
183
|
return expand ? 'flex' : 'none';
|
|
233
|
-
}, _scrollbar.default,
|
|
234
|
-
|
|
184
|
+
}, _scrollbar.default, _ref5 => {
|
|
185
|
+
let {
|
|
186
|
+
fixedYear
|
|
187
|
+
} = _ref5;
|
|
235
188
|
return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n height: ", "px};\n "])), fixedYear ? '144' : '192');
|
|
236
189
|
});
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
190
|
+
const Item = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n width: calc(100% / 3);\n height: 36px;\n line-height: 36px;\n text-align: center;\n border-radius: var(--border-radius-s);\n padding: 0;\n border: none;\n color: var(--font-on-background);\n background: var(--color-background1);\n\n &:hover {\n ", "\n }\n\n ", "\n\n ", "\n"])), _ref6 => {
|
|
191
|
+
let {
|
|
192
|
+
disabled
|
|
193
|
+
} = _ref6;
|
|
240
194
|
return !disabled && 'background: var(--color-primary);';
|
|
241
|
-
},
|
|
242
|
-
|
|
195
|
+
}, _ref7 => {
|
|
196
|
+
let {
|
|
197
|
+
disabled
|
|
198
|
+
} = _ref7;
|
|
243
199
|
return disabled && 'color: var(--font-on-mute)';
|
|
244
|
-
},
|
|
245
|
-
|
|
200
|
+
}, _ref8 => {
|
|
201
|
+
let {
|
|
202
|
+
selected
|
|
203
|
+
} = _ref8;
|
|
246
204
|
return selected && 'background: var(--color-hover)';
|
|
247
205
|
});
|
|
248
|
-
|
|
249
|
-
var _default = Year;
|
|
250
|
-
exports.default = _default;
|
|
206
|
+
var _default = exports.default = Year;
|
|
@@ -5,27 +5,23 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
Object.defineProperty(exports, "useChangeNumber", {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: function
|
|
8
|
+
get: function () {
|
|
9
9
|
return _useChangeNumber.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "useDecrease", {
|
|
13
13
|
enumerable: true,
|
|
14
|
-
get: function
|
|
14
|
+
get: function () {
|
|
15
15
|
return _useDecrease.default;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
Object.defineProperty(exports, "useIncrease", {
|
|
19
19
|
enumerable: true,
|
|
20
|
-
get: function
|
|
20
|
+
get: function () {
|
|
21
21
|
return _useIncrease.default;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
|
|
25
24
|
var _useIncrease = _interopRequireDefault(require("./useIncrease"));
|
|
26
|
-
|
|
27
25
|
var _useDecrease = _interopRequireDefault(require("./useDecrease"));
|
|
28
|
-
|
|
29
26
|
var _useChangeNumber = _interopRequireDefault(require("./useChangeNumber"));
|
|
30
|
-
|
|
31
27
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -4,52 +4,39 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var _utils = require("@cashub/utils");
|
|
9
|
+
const useChangeNumber = (min, max, setState, name) => {
|
|
10
|
+
return (0, _react.useCallback)(number => {
|
|
11
|
+
let value = String(number);
|
|
11
12
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
-
|
|
16
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
17
|
-
|
|
18
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
19
|
-
|
|
20
|
-
var useChangeNumber = function useChangeNumber(min, max, setState, name) {
|
|
21
|
-
return (0, _react.useCallback)(function (number) {
|
|
22
|
-
var value = String(number); // update value when value is a valid value
|
|
23
|
-
|
|
13
|
+
// update value when value is a valid value
|
|
24
14
|
if (value.length > 0) {
|
|
25
15
|
// if value is not a integer, then remove last char
|
|
26
16
|
if (!(0, _utils.isInteger)(value)) {
|
|
27
17
|
value = value.substring(0, value.length - 1);
|
|
28
|
-
}
|
|
29
|
-
|
|
18
|
+
}
|
|
30
19
|
|
|
20
|
+
// use min value instead when exceed minimum
|
|
31
21
|
if (value.length >= String(min).length && value < min) {
|
|
32
22
|
value = min;
|
|
33
|
-
}
|
|
34
|
-
|
|
23
|
+
}
|
|
35
24
|
|
|
25
|
+
// use max value instead when exceed maximum
|
|
36
26
|
if (value > max) {
|
|
37
27
|
value = max;
|
|
38
28
|
}
|
|
39
29
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
30
|
+
setState(previous => {
|
|
31
|
+
if (name && typeof previous === 'object') {
|
|
32
|
+
const newState = {
|
|
33
|
+
...previous
|
|
34
|
+
};
|
|
45
35
|
newState[name] = value;
|
|
46
36
|
return newState;
|
|
47
37
|
}
|
|
48
|
-
|
|
49
38
|
return value;
|
|
50
39
|
});
|
|
51
40
|
}, [min, max, setState, name]);
|
|
52
41
|
};
|
|
53
|
-
|
|
54
|
-
var _default = useChangeNumber;
|
|
55
|
-
exports.default = _default;
|
|
42
|
+
var _default = exports.default = useChangeNumber;
|
|
@@ -4,51 +4,35 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var _pad = _interopRequireDefault(require("../utils/pad"));
|
|
11
|
-
|
|
12
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
padString = config.padString;
|
|
27
|
-
return (0, _react.useCallback)(function () {
|
|
28
|
-
setState(function (previous) {
|
|
29
|
-
if (name && _typeof(previous) === 'object') {
|
|
30
|
-
var _value = parseInt(previous[name], 10) - 1;
|
|
31
|
-
|
|
32
|
-
if (_value < min) {
|
|
33
|
-
_value = max;
|
|
10
|
+
const useDecrease = function (min, max, setState) {
|
|
11
|
+
let config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
12
|
+
const {
|
|
13
|
+
name,
|
|
14
|
+
length,
|
|
15
|
+
padString
|
|
16
|
+
} = config;
|
|
17
|
+
return (0, _react.useCallback)(() => {
|
|
18
|
+
setState(previous => {
|
|
19
|
+
if (name && typeof previous === 'object') {
|
|
20
|
+
let value = parseInt(previous[name], 10) - 1;
|
|
21
|
+
if (value < min) {
|
|
22
|
+
value = max;
|
|
34
23
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
newState[name] = (0, _pad.default)(
|
|
24
|
+
const newState = {
|
|
25
|
+
...previous
|
|
26
|
+
};
|
|
27
|
+
newState[name] = (0, _pad.default)(value, length, padString);
|
|
39
28
|
return newState;
|
|
40
29
|
}
|
|
41
|
-
|
|
42
|
-
var value = parseInt(previous, 10) - 1;
|
|
43
|
-
|
|
30
|
+
let value = parseInt(previous, 10) - 1;
|
|
44
31
|
if (value < min) {
|
|
45
32
|
value = max;
|
|
46
33
|
}
|
|
47
|
-
|
|
48
34
|
return (0, _pad.default)(value, length, padString);
|
|
49
35
|
});
|
|
50
36
|
}, [min, max, setState, name, length, padString]);
|
|
51
37
|
};
|
|
52
|
-
|
|
53
|
-
var _default = useDecrease;
|
|
54
|
-
exports.default = _default;
|
|
38
|
+
var _default = exports.default = useDecrease;
|
|
@@ -4,51 +4,35 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var _pad = _interopRequireDefault(require("../utils/pad"));
|
|
11
|
-
|
|
12
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
padString = config.padString;
|
|
27
|
-
return (0, _react.useCallback)(function () {
|
|
28
|
-
setState(function (previous) {
|
|
29
|
-
if (name && _typeof(previous) === 'object') {
|
|
30
|
-
var _value = parseInt(previous[name], 10) + 1;
|
|
31
|
-
|
|
32
|
-
if (_value > max) {
|
|
33
|
-
_value = min;
|
|
10
|
+
const useIncrease = function (min, max, setState) {
|
|
11
|
+
let config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
12
|
+
const {
|
|
13
|
+
name,
|
|
14
|
+
length,
|
|
15
|
+
padString
|
|
16
|
+
} = config;
|
|
17
|
+
return (0, _react.useCallback)(() => {
|
|
18
|
+
setState(previous => {
|
|
19
|
+
if (name && typeof previous === 'object') {
|
|
20
|
+
let value = parseInt(previous[name], 10) + 1;
|
|
21
|
+
if (value > max) {
|
|
22
|
+
value = min;
|
|
34
23
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
newState[name] = (0, _pad.default)(
|
|
24
|
+
const newState = {
|
|
25
|
+
...previous
|
|
26
|
+
};
|
|
27
|
+
newState[name] = (0, _pad.default)(value, length, padString);
|
|
39
28
|
return newState;
|
|
40
29
|
}
|
|
41
|
-
|
|
42
|
-
var value = parseInt(previous, 10) + 1;
|
|
43
|
-
|
|
30
|
+
let value = parseInt(previous, 10) + 1;
|
|
44
31
|
if (value > max) {
|
|
45
32
|
value = min;
|
|
46
33
|
}
|
|
47
|
-
|
|
48
34
|
return (0, _pad.default)(value, length, padString);
|
|
49
35
|
});
|
|
50
36
|
}, [min, max, setState, name, length, padString]);
|
|
51
37
|
};
|
|
52
|
-
|
|
53
|
-
var _default = useIncrease;
|
|
54
|
-
exports.default = _default;
|
|
38
|
+
var _default = exports.default = useIncrease;
|
package/datetimePicker/index.js
CHANGED
|
@@ -5,59 +5,51 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
Object.defineProperty(exports, "DatePicker", {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: function
|
|
8
|
+
get: function () {
|
|
9
9
|
return _DatePicker.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "DatePickerV2", {
|
|
13
13
|
enumerable: true,
|
|
14
|
-
get: function
|
|
14
|
+
get: function () {
|
|
15
15
|
return _DatePickerV.default;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
Object.defineProperty(exports, "DatetimePicker", {
|
|
19
19
|
enumerable: true,
|
|
20
|
-
get: function
|
|
20
|
+
get: function () {
|
|
21
21
|
return _DatetimePicker.default;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
24
|
Object.defineProperty(exports, "DatetimePickerV2", {
|
|
25
25
|
enumerable: true,
|
|
26
|
-
get: function
|
|
26
|
+
get: function () {
|
|
27
27
|
return _DatetimePickerV.default;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
30
|
Object.defineProperty(exports, "TimeInput", {
|
|
31
31
|
enumerable: true,
|
|
32
|
-
get: function
|
|
32
|
+
get: function () {
|
|
33
33
|
return _TimeInput.default;
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
36
|
Object.defineProperty(exports, "TimePicker", {
|
|
37
37
|
enumerable: true,
|
|
38
|
-
get: function
|
|
38
|
+
get: function () {
|
|
39
39
|
return _TimePicker.default;
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
42
|
Object.defineProperty(exports, "TimePickerStyle", {
|
|
43
43
|
enumerable: true,
|
|
44
|
-
get: function
|
|
44
|
+
get: function () {
|
|
45
45
|
return _TimePickerStyle.default;
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
|
-
|
|
49
48
|
var _DatePicker = _interopRequireDefault(require("./DatePicker"));
|
|
50
|
-
|
|
51
49
|
var _DatePickerV = _interopRequireDefault(require("./DatePickerV2"));
|
|
52
|
-
|
|
53
50
|
var _DatetimePicker = _interopRequireDefault(require("./DatetimePicker"));
|
|
54
|
-
|
|
55
51
|
var _DatetimePickerV = _interopRequireDefault(require("./DatetimePickerV2"));
|
|
56
|
-
|
|
57
52
|
var _TimeInput = _interopRequireDefault(require("./TimeInput"));
|
|
58
|
-
|
|
59
53
|
var _TimePicker = _interopRequireDefault(require("./TimePicker"));
|
|
60
|
-
|
|
61
54
|
var _TimePickerStyle = _interopRequireDefault(require("./TimePickerStyle"));
|
|
62
|
-
|
|
63
55
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|