@salutejs/plasma-new-hope 0.158.0-canary.1443.11125700749.0 → 0.158.0-canary.1443.11127069754.0
Sign up to get free protection for your applications and to get access to all the features.
- package/emotion/cjs/components/Steps/Steps.template-doc.mdx +47 -39
- package/emotion/es/components/Steps/Steps.template-doc.mdx +47 -39
- package/package.json +2 -2
- package/styled-components/cjs/components/Steps/Steps.template-doc.mdx +47 -39
- package/styled-components/es/components/Steps/Steps.template-doc.mdx +47 -39
@@ -10,68 +10,76 @@ import { PropsTable, Description } from '@site/src/components';
|
|
10
10
|
<Description name="Steps" />
|
11
11
|
<PropsTable name="Steps" />
|
12
12
|
|
13
|
-
##
|
13
|
+
## Вариант использования с управлением текущим элементом из вне
|
14
14
|
|
15
15
|
```tsx live
|
16
|
-
import React from 'react';
|
17
|
-
import {
|
16
|
+
import React, { useState } from 'react';
|
17
|
+
import { Steps, Button } from '@salutejs/{{ package }}';
|
18
|
+
|
19
|
+
const items = [{
|
20
|
+
indicator: 1,
|
21
|
+
}, {
|
22
|
+
indicator: 2,
|
23
|
+
},
|
24
|
+
{
|
25
|
+
indicator: 3,
|
26
|
+
}];
|
18
27
|
|
19
28
|
export function App() {
|
29
|
+
const [current, setCurrent] = useState<number>(0);
|
30
|
+
const onClick = () => setCurrent(() => current + 1);
|
31
|
+
|
20
32
|
return (
|
21
33
|
<section>
|
22
|
-
<
|
34
|
+
<Steps items={}
|
35
|
+
current={current}
|
36
|
+
/>
|
37
|
+
<br />
|
38
|
+
<Button view="secondary" onClick={onClick}>
|
39
|
+
Next
|
40
|
+
</Button>
|
23
41
|
</section>
|
24
42
|
);
|
25
43
|
}
|
26
44
|
```
|
27
45
|
|
28
|
-
|
46
|
+
## Вариант более гибкого использования через onChange и status в items
|
29
47
|
|
30
48
|
```tsx live
|
31
49
|
import React, { useState } from 'react';
|
32
|
-
import {
|
50
|
+
import { Steps, StepItemProps } from '@salutejs/{{ package }}';
|
33
51
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
};
|
52
|
+
const initialItems = [{
|
53
|
+
indicator: 1,
|
54
|
+
title: 'Title',
|
55
|
+
content: 'Content',
|
56
|
+
}, {
|
57
|
+
indicator: 2,
|
58
|
+
title: 'Title',
|
59
|
+
content: 'Content',
|
60
|
+
},
|
61
|
+
{
|
62
|
+
indicator: 3,
|
63
|
+
title: 'Title',
|
64
|
+
content: 'Content',
|
65
|
+
}];
|
49
66
|
|
50
|
-
|
51
|
-
|
52
|
-
};
|
67
|
+
export function App() {
|
68
|
+
const [items, setItems] = useState(initialItems);
|
53
69
|
|
54
|
-
const
|
55
|
-
|
56
|
-
|
70
|
+
const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
|
71
|
+
if (prevIndex !== undefined) {
|
72
|
+
items[prevIndex].status = 'completed';
|
73
|
+
}
|
57
74
|
|
58
|
-
|
59
|
-
setValue(sortValues(values));
|
60
|
-
};
|
75
|
+
items[index].status = 'active';
|
61
76
|
|
62
|
-
|
63
|
-
if (event.key === 'Enter') {
|
64
|
-
setValue(sortValues(values));
|
65
|
-
}
|
77
|
+
setItems([...items]);
|
66
78
|
};
|
67
79
|
|
68
80
|
return (
|
69
81
|
<section>
|
70
|
-
<
|
71
|
-
onKeyDownTextField={onKeyDownTextField}
|
72
|
-
onBlurTextField={onBlurTextField}
|
73
|
-
onChangeCommitted={onChangeCommitedHandle}
|
74
|
-
onChange={onChangeHandle} min={0} max={100} />
|
82
|
+
<Steps items={items} onChange={onChange} />
|
75
83
|
</section>
|
76
84
|
);
|
77
85
|
}
|
@@ -10,68 +10,76 @@ import { PropsTable, Description } from '@site/src/components';
|
|
10
10
|
<Description name="Steps" />
|
11
11
|
<PropsTable name="Steps" />
|
12
12
|
|
13
|
-
##
|
13
|
+
## Вариант использования с управлением текущим элементом из вне
|
14
14
|
|
15
15
|
```tsx live
|
16
|
-
import React from 'react';
|
17
|
-
import {
|
16
|
+
import React, { useState } from 'react';
|
17
|
+
import { Steps, Button } from '@salutejs/{{ package }}';
|
18
|
+
|
19
|
+
const items = [{
|
20
|
+
indicator: 1,
|
21
|
+
}, {
|
22
|
+
indicator: 2,
|
23
|
+
},
|
24
|
+
{
|
25
|
+
indicator: 3,
|
26
|
+
}];
|
18
27
|
|
19
28
|
export function App() {
|
29
|
+
const [current, setCurrent] = useState<number>(0);
|
30
|
+
const onClick = () => setCurrent(() => current + 1);
|
31
|
+
|
20
32
|
return (
|
21
33
|
<section>
|
22
|
-
<
|
34
|
+
<Steps items={}
|
35
|
+
current={current}
|
36
|
+
/>
|
37
|
+
<br />
|
38
|
+
<Button view="secondary" onClick={onClick}>
|
39
|
+
Next
|
40
|
+
</Button>
|
23
41
|
</section>
|
24
42
|
);
|
25
43
|
}
|
26
44
|
```
|
27
45
|
|
28
|
-
|
46
|
+
## Вариант более гибкого использования через onChange и status в items
|
29
47
|
|
30
48
|
```tsx live
|
31
49
|
import React, { useState } from 'react';
|
32
|
-
import {
|
50
|
+
import { Steps, StepItemProps } from '@salutejs/{{ package }}';
|
33
51
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
};
|
52
|
+
const initialItems = [{
|
53
|
+
indicator: 1,
|
54
|
+
title: 'Title',
|
55
|
+
content: 'Content',
|
56
|
+
}, {
|
57
|
+
indicator: 2,
|
58
|
+
title: 'Title',
|
59
|
+
content: 'Content',
|
60
|
+
},
|
61
|
+
{
|
62
|
+
indicator: 3,
|
63
|
+
title: 'Title',
|
64
|
+
content: 'Content',
|
65
|
+
}];
|
49
66
|
|
50
|
-
|
51
|
-
|
52
|
-
};
|
67
|
+
export function App() {
|
68
|
+
const [items, setItems] = useState(initialItems);
|
53
69
|
|
54
|
-
const
|
55
|
-
|
56
|
-
|
70
|
+
const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
|
71
|
+
if (prevIndex !== undefined) {
|
72
|
+
items[prevIndex].status = 'completed';
|
73
|
+
}
|
57
74
|
|
58
|
-
|
59
|
-
setValue(sortValues(values));
|
60
|
-
};
|
75
|
+
items[index].status = 'active';
|
61
76
|
|
62
|
-
|
63
|
-
if (event.key === 'Enter') {
|
64
|
-
setValue(sortValues(values));
|
65
|
-
}
|
77
|
+
setItems([...items]);
|
66
78
|
};
|
67
79
|
|
68
80
|
return (
|
69
81
|
<section>
|
70
|
-
<
|
71
|
-
onKeyDownTextField={onKeyDownTextField}
|
72
|
-
onBlurTextField={onBlurTextField}
|
73
|
-
onChangeCommitted={onChangeCommitedHandle}
|
74
|
-
onChange={onChangeHandle} min={0} max={100} />
|
82
|
+
<Steps items={items} onChange={onChange} />
|
75
83
|
</section>
|
76
84
|
);
|
77
85
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.158.0-canary.1443.
|
3
|
+
"version": "0.158.0-canary.1443.11127069754.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -123,5 +123,5 @@
|
|
123
123
|
"react-popper": "2.3.0",
|
124
124
|
"storeon": "3.1.5"
|
125
125
|
},
|
126
|
-
"gitHead": "
|
126
|
+
"gitHead": "1ce689fe81200ba12e3c1fe05cc374eacd0d753c"
|
127
127
|
}
|
@@ -10,68 +10,76 @@ import { PropsTable, Description } from '@site/src/components';
|
|
10
10
|
<Description name="Steps" />
|
11
11
|
<PropsTable name="Steps" />
|
12
12
|
|
13
|
-
##
|
13
|
+
## Вариант использования с управлением текущим элементом из вне
|
14
14
|
|
15
15
|
```tsx live
|
16
|
-
import React from 'react';
|
17
|
-
import {
|
16
|
+
import React, { useState } from 'react';
|
17
|
+
import { Steps, Button } from '@salutejs/{{ package }}';
|
18
|
+
|
19
|
+
const items = [{
|
20
|
+
indicator: 1,
|
21
|
+
}, {
|
22
|
+
indicator: 2,
|
23
|
+
},
|
24
|
+
{
|
25
|
+
indicator: 3,
|
26
|
+
}];
|
18
27
|
|
19
28
|
export function App() {
|
29
|
+
const [current, setCurrent] = useState<number>(0);
|
30
|
+
const onClick = () => setCurrent(() => current + 1);
|
31
|
+
|
20
32
|
return (
|
21
33
|
<section>
|
22
|
-
<
|
34
|
+
<Steps items={}
|
35
|
+
current={current}
|
36
|
+
/>
|
37
|
+
<br />
|
38
|
+
<Button view="secondary" onClick={onClick}>
|
39
|
+
Next
|
40
|
+
</Button>
|
23
41
|
</section>
|
24
42
|
);
|
25
43
|
}
|
26
44
|
```
|
27
45
|
|
28
|
-
|
46
|
+
## Вариант более гибкого использования через onChange и status в items
|
29
47
|
|
30
48
|
```tsx live
|
31
49
|
import React, { useState } from 'react';
|
32
|
-
import {
|
50
|
+
import { Steps, StepItemProps } from '@salutejs/{{ package }}';
|
33
51
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
};
|
52
|
+
const initialItems = [{
|
53
|
+
indicator: 1,
|
54
|
+
title: 'Title',
|
55
|
+
content: 'Content',
|
56
|
+
}, {
|
57
|
+
indicator: 2,
|
58
|
+
title: 'Title',
|
59
|
+
content: 'Content',
|
60
|
+
},
|
61
|
+
{
|
62
|
+
indicator: 3,
|
63
|
+
title: 'Title',
|
64
|
+
content: 'Content',
|
65
|
+
}];
|
49
66
|
|
50
|
-
|
51
|
-
|
52
|
-
};
|
67
|
+
export function App() {
|
68
|
+
const [items, setItems] = useState(initialItems);
|
53
69
|
|
54
|
-
const
|
55
|
-
|
56
|
-
|
70
|
+
const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
|
71
|
+
if (prevIndex !== undefined) {
|
72
|
+
items[prevIndex].status = 'completed';
|
73
|
+
}
|
57
74
|
|
58
|
-
|
59
|
-
setValue(sortValues(values));
|
60
|
-
};
|
75
|
+
items[index].status = 'active';
|
61
76
|
|
62
|
-
|
63
|
-
if (event.key === 'Enter') {
|
64
|
-
setValue(sortValues(values));
|
65
|
-
}
|
77
|
+
setItems([...items]);
|
66
78
|
};
|
67
79
|
|
68
80
|
return (
|
69
81
|
<section>
|
70
|
-
<
|
71
|
-
onKeyDownTextField={onKeyDownTextField}
|
72
|
-
onBlurTextField={onBlurTextField}
|
73
|
-
onChangeCommitted={onChangeCommitedHandle}
|
74
|
-
onChange={onChangeHandle} min={0} max={100} />
|
82
|
+
<Steps items={items} onChange={onChange} />
|
75
83
|
</section>
|
76
84
|
);
|
77
85
|
}
|
@@ -10,68 +10,76 @@ import { PropsTable, Description } from '@site/src/components';
|
|
10
10
|
<Description name="Steps" />
|
11
11
|
<PropsTable name="Steps" />
|
12
12
|
|
13
|
-
##
|
13
|
+
## Вариант использования с управлением текущим элементом из вне
|
14
14
|
|
15
15
|
```tsx live
|
16
|
-
import React from 'react';
|
17
|
-
import {
|
16
|
+
import React, { useState } from 'react';
|
17
|
+
import { Steps, Button } from '@salutejs/{{ package }}';
|
18
|
+
|
19
|
+
const items = [{
|
20
|
+
indicator: 1,
|
21
|
+
}, {
|
22
|
+
indicator: 2,
|
23
|
+
},
|
24
|
+
{
|
25
|
+
indicator: 3,
|
26
|
+
}];
|
18
27
|
|
19
28
|
export function App() {
|
29
|
+
const [current, setCurrent] = useState<number>(0);
|
30
|
+
const onClick = () => setCurrent(() => current + 1);
|
31
|
+
|
20
32
|
return (
|
21
33
|
<section>
|
22
|
-
<
|
34
|
+
<Steps items={}
|
35
|
+
current={current}
|
36
|
+
/>
|
37
|
+
<br />
|
38
|
+
<Button view="secondary" onClick={onClick}>
|
39
|
+
Next
|
40
|
+
</Button>
|
23
41
|
</section>
|
24
42
|
);
|
25
43
|
}
|
26
44
|
```
|
27
45
|
|
28
|
-
|
46
|
+
## Вариант более гибкого использования через onChange и status в items
|
29
47
|
|
30
48
|
```tsx live
|
31
49
|
import React, { useState } from 'react';
|
32
|
-
import {
|
50
|
+
import { Steps, StepItemProps } from '@salutejs/{{ package }}';
|
33
51
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
};
|
52
|
+
const initialItems = [{
|
53
|
+
indicator: 1,
|
54
|
+
title: 'Title',
|
55
|
+
content: 'Content',
|
56
|
+
}, {
|
57
|
+
indicator: 2,
|
58
|
+
title: 'Title',
|
59
|
+
content: 'Content',
|
60
|
+
},
|
61
|
+
{
|
62
|
+
indicator: 3,
|
63
|
+
title: 'Title',
|
64
|
+
content: 'Content',
|
65
|
+
}];
|
49
66
|
|
50
|
-
|
51
|
-
|
52
|
-
};
|
67
|
+
export function App() {
|
68
|
+
const [items, setItems] = useState(initialItems);
|
53
69
|
|
54
|
-
const
|
55
|
-
|
56
|
-
|
70
|
+
const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
|
71
|
+
if (prevIndex !== undefined) {
|
72
|
+
items[prevIndex].status = 'completed';
|
73
|
+
}
|
57
74
|
|
58
|
-
|
59
|
-
setValue(sortValues(values));
|
60
|
-
};
|
75
|
+
items[index].status = 'active';
|
61
76
|
|
62
|
-
|
63
|
-
if (event.key === 'Enter') {
|
64
|
-
setValue(sortValues(values));
|
65
|
-
}
|
77
|
+
setItems([...items]);
|
66
78
|
};
|
67
79
|
|
68
80
|
return (
|
69
81
|
<section>
|
70
|
-
<
|
71
|
-
onKeyDownTextField={onKeyDownTextField}
|
72
|
-
onBlurTextField={onBlurTextField}
|
73
|
-
onChangeCommitted={onChangeCommitedHandle}
|
74
|
-
onChange={onChangeHandle} min={0} max={100} />
|
82
|
+
<Steps items={items} onChange={onChange} />
|
75
83
|
</section>
|
76
84
|
);
|
77
85
|
}
|