@skbkontur/react-ui 3.11.0-select-right → 3.11.0-select-right-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.
Files changed (35) hide show
  1. package/cjs/components/Autocomplete/Autocomplete.md +7 -7
  2. package/cjs/components/CurrencyInput/CurrencyInput.md +24 -24
  3. package/cjs/components/DateInput/DateInput.md +106 -106
  4. package/cjs/components/DatePicker/DatePicker.md +307 -307
  5. package/cjs/components/FxInput/FxInput.md +16 -16
  6. package/cjs/components/Group/Group.md +18 -18
  7. package/cjs/components/Paging/Paging.md +43 -43
  8. package/cjs/components/Select/Select.js +2 -1
  9. package/cjs/components/Select/Select.js.map +1 -1
  10. package/cjs/components/Tabs/Tabs.md +36 -36
  11. package/cjs/components/Textarea/Textarea.md +25 -25
  12. package/cjs/components/TokenInput/TokenInput.md +79 -79
  13. package/cjs/internal/DropdownContainer/DropdownContainer.d.ts +1 -0
  14. package/cjs/internal/DropdownContainer/DropdownContainer.js +6 -1
  15. package/cjs/internal/DropdownContainer/DropdownContainer.js.map +1 -1
  16. package/cjs/internal/Menu/Menu.styles.js +1 -1
  17. package/cjs/internal/Menu/Menu.styles.js.map +1 -1
  18. package/components/Autocomplete/Autocomplete.md +7 -7
  19. package/components/CurrencyInput/CurrencyInput.md +24 -24
  20. package/components/DateInput/DateInput.md +106 -106
  21. package/components/DatePicker/DatePicker.md +307 -307
  22. package/components/FxInput/FxInput.md +16 -16
  23. package/components/Group/Group.md +18 -18
  24. package/components/Paging/Paging.md +43 -43
  25. package/components/Select/Select/Select.js +2 -1
  26. package/components/Select/Select/Select.js.map +1 -1
  27. package/components/Tabs/Tabs.md +36 -36
  28. package/components/Textarea/Textarea.md +25 -25
  29. package/components/TokenInput/TokenInput.md +79 -79
  30. package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js +4 -2
  31. package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js.map +1 -1
  32. package/internal/DropdownContainer/DropdownContainer.d.ts +1 -0
  33. package/internal/Menu/Menu.styles/Menu.styles.js +1 -1
  34. package/internal/Menu/Menu.styles/Menu.styles.js.map +1 -1
  35. package/package.json +1 -1
