mimir-ui-kit 1.27.0 → 1.27.2
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.
|
@@ -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,
|