@salutejs/plasma-new-hope 0.148.0-canary.1443.10923396048.0 → 0.149.0-canary.1418.10940499394.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Mask/Mask.js +46 -0
- package/cjs/components/Mask/Mask.js.map +1 -0
- package/cjs/components/TextField/TextField.js +3 -1
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/index.js +2 -0
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Mask/Mask.js +56 -0
- package/emotion/cjs/components/Mask/Mask.template-doc.mdx +125 -0
- package/emotion/cjs/components/Mask/Mask.types.js +5 -0
- package/emotion/cjs/components/Mask/index.js +12 -0
- package/emotion/cjs/components/TextField/TextField.js +4 -2
- package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.js +9 -0
- package/emotion/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +127 -0
- package/emotion/cjs/examples/plasma_web/components/Mask/Mask.js +9 -0
- package/emotion/cjs/examples/plasma_web/components/Mask/Mask.stories.tsx +125 -0
- package/emotion/cjs/index.js +11 -0
- package/emotion/es/components/Mask/Mask.js +46 -0
- package/emotion/es/components/Mask/Mask.template-doc.mdx +125 -0
- package/emotion/es/components/Mask/Mask.types.js +1 -0
- package/emotion/es/components/Mask/index.js +1 -0
- package/emotion/es/components/TextField/TextField.js +4 -2
- package/emotion/es/examples/plasma_b2c/components/Mask/Mask.js +3 -0
- package/emotion/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +127 -0
- package/emotion/es/examples/plasma_web/components/Mask/Mask.js +3 -0
- package/emotion/es/examples/plasma_web/components/Mask/Mask.stories.tsx +125 -0
- package/emotion/es/index.js +2 -1
- package/es/components/Mask/Mask.js +42 -0
- package/es/components/Mask/Mask.js.map +1 -0
- package/es/components/TextField/TextField.js +3 -1
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/index.js +1 -0
- package/es/index.js.map +1 -1
- package/package.json +6 -4
- package/styled-components/cjs/components/Mask/Mask.js +56 -0
- package/styled-components/cjs/components/Mask/Mask.template-doc.mdx +125 -0
- package/styled-components/cjs/components/Mask/Mask.types.js +5 -0
- package/styled-components/cjs/components/Mask/index.js +12 -0
- package/styled-components/cjs/components/TextField/TextField.js +3 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.js +9 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Mask/Mask.stories.tsx +127 -0
- package/styled-components/cjs/examples/plasma_web/components/Mask/Mask.js +9 -0
- package/styled-components/cjs/examples/plasma_web/components/Mask/Mask.stories.tsx +125 -0
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/es/components/Mask/Mask.js +46 -0
- package/styled-components/es/components/Mask/Mask.template-doc.mdx +125 -0
- package/styled-components/es/components/Mask/Mask.types.js +1 -0
- package/styled-components/es/components/Mask/index.js +1 -0
- package/styled-components/es/components/TextField/TextField.js +3 -1
- package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.js +3 -0
- package/styled-components/es/examples/plasma_b2c/components/Mask/Mask.stories.tsx +127 -0
- package/styled-components/es/examples/plasma_web/components/Mask/Mask.js +3 -0
- package/styled-components/es/examples/plasma_web/components/Mask/Mask.stories.tsx +125 -0
- package/styled-components/es/index.js +2 -1
- package/types/components/Mask/Mask.d.ts +5 -0
- package/types/components/Mask/Mask.d.ts.map +1 -0
- package/types/components/Mask/Mask.types.d.ts +62 -0
- package/types/components/Mask/Mask.types.d.ts.map +1 -0
- package/types/components/Mask/index.d.ts +2 -0
- package/types/components/Mask/index.d.ts.map +1 -0
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Mask/Mask.d.ts +191 -0
- package/types/examples/plasma_b2c/components/Mask/Mask.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Mask/Mask.d.ts +191 -0
- package/types/examples/plasma_web/components/Mask/Mask.d.ts.map +1 -0
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
- package/emotion/cjs/components/Steps/Steps.template-doc.mdx +0 -61
- package/emotion/es/components/Steps/Steps.template-doc.mdx +0 -61
- package/styled-components/cjs/components/Steps/Steps.template-doc.mdx +0 -61
- package/styled-components/es/components/Steps/Steps.template-doc.mdx +0 -61
@@ -0,0 +1,191 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
export declare const Mask: import("react").ForwardRefExoticComponent<(Omit<import("../../../../engines/types").PropsType<{
|
3
|
+
view: {
|
4
|
+
default: import("@linaria/core").LinariaClassName;
|
5
|
+
positive: import("@linaria/core").LinariaClassName;
|
6
|
+
warning: import("@linaria/core").LinariaClassName;
|
7
|
+
negative: import("@linaria/core").LinariaClassName;
|
8
|
+
};
|
9
|
+
size: {
|
10
|
+
l: import("@linaria/core").LinariaClassName;
|
11
|
+
m: import("@linaria/core").LinariaClassName;
|
12
|
+
s: import("@linaria/core").LinariaClassName;
|
13
|
+
xs: import("@linaria/core").LinariaClassName;
|
14
|
+
};
|
15
|
+
labelPlacement: {
|
16
|
+
inner: import("@linaria/core").LinariaClassName;
|
17
|
+
outer: import("@linaria/core").LinariaClassName;
|
18
|
+
};
|
19
|
+
disabled: {
|
20
|
+
true: import("@linaria/core").LinariaClassName;
|
21
|
+
};
|
22
|
+
readOnly: {
|
23
|
+
true: import("@linaria/core").LinariaClassName;
|
24
|
+
};
|
25
|
+
}> & {
|
26
|
+
size?: string | undefined;
|
27
|
+
view?: string | undefined;
|
28
|
+
readOnly?: boolean | undefined;
|
29
|
+
disabled?: boolean | undefined;
|
30
|
+
} & {
|
31
|
+
label?: string | undefined;
|
32
|
+
labelPlacement?: "inner" | "outer" | undefined;
|
33
|
+
leftHelper?: string | undefined;
|
34
|
+
contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
35
|
+
contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
36
|
+
textBefore?: string | undefined;
|
37
|
+
textAfter?: string | undefined;
|
38
|
+
onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
|
39
|
+
} & {
|
40
|
+
requiredPlacement?: "left" | "right" | undefined;
|
41
|
+
} & {
|
42
|
+
required: true;
|
43
|
+
optional?: false | undefined;
|
44
|
+
} & {
|
45
|
+
chips?: undefined;
|
46
|
+
onChangeChips?: undefined;
|
47
|
+
enumerationType?: "plain" | undefined;
|
48
|
+
onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
|
49
|
+
} & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement> & import("../../../../components/Mask/Mask.types").MaskProps, "ref"> | Omit<import("../../../../engines/types").PropsType<{
|
50
|
+
view: {
|
51
|
+
default: import("@linaria/core").LinariaClassName;
|
52
|
+
positive: import("@linaria/core").LinariaClassName;
|
53
|
+
warning: import("@linaria/core").LinariaClassName;
|
54
|
+
negative: import("@linaria/core").LinariaClassName;
|
55
|
+
};
|
56
|
+
size: {
|
57
|
+
l: import("@linaria/core").LinariaClassName;
|
58
|
+
m: import("@linaria/core").LinariaClassName;
|
59
|
+
s: import("@linaria/core").LinariaClassName;
|
60
|
+
xs: import("@linaria/core").LinariaClassName;
|
61
|
+
};
|
62
|
+
labelPlacement: {
|
63
|
+
inner: import("@linaria/core").LinariaClassName;
|
64
|
+
outer: import("@linaria/core").LinariaClassName;
|
65
|
+
};
|
66
|
+
disabled: {
|
67
|
+
true: import("@linaria/core").LinariaClassName;
|
68
|
+
};
|
69
|
+
readOnly: {
|
70
|
+
true: import("@linaria/core").LinariaClassName;
|
71
|
+
};
|
72
|
+
}> & {
|
73
|
+
size?: string | undefined;
|
74
|
+
view?: string | undefined;
|
75
|
+
readOnly?: boolean | undefined;
|
76
|
+
disabled?: boolean | undefined;
|
77
|
+
} & {
|
78
|
+
label?: string | undefined;
|
79
|
+
labelPlacement?: "inner" | "outer" | undefined;
|
80
|
+
leftHelper?: string | undefined;
|
81
|
+
contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
82
|
+
contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
83
|
+
textBefore?: string | undefined;
|
84
|
+
textAfter?: string | undefined;
|
85
|
+
onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
|
86
|
+
} & {
|
87
|
+
requiredPlacement?: "left" | "right" | undefined;
|
88
|
+
} & {
|
89
|
+
required: true;
|
90
|
+
optional?: false | undefined;
|
91
|
+
} & {
|
92
|
+
enumerationType: "chip";
|
93
|
+
onSearch?: undefined;
|
94
|
+
chips?: import("../../../../components/TextField/TextField.types").TextFieldPrimitiveValue[] | undefined;
|
95
|
+
onChangeChips?: ((value: import("../../../../components/TextField/TextField.types").TextFieldPrimitiveValue[]) => void) | undefined;
|
96
|
+
} & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement> & import("../../../../components/Mask/Mask.types").MaskProps, "ref"> | Omit<import("../../../../engines/types").PropsType<{
|
97
|
+
view: {
|
98
|
+
default: import("@linaria/core").LinariaClassName;
|
99
|
+
positive: import("@linaria/core").LinariaClassName;
|
100
|
+
warning: import("@linaria/core").LinariaClassName;
|
101
|
+
negative: import("@linaria/core").LinariaClassName;
|
102
|
+
};
|
103
|
+
size: {
|
104
|
+
l: import("@linaria/core").LinariaClassName;
|
105
|
+
m: import("@linaria/core").LinariaClassName;
|
106
|
+
s: import("@linaria/core").LinariaClassName;
|
107
|
+
xs: import("@linaria/core").LinariaClassName;
|
108
|
+
};
|
109
|
+
labelPlacement: {
|
110
|
+
inner: import("@linaria/core").LinariaClassName;
|
111
|
+
outer: import("@linaria/core").LinariaClassName;
|
112
|
+
};
|
113
|
+
disabled: {
|
114
|
+
true: import("@linaria/core").LinariaClassName;
|
115
|
+
};
|
116
|
+
readOnly: {
|
117
|
+
true: import("@linaria/core").LinariaClassName;
|
118
|
+
};
|
119
|
+
}> & {
|
120
|
+
size?: string | undefined;
|
121
|
+
view?: string | undefined;
|
122
|
+
readOnly?: boolean | undefined;
|
123
|
+
disabled?: boolean | undefined;
|
124
|
+
} & {
|
125
|
+
label?: string | undefined;
|
126
|
+
labelPlacement?: "inner" | "outer" | undefined;
|
127
|
+
leftHelper?: string | undefined;
|
128
|
+
contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
129
|
+
contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
130
|
+
textBefore?: string | undefined;
|
131
|
+
textAfter?: string | undefined;
|
132
|
+
onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
|
133
|
+
} & {
|
134
|
+
requiredPlacement?: "left" | "right" | undefined;
|
135
|
+
} & {
|
136
|
+
optional?: true | undefined;
|
137
|
+
required?: false | undefined;
|
138
|
+
} & {
|
139
|
+
chips?: undefined;
|
140
|
+
onChangeChips?: undefined;
|
141
|
+
enumerationType?: "plain" | undefined;
|
142
|
+
onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
|
143
|
+
} & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement> & import("../../../../components/Mask/Mask.types").MaskProps, "ref"> | Omit<import("../../../../engines/types").PropsType<{
|
144
|
+
view: {
|
145
|
+
default: import("@linaria/core").LinariaClassName;
|
146
|
+
positive: import("@linaria/core").LinariaClassName;
|
147
|
+
warning: import("@linaria/core").LinariaClassName;
|
148
|
+
negative: import("@linaria/core").LinariaClassName;
|
149
|
+
};
|
150
|
+
size: {
|
151
|
+
l: import("@linaria/core").LinariaClassName;
|
152
|
+
m: import("@linaria/core").LinariaClassName;
|
153
|
+
s: import("@linaria/core").LinariaClassName;
|
154
|
+
xs: import("@linaria/core").LinariaClassName;
|
155
|
+
};
|
156
|
+
labelPlacement: {
|
157
|
+
inner: import("@linaria/core").LinariaClassName;
|
158
|
+
outer: import("@linaria/core").LinariaClassName;
|
159
|
+
};
|
160
|
+
disabled: {
|
161
|
+
true: import("@linaria/core").LinariaClassName;
|
162
|
+
};
|
163
|
+
readOnly: {
|
164
|
+
true: import("@linaria/core").LinariaClassName;
|
165
|
+
};
|
166
|
+
}> & {
|
167
|
+
size?: string | undefined;
|
168
|
+
view?: string | undefined;
|
169
|
+
readOnly?: boolean | undefined;
|
170
|
+
disabled?: boolean | undefined;
|
171
|
+
} & {
|
172
|
+
label?: string | undefined;
|
173
|
+
labelPlacement?: "inner" | "outer" | undefined;
|
174
|
+
leftHelper?: string | undefined;
|
175
|
+
contentLeft?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
176
|
+
contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
177
|
+
textBefore?: string | undefined;
|
178
|
+
textAfter?: string | undefined;
|
179
|
+
onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
|
180
|
+
} & {
|
181
|
+
requiredPlacement?: "left" | "right" | undefined;
|
182
|
+
} & {
|
183
|
+
optional?: true | undefined;
|
184
|
+
required?: false | undefined;
|
185
|
+
} & {
|
186
|
+
enumerationType: "chip";
|
187
|
+
onSearch?: undefined;
|
188
|
+
chips?: import("../../../../components/TextField/TextField.types").TextFieldPrimitiveValue[] | undefined;
|
189
|
+
onChangeChips?: ((value: import("../../../../components/TextField/TextField.types").TextFieldPrimitiveValue[]) => void) | undefined;
|
190
|
+
} & Omit<import("../../../../types").InputHTMLAttributes<HTMLInputElement>, "required" | "size"> & import("react").RefAttributes<HTMLInputElement> & import("../../../../components/Mask/Mask.types").MaskProps, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
|
191
|
+
//# sourceMappingURL=Mask.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Mask.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Mask/Mask.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2QAAyB,CAAC"}
|
package/types/index.d.ts
CHANGED
package/types/index.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC"}
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC"}
|
@@ -1,61 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: steps
|
3
|
-
title: Steps
|
4
|
-
---
|
5
|
-
|
6
|
-
# Steps
|
7
|
-
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
-
|
9
|
-
```tsx live
|
10
|
-
import React, { ReactNode, useState } from "react";
|
11
|
-
|
12
|
-
interface StepItemSimple {
|
13
|
-
indicator?: number | string | ReactNode;
|
14
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
-
disabled?: boolean;
|
16
|
-
}
|
17
|
-
|
18
|
-
interface StepItem {
|
19
|
-
title?: string;
|
20
|
-
content?: string | ReactNode;
|
21
|
-
indicator?: number | string | ReactNode;
|
22
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
-
disabled?: boolean;
|
24
|
-
}
|
25
|
-
|
26
|
-
type StepItemType = StepItemSimple | StepItem;
|
27
|
-
|
28
|
-
interface Steps {
|
29
|
-
orientation?: "horizontal" | "vertical";
|
30
|
-
/* выравнивание заголовков и контента
|
31
|
-
* @default 'left' */
|
32
|
-
contentAlign?: "left" | "center"; //
|
33
|
-
size?: "xs" | "s" | "m" | "l";
|
34
|
-
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
-
/* наличие разделительной линии
|
36
|
-
* @default 'left' */
|
37
|
-
hasLine?: boolean;
|
38
|
-
/* включает упрощенное отображение, то есть без title и content
|
39
|
-
* даже если они есть в items */
|
40
|
-
simple?: boolean;
|
41
|
-
/* обработчик кликов по StepItem
|
42
|
-
при наличии onClick у полей появляется :hover
|
43
|
-
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
-
*/
|
45
|
-
onClick?: (item: StepItemType, index: number) => void;
|
46
|
-
items: StepItemType[];
|
47
|
-
}
|
48
|
-
|
49
|
-
// пример использования
|
50
|
-
const [exampleItems, setExampleItems] = useState(() =>
|
51
|
-
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
52
|
-
);
|
53
|
-
|
54
|
-
<Steps
|
55
|
-
onClick={(item, index) => {
|
56
|
-
exampleItems[index].progress = "completed";
|
57
|
-
setExampleItems([...exampleItems]);
|
58
|
-
}}
|
59
|
-
items={exampleItems}
|
60
|
-
/>;
|
61
|
-
```
|
@@ -1,61 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: steps
|
3
|
-
title: Steps
|
4
|
-
---
|
5
|
-
|
6
|
-
# Steps
|
7
|
-
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
-
|
9
|
-
```tsx live
|
10
|
-
import React, { ReactNode, useState } from "react";
|
11
|
-
|
12
|
-
interface StepItemSimple {
|
13
|
-
indicator?: number | string | ReactNode;
|
14
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
-
disabled?: boolean;
|
16
|
-
}
|
17
|
-
|
18
|
-
interface StepItem {
|
19
|
-
title?: string;
|
20
|
-
content?: string | ReactNode;
|
21
|
-
indicator?: number | string | ReactNode;
|
22
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
-
disabled?: boolean;
|
24
|
-
}
|
25
|
-
|
26
|
-
type StepItemType = StepItemSimple | StepItem;
|
27
|
-
|
28
|
-
interface Steps {
|
29
|
-
orientation?: "horizontal" | "vertical";
|
30
|
-
/* выравнивание заголовков и контента
|
31
|
-
* @default 'left' */
|
32
|
-
contentAlign?: "left" | "center"; //
|
33
|
-
size?: "xs" | "s" | "m" | "l";
|
34
|
-
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
-
/* наличие разделительной линии
|
36
|
-
* @default 'left' */
|
37
|
-
hasLine?: boolean;
|
38
|
-
/* включает упрощенное отображение, то есть без title и content
|
39
|
-
* даже если они есть в items */
|
40
|
-
simple?: boolean;
|
41
|
-
/* обработчик кликов по StepItem
|
42
|
-
при наличии onClick у полей появляется :hover
|
43
|
-
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
-
*/
|
45
|
-
onClick?: (item: StepItemType, index: number) => void;
|
46
|
-
items: StepItemType[];
|
47
|
-
}
|
48
|
-
|
49
|
-
// пример использования
|
50
|
-
const [exampleItems, setExampleItems] = useState(() =>
|
51
|
-
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
52
|
-
);
|
53
|
-
|
54
|
-
<Steps
|
55
|
-
onClick={(item, index) => {
|
56
|
-
exampleItems[index].progress = "completed";
|
57
|
-
setExampleItems([...exampleItems]);
|
58
|
-
}}
|
59
|
-
items={exampleItems}
|
60
|
-
/>;
|
61
|
-
```
|
@@ -1,61 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: steps
|
3
|
-
title: Steps
|
4
|
-
---
|
5
|
-
|
6
|
-
# Steps
|
7
|
-
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
-
|
9
|
-
```tsx live
|
10
|
-
import React, { ReactNode, useState } from "react";
|
11
|
-
|
12
|
-
interface StepItemSimple {
|
13
|
-
indicator?: number | string | ReactNode;
|
14
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
-
disabled?: boolean;
|
16
|
-
}
|
17
|
-
|
18
|
-
interface StepItem {
|
19
|
-
title?: string;
|
20
|
-
content?: string | ReactNode;
|
21
|
-
indicator?: number | string | ReactNode;
|
22
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
-
disabled?: boolean;
|
24
|
-
}
|
25
|
-
|
26
|
-
type StepItemType = StepItemSimple | StepItem;
|
27
|
-
|
28
|
-
interface Steps {
|
29
|
-
orientation?: "horizontal" | "vertical";
|
30
|
-
/* выравнивание заголовков и контента
|
31
|
-
* @default 'left' */
|
32
|
-
contentAlign?: "left" | "center"; //
|
33
|
-
size?: "xs" | "s" | "m" | "l";
|
34
|
-
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
-
/* наличие разделительной линии
|
36
|
-
* @default 'left' */
|
37
|
-
hasLine?: boolean;
|
38
|
-
/* включает упрощенное отображение, то есть без title и content
|
39
|
-
* даже если они есть в items */
|
40
|
-
simple?: boolean;
|
41
|
-
/* обработчик кликов по StepItem
|
42
|
-
при наличии onClick у полей появляется :hover
|
43
|
-
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
-
*/
|
45
|
-
onClick?: (item: StepItemType, index: number) => void;
|
46
|
-
items: StepItemType[];
|
47
|
-
}
|
48
|
-
|
49
|
-
// пример использования
|
50
|
-
const [exampleItems, setExampleItems] = useState(() =>
|
51
|
-
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
52
|
-
);
|
53
|
-
|
54
|
-
<Steps
|
55
|
-
onClick={(item, index) => {
|
56
|
-
exampleItems[index].progress = "completed";
|
57
|
-
setExampleItems([...exampleItems]);
|
58
|
-
}}
|
59
|
-
items={exampleItems}
|
60
|
-
/>;
|
61
|
-
```
|
@@ -1,61 +0,0 @@
|
|
1
|
-
---
|
2
|
-
id: steps
|
3
|
-
title: Steps
|
4
|
-
---
|
5
|
-
|
6
|
-
# Steps
|
7
|
-
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
-
|
9
|
-
```tsx live
|
10
|
-
import React, { ReactNode, useState } from "react";
|
11
|
-
|
12
|
-
interface StepItemSimple {
|
13
|
-
indicator?: number | string | ReactNode;
|
14
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
-
disabled?: boolean;
|
16
|
-
}
|
17
|
-
|
18
|
-
interface StepItem {
|
19
|
-
title?: string;
|
20
|
-
content?: string | ReactNode;
|
21
|
-
indicator?: number | string | ReactNode;
|
22
|
-
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
-
disabled?: boolean;
|
24
|
-
}
|
25
|
-
|
26
|
-
type StepItemType = StepItemSimple | StepItem;
|
27
|
-
|
28
|
-
interface Steps {
|
29
|
-
orientation?: "horizontal" | "vertical";
|
30
|
-
/* выравнивание заголовков и контента
|
31
|
-
* @default 'left' */
|
32
|
-
contentAlign?: "left" | "center"; //
|
33
|
-
size?: "xs" | "s" | "m" | "l";
|
34
|
-
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
-
/* наличие разделительной линии
|
36
|
-
* @default 'left' */
|
37
|
-
hasLine?: boolean;
|
38
|
-
/* включает упрощенное отображение, то есть без title и content
|
39
|
-
* даже если они есть в items */
|
40
|
-
simple?: boolean;
|
41
|
-
/* обработчик кликов по StepItem
|
42
|
-
при наличии onClick у полей появляется :hover
|
43
|
-
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
-
*/
|
45
|
-
onClick?: (item: StepItemType, index: number) => void;
|
46
|
-
items: StepItemType[];
|
47
|
-
}
|
48
|
-
|
49
|
-
// пример использования
|
50
|
-
const [exampleItems, setExampleItems] = useState(() =>
|
51
|
-
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
52
|
-
);
|
53
|
-
|
54
|
-
<Steps
|
55
|
-
onClick={(item, index) => {
|
56
|
-
exampleItems[index].progress = "completed";
|
57
|
-
setExampleItems([...exampleItems]);
|
58
|
-
}}
|
59
|
-
items={exampleItems}
|
60
|
-
/>;
|
61
|
-
```
|