@@ -1,7 +1,7 @@
1
- ```jsx harmony
2
- let items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
3
-
4
- const [value, setValue] = React.useState('Kappa');
5
-
6
- <Autocomplete source={items} value={value} onValueChange={setValue} />;
7
- ```
1
+ ```jsx harmony
2
+ let items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
3
+
4
+ const [value, setValue] = React.useState('Kappa');
5
+
6
+ <Autocomplete source={items} value={value} onValueChange={setValue} />;
7
+ ```
@@ -1,24 +1,24 @@
1
- ```jsx harmony
2
- const [value, setValue] = React.useState();
3
-
4
- <CurrencyInput value={value} fractionDigits={3} onValueChange={setValue} />
5
- ```
6
-
7
- `fractionDigits={15}`
8
-
9
- ```jsx harmony
10
- const [value, setValue] = React.useState();
11
-
12
- <CurrencyInput value={value} fractionDigits={15} onValueChange={setValue} />
13
- ```
14
-
15
- ---
16
-
17
- ### <a name="/CurrencyInput?id=why15" href="#/CurrencyInput?id=why15">Почему 15?</a>
18
-
19
- Максимальное безопасное целочисленное значение - `9007199254740991` (16 цифр).
20
- Убрав один разряд, мы получим "новое" максимальное безопасное значение - **`999999999999999` (15 цифр)**.
21
-
22
- При этом десятичный резделитель может находиться в любом месте. Если целая часть равна `0`, то она не учитывается.
23
-
24
- _Детали можно почитать здесь - <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER">MDN web docs</a>_
1
+ ```jsx harmony
2
+ const [value, setValue] = React.useState();
3
+
4
+ <CurrencyInput value={value} fractionDigits={3} onValueChange={setValue} />
5
+ ```
6
+
7
+ `fractionDigits={15}`
8
+
9
+ ```jsx harmony
10
+ const [value, setValue] = React.useState();
11
+
12
+ <CurrencyInput value={value} fractionDigits={15} onValueChange={setValue} />
13
+ ```
14
+
15
+ ---
16
+
17
+ ### <a name="/CurrencyInput?id=why15" href="#/CurrencyInput?id=why15">Почему 15?</a>
18
+
19
+ Максимальное безопасное целочисленное значение - `9007199254740991` (16 цифр).
20
+ Убрав один разряд, мы получим "новое" максимальное безопасное значение - **`999999999999999` (15 цифр)**.
21
+
22
+ При этом десятичный резделитель может находиться в любом месте. Если целая часть равна `0`, то она не учитывается.
23
+
24
+ _Детали можно почитать здесь - <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER">MDN web docs</a>_
@@ -1,106 +1,106 @@
1
- ```jsx harmony
2
- <DateInput value="27.04.1992" />
3
- ```
4
-
5
- ```jsx harmony
6
- const [value, setValue] = React.useState();
7
-
8
- <DateInput value={value} onValueChange={setValue} />
9
- ```
10
-
11
- ```jsx harmony
12
- <DateInput disabled value="27.04.1992" />
13
- ```
14
-
15
- ### Форматирование даты при смене локали
16
-
17
- ```jsx harmony
18
- import { Gapped, LangCodes, LocaleContext, Select } from '@skbkontur/react-ui';
19
-
20
- class DateInputFormatting2 extends React.Component {
21
- constructor() {
22
- this.state = {
23
- langCode: LangCodes.ru_RU,
24
- value: '21.12.2012',
25
- };
26
- }
27
-
28
- render() {
29
- return (
30
- <Gapped vertical gap={10}>
31
- <div>
32
- <span style={{ width: '300px', display: 'inline-block' }}>
33
- Локаль (<tt>LangCodes</tt>)
34
- </span>
35
- <Select
36
- value={this.state.langCode}
37
- placeholder="Выбрать язык"
38
- items={Object.values(LangCodes)}
39
- onValueChange={langCode => this.setState({ langCode })}
40
- />
41
- </div>
42
- <LocaleContext.Provider value={{ langCode: this.state.langCode }}>
43
- <DateInput onValueChange={value => this.setState({ value })} value={this.state.value} />
44
- </LocaleContext.Provider>
45
- </Gapped>
46
- );
47
- }
48
- }
49
-
50
- <DateInputFormatting2 />;
51
- ```
52
-
53
- ### Ручное форматирование даты
54
-
55
- ```jsx harmony
56
- import { DateOrder, DateSeparator, Gapped, LocaleContext, Select } from '@skbkontur/react-ui';
57
-
58
- class DateInputFormatting extends React.Component {
59
- constructor() {
60
- this.state = {
61
- order: DateOrder.YMD,
62
- separator: 'Dot',
63
- value: '21.12.2012',
64
- };
65
- }
66
-
67
- render() {
68
- return (
69
- <Gapped vertical gap={10}>
70
- <div>
71
- <span style={{ width: '300px', display: 'inline-block' }}>
72
- Порядок компонентов (<tt>DateOrder</tt>)
73
- </span>
74
- <Select
75
- value={this.state.order}
76
- items={Object.keys(DateOrder)}
77
- onValueChange={order => this.setState({ order })}
78
- />
79
- </div>
80
- <div>
81
- <span style={{ width: '300px', display: 'inline-block' }}>
82
- Разделитель (<tt>DateSeparator</tt>)
83
- </span>
84
- <Select
85
- value={this.state.separator}
86
- items={Object.keys(DateSeparator)}
87
- onValueChange={separator => this.setState({ separator })}
88
- />
89
- </div>
90
- <LocaleContext.Provider value={{
91
- locale:{
92
- DatePicker: {
93
- separator: DateSeparator[this.state.separator],
94
- order: this.state.order,
95
- },
96
- }}}
97
- >
98
- <DateInput onValueChange={value => this.setState({ value })} value={this.state.value} />
99
- </LocaleContext.Provider>
100
- </Gapped>
101
- );
102
- }
103
- }
104
-
105
- <DateInputFormatting />;
106
- ```
1
+ ```jsx harmony
2
+ <DateInput value="27.04.1992" />
3
+ ```
4
+
5
+ ```jsx harmony
6
+ const [value, setValue] = React.useState();
7
+
8
+ <DateInput value={value} onValueChange={setValue} />
9
+ ```
10
+
11
+ ```jsx harmony
12
+ <DateInput disabled value="27.04.1992" />
13
+ ```
14
+
15
+ ### Форматирование даты при смене локали
16
+
17
+ ```jsx harmony
18
+ import { Gapped, LangCodes, LocaleContext, Select } from '@skbkontur/react-ui';
19
+
20
+ class DateInputFormatting2 extends React.Component {
21
+ constructor() {
22
+ this.state = {
23
+ langCode: LangCodes.ru_RU,
24
+ value: '21.12.2012',
25
+ };
26
+ }
27
+
28
+ render() {
29
+ return (
30
+ <Gapped vertical gap={10}>
31
+ <div>
32
+ <span style={{ width: '300px', display: 'inline-block' }}>
33
+ Локаль (<tt>LangCodes</tt>)
34
+ </span>
35
+ <Select
36
+ value={this.state.langCode}
37
+ placeholder="Выбрать язык"
38
+ items={Object.values(LangCodes)}
39
+ onValueChange={langCode => this.setState({ langCode })}
40
+ />
41
+ </div>
42
+ <LocaleContext.Provider value={{ langCode: this.state.langCode }}>
43
+ <DateInput onValueChange={value => this.setState({ value })} value={this.state.value} />
44
+ </LocaleContext.Provider>
45
+ </Gapped>
46
+ );
47
+ }
48
+ }
49
+
50
+ <DateInputFormatting2 />;
51
+ ```
52
+
53
+ ### Ручное форматирование даты
54
+
55
+ ```jsx harmony
56
+ import { DateOrder, DateSeparator, Gapped, LocaleContext, Select } from '@skbkontur/react-ui';
57
+
58
+ class DateInputFormatting extends React.Component {
59
+ constructor() {
60
+ this.state = {
61
+ order: DateOrder.YMD,
62
+ separator: 'Dot',
63
+ value: '21.12.2012',
64
+ };
65
+ }
66
+
67
+ render() {
68
+ return (
69
+ <Gapped vertical gap={10}>
70
+ <div>
71
+ <span style={{ width: '300px', display: 'inline-block' }}>
72
+ Порядок компонентов (<tt>DateOrder</tt>)
73
+ </span>
74
+ <Select
75
+ value={this.state.order}
76
+ items={Object.keys(DateOrder)}
77
+ onValueChange={order => this.setState({ order })}
78
+ />
79
+ </div>
80
+ <div>
81
+ <span style={{ width: '300px', display: 'inline-block' }}>
82
+ Разделитель (<tt>DateSeparator</tt>)
83
+ </span>
84
+ <Select
85
+ value={this.state.separator}
86
+ items={Object.keys(DateSeparator)}
87
+ onValueChange={separator => this.setState({ separator })}
88
+ />
89
+ </div>
90
+ <LocaleContext.Provider value={{
91
+ locale:{
92
+ DatePicker: {
93
+ separator: DateSeparator[this.state.separator],
94
+ order: this.state.order,
95
+ },
96
+ }}}
97
+ >
98
+ <DateInput onValueChange={value => this.setState({ value })} value={this.state.value} />
99
+ </LocaleContext.Provider>
100
+ </Gapped>
101
+ );
102
+ }
103
+ }
104
+
105
+ <DateInputFormatting />;
106
+ ```