@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.
Files changed (5) hide show
  1. package/emotion/cjs/components/Steps/Steps.template-doc.mdx +47 -39
  2. package/emotion/es/components/Steps/Steps.template-doc.mdx +47 -39
  3. package/package.json +2 -2
  4. package/styled-components/cjs/components/Steps/Steps.template-doc.mdx +47 -39
  5. package/styled-components/es/components/Steps/Steps.template-doc.mdx +47 -39
package/emotion/cjs/components/Steps/Steps.template-doc.mdx CHANGED
@@ -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 { Slider } from '@salutejs/{{ package }}';
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
- <Slider onChangeCommitted={() => {}} min={0} max={100} value={30} />
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 { Slider } from '@salutejs/{{ package }}';
50
+ import { Steps, StepItemProps } from '@salutejs/{{ package }}';
33
51
 
34
- export function App() {
35
- const [value, setValue] = useState([10, 80]);
36
- const sortValues = (values) => {
37
- return values
38
- .map((val) => {
39
- if (val < 0) {
40
- return 0;
41
- }
42
- if (val > 100) {
43
- return 100;
44
- }
45
- return val;
46
- })
47
- .sort((a, b) => a - b);
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
- const onChangeHandle = (values) => {
51
- setValue(sortValues(values));
52
- };
67
+ export function App() {
68
+ const [items, setItems] = useState(initialItems);
53
69
 
54
- const onChangeCommitedHandle = (values) => {
55
- setValue(sortValues(values));
56
- };
70
+ const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
71
+ if (prevIndex !== undefined) {
72
+ items[prevIndex].status = 'completed';
73
+ }
57
74
 
58
- const onBlurTextField = (values) => {
59
- setValue(sortValues(values));
60
- };
75
+ items[index].status = 'active';
61
76
 
62
- const onKeyDownTextField = (values, event) => {
63
- if (event.key === 'Enter') {
64
- setValue(sortValues(values));
65
- }
77
+ setItems([...items]);
66
78
  };
67
79
 
68
80
  return (
69
81
  <section>
70
- <Slider value={value}
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/emotion/es/components/Steps/Steps.template-doc.mdx CHANGED
@@ -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 { Slider } from '@salutejs/{{ package }}';
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
- <Slider onChangeCommitted={() => {}} min={0} max={100} value={30} />
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 { Slider } from '@salutejs/{{ package }}';
50
+ import { Steps, StepItemProps } from '@salutejs/{{ package }}';
33
51
 
34
- export function App() {
35
- const [value, setValue] = useState([10, 80]);
36
- const sortValues = (values) => {
37
- return values
38
- .map((val) => {
39
- if (val < 0) {
40
- return 0;
41
- }
42
- if (val > 100) {
43
- return 100;
44
- }
45
- return val;
46
- })
47
- .sort((a, b) => a - b);
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
- const onChangeHandle = (values) => {
51
- setValue(sortValues(values));
52
- };
67
+ export function App() {
68
+ const [items, setItems] = useState(initialItems);
53
69
 
54
- const onChangeCommitedHandle = (values) => {
55
- setValue(sortValues(values));
56
- };
70
+ const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
71
+ if (prevIndex !== undefined) {
72
+ items[prevIndex].status = 'completed';
73
+ }
57
74
 
58
- const onBlurTextField = (values) => {
59
- setValue(sortValues(values));
60
- };
75
+ items[index].status = 'active';
61
76
 
62
- const onKeyDownTextField = (values, event) => {
63
- if (event.key === 'Enter') {
64
- setValue(sortValues(values));
65
- }
77
+ setItems([...items]);
66
78
  };
67
79
 
68
80
  return (
69
81
  <section>
70
- <Slider value={value}
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.11125700749.0",
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": "08ebdb7c83cbc4a40dbe5bc496f10727ca2f1afa"
126
+ "gitHead": "1ce689fe81200ba12e3c1fe05cc374eacd0d753c"
127
127
  }
package/styled-components/cjs/components/Steps/Steps.template-doc.mdx CHANGED
@@ -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 { Slider } from '@salutejs/{{ package }}';
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
- <Slider onChangeCommitted={() => {}} min={0} max={100} value={30} />
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 { Slider } from '@salutejs/{{ package }}';
50
+ import { Steps, StepItemProps } from '@salutejs/{{ package }}';
33
51
 
34
- export function App() {
35
- const [value, setValue] = useState([10, 80]);
36
- const sortValues = (values) => {
37
- return values
38
- .map((val) => {
39
- if (val < 0) {
40
- return 0;
41
- }
42
- if (val > 100) {
43
- return 100;
44
- }
45
- return val;
46
- })
47
- .sort((a, b) => a - b);
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
- const onChangeHandle = (values) => {
51
- setValue(sortValues(values));
52
- };
67
+ export function App() {
68
+ const [items, setItems] = useState(initialItems);
53
69
 
54
- const onChangeCommitedHandle = (values) => {
55
- setValue(sortValues(values));
56
- };
70
+ const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
71
+ if (prevIndex !== undefined) {
72
+ items[prevIndex].status = 'completed';
73
+ }
57
74
 
58
- const onBlurTextField = (values) => {
59
- setValue(sortValues(values));
60
- };
75
+ items[index].status = 'active';
61
76
 
62
- const onKeyDownTextField = (values, event) => {
63
- if (event.key === 'Enter') {
64
- setValue(sortValues(values));
65
- }
77
+ setItems([...items]);
66
78
  };
67
79
 
68
80
  return (
69
81
  <section>
70
- <Slider value={value}
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/styled-components/es/components/Steps/Steps.template-doc.mdx CHANGED
@@ -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 { Slider } from '@salutejs/{{ package }}';
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
- <Slider onChangeCommitted={() => {}} min={0} max={100} value={30} />
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 { Slider } from '@salutejs/{{ package }}';
50
+ import { Steps, StepItemProps } from '@salutejs/{{ package }}';
33
51
 
34
- export function App() {
35
- const [value, setValue] = useState([10, 80]);
36
- const sortValues = (values) => {
37
- return values
38
- .map((val) => {
39
- if (val < 0) {
40
- return 0;
41
- }
42
- if (val > 100) {
43
- return 100;
44
- }
45
- return val;
46
- })
47
- .sort((a, b) => a - b);
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
- const onChangeHandle = (values) => {
51
- setValue(sortValues(values));
52
- };
67
+ export function App() {
68
+ const [items, setItems] = useState(initialItems);
53
69
 
54
- const onChangeCommitedHandle = (values) => {
55
- setValue(sortValues(values));
56
- };
70
+ const onChange = (item: StepItemProps, index: number, prevIndex: number) => {
71
+ if (prevIndex !== undefined) {
72
+ items[prevIndex].status = 'completed';
73
+ }
57
74
 
58
- const onBlurTextField = (values) => {
59
- setValue(sortValues(values));
60
- };
75
+ items[index].status = 'active';
61
76
 
62
- const onKeyDownTextField = (values, event) => {
63
- if (event.key === 'Enter') {
64
- setValue(sortValues(values));
65
- }
77
+ setItems([...items]);
66
78
  };
67
79
 
68
80
  return (
69
81
  <section>
70
- <Slider value={value}
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
  }