@ceed/cds 0.0.126 → 0.0.128
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/index.js +1 -6
- package/package.json +2 -3
- package/dist/components/Accordions/Accordions.js +0 -66
- package/dist/components/Accordions/index.js +0 -3
- package/dist/components/Autocomplete/Autocomplete.js +0 -251
- package/dist/components/Autocomplete/index.js +0 -3
- package/dist/components/Box/Box.js +0 -6
- package/dist/components/Box/index.js +0 -3
- package/dist/components/Breadcrumbs/Breadcrumbs.js +0 -67
- package/dist/components/Breadcrumbs/index.js +0 -3
- package/dist/components/Button/Button.js +0 -28
- package/dist/components/Button/index.js +0 -3
- package/dist/components/Calendar/Calendar.js +0 -383
- package/dist/components/Calendar/hooks/use-calendar-props.js +0 -80
- package/dist/components/Calendar/hooks/use-calendar.js +0 -244
- package/dist/components/Calendar/index.js +0 -3
- package/dist/components/Calendar/types.js +0 -1
- package/dist/components/Calendar/utils/index.js +0 -72
- package/dist/components/Card/Card.js +0 -22
- package/dist/components/Card/index.js +0 -3
- package/dist/components/Checkbox/Checkbox.js +0 -28
- package/dist/components/Checkbox/index.js +0 -3
- package/dist/components/Chip/Chip.js +0 -6
- package/dist/components/Chip/index.js +0 -3
- package/dist/components/Container/Container.js +0 -65
- package/dist/components/Container/index.js +0 -3
- package/dist/components/CurrencyInput/CurrencyInput.js +0 -108
- package/dist/components/CurrencyInput/hooks/use-currency-setting.js +0 -165
- package/dist/components/CurrencyInput/index.js +0 -3
- package/dist/components/DataTable/DataTable.js +0 -437
- package/dist/components/DataTable/index.js +0 -3
- package/dist/components/DataTable/types.js +0 -1
- package/dist/components/DatePicker/DatePicker.js +0 -207
- package/dist/components/DatePicker/index.js +0 -3
- package/dist/components/DateRangePicker/DateRangePicker.js +0 -209
- package/dist/components/DateRangePicker/index.js +0 -3
- package/dist/components/DialogActions/DialogActions.js +0 -15
- package/dist/components/DialogActions/index.js +0 -3
- package/dist/components/DialogContent/DialogContent.js +0 -12
- package/dist/components/DialogContent/index.js +0 -3
- package/dist/components/DialogFrame/DialogFrame.js +0 -51
- package/dist/components/DialogFrame/index.js +0 -3
- package/dist/components/DialogTitle/DialogTitle.js +0 -12
- package/dist/components/DialogTitle/index.js +0 -3
- package/dist/components/Divider/Divider.js +0 -28
- package/dist/components/Divider/index.js +0 -3
- package/dist/components/Dropdown/Dropdown.js +0 -6
- package/dist/components/Dropdown/index.js +0 -3
- package/dist/components/FormControl/FormControl.js +0 -17
- package/dist/components/FormControl/index.js +0 -3
- package/dist/components/FormHelperText/FormHelperText.js +0 -6
- package/dist/components/FormHelperText/index.js +0 -3
- package/dist/components/FormLabel/FormLabel.js +0 -6
- package/dist/components/FormLabel/index.js +0 -3
- package/dist/components/Grid/Grid.js +0 -6
- package/dist/components/Grid/index.js +0 -3
- package/dist/components/IconButton/IconButton.js +0 -28
- package/dist/components/IconButton/index.js +0 -3
- package/dist/components/Input/Input.js +0 -51
- package/dist/components/Input/index.js +0 -3
- package/dist/components/InsetDrawer/InsetDrawer.js +0 -45
- package/dist/components/InsetDrawer/index.js +0 -3
- package/dist/components/Markdown/Markdown.js +0 -59
- package/dist/components/Markdown/index.js +0 -3
- package/dist/components/Menu/Menu.js +0 -56
- package/dist/components/Menu/index.js +0 -3
- package/dist/components/Modal/Modal.js +0 -63
- package/dist/components/Modal/index.js +0 -3
- package/dist/components/MonthPicker/MonthPicker.js +0 -203
- package/dist/components/MonthPicker/index.js +0 -3
- package/dist/components/MonthRangePicker/MonthRangePicker.js +0 -207
- package/dist/components/MonthRangePicker/index.js +0 -3
- package/dist/components/Radio/Radio.js +0 -10
- package/dist/components/Radio/index.js +0 -3
- package/dist/components/RadioList/RadioList.js +0 -38
- package/dist/components/RadioList/index.js +0 -3
- package/dist/components/Select/Select.js +0 -76
- package/dist/components/Select/index.js +0 -3
- package/dist/components/Sheet/Sheet.js +0 -6
- package/dist/components/Sheet/index.js +0 -3
- package/dist/components/Stack/Stack.js +0 -6
- package/dist/components/Stack/index.js +0 -3
- package/dist/components/Switch/Switch.js +0 -54
- package/dist/components/Switch/index.js +0 -3
- package/dist/components/Table/Table.js +0 -89
- package/dist/components/Table/index.js +0 -3
- package/dist/components/Tabs/Tabs.js +0 -18
- package/dist/components/Tabs/index.js +0 -3
- package/dist/components/Textarea/Textarea.js +0 -50
- package/dist/components/Textarea/index.js +0 -3
- package/dist/components/ThemeProvider/ThemeProvider.js +0 -159
- package/dist/components/ThemeProvider/index.js +0 -3
- package/dist/components/Tooltip/Tooltip.js +0 -28
- package/dist/components/Tooltip/index.js +0 -3
- package/dist/components/Typography/Typography.js +0 -28
- package/dist/components/Typography/index.js +0 -3
- package/dist/components/Uploader/Uploader.js +0 -353
- package/dist/components/Uploader/index.js +0 -3
- package/dist/components/index.js +0 -44
- package/dist/index.mjs +0 -1
|
@@ -1,207 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from "react";
|
|
24
|
-
import { IMaskInput, IMask } from "react-imask";
|
|
25
|
-
// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
|
|
26
|
-
import CalendarTodayIcon from "@mui/icons-material/esm/CalendarToday.js";
|
|
27
|
-
import { styled } from "@mui/joy";
|
|
28
|
-
import { FocusTrap, ClickAwayListener, Popper } from "@mui/base";
|
|
29
|
-
import Input from "../Input";
|
|
30
|
-
import IconButton from "../IconButton";
|
|
31
|
-
import Sheet from "../Sheet";
|
|
32
|
-
import Calendar from "../Calendar";
|
|
33
|
-
import DialogActions from "../DialogActions";
|
|
34
|
-
import Button from "../Button";
|
|
35
|
-
import FormControl from "../FormControl";
|
|
36
|
-
import FormLabel from "../FormLabel";
|
|
37
|
-
import FormHelperText from "../FormHelperText";
|
|
38
|
-
var StyledPopper = styled(Popper, {
|
|
39
|
-
name: "DatePicker",
|
|
40
|
-
slot: "popper",
|
|
41
|
-
})(function (_a) {
|
|
42
|
-
var theme = _a.theme;
|
|
43
|
-
return ({
|
|
44
|
-
zIndex: theme.zIndex.tooltip,
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
var CalendarSheet = styled(Sheet, {
|
|
48
|
-
name: "DatePicker",
|
|
49
|
-
slot: "sheet",
|
|
50
|
-
overridesResolver: function (props, styles) { return styles.root; },
|
|
51
|
-
})(function (_a) {
|
|
52
|
-
var theme = _a.theme;
|
|
53
|
-
return ({
|
|
54
|
-
width: "264px",
|
|
55
|
-
boxShadow: theme.shadow.md,
|
|
56
|
-
borderRadius: theme.radius.md,
|
|
57
|
-
});
|
|
58
|
-
});
|
|
59
|
-
var DatePickerContainer = styled("div", {
|
|
60
|
-
name: "DatePicker",
|
|
61
|
-
slot: "container",
|
|
62
|
-
})({
|
|
63
|
-
width: "100%",
|
|
64
|
-
});
|
|
65
|
-
var formatValueString = function (date) {
|
|
66
|
-
var day = "".concat(date.getDate());
|
|
67
|
-
var month = "".concat(date.getMonth() + 1);
|
|
68
|
-
var year = date.getFullYear();
|
|
69
|
-
if (Number(day) < 10)
|
|
70
|
-
day = "0" + day;
|
|
71
|
-
if (Number(month) < 10)
|
|
72
|
-
month = "0" + month;
|
|
73
|
-
return [year, month, day].join("/");
|
|
74
|
-
};
|
|
75
|
-
var TextMaskAdapter = React.forwardRef(function TextMaskAdapter(props, ref) {
|
|
76
|
-
var onChange = props.onChange, other = __rest(props, ["onChange"]);
|
|
77
|
-
return (React.createElement(IMaskInput, __assign({}, other, { inputRef: ref, onAccept: function (value) {
|
|
78
|
-
return onChange({ target: { name: props.name, value: value } });
|
|
79
|
-
}, mask: Date,
|
|
80
|
-
// other options are optional
|
|
81
|
-
pattern: "Y/`m/`d",
|
|
82
|
-
// you can provide your own blocks definitions, default blocks for date mask are:
|
|
83
|
-
blocks: {
|
|
84
|
-
d: {
|
|
85
|
-
mask: IMask.MaskedRange,
|
|
86
|
-
from: 1,
|
|
87
|
-
to: 31,
|
|
88
|
-
maxLength: 2,
|
|
89
|
-
},
|
|
90
|
-
m: {
|
|
91
|
-
mask: IMask.MaskedRange,
|
|
92
|
-
from: 1,
|
|
93
|
-
to: 12,
|
|
94
|
-
maxLength: 2,
|
|
95
|
-
},
|
|
96
|
-
Y: {
|
|
97
|
-
mask: IMask.MaskedRange,
|
|
98
|
-
from: 1900,
|
|
99
|
-
to: 9999,
|
|
100
|
-
},
|
|
101
|
-
},
|
|
102
|
-
// define date -> str convertion
|
|
103
|
-
format: formatValueString,
|
|
104
|
-
// define str -> date convertion
|
|
105
|
-
parse: function (str) {
|
|
106
|
-
var yearMonthDay = str.split("/");
|
|
107
|
-
return new Date(Number(yearMonthDay[0]), Number(yearMonthDay[1]) - 1, Number(yearMonthDay[2]));
|
|
108
|
-
},
|
|
109
|
-
// optional interval options
|
|
110
|
-
// min={new Date(2000, 0, 1)} // defaults to `1900-01-01`
|
|
111
|
-
// max={new Date(2020, 0, 1)} // defaults to `9999-01-01`
|
|
112
|
-
autofix: "pad", overwrite: true })));
|
|
113
|
-
});
|
|
114
|
-
var DatePicker = forwardRef(function (props, ref) {
|
|
115
|
-
// prop destruction
|
|
116
|
-
var onChange = props.onChange, disabled = props.disabled, label = props.label, error = props.error, helperText = props.helperText, minDate = props.minDate, maxDate = props.maxDate, disableFuture = props.disableFuture, disablePast = props.disablePast, required = props.required, innerProps = __rest(props, ["onChange", "disabled", "label", "error", "helperText", "minDate", "maxDate", "disableFuture", "disablePast", "required"]);
|
|
117
|
-
// lib hooks
|
|
118
|
-
// state, ref, querystring hooks
|
|
119
|
-
var innerRef = useRef(null);
|
|
120
|
-
var _a = useState(props.value || ""), value = _a[0], setValue = _a[1];
|
|
121
|
-
var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
122
|
-
// form hooks
|
|
123
|
-
// query hooks
|
|
124
|
-
// calculated values
|
|
125
|
-
var open = Boolean(anchorEl);
|
|
126
|
-
// effects
|
|
127
|
-
useEffect(function () {
|
|
128
|
-
setValue(props.value || "");
|
|
129
|
-
}, [props.value]);
|
|
130
|
-
useEffect(function () {
|
|
131
|
-
var _a;
|
|
132
|
-
if (!anchorEl) {
|
|
133
|
-
// NOTE: 변경된 값을 blur이벤트 핸들러에서 다룰려면 calendar tooltip이 닫힐 때 blur 이벤트를 발생시켜야 한다.
|
|
134
|
-
(_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
135
|
-
}
|
|
136
|
-
}, [anchorEl, innerRef]);
|
|
137
|
-
useImperativeHandle(ref, function () { return innerRef.current; }, [
|
|
138
|
-
innerRef.current,
|
|
139
|
-
]);
|
|
140
|
-
// handlers
|
|
141
|
-
var handleChange = useCallback(function (event) {
|
|
142
|
-
setValue(event.target.value);
|
|
143
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
144
|
-
}, [onChange]);
|
|
145
|
-
var handleCalendarToggle = useCallback(function (event) {
|
|
146
|
-
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
147
|
-
// Focus the input again after it has been blurred
|
|
148
|
-
setTimeout(function () {
|
|
149
|
-
var _a;
|
|
150
|
-
(_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
151
|
-
}, 0);
|
|
152
|
-
}, [anchorEl, setAnchorEl, innerRef]);
|
|
153
|
-
var picker = (React.createElement(DatePickerContainer, null,
|
|
154
|
-
React.createElement(FocusTrap, { open: true },
|
|
155
|
-
React.createElement(React.Fragment, null,
|
|
156
|
-
React.createElement(Input, __assign({}, innerProps, { color: error ? "danger" : innerProps.color, ref: innerRef, size: "sm", value: value, onChange: handleChange, placeholder: "YYYY/MM/DD", disabled: disabled, required: required, slotProps: {
|
|
157
|
-
input: { component: TextMaskAdapter, ref: innerRef },
|
|
158
|
-
}, sx: {
|
|
159
|
-
// NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
|
|
160
|
-
fontFamily: "monospace",
|
|
161
|
-
}, endDecorator: React.createElement(IconButton, { variant: "plain", onClick: handleCalendarToggle },
|
|
162
|
-
React.createElement(CalendarTodayIcon, null)) })),
|
|
163
|
-
open && (React.createElement(ClickAwayListener, { onClickAway: function () { return setAnchorEl(null); } },
|
|
164
|
-
React.createElement(StyledPopper, { id: "date-picker-popper", open: true, anchorEl: anchorEl, placement: "bottom-end",
|
|
165
|
-
// NOTE: 값이 변경 되기전 blur 이벤트 방지
|
|
166
|
-
onMouseDown: function (e) { return e.preventDefault(); }, modifiers: [
|
|
167
|
-
{
|
|
168
|
-
name: "offset",
|
|
169
|
-
options: {
|
|
170
|
-
offset: [4, 4],
|
|
171
|
-
},
|
|
172
|
-
},
|
|
173
|
-
] },
|
|
174
|
-
React.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" },
|
|
175
|
-
React.createElement(Calendar, { value: !Number.isNaN(new Date(value).getTime())
|
|
176
|
-
? [new Date(value), undefined]
|
|
177
|
-
: undefined, onChange: function (_a) {
|
|
178
|
-
var date = _a[0];
|
|
179
|
-
handleChange({
|
|
180
|
-
target: {
|
|
181
|
-
name: props.name,
|
|
182
|
-
value: formatValueString(date),
|
|
183
|
-
},
|
|
184
|
-
});
|
|
185
|
-
setAnchorEl(null);
|
|
186
|
-
}, minDate: minDate ? new Date(minDate) : undefined, maxDate: maxDate ? new Date(maxDate) : undefined, disableFuture: disableFuture, disablePast: disablePast }),
|
|
187
|
-
React.createElement(DialogActions, { sx: {
|
|
188
|
-
p: 1,
|
|
189
|
-
} },
|
|
190
|
-
React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () {
|
|
191
|
-
handleChange({
|
|
192
|
-
target: {
|
|
193
|
-
name: props.name,
|
|
194
|
-
value: "",
|
|
195
|
-
},
|
|
196
|
-
});
|
|
197
|
-
setAnchorEl(null);
|
|
198
|
-
} }, "Clear"))))))))));
|
|
199
|
-
if (label) {
|
|
200
|
-
return (React.createElement(FormControl, { required: required, disabled: disabled, error: error, size: "sm" },
|
|
201
|
-
React.createElement(FormLabel, null, label),
|
|
202
|
-
picker,
|
|
203
|
-
helperText && React.createElement(FormHelperText, null, helperText)));
|
|
204
|
-
}
|
|
205
|
-
return picker;
|
|
206
|
-
});
|
|
207
|
-
export { DatePicker };
|
|
@@ -1,209 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
|
|
24
|
-
import { IMaskInput, IMask } from "react-imask";
|
|
25
|
-
// @ts-ignore: ESM import 해야만 프레이머에서 정상적으로 동작한다. https://github.com/mui/material-ui/issues/35233
|
|
26
|
-
import CalendarTodayIcon from "@mui/icons-material/esm/CalendarToday.js";
|
|
27
|
-
import { styled } from "@mui/joy";
|
|
28
|
-
import { FocusTrap, ClickAwayListener, Popper } from "@mui/base";
|
|
29
|
-
import Input from "../Input";
|
|
30
|
-
import IconButton from "../IconButton";
|
|
31
|
-
import Sheet from "../Sheet";
|
|
32
|
-
import Calendar from "../Calendar";
|
|
33
|
-
import DialogActions from "../DialogActions";
|
|
34
|
-
import Button from "../Button";
|
|
35
|
-
import FormControl from "../FormControl";
|
|
36
|
-
import FormLabel from "../FormLabel";
|
|
37
|
-
import FormHelperText from "../FormHelperText";
|
|
38
|
-
var StyledPopper = styled(Popper, {
|
|
39
|
-
name: "DateRangePicker",
|
|
40
|
-
slot: "popper",
|
|
41
|
-
})(function (_a) {
|
|
42
|
-
var theme = _a.theme;
|
|
43
|
-
return ({
|
|
44
|
-
zIndex: theme.zIndex.tooltip,
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
var CalendarSheet = styled(Sheet, {
|
|
48
|
-
name: "DateRangePicker",
|
|
49
|
-
slot: "sheet",
|
|
50
|
-
overridesResolver: function (props, styles) { return styles.root; },
|
|
51
|
-
})(function (_a) {
|
|
52
|
-
var theme = _a.theme;
|
|
53
|
-
return ({
|
|
54
|
-
zIndex: theme.zIndex.tooltip,
|
|
55
|
-
width: "264px",
|
|
56
|
-
boxShadow: theme.shadow.md,
|
|
57
|
-
borderRadius: theme.radius.md,
|
|
58
|
-
});
|
|
59
|
-
});
|
|
60
|
-
var DateRangePickerContainer = styled("div", {
|
|
61
|
-
name: "DateRangePicker",
|
|
62
|
-
slot: "container",
|
|
63
|
-
})({
|
|
64
|
-
width: "100%",
|
|
65
|
-
});
|
|
66
|
-
var formatValueString = function (_a) {
|
|
67
|
-
var date1 = _a[0], date2 = _a[1];
|
|
68
|
-
var getStr = function (date) {
|
|
69
|
-
var day = "".concat(date.getDate());
|
|
70
|
-
var month = "".concat(date.getMonth() + 1);
|
|
71
|
-
var year = date.getFullYear();
|
|
72
|
-
if (Number(day) < 10)
|
|
73
|
-
day = "0" + day;
|
|
74
|
-
if (Number(month) < 10)
|
|
75
|
-
month = "0" + month;
|
|
76
|
-
return [year, month, day].join("/");
|
|
77
|
-
};
|
|
78
|
-
return [getStr(date1), date2 ? getStr(date2) : ""].join(" - ");
|
|
79
|
-
};
|
|
80
|
-
var parseDate = function (str) {
|
|
81
|
-
var date1 = str.split(" - ")[0] || "";
|
|
82
|
-
var date2 = str.split(" - ")[1] || "";
|
|
83
|
-
var yearMonthDay1 = date1.split("/");
|
|
84
|
-
var yearMonthDay2 = date2.split("/");
|
|
85
|
-
return [
|
|
86
|
-
new Date(Number(yearMonthDay1[0]), Number(yearMonthDay1[1]) - 1, Number(yearMonthDay1[2])),
|
|
87
|
-
new Date(Number(yearMonthDay2[0]), Number(yearMonthDay2[1]) - 1, Number(yearMonthDay2[2])),
|
|
88
|
-
];
|
|
89
|
-
};
|
|
90
|
-
var TextMaskAdapter = React.forwardRef(function TextMaskAdapter(props, ref) {
|
|
91
|
-
var onChange = props.onChange, other = __rest(props, ["onChange"]);
|
|
92
|
-
return (React.createElement(IMaskInput, __assign({}, other, { inputRef: ref, onAccept: function (value) {
|
|
93
|
-
return onChange({ target: { name: props.name, value: value } });
|
|
94
|
-
}, mask: Date,
|
|
95
|
-
// other options are optional
|
|
96
|
-
pattern: "Y/`m/`d - Y/`m/`d",
|
|
97
|
-
// you can provide your own blocks definitions, default blocks for date mask are:
|
|
98
|
-
blocks: {
|
|
99
|
-
d: {
|
|
100
|
-
mask: IMask.MaskedRange,
|
|
101
|
-
from: 1,
|
|
102
|
-
to: 31,
|
|
103
|
-
maxLength: 2,
|
|
104
|
-
},
|
|
105
|
-
m: {
|
|
106
|
-
mask: IMask.MaskedRange,
|
|
107
|
-
from: 1,
|
|
108
|
-
to: 12,
|
|
109
|
-
maxLength: 2,
|
|
110
|
-
},
|
|
111
|
-
Y: {
|
|
112
|
-
mask: IMask.MaskedRange,
|
|
113
|
-
from: 1900,
|
|
114
|
-
to: 9999,
|
|
115
|
-
},
|
|
116
|
-
},
|
|
117
|
-
// define date -> str convertion
|
|
118
|
-
format: formatValueString,
|
|
119
|
-
// define str -> date convertion
|
|
120
|
-
parse: parseDate,
|
|
121
|
-
// optional interval options
|
|
122
|
-
// min={new Date(2000, 0, 1)} // defaults to `1900-01-01`
|
|
123
|
-
// max={new Date(2020, 0, 1)} // defaults to `9999-01-01`
|
|
124
|
-
autofix: "pad", overwrite: true })));
|
|
125
|
-
});
|
|
126
|
-
var DateRangePicker = forwardRef(function (props, ref) {
|
|
127
|
-
// prop destruction
|
|
128
|
-
var onChange = props.onChange, disabled = props.disabled, label = props.label, error = props.error, helperText = props.helperText, minDate = props.minDate, maxDate = props.maxDate, disableFuture = props.disableFuture, disablePast = props.disablePast, required = props.required, innerProps = __rest(props, ["onChange", "disabled", "label", "error", "helperText", "minDate", "maxDate", "disableFuture", "disablePast", "required"]);
|
|
129
|
-
// lib hooks
|
|
130
|
-
// state, ref, querystring hooks
|
|
131
|
-
var innerRef = useRef(null);
|
|
132
|
-
var _a = useState(props.value || ""), value = _a[0], setValue = _a[1];
|
|
133
|
-
var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
|
|
134
|
-
// form hooks
|
|
135
|
-
// query hooks
|
|
136
|
-
// calculated values
|
|
137
|
-
var open = Boolean(anchorEl);
|
|
138
|
-
var calendarValue = useMemo(function () { return (value ? parseDate(value) : undefined); }, [value]);
|
|
139
|
-
// effects
|
|
140
|
-
useEffect(function () {
|
|
141
|
-
setValue(props.value || "");
|
|
142
|
-
}, [props.value]);
|
|
143
|
-
useEffect(function () {
|
|
144
|
-
var _a;
|
|
145
|
-
if (!anchorEl) {
|
|
146
|
-
// NOTE: 변경된 값을 blur이벤트 핸들러에서 다룰려면 calendar tooltip이 닫힐 때 blur 이벤트를 발생시켜야 한다.
|
|
147
|
-
(_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
148
|
-
}
|
|
149
|
-
}, [anchorEl, innerRef]);
|
|
150
|
-
useImperativeHandle(ref, function () { return innerRef.current; }, [
|
|
151
|
-
innerRef.current,
|
|
152
|
-
]);
|
|
153
|
-
// handlers
|
|
154
|
-
var handleChange = useCallback(function (event) {
|
|
155
|
-
setValue(event.target.value);
|
|
156
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
157
|
-
}, [onChange]);
|
|
158
|
-
var handleCalendarToggle = useCallback(function (event) {
|
|
159
|
-
var _a;
|
|
160
|
-
setAnchorEl(anchorEl ? null : event.currentTarget);
|
|
161
|
-
(_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
162
|
-
}, [anchorEl, setAnchorEl, innerRef]);
|
|
163
|
-
var handleCalendarChange = useCallback(function (_a) {
|
|
164
|
-
var date1 = _a[0], date2 = _a[1];
|
|
165
|
-
if (!date1 || !date2)
|
|
166
|
-
return;
|
|
167
|
-
setValue(formatValueString([date1, date2]));
|
|
168
|
-
setAnchorEl(null);
|
|
169
|
-
}, [setValue, setAnchorEl]);
|
|
170
|
-
var picker = (React.createElement(DateRangePickerContainer, null,
|
|
171
|
-
React.createElement(FocusTrap, { open: true },
|
|
172
|
-
React.createElement(React.Fragment, null,
|
|
173
|
-
React.createElement(Input, __assign({}, innerProps, { color: error ? "danger" : innerProps.color, ref: ref, size: "sm", value: value, onChange: handleChange, disabled: disabled, required: required, placeholder: "YYYY/MM/DD - YYYY/MM/DD", slotProps: {
|
|
174
|
-
input: { component: TextMaskAdapter, ref: innerRef },
|
|
175
|
-
}, sx: {
|
|
176
|
-
// NOTE: placeholder char 를 텍스트로 표시하므로 동일한 너비를 가지는 mono font 를 사용해야 이질감이 없다.
|
|
177
|
-
fontFamily: "monospace",
|
|
178
|
-
}, endDecorator: React.createElement(IconButton, { variant: "plain", onClick: handleCalendarToggle },
|
|
179
|
-
React.createElement(CalendarTodayIcon, null)) })),
|
|
180
|
-
open && (React.createElement(ClickAwayListener, { onClickAway: function () { return setAnchorEl(null); } },
|
|
181
|
-
React.createElement(StyledPopper, { id: "date-range-picker-popper", open: true, anchorEl: anchorEl, placement: "bottom-end",
|
|
182
|
-
// NOTE: 값이 변경 되기전 blur 이벤트 방지
|
|
183
|
-
onMouseDown: function (e) { return e.preventDefault(); }, modifiers: [
|
|
184
|
-
{
|
|
185
|
-
name: "offset",
|
|
186
|
-
options: {
|
|
187
|
-
offset: [4, 4],
|
|
188
|
-
},
|
|
189
|
-
},
|
|
190
|
-
] },
|
|
191
|
-
React.createElement(CalendarSheet, { tabIndex: -1, role: "presentation" },
|
|
192
|
-
React.createElement(Calendar, { rangeSelection: true, defaultValue: calendarValue, onChange: handleCalendarChange, minDate: minDate ? new Date(minDate) : undefined, maxDate: maxDate ? new Date(maxDate) : undefined, disableFuture: disableFuture, disablePast: disablePast }),
|
|
193
|
-
React.createElement(DialogActions, { sx: {
|
|
194
|
-
p: 1,
|
|
195
|
-
} },
|
|
196
|
-
React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () {
|
|
197
|
-
setValue("");
|
|
198
|
-
setAnchorEl(null);
|
|
199
|
-
} }, "Clear"))))))))));
|
|
200
|
-
if (label) {
|
|
201
|
-
return (React.createElement(FormControl, { required: required, disabled: disabled, error: error, size: "sm" },
|
|
202
|
-
React.createElement(FormLabel, null, label),
|
|
203
|
-
picker,
|
|
204
|
-
helperText && React.createElement(FormHelperText, null, helperText)));
|
|
205
|
-
}
|
|
206
|
-
return picker;
|
|
207
|
-
});
|
|
208
|
-
export { DateRangePicker };
|
|
209
|
-
DateRangePicker.displayName = "DateRangePicker";
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { DialogActions as JoyDialogActions, styled } from "@mui/joy";
|
|
2
|
-
import { motion } from "framer-motion";
|
|
3
|
-
var MotionDialogActions = motion(JoyDialogActions);
|
|
4
|
-
var StyledDialogActions = styled(MotionDialogActions)(function (_a) {
|
|
5
|
-
var theme = _a.theme;
|
|
6
|
-
return ({
|
|
7
|
-
padding: theme.spacing(1),
|
|
8
|
-
gap: theme.spacing(1),
|
|
9
|
-
flexDirection: "row",
|
|
10
|
-
justifyContent: "flex-end",
|
|
11
|
-
});
|
|
12
|
-
});
|
|
13
|
-
var DialogActions = StyledDialogActions;
|
|
14
|
-
export { DialogActions };
|
|
15
|
-
DialogActions.displayName = "DialogActions";
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { DialogContent as JoyDialogContent, styled } from "@mui/joy";
|
|
2
|
-
import { motion } from "framer-motion";
|
|
3
|
-
var MotionDialogContent = motion(JoyDialogContent);
|
|
4
|
-
var StyledDialogContent = styled(MotionDialogContent)(function (_a) {
|
|
5
|
-
var theme = _a.theme;
|
|
6
|
-
return ({
|
|
7
|
-
padding: theme.spacing(0, 3, 2.5),
|
|
8
|
-
});
|
|
9
|
-
});
|
|
10
|
-
var DialogContent = StyledDialogContent;
|
|
11
|
-
export { DialogContent };
|
|
12
|
-
DialogContent.displayName = "DialogContent";
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import React from "react";
|
|
24
|
-
import DialogTitle from "../DialogTitle";
|
|
25
|
-
import DialogContent from "../DialogContent";
|
|
26
|
-
import { ModalDialog } from "../Modal";
|
|
27
|
-
import DialogActions from "../DialogActions";
|
|
28
|
-
import { styled } from "@mui/joy";
|
|
29
|
-
var StyledDialogFrame = styled(ModalDialog)(function (_a) {
|
|
30
|
-
var theme = _a.theme;
|
|
31
|
-
return ({
|
|
32
|
-
padding: 0,
|
|
33
|
-
});
|
|
34
|
-
});
|
|
35
|
-
function DialogFrame(props) {
|
|
36
|
-
// prop destruction
|
|
37
|
-
var title = props.title, children = props.children, actions = props.actions, innerProps = __rest(props, ["title", "children", "actions"]);
|
|
38
|
-
// lib hooks
|
|
39
|
-
// state, ref, querystring hooks
|
|
40
|
-
// form hooks
|
|
41
|
-
// query hooks
|
|
42
|
-
// calculated values
|
|
43
|
-
// effects
|
|
44
|
-
// handlers
|
|
45
|
-
return (React.createElement(StyledDialogFrame, __assign({}, innerProps),
|
|
46
|
-
React.createElement(DialogTitle, null, title),
|
|
47
|
-
React.createElement(DialogContent, null, children),
|
|
48
|
-
React.createElement(DialogActions, null, actions)));
|
|
49
|
-
}
|
|
50
|
-
export { DialogFrame };
|
|
51
|
-
DialogFrame.displayName = "DialogFrame";
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { DialogTitle as JoyDialogTitle, styled } from "@mui/joy";
|
|
2
|
-
import { motion } from "framer-motion";
|
|
3
|
-
var MotionDialogTitle = motion(JoyDialogTitle);
|
|
4
|
-
var StyledDialogTitle = styled(MotionDialogTitle)(function (_a) {
|
|
5
|
-
var theme = _a.theme;
|
|
6
|
-
return ({
|
|
7
|
-
padding: theme.spacing(2, 3),
|
|
8
|
-
});
|
|
9
|
-
});
|
|
10
|
-
var DialogTitle = StyledDialogTitle;
|
|
11
|
-
export { DialogTitle };
|
|
12
|
-
DialogTitle.displayName = "DialogTitle";
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
import React from "react";
|
|
13
|
-
import { Divider as JoyDivider } from "@mui/joy";
|
|
14
|
-
import { motion } from "framer-motion";
|
|
15
|
-
var MotionDivider = motion(JoyDivider);
|
|
16
|
-
var Divider = function (props) {
|
|
17
|
-
// prop destruction
|
|
18
|
-
// lib hooks
|
|
19
|
-
// state, ref, querystring hooks
|
|
20
|
-
// form hooks
|
|
21
|
-
// query hooks
|
|
22
|
-
// calculated values
|
|
23
|
-
// effects
|
|
24
|
-
// handlers
|
|
25
|
-
return React.createElement(MotionDivider, __assign({}, props));
|
|
26
|
-
};
|
|
27
|
-
export { Divider };
|
|
28
|
-
Divider.displayName = "Divider";
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { FormControl as JoyFormControl, styled, formLabelClasses, } from "@mui/joy";
|
|
2
|
-
import { motion } from "framer-motion";
|
|
3
|
-
var MotionFormControl = motion(JoyFormControl);
|
|
4
|
-
var FormControl = styled(MotionFormControl)(function (_a) {
|
|
5
|
-
var _b;
|
|
6
|
-
var theme = _a.theme;
|
|
7
|
-
return (_b = {},
|
|
8
|
-
_b[".".concat(formLabelClasses.root)] = {
|
|
9
|
-
display: "block",
|
|
10
|
-
},
|
|
11
|
-
_b[".".concat(formLabelClasses.asterisk)] = {
|
|
12
|
-
marginLeft: theme.spacing(0.5),
|
|
13
|
-
},
|
|
14
|
-
_b);
|
|
15
|
-
});
|
|
16
|
-
export { FormControl };
|
|
17
|
-
FormControl.displayName = "FormControl";
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { FormHelperText as JoyFormHelperText } from "@mui/joy";
|
|
2
|
-
import { motion } from "framer-motion";
|
|
3
|
-
var MotionFormHelperText = motion(JoyFormHelperText);
|
|
4
|
-
var FormHelperText = MotionFormHelperText;
|
|
5
|
-
export { FormHelperText };
|
|
6
|
-
FormHelperText.displayName = "FormHelperText";
|