mimir-ui-kit 1.5.4 → 1.6.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,202 @@
1
+ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
2
+ import { useRef, useState, useEffect } from "react";
3
+ import { Button } from "./components/Button/Button.js";
4
+ import { formating } from "./utils/index.js";
5
+ import './assets/DatePickerModal.css';const input = "_input_8eg6j_2";
6
+ const wrapper = "_wrapper_8eg6j_23";
7
+ const active = "_active_8eg6j_29";
8
+ const button = "_button_8eg6j_37";
9
+ const h = "_h_8eg6j_83";
10
+ const b = "_b_8eg6j_37";
11
+ const d = "_d_8eg6j_6";
12
+ const m = "_m_8eg6j_102";
13
+ const a = "_a_8eg6j_29";
14
+ const prev = "_prev_8eg6j_104";
15
+ const orange = "_orange_8eg6j_120";
16
+ const current = "_current_8eg6j_145";
17
+ const cls = {
18
+ input,
19
+ "date-wrapper": "_date-wrapper_8eg6j_6",
20
+ wrapper,
21
+ active,
22
+ "input-wrapper": "_input-wrapper_8eg6j_33",
23
+ "button-wrapper": "_button-wrapper_8eg6j_37",
24
+ button,
25
+ "field-overlow": "_field-overlow_8eg6j_54",
26
+ "calendar-block": "_calendar-block_8eg6j_60",
27
+ h,
28
+ b,
29
+ d,
30
+ m,
31
+ a,
32
+ prev,
33
+ orange,
34
+ current
35
+ };
36
+ function DatePickerModal({
37
+ date,
38
+ onValue,
39
+ setActive,
40
+ before
41
+ }) {
42
+ const field = useRef(null);
43
+ const _current = new Date(date);
44
+ const _selecte = new Date(date);
45
+ const current2 = {
46
+ y: _current.getFullYear(),
47
+ d: _current.getDate(),
48
+ m: _current.getMonth() + 1
49
+ };
50
+ const selecte = {
51
+ y: _selecte.getFullYear(),
52
+ d: _selecte.getDate(),
53
+ m: _selecte.getMonth() + 1
54
+ };
55
+ const [month, setMonth] = useState({ y: selecte.y, m: selecte.m });
56
+ useEffect(() => {
57
+ const windowHeight = window.innerHeight;
58
+ if (field.current !== null) {
59
+ const inputPosition = field.current.getBoundingClientRect();
60
+ const calendarSize = field.current.offsetHeight;
61
+ console.log(windowHeight, inputPosition.y, calendarSize);
62
+ if (windowHeight < inputPosition.y + calendarSize) {
63
+ field.current.style.top = -calendarSize + "px";
64
+ } else {
65
+ field.current.style.top = "65px";
66
+ }
67
+ field.current.style.opacity = "1";
68
+ }
69
+ }, [month]);
70
+ const g = (e) => {
71
+ let da = e.getDay();
72
+ if (da === 0) da = 7;
73
+ return da - 1;
74
+ };
75
+ const week = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];
76
+ const o = month.m - 1;
77
+ const d2 = new Date(month.y, o);
78
+ const days = [];
79
+ const prevDays = () => {
80
+ const prevMonth = new Date(d2);
81
+ prevMonth.setDate(prevMonth.getDate() - 1);
82
+ const prevList = [];
83
+ for (let i = 0; i < g(d2); i++) {
84
+ prevList.push(prevMonth.getDate() - i);
85
+ }
86
+ prevList.reverse();
87
+ return prevList;
88
+ };
89
+ while (d2.getMonth() === o) {
90
+ days.push(d2.getDate());
91
+ d2.setDate(d2.getDate() + 1);
92
+ }
93
+ const prevM = prevDays();
94
+ const nextDays = () => {
95
+ const daysCount = 42 - (prevM.length + days.length);
96
+ const nextList = [];
97
+ for (let i = 1; i <= daysCount; i++) {
98
+ nextList.push(i);
99
+ }
100
+ return nextList;
101
+ };
102
+ const nextM = nextDays();
103
+ const update = (m2, y) => {
104
+ y = m2 > 12 ? y + 1 : m2 < 1 ? y - 1 : y;
105
+ m2 = m2 > 12 ? 1 : m2 < 1 ? 12 : m2;
106
+ setMonth({ y, m: m2 });
107
+ };
108
+ const onExit = () => {
109
+ setActive(false);
110
+ };
111
+ const next = () => {
112
+ update(month.m + 1, month.y);
113
+ };
114
+ const prev2 = () => {
115
+ update(month.m - 1, month.y);
116
+ };
117
+ const isBefore = (activeDate) => {
118
+ if (before) {
119
+ const beforeDate = before.getTime();
120
+ if (beforeDate > activeDate) return true;
121
+ }
122
+ return false;
123
+ };
124
+ const send = (searchDate) => {
125
+ if (isBefore(
126
+ (/* @__PURE__ */ new Date(
127
+ `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
128
+ )).getTime()
129
+ ))
130
+ return;
131
+ onValue(
132
+ /* @__PURE__ */ new Date(
133
+ `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
134
+ )
135
+ );
136
+ onExit();
137
+ };
138
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
139
+ /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
140
+ /* @__PURE__ */ jsx(
141
+ Button,
142
+ {
143
+ isIconButton: true,
144
+ iconName: "DropdownArrowLeft16px",
145
+ onClick: prev2,
146
+ variant: "secondary-gray",
147
+ size: "l"
148
+ }
149
+ ),
150
+ /* @__PURE__ */ jsxs("div", { className: cls["d"], children: [
151
+ formating.Month(month.m).name,
152
+ "’",
153
+ month.y.toString().slice(-2)
154
+ ] }),
155
+ /* @__PURE__ */ jsx(
156
+ Button,
157
+ {
158
+ isIconButton: true,
159
+ iconName: "DropdownArrowRight16px",
160
+ onClick: next,
161
+ variant: "secondary-gray",
162
+ size: "l"
163
+ }
164
+ )
165
+ ] }),
166
+ /* @__PURE__ */ jsxs("div", { className: cls["b"], children: [
167
+ week.map((i, s) => /* @__PURE__ */ jsx(
168
+ "div",
169
+ {
170
+ className: `${s > 4 ? [cls["m"], cls["orange"]].join(" ") : cls["m"]}`,
171
+ children: i
172
+ },
173
+ `v${s}`
174
+ )),
175
+ prevM.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key)),
176
+ days.map((i, s) => /* @__PURE__ */ jsx(
177
+ "div",
178
+ {
179
+ className: isBefore(
180
+ (/* @__PURE__ */ new Date(
181
+ `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, i)}`
182
+ )).getTime()
183
+ ) ? cls["m"] : cls["a"],
184
+ children: i !== 0 ? /* @__PURE__ */ jsx(
185
+ "b",
186
+ {
187
+ className: current2.y === month.y && current2.m === month.m && current2.d === i ? cls["current"] : "",
188
+ onClick: () => send(i),
189
+ children: i
190
+ }
191
+ ) : /* @__PURE__ */ jsx("p", {})
192
+ },
193
+ s
194
+ )),
195
+ nextM.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key))
196
+ ] })
197
+ ] }) });
198
+ }
199
+ export {
200
+ DatePickerModal as D,
201
+ cls as c
202
+ };
@@ -0,0 +1 @@
1
+ ._input_8eg6j_2{padding-right:var(--space-3xl)}._date-wrapper_8eg6j_6{position:relative}._date-wrapper_8eg6j_6:hover input{background:var(--input-bg-color-hover)}._date-wrapper_8eg6j_6:before{content:"";position:absolute;z-index:3;top:0;bottom:0;left:0;right:60px;cursor:pointer}._wrapper_8eg6j_23{position:relative;display:flex;align-items:center;border-radius:8px}._wrapper_8eg6j_23._active_8eg6j_29{border-bottom:1px solid var(--citrine-100)}._input-wrapper_8eg6j_33{flex:1}._button-wrapper_8eg6j_37{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_8eg6j_37{align-self:center;background-color:transparent;border-radius:8px}._field-overlow_8eg6j_54{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_8eg6j_60{display:flex;flex-direction:column;padding:16px;border-radius:8px;background:#fff;max-height:none;width:368px;box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;text-align:center;font-feature-settings:"zero";font-variant-numeric:slashed-zero;text-overflow:ellipsis;font-family:var(--font-inter);font-size:var(--size-text-l);font-style:normal;font-weight:var(--font-weight-text-regular);line-height:var(--line-height-text-2xs);position:absolute;z-index:3;transition:height .5s ease-in;opacity:0}._calendar-block_8eg6j_60 ._h_8eg6j_83{display:flex;width:100%;color:var(--black-100)}._calendar-block_8eg6j_60 ._b_8eg6j_37{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_8eg6j_60 ._d_8eg6j_6{flex:1;display:flex;align-items:center;justify-content:center;color:var(--black-100)}._calendar-block_8eg6j_60 ._m_8eg6j_102,._calendar-block_8eg6j_60 ._a_8eg6j_29,._calendar-block_8eg6j_60 ._prev_8eg6j_104{overflow:hidden;height:48px;width:48px}._calendar-block_8eg6j_60 ._m_8eg6j_102{color:var(--disabled);display:flex;justify-content:center;align-items:center}._calendar-block_8eg6j_60 ._m_8eg6j_102 b{font-weight:400}._calendar-block_8eg6j_60 ._orange_8eg6j_120{color:var(--citrine-100)}._calendar-block_8eg6j_60 ._a_8eg6j_29{color:var(--black-100);border-radius:4px}._calendar-block_8eg6j_60 ._a_8eg6j_29 b{cursor:pointer;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-weight:400}._calendar-block_8eg6j_60 ._a_8eg6j_29 b:hover{background:var(--black-10)}._calendar-block_8eg6j_60 ._a_8eg6j_29 b:active{background:var(--sapphire-100);color:var(--white)}._calendar-block_8eg6j_60 ._current_8eg6j_145{border-radius:4px;background:var(--sapphire-10)}
@@ -1 +1 @@
1
- ._input-wrapper_1wv6m_2{position:relative}._input-wrapper_1wv6m_2 ._label_1wv6m_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_1wv6m_2 ._label_1wv6m_5._active-label_1wv6m_18{transform:scale(var(--label-scaled)) translateY(calc(var(--input-font-size) * -1))}._input-wrapper_1wv6m_2:hover ._label_1wv6m_5,._input-wrapper_1wv6m_2:focus-within ._label_1wv6m_5{color:var(--label-color)}._input_1wv6m_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_1wv6m_2:hover{color:var(--input-color-hover);background:var(--input-bg-color-hover)}._input_1wv6m_2:focus{color:var(--input-color-active);background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._s_1wv6m_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_1wv6m_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_1wv6m_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_1wv6m_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_1wv6m_109{--input-bg-color: var(--white);--input-bg-color-hover: var(--black-60);--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_1wv6m_109:hover{--label-color: var(--dark-text)}._success_1wv6m_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_1wv6m_124::-moz-placeholder{color:var(--input-color)}._success_1wv6m_124::placeholder{color:var(--input-color)}._success_1wv6m_124:hover::-moz-placeholder{color:var(--input-color)}._success_1wv6m_124:hover::placeholder{color:var(--input-color)}._alarm_1wv6m_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_1wv6m_142::-moz-placeholder{color:var(--input-color)}._alarm_1wv6m_142::placeholder{color:var(--input-color)}._alarm_1wv6m_142:hover::-moz-placeholder{color:var(--input-color)}._alarm_1wv6m_142:hover::placeholder{color:var(--input-color)}._error_1wv6m_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_1wv6m_160::-moz-placeholder{color:var(--input-color)}._error_1wv6m_160::placeholder{color:var(--input-color)}._error_1wv6m_160:hover::-moz-placeholder{color:var(--input-color)}._error_1wv6m_160:hover::placeholder{color:var(--input-color)}._disabled_1wv6m_178{--input-cursor: not-allowed;color:var(--light-text);background-color:var(--black-20)}._disabled_1wv6m_178:hover,._disabled_1wv6m_178:active,._disabled_1wv6m_178:focus{color:var(--light-text);background-color:var(--black-20);border:none;box-shadow:none}._disabled_1wv6m_178::-moz-placeholder{color:var(--light-text)}._disabled_1wv6m_178::placeholder{color:var(--light-text)}._disabled_1wv6m_178:hover::-moz-placeholder{color:var(--light-text)}._disabled_1wv6m_178:hover::placeholder{color:var(--light-text)}._has-label_1wv6m_196{padding-top:var(--input-padding-position)}
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)}
@@ -0,0 +1,44 @@
1
+ import { TInputProps } from '../Input';
2
+
3
+ export type DatePicker = {
4
+ /**
5
+ * функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
6
+ */
7
+ onValue: (e: onValue) => void;
8
+ /**
9
+ * функция ограничения выбора даты
10
+ (до какой даты выбор не доступен)
11
+ */
12
+ before?: Date | string;
13
+ /**
14
+ * значение из стейта (data)
15
+ */
16
+ value: string;
17
+ } & TInputProps;
18
+ export type onValue = {
19
+ value: Date;
20
+ name?: string;
21
+ };
22
+ export declare const DatePicker: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<{
23
+ /**
24
+ * функция=callback, которая вызывается при изменении значения и передает имя и новое значение для обновления стейта (data),
25
+ */
26
+ onValue: (e: onValue) => 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,78 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { memo, forwardRef, useState, useEffect } from "react";
3
+ import { Input } from "../Input/Input.js";
4
+ import { Button } from "../Button/Button.js";
5
+ import { c as cls, D as DatePickerModal } from "../../DatePickerModal-CbzwSnA7.js";
6
+ import { formating } from "../../utils/index.js";
7
+ import { c as classNames } from "../../index-CweZ_OcN.js";
8
+ const DatePicker = memo(
9
+ forwardRef(
10
+ ({ size, value, onValue, name, before, ...props }, ref) => {
11
+ const [active, setActive] = useState(false);
12
+ const [date, setDate] = useState(
13
+ value ? new Date(value) : /* @__PURE__ */ new Date()
14
+ );
15
+ useEffect(() => {
16
+ const handleClickFunction = (e) => {
17
+ if (e.target) {
18
+ if (!e.target.closest("." + cls["calendar-block"])) {
19
+ setActive(false);
20
+ window.removeEventListener("click", handleClickFunction, true);
21
+ }
22
+ }
23
+ };
24
+ if (active) {
25
+ window.addEventListener("click", handleClickFunction, true);
26
+ } else {
27
+ window.removeEventListener("click", handleClickFunction, true);
28
+ }
29
+ }, [active]);
30
+ const onOpen = () => {
31
+ setActive(true);
32
+ };
33
+ const onDate = (d) => {
34
+ setDate(d);
35
+ if (onValue) onValue({ value: d, name });
36
+ };
37
+ const wrapperClassNames = classNames(cls.wrapper, active && cls.active);
38
+ return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, children: [
39
+ /* @__PURE__ */ jsx("div", { className: cls["date-wrapper"], onClick: onOpen, children: /* @__PURE__ */ jsx(
40
+ Input,
41
+ {
42
+ ref,
43
+ className: cls.input,
44
+ wrapperClassName: cls["input-wrapper"],
45
+ size,
46
+ type: "text",
47
+ value: formating.Date(date, "dd.mm.yy"),
48
+ ...props
49
+ }
50
+ ) }),
51
+ /* @__PURE__ */ jsx("div", { className: cls["button-wrapper"], children: /* @__PURE__ */ jsx(
52
+ Button,
53
+ {
54
+ isIconButton: true,
55
+ clear: true,
56
+ type: "button",
57
+ className: cls.button,
58
+ onClick: onOpen,
59
+ iconName: active ? "DropdownArrowUp16px" : "DropdownArrowBottom16px"
60
+ }
61
+ ) }),
62
+ active && /* @__PURE__ */ jsx(
63
+ DatePickerModal,
64
+ {
65
+ onValue: onDate,
66
+ date,
67
+ setActive,
68
+ before: typeof before === "string" ? new Date(before) : before
69
+ }
70
+ )
71
+ ] });
72
+ }
73
+ )
74
+ );
75
+ DatePicker.displayName = "DatePicker";
76
+ export {
77
+ DatePicker
78
+ };
@@ -0,0 +1,8 @@
1
+ type DatePickerModal = {
2
+ date: Date;
3
+ onValue: (d: Date) => void;
4
+ setActive: (s: boolean) => void;
5
+ before?: Date;
6
+ };
7
+ export declare function DatePickerModal({ date, onValue, setActive, before }: DatePickerModal): import("react/jsx-runtime").JSX.Element;
8
+ export {};
@@ -0,0 +1,8 @@
1
+ import "react/jsx-runtime";
2
+ import "react";
3
+ import { D } from "../../DatePickerModal-CbzwSnA7.js";
4
+ import "../Button/Button.js";
5
+ import "../../utils/index.js";
6
+ export {
7
+ D as DatePickerModal
8
+ };
@@ -0,0 +1,5 @@
1
+ export declare enum EDatePickerBeforeDate {
2
+ CurrentDate1 = "2024-08-01",
3
+ CurrentDate2 = "2024-07-01",
4
+ CurrentDate3 = "2024-07-11"
5
+ }
@@ -0,0 +1,9 @@
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
+ export {
8
+ EDatePickerBeforeDate
9
+ };
@@ -0,0 +1,2 @@
1
+ export { DatePicker } from './DatePicker';
2
+ export type { DatePicker as TDatePickerProps } from './DatePicker';
@@ -0,0 +1,4 @@
1
+ import { DatePicker } from "./DatePicker.js";
2
+ export {
3
+ DatePicker
4
+ };
@@ -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 = "_label_1wv6m_5";
6
- const input = "_input_1wv6m_2";
7
- const s = "_s_1wv6m_61";
8
- const m = "_m_1wv6m_73";
9
- const l = "_l_1wv6m_5";
10
- const success = "_success_1wv6m_124";
11
- const alarm = "_alarm_1wv6m_142";
12
- const error = "_error_1wv6m_160";
13
- const disabled = "_disabled_1wv6m_178";
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-wrapper_1wv6m_2",
15
+ "input-wrapper": "_input-wrapper_16d1h_2",
16
16
  label,
17
- "active-label": "_active-label_1wv6m_18",
17
+ "active-label": "_active-label_16d1h_18",
18
18
  input,
19
19
  s,
20
20
  m,
21
21
  l,
22
- "default-gray": "_default-gray_1wv6m_97",
23
- "default-white": "_default-white_1wv6m_109",
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-label_1wv6m_196"
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';
@@ -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";
@@ -22,6 +23,7 @@ import { SelectSearch } from "./SelectSearch/SelectSearch.js";
22
23
  import { ESelectSearchSize } from "./SelectSearch/constants.js";
23
24
  export {
24
25
  Button,
26
+ DatePicker,
25
27
  Drawer,
26
28
  EButtonForm,
27
29
  EButtonSize,
package/dist/index.d.ts CHANGED
@@ -2,3 +2,4 @@
2
2
  export * from './components';
3
3
  export * from './hooks';
4
4
  export * from './icons';
5
+ export * from './utils';
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";
@@ -24,8 +25,10 @@ import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
24
25
  import { EMediaQuery } from "./hooks/useMediaQuery/constants.js";
25
26
  import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
26
27
  import { Icon } from "./icons/Icon.js";
28
+ import { formating } from "./utils/index.js";
27
29
  import './assets/index.css';export {
28
30
  Button,
31
+ DatePicker,
29
32
  Drawer,
30
33
  EButtonForm,
31
34
  EButtonSize,
@@ -54,6 +57,7 @@ import './assets/index.css';export {
54
57
  Slider,
55
58
  Steps,
56
59
  Vote,
60
+ formating,
57
61
  getMaskedInputPhoneValue,
58
62
  getUnmaskedInputValue,
59
63
  useLockBodyScroll,
@@ -0,0 +1 @@
1
+ export default function _Date(x: Date, y: string | Date): string;
@@ -0,0 +1,27 @@
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
+ console.log(y);
21
+ }
22
+ });
23
+ return y;
24
+ }
25
+ export {
26
+ _Date as default
27
+ };
@@ -0,0 +1,8 @@
1
+ type MonthObj = {
2
+ val: string;
3
+ name: string;
4
+ names: string;
5
+ abc: string;
6
+ };
7
+ export default function Month(n: number): MonthObj;
8
+ export {};
@@ -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,6 @@
1
+ /**
2
+ *l - length
3
+ *n - numder
4
+ *fn(10,123) => 0000000123
5
+ */
6
+ export default function Number(l: number, n: number): string;
@@ -0,0 +1,8 @@
1
+ function Number(l, n) {
2
+ let c = n + "";
3
+ while (c.length < l) c = "0" + c;
4
+ return c;
5
+ }
6
+ export {
7
+ Number as default
8
+ };
@@ -0,0 +1,9 @@
1
+ import { default as Number } from './formating/Number';
2
+ import { default as Month } from './formating/Month';
3
+ import { default as Date } from './formating/Date';
4
+
5
+ export declare const formating: {
6
+ Number: typeof Number;
7
+ Month: typeof Month;
8
+ Date: typeof Date;
9
+ };
@@ -0,0 +1,11 @@
1
+ import Number from "./formating/Number.js";
2
+ import Month from "./formating/Month.js";
3
+ import _Date from "./formating/Date.js";
4
+ const formating = {
5
+ Number,
6
+ Month,
7
+ Date: _Date
8
+ };
9
+ export {
10
+ formating
11
+ };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "mimir-ui-kit",
3
3
  "private": false,
4
- "version": "1.5.4",
4
+ "version": "1.6.0",
5
5
  "type": "module",
6
6
  "exports": {
7
7
  ".": {