mimir-ui-kit 1.7.1 → 1.8.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/DatePickerModal-ByEDSY5o.js +204 -0
- package/dist/assets/DatePickerModal.css +1 -0
- package/dist/assets/Input.css +1 -1
- package/dist/assets/index.css +1 -1
- package/dist/components/DatePicker/DatePicker.d.ts +44 -0
- package/dist/components/DatePicker/DatePicker.js +69 -0
- package/dist/components/DatePicker/DatePickerModal.d.ts +8 -0
- package/dist/components/DatePicker/DatePickerModal.js +9 -0
- package/dist/components/DatePicker/constants.d.ts +6 -0
- package/dist/components/DatePicker/constants.js +11 -0
- package/dist/components/DatePicker/index.d.ts +2 -0
- package/dist/components/DatePicker/index.js +4 -0
- package/dist/components/Input/Input.js +14 -14
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +2 -0
- package/dist/hooks/useClickOutside/index.d.ts +1 -0
- package/dist/hooks/useClickOutside/index.js +4 -0
- package/dist/hooks/useClickOutside/useClickOutside.d.ts +7 -0
- package/dist/hooks/useClickOutside/useClickOutside.js +25 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +4 -0
- package/dist/utils/formating/Date.d.ts +1 -0
- package/dist/utils/formating/Date.js +26 -0
- package/dist/utils/formating/Month.d.ts +8 -0
- package/dist/utils/formating/Month.js +80 -0
- package/dist/utils/formating/Numbers.d.ts +6 -0
- package/dist/utils/formating/Numbers.js +8 -0
- package/dist/utils/index.d.ts +9 -0
- package/dist/utils/index.js +11 -0
- package/package.json +1 -1
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState, useEffect } from "react";
|
|
3
|
+
import { week } from "./components/DatePicker/constants.js";
|
|
4
|
+
import { formating } from "./utils/index.js";
|
|
5
|
+
import { Button } from "./components/Button/Button.js";
|
|
6
|
+
import './assets/DatePickerModal.css';const input = "_input_1a7j7_2";
|
|
7
|
+
const wrapper = "_wrapper_1a7j7_20";
|
|
8
|
+
const active = "_active_1a7j7_26";
|
|
9
|
+
const button = "_button_1a7j7_34";
|
|
10
|
+
const h = "_h_1a7j7_80";
|
|
11
|
+
const b = "_b_1a7j7_34";
|
|
12
|
+
const d = "_d_1a7j7_6";
|
|
13
|
+
const m = "_m_1a7j7_99";
|
|
14
|
+
const a = "_a_1a7j7_26";
|
|
15
|
+
const prev = "_prev_1a7j7_101";
|
|
16
|
+
const orange = "_orange_1a7j7_117";
|
|
17
|
+
const current = "_current_1a7j7_142";
|
|
18
|
+
const cls = {
|
|
19
|
+
input,
|
|
20
|
+
"date-wrapper": "_date-wrapper_1a7j7_6",
|
|
21
|
+
wrapper,
|
|
22
|
+
active,
|
|
23
|
+
"input-wrapper": "_input-wrapper_1a7j7_30",
|
|
24
|
+
"button-wrapper": "_button-wrapper_1a7j7_34",
|
|
25
|
+
button,
|
|
26
|
+
"field-overlow": "_field-overlow_1a7j7_51",
|
|
27
|
+
"calendar-block": "_calendar-block_1a7j7_57",
|
|
28
|
+
h,
|
|
29
|
+
b,
|
|
30
|
+
d,
|
|
31
|
+
m,
|
|
32
|
+
a,
|
|
33
|
+
prev,
|
|
34
|
+
orange,
|
|
35
|
+
current
|
|
36
|
+
};
|
|
37
|
+
function DatePickerModal({
|
|
38
|
+
date,
|
|
39
|
+
onChangeValue,
|
|
40
|
+
setActive,
|
|
41
|
+
before
|
|
42
|
+
}) {
|
|
43
|
+
const field = useRef(null);
|
|
44
|
+
const _current = new Date(date);
|
|
45
|
+
const _selecte = new Date(date);
|
|
46
|
+
const current2 = {
|
|
47
|
+
y: _current.getFullYear(),
|
|
48
|
+
d: _current.getDate(),
|
|
49
|
+
m: _current.getMonth() + 1
|
|
50
|
+
};
|
|
51
|
+
const selecte = {
|
|
52
|
+
y: _selecte.getFullYear(),
|
|
53
|
+
d: _selecte.getDate(),
|
|
54
|
+
m: _selecte.getMonth() + 1
|
|
55
|
+
};
|
|
56
|
+
const countWorkDays = 4;
|
|
57
|
+
const [month, setMonth] = useState({ y: selecte.y, m: selecte.m });
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
const windowHeight = window.innerHeight;
|
|
60
|
+
if (field.current !== null) {
|
|
61
|
+
const inputPosition = field.current.getBoundingClientRect();
|
|
62
|
+
const calendarSize = field.current.offsetHeight;
|
|
63
|
+
if (windowHeight < inputPosition.y + calendarSize) {
|
|
64
|
+
field.current.style.top = -calendarSize + "px";
|
|
65
|
+
} else {
|
|
66
|
+
field.current.style.top = "65px";
|
|
67
|
+
}
|
|
68
|
+
field.current.style.opacity = "1";
|
|
69
|
+
}
|
|
70
|
+
}, [month]);
|
|
71
|
+
const countPrevDays = (e) => {
|
|
72
|
+
let dayOfWeek = e.getDay();
|
|
73
|
+
if (dayOfWeek === 0) dayOfWeek = 7;
|
|
74
|
+
return dayOfWeek - 1;
|
|
75
|
+
};
|
|
76
|
+
const currentMonthIndex = month.m - 1;
|
|
77
|
+
const currentMonthFull = new Date(month.y, currentMonthIndex);
|
|
78
|
+
const days = [];
|
|
79
|
+
const prevDays = () => {
|
|
80
|
+
const prevMonth = new Date(currentMonthFull);
|
|
81
|
+
prevMonth.setDate(prevMonth.getDate() - 1);
|
|
82
|
+
const lastDayPrevMohth = prevMonth.getDate();
|
|
83
|
+
const prevList = [];
|
|
84
|
+
for (let i = 0; i < countPrevDays(currentMonthFull); i++) {
|
|
85
|
+
prevList.push(lastDayPrevMohth - i);
|
|
86
|
+
}
|
|
87
|
+
prevList.reverse();
|
|
88
|
+
return prevList;
|
|
89
|
+
};
|
|
90
|
+
const prevDaysArray = prevDays();
|
|
91
|
+
while (currentMonthFull.getMonth() === currentMonthIndex) {
|
|
92
|
+
days.push(currentMonthFull.getDate());
|
|
93
|
+
currentMonthFull.setDate(currentMonthFull.getDate() + 1);
|
|
94
|
+
}
|
|
95
|
+
const nextDays = () => {
|
|
96
|
+
const totalViewDays = 42;
|
|
97
|
+
const daysCount = totalViewDays - (prevDaysArray.length + days.length);
|
|
98
|
+
const nextList = [];
|
|
99
|
+
for (let i = 1; i <= daysCount; i++) {
|
|
100
|
+
nextList.push(i);
|
|
101
|
+
}
|
|
102
|
+
return nextList;
|
|
103
|
+
};
|
|
104
|
+
const nextDaysArray = nextDays();
|
|
105
|
+
const update = (m2, y) => {
|
|
106
|
+
y = m2 > 12 ? y + 1 : m2 < 1 ? y - 1 : y;
|
|
107
|
+
m2 = m2 > 12 ? 1 : m2 < 1 ? 12 : m2;
|
|
108
|
+
return { y, m: m2 };
|
|
109
|
+
};
|
|
110
|
+
const onExit = () => {
|
|
111
|
+
setActive(false);
|
|
112
|
+
};
|
|
113
|
+
const next = () => {
|
|
114
|
+
setMonth(update(month.m + 1, month.y));
|
|
115
|
+
};
|
|
116
|
+
const prev2 = () => {
|
|
117
|
+
setMonth(update(month.m - 1, month.y));
|
|
118
|
+
};
|
|
119
|
+
const isBefore = (activeDate) => {
|
|
120
|
+
if (before) {
|
|
121
|
+
const beforeDate = before.getTime();
|
|
122
|
+
if (beforeDate > activeDate) return true;
|
|
123
|
+
}
|
|
124
|
+
return false;
|
|
125
|
+
};
|
|
126
|
+
const send = (searchDate) => {
|
|
127
|
+
if (isBefore(
|
|
128
|
+
(/* @__PURE__ */ new Date(
|
|
129
|
+
`${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
|
|
130
|
+
)).getTime()
|
|
131
|
+
))
|
|
132
|
+
return;
|
|
133
|
+
onChangeValue(
|
|
134
|
+
/* @__PURE__ */ new Date(
|
|
135
|
+
`${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
|
|
136
|
+
)
|
|
137
|
+
);
|
|
138
|
+
onExit();
|
|
139
|
+
};
|
|
140
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
|
|
141
|
+
/* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
|
|
142
|
+
/* @__PURE__ */ jsx(
|
|
143
|
+
Button,
|
|
144
|
+
{
|
|
145
|
+
isIconButton: true,
|
|
146
|
+
iconName: "DropdownArrowLeft16px",
|
|
147
|
+
onClick: prev2,
|
|
148
|
+
variant: "secondary-gray",
|
|
149
|
+
size: "l"
|
|
150
|
+
}
|
|
151
|
+
),
|
|
152
|
+
/* @__PURE__ */ jsxs("div", { className: cls["d"], children: [
|
|
153
|
+
formating.Month(month.m).name,
|
|
154
|
+
"’",
|
|
155
|
+
month.y.toString().slice(-2)
|
|
156
|
+
] }),
|
|
157
|
+
/* @__PURE__ */ jsx(
|
|
158
|
+
Button,
|
|
159
|
+
{
|
|
160
|
+
isIconButton: true,
|
|
161
|
+
iconName: "DropdownArrowRight16px",
|
|
162
|
+
onClick: next,
|
|
163
|
+
variant: "secondary-gray",
|
|
164
|
+
size: "l"
|
|
165
|
+
}
|
|
166
|
+
)
|
|
167
|
+
] }),
|
|
168
|
+
/* @__PURE__ */ jsxs("div", { className: cls["b"], children: [
|
|
169
|
+
week.map((i, s) => /* @__PURE__ */ jsx(
|
|
170
|
+
"div",
|
|
171
|
+
{
|
|
172
|
+
className: `${s > countWorkDays ? [cls["m"], cls["orange"]].join(" ") : cls["m"]}`,
|
|
173
|
+
children: i
|
|
174
|
+
},
|
|
175
|
+
`v${s}`
|
|
176
|
+
)),
|
|
177
|
+
prevDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key)),
|
|
178
|
+
days.map((i, s) => /* @__PURE__ */ jsx(
|
|
179
|
+
"div",
|
|
180
|
+
{
|
|
181
|
+
className: isBefore(
|
|
182
|
+
(/* @__PURE__ */ new Date(
|
|
183
|
+
`${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, i)}`
|
|
184
|
+
)).getTime()
|
|
185
|
+
) ? cls["m"] : cls["a"],
|
|
186
|
+
children: i !== 0 ? /* @__PURE__ */ jsx(
|
|
187
|
+
"b",
|
|
188
|
+
{
|
|
189
|
+
className: current2.y === month.y && current2.m === month.m && current2.d === i ? cls["current"] : "",
|
|
190
|
+
onClick: () => send(i),
|
|
191
|
+
children: i
|
|
192
|
+
}
|
|
193
|
+
) : /* @__PURE__ */ jsx("p", {})
|
|
194
|
+
},
|
|
195
|
+
s
|
|
196
|
+
)),
|
|
197
|
+
nextDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key))
|
|
198
|
+
] })
|
|
199
|
+
] }) });
|
|
200
|
+
}
|
|
201
|
+
export {
|
|
202
|
+
DatePickerModal as D,
|
|
203
|
+
cls as c
|
|
204
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._input_1a7j7_2{padding-right:var(--space-3xl)}._date-wrapper_1a7j7_6{position:relative}._date-wrapper_1a7j7_6:hover input{background:var(--input-bg-color-hover)}._date-wrapper_1a7j7_6:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}._wrapper_1a7j7_20{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_1a7j7_20._active_1a7j7_26{border-bottom:1px solid var(--citrine-100)}._input-wrapper_1a7j7_30{flex:1}._button-wrapper_1a7j7_34{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_1a7j7_34{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_1a7j7_51{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_1a7j7_57{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:#fff;border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_1a7j7_57 ._h_1a7j7_80{display:flex;width:100%;color:var(--black-100)}._calendar-block_1a7j7_57 ._b_1a7j7_34{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_1a7j7_57 ._d_1a7j7_6{display:flex;flex:1;align-items:center;justify-content:center;color:var(--black-100)}._calendar-block_1a7j7_57 ._m_1a7j7_99,._calendar-block_1a7j7_57 ._a_1a7j7_26,._calendar-block_1a7j7_57 ._prev_1a7j7_101{width:48px;height:48px;overflow:hidden}._calendar-block_1a7j7_57 ._m_1a7j7_99{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_1a7j7_57 ._m_1a7j7_99 b{font-weight:var(--font-weight-text-regular)}._calendar-block_1a7j7_57 ._orange_1a7j7_117{color:var(--citrine-100)}._calendar-block_1a7j7_57 ._a_1a7j7_26{color:var(--black-100);border-radius:var(--control-radius-xs)}._calendar-block_1a7j7_57 ._a_1a7j7_26 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_1a7j7_57 ._a_1a7j7_26 b:hover{background:var(--black-10)}._calendar-block_1a7j7_57 ._a_1a7j7_26 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_1a7j7_57 ._current_1a7j7_142{background:var(--sapphire-10);border-radius:var(--control-radius-xs)}
|
package/dist/assets/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._input-
|
|
1
|
+
._input-wrapper_16d1h_2{position:relative}._input-wrapper_16d1h_2 ._label_16d1h_5{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;transform-origin:left center;transition:transform .15s ease-out,color .15s ease-out;pointer-events:none}._input-wrapper_16d1h_2 ._label_16d1h_5._active-label_16d1h_18{transform:scale(var(--label-scaled)) translateY(calc(var(--input-font-size) * -1))}._input-wrapper_16d1h_2:hover ._label_16d1h_5,._input-wrapper_16d1h_2:focus-within ._label_16d1h_5{color:var(--label-color)}._input_16d1h_2{--button-border-radius-l: 8px;--button-border-radius-m: 6px;--button-border-radius-s: 6px;position:relative;display:block;width:100%;min-width:0;height:var(--input-height);padding-top:0;color:var(--dark-text);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);letter-spacing:-.42px;background:none;background-color:var(--input-bg-color);border-bottom:1px solid transparent;border-radius:var(--input-border-radius);outline:none;cursor:var(--input-cursor);transition:background-color .2s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-left:var(--input-padding);padding-right:var(--input-padding);font-feature-settings:"zero"}._input_16d1h_2:hover{color:var(--input-color-hover);background:var(--input-bg-color-hover)}._input_16d1h_2:focus{color:var(--input-color-active);background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._s_16d1h_61{--input-height: var(--space-xxl);--input-font-size: var(--control-text-size-m);--input-line-height: var(--line-height-text-xs);--input-padding: var(--space-m);--input-padding-position: var(--space-1xs);--input-border-radius: var(--button-border-radius-s);--label-font-size: var(--size-text-xs);--label-scaled: .85;--label-spacing: var(--space-1xs)}._m_16d1h_73{--input-height: var(--space-4xl);--input-font-size: var(--control-text-size-l);--input-line-height: var(--line-height-text-s1);--input-padding: var(--space-m);--input-padding-position: var(--space-xs);--input-border-radius: var(--button-border-radius-m);--label-font-size: var(--size-text-s);--label-scaled: .75;--label-spacing: var(--space-xs)}._l_16d1h_5{--input-height: var(--space-4xxl);--input-font-size: var(--control-text-size-2xl);--input-line-height: var(--line-height-text-l);--input-padding: var(--space-m);--input-padding-position: var(--space-s);--input-border-radius: var(--button-border-radius-l);--label-font-size: var(--size-text-s);--label-scaled: .6;--label-spacing: var(--space-s)}._default-gray_16d1h_97{--input-bg-color: var(--black-5);--input-bg-color-active: var(--black-10);--input-bg-color-hover: var(--black-10);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_16d1h_109{--input-bg-color: var(--white);--input-bg-color-hover: var(--black-10);--input-bg-color-active: var(--white);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_16d1h_109:hover{--label-color: var(--dark-text)}._success_16d1h_124{--input-bg-color: var(--success-normal);--input-bg-color-hover: var(--success-bg-hover);--input-bg-color-active: var(--success-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--success-normal);--label-color: var(--black-60)}._success_16d1h_124::-moz-placeholder{color:var(--input-color)}._success_16d1h_124::placeholder{color:var(--input-color)}._success_16d1h_124:hover::-moz-placeholder{color:var(--input-color)}._success_16d1h_124:hover::placeholder{color:var(--input-color)}._alarm_16d1h_142{--input-bg-color: var(--alarm-normal);--input-bg-color-hover: var(--alarm-bg-hover);--input-bg-color-active: var(--alarm-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--alarm-normal);--label-color: var(--black-60)}._alarm_16d1h_142::-moz-placeholder{color:var(--input-color)}._alarm_16d1h_142::placeholder{color:var(--input-color)}._alarm_16d1h_142:hover::-moz-placeholder{color:var(--input-color)}._alarm_16d1h_142:hover::placeholder{color:var(--input-color)}._error_16d1h_160{--input-bg-color: var(--error-normal);--input-bg-color-hover: var(--error-bg-hover);--input-bg-color-active: var(--error-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--error-normal);--label-color: var(--black-60)}._error_16d1h_160::-moz-placeholder{color:var(--input-color)}._error_16d1h_160::placeholder{color:var(--input-color)}._error_16d1h_160:hover::-moz-placeholder{color:var(--input-color)}._error_16d1h_160:hover::placeholder{color:var(--input-color)}._disabled_16d1h_178{--input-cursor: not-allowed;color:var(--light-text);background-color:var(--black-20)}._disabled_16d1h_178:hover,._disabled_16d1h_178:active,._disabled_16d1h_178:focus{color:var(--light-text);background-color:var(--black-20);border:none;box-shadow:none}._disabled_16d1h_178::-moz-placeholder{color:var(--light-text)}._disabled_16d1h_178::placeholder{color:var(--light-text)}._disabled_16d1h_178:hover::-moz-placeholder{color:var(--light-text)}._disabled_16d1h_178:hover::placeholder{color:var(--light-text)}._has-label_16d1h_196{padding-top:var(--input-padding-position)}
|
package/dist/assets/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@font-face{font-weight:400;font-family:Montserrat;font-style:normal;src:url(./fonts/585d10920d676fcd.woff2) format("woff2"),url(./fonts/3b9f59412b17ff93.woff) format("woff")}@font-face{font-weight:700;font-family:Montserrat;font-style:normal;src:url(./fonts/f4d681a788c6d497.woff2) format("woff2"),url(./fonts/43b748f250df0f08.woff) format("woff")}@font-face{font-weight:300;font-family:Montserrat;font-style:normal;src:url(./fonts/ee3db32f0aadef5d.woff2) format("woff2"),url(./fonts/1a738bfdbc1e4d9d.woff) format("woff")}@font-face{font-weight:500;font-family:Montserrat;font-style:normal;src:url(./fonts/e51d2feb30084bc2.woff2) format("woff2"),url(./fonts/badaa6d1837432de.woff) format("woff")}@font-face{font-weight:600;font-family:Montserrat;font-style:normal;src:url(./fonts/63611593e008a77c.woff2) format("woff2"),url(./fonts/3cdd7fabbe89d2b9.woff) format("woff")}@font-face{font-weight:400;font-family:Inter;font-style:normal;src:url(./fonts/d080ae18fd04e52c.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:700;font-family:Inter;font-style:normal;src:url(./fonts/11d5bc9f0cad36d1.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:500;font-family:Inter;font-style:normal;src:url(./fonts/242d04bef81519ae.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:600;font-family:Inter;font-style:normal;src:url(./fonts/cac2ba46e8c8adc9.woff2) format("woff2");font-variant-numeric:slashed-zero}@supports (font-variation-settings: normal){:root{font-family:InterVariable,sans-serif}}:root{font-feature-settings:"zero"}*{margin:0;padding:0;border:0;outline:none}*,:after,:before{box-sizing:border-box}:active,:focus{outline:0}a,a:visited,a:hover{-webkit-text-decoration:none;text-decoration:none}a:active,a:focus{outline:0}aside,footer,header,nav{display:block}body,html{width:100%;height:100%;font-size:100%;line-height:1}button,input,textarea,select{font-family:inherit}input::-ms-clear{display:none}button{background-color:transparent;cursor:pointer}button::-moz-focus-inner{padding:0;border:0}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--color-typo-brand);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}:root{--sapphire-100: #2355d7;--sapphire-90: #3564df;--sapphire-80: #4b75e2;--sapphire-70: #6186e6;--sapphire-60: #7797e9;--sapphire-50: #8da7ed;--sapphire-40: #9fb7f4;--sapphire-30: #b9caf4;--sapphire-20: #cfdaf7;--sapphire-10: #e5ebfb;--citrine-100: #ff7900;--citrine-90: #ff861a;--citrine-80: #ff9433;--citrine-70: #ffa14d;--citrine-60: #ffaf66;--citrine-50: #ffbc80;--citrine-40: #ffc999;--citrine-30: #ffd7b2;--citrine-20: #ffe4cc;--citrine-10: #fff2e5;--magenta-100: #bc2251;--magenta-90: #d8275d;--magenta-80: #dc3d6d;--magenta-70: #e15781;--magenta-60: #e46c91;--magenta-50: #e986a4;--magenta-40: #ed9cb4;--magenta-30: #f2b6c8;--magenta-20: #f6cbd8;--magenta-10: #fae5ec;--black-100: #000;--black-95: #0d0d0d;--black-90: #1a1a1a;--black-85: #262626;--black-80: #333;--black-75: #404040;--black-70: #4d4d4d;--black-65: #595959;--black-60: #666;--black-55: #737373;--black-50: #808080;--black-45: #8c8c8c;--black-40: #999;--black-35: #a6a6a6;--black-30: #b3b3b3;--black-25: #bfbfbf;--black-20: #ccc;--black-15: #d9d9d9;--black-10: #e6e6e6;--black-5: #f2f2f2;--white: #fff;--dark-blue: #0a38af;--blue-40: #a7bbef;--blue-20: #d3ddf7;--green: #1b770c;--red-tag: #f01406;--success-normal: #23b413;--success-bg-hover: #d5fbe2;--success-bg-active: #ebfdf1;--alarm-normal: #fdc023;--alarm-bg-hover: #fff0c7;--alarm-bg-active: #fff6de;--error-normal: #e64646;--error-bg-hover: #fadbdb;--error-bg-active: #fbe3e3;--disabled: #b3b3b3;--disabled-color: #b2b2b2;--light-text: var(--white);--dark-text: var(--black-100);--sapphire-normal: var(--sapphire-100);--sapphire-hover: #1b41a3;--sapphire-active: #122c70;--citrine-normal: var(--citrine-100);--citrine-hover: #e56d00;--citrine-active: #cc6100;--asphalt-border: var(--black-30);--asphalt-normal: var(--black-80);--asphalt-hover: var(--black-90);--asphalt-active: var(--black-100);--gray-normal: var(--black-5);--gray-hover: var(--black-10);--gray-active: var(--black-80);--white-normal: var(--white);--white-hover: var(--black-5);--white-transparent: rgba(255, 255, 255, .4);--white-active: var(--black-80);--red-normal: var(--error-normal);--red-hover: #e33030;--red-active: #dc1e1e;--green-normal: var(--green);--green-hover: #16610a;--green-active: #114a08;--counter-text: #ffa066;--button-height-xs: 24px;--button-height-s: 32px;--button-height-m: 40px;--button-height-l: 48px;--button-height-xl: 56px;--button-height-xxl: 64px;--select-search-height-l: 48px;--select-search-height-xxl: 64px;--select-search-options-height-desktop: 320px;--select-search-options-height-mobile: 264px;--control-default: var(--sapphire-20);--control-hover: var(--sapphire-40);--control-selected: var(--sapphire-100);--control-disabled: var(--black-10);--font-inter: "Inter", sans-serif;--font-montserrat: "Montserrat", sans-serif;--font-weight-text-regular: 400;--font-weight-text-medium: 500;--font-weight-text-semibold: 600;--font-weight-text-bold: 700;--font-weight-text-extrabold: 800;--font-weight-text-black: 900;--size-text-xs2: 8px;--size-text-xs: 10px;--size-text-s: 12px;--size-text-m: 14px;--size-text-l: 16px;--size-text-xl: 20px;--size-text-xl2: 24px;--size-text-2xl: 28px;--size-text-xl3: 32px;--size-text-xl4: 48px;--size-text-xl5: 72px;--size-text-xl6: 96px;--line-height-text-2xs: 1em;--line-height-text-xs: 1.1em;--line-height-text-s: 1.2em;--line-height-text-s1: 1.25em;--line-height-text-m: 1.3em;--line-height-text-m1: 1.35em;--line-height-text-l: 1.4em;--line-height-text-l1: 1.45em;--line-height-text-xl: 1.5em;--line-height-text-xl1: 1.5em;--control-radius-
|
|
1
|
+
@font-face{font-weight:400;font-family:Montserrat;font-style:normal;src:url(./fonts/585d10920d676fcd.woff2) format("woff2"),url(./fonts/3b9f59412b17ff93.woff) format("woff")}@font-face{font-weight:700;font-family:Montserrat;font-style:normal;src:url(./fonts/f4d681a788c6d497.woff2) format("woff2"),url(./fonts/43b748f250df0f08.woff) format("woff")}@font-face{font-weight:300;font-family:Montserrat;font-style:normal;src:url(./fonts/ee3db32f0aadef5d.woff2) format("woff2"),url(./fonts/1a738bfdbc1e4d9d.woff) format("woff")}@font-face{font-weight:500;font-family:Montserrat;font-style:normal;src:url(./fonts/e51d2feb30084bc2.woff2) format("woff2"),url(./fonts/badaa6d1837432de.woff) format("woff")}@font-face{font-weight:600;font-family:Montserrat;font-style:normal;src:url(./fonts/63611593e008a77c.woff2) format("woff2"),url(./fonts/3cdd7fabbe89d2b9.woff) format("woff")}@font-face{font-weight:400;font-family:Inter;font-style:normal;src:url(./fonts/d080ae18fd04e52c.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:700;font-family:Inter;font-style:normal;src:url(./fonts/11d5bc9f0cad36d1.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:500;font-family:Inter;font-style:normal;src:url(./fonts/242d04bef81519ae.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:600;font-family:Inter;font-style:normal;src:url(./fonts/cac2ba46e8c8adc9.woff2) format("woff2");font-variant-numeric:slashed-zero}@supports (font-variation-settings: normal){:root{font-family:InterVariable,sans-serif}}:root{font-feature-settings:"zero"}*{margin:0;padding:0;border:0;outline:none}*,:after,:before{box-sizing:border-box}:active,:focus{outline:0}a,a:visited,a:hover{-webkit-text-decoration:none;text-decoration:none}a:active,a:focus{outline:0}aside,footer,header,nav{display:block}body,html{width:100%;height:100%;font-size:100%;line-height:1}button,input,textarea,select{font-family:inherit}input::-ms-clear{display:none}button{background-color:transparent;cursor:pointer}button::-moz-focus-inner{padding:0;border:0}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--color-typo-brand);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}:root{--sapphire-100: #2355d7;--sapphire-90: #3564df;--sapphire-80: #4b75e2;--sapphire-70: #6186e6;--sapphire-60: #7797e9;--sapphire-50: #8da7ed;--sapphire-40: #9fb7f4;--sapphire-30: #b9caf4;--sapphire-20: #cfdaf7;--sapphire-10: #e5ebfb;--citrine-100: #ff7900;--citrine-90: #ff861a;--citrine-80: #ff9433;--citrine-70: #ffa14d;--citrine-60: #ffaf66;--citrine-50: #ffbc80;--citrine-40: #ffc999;--citrine-30: #ffd7b2;--citrine-20: #ffe4cc;--citrine-10: #fff2e5;--magenta-100: #bc2251;--magenta-90: #d8275d;--magenta-80: #dc3d6d;--magenta-70: #e15781;--magenta-60: #e46c91;--magenta-50: #e986a4;--magenta-40: #ed9cb4;--magenta-30: #f2b6c8;--magenta-20: #f6cbd8;--magenta-10: #fae5ec;--black-100: #000;--black-95: #0d0d0d;--black-90: #1a1a1a;--black-85: #262626;--black-80: #333;--black-75: #404040;--black-70: #4d4d4d;--black-65: #595959;--black-60: #666;--black-55: #737373;--black-50: #808080;--black-45: #8c8c8c;--black-40: #999;--black-35: #a6a6a6;--black-30: #b3b3b3;--black-25: #bfbfbf;--black-20: #ccc;--black-15: #d9d9d9;--black-10: #e6e6e6;--black-5: #f2f2f2;--white: #fff;--dark-blue: #0a38af;--blue-40: #a7bbef;--blue-20: #d3ddf7;--green: #1b770c;--red-tag: #f01406;--success-normal: #23b413;--success-bg-hover: #d5fbe2;--success-bg-active: #ebfdf1;--alarm-normal: #fdc023;--alarm-bg-hover: #fff0c7;--alarm-bg-active: #fff6de;--error-normal: #e64646;--error-bg-hover: #fadbdb;--error-bg-active: #fbe3e3;--disabled: #b3b3b3;--disabled-color: #b2b2b2;--light-text: var(--white);--dark-text: var(--black-100);--sapphire-normal: var(--sapphire-100);--sapphire-hover: #1b41a3;--sapphire-active: #122c70;--citrine-normal: var(--citrine-100);--citrine-hover: #e56d00;--citrine-active: #cc6100;--asphalt-border: var(--black-30);--asphalt-normal: var(--black-80);--asphalt-hover: var(--black-90);--asphalt-active: var(--black-100);--gray-normal: var(--black-5);--gray-hover: var(--black-10);--gray-active: var(--black-80);--white-normal: var(--white);--white-hover: var(--black-5);--white-transparent: rgba(255, 255, 255, .4);--white-active: var(--black-80);--red-normal: var(--error-normal);--red-hover: #e33030;--red-active: #dc1e1e;--green-normal: var(--green);--green-hover: #16610a;--green-active: #114a08;--counter-text: #ffa066;--button-height-xs: 24px;--button-height-s: 32px;--button-height-m: 40px;--button-height-l: 48px;--button-height-xl: 56px;--button-height-xxl: 64px;--select-search-height-l: 48px;--select-search-height-xxl: 64px;--select-search-options-height-desktop: 320px;--select-search-options-height-mobile: 264px;--control-default: var(--sapphire-20);--control-hover: var(--sapphire-40);--control-selected: var(--sapphire-100);--control-disabled: var(--black-10);--font-inter: "Inter", sans-serif;--font-montserrat: "Montserrat", sans-serif;--font-weight-text-regular: 400;--font-weight-text-medium: 500;--font-weight-text-semibold: 600;--font-weight-text-bold: 700;--font-weight-text-extrabold: 800;--font-weight-text-black: 900;--size-text-xs2: 8px;--size-text-xs: 10px;--size-text-s: 12px;--size-text-m: 14px;--size-text-l: 16px;--size-text-xl: 20px;--size-text-xl2: 24px;--size-text-2xl: 28px;--size-text-xl3: 32px;--size-text-xl4: 48px;--size-text-xl5: 72px;--size-text-xl6: 96px;--line-height-text-2xs: 1em;--line-height-text-xs: 1.1em;--line-height-text-s: 1.2em;--line-height-text-s1: 1.25em;--line-height-text-m: 1.3em;--line-height-text-m1: 1.35em;--line-height-text-l: 1.4em;--line-height-text-l1: 1.45em;--line-height-text-xl: 1.5em;--line-height-text-xl1: 1.5em;--control-radius-xs: 4px;--control-radius: 6px;--control-radius-s: 8px;--control-radius-m: 20px;--control-radius-l: 24px;--control-radius-xl: 32px;--control-radius-xxl: 40px;--control-input-radius: 12px;--control-border-width: 1px;--control-height-xl: 60px;--control-height-xxl: 60px;--control-height-l: var(--space-4xl);--control-height-m: var(--space-3xl);--control-height-s: var(--space-2xl);--control-height-xs: var(--space-xl);--control-box-size-s: var(--space-s);--control-box-size-m: var(--space-m);--control-box-size-l: var(--space-l);--control-space-xxl: var(--space-xl);--control-space-l: var(--space-xl);--control-space-m: var(--space-l);--control-space-s: var(--space-m);--control-space-xs: var(--space-s);--control-text-size-2xl: var(--size-text-xl);--control-text-size-xl: var(--size-text-xl3);--control-text-size-l: var(--size-text-l);--control-text-size-m: var(--size-text-m);--control-text-size-s: var(--size-text-s);--control-text-size-xs: var(--size-text-xs);--space-3xs: 2px;--space-2xs: 4px;--space-1xs: 6px;--space-xs: 8px;--space-xss: 10px;--space-s: 12px;--space-2s: 14px;--space-m: 16px;--space-2m: 18px;--space-l: 20px;--space-2l: 22px;--space-xl: 24px;--space-2xl: 32px;--space-xxl: 40px;--space-3xl: 44px;--space-4xl: 48px;--space-4xxl: 64px;--space-5xl: 72px;--space-6xl: 96px;--box-shadow-active: 0 0 2px var(--sapphire-normal);--box-shadow-focus: 0px 0px 10px 2px #1389cc;--box-shadow-select-search: 0 3px 15px 0 rgba(31, 32, 35, .15);--select-search-input-top-l: -15%;--select-search-input-top-xxl: -35%;--container-width-xs: 375px;--container-width-s: 767px;--container-width-m: 960px;--container-width-l: 1280px;--container-width-xl: 1440px;--container-width-xxl: 1920px;--zindex-fixed: 1030;--sidebar-width-collapsed: 64px;--sidebar-width-expanded: 256px;--header-height: 64px;--sidebar-form-width-tablet: 369px;--sidebar-form-width-mobile: 309px}@supports (font-variation-settings: normal){:root{font-family:Inter,sans-serif}}:root{font-feature-settings:"zero";font-variant-numeric:slashed-zero}body{font-family:Inter,sans-serif;font-feature-settings:"zero";font-variant-numeric:slashed-zero;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { TInputProps } from '../Input';
|
|
2
|
+
|
|
3
|
+
export type DatePicker = {
|
|
4
|
+
/**
|
|
5
|
+
* функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
|
|
6
|
+
*/
|
|
7
|
+
onChangeValue: (e: TDatePickerValue) => void;
|
|
8
|
+
/**
|
|
9
|
+
* функция ограничения выбора даты
|
|
10
|
+
(до какой даты выбор не доступен)
|
|
11
|
+
*/
|
|
12
|
+
before?: Date | string;
|
|
13
|
+
/**
|
|
14
|
+
* значение из стейта (data)
|
|
15
|
+
*/
|
|
16
|
+
value: string;
|
|
17
|
+
} & TInputProps;
|
|
18
|
+
export type TDatePickerValue = {
|
|
19
|
+
value: Date;
|
|
20
|
+
name?: string;
|
|
21
|
+
};
|
|
22
|
+
export declare const DatePicker: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<{
|
|
23
|
+
/**
|
|
24
|
+
* функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
|
|
25
|
+
*/
|
|
26
|
+
onChangeValue: (e: TDatePickerValue) => void;
|
|
27
|
+
/**
|
|
28
|
+
* функция ограничения выбора даты
|
|
29
|
+
(до какой даты выбор не доступен)
|
|
30
|
+
*/
|
|
31
|
+
before?: Date | string;
|
|
32
|
+
/**
|
|
33
|
+
* значение из стейта (data)
|
|
34
|
+
*/
|
|
35
|
+
value: string;
|
|
36
|
+
} & import('../Input/types').TInputProps & {
|
|
37
|
+
size?: import('../Input').TSize;
|
|
38
|
+
variant?: import('../Input').TVariant;
|
|
39
|
+
className?: string;
|
|
40
|
+
wrapperClassName?: string;
|
|
41
|
+
label?: import('react').ReactNode;
|
|
42
|
+
autofocus?: boolean;
|
|
43
|
+
readonly?: boolean;
|
|
44
|
+
} & import('react').RefAttributes<HTMLInputElement>>>;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
|
+
import { memo, forwardRef, useState } from "react";
|
|
4
|
+
import { c as cls, D as DatePickerModal } from "../../DatePickerModal-ByEDSY5o.js";
|
|
5
|
+
import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
|
|
6
|
+
import { formating } from "../../utils/index.js";
|
|
7
|
+
import { Button } from "../Button/Button.js";
|
|
8
|
+
import { Input } from "../Input/Input.js";
|
|
9
|
+
const DatePicker = memo(
|
|
10
|
+
forwardRef(
|
|
11
|
+
({ size, value, onChangeValue, name, before, ...props }, ref) => {
|
|
12
|
+
const [isActive, setActive] = useState(false);
|
|
13
|
+
const [date, setDate] = useState(
|
|
14
|
+
value ? new Date(value) : /* @__PURE__ */ new Date()
|
|
15
|
+
);
|
|
16
|
+
useClickOutside({
|
|
17
|
+
isActive,
|
|
18
|
+
setActive,
|
|
19
|
+
className: cls["calendar-block"]
|
|
20
|
+
});
|
|
21
|
+
const onOpen = () => {
|
|
22
|
+
setActive(true);
|
|
23
|
+
};
|
|
24
|
+
const onDate = (d) => {
|
|
25
|
+
setDate(d);
|
|
26
|
+
onChangeValue == null ? void 0 : onChangeValue({ value: d, name });
|
|
27
|
+
};
|
|
28
|
+
const wrapperClassNames = classNames(cls.wrapper, isActive && cls.active);
|
|
29
|
+
return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, children: [
|
|
30
|
+
/* @__PURE__ */ jsx("div", { className: cls["date-wrapper"], onClick: onOpen, children: /* @__PURE__ */ jsx(
|
|
31
|
+
Input,
|
|
32
|
+
{
|
|
33
|
+
ref,
|
|
34
|
+
className: cls.input,
|
|
35
|
+
wrapperClassName: cls["input-wrapper"],
|
|
36
|
+
size,
|
|
37
|
+
type: "text",
|
|
38
|
+
value: formating.Date(date, "dd.mm.yy"),
|
|
39
|
+
...props
|
|
40
|
+
}
|
|
41
|
+
) }),
|
|
42
|
+
/* @__PURE__ */ jsx("div", { className: cls["button-wrapper"], children: /* @__PURE__ */ jsx(
|
|
43
|
+
Button,
|
|
44
|
+
{
|
|
45
|
+
isIconButton: true,
|
|
46
|
+
clear: true,
|
|
47
|
+
type: "button",
|
|
48
|
+
className: cls.button,
|
|
49
|
+
onClick: onOpen,
|
|
50
|
+
iconName: isActive ? "DropdownArrowUp16px" : "DropdownArrowBottom16px"
|
|
51
|
+
}
|
|
52
|
+
) }),
|
|
53
|
+
isActive && /* @__PURE__ */ jsx(
|
|
54
|
+
DatePickerModal,
|
|
55
|
+
{
|
|
56
|
+
onChangeValue: onDate,
|
|
57
|
+
date,
|
|
58
|
+
setActive,
|
|
59
|
+
before: typeof before === "string" ? new Date(before) : before
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
] });
|
|
63
|
+
}
|
|
64
|
+
)
|
|
65
|
+
);
|
|
66
|
+
DatePicker.displayName = "DatePicker";
|
|
67
|
+
export {
|
|
68
|
+
DatePicker
|
|
69
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
type DatePickerModal = {
|
|
2
|
+
date: Date;
|
|
3
|
+
onChangeValue: (d: Date) => void;
|
|
4
|
+
setActive: (s: boolean) => void;
|
|
5
|
+
before?: Date;
|
|
6
|
+
};
|
|
7
|
+
export declare function DatePickerModal({ date, onChangeValue, setActive, before }: DatePickerModal): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
var EDatePickerBeforeDate = /* @__PURE__ */ ((EDatePickerBeforeDate2) => {
|
|
2
|
+
EDatePickerBeforeDate2["CurrentDate1"] = "2024-08-01";
|
|
3
|
+
EDatePickerBeforeDate2["CurrentDate2"] = "2024-07-01";
|
|
4
|
+
EDatePickerBeforeDate2["CurrentDate3"] = "2024-07-11";
|
|
5
|
+
return EDatePickerBeforeDate2;
|
|
6
|
+
})(EDatePickerBeforeDate || {});
|
|
7
|
+
const week = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];
|
|
8
|
+
export {
|
|
9
|
+
EDatePickerBeforeDate,
|
|
10
|
+
week
|
|
11
|
+
};
|
|
@@ -2,30 +2,30 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import { memo, forwardRef, useState, useEffect } from "react";
|
|
4
4
|
import { EInputVariant } from "./constants.js";
|
|
5
|
-
import '../../assets/Input.css';const label = "
|
|
6
|
-
const input = "
|
|
7
|
-
const s = "
|
|
8
|
-
const m = "
|
|
9
|
-
const l = "
|
|
10
|
-
const success = "
|
|
11
|
-
const alarm = "
|
|
12
|
-
const error = "
|
|
13
|
-
const disabled = "
|
|
5
|
+
import '../../assets/Input.css';const label = "_label_16d1h_5";
|
|
6
|
+
const input = "_input_16d1h_2";
|
|
7
|
+
const s = "_s_16d1h_61";
|
|
8
|
+
const m = "_m_16d1h_73";
|
|
9
|
+
const l = "_l_16d1h_5";
|
|
10
|
+
const success = "_success_16d1h_124";
|
|
11
|
+
const alarm = "_alarm_16d1h_142";
|
|
12
|
+
const error = "_error_16d1h_160";
|
|
13
|
+
const disabled = "_disabled_16d1h_178";
|
|
14
14
|
const cls = {
|
|
15
|
-
"input-wrapper": "_input-
|
|
15
|
+
"input-wrapper": "_input-wrapper_16d1h_2",
|
|
16
16
|
label,
|
|
17
|
-
"active-label": "_active-
|
|
17
|
+
"active-label": "_active-label_16d1h_18",
|
|
18
18
|
input,
|
|
19
19
|
s,
|
|
20
20
|
m,
|
|
21
21
|
l,
|
|
22
|
-
"default-gray": "_default-
|
|
23
|
-
"default-white": "_default-
|
|
22
|
+
"default-gray": "_default-gray_16d1h_97",
|
|
23
|
+
"default-white": "_default-white_16d1h_109",
|
|
24
24
|
success,
|
|
25
25
|
alarm,
|
|
26
26
|
error,
|
|
27
27
|
disabled,
|
|
28
|
-
"has-label": "_has-
|
|
28
|
+
"has-label": "_has-label_16d1h_196"
|
|
29
29
|
};
|
|
30
30
|
const Input = memo(
|
|
31
31
|
forwardRef(
|
|
@@ -7,6 +7,8 @@ export { InputPhoneNumber, getMaskedInputPhoneValue, getUnmaskedInputValue } fro
|
|
|
7
7
|
export { OtpInput } from './OtpInput';
|
|
8
8
|
export { RadioGroup } from './RadioGroup';
|
|
9
9
|
export type { TRadioOption } from './RadioGroup';
|
|
10
|
+
export { DatePicker } from './DatePicker';
|
|
11
|
+
export type { TDatePickerProps } from './DatePicker';
|
|
10
12
|
export { MergedButton } from './MergedButton';
|
|
11
13
|
export { EMergedButtonVariantRound } from './MergedButton';
|
|
12
14
|
export type { TButtonPropsWithoutStyles } from './MergedButton';
|
package/dist/components/index.js
CHANGED
|
@@ -7,6 +7,7 @@ import { InputPhoneNumber } from "./InputPhoneNumber/InputPhoneNumber.js";
|
|
|
7
7
|
import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./InputPhoneNumber/utils.js";
|
|
8
8
|
import { OtpInput } from "./OtpInput/OtpInput.js";
|
|
9
9
|
import { RadioGroup } from "./RadioGroup/RadioGroup.js";
|
|
10
|
+
import { DatePicker } from "./DatePicker/DatePicker.js";
|
|
10
11
|
import { MergedButton } from "./MergedButton/MergedButton.js";
|
|
11
12
|
import { EMergedButtonVariantRound } from "./MergedButton/constants.js";
|
|
12
13
|
import { AppImage } from "./Image/Image.js";
|
|
@@ -23,6 +24,7 @@ import { ESelectSearchSize } from "./SelectSearch/constants.js";
|
|
|
23
24
|
import { Switch } from "./Switch/Switch.js";
|
|
24
25
|
export {
|
|
25
26
|
Button,
|
|
27
|
+
DatePicker,
|
|
26
28
|
Drawer,
|
|
27
29
|
EButtonForm,
|
|
28
30
|
EButtonSize,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useClickOutside } from './useClickOutside';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
function useClickOutside({
|
|
3
|
+
isActive,
|
|
4
|
+
setActive,
|
|
5
|
+
className
|
|
6
|
+
}) {
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const handleClickOtside = (e) => {
|
|
9
|
+
if (e.target) {
|
|
10
|
+
if (!e.target.closest("." + className)) {
|
|
11
|
+
setActive(false);
|
|
12
|
+
window.removeEventListener("click", handleClickOtside, true);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
if (isActive) {
|
|
17
|
+
window.addEventListener("click", handleClickOtside, true);
|
|
18
|
+
} else {
|
|
19
|
+
window.removeEventListener("click", handleClickOtside, true);
|
|
20
|
+
}
|
|
21
|
+
}, [isActive]);
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
useClickOutside
|
|
25
|
+
};
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -7,6 +7,7 @@ import { InputPhoneNumber } from "./components/InputPhoneNumber/InputPhoneNumber
|
|
|
7
7
|
import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./components/InputPhoneNumber/utils.js";
|
|
8
8
|
import { OtpInput } from "./components/OtpInput/OtpInput.js";
|
|
9
9
|
import { RadioGroup } from "./components/RadioGroup/RadioGroup.js";
|
|
10
|
+
import { DatePicker } from "./components/DatePicker/DatePicker.js";
|
|
10
11
|
import { MergedButton } from "./components/MergedButton/MergedButton.js";
|
|
11
12
|
import { EMergedButtonVariantRound } from "./components/MergedButton/constants.js";
|
|
12
13
|
import { AppImage } from "./components/Image/Image.js";
|
|
@@ -25,8 +26,10 @@ import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
|
|
|
25
26
|
import { EMediaQuery } from "./hooks/useMediaQuery/constants.js";
|
|
26
27
|
import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
|
|
27
28
|
import { Icon } from "./icons/Icon.js";
|
|
29
|
+
import { formating } from "./utils/index.js";
|
|
28
30
|
import './assets/index.css';export {
|
|
29
31
|
Button,
|
|
32
|
+
DatePicker,
|
|
30
33
|
Drawer,
|
|
31
34
|
EButtonForm,
|
|
32
35
|
EButtonSize,
|
|
@@ -56,6 +59,7 @@ import './assets/index.css';export {
|
|
|
56
59
|
Steps,
|
|
57
60
|
Switch,
|
|
58
61
|
Vote,
|
|
62
|
+
formating,
|
|
59
63
|
getMaskedInputPhoneValue,
|
|
60
64
|
getUnmaskedInputValue,
|
|
61
65
|
useLockBodyScroll,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function _Date(x: Date, y: string | Date): string;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
function _Date(x, y) {
|
|
2
|
+
if (y === void 0) {
|
|
3
|
+
y = x;
|
|
4
|
+
x = /* @__PURE__ */ new Date();
|
|
5
|
+
} else {
|
|
6
|
+
x = new Date(x);
|
|
7
|
+
}
|
|
8
|
+
const replaces = {
|
|
9
|
+
yyyy: x.getFullYear() + "",
|
|
10
|
+
yy: `${x.getFullYear()}`.slice(-2),
|
|
11
|
+
mm: `0${x.getMonth() + 1}`.slice(-2),
|
|
12
|
+
dd: `0${x.getDate()}`.slice(-2),
|
|
13
|
+
HH: `0${x.getHours()}`.slice(-2),
|
|
14
|
+
MM: `0${x.getMinutes()}`.slice(-2),
|
|
15
|
+
SS: `0${x.getSeconds()}`.slice(-2)
|
|
16
|
+
};
|
|
17
|
+
Object.keys(replaces).forEach((replace) => {
|
|
18
|
+
if (typeof y === "string") {
|
|
19
|
+
y = y.replace(replace, replaces[replace]);
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
return y;
|
|
23
|
+
}
|
|
24
|
+
export {
|
|
25
|
+
_Date as default
|
|
26
|
+
};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
function Month(n) {
|
|
2
|
+
const obj = {
|
|
3
|
+
1: {
|
|
4
|
+
val: "01",
|
|
5
|
+
name: "Январь",
|
|
6
|
+
names: "Января",
|
|
7
|
+
abc: "Янв"
|
|
8
|
+
},
|
|
9
|
+
2: {
|
|
10
|
+
val: "02",
|
|
11
|
+
name: "Февраль",
|
|
12
|
+
names: "Февраля",
|
|
13
|
+
abc: "Февр"
|
|
14
|
+
},
|
|
15
|
+
3: {
|
|
16
|
+
val: "03",
|
|
17
|
+
name: "Март",
|
|
18
|
+
names: "Марта",
|
|
19
|
+
abc: "Март"
|
|
20
|
+
},
|
|
21
|
+
4: {
|
|
22
|
+
val: "04",
|
|
23
|
+
name: "Апрель",
|
|
24
|
+
names: "Апреля",
|
|
25
|
+
abc: "Апр"
|
|
26
|
+
},
|
|
27
|
+
5: {
|
|
28
|
+
val: "05",
|
|
29
|
+
name: "Май",
|
|
30
|
+
names: "Мая",
|
|
31
|
+
abc: "Май"
|
|
32
|
+
},
|
|
33
|
+
6: {
|
|
34
|
+
val: "06",
|
|
35
|
+
name: "Июнь",
|
|
36
|
+
names: "Июня",
|
|
37
|
+
abc: "Июнь"
|
|
38
|
+
},
|
|
39
|
+
7: {
|
|
40
|
+
val: "07",
|
|
41
|
+
name: "Июль",
|
|
42
|
+
names: "Июля",
|
|
43
|
+
abc: "Июль"
|
|
44
|
+
},
|
|
45
|
+
8: {
|
|
46
|
+
val: "08",
|
|
47
|
+
name: "Август",
|
|
48
|
+
names: "Августа",
|
|
49
|
+
abc: "Авг"
|
|
50
|
+
},
|
|
51
|
+
9: {
|
|
52
|
+
val: "09",
|
|
53
|
+
name: "Сентябрь",
|
|
54
|
+
names: "Сентебря",
|
|
55
|
+
abc: "Сент"
|
|
56
|
+
},
|
|
57
|
+
10: {
|
|
58
|
+
val: "10",
|
|
59
|
+
name: "Октябрь",
|
|
60
|
+
names: "Октября",
|
|
61
|
+
abc: "Окт"
|
|
62
|
+
},
|
|
63
|
+
11: {
|
|
64
|
+
val: "11",
|
|
65
|
+
name: "Ноябрь",
|
|
66
|
+
names: "Ноября",
|
|
67
|
+
abc: "Нояб"
|
|
68
|
+
},
|
|
69
|
+
12: {
|
|
70
|
+
val: "12",
|
|
71
|
+
name: "Декабрь",
|
|
72
|
+
names: "Декабря",
|
|
73
|
+
abc: "Дек"
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
return obj[n];
|
|
77
|
+
}
|
|
78
|
+
export {
|
|
79
|
+
Month as default
|
|
80
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as Date } from './formating/Date';
|
|
2
|
+
import { default as Month } from './formating/Month';
|
|
3
|
+
import { default as Number } from './formating/Numbers';
|
|
4
|
+
|
|
5
|
+
export declare const formating: {
|
|
6
|
+
Number: typeof Number;
|
|
7
|
+
Month: typeof Month;
|
|
8
|
+
Date: typeof Date;
|
|
9
|
+
};
|