@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.
- package/cjs/components/Autocomplete/Autocomplete.md +7 -7
- package/cjs/components/CurrencyInput/CurrencyInput.md +24 -24
- package/cjs/components/DateInput/DateInput.md +106 -106
- package/cjs/components/DatePicker/DatePicker.md +307 -307
- package/cjs/components/FxInput/FxInput.md +16 -16
- package/cjs/components/Group/Group.md +18 -18
- package/cjs/components/Paging/Paging.md +43 -43
- package/cjs/components/Select/Select.js +2 -1
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/Tabs/Tabs.md +36 -36
- package/cjs/components/Textarea/Textarea.md +25 -25
- package/cjs/components/TokenInput/TokenInput.md +79 -79
- package/cjs/internal/DropdownContainer/DropdownContainer.d.ts +1 -0
- package/cjs/internal/DropdownContainer/DropdownContainer.js +6 -1
- package/cjs/internal/DropdownContainer/DropdownContainer.js.map +1 -1
- package/cjs/internal/Menu/Menu.styles.js +1 -1
- package/cjs/internal/Menu/Menu.styles.js.map +1 -1
- package/components/Autocomplete/Autocomplete.md +7 -7
- package/components/CurrencyInput/CurrencyInput.md +24 -24
- package/components/DateInput/DateInput.md +106 -106
- package/components/DatePicker/DatePicker.md +307 -307
- package/components/FxInput/FxInput.md +16 -16
- package/components/Group/Group.md +18 -18
- package/components/Paging/Paging.md +43 -43
- package/components/Select/Select/Select.js +2 -1
- package/components/Select/Select/Select.js.map +1 -1
- package/components/Tabs/Tabs.md +36 -36
- package/components/Textarea/Textarea.md +25 -25
- package/components/TokenInput/TokenInput.md +79 -79
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js +4 -2
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js.map +1 -1
- package/internal/DropdownContainer/DropdownContainer.d.ts +1 -0
- package/internal/Menu/Menu.styles/Menu.styles.js +1 -1
- package/internal/Menu/Menu.styles/Menu.styles.js.map +1 -1
- 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
|
+
```
|