@astral/ui 4.77.1 → 4.79.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ToggleButton/ToggleButton.js +2 -2
- package/components/ToggleButton/useLogic/useLogic.d.ts +1 -0
- package/components/ToggleButton/useLogic/useLogic.js +3 -1
- package/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +2 -23
- package/components/ToggleButtonGroup/ToggleButtonGroup.js +5 -4
- package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.d.ts +1 -0
- package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.js +1 -0
- package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.d.ts +1 -1
- package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.js +2 -2
- package/components/ToggleButtonGroup/index.d.ts +1 -0
- package/components/ToggleButtonGroup/public.d.ts +1 -0
- package/components/ToggleButtonGroup/styles.d.ts +5 -0
- package/components/ToggleButtonGroup/styles.js +17 -0
- package/components/ToggleButtonGroup/types.d.ts +23 -0
- package/components/ToggleButtonGroup/types.js +1 -0
- package/components/ToggleButtonGroup/useLogic/index.d.ts +1 -0
- package/components/ToggleButtonGroup/useLogic/index.js +1 -0
- package/components/ToggleButtonGroup/useLogic/useLogic.d.ts +300 -0
- package/components/ToggleButtonGroup/useLogic/useLogic.js +16 -0
- package/components/fileUploading/FileUploader/public.d.ts +1 -1
- package/components/fileUploading/hooks/useFileUploader/useFileUploader.js +9 -6
- package/components/fileUploading/hooks/useSyncFiles/useSyncFiles.d.ts +9 -1
- package/components/fileUploading/hooks/useSyncFiles/useSyncFiles.js +3 -3
- package/components/fileUploading/hooks/useUploadFiles/useUploadFiles.d.ts +5 -2
- package/components/fileUploading/hooks/useUploadFiles/useUploadFiles.js +13 -3
- package/components/fileUploading/types.d.ts +10 -2
- package/hook-form/FormFileUploader/FormFileUploader.d.ts +5 -2
- package/hook-form/FormFileUploader/FormFileUploader.js +8 -3
- package/hook-form/FormPreviewFileUploader/FormPreviewFileUploader.d.ts +10 -3
- package/hook-form/FormPreviewFileUploader/FormPreviewFileUploader.js +7 -3
- package/node/components/ToggleButton/ToggleButton.js +2 -2
- package/node/components/ToggleButton/useLogic/useLogic.d.ts +1 -0
- package/node/components/ToggleButton/useLogic/useLogic.js +3 -1
- package/node/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +2 -23
- package/node/components/ToggleButtonGroup/ToggleButtonGroup.js +4 -3
- package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.d.ts +1 -0
- package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.js +1 -0
- package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.d.ts +1 -1
- package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.js +2 -2
- package/node/components/ToggleButtonGroup/index.d.ts +1 -0
- package/node/components/ToggleButtonGroup/public.d.ts +1 -0
- package/node/components/ToggleButtonGroup/styles.d.ts +5 -0
- package/node/components/ToggleButtonGroup/styles.js +18 -1
- package/node/components/ToggleButtonGroup/types.d.ts +23 -0
- package/node/components/ToggleButtonGroup/types.js +2 -0
- package/node/components/ToggleButtonGroup/useLogic/index.d.ts +1 -0
- package/node/components/ToggleButtonGroup/useLogic/index.js +17 -0
- package/node/components/ToggleButtonGroup/useLogic/useLogic.d.ts +300 -0
- package/node/components/ToggleButtonGroup/useLogic/useLogic.js +20 -0
- package/node/components/fileUploading/FileUploader/public.d.ts +1 -1
- package/node/components/fileUploading/hooks/useFileUploader/useFileUploader.js +9 -6
- package/node/components/fileUploading/hooks/useSyncFiles/useSyncFiles.d.ts +9 -1
- package/node/components/fileUploading/hooks/useSyncFiles/useSyncFiles.js +3 -3
- package/node/components/fileUploading/hooks/useUploadFiles/useUploadFiles.d.ts +5 -2
- package/node/components/fileUploading/hooks/useUploadFiles/useUploadFiles.js +12 -2
- package/node/components/fileUploading/types.d.ts +10 -2
- package/node/hook-form/FormFileUploader/FormFileUploader.d.ts +5 -2
- package/node/hook-form/FormFileUploader/FormFileUploader.js +8 -3
- package/node/hook-form/FormPreviewFileUploader/FormPreviewFileUploader.d.ts +10 -3
- package/node/hook-form/FormPreviewFileUploader/FormPreviewFileUploader.js +7 -3
- package/package.json +1 -1
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import type { FileId, UploadedFileData, UploadFile } from '../../types';
|
|
2
|
+
type ChangeMetaInfo = {
|
|
3
|
+
inputSourceType?: 'fileInput' | 'dragAndDrop';
|
|
4
|
+
};
|
|
2
5
|
type UseUploadFilesParams = {
|
|
3
6
|
/**
|
|
4
7
|
* Список файлов, которые приходят как value в компонент
|
|
@@ -11,7 +14,7 @@ type UseUploadFilesParams = {
|
|
|
11
14
|
/**
|
|
12
15
|
* Функция, вызываемая при изменении списка файлов
|
|
13
16
|
*/
|
|
14
|
-
onChange: ((value: UploadFile[]) => void) | ((value: UploadFile | null) => void);
|
|
17
|
+
onChange: ((value: UploadFile[], metaInfo?: ChangeMetaInfo) => void) | ((value: UploadFile | null, metaInfo?: ChangeMetaInfo) => void);
|
|
15
18
|
/**
|
|
16
19
|
* Функция загрузки файлов на сервер
|
|
17
20
|
* @param fileId - Идентификатор файла
|
|
@@ -31,7 +34,7 @@ type UseUploadFilesParams = {
|
|
|
31
34
|
getErrorMessage?: (fileId: FileId, error: Error) => string;
|
|
32
35
|
};
|
|
33
36
|
export declare const useUploadFiles: ({ isMultiple, files: externalFiles, onChange, onUploadFile, getErrorMessage, }: UseUploadFilesParams) => {
|
|
34
|
-
enqueueFiles: (files: UploadFile[]) => void;
|
|
37
|
+
enqueueFiles: (files: UploadFile[], metaInfo?: ChangeMetaInfo) => void;
|
|
35
38
|
refetchFile: (fileToSend: UploadFile) => void;
|
|
36
39
|
selfFiles: Record<string, UploadFile & import("../../types").SpecificSelfFileParams>;
|
|
37
40
|
setErrorStatusFile: (fileId: string, errorMsg: string) => void;
|
|
@@ -1,13 +1,23 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
|
2
2
|
import { ABORT_ERROR_CODE, UPLOAD_ERROR_MESSAGE } from '../../constants';
|
|
3
3
|
import { useSelfFiles } from '../useSelfFiles';
|
|
4
4
|
import { useSyncFiles } from '../useSyncFiles';
|
|
5
5
|
export const useUploadFiles = ({ isMultiple, files: externalFiles, onChange, onUploadFile, getErrorMessage, }) => {
|
|
6
6
|
const [fileQueue, setFileQueue] = useState([]);
|
|
7
|
+
// Хранит metaInfo последнего пользовательского действия,
|
|
8
|
+
// чтобы передавать его в onChange при синхронизации статусов загрузки
|
|
9
|
+
const metaInfoRef = useRef(undefined);
|
|
7
10
|
const { selfFiles, setLoadingStatusFile, setSuccessStatusFile, setErrorStatusFile, updateFileInfo, } = useSelfFiles();
|
|
8
11
|
// При изменении статусов обновляем внешнее состояние
|
|
9
|
-
useSyncFiles({
|
|
10
|
-
|
|
12
|
+
useSyncFiles({
|
|
13
|
+
isMultiple,
|
|
14
|
+
files: externalFiles,
|
|
15
|
+
selfFiles,
|
|
16
|
+
onChange,
|
|
17
|
+
metaInfoRef,
|
|
18
|
+
});
|
|
19
|
+
const enqueueFiles = (files, metaInfo) => {
|
|
20
|
+
metaInfoRef.current = metaInfo;
|
|
11
21
|
const acceptedFiles = files.filter(({ status }) => !status?.isRestrictionError);
|
|
12
22
|
setFileQueue(acceptedFiles);
|
|
13
23
|
};
|
|
@@ -6,6 +6,12 @@ export type RestrictionFnResult = {
|
|
|
6
6
|
};
|
|
7
7
|
export type RestrictionFn = (value: File) => RestrictionFnResult | undefined;
|
|
8
8
|
export type FileId = string;
|
|
9
|
+
export type FileUploaderMetaInfo = {
|
|
10
|
+
/**
|
|
11
|
+
* Способ загрузки файла (fileInput или dragAndDrop)
|
|
12
|
+
*/
|
|
13
|
+
inputSourceType?: 'fileInput' | 'dragAndDrop';
|
|
14
|
+
};
|
|
9
15
|
/**
|
|
10
16
|
* Расширенная информация о переданном accept
|
|
11
17
|
*/
|
|
@@ -231,6 +237,7 @@ type SingleFileUploaderProps = {
|
|
|
231
237
|
/**
|
|
232
238
|
* Функция, вызываемая при изменении списка файлов (добавление/удаление)
|
|
233
239
|
* @param value - Объект загруженного файла или null при удалении
|
|
240
|
+
* @param metaInfo.inputSourceType - Способ загрузки файла (fileInput или dragAndDrop)
|
|
234
241
|
* @remarks
|
|
235
242
|
* Вызывается в следующих случаях:
|
|
236
243
|
* - При добавлении нового файла через диалог выбора или drag-n-drop
|
|
@@ -238,7 +245,7 @@ type SingleFileUploaderProps = {
|
|
|
238
245
|
* - При изменении статуса загрузки файла (loading/success/error)
|
|
239
246
|
* - При обновлении информации о файле после успешной загрузки
|
|
240
247
|
*/
|
|
241
|
-
onChange: (value: UploadFile | null) => void;
|
|
248
|
+
onChange: (value: UploadFile | null, metaInfo?: FileUploaderMetaInfo) => void;
|
|
242
249
|
} & BaseFileUploaderProps;
|
|
243
250
|
type MultipleFileUploaderProps = {
|
|
244
251
|
value: UploadFile[];
|
|
@@ -253,6 +260,7 @@ type MultipleFileUploaderProps = {
|
|
|
253
260
|
/**
|
|
254
261
|
* Функция, вызываемая при изменении списка файлов (добавление/удаление)
|
|
255
262
|
* @param value - Массив объектов загруженных файлов
|
|
263
|
+
* @param metaInfo.inputSourceType - Способ загрузки файла (fileInput или dragAndDrop)
|
|
256
264
|
* @remarks
|
|
257
265
|
* Вызывается в следующих случаях:
|
|
258
266
|
* - При добавлении новых файлов через диалог выбора или drag-n-drop
|
|
@@ -260,7 +268,7 @@ type MultipleFileUploaderProps = {
|
|
|
260
268
|
* - При изменении статуса загрузки файла (loading/success/error)
|
|
261
269
|
* - При обновлении информации о файле после успешной загрузки
|
|
262
270
|
*/
|
|
263
|
-
onChange: (value: UploadFile[]) => void;
|
|
271
|
+
onChange: (value: UploadFile[], metaInfo?: FileUploaderMetaInfo) => void;
|
|
264
272
|
} & BaseFileUploaderProps;
|
|
265
273
|
export type FileUploaderProps = MultipleFileUploaderProps | SingleFileUploaderProps;
|
|
266
274
|
export type SpecificSelfFileParams = {
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { type FileUploaderNotify, type FileUploaderProps, type UploadFile } from '../../components/fileUploading/FileUploader';
|
|
2
|
+
import { type FileUploaderMetaInfo, type FileUploaderNotify, type FileUploaderProps, type UploadFile } from '../../components/fileUploading/FileUploader';
|
|
3
3
|
import { type WithFormFieldProps } from '../types';
|
|
4
|
-
type
|
|
4
|
+
export type FormFileUploaderMetaInfo = FileUploaderMetaInfo;
|
|
5
|
+
type BaseFileUploaderProps = Omit<FileUploaderProps, 'value' | 'isMultiple' | 'maxFileCount' | 'notify' | 'onChange'> & {
|
|
6
|
+
onChange?: (value: FormFileUploaderValue | FormFileUploaderValue[], metaInfo?: FormFileUploaderMetaInfo) => void;
|
|
7
|
+
};
|
|
5
8
|
type SingleFileUploaderProps = {
|
|
6
9
|
isMultiple?: false;
|
|
7
10
|
maxFileCount?: never;
|
|
@@ -5,11 +5,16 @@ import { useFormFieldProps } from '../useFormFieldProps';
|
|
|
5
5
|
/**
|
|
6
6
|
* FileUploader для формы
|
|
7
7
|
*/
|
|
8
|
-
const FormFileUploaderInner = (props, ref) => {
|
|
9
|
-
const { error, ...fieldProps } = useFormFieldProps(props);
|
|
8
|
+
const FormFileUploaderInner = ({ onChange: propsOnChange, ...props }, ref) => {
|
|
9
|
+
const { error, onChange, ...fieldProps } = useFormFieldProps(props);
|
|
10
|
+
const handleChange = (value, metaInfo) => {
|
|
11
|
+
onChange(value);
|
|
12
|
+
propsOnChange?.(value, metaInfo);
|
|
13
|
+
};
|
|
14
|
+
return (
|
|
10
15
|
// biome-ignore lint/suspicious/noTsIgnore: Ошибка типизации при пробросе пропсов: isMultiple
|
|
11
16
|
// @ts-ignore
|
|
12
17
|
// TODO https://track.astral.ru/soft/browse/UIKIT-1926
|
|
13
|
-
|
|
18
|
+
_jsx(FileUploader, { isError: error, onChange: handleChange, ...fieldProps, ref: ref }));
|
|
14
19
|
};
|
|
15
20
|
export const FormFileUploader = forwardRefWithGeneric(FormFileUploaderInner);
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import type { ForwardedRef } from 'react';
|
|
2
2
|
import { type PreviewFileUploaderProps } from '../../components/fileUploading/PreviewFileUploader';
|
|
3
|
+
import { type FileUploaderMetaInfo, type UploadFile } from '../../components/fileUploading/types';
|
|
3
4
|
import { type WithFormFieldProps } from '../types';
|
|
4
|
-
export type
|
|
5
|
+
export type FormPreviewFileUploaderValue = UploadFile;
|
|
6
|
+
export type FormPreviewFileUploaderMetaInfo = FileUploaderMetaInfo;
|
|
7
|
+
export type FormPreviewFileUploaderProps<TFieldValues extends object> = WithFormFieldProps<Omit<PreviewFileUploaderProps, 'value' | 'onChange'>, TFieldValues> & {
|
|
8
|
+
onChange?: (value: FormPreviewFileUploaderValue | null, metaInfo?: FormPreviewFileUploaderMetaInfo) => void;
|
|
9
|
+
};
|
|
5
10
|
/**
|
|
6
11
|
* PreviewFileUploader для формы
|
|
7
12
|
*/
|
|
8
|
-
export declare const FormPreviewFileUploaderInner: <TFieldValues extends object>(props: FormPreviewFileUploaderProps<TFieldValues>, ref: ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export declare const FormPreviewFileUploader: <TFieldValues extends object>(props: Omit<Omit<import("../..").UsePreviewFileUploaderParams, "onChange" | "value">, "error" | "name"> & Omit<import("react-hook-form").UseControllerProps<TFieldValues>, "rules"> &
|
|
13
|
+
export declare const FormPreviewFileUploaderInner: <TFieldValues extends object>({ onChange: propsOnChange, ...props }: FormPreviewFileUploaderProps<TFieldValues>, ref: ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const FormPreviewFileUploader: <TFieldValues extends object>(props: Omit<Omit<import("../..").UsePreviewFileUploaderParams, "onChange" | "value">, "error" | "name"> & Omit<import("react-hook-form").UseControllerProps<TFieldValues>, "rules"> & {
|
|
15
|
+
onChange?: ((value: FormPreviewFileUploaderValue | null, metaInfo?: FormPreviewFileUploaderMetaInfo) => void) | undefined;
|
|
16
|
+
} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
|
|
@@ -5,8 +5,12 @@ import { useFormFieldProps } from '../useFormFieldProps';
|
|
|
5
5
|
/**
|
|
6
6
|
* PreviewFileUploader для формы
|
|
7
7
|
*/
|
|
8
|
-
export const FormPreviewFileUploaderInner = (props, ref) => {
|
|
9
|
-
const { error, ...fieldProps } = useFormFieldProps(props);
|
|
10
|
-
|
|
8
|
+
export const FormPreviewFileUploaderInner = ({ onChange: propsOnChange, ...props }, ref) => {
|
|
9
|
+
const { error, onChange, ...fieldProps } = useFormFieldProps(props);
|
|
10
|
+
const handleChange = (value, metaInfo) => {
|
|
11
|
+
onChange(value);
|
|
12
|
+
propsOnChange?.(value, metaInfo);
|
|
13
|
+
};
|
|
14
|
+
return (_jsx(PreviewFileUploader, { isError: error, onChange: handleChange, ...fieldProps, ref: ref }));
|
|
11
15
|
};
|
|
12
16
|
export const FormPreviewFileUploader = forwardRefWithGeneric(FormPreviewFileUploaderInner);
|
|
@@ -6,6 +6,6 @@ const react_1 = require("react");
|
|
|
6
6
|
const styles_1 = require("./styles");
|
|
7
7
|
const useLogic_1 = require("./useLogic");
|
|
8
8
|
exports.ToggleButton = (0, react_1.forwardRef)((props, ref) => {
|
|
9
|
-
const { isVisibleCounter, children, disabled, counterLabel, color, selected, restProps, variant, } = (0, useLogic_1.useLogic)(props);
|
|
10
|
-
return ((0, jsx_runtime_1.jsxs)(styles_1.StyledToggleButton, { ref: ref, disabled: disabled, selected: selected, ...restProps, "$color": color, "$variant": variant, children: [children, isVisibleCounter && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", counterLabel] })] }));
|
|
9
|
+
const { isVisibleCounter, children, disabled, counterLabel, color, selected, isSelected, restProps, variant, } = (0, useLogic_1.useLogic)(props);
|
|
10
|
+
return ((0, jsx_runtime_1.jsxs)(styles_1.StyledToggleButton, { ref: ref, disabled: disabled, selected: selected, ...restProps, "$color": color, "$variant": variant, "aria-selected": isSelected, children: [children, isVisibleCounter && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", counterLabel] })] }));
|
|
11
11
|
});
|
|
@@ -8,6 +8,7 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
|
|
|
8
8
|
disabled: boolean | undefined;
|
|
9
9
|
color: "primary" | "success" | "warning" | "error" | "grey";
|
|
10
10
|
selected: boolean | undefined;
|
|
11
|
+
isSelected: boolean;
|
|
11
12
|
counterLabel: string | number | undefined;
|
|
12
13
|
restProps: {
|
|
13
14
|
classes?: (Partial<import("@mui/material").ToggleButtonClasses> & Partial<import("@mui/material").ClassNameMap<never>>) | undefined;
|
|
@@ -5,7 +5,7 @@ const react_1 = require("react");
|
|
|
5
5
|
const ToggleButtonGroup_1 = require("../../ToggleButtonGroup");
|
|
6
6
|
const useLogic = ({ selected, color = 'primary', counter, children, disabled, counterMax = 99, ...restProps }) => {
|
|
7
7
|
const isVisibleCounter = Boolean(counter);
|
|
8
|
-
const { variant } = (0, react_1.useContext)(ToggleButtonGroup_1.ToggleButtonGroupContext);
|
|
8
|
+
const { variant, value } = (0, react_1.useContext)(ToggleButtonGroup_1.ToggleButtonGroupContext);
|
|
9
9
|
const counterLabel = (0, react_1.useMemo)(() => {
|
|
10
10
|
if (!isVisibleCounter) {
|
|
11
11
|
return undefined;
|
|
@@ -17,12 +17,14 @@ const useLogic = ({ selected, color = 'primary', counter, children, disabled, co
|
|
|
17
17
|
}
|
|
18
18
|
return counterValue;
|
|
19
19
|
}, [isVisibleCounter, counter, counterMax]);
|
|
20
|
+
const isSelected = restProps.value === value;
|
|
20
21
|
return {
|
|
21
22
|
isVisibleCounter,
|
|
22
23
|
children,
|
|
23
24
|
disabled,
|
|
24
25
|
color,
|
|
25
26
|
selected,
|
|
27
|
+
isSelected,
|
|
26
28
|
counterLabel,
|
|
27
29
|
restProps,
|
|
28
30
|
variant,
|
|
@@ -1,24 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
import { type
|
|
3
|
-
import type { WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
|
|
4
|
-
export type ToggleButtonGroupProps = WithoutEmotionSpecific<Omit<MuiToggleButtonGroupProps, 'orientation'>> & {
|
|
5
|
-
/**
|
|
6
|
-
* Если `true`, компонент будет отображаться в состоянии ошибки
|
|
7
|
-
*/
|
|
8
|
-
isError?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* Текстовая информация об ошибке, будет отображен в тултипе при isError: true
|
|
11
|
-
*/
|
|
12
|
-
errorText?: ReactNode;
|
|
13
|
-
/**
|
|
14
|
-
* Определяет стиль отображения группы кнопок
|
|
15
|
-
*
|
|
16
|
-
* - `transparent` — прозрачный фон кнопок ToggleButton
|
|
17
|
-
*
|
|
18
|
-
* - `plain` — белый фон кнопок ToggleButton
|
|
19
|
-
*
|
|
20
|
-
* @default transparent
|
|
21
|
-
*/
|
|
22
|
-
variant?: 'transparent' | 'plain';
|
|
23
|
-
};
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type ToggleButtonGroupProps } from './types';
|
|
24
3
|
export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<Omit<ToggleButtonGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -6,7 +6,8 @@ const react_1 = require("react");
|
|
|
6
6
|
const Tooltip_1 = require("../Tooltip");
|
|
7
7
|
const styles_1 = require("./styles");
|
|
8
8
|
const ToggleButtonGroupContext_1 = require("./ToggleButtonGroupContext");
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
const useLogic_1 = require("./useLogic");
|
|
10
|
+
exports.ToggleButtonGroup = (0, react_1.forwardRef)((props, forwardedRef) => {
|
|
11
|
+
const { size, isError, variant, restProps, title, containerRef } = (0, useLogic_1.useLogic)(props, forwardedRef);
|
|
12
|
+
return ((0, jsx_runtime_1.jsx)(ToggleButtonGroupContext_1.ToggleButtonGroupContextProvider, { isError: isError, variant: variant, value: restProps.value, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: title, followCursor: true, arrow: false, children: (0, jsx_runtime_1.jsx)(styles_1.ScrollContainer, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleButtonGroup, { ref: containerRef, size: size, ...restProps, "$isError": isError }) }) }) }));
|
|
12
13
|
});
|
|
@@ -3,4 +3,4 @@ import { type ToggleButtonGroupContextProps } from '../ToggleButtonGroupContext'
|
|
|
3
3
|
export type Props = ToggleButtonGroupContextProps & {
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
};
|
|
6
|
-
export declare const ToggleButtonGroupContextProvider: ({ children, isError, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const ToggleButtonGroupContextProvider: ({ children, isError, variant, value, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.ToggleButtonGroupContextProvider = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const ToggleButtonGroupContext_1 = require("../ToggleButtonGroupContext");
|
|
6
|
-
const ToggleButtonGroupContextProvider = ({ children, isError, variant, }) => {
|
|
7
|
-
return ((0, jsx_runtime_1.jsx)(ToggleButtonGroupContext_1.ToggleButtonGroupContext.Provider, { value: { isError, variant }, children: children }));
|
|
6
|
+
const ToggleButtonGroupContextProvider = ({ children, isError, variant, value, }) => {
|
|
7
|
+
return ((0, jsx_runtime_1.jsx)(ToggleButtonGroupContext_1.ToggleButtonGroupContext.Provider, { value: { isError, variant, value }, children: children }));
|
|
8
8
|
};
|
|
9
9
|
exports.ToggleButtonGroupContextProvider = ToggleButtonGroupContextProvider;
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const ScrollContainer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
|
|
3
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
5
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
1
6
|
export declare const StyledToggleButtonGroup: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("@mui/material/ToggleButtonGroup").ToggleButtonGroupProps & {
|
|
2
7
|
theme?: import("@emotion/react").Theme | undefined;
|
|
3
8
|
} & {
|
|
@@ -3,14 +3,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.StyledToggleButtonGroup = void 0;
|
|
6
|
+
exports.StyledToggleButtonGroup = exports.ScrollContainer = void 0;
|
|
7
7
|
const ToggleButtonGroup_1 = __importDefault(require("@mui/material/ToggleButtonGroup"));
|
|
8
8
|
const styled_1 = require("../styled");
|
|
9
|
+
exports.ScrollContainer = styled_1.styled.div `
|
|
10
|
+
overflow-x: auto;
|
|
11
|
+
|
|
12
|
+
${({ theme }) => theme.breakpoints.down('sm')} {
|
|
13
|
+
/* Убираем видимую полосу прокрутки в firefox */
|
|
14
|
+
scrollbar-width: none;
|
|
15
|
+
|
|
16
|
+
width: 100%;
|
|
17
|
+
|
|
18
|
+
/* Убираем видимую полосу прокрутки в chrome */
|
|
19
|
+
&::-webkit-scrollbar {
|
|
20
|
+
display: none;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
9
24
|
exports.StyledToggleButtonGroup = (0, styled_1.styled)(ToggleButtonGroup_1.default, {
|
|
10
25
|
shouldForwardProp: (prop) => !['$isError'].includes(prop),
|
|
11
26
|
}) `
|
|
12
27
|
position: relative;
|
|
13
28
|
|
|
29
|
+
white-space: nowrap;
|
|
30
|
+
|
|
14
31
|
/* Border для ToggleButtonGroup рисуется через ::after что бы не нарушать обводку кнопок внутри компонента и корректно отображать состояние ошибки */
|
|
15
32
|
&::after {
|
|
16
33
|
pointer-events: none;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
|
|
2
|
+
import { type ReactNode } from 'react';
|
|
3
|
+
import type { WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
|
|
4
|
+
export type ToggleButtonGroupProps = WithoutEmotionSpecific<Omit<MuiToggleButtonGroupProps, 'orientation'>> & {
|
|
5
|
+
/**
|
|
6
|
+
* Если `true`, компонент будет отображаться в состоянии ошибки
|
|
7
|
+
*/
|
|
8
|
+
isError?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Текстовая информация об ошибке, будет отображен в тултипе при isError: true
|
|
11
|
+
*/
|
|
12
|
+
errorText?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Определяет стиль отображения группы кнопок
|
|
15
|
+
*
|
|
16
|
+
* - `transparent` — прозрачный фон кнопок ToggleButton
|
|
17
|
+
*
|
|
18
|
+
* - `plain` — белый фон кнопок ToggleButton
|
|
19
|
+
*
|
|
20
|
+
* @default transparent
|
|
21
|
+
*/
|
|
22
|
+
variant?: 'transparent' | 'plain';
|
|
23
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './useLogic';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./useLogic"), exports);
|