mimir-ui-kit 1.29.1 → 1.29.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/assets/SelectSearch.css +1 -1
- package/dist/assets/styles.css +1 -1
- package/dist/components/DatePicker/DatePicker.js +6 -14
- package/dist/components/DatePicker/DatePickerModal.js +1 -1
- package/dist/components/DatePicker/MonthPickerModal.js +1 -1
- package/dist/components/DatePicker/YearPickerModal.js +1 -1
- package/dist/components/SelectSearch/SelectSearch.d.ts +18 -2
- package/dist/components/SelectSearch/SelectSearch.js +42 -29
- package/dist/components/SelectSearch/types.d.ts +2 -4
- package/dist/components/TabTrail/TabTrail.d.ts +8 -0
- package/dist/components/TabTrail/TabTrail.js +19 -3
- package/dist/components/UniversalUploader/UniversalUploader.js +20 -34
- package/dist/styles.module-Ugsf0AOb.js +38 -0
- package/package.json +1 -1
- package/dist/styles.module-CLBRb2go.js +0 -38
|
@@ -1 +1 @@
|
|
|
1
|
-
._select-
|
|
1
|
+
._select-search_q1u7o_2{position:relative}._select-search_q1u7o_2._disabled_q1u7o_5{cursor:not-allowed}._container_q1u7o_9{display:block;gap:var(--select-search-gap);align-items:center;justify-content:space-between;height:var(--select-search-height);background-color:var(--black-5);border-radius:var(--select-search-radius)}._container-open_q1u7o_18{border-bottom:1px solid var(--citrine-100)}._full_q1u7o_22{width:100%}._selected-icon_q1u7o_26 path{fill:var(--sapphire-100)}._selector-icon-open_q1u7o_30{transform:rotate(180deg)}._button_q1u7o_34{position:absolute;top:0;right:0;display:flex;align-items:center;margin:var(--select-search-btn-space);background:none;border:none;cursor:pointer}._button_q1u7o_34._disabled_q1u7o_5{cursor:not-allowed}._button_q1u7o_34._disabled_q1u7o_5 ._selector-icon_q1u7o_30 path{fill:var(--white)}._options_q1u7o_52{position:absolute;z-index:10;width:100%;min-height:100%;max-height:var(--select-search-options-height);overflow-y:auto;font-size:var(--size-text-l);background:var(--white);box-shadow:var(--box-shadow-select-search)}._options_q1u7o_52._top_q1u7o_63{bottom:100%;margin-bottom:1px;border-radius:var(--select-search-radius) var(--select-search-radius) 0 0}._options_q1u7o_52._bottom_q1u7o_68{top:100%;margin-top:1px;border-radius:0 0 var(--select-search-radius) var(--select-search-radius)}._options_q1u7o_52::-webkit-scrollbar{width:3px}._options_q1u7o_52::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:2px}._options_q1u7o_52::-webkit-scrollbar-track{background-color:var(--white)}@media (max-width: 600px){._options_q1u7o_52{max-height:var(--select-search-options-height-mobile)}}._no-options_q1u7o_89{height:100%;padding:var(--select-search-option-space);color:var(--black-80)}._m_q1u7o_95{--select-search-height: var(--select-search-height-l);--select-search-space: var(--space-xss) var(--space-m);--select-search-radius: var(--control-radius);--select-search-gap: var(--space-2xs);--select-search-btn-space: var(--space-m) var(--space-m) var(--space-m) var(--space-xs);--select-search-option-space: var(--space-2s) var(--space-m);--select-search-options-height: var(--select-search-options-height-mobile)}._l_q1u7o_106{--select-search-height: var(--select-search-height-xxl);--select-search-space: var(--space-xss) var(--space-m);--select-search-radius: var(--control-radius-s);--select-search-gap: var(--space-xs);--select-search-btn-space: var(--space-l) var(--space-m) var(--space-l) var(--space-xs);--select-search-option-space: var(--space-2l) var(--space-m);--select-search-options-height: var(--select-search-options-height-desktop)}._custom-input-class_q1u7o_117{width:100%!important}._custom-input-class_q1u7o_117:last-child{padding-right:var(--space-4xl)}._option_q1u7o_52{display:flex;gap:var(--space-m);align-items:center;width:100%;padding:var(--select-search-option-space);cursor:pointer;transition:background-color .2s ease-in-out}._option-active_q1u7o_133{background-color:var(--black-5)}._option-inner_q1u7o_136{display:flex;flex-direction:column;gap:var(--space-xs);width:100%}
|
package/dist/assets/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._input_fbbrm_2{padding-right:var(--space-3xl)}._input-wrapper_fbbrm_6{flex:1}._date-wrapper_fbbrm_10{position:relative;width:100%}._date-wrapper_fbbrm_10 ._inputBorderControl_fbbrm_14{border:transparent}._date-wrapper_fbbrm_10:hover ._input-wrapper_fbbrm_6{background-color:var(--input-bg-color-hover)}._date-wrapper_fbbrm_10:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}[data-disabled=true] ._date-wrapper_fbbrm_10:before{cursor:auto}[data-disabled=true] ._date-wrapper_fbbrm_10 ._input-wrapper_fbbrm_6{background:var(--black-20)}[data-disabled=true] ._date-wrapper_fbbrm_10 ._input-wrapper_fbbrm_6 label,[data-disabled=true] ._date-wrapper_fbbrm_10 ._input-wrapper_fbbrm_6 input{color:var(--white)}[data-disabled=true] ._button-wrapper_fbbrm_38 svg{color:var(--white);cursor:default;fill:var(--white)}._wrapper_fbbrm_44{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_fbbrm_44._active_fbbrm_50{border-bottom:1px solid var(--citrine-100)}._button-wrapper_fbbrm_38{position:absolute;top:0;right:0;z-index:2;display:flex;justify-content:center;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_fbbrm_38{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_fbbrm_72{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_fbbrm_78{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:var(--white);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_fbbrm_78 ._h_fbbrm_101{display:flex;width:100%;color:var(--black-100)}._calendar-block_fbbrm_78 ._b_fbbrm_38{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_fbbrm_78 ._d_fbbrm_10{display:flex;flex:1;gap:4px;align-items:center;justify-content:center;color:var(--black-100);cursor:pointer}._calendar-block_fbbrm_78 ._m_fbbrm_122,._calendar-block_fbbrm_78 ._a_fbbrm_50,._calendar-block_fbbrm_78 ._prev_fbbrm_124{width:auto;height:48px;overflow:hidden}._calendar-block_fbbrm_78 ._m_fbbrm_122{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_fbbrm_78 ._m_fbbrm_122 b{font-weight:var(--font-weight-text-regular)}._calendar-block_fbbrm_78 ._orange_fbbrm_140{color:var(--citrine-100)}._calendar-block_fbbrm_78 ._a_fbbrm_50{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_fbbrm_78 ._a_fbbrm_50 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_fbbrm_78 ._a_fbbrm_50 b:hover{background:var(--black-10)}._calendar-block_fbbrm_78 ._a_fbbrm_50 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_fbbrm_78 ._current_fbbrm_165{background:var(--sapphire-10);border-radius:var(--control-radius-s)}._calendar-block_fbbrm_78 ._monthGrid_fbbrm_170{display:grid;grid-template-columns:repeat(3,1fr)}
|
|
@@ -3,11 +3,10 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
|
3
3
|
import { memo, forwardRef, useState, useEffect } from "react";
|
|
4
4
|
import { DatePickerModal } from "./DatePickerModal.js";
|
|
5
5
|
import { MonthPickerModal } from "./MonthPickerModal.js";
|
|
6
|
-
import { c as cls } from "../../styles.module-
|
|
6
|
+
import { c as cls } from "../../styles.module-Ugsf0AOb.js";
|
|
7
7
|
import { YearPickerModal } from "./YearPickerModal.js";
|
|
8
8
|
import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
|
|
9
9
|
import { formating } from "../../utils/index.js";
|
|
10
|
-
import { Button } from "../Button/Button.js";
|
|
11
10
|
import { I as Input } from "../../Input-ChCIy5oY.js";
|
|
12
11
|
import { EInputVariant } from "../Input/constants.js";
|
|
13
12
|
const DatePicker = memo(
|
|
@@ -107,23 +106,16 @@ const DatePicker = memo(
|
|
|
107
106
|
size,
|
|
108
107
|
type: "text",
|
|
109
108
|
variant: isError ? EInputVariant.Error : variant,
|
|
110
|
-
value: date && !(typeof date === "string") && !isNaN(date == null ? void 0 : date.getTime()) ? formating.Date(date, "dd
|
|
109
|
+
value: date && !(typeof date === "string") && !isNaN(date == null ? void 0 : date.getTime()) ? formating.Date(date, "dd/mm/yyyy") : "",
|
|
110
|
+
rightAddon: {
|
|
111
|
+
addonType: "icon",
|
|
112
|
+
addonContent: isActive ? "DropdownArrowUp24px" : "DropdownArrowDown24px"
|
|
113
|
+
},
|
|
111
114
|
...props
|
|
112
115
|
}
|
|
113
116
|
)
|
|
114
117
|
}
|
|
115
118
|
),
|
|
116
|
-
/* @__PURE__ */ jsx("div", { className: cls["button-wrapper"], children: /* @__PURE__ */ jsx(
|
|
117
|
-
Button,
|
|
118
|
-
{
|
|
119
|
-
isIconButton: true,
|
|
120
|
-
clear: true,
|
|
121
|
-
type: "button",
|
|
122
|
-
className: cls.button,
|
|
123
|
-
onClick: onOpen,
|
|
124
|
-
iconName: isActive ? "DropdownArrowUp16px" : "DropdownArrowBottom16px"
|
|
125
|
-
}
|
|
126
|
-
) }),
|
|
127
119
|
pickerType === "days" && isActive && /* @__PURE__ */ jsx(
|
|
128
120
|
DatePickerModal,
|
|
129
121
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useState, useEffect } from "react";
|
|
3
3
|
import { week } from "./constants.js";
|
|
4
|
-
import { c as cls } from "../../styles.module-
|
|
4
|
+
import { c as cls } from "../../styles.module-Ugsf0AOb.js";
|
|
5
5
|
import { Icon } from "../../icons/Icon.js";
|
|
6
6
|
import { formating } from "../../utils/index.js";
|
|
7
7
|
import { Button } from "../Button/Button.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useState, useEffect } from "react";
|
|
3
3
|
import { months } from "./constants.js";
|
|
4
|
-
import { c as cls } from "../../styles.module-
|
|
4
|
+
import { c as cls } from "../../styles.module-Ugsf0AOb.js";
|
|
5
5
|
import { Icon } from "../../icons/Icon.js";
|
|
6
6
|
import { formating } from "../../utils/index.js";
|
|
7
7
|
import { Button } from "../Button/Button.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useRef, useState, useEffect } from "react";
|
|
3
|
-
import { c as cls } from "../../styles.module-
|
|
3
|
+
import { c as cls } from "../../styles.module-Ugsf0AOb.js";
|
|
4
4
|
import { formating } from "../../utils/index.js";
|
|
5
5
|
import { Button } from "../Button/Button.js";
|
|
6
6
|
function YearPickerModal({
|
|
@@ -1,3 +1,19 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ESelectSearchSize } from './constants';
|
|
2
|
+
import { TSelectOption } from './types';
|
|
2
3
|
|
|
3
|
-
export declare const SelectSearch: import('react').ForwardRefExoticComponent<
|
|
4
|
+
export declare const SelectSearch: import('react').ForwardRefExoticComponent<Pick<import('../Input').TInputProps, "variant" | "withClearButton"> & {
|
|
5
|
+
value?: TSelectOption | null;
|
|
6
|
+
onChange?: (value: TSelectOption) => void;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
size?: ESelectSearchSize;
|
|
9
|
+
full?: boolean;
|
|
10
|
+
displayValue?: string;
|
|
11
|
+
showArrow?: boolean;
|
|
12
|
+
onSearch?: (value: string) => void;
|
|
13
|
+
filterOnSearch?: boolean;
|
|
14
|
+
items: TSelectOption[];
|
|
15
|
+
classNameOption?: string;
|
|
16
|
+
menuPlacement?: import('./types').TMenuPlacement;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
searchProps?: Pick<import('../Input').TInputProps, "numbersOnly" | "maxLength">;
|
|
19
|
+
} & import('react').RefAttributes<HTMLElement>>;
|
|
@@ -3752,35 +3752,36 @@ function No(o2, r2) {
|
|
|
3752
3752
|
return H({ ourProps: { id: d2, ref: M2, role: "option", tabIndex: s2 === true ? void 0 : -1, "aria-disabled": s2 === true ? true : void 0, "aria-selected": C, disabled: void 0, onMouseDown: y2, onFocus: A2, onPointerEnter: h2, onMouseEnter: h2, onPointerMove: O, onMouseMove: O, onPointerLeave: G2, onMouseLeave: G2 }, theirProps: a3, slot: J2, defaultTag: ko, name: "Combobox.Option" });
|
|
3753
3753
|
}
|
|
3754
3754
|
let Uo = W$1(ho), Ho = W$1(Vo), Go = W$1(Mo), jo = K, zo = W$1(Bo), Ko = W$1(No), Nt = Object.assign(Uo, { Input: Go, Button: Ho, Label: jo, Options: zo, Option: Ko });
|
|
3755
|
-
const disabled = "
|
|
3756
|
-
const container = "
|
|
3757
|
-
const full = "
|
|
3758
|
-
const button = "
|
|
3759
|
-
const options = "
|
|
3760
|
-
const top = "
|
|
3761
|
-
const bottom = "
|
|
3762
|
-
const m = "
|
|
3763
|
-
const l = "
|
|
3764
|
-
const option = "
|
|
3755
|
+
const disabled = "_disabled_q1u7o_5";
|
|
3756
|
+
const container = "_container_q1u7o_9";
|
|
3757
|
+
const full = "_full_q1u7o_22";
|
|
3758
|
+
const button = "_button_q1u7o_34";
|
|
3759
|
+
const options = "_options_q1u7o_52";
|
|
3760
|
+
const top = "_top_q1u7o_63";
|
|
3761
|
+
const bottom = "_bottom_q1u7o_68";
|
|
3762
|
+
const m = "_m_q1u7o_95";
|
|
3763
|
+
const l = "_l_q1u7o_106";
|
|
3764
|
+
const option = "_option_q1u7o_52";
|
|
3765
3765
|
const cls = {
|
|
3766
|
-
"select-search": "_select-
|
|
3766
|
+
"select-search": "_select-search_q1u7o_2",
|
|
3767
3767
|
disabled,
|
|
3768
3768
|
container,
|
|
3769
|
-
"container-open": "_container-
|
|
3769
|
+
"container-open": "_container-open_q1u7o_18",
|
|
3770
3770
|
full,
|
|
3771
|
-
"
|
|
3771
|
+
"selected-icon": "_selected-icon_q1u7o_26",
|
|
3772
|
+
"selector-icon-open": "_selector-icon-open_q1u7o_30",
|
|
3772
3773
|
button,
|
|
3774
|
+
"selector-icon": "_selector-icon_q1u7o_30",
|
|
3773
3775
|
options,
|
|
3774
3776
|
top,
|
|
3775
3777
|
bottom,
|
|
3776
|
-
"no-options": "_no-
|
|
3778
|
+
"no-options": "_no-options_q1u7o_89",
|
|
3777
3779
|
m,
|
|
3778
3780
|
l,
|
|
3779
|
-
"custom-input-class": "_custom-input-
|
|
3781
|
+
"custom-input-class": "_custom-input-class_q1u7o_117",
|
|
3780
3782
|
option,
|
|
3781
|
-
"option-active": "_option-
|
|
3782
|
-
"option-inner": "_option-
|
|
3783
|
-
"selected-icon": "_selected-icon_1bdke_133"
|
|
3783
|
+
"option-active": "_option-active_q1u7o_133",
|
|
3784
|
+
"option-inner": "_option-inner_q1u7o_136"
|
|
3784
3785
|
};
|
|
3785
3786
|
const SelectSearch = forwardRef(
|
|
3786
3787
|
(props, ref) => {
|
|
@@ -3799,9 +3800,11 @@ const SelectSearch = forwardRef(
|
|
|
3799
3800
|
variant = EInputVariant.DefaultGray,
|
|
3800
3801
|
menuPlacement = "bottom",
|
|
3801
3802
|
disabled: disabled2 = false,
|
|
3802
|
-
searchProps
|
|
3803
|
+
searchProps,
|
|
3804
|
+
withClearButton = false
|
|
3803
3805
|
} = props;
|
|
3804
|
-
const [
|
|
3806
|
+
const currentInputValue = String((value == null ? void 0 : value[displayValue]) || "");
|
|
3807
|
+
const [inputValue, setInputValue] = useState(currentInputValue);
|
|
3805
3808
|
const mapSizeToInputSize = (size22) => {
|
|
3806
3809
|
switch (size22) {
|
|
3807
3810
|
case ESelectSearchSize.M:
|
|
@@ -3841,8 +3844,8 @@ const SelectSearch = forwardRef(
|
|
|
3841
3844
|
[onChange, onSearch, value]
|
|
3842
3845
|
);
|
|
3843
3846
|
useEffect(() => {
|
|
3844
|
-
setInputValue(
|
|
3845
|
-
}, [
|
|
3847
|
+
setInputValue(currentInputValue);
|
|
3848
|
+
}, [currentInputValue]);
|
|
3846
3849
|
return /* @__PURE__ */ jsx(
|
|
3847
3850
|
Nt,
|
|
3848
3851
|
{
|
|
@@ -3875,18 +3878,28 @@ const SelectSearch = forwardRef(
|
|
|
3875
3878
|
value: inputValue,
|
|
3876
3879
|
disabled: disabled2,
|
|
3877
3880
|
variant,
|
|
3881
|
+
withClearButton,
|
|
3878
3882
|
...searchProps
|
|
3879
3883
|
}
|
|
3880
3884
|
),
|
|
3881
|
-
showArrow && /* @__PURE__ */ jsx(
|
|
3882
|
-
|
|
3885
|
+
showArrow && /* @__PURE__ */ jsx(
|
|
3886
|
+
Ho,
|
|
3883
3887
|
{
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
+
className: classNames(cls.button, {
|
|
3889
|
+
[cls.disabled]: disabled2
|
|
3890
|
+
}),
|
|
3891
|
+
disabled: disabled2,
|
|
3892
|
+
children: /* @__PURE__ */ jsx(
|
|
3893
|
+
Icon,
|
|
3894
|
+
{
|
|
3895
|
+
iconName: size2 == ESelectSearchSize.M ? "DropdownArrowBottom16px" : "DropdownArrowDown24px",
|
|
3896
|
+
className: classNames(cls["selector-icon"], {
|
|
3897
|
+
[cls["selector-icon-open"]]: open
|
|
3898
|
+
})
|
|
3899
|
+
}
|
|
3900
|
+
)
|
|
3888
3901
|
}
|
|
3889
|
-
)
|
|
3902
|
+
)
|
|
3890
3903
|
]
|
|
3891
3904
|
}
|
|
3892
3905
|
),
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { ESelectSearchSize } from './constants';
|
|
3
|
-
import { TInputProps
|
|
3
|
+
import { TInputProps } from '../Input';
|
|
4
4
|
|
|
5
5
|
export type TSelectOption = {
|
|
6
6
|
name: string;
|
|
@@ -9,7 +9,7 @@ export type TSelectOption = {
|
|
|
9
9
|
[index: string]: unknown;
|
|
10
10
|
};
|
|
11
11
|
export type TMenuPlacement = 'top' | 'bottom';
|
|
12
|
-
export type TSelectSearchProps = {
|
|
12
|
+
export type TSelectSearchProps = Pick<TInputProps, 'withClearButton' | 'variant'> & {
|
|
13
13
|
/**
|
|
14
14
|
* Текущее выбранное значение.
|
|
15
15
|
*/
|
|
@@ -44,8 +44,6 @@ export type TSelectSearchProps = {
|
|
|
44
44
|
items: TSelectOption[];
|
|
45
45
|
/** Класснейм для значения */
|
|
46
46
|
classNameOption?: string;
|
|
47
|
-
/** Варианты отображения ввода */
|
|
48
|
-
variant?: TVariant;
|
|
49
47
|
/** Варианты отображения выпадающего меню */
|
|
50
48
|
menuPlacement?: TMenuPlacement;
|
|
51
49
|
/** Отключает компонент SelectSearch */
|
|
@@ -31,5 +31,13 @@ export type TTabTrailProps = {
|
|
|
31
31
|
* Класснейм для TabTrail.
|
|
32
32
|
*/
|
|
33
33
|
className?: string;
|
|
34
|
+
/**
|
|
35
|
+
* Индекс выбранного таба.
|
|
36
|
+
*/
|
|
37
|
+
selectedTabIndex?: number;
|
|
38
|
+
/**
|
|
39
|
+
* Функция обратного вызова при изменении выбранного таба.
|
|
40
|
+
*/
|
|
41
|
+
onTabChange?: (index: number) => void;
|
|
34
42
|
};
|
|
35
43
|
export declare const TabTrail: import('react').ForwardRefExoticComponent<TTabTrailProps & import('react').RefAttributes<HTMLElement>>;
|
|
@@ -219,9 +219,25 @@ const cls = {
|
|
|
219
219
|
s
|
|
220
220
|
};
|
|
221
221
|
const TabTrail = forwardRef(
|
|
222
|
-
({
|
|
223
|
-
|
|
222
|
+
({
|
|
223
|
+
categories,
|
|
224
|
+
size = ETabTrailSize.M,
|
|
225
|
+
showButtons = true,
|
|
226
|
+
className,
|
|
227
|
+
selectedTabIndex,
|
|
228
|
+
onTabChange
|
|
229
|
+
}, ref) => {
|
|
230
|
+
const [activeIndex, setActiveIndex] = useState(selectedTabIndex || 0);
|
|
224
231
|
const tabListRef = useRef(null);
|
|
232
|
+
useEffect(() => {
|
|
233
|
+
if (selectedTabIndex !== void 0 && selectedTabIndex !== activeIndex) {
|
|
234
|
+
setActiveIndex(selectedTabIndex);
|
|
235
|
+
}
|
|
236
|
+
}, [activeIndex, selectedTabIndex]);
|
|
237
|
+
const handleTabChange = (index) => {
|
|
238
|
+
setActiveIndex(index);
|
|
239
|
+
onTabChange == null ? void 0 : onTabChange(index);
|
|
240
|
+
};
|
|
225
241
|
const handleNext = () => {
|
|
226
242
|
setActiveIndex((prevIndex) => (prevIndex + 1) % categories.length);
|
|
227
243
|
};
|
|
@@ -249,7 +265,7 @@ const TabTrail = forwardRef(
|
|
|
249
265
|
ref,
|
|
250
266
|
className: classNames(cls.group, cls[size], className),
|
|
251
267
|
selectedIndex: activeIndex,
|
|
252
|
-
onChange:
|
|
268
|
+
onChange: handleTabChange,
|
|
253
269
|
children: [
|
|
254
270
|
/* @__PURE__ */ jsxs("div", { className: cls["group-inner"], children: [
|
|
255
271
|
/* @__PURE__ */ jsx(Ne, { ref: tabListRef, className: cls.list, children: /* @__PURE__ */ jsx("div", { className: cls.tabs, children: categories.map(({ name, notificationCount }, index) => /* @__PURE__ */ jsxs(
|
|
@@ -1,14 +1,22 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
|
-
import { forwardRef, useState, useEffect } from "react";
|
|
3
|
+
import { forwardRef, useState, useEffect, useMemo } from "react";
|
|
4
4
|
import { imageTypes } from "./constants.js";
|
|
5
5
|
import { ListFiles } from "../ListFiles/ListFiles.js";
|
|
6
6
|
import { ListPhotos } from "../ListPhotos/ListPhotos.js";
|
|
7
|
-
import { imageFileTypes } from "../Uploader/constants.js";
|
|
8
7
|
import { Uploader } from "../Uploader/Uploader.js";
|
|
9
8
|
import '../../assets/UploaderPhotos.css';const cls = {
|
|
10
9
|
"upload-file-wrapper": "_upload-file-wrapper_2zki8_2"
|
|
11
10
|
};
|
|
11
|
+
const isImageFile = (file) => {
|
|
12
|
+
if ("file" in file && file.file instanceof File) {
|
|
13
|
+
return imageTypes.includes(file.file.type);
|
|
14
|
+
}
|
|
15
|
+
if ("type" in file && typeof file.type === "string") {
|
|
16
|
+
return imageTypes.includes(file.type);
|
|
17
|
+
}
|
|
18
|
+
return false;
|
|
19
|
+
};
|
|
12
20
|
const UniversalUploader = forwardRef(
|
|
13
21
|
(props, ref) => {
|
|
14
22
|
const {
|
|
@@ -30,24 +38,6 @@ const UniversalUploader = forwardRef(
|
|
|
30
38
|
setItems(value);
|
|
31
39
|
}
|
|
32
40
|
}, [value]);
|
|
33
|
-
const isImageFile = (file) => {
|
|
34
|
-
var _a;
|
|
35
|
-
if (!file) return false;
|
|
36
|
-
if (file instanceof File) {
|
|
37
|
-
return imageTypes.includes(file.type);
|
|
38
|
-
}
|
|
39
|
-
if ("file" in file && file.file instanceof File) {
|
|
40
|
-
return imageTypes.includes(file.file.type);
|
|
41
|
-
}
|
|
42
|
-
if ("url" in file && typeof file.url === "string") {
|
|
43
|
-
if (file.url.startsWith("blob:")) {
|
|
44
|
-
return typeof file.type === "string" && imageTypes.includes(file.type);
|
|
45
|
-
}
|
|
46
|
-
const extension = (_a = file.url.split(".").pop()) == null ? void 0 : _a.toLowerCase();
|
|
47
|
-
return imageFileTypes.includes(extension);
|
|
48
|
-
}
|
|
49
|
-
return false;
|
|
50
|
-
};
|
|
51
41
|
const onChangeValue = (e) => {
|
|
52
42
|
const newItems = e.value.map((el) => {
|
|
53
43
|
if (isImageFile(el.file)) {
|
|
@@ -75,6 +65,14 @@ const UniversalUploader = forwardRef(
|
|
|
75
65
|
setItems((prev) => prev.filter((item) => item.id !== deleteId));
|
|
76
66
|
onChange == null ? void 0 : onChange({ type: "delete", data: deleteId });
|
|
77
67
|
};
|
|
68
|
+
const { photos, files } = useMemo(() => {
|
|
69
|
+
const getFiles = () => items.filter((item) => !isImageFile(item));
|
|
70
|
+
const getPhotos = () => items.filter(isImageFile);
|
|
71
|
+
if (type === "all") return { files: getFiles(), photos: getPhotos() };
|
|
72
|
+
if (type === "files") return { photos: [], files: getFiles() };
|
|
73
|
+
if (type === "photos") return { files: [], photos: getPhotos() };
|
|
74
|
+
return { files: [], photos: [] };
|
|
75
|
+
}, [items, type]);
|
|
78
76
|
return /* @__PURE__ */ jsxs(
|
|
79
77
|
"div",
|
|
80
78
|
{
|
|
@@ -96,20 +94,8 @@ const UniversalUploader = forwardRef(
|
|
|
96
94
|
titleUploader
|
|
97
95
|
}
|
|
98
96
|
),
|
|
99
|
-
(type === "files" || type === "all") && /* @__PURE__ */ jsx(
|
|
100
|
-
|
|
101
|
-
{
|
|
102
|
-
value: items.filter((item) => !isImageFile(item)),
|
|
103
|
-
onChange: (j) => onDelete(j.deleteId)
|
|
104
|
-
}
|
|
105
|
-
),
|
|
106
|
-
(type === "photos" || type === "all") && /* @__PURE__ */ jsx(
|
|
107
|
-
ListPhotos,
|
|
108
|
-
{
|
|
109
|
-
value: items.filter((item) => isImageFile(item)),
|
|
110
|
-
onChange: (j) => onDelete(j.deleteId)
|
|
111
|
-
}
|
|
112
|
-
)
|
|
97
|
+
(type === "files" || type === "all") && /* @__PURE__ */ jsx(ListFiles, { value: files, onChange: (j) => onDelete(j.deleteId) }),
|
|
98
|
+
(type === "photos" || type === "all") && /* @__PURE__ */ jsx(ListPhotos, { value: photos, onChange: (j) => onDelete(j.deleteId) })
|
|
113
99
|
]
|
|
114
100
|
}
|
|
115
101
|
);
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import './assets/styles.css';const input = "_input_fbbrm_2";
|
|
2
|
+
const inputBorderControl = "_inputBorderControl_fbbrm_14";
|
|
3
|
+
const wrapper = "_wrapper_fbbrm_44";
|
|
4
|
+
const active = "_active_fbbrm_50";
|
|
5
|
+
const button = "_button_fbbrm_38";
|
|
6
|
+
const h = "_h_fbbrm_101";
|
|
7
|
+
const b = "_b_fbbrm_38";
|
|
8
|
+
const d = "_d_fbbrm_10";
|
|
9
|
+
const m = "_m_fbbrm_122";
|
|
10
|
+
const a = "_a_fbbrm_50";
|
|
11
|
+
const prev = "_prev_fbbrm_124";
|
|
12
|
+
const orange = "_orange_fbbrm_140";
|
|
13
|
+
const current = "_current_fbbrm_165";
|
|
14
|
+
const monthGrid = "_monthGrid_fbbrm_170";
|
|
15
|
+
const cls = {
|
|
16
|
+
input,
|
|
17
|
+
"input-wrapper": "_input-wrapper_fbbrm_6",
|
|
18
|
+
"date-wrapper": "_date-wrapper_fbbrm_10",
|
|
19
|
+
inputBorderControl,
|
|
20
|
+
"button-wrapper": "_button-wrapper_fbbrm_38",
|
|
21
|
+
wrapper,
|
|
22
|
+
active,
|
|
23
|
+
button,
|
|
24
|
+
"field-overlow": "_field-overlow_fbbrm_72",
|
|
25
|
+
"calendar-block": "_calendar-block_fbbrm_78",
|
|
26
|
+
h,
|
|
27
|
+
b,
|
|
28
|
+
d,
|
|
29
|
+
m,
|
|
30
|
+
a,
|
|
31
|
+
prev,
|
|
32
|
+
orange,
|
|
33
|
+
current,
|
|
34
|
+
monthGrid
|
|
35
|
+
};
|
|
36
|
+
export {
|
|
37
|
+
cls as c
|
|
38
|
+
};
|
package/package.json
CHANGED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import './assets/styles.css';const input = "_input_1fczl_2";
|
|
2
|
-
const inputBorderControl = "_inputBorderControl_1fczl_14";
|
|
3
|
-
const wrapper = "_wrapper_1fczl_44";
|
|
4
|
-
const active = "_active_1fczl_50";
|
|
5
|
-
const button = "_button_1fczl_38";
|
|
6
|
-
const h = "_h_1fczl_100";
|
|
7
|
-
const b = "_b_1fczl_38";
|
|
8
|
-
const d = "_d_1fczl_10";
|
|
9
|
-
const m = "_m_1fczl_121";
|
|
10
|
-
const a = "_a_1fczl_50";
|
|
11
|
-
const prev = "_prev_1fczl_123";
|
|
12
|
-
const orange = "_orange_1fczl_139";
|
|
13
|
-
const current = "_current_1fczl_164";
|
|
14
|
-
const monthGrid = "_monthGrid_1fczl_169";
|
|
15
|
-
const cls = {
|
|
16
|
-
input,
|
|
17
|
-
"input-wrapper": "_input-wrapper_1fczl_6",
|
|
18
|
-
"date-wrapper": "_date-wrapper_1fczl_10",
|
|
19
|
-
inputBorderControl,
|
|
20
|
-
"button-wrapper": "_button-wrapper_1fczl_38",
|
|
21
|
-
wrapper,
|
|
22
|
-
active,
|
|
23
|
-
button,
|
|
24
|
-
"field-overlow": "_field-overlow_1fczl_71",
|
|
25
|
-
"calendar-block": "_calendar-block_1fczl_77",
|
|
26
|
-
h,
|
|
27
|
-
b,
|
|
28
|
-
d,
|
|
29
|
-
m,
|
|
30
|
-
a,
|
|
31
|
-
prev,
|
|
32
|
-
orange,
|
|
33
|
-
current,
|
|
34
|
-
monthGrid
|
|
35
|
-
};
|
|
36
|
-
export {
|
|
37
|
-
cls as c
|
|
38
|
-
};
|