mimir-ui-kit 1.27.0 → 1.27.2
Sign up to get free protection for your applications and to get access to all the features.
@@ -1,7 +1,8 @@
|
|
1
|
+
import { ComponentProps } from 'react';
|
1
2
|
import { TCommonStepsProps } from './types';
|
2
3
|
import { TStepsZone } from './types.ts';
|
3
4
|
|
4
|
-
export type TProps = TCommonStepsProps & {
|
5
|
+
export type TProps = TCommonStepsProps & Omit<ComponentProps<'div'>, 'onClick'> & {
|
5
6
|
/**
|
6
7
|
* Класс, применяемый к корневому элементу
|
7
8
|
*/
|
@@ -46,50 +47,12 @@ export type TProps = TCommonStepsProps & {
|
|
46
47
|
* Класс для иконки шага
|
47
48
|
*/
|
48
49
|
classNameIconStep?: string;
|
49
|
-
};
|
50
|
-
export declare const Steps: import('react').ForwardRefExoticComponent<TCommonStepsProps & {
|
51
|
-
/**
|
52
|
-
* Класс, применяемый к корневому элементу
|
53
|
-
*/
|
54
|
-
rootClassName?: string;
|
55
|
-
/**
|
56
|
-
* Класс, применяемый к шагам
|
57
|
-
*/
|
58
|
-
stepClassName?: string;
|
59
|
-
/**
|
60
|
-
* Количество шагов.
|
61
|
-
*/
|
62
|
-
quantity: number;
|
63
|
-
/**
|
64
|
-
* Текущий шаг
|
65
|
-
*/
|
66
|
-
current?: number;
|
67
|
-
/**
|
68
|
-
* Есть ли возможность переключать шаги по клику
|
69
|
-
*/
|
70
|
-
editable?: boolean;
|
71
|
-
/**
|
72
|
-
* Обработчик клика на шаг
|
73
|
-
*/
|
74
|
-
onClick?: (step: number) => void;
|
75
|
-
/**
|
76
|
-
* Отключено / включено взаимодействие с шагами
|
77
|
-
*/
|
78
|
-
disabled?: boolean;
|
79
|
-
/**
|
80
|
-
* Цвет оставшихся шагов
|
81
|
-
*/
|
82
|
-
zones?: TStepsZone[];
|
83
50
|
/**
|
84
|
-
*
|
85
|
-
*/
|
86
|
-
unselectedColor?: string;
|
87
|
-
/**
|
88
|
-
* Адаптивный шаг
|
51
|
+
* Кастомные размеры шагов.
|
89
52
|
*/
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
53
|
+
customSize?: {
|
54
|
+
width?: number;
|
55
|
+
height?: number;
|
56
|
+
};
|
57
|
+
};
|
58
|
+
export declare const Steps: import('react').ForwardRefExoticComponent<Omit<TProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
@@ -35,11 +35,13 @@ const Steps = forwardRef(
|
|
35
35
|
editable: editable2 = false,
|
36
36
|
size = EStepsSize.M,
|
37
37
|
onClick,
|
38
|
+
customSize,
|
38
39
|
resizable: resizable2,
|
39
40
|
disabled = false,
|
40
41
|
zones = [{ color: "#ff0000", to: quantity }],
|
41
42
|
unselectedColor = "#ffffff",
|
42
|
-
classNameIconStep
|
43
|
+
classNameIconStep,
|
44
|
+
...otherProps
|
43
45
|
} = props;
|
44
46
|
const idPrefix = useId();
|
45
47
|
const [step2, setStep] = useState(current);
|
@@ -77,7 +79,11 @@ const Steps = forwardRef(
|
|
77
79
|
"button",
|
78
80
|
{
|
79
81
|
type: "button",
|
80
|
-
style: {
|
82
|
+
style: {
|
83
|
+
backgroundColor: resizable2 ? color : void 0,
|
84
|
+
color,
|
85
|
+
height: customSize == null ? void 0 : customSize.height
|
86
|
+
},
|
81
87
|
id: `${idPrefix}${ID_SEPARATOR}${idx}`,
|
82
88
|
className: classNames(cls.step, cls[size], stepClassName, {
|
83
89
|
[cls.editable]: editable2 && !disabled,
|
@@ -102,6 +108,7 @@ const Steps = forwardRef(
|
|
102
108
|
return /* @__PURE__ */ jsx(
|
103
109
|
"div",
|
104
110
|
{
|
111
|
+
...otherProps,
|
105
112
|
className: classNames(
|
106
113
|
cls.container,
|
107
114
|
{
|
@@ -61,10 +61,21 @@ export type TProps = TCommonVoteProps & {
|
|
61
61
|
unselected: string;
|
62
62
|
selected: string;
|
63
63
|
};
|
64
|
+
/**
|
65
|
+
* Адаптивный шаг
|
66
|
+
*/
|
67
|
+
resizable?: boolean;
|
64
68
|
/**
|
65
69
|
* Класс для иконки шага
|
66
70
|
*/
|
67
71
|
classNameIconStep?: string;
|
72
|
+
/**
|
73
|
+
* Кастомные размеры шагов.
|
74
|
+
*/
|
75
|
+
customSize?: {
|
76
|
+
width?: number;
|
77
|
+
height?: number;
|
78
|
+
};
|
68
79
|
};
|
69
80
|
export declare const Vote: import('react').ForwardRefExoticComponent<TCommonVoteProps & {
|
70
81
|
/**
|
@@ -126,8 +137,19 @@ export declare const Vote: import('react').ForwardRefExoticComponent<TCommonVote
|
|
126
137
|
unselected: string;
|
127
138
|
selected: string;
|
128
139
|
};
|
140
|
+
/**
|
141
|
+
* Адаптивный шаг
|
142
|
+
*/
|
143
|
+
resizable?: boolean;
|
129
144
|
/**
|
130
145
|
* Класс для иконки шага
|
131
146
|
*/
|
132
147
|
classNameIconStep?: string;
|
148
|
+
/**
|
149
|
+
* Кастомные размеры шагов.
|
150
|
+
*/
|
151
|
+
customSize?: {
|
152
|
+
width?: number;
|
153
|
+
height?: number;
|
154
|
+
};
|
133
155
|
} & import('react').RefAttributes<HTMLDivElement>>;
|
@@ -3,7 +3,7 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import { forwardRef, useState, useEffect } from "react";
|
4
4
|
import { DEFAULT_TITLE, EVoteSize, ZERO_VALUE } from "./constants.js";
|
5
5
|
import { Steps } from "../Steps/Steps.js";
|
6
|
-
import { ZERO_STEP } from "../Steps/constants.js";
|
6
|
+
import { ZERO_STEP, StepSize } from "../Steps/constants.js";
|
7
7
|
import '../../assets/Vote.css';const container = "_container_1akd9_2";
|
8
8
|
const title = "_title_1akd9_9";
|
9
9
|
const score = "_score_1akd9_16";
|
@@ -26,6 +26,8 @@ const Vote = forwardRef((props, ref) => {
|
|
26
26
|
current = ZERO_STEP,
|
27
27
|
size = EVoteSize.M,
|
28
28
|
onClick,
|
29
|
+
resizable,
|
30
|
+
customSize,
|
29
31
|
disabled = false,
|
30
32
|
zones = [{ color: "#ff0000", to: quantity }],
|
31
33
|
unselectedColor = "#ffffff",
|
@@ -44,7 +46,8 @@ const Vote = forwardRef((props, ref) => {
|
|
44
46
|
setScore(step);
|
45
47
|
onClick && onClick(step);
|
46
48
|
};
|
47
|
-
const backgroundColor = isZeroStep ? unselectedColor : ((_a = zones == null ? void 0 : zones.find((zone) => score2 <= zone.to)) == null ? void 0 : _a.color)
|
49
|
+
const backgroundColor = isZeroStep ? unselectedColor : ((_a = zones == null ? void 0 : zones.find((zone) => score2 <= zone.to)) == null ? void 0 : _a.color) ?? unselectedColor;
|
50
|
+
const maxContainerWidth = resizable ? quantity * ((customSize == null ? void 0 : customSize.width) ?? StepSize[size].width) : void 0;
|
48
51
|
return /* @__PURE__ */ jsxs("div", { className: classNames(cls.container, rootClassName), ref, children: [
|
49
52
|
!withoutTitle && /* @__PURE__ */ jsx("p", { className: classNames(cls.title, titleClassName), children: title2 }),
|
50
53
|
/* @__PURE__ */ jsx(
|
@@ -61,12 +64,17 @@ const Vote = forwardRef((props, ref) => {
|
|
61
64
|
/* @__PURE__ */ jsx(
|
62
65
|
Steps,
|
63
66
|
{
|
67
|
+
style: {
|
68
|
+
maxWidth: maxContainerWidth
|
69
|
+
},
|
70
|
+
customSize,
|
64
71
|
rootClassName: stepsRootClassName,
|
65
72
|
stepClassName: stepsStepClassName,
|
66
73
|
quantity,
|
67
|
-
size,
|
74
|
+
size: EVoteSize.L,
|
68
75
|
current: score2,
|
69
76
|
editable: true,
|
77
|
+
resizable,
|
70
78
|
disabled,
|
71
79
|
onClick: handleStepsClick,
|
72
80
|
zones,
|