@skbkontur/react-ui 4.4.0 → 4.5.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/CHANGELOG.md +43 -1
- package/README.md +27 -4
- package/cjs/components/Autocomplete/Autocomplete.md +15 -1
- package/cjs/components/ComboBox/ComboBox.md +32 -0
- package/cjs/components/DatePicker/DatePicker.md +18 -0
- package/cjs/components/FileUploader/FileUploader.d.ts +2 -1
- package/cjs/components/FileUploader/FileUploader.js +15 -2
- package/cjs/components/FileUploader/FileUploader.js.map +1 -1
- package/cjs/components/FxInput/FxInput.md +13 -0
- package/cjs/components/Input/Input.js +2 -1
- package/cjs/components/Input/Input.js.map +1 -1
- package/cjs/components/Input/Input.md +12 -0
- package/cjs/components/Input/Input.styles.d.ts +1 -0
- package/cjs/components/Input/Input.styles.js +17 -10
- package/cjs/components/Input/Input.styles.js.map +1 -1
- package/cjs/components/Loader/Loader.d.ts +11 -2
- package/cjs/components/Loader/Loader.js +10 -1
- package/cjs/components/Loader/Loader.js.map +1 -1
- package/cjs/components/Loader/Loader.md +30 -23
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.d.ts +6 -5
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.js +5 -9
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.js.map +1 -1
- package/cjs/components/ResponsiveLayout/ResponsiveLayout.md +31 -0
- package/cjs/components/ResponsiveLayout/decorator.d.ts +1 -1
- package/cjs/components/ResponsiveLayout/types.d.ts +9 -1
- package/cjs/components/ResponsiveLayout/useResponsiveLayout.d.ts +2 -2
- package/cjs/components/ResponsiveLayout/useResponsiveLayout.js +31 -15
- package/cjs/components/ResponsiveLayout/useResponsiveLayout.js.map +1 -1
- package/cjs/components/Select/Select.md +14 -0
- package/cjs/components/Spinner/Spinner.d.ts +11 -2
- package/cjs/components/Spinner/Spinner.js +10 -1
- package/cjs/components/Spinner/Spinner.js.map +1 -1
- package/cjs/components/Textarea/Textarea.md +19 -0
- package/cjs/components/Token/Token.styles.js +2 -1
- package/cjs/components/Token/Token.styles.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.d.ts +3 -0
- package/cjs/components/TokenInput/TokenInput.js +56 -13
- package/cjs/components/TokenInput/TokenInput.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.md +26 -0
- package/cjs/components/TokenInput/TokenInput.styles.js +2 -1
- package/cjs/components/TokenInput/TokenInput.styles.js.map +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/ZIndex/ZIndex.d.ts +17 -3
- package/cjs/internal/ZIndex/ZIndex.js +55 -14
- package/cjs/internal/ZIndex/ZIndex.js.map +1 -1
- package/cjs/internal/themes/DefaultTheme.d.ts +2 -0
- package/cjs/internal/themes/DefaultTheme.js +8 -2
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/cjs/lib/rootNode/getRootNode.d.ts +1 -1
- package/cjs/lib/rootNode/getRootNode.js +37 -12
- package/cjs/lib/rootNode/getRootNode.js.map +1 -1
- package/components/Autocomplete/Autocomplete.md +15 -1
- package/components/ComboBox/ComboBox.md +32 -0
- package/components/DatePicker/DatePicker.md +18 -0
- package/components/FileUploader/FileUploader/FileUploader.js +8 -3
- package/components/FileUploader/FileUploader/FileUploader.js.map +1 -1
- package/components/FileUploader/FileUploader.d.ts +2 -1
- package/components/FxInput/FxInput.md +13 -0
- package/components/Input/Input/Input.js +1 -1
- package/components/Input/Input/Input.js.map +1 -1
- package/components/Input/Input.md +12 -0
- package/components/Input/Input.styles/Input.styles.js +13 -10
- package/components/Input/Input.styles/Input.styles.js.map +1 -1
- package/components/Input/Input.styles.d.ts +1 -0
- package/components/Loader/Loader/Loader.js +3 -1
- package/components/Loader/Loader/Loader.js.map +1 -1
- package/components/Loader/Loader.d.ts +11 -2
- package/components/Loader/Loader.md +30 -23
- package/components/ResponsiveLayout/ResponsiveLayout/ResponsiveLayout.js +5 -8
- package/components/ResponsiveLayout/ResponsiveLayout/ResponsiveLayout.js.map +1 -1
- package/components/ResponsiveLayout/ResponsiveLayout.d.ts +6 -5
- package/components/ResponsiveLayout/ResponsiveLayout.md +31 -0
- package/components/ResponsiveLayout/decorator.d.ts +1 -1
- package/components/ResponsiveLayout/types.d.ts +9 -1
- package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js +42 -17
- package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js.map +1 -1
- package/components/ResponsiveLayout/useResponsiveLayout.d.ts +2 -2
- package/components/Select/Select.md +14 -0
- package/components/Spinner/Spinner/Spinner.js +1 -1
- package/components/Spinner/Spinner/Spinner.js.map +1 -1
- package/components/Spinner/Spinner.d.ts +11 -2
- package/components/Textarea/Textarea.md +19 -0
- package/components/Token/Token.styles/Token.styles.js +1 -1
- package/components/Token/Token.styles/Token.styles.js.map +1 -1
- package/components/TokenInput/TokenInput/TokenInput.js +82 -19
- package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +3 -0
- package/components/TokenInput/TokenInput.md +26 -0
- package/components/TokenInput/TokenInput.styles/TokenInput.styles.js +1 -1
- package/components/TokenInput/TokenInput.styles/TokenInput.styles.js.map +1 -1
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/ZIndex/ZIndex/ZIndex.js +46 -27
- package/internal/ZIndex/ZIndex/ZIndex.js.map +1 -1
- package/internal/ZIndex/ZIndex.d.ts +17 -3
- package/internal/themes/DefaultTheme/DefaultTheme.js +11 -1
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/internal/themes/DefaultTheme.d.ts +2 -0
- package/lib/rootNode/getRootNode/getRootNode.js +28 -10
- package/lib/rootNode/getRootNode/getRootNode.js.map +1 -1
- package/lib/rootNode/getRootNode.d.ts +1 -1
- package/package.json +3 -20
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
"use strict";exports.__esModule = true;exports.getRootNode = void 0;
|
|
1
|
+
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.getRootNode = void 0;
|
|
2
2
|
var _reactDom = require("react-dom");
|
|
3
3
|
|
|
4
|
+
var _warning = _interopRequireDefault(require("warning"));
|
|
4
5
|
|
|
5
6
|
|
|
6
7
|
var _SSRSafe = require("../SSRSafe");
|
|
@@ -9,7 +10,7 @@ var _client = require("../client");
|
|
|
9
10
|
var _rootNodeDecorator = require("./rootNodeDecorator"); /* eslint-disable react/no-find-dom-node */
|
|
10
11
|
|
|
11
12
|
/**
|
|
12
|
-
* Extracts component's root
|
|
13
|
+
* Extracts component's root Element (HTMLElement/SVGElement) out of it's instance
|
|
13
14
|
* following the "StrictMode support convention" (@see README.md#strictmode, #2518).
|
|
14
15
|
*
|
|
15
16
|
* Replaces findDOMNode but falls back to it if "convention" is not respected.
|
|
@@ -19,14 +20,22 @@ var _rootNodeDecorator = require("./rootNodeDecorator"); /* eslint-disable react
|
|
|
19
20
|
*/
|
|
20
21
|
|
|
21
22
|
var getRootNode = function getRootNode(instance) {
|
|
23
|
+
/**
|
|
24
|
+
* Options of what instance can be:
|
|
25
|
+
* 1. null or undefined
|
|
26
|
+
* 2. DOM Element
|
|
27
|
+
* 3. class Component instance (object)
|
|
28
|
+
* 4. literally anything, returned from useImperativeHandle
|
|
29
|
+
*/
|
|
30
|
+
|
|
22
31
|
if (!_client.canUseDOM || !instance) {
|
|
23
32
|
// instance can be `null` if component was unmounted
|
|
24
|
-
// also checking undefined for
|
|
33
|
+
// also checking undefined for convenient usage
|
|
25
34
|
return null;
|
|
26
35
|
}
|
|
27
36
|
|
|
28
37
|
if ((0, _SSRSafe.isElement)(instance)) {
|
|
29
|
-
// instance can be
|
|
38
|
+
// instance can be an Element already if its coming
|
|
30
39
|
// from Refs of intrinsic elements (<div />, <button />, etc.)
|
|
31
40
|
return instance;
|
|
32
41
|
}
|
|
@@ -36,7 +45,7 @@ var getRootNode = function getRootNode(instance) {
|
|
|
36
45
|
if ((0, _rootNodeDecorator.isInstanceWithRootNode)(instance)) {
|
|
37
46
|
// it happened to be that native Node interface also has
|
|
38
47
|
// the "getRootNode" method, but we can ignore it here
|
|
39
|
-
// because we'd already checked the instance on being an
|
|
48
|
+
// because we'd already checked the instance on being an Element
|
|
40
49
|
// which is a subclass of Node, so, just fixing types here
|
|
41
50
|
if (!(0, _SSRSafe.isNode)(instance)) {
|
|
42
51
|
rootNode = instance.getRootNode();
|
|
@@ -44,16 +53,32 @@ var getRootNode = function getRootNode(instance) {
|
|
|
44
53
|
}
|
|
45
54
|
|
|
46
55
|
if (rootNode !== undefined) {
|
|
47
|
-
//
|
|
48
|
-
// or null (which is also OK, e.g. Popup/Tooltip/Hint before opening)
|
|
56
|
+
// the getter exists and has returned something, it should be what we are looking for
|
|
57
|
+
// probably its an Element or null (which is also OK, e.g. Popup/Tooltip/Hint before opening)
|
|
49
58
|
return rootNode;
|
|
50
59
|
}
|
|
51
60
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
61
|
+
try {
|
|
62
|
+
// rootNode is undefined, which means that the getter doesn't exists or returns the undefined
|
|
63
|
+
// anyway, it tell us that the convention is not respected,
|
|
64
|
+
// so, we have to fall back to the deprecated findDOMNode, which breaks StrictMode
|
|
65
|
+
// instance can still be a class component or an imperative handle (i.e., anything, except null/undefined/Element)
|
|
66
|
+
rootNode = (0, _reactDom.findDOMNode)(instance);
|
|
67
|
+
} catch (e) {
|
|
68
|
+
// but findDOMNode doesn`t accept everything that instance can be at this point,
|
|
69
|
+
// so we have to handle exceptions
|
|
70
|
+
// see https://github.com/facebook/react/blob/cae63505/packages/react-dom/src/__tests__/findDOMNode-test.js#L66-L86
|
|
71
|
+
(0, _warning.default)(
|
|
72
|
+
false,
|
|
73
|
+
'[getRootNode]: can`t fallback to findDOMNode.' +
|
|
74
|
+
'\n' +
|
|
75
|
+
'See https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/README.md#strictmode' +
|
|
76
|
+
'\n\n' +
|
|
77
|
+
e.message);
|
|
78
|
+
|
|
79
|
+
return null;
|
|
80
|
+
}
|
|
56
81
|
|
|
57
|
-
// the findDOMNode can also return Text, but we are only
|
|
82
|
+
// the findDOMNode can also return Text, but we are only interested in Elements, so just filter it
|
|
58
83
|
return (0, _SSRSafe.isElement)(rootNode) ? rootNode : null;
|
|
59
84
|
};exports.getRootNode = getRootNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["getRootNode.ts"],"names":["getRootNode","instance","canUseDOM","rootNode","undefined"],"mappings":";AACA
|
|
1
|
+
{"version":3,"sources":["getRootNode.ts"],"names":["getRootNode","instance","canUseDOM","rootNode","undefined","e","message"],"mappings":";AACA;;AAEA;;;AAGA;AACA;;AAEA,wD,CATA;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,QAAD,EAAgE;AACzF;AACF;AACA;AACA;AACA;AACA;AACA;;AAEE,MAAI,CAACC,iBAAD,IAAc,CAACD,QAAnB,EAA6B;AAC3B;AACA;AACA,WAAO,IAAP;AACD;;AAED,MAAI,wBAAUA,QAAV,CAAJ,EAAyB;AACvB;AACA;AACA,WAAOA,QAAP;AACD;;AAED,MAAIE,QAAJ;;AAEA,MAAI,+CAAuBF,QAAvB,CAAJ,EAAsC;AACpC;AACA;AACA;AACA;AACA,QAAI,CAAC,qBAAOA,QAAP,CAAL,EAAuB;AACrBE,MAAAA,QAAQ,GAAGF,QAAQ,CAACD,WAAT,EAAX;AACD;AACF;;AAED,MAAIG,QAAQ,KAAKC,SAAjB,EAA4B;AAC1B;AACA;AACA,WAAOD,QAAP;AACD;;AAED,MAAI;AACF;AACA;AACA;AACA;AACAA,IAAAA,QAAQ,GAAG,2BAAYF,QAAZ,CAAX;AACD,GAND,CAME,OAAOI,CAAP,EAAU;AACV;AACA;AACA;AACA;AACE,SADF;AAEE;AACE,QADF;AAEE,mGAFF;AAGE,UAHF;AAIEA,IAAAA,CAAC,CAACC,OANN;;AAQA,WAAO,IAAP;AACD;;AAED;AACA,SAAO,wBAAUH,QAAV,IAAsBA,QAAtB,GAAiC,IAAxC;AACD,CA9DM,C","sourcesContent":["/* eslint-disable react/no-find-dom-node */\nimport { findDOMNode } from 'react-dom';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { isElement, isNode } from '../SSRSafe';\nimport { canUseDOM } from '../client';\n\nimport { isInstanceWithRootNode } from './rootNodeDecorator';\n\n/**\n * Extracts component's root Element (HTMLElement/SVGElement) out of it's instance\n * following the \"StrictMode support convention\" (@see README.md#strictmode, #2518).\n *\n * Replaces findDOMNode but falls back to it if \"convention\" is not respected.\n *\n * @param instance Component's instance provided by React.Ref or `this` inside class-components.\n * @returns Component's root `Element` or null\n */\n\nexport const getRootNode = (instance: Nullable<React.ReactInstance>): Nullable<Element> => {\n /**\n * Options of what instance can be:\n * 1. null or undefined\n * 2. DOM Element\n * 3. class Component instance (object)\n * 4. literally anything, returned from useImperativeHandle\n */\n\n if (!canUseDOM || !instance) {\n // instance can be `null` if component was unmounted\n // also checking undefined for convenient usage\n return null;\n }\n\n if (isElement(instance)) {\n // instance can be an Element already if its coming\n // from Refs of intrinsic elements (<div />, <button />, etc.)\n return instance;\n }\n\n let rootNode;\n\n if (isInstanceWithRootNode(instance)) {\n // it happened to be that native Node interface also has\n // the \"getRootNode\" method, but we can ignore it here\n // because we'd already checked the instance on being an Element\n // which is a subclass of Node, so, just fixing types here\n if (!isNode(instance)) {\n rootNode = instance.getRootNode();\n }\n }\n\n if (rootNode !== undefined) {\n // the getter exists and has returned something, it should be what we are looking for\n // probably its an Element or null (which is also OK, e.g. Popup/Tooltip/Hint before opening)\n return rootNode;\n }\n\n try {\n // rootNode is undefined, which means that the getter doesn't exists or returns the undefined\n // anyway, it tell us that the convention is not respected,\n // so, we have to fall back to the deprecated findDOMNode, which breaks StrictMode\n // instance can still be a class component or an imperative handle (i.e., anything, except null/undefined/Element)\n rootNode = findDOMNode(instance);\n } catch (e) {\n // but findDOMNode doesn`t accept everything that instance can be at this point,\n // so we have to handle exceptions\n // see https://github.com/facebook/react/blob/cae63505/packages/react-dom/src/__tests__/findDOMNode-test.js#L66-L86\n warning(\n false,\n '[getRootNode]: can`t fallback to findDOMNode.' +\n '\\n' +\n 'See https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/README.md#strictmode' +\n '\\n\\n' +\n e.message,\n );\n return null;\n }\n\n // the findDOMNode can also return Text, but we are only interested in Elements, so just filter it\n return isElement(rootNode) ? rootNode : null;\n};\n"]}
|
|
@@ -1,7 +1,21 @@
|
|
|
1
1
|
```jsx harmony
|
|
2
|
-
|
|
2
|
+
const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
|
|
3
3
|
|
|
4
4
|
const [value, setValue] = React.useState('Kappa');
|
|
5
5
|
|
|
6
6
|
<Autocomplete source={items} value={value} onValueChange={setValue} />;
|
|
7
7
|
```
|
|
8
|
+
|
|
9
|
+
Очистить значение в `Autocomplete` можно только с помощью пустой строки
|
|
10
|
+
```jsx harmony
|
|
11
|
+
import { Button, Group } from '@skbkontur/react-ui';
|
|
12
|
+
|
|
13
|
+
const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
|
|
14
|
+
|
|
15
|
+
const [value, setValue] = React.useState('Kappa');
|
|
16
|
+
|
|
17
|
+
<Group>
|
|
18
|
+
<Autocomplete source={items} value={value} onValueChange={setValue} />
|
|
19
|
+
<Button onClick={() => setValue('')}>Очистить</Button>
|
|
20
|
+
</Group>
|
|
21
|
+
```
|
|
@@ -49,6 +49,38 @@ let handleFocus = () => setError(false);
|
|
|
49
49
|
</Tooltip>;
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
+
Очистить значение в `ComboBox`'е можно с помощью пустой строки, `null` или `undefined`
|
|
53
|
+
```jsx harmony
|
|
54
|
+
import { Group, ComboBox, Button } from '@skbkontur/react-ui';
|
|
55
|
+
|
|
56
|
+
const [value, setValue] = React.useState({ value: 2, label: 'Second' });
|
|
57
|
+
|
|
58
|
+
const getItems = q => {
|
|
59
|
+
return Promise.resolve(
|
|
60
|
+
[
|
|
61
|
+
{ value: 1, label: 'First' },
|
|
62
|
+
{ value: 2, label: 'Second' },
|
|
63
|
+
{ value: 3, label: 'Third' },
|
|
64
|
+
{ value: 4, label: 'Fourth' },
|
|
65
|
+
{ value: 5, label: 'Fifth' },
|
|
66
|
+
{ value: 6, label: 'Sixth' },
|
|
67
|
+
].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
|
|
68
|
+
)
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
<Group>
|
|
72
|
+
<ComboBox
|
|
73
|
+
getItems={getItems}
|
|
74
|
+
onValueChange={setValue}
|
|
75
|
+
placeholder="Введите число"
|
|
76
|
+
value={value}
|
|
77
|
+
/>
|
|
78
|
+
<Button onClick={() => setValue(null)}>Null</Button>
|
|
79
|
+
<Button onClick={() => setValue(undefined)}>Undefined</Button>
|
|
80
|
+
<Button onClick={() => setValue('')}>Пустая строка</Button>
|
|
81
|
+
</Group>
|
|
82
|
+
```
|
|
83
|
+
|
|
52
84
|
ComboBox with popular values, complex menu items and total count message
|
|
53
85
|
|
|
54
86
|
```jsx harmony
|
|
@@ -59,6 +59,24 @@ let removeTooltip = () => setTooltip(false);
|
|
|
59
59
|
</Gapped>;
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
+
Очистить значение в `DatePicker`'е можно с помощью пустой строки, `null` или `undefined`
|
|
63
|
+
```jsx harmony
|
|
64
|
+
import { Button, Group } from '@skbkontur/react-ui';
|
|
65
|
+
|
|
66
|
+
const [value, setValue] = React.useState('24.08.2022');
|
|
67
|
+
|
|
68
|
+
<Group>
|
|
69
|
+
<DatePicker
|
|
70
|
+
value={value}
|
|
71
|
+
onValueChange={setValue}
|
|
72
|
+
enableTodayLink
|
|
73
|
+
/>
|
|
74
|
+
<Button onClick={() => setValue(null)}>Null</Button>
|
|
75
|
+
<Button onClick={() => setValue(undefined)}>Undefined</Button>
|
|
76
|
+
<Button onClick={() => setValue('')}>Пустая строка</Button>
|
|
77
|
+
</Group>;
|
|
78
|
+
```
|
|
79
|
+
|
|
62
80
|
### `isHoliday`
|
|
63
81
|
|
|
64
82
|
В компонент можно передать функцию `isHoliday`, которая будет получать день строкой формата `dd.mm.yyyy` и флаг `isWeekend`, и должна вернуть `true` для выходного и `false` для рабочего дня.
|
|
@@ -183,9 +183,12 @@ var _FileUploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
183
183
|
return {
|
|
184
184
|
focus: focus,
|
|
185
185
|
blur: blur,
|
|
186
|
-
reset: reset
|
|
186
|
+
reset: reset,
|
|
187
|
+
getRootNode: function getRootNode() {
|
|
188
|
+
return rootNodeRef.current;
|
|
189
|
+
}
|
|
187
190
|
};
|
|
188
|
-
}, [blur, focus, reset]);
|
|
191
|
+
}, [ref, blur, focus, reset]);
|
|
189
192
|
|
|
190
193
|
var _useState = useState(false),
|
|
191
194
|
focusedByTab = _useState[0],
|
|
@@ -227,12 +230,14 @@ var _FileUploader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
227
230
|
var hasOneFile = files.length === 1;
|
|
228
231
|
var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
|
|
229
232
|
var linkClassNames = cx(jsStyles.link(theme), (_cx4 = {}, _cx4[jsStyles.linkHovered(theme)] = !disabled && hovered, _cx4[jsStyles.linkDisabled(theme)] = disabled, _cx4));
|
|
233
|
+
var rootNodeRef = useRef(null);
|
|
230
234
|
return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("div", {
|
|
231
235
|
"data-tid": FileUploaderDataTids.root,
|
|
232
236
|
className: jsStyles.root(theme),
|
|
233
237
|
style: useMemoObject({
|
|
234
238
|
width: width
|
|
235
|
-
})
|
|
239
|
+
}),
|
|
240
|
+
ref: rootNodeRef
|
|
236
241
|
}, !hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/React.createElement(FileUploaderFileList, {
|
|
237
242
|
renderFile: renderFile
|
|
238
243
|
}), /*#__PURE__*/React.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FileUploader.tsx"],"names":["React","useCallback","useContext","useImperativeHandle","useRef","useState","getAttachedFile","cx","useMemoObject","FileUploaderControlContext","useControlLocale","useUpload","useDrop","ThemeContext","UploadIcon","withFileUploaderControlProvider","keyListener","FileUploaderFile","FileUploaderFileList","isBrowser","CommonWrapper","FileUploaderFileValidationResult","jsStyles","stopPropagation","e","FileUploaderDataTids","root","content","link","defaultRenderFile","file","fileNode","_FileUploader","forwardRef","props","ref","theme","disabled","error","warning","multiple","width","fileUploaderWidth","hideFiles","onBlur","onFocus","onChange","request","validateBeforeUpload","onRequestSuccess","onRequestError","renderFile","inputProps","files","setFiles","removeFile","reset","setFileValidationResult","locale","inputRef","isAsync","isSingleMode","upload","tryValidateAndUpload","forEach","validationMessage","id","handleChange","newFiles","filesArray","Array","from","attachedFiles","map","length","handleDrop","event","dataTransfer","clearData","onDrop","isDraggable","labelRef","isWindowDraggable","windowRef","current","window","document","focus","isTabPressed","blur","focusedByTab","setFocusedByTab","handleInputChange","target","handleFocus","requestAnimationFrame","handleBlur","hovered","setHovered","uploadButtonClassNames","uploadButton","uploadButtonFocus","dragOver","uploadButtonWrapperClassNames","windowDragOver","uploadButtonIconClassNames","icon","iconDisabled","hasOneFile","hasOneFileForSingle","linkClassNames","linkHovered","linkDisabled","choosedFile","chooseFile","afterLinkText","singleFile","orDragHere","fileInput","FileUploader","memo","displayName"],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef, useState } from 'react';\n\nimport { FileUploaderAttachedFile, getAttachedFile } from '../../internal/FileUploaderControl/fileUtils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useMemoObject } from '../../hooks/useMemoObject';\nimport { FileUploaderControlContext } from '../../internal/FileUploaderControl/FileUploaderControlContext';\nimport { useControlLocale } from '../../internal/FileUploaderControl/hooks/useControlLocale';\nimport { useUpload } from '../../internal/FileUploaderControl/hooks/useUpload';\nimport { useDrop } from '../../hooks/useDrop';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { UploadIcon } from '../../internal/icons/16px';\nimport { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';\nimport { withFileUploaderControlProvider } from '../../internal/FileUploaderControl/withFileUploaderControlProvider';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { FileUploaderFile } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';\nimport { FileUploaderFileList } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';\nimport { isBrowser } from '../../lib/client';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';\n\nimport { jsStyles } from './FileUploader.styles';\n\nconst stopPropagation: React.ReactEventHandler = (e) => e.stopPropagation();\n\ninterface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {\n /** Состояние ошибки всего контрола */\n error?: boolean;\n /** Состояние предупреждения всего контрола */\n warning?: boolean;\n /** Свойство ширины. */\n width?: React.CSSProperties['width'];\n /** Свойство, скрывающее отображение файлов. */\n hideFiles?: boolean;\n\n /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */\n request?: (file: FileUploaderAttachedFile) => Promise<void>;\n /** Срабатывает при удачной попытке отправки через request */\n onRequestSuccess?: (fileId: string) => void;\n /** Срабатывает при неудачной попытке отправки через request */\n onRequestError?: (fileId: string) => void;\n\n /**\n * Функция валидации каждого файла.\n * Срабатывает после выбора файлов и перед попыткой отправить в request.\n * Чтобы вывести валидацию ошибки, промис должен вернуть строку.\n * */\n validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;\n\n /**\n * Функция, позволяющая кастомизировать файлы.\n * Через нее можно вешать кастомные валидации на каждый файл.\n * */\n renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;\n}\n\nexport interface FileUploaderRef {\n focus: () => void;\n blur: () => void;\n /** Сбрасывает выбранные файлы */\n reset: () => void;\n}\n\nexport const FileUploaderDataTids = {\n root: 'FileUploader__root',\n content: 'FileUploader__content',\n link: 'FileUploader__link',\n} as const;\n\nconst defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;\n\nconst _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {\n const theme = useContext(ThemeContext);\n\n const {\n disabled,\n error,\n warning,\n multiple = false,\n width = theme.fileUploaderWidth,\n hideFiles = false,\n onBlur,\n onFocus,\n onChange,\n request,\n validateBeforeUpload,\n onRequestSuccess,\n onRequestError,\n renderFile = defaultRenderFile,\n ...inputProps\n } = props;\n\n const { files, setFiles, removeFile, reset, setFileValidationResult } = useContext(FileUploaderControlContext);\n\n const locale = useControlLocale();\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const isAsync = !!request;\n const isSingleMode = !multiple;\n\n const upload = useUpload(request, onRequestSuccess, onRequestError);\n\n const tryValidateAndUpload = useCallback(\n (files: FileUploaderAttachedFile[]) => {\n files.forEach(async (file) => {\n const validationMessage = validateBeforeUpload && (await validateBeforeUpload(file));\n\n if (!validationMessage) {\n isAsync && upload(file);\n } else {\n setFileValidationResult(file.id, FileUploaderFileValidationResult.error(validationMessage));\n }\n });\n },\n [validateBeforeUpload, isAsync, upload, setFileValidationResult],\n );\n\n /** common part **/\n const handleChange = useCallback(\n (newFiles: FileList | null) => {\n if (!newFiles) {\n return;\n }\n\n let filesArray = Array.from(newFiles);\n\n if (isSingleMode) {\n filesArray = [filesArray[0]];\n }\n\n const attachedFiles = filesArray.map(getAttachedFile);\n\n if (isSingleMode && attachedFiles.length && files.length) {\n removeFile(files[0].id);\n }\n\n if (attachedFiles.length) {\n setFiles(attachedFiles);\n tryValidateAndUpload(attachedFiles);\n }\n },\n [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile],\n );\n\n const handleDrop = useCallback(\n (event) => {\n if (disabled) {\n return;\n }\n\n const { dataTransfer } = event;\n const { files } = dataTransfer;\n\n if (files?.length > 0) {\n handleChange(files);\n dataTransfer.clearData();\n }\n },\n [handleChange, disabled],\n );\n\n const { isDraggable, ref: labelRef } = useDrop<HTMLLabelElement>({ onDrop: handleDrop });\n const { isDraggable: isWindowDraggable, ref: windowRef } = useDrop<Document>();\n\n if (isBrowser) {\n windowRef.current = window.document;\n }\n\n const focus = useCallback(() => {\n keyListener.isTabPressed = true;\n inputRef.current?.focus();\n }, []);\n\n const blur = useCallback(() => {\n inputRef.current?.blur();\n }, []);\n\n useImperativeHandle(ref, () => ({ focus, blur, reset }), [blur, focus, reset]);\n\n const [focusedByTab, setFocusedByTab] = useState(false);\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n handleChange(event.target.files);\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (!disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n onFocus?.(e);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedByTab(false);\n if (!disabled) {\n onBlur?.(e);\n }\n };\n\n const [hovered, setHovered] = useState(false);\n\n const uploadButtonClassNames = cx(jsStyles.uploadButton(theme), {\n [jsStyles.uploadButtonFocus(theme)]: focusedByTab,\n [jsStyles.disabled(theme)]: disabled,\n [jsStyles.hovered(theme)]: !disabled && hovered,\n [jsStyles.warning(theme)]: !!warning,\n [jsStyles.error(theme)]: !!error,\n [jsStyles.dragOver(theme)]: isDraggable && !disabled,\n });\n\n const uploadButtonWrapperClassNames = cx({\n [jsStyles.windowDragOver(theme)]: isWindowDraggable && !disabled,\n });\n\n const uploadButtonIconClassNames = cx(jsStyles.icon(theme), {\n [jsStyles.iconDisabled(theme)]: disabled,\n });\n\n const hasOneFile = files.length === 1;\n const hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;\n\n const linkClassNames = cx(jsStyles.link(theme), {\n [jsStyles.linkHovered(theme)]: !disabled && hovered,\n [jsStyles.linkDisabled(theme)]: disabled,\n });\n\n return (\n <CommonWrapper {...props}>\n <div data-tid={FileUploaderDataTids.root} className={jsStyles.root(theme)} style={useMemoObject({ width })}>\n {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} />}\n <div className={uploadButtonWrapperClassNames}>\n <label\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n ref={labelRef}\n className={uploadButtonClassNames}\n >\n <div data-tid={FileUploaderDataTids.content} className={jsStyles.content()}>\n <span data-tid={FileUploaderDataTids.link} className={linkClassNames}>\n {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}\n </span>\n \n <div className={jsStyles.afterLinkText()}>\n {hasOneFileForSingle ? (\n <div className={jsStyles.singleFile()}>\n {renderFile(files[0], <FileUploaderFile file={files[0]} />)}\n </div>\n ) : (\n <>\n {locale.orDragHere} \n <div className={uploadButtonIconClassNames}>\n <UploadIcon />\n </div>\n </>\n )}\n </div>\n </div>\n <input\n {...inputProps}\n ref={inputRef}\n tabIndex={disabled ? -1 : 0}\n type=\"file\"\n disabled={disabled}\n multiple={multiple}\n className={jsStyles.fileInput()}\n onClick={stopPropagation}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд\n value={''}\n />\n </label>\n </div>\n </div>\n </CommonWrapper>\n );\n});\n\nexport interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {}\n\nexport const FileUploader = withFileUploaderControlProvider<FileUploaderProps, FileUploaderRef>(\n React.memo(_FileUploader),\n);\nFileUploader.displayName = 'FileUploader';\n"]}
|
|
1
|
+
{"version":3,"sources":["FileUploader.tsx"],"names":["React","useCallback","useContext","useImperativeHandle","useRef","useState","getAttachedFile","cx","useMemoObject","FileUploaderControlContext","useControlLocale","useUpload","useDrop","ThemeContext","UploadIcon","withFileUploaderControlProvider","keyListener","FileUploaderFile","FileUploaderFileList","isBrowser","CommonWrapper","FileUploaderFileValidationResult","jsStyles","stopPropagation","e","FileUploaderDataTids","root","content","link","defaultRenderFile","file","fileNode","_FileUploader","forwardRef","props","ref","theme","disabled","error","warning","multiple","width","fileUploaderWidth","hideFiles","onBlur","onFocus","onChange","request","validateBeforeUpload","onRequestSuccess","onRequestError","renderFile","inputProps","files","setFiles","removeFile","reset","setFileValidationResult","locale","inputRef","isAsync","isSingleMode","upload","tryValidateAndUpload","forEach","validationMessage","id","handleChange","newFiles","filesArray","Array","from","attachedFiles","map","length","handleDrop","event","dataTransfer","clearData","onDrop","isDraggable","labelRef","isWindowDraggable","windowRef","current","window","document","focus","isTabPressed","blur","getRootNode","rootNodeRef","focusedByTab","setFocusedByTab","handleInputChange","target","handleFocus","requestAnimationFrame","handleBlur","hovered","setHovered","uploadButtonClassNames","uploadButton","uploadButtonFocus","dragOver","uploadButtonWrapperClassNames","windowDragOver","uploadButtonIconClassNames","icon","iconDisabled","hasOneFile","hasOneFileForSingle","linkClassNames","linkHovered","linkDisabled","choosedFile","chooseFile","afterLinkText","singleFile","orDragHere","fileInput","FileUploader","memo","displayName"],"mappings":"kfAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,UAA7B,EAAyCC,mBAAzC,EAA8DC,MAA9D,EAAsEC,QAAtE,QAAsF,OAAtF;;AAEA,SAAmCC,eAAnC,QAA0D,8CAA1D;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,aAAT,QAA8B,2BAA9B;AACA,SAASC,0BAAT,QAA2C,+DAA3C;AACA,SAASC,gBAAT,QAAiC,2DAAjC;AACA,SAASC,SAAT,QAA0B,oDAA1B;AACA,SAASC,OAAT,QAAwB,qBAAxB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,UAAT,QAA2B,2BAA3B;;AAEA,SAASC,+BAAT,QAAgD,oEAAhD;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,gBAAT,QAAiC,sEAAjC;AACA,SAASC,oBAAT,QAAqC,8EAArC;AACA,SAASC,SAAT,QAA0B,kBAA1B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,gCAAT,QAAiD,qEAAjD;;AAEA,SAASC,QAAT,QAAyB,uBAAzB;;AAEA,IAAMC,eAAwC,GAAG,SAA3CA,eAA2C,CAACC,CAAD,UAAOA,CAAC,CAACD,eAAF,EAAP,EAAjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,OAAO,IAAME,oBAAoB,GAAG;AAClCC,EAAAA,IAAI,EAAE,oBAD4B;AAElCC,EAAAA,OAAO,EAAE,uBAFyB;AAGlCC,EAAAA,IAAI,EAAE,oBAH4B,EAA7B;;;AAMP,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,EAAiCC,QAAjC,UAAkEA,QAAlE,EAA1B;;AAEA,IAAMC,aAAa,gBAAGhC,KAAK,CAACiC,UAAN,CAAsD,UAACC,KAAD,EAA4BC,GAA5B,EAAoC;AAC9G,MAAMC,KAAK,GAAGlC,UAAU,CAACW,YAAD,CAAxB;;AAEA;AACEwB,EAAAA,QADF;;;;;;;;;;;;;;;AAgBIH,EAAAA,KAhBJ,CACEG,QADF,CAEEC,KAFF,GAgBIJ,KAhBJ,CAEEI,KAFF,CAGEC,OAHF,GAgBIL,KAhBJ,CAGEK,OAHF,mBAgBIL,KAhBJ,CAIEM,QAJF,CAIEA,QAJF,gCAIa,KAJb,kCAgBIN,KAhBJ,CAKEO,KALF,CAKEA,KALF,6BAKUL,KAAK,CAACM,iBALhB,mCAgBIR,KAhBJ,CAMES,SANF,CAMEA,SANF,iCAMc,KANd,oBAOEC,MAPF,GAgBIV,KAhBJ,CAOEU,MAPF,CAQEC,OARF,GAgBIX,KAhBJ,CAQEW,OARF,CASEC,QATF,GAgBIZ,KAhBJ,CASEY,QATF,CAUEC,OAVF,GAgBIb,KAhBJ,CAUEa,OAVF,CAWEC,oBAXF,GAgBId,KAhBJ,CAWEc,oBAXF,CAYEC,gBAZF,GAgBIf,KAhBJ,CAYEe,gBAZF,CAaEC,cAbF,GAgBIhB,KAhBJ,CAaEgB,cAbF,qBAgBIhB,KAhBJ,CAcEiB,UAdF,CAcEA,UAdF,kCAcetB,iBAdf,qBAeKuB,UAfL,iCAgBIlB,KAhBJ;;AAkBA,oBAAwEhC,UAAU,CAACO,0BAAD,CAAlF,CAAQ4C,KAAR,eAAQA,KAAR,CAAeC,QAAf,eAAeA,QAAf,CAAyBC,UAAzB,eAAyBA,UAAzB,CAAqCC,KAArC,eAAqCA,KAArC,CAA4CC,uBAA5C,eAA4CA,uBAA5C;;AAEA,MAAMC,MAAM,GAAGhD,gBAAgB,EAA/B;;AAEA,MAAMiD,QAAQ,GAAGvD,MAAM,CAAmB,IAAnB,CAAvB;;AAEA,MAAMwD,OAAO,GAAG,CAAC,CAACb,OAAlB;AACA,MAAMc,YAAY,GAAG,CAACrB,QAAtB;;AAEA,MAAMsB,MAAM,GAAGnD,SAAS,CAACoC,OAAD,EAAUE,gBAAV,EAA4BC,cAA5B,CAAxB;;AAEA,MAAMa,oBAAoB,GAAG9D,WAAW;AACtC,YAACoD,KAAD,EAAuC;AACrCA,IAAAA,KAAK,CAACW,OAAN,gGAAc,iBAAOlC,IAAP;AACckB,gBAAAA,oBADd,sEAC6CA,oBAAoB,CAAClB,IAAD,CADjE,2CACNmC,iBADM;;AAGZ,oBAAI,CAACA,iBAAL,EAAwB;AACtBL,kBAAAA,OAAO,IAAIE,MAAM,CAAChC,IAAD,CAAjB;AACD,iBAFD,MAEO;AACL2B,kBAAAA,uBAAuB,CAAC3B,IAAI,CAACoC,EAAN,EAAU7C,gCAAgC,CAACiB,KAAjC,CAAuC2B,iBAAvC,CAAV,CAAvB;AACD,iBAPW,wDAAd;;AASD,GAXqC;AAYtC,GAACjB,oBAAD,EAAuBY,OAAvB,EAAgCE,MAAhC,EAAwCL,uBAAxC,CAZsC,CAAxC;;;AAeA;AACA,MAAMU,YAAY,GAAGlE,WAAW;AAC9B,YAACmE,QAAD,EAA+B;AAC7B,QAAI,CAACA,QAAL,EAAe;AACb;AACD;;AAED,QAAIC,UAAU,GAAGC,KAAK,CAACC,IAAN,CAAWH,QAAX,CAAjB;;AAEA,QAAIP,YAAJ,EAAkB;AAChBQ,MAAAA,UAAU,GAAG,CAACA,UAAU,CAAC,CAAD,CAAX,CAAb;AACD;;AAED,QAAMG,aAAa,GAAGH,UAAU,CAACI,GAAX,CAAenE,eAAf,CAAtB;;AAEA,QAAIuD,YAAY,IAAIW,aAAa,CAACE,MAA9B,IAAwCrB,KAAK,CAACqB,MAAlD,EAA0D;AACxDnB,MAAAA,UAAU,CAACF,KAAK,CAAC,CAAD,CAAL,CAASa,EAAV,CAAV;AACD;;AAED,QAAIM,aAAa,CAACE,MAAlB,EAA0B;AACxBpB,MAAAA,QAAQ,CAACkB,aAAD,CAAR;AACAT,MAAAA,oBAAoB,CAACS,aAAD,CAApB;AACD;AACF,GAtB6B;AAuB9B,GAACT,oBAAD,EAAuBT,QAAvB,EAAiCO,YAAjC,EAA+CR,KAA/C,EAAsDE,UAAtD,CAvB8B,CAAhC;;;AA0BA,MAAMoB,UAAU,GAAG1E,WAAW;AAC5B,YAAC2E,KAAD,EAAW;AACT,QAAIvC,QAAJ,EAAc;AACZ;AACD;;AAED,QAAQwC,YAAR,GAAyBD,KAAzB,CAAQC,YAAR;AACA,QAAQxB,KAAR,GAAkBwB,YAAlB,CAAQxB,KAAR;;AAEA,QAAI,CAAAA,KAAK,QAAL,YAAAA,KAAK,CAAEqB,MAAP,IAAgB,CAApB,EAAuB;AACrBP,MAAAA,YAAY,CAACd,KAAD,CAAZ;AACAwB,MAAAA,YAAY,CAACC,SAAb;AACD;AACF,GAb2B;AAc5B,GAACX,YAAD,EAAe9B,QAAf,CAd4B,CAA9B;;;AAiBA,iBAAuCzB,OAAO,CAAmB,EAAEmE,MAAM,EAAEJ,UAAV,EAAnB,CAA9C,CAAQK,WAAR,YAAQA,WAAR,CAA0BC,QAA1B,YAAqB9C,GAArB;AACA,kBAA2DvB,OAAO,EAAlE,CAAqBsE,iBAArB,aAAQF,WAAR,CAA6CG,SAA7C,aAAwChD,GAAxC;;AAEA,MAAIhB,SAAJ,EAAe;AACbgE,IAAAA,SAAS,CAACC,OAAV,GAAoBC,MAAM,CAACC,QAA3B;AACD;;AAED,MAAMC,KAAK,GAAGtF,WAAW,CAAC,YAAM;AAC9Be,IAAAA,WAAW,CAACwE,YAAZ,GAA2B,IAA3B;AACA,yBAAA7B,QAAQ,CAACyB,OAAT,uCAAkBG,KAAlB;AACD,GAHwB,EAGtB,EAHsB,CAAzB;;AAKA,MAAME,IAAI,GAAGxF,WAAW,CAAC,YAAM;AAC7B,0BAAA0D,QAAQ,CAACyB,OAAT,wCAAkBK,IAAlB;AACD,GAFuB,EAErB,EAFqB,CAAxB;;AAIAtF,EAAAA,mBAAmB,CAACgC,GAAD,EAAM,oBAAO,EAAEoD,KAAK,EAALA,KAAF,EAASE,IAAI,EAAJA,IAAT,EAAejC,KAAK,EAALA,KAAf,EAAsBkC,WAAW,EAAE,+BAAMC,WAAW,CAACP,OAAlB,EAAnC,EAAP,EAAN,EAA8E;AAC/FjD,EAAAA,GAD+F;AAE/FsD,EAAAA,IAF+F;AAG/FF,EAAAA,KAH+F;AAI/F/B,EAAAA,KAJ+F,CAA9E,CAAnB;;;AAOA,kBAAwCnD,QAAQ,CAAC,KAAD,CAAhD,CAAOuF,YAAP,gBAAqBC,eAArB;AACA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAAClB,KAAD,EAAgD;AACxE9B,IAAAA,QAAQ,QAAR,YAAAA,QAAQ,CAAG8B,KAAH,CAAR;AACAT,IAAAA,YAAY,CAACS,KAAK,CAACmB,MAAN,CAAa1C,KAAd,CAAZ;AACD,GAHD;;AAKA,MAAM2C,WAAW,GAAG,SAAdA,WAAc,CAACxE,CAAD,EAA2C;AAC7D,QAAI,CAACa,QAAL,EAAe;AACb;AACA;AACA4D,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAIjF,WAAW,CAACwE,YAAhB,EAA8B;AAC5BK,UAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,OAJoB,CAArB;AAKAhD,MAAAA,OAAO,QAAP,YAAAA,OAAO,CAAGrB,CAAH,CAAP;AACD;AACF,GAXD;;AAaA,MAAM0E,UAAU,GAAG,SAAbA,UAAa,CAAC1E,CAAD,EAA2C;AAC5DqE,IAAAA,eAAe,CAAC,KAAD,CAAf;AACA,QAAI,CAACxD,QAAL,EAAe;AACbO,MAAAA,MAAM,QAAN,YAAAA,MAAM,CAAGpB,CAAH,CAAN;AACD;AACF,GALD;;AAOA,mBAA8BnB,QAAQ,CAAC,KAAD,CAAtC,CAAO8F,OAAP,iBAAgBC,UAAhB;;AAEA,MAAMC,sBAAsB,GAAG9F,EAAE,CAACe,QAAQ,CAACgF,YAAT,CAAsBlE,KAAtB,CAAD;AAC9Bd,EAAAA,QAAQ,CAACiF,iBAAT,CAA2BnE,KAA3B,CAD8B,IACMwD,YADN;AAE9BtE,EAAAA,QAAQ,CAACe,QAAT,CAAkBD,KAAlB,CAF8B,IAEHC,QAFG;AAG9Bf,EAAAA,QAAQ,CAAC6E,OAAT,CAAiB/D,KAAjB,CAH8B,IAGJ,CAACC,QAAD,IAAa8D,OAHT;AAI9B7E,EAAAA,QAAQ,CAACiB,OAAT,CAAiBH,KAAjB,CAJ8B,IAIJ,CAAC,CAACG,OAJE;AAK9BjB,EAAAA,QAAQ,CAACgB,KAAT,CAAeF,KAAf,CAL8B,IAKN,CAAC,CAACE,KALI;AAM9BhB,EAAAA,QAAQ,CAACkF,QAAT,CAAkBpE,KAAlB,CAN8B,IAMH4C,WAAW,IAAI,CAAC3C,QANb,OAAjC;;;AASA,MAAMoE,6BAA6B,GAAGlG,EAAE;AACrCe,EAAAA,QAAQ,CAACoF,cAAT,CAAwBtE,KAAxB,CADqC,IACJ8C,iBAAiB,IAAI,CAAC7C,QADlB,QAAxC;;;AAIA,MAAMsE,0BAA0B,GAAGpG,EAAE,CAACe,QAAQ,CAACsF,IAAT,CAAcxE,KAAd,CAAD;AAClCd,EAAAA,QAAQ,CAACuF,YAAT,CAAsBzE,KAAtB,CADkC,IACHC,QADG,QAArC;;;AAIA,MAAMyE,UAAU,GAAGzD,KAAK,CAACqB,MAAN,KAAiB,CAApC;AACA,MAAMqC,mBAAmB,GAAGlD,YAAY,IAAIiD,UAAhB,IAA8B,CAACnE,SAA3D;;AAEA,MAAMqE,cAAc,GAAGzG,EAAE,CAACe,QAAQ,CAACM,IAAT,CAAcQ,KAAd,CAAD;AACtBd,EAAAA,QAAQ,CAAC2F,WAAT,CAAqB7E,KAArB,CADsB,IACQ,CAACC,QAAD,IAAa8D,OADrB;AAEtB7E,EAAAA,QAAQ,CAAC4F,YAAT,CAAsB9E,KAAtB,CAFsB,IAESC,QAFT,QAAzB;;;AAKA,MAAMsD,WAAW,GAAGvF,MAAM,CAAC,IAAD,CAA1B;;AAEA;AACE,wBAAC,aAAD,EAAmB8B,KAAnB;AACE;AACE,kBAAUT,oBAAoB,CAACC,IADjC;AAEE,MAAA,SAAS,EAAEJ,QAAQ,CAACI,IAAT,CAAcU,KAAd,CAFb;AAGE,MAAA,KAAK,EAAE5B,aAAa,CAAC,EAAEiC,KAAK,EAALA,KAAF,EAAD,CAHtB;AAIE,MAAA,GAAG,EAAEkD,WAJP;;AAMG,KAAChD,SAAD,IAAc,CAACkB,YAAf,IAA+B,CAAC,CAACR,KAAK,CAACqB,MAAvC,iBAAiD,oBAAC,oBAAD,IAAsB,UAAU,EAAEvB,UAAlC,GANpD;AAOE,iCAAK,SAAS,EAAEsD,6BAAhB;AACE;AACE,MAAA,YAAY,EAAE,gCAAML,UAAU,CAAC,IAAD,CAAhB,EADhB;AAEE,MAAA,YAAY,EAAE,gCAAMA,UAAU,CAAC,KAAD,CAAhB,EAFhB;AAGE,MAAA,GAAG,EAAEnB,QAHP;AAIE,MAAA,SAAS,EAAEoB,sBAJb;;AAME,iCAAK,YAAU5E,oBAAoB,CAACE,OAApC,EAA6C,SAAS,EAAEL,QAAQ,CAACK,OAAT,EAAxD;AACE,kCAAM,YAAUF,oBAAoB,CAACG,IAArC,EAA2C,SAAS,EAAEoF,cAAtD;AACGD,IAAAA,mBAAmB,GAAGrD,MAAM,CAACyD,WAAV,GAAwBzD,MAAM,CAAC0D,UADrD,CADF;;;AAKE,iCAAK,SAAS,EAAE9F,QAAQ,CAAC+F,aAAT,EAAhB;AACGN,IAAAA,mBAAmB;AAClB,iCAAK,SAAS,EAAEzF,QAAQ,CAACgG,UAAT,EAAhB;AACGnE,IAAAA,UAAU,CAACE,KAAK,CAAC,CAAD,CAAN,eAAW,oBAAC,gBAAD,IAAkB,IAAI,EAAEA,KAAK,CAAC,CAAD,CAA7B,GAAX,CADb,CADkB;;;AAKlB;AACGK,IAAAA,MAAM,CAAC6D,UADV;AAEE,iCAAK,SAAS,EAAEZ,0BAAhB;AACE,wBAAC,UAAD,OADF,CAFF,CANJ,CALF,CANF;;;;;;AA0BE;AACMvD,IAAAA,UADN;AAEE,MAAA,GAAG,EAAEO,QAFP;AAGE,MAAA,QAAQ,EAAEtB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAH5B;AAIE,MAAA,IAAI,EAAC,MAJP;AAKE,MAAA,QAAQ,EAAEA,QALZ;AAME,MAAA,QAAQ,EAAEG,QANZ;AAOE,MAAA,SAAS,EAAElB,QAAQ,CAACkG,SAAT,EAPb;AAQE,MAAA,OAAO,EAAEjG,eARX;AASE,MAAA,QAAQ,EAAEuE,iBATZ;AAUE,MAAA,OAAO,EAAEE,WAVX;AAWE,MAAA,MAAM,EAAEE;AACR;AAZF,QAaE,KAAK,EAAE,EAbT,IA1BF,CADF,CAPF,CADF,CADF;;;;;;;AAwDD,CAjOqB,CAAtB;;;;AAqOA,OAAO,IAAMuB,YAAY,GAAG1G,+BAA+B;AACzDf,KAAK,CAAC0H,IAAN,CAAW1F,aAAX,CADyD,CAApD;;AAGPyF,YAAY,CAACE,WAAb,GAA2B,cAA3B","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef, useState } from 'react';\n\nimport { FileUploaderAttachedFile, getAttachedFile } from '../../internal/FileUploaderControl/fileUtils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { InstanceWithRootNode } from '../../lib/rootNode';\nimport { useMemoObject } from '../../hooks/useMemoObject';\nimport { FileUploaderControlContext } from '../../internal/FileUploaderControl/FileUploaderControlContext';\nimport { useControlLocale } from '../../internal/FileUploaderControl/hooks/useControlLocale';\nimport { useUpload } from '../../internal/FileUploaderControl/hooks/useUpload';\nimport { useDrop } from '../../hooks/useDrop';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { UploadIcon } from '../../internal/icons/16px';\nimport { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';\nimport { withFileUploaderControlProvider } from '../../internal/FileUploaderControl/withFileUploaderControlProvider';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { FileUploaderFile } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';\nimport { FileUploaderFileList } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';\nimport { isBrowser } from '../../lib/client';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';\n\nimport { jsStyles } from './FileUploader.styles';\n\nconst stopPropagation: React.ReactEventHandler = (e) => e.stopPropagation();\n\ninterface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {\n /** Состояние ошибки всего контрола */\n error?: boolean;\n /** Состояние предупреждения всего контрола */\n warning?: boolean;\n /** Свойство ширины. */\n width?: React.CSSProperties['width'];\n /** Свойство, скрывающее отображение файлов. */\n hideFiles?: boolean;\n\n /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */\n request?: (file: FileUploaderAttachedFile) => Promise<void>;\n /** Срабатывает при удачной попытке отправки через request */\n onRequestSuccess?: (fileId: string) => void;\n /** Срабатывает при неудачной попытке отправки через request */\n onRequestError?: (fileId: string) => void;\n\n /**\n * Функция валидации каждого файла.\n * Срабатывает после выбора файлов и перед попыткой отправить в request.\n * Чтобы вывести валидацию ошибки, промис должен вернуть строку.\n * */\n validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;\n\n /**\n * Функция, позволяющая кастомизировать файлы.\n * Через нее можно вешать кастомные валидации на каждый файл.\n * */\n renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;\n}\n\nexport interface FileUploaderRef extends InstanceWithRootNode {\n focus: () => void;\n blur: () => void;\n /** Сбрасывает выбранные файлы */\n reset: () => void;\n}\n\nexport const FileUploaderDataTids = {\n root: 'FileUploader__root',\n content: 'FileUploader__content',\n link: 'FileUploader__link',\n} as const;\n\nconst defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;\n\nconst _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {\n const theme = useContext(ThemeContext);\n\n const {\n disabled,\n error,\n warning,\n multiple = false,\n width = theme.fileUploaderWidth,\n hideFiles = false,\n onBlur,\n onFocus,\n onChange,\n request,\n validateBeforeUpload,\n onRequestSuccess,\n onRequestError,\n renderFile = defaultRenderFile,\n ...inputProps\n } = props;\n\n const { files, setFiles, removeFile, reset, setFileValidationResult } = useContext(FileUploaderControlContext);\n\n const locale = useControlLocale();\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const isAsync = !!request;\n const isSingleMode = !multiple;\n\n const upload = useUpload(request, onRequestSuccess, onRequestError);\n\n const tryValidateAndUpload = useCallback(\n (files: FileUploaderAttachedFile[]) => {\n files.forEach(async (file) => {\n const validationMessage = validateBeforeUpload && (await validateBeforeUpload(file));\n\n if (!validationMessage) {\n isAsync && upload(file);\n } else {\n setFileValidationResult(file.id, FileUploaderFileValidationResult.error(validationMessage));\n }\n });\n },\n [validateBeforeUpload, isAsync, upload, setFileValidationResult],\n );\n\n /** common part **/\n const handleChange = useCallback(\n (newFiles: FileList | null) => {\n if (!newFiles) {\n return;\n }\n\n let filesArray = Array.from(newFiles);\n\n if (isSingleMode) {\n filesArray = [filesArray[0]];\n }\n\n const attachedFiles = filesArray.map(getAttachedFile);\n\n if (isSingleMode && attachedFiles.length && files.length) {\n removeFile(files[0].id);\n }\n\n if (attachedFiles.length) {\n setFiles(attachedFiles);\n tryValidateAndUpload(attachedFiles);\n }\n },\n [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile],\n );\n\n const handleDrop = useCallback(\n (event) => {\n if (disabled) {\n return;\n }\n\n const { dataTransfer } = event;\n const { files } = dataTransfer;\n\n if (files?.length > 0) {\n handleChange(files);\n dataTransfer.clearData();\n }\n },\n [handleChange, disabled],\n );\n\n const { isDraggable, ref: labelRef } = useDrop<HTMLLabelElement>({ onDrop: handleDrop });\n const { isDraggable: isWindowDraggable, ref: windowRef } = useDrop<Document>();\n\n if (isBrowser) {\n windowRef.current = window.document;\n }\n\n const focus = useCallback(() => {\n keyListener.isTabPressed = true;\n inputRef.current?.focus();\n }, []);\n\n const blur = useCallback(() => {\n inputRef.current?.blur();\n }, []);\n\n useImperativeHandle(ref, () => ({ focus, blur, reset, getRootNode: () => rootNodeRef.current }), [\n ref,\n blur,\n focus,\n reset,\n ]);\n\n const [focusedByTab, setFocusedByTab] = useState(false);\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n handleChange(event.target.files);\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (!disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n onFocus?.(e);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedByTab(false);\n if (!disabled) {\n onBlur?.(e);\n }\n };\n\n const [hovered, setHovered] = useState(false);\n\n const uploadButtonClassNames = cx(jsStyles.uploadButton(theme), {\n [jsStyles.uploadButtonFocus(theme)]: focusedByTab,\n [jsStyles.disabled(theme)]: disabled,\n [jsStyles.hovered(theme)]: !disabled && hovered,\n [jsStyles.warning(theme)]: !!warning,\n [jsStyles.error(theme)]: !!error,\n [jsStyles.dragOver(theme)]: isDraggable && !disabled,\n });\n\n const uploadButtonWrapperClassNames = cx({\n [jsStyles.windowDragOver(theme)]: isWindowDraggable && !disabled,\n });\n\n const uploadButtonIconClassNames = cx(jsStyles.icon(theme), {\n [jsStyles.iconDisabled(theme)]: disabled,\n });\n\n const hasOneFile = files.length === 1;\n const hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;\n\n const linkClassNames = cx(jsStyles.link(theme), {\n [jsStyles.linkHovered(theme)]: !disabled && hovered,\n [jsStyles.linkDisabled(theme)]: disabled,\n });\n\n const rootNodeRef = useRef(null);\n\n return (\n <CommonWrapper {...props}>\n <div\n data-tid={FileUploaderDataTids.root}\n className={jsStyles.root(theme)}\n style={useMemoObject({ width })}\n ref={rootNodeRef}\n >\n {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} />}\n <div className={uploadButtonWrapperClassNames}>\n <label\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n ref={labelRef}\n className={uploadButtonClassNames}\n >\n <div data-tid={FileUploaderDataTids.content} className={jsStyles.content()}>\n <span data-tid={FileUploaderDataTids.link} className={linkClassNames}>\n {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}\n </span>\n \n <div className={jsStyles.afterLinkText()}>\n {hasOneFileForSingle ? (\n <div className={jsStyles.singleFile()}>\n {renderFile(files[0], <FileUploaderFile file={files[0]} />)}\n </div>\n ) : (\n <>\n {locale.orDragHere} \n <div className={uploadButtonIconClassNames}>\n <UploadIcon />\n </div>\n </>\n )}\n </div>\n </div>\n <input\n {...inputProps}\n ref={inputRef}\n tabIndex={disabled ? -1 : 0}\n type=\"file\"\n disabled={disabled}\n multiple={multiple}\n className={jsStyles.fileInput()}\n onClick={stopPropagation}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд\n value={''}\n />\n </label>\n </div>\n </div>\n </CommonWrapper>\n );\n});\n\nexport interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {}\n\nexport const FileUploader = withFileUploaderControlProvider<FileUploaderProps, FileUploaderRef>(\n React.memo(_FileUploader),\n);\nFileUploader.displayName = 'FileUploader';\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FileUploaderAttachedFile } from '../../internal/FileUploaderControl/fileUtils';
|
|
3
|
+
import { InstanceWithRootNode } from '../../lib/rootNode';
|
|
3
4
|
import { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';
|
|
4
5
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
5
6
|
import { Nullable } from '../../typings/utility-types';
|
|
@@ -30,7 +31,7 @@ interface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTML
|
|
|
30
31
|
* */
|
|
31
32
|
renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;
|
|
32
33
|
}
|
|
33
|
-
export interface FileUploaderRef {
|
|
34
|
+
export interface FileUploaderRef extends InstanceWithRootNode {
|
|
34
35
|
focus: () => void;
|
|
35
36
|
blur: () => void;
|
|
36
37
|
/** Сбрасывает выбранные файлы */
|
|
@@ -14,3 +14,16 @@ function handleRestore() {
|
|
|
14
14
|
|
|
15
15
|
<FxInput auto={auto} value={value} onValueChange={handleValueChange} onRestore={handleRestore} />;
|
|
16
16
|
```
|
|
17
|
+
|
|
18
|
+
Очистить значение в `FxInput`'е можно с помощью пустой строки или `undefined`
|
|
19
|
+
```jsx harmony
|
|
20
|
+
import { Group, Button } from '@skbkontur/react-ui';
|
|
21
|
+
|
|
22
|
+
const [value, setValue] = React.useState(12345);
|
|
23
|
+
|
|
24
|
+
<Group>
|
|
25
|
+
<FxInput value={value} onValueChange={setValue} />
|
|
26
|
+
<Button onClick={() => setValue(undefined)}>Undefined</Button>
|
|
27
|
+
<Button onClick={() => setValue('')}>Пустая строка</Button>
|
|
28
|
+
</Group>
|
|
29
|
+
```
|
|
@@ -434,7 +434,7 @@ var Input = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$C
|
|
|
434
434
|
var disabled = this.props.disabled;
|
|
435
435
|
var iconNode = icon instanceof Function ? icon() : icon;
|
|
436
436
|
return /*#__PURE__*/React.createElement("span", {
|
|
437
|
-
className: cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[styles.iconDisabled()] = disabled, _cx5))
|
|
437
|
+
className: cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), (_cx5 = {}, _cx5[styles.iconFocus(this.theme)] = this.state.focused, _cx5[styles.iconDisabled()] = disabled, _cx5))
|
|
438
438
|
}, iconNode);
|
|
439
439
|
};
|
|
440
440
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Input.tsx"],"names":["invariant","React","raf","isIE11","isEdge","isKeyBackspace","isKeyDelete","someKeys","needsPolyfillPlaceholder","MaskedInput","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","styles","InputDataTids","root","Input","getProps","defaultProps","state","blinking","focused","selectAllId","blinkTimeout","input","selectAll","setSelectionRange","value","length","delaySelectAll","cancelDelayedSelectAll","cancel","cancelBlink","callback","clearTimeout","setState","renderMain","props","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onKeyPress","onValueChange","width","error","warning","leftIcon","rightIcon","borderless","align","type","mask","maskChar","alwaysShowMask","size","placeholder","selectAllOnFocus","disabled","onUnexpectedInput","prefix","suffix","formatChars","rest","labelProps","className","theme","getSizeClassName","focus","blink","focusFallback","warningFallback","errorFallback","style","inputProps","inputFocus","inputDisabled","onChange","handleChange","onFocus","handleFocus","handleKeyDown","handleKeyPress","onBlur","handleBlur","textAlign","ref","refInput","isMaskVisible","undefined","renderMaskedInput","createElement","sideContainer","renderLeftIcon","renderPrefix","wrapper","renderPlaceholder","rightContainer","renderSuffix","renderRightIcon","element","event","fieldIsEmpty","target","e","isDeleteKey","currentTarget","repeat","handleUnexpectedInput","maxLength","handleMaskedValueChange","prefixDisabled","suffixDisabled","componentWillUnmount","blur","getNode","offsetWidth","window","setTimeout","start","end","Error","document","activeElement","render","setRootNode","getIconSizeClassname","right","rightIconLarge","leftIconLarge","rightIconMedium","leftIconMedium","rightIconSmall","leftIconSmall","renderIcon","icon","sizeClassName","iconNode","Function","useDefaultColor","iconDisabled","defaultValue","placeholderDisabled","placeholderFocus","sizeLarge","sizeLargeFallback","sizeMedium","sizeMediumFallback","sizeSmall","sizeSmallFallback","Boolean","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport invariant from 'invariant';\nimport React from 'react';\nimport raf from 'raf';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isKeyBackspace, isKeyDelete, someKeys } from '../../lib/events/keyboard/identifiers';\nimport { needsPolyfillPlaceholder } from '../../lib/needsPolyfillPlaceholder';\nimport { Nullable, Override } from '../../typings/utility-types';\nimport { MaskedInput } from '../../internal/MaskedInput';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Input.styles';\n\nexport type InputSize = 'small' | 'medium' | 'large';\nexport type InputAlign = 'left' | 'center' | 'right';\nexport type InputType = 'password' | 'text';\nexport type InputIconType = React.ReactNode | (() => React.ReactNode);\n\nexport interface InputProps\n extends CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /**\n * Иконка слева\n * Если `ReactNode` применяются дефолтные стили для иконки\n * Если `() => ReactNode` применяются только стили для позиционирование\n */\n leftIcon?: InputIconType;\n /**\n * Иконка справа\n * Если `ReactNode` применяются дефолтные стили для иконки\n * Если `() => ReactNode` применяются только стили для позиционирование\n */\n rightIcon?: InputIconType;\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n /** Режим прозрачной рамки */\n borderless?: boolean;\n /** Выравнивание текста */\n align?: InputAlign;\n /** Паттерн маски */\n mask?: Nullable<string>;\n /** Символ маски */\n maskChar?: Nullable<string>;\n /**\n * Словарь символов-регулярок для задания маски\n * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n */\n formatChars?: Record<string, string>;\n /** Показывать символы маски */\n alwaysShowMask?: boolean;\n /** Размер */\n size?: InputSize;\n /** onValueChange */\n onValueChange?: (value: string) => void;\n /** Вызывается на label */\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n /** Вызывается на label */\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n /** Вызывается на label */\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n /** Тип */\n type?: InputType;\n /** Значение */\n value?: string;\n capture?: boolean;\n\n /**\n * Префикс\n * `ReactNode` перед значением, но после иконки\n */\n prefix?: React.ReactNode;\n /**\n * Суффикс\n * `ReactNode` после значения, но перед правой иконкой\n */\n suffix?: React.ReactNode;\n /** Выделять введенное значение при фокусе */\n selectAllOnFocus?: boolean;\n /**\n * Обработчик неправильного ввода.\n * По-умолчанию, инпут вспыхивает синим.\n * Если передан - вызывается переданный обработчик,\n * в таком случае вспыхивание можно вызвать\n * публичным методом инстанса `blink()`.\n *\n * @param value значение инпута.\n */\n onUnexpectedInput?: (value: string) => void;\n }\n > {}\n\nexport interface InputState {\n blinking: boolean;\n focused: boolean;\n needsPolyfillPlaceholder: boolean;\n}\n\nexport const InputDataTids = {\n root: 'Input__root',\n} as const;\n\ntype DefaultProps = Required<Pick<InputProps, 'size'>>;\n\n/**\n * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.\n * Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`\n */\n@rootNode\nexport class Input extends React.Component<InputProps, InputState> {\n public static __KONTUR_REACT_UI__ = 'Input';\n\n public static defaultProps: DefaultProps = {\n size: 'small',\n };\n\n private getProps = createPropsGetter(Input.defaultProps);\n\n public state: InputState = {\n needsPolyfillPlaceholder,\n blinking: false,\n focused: false,\n };\n\n private selectAllId: number | null = null;\n private theme!: Theme;\n private blinkTimeout = 0;\n private input: HTMLInputElement | null = null;\n private setRootNode!: TSetRootNode;\n\n public componentWillUnmount() {\n if (this.blinkTimeout) {\n clearTimeout(this.blinkTimeout);\n }\n this.cancelDelayedSelectAll();\n }\n\n /**\n * @public\n */\n public focus() {\n invariant(this.input, 'Cannot call \"focus\" because Input is not mounted');\n this.input.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n invariant(this.input, 'Cannot call \"blur\" because Input is not mounted');\n this.input.blur();\n }\n\n /**\n * @public\n */\n public getNode() {\n return this.input;\n }\n\n /**\n * @public\n */\n public blink() {\n if (this.blinkTimeout) {\n this.cancelBlink(() => {\n // trigger reflow to restart animation\n // @see https://css-tricks.com/restart-css-animation/#article-header-id-0\n void (this.input && this.input.offsetWidth);\n this.blink();\n });\n return;\n }\n this.setState({ blinking: true }, () => {\n this.blinkTimeout = window.setTimeout(this.cancelBlink, 150);\n });\n }\n\n /**\n * @public\n * @param {number} start\n * @param {number} end\n */\n public setSelectionRange(start: number, end: number) {\n if (!this.input) {\n throw new Error('Cannot call \"setSelectionRange\" on unmounted Input');\n }\n\n if (document.activeElement !== this.input) {\n this.focus();\n }\n\n this.input.setSelectionRange(start, end);\n }\n\n public get isMaskVisible(): boolean {\n const { mask, alwaysShowMask } = this.props;\n const { focused } = this.state;\n return Boolean(mask && (focused || alwaysShowMask));\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n {this.renderMain}\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public selectAll = (): void => {\n if (this.input) {\n this.setSelectionRange(0, this.input.value.length);\n }\n };\n\n private delaySelectAll = (): number => (this.selectAllId = raf(this.selectAll));\n\n private cancelDelayedSelectAll = (): void => {\n if (this.selectAllId) {\n raf.cancel(this.selectAllId);\n this.selectAllId = null;\n }\n };\n\n private cancelBlink = (callback?: () => void): void => {\n if (this.blinkTimeout) {\n clearTimeout(this.blinkTimeout);\n this.blinkTimeout = 0;\n if (this.state.blinking) {\n this.setState({ blinking: false }, callback);\n return;\n }\n }\n if (callback) {\n callback();\n }\n };\n\n private renderMain = (props: CommonWrapperRestProps<InputProps>) => {\n const {\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onKeyPress,\n onValueChange,\n width,\n error,\n warning,\n leftIcon,\n rightIcon,\n borderless,\n value,\n align,\n type,\n mask,\n maskChar,\n alwaysShowMask,\n size,\n placeholder,\n selectAllOnFocus,\n disabled,\n onUnexpectedInput,\n prefix,\n suffix,\n formatChars,\n ...rest\n } = props;\n\n const { blinking, focused } = this.state;\n\n const labelProps = {\n className: cx(styles.root(this.theme), this.getSizeClassName(), {\n [styles.focus(this.theme)]: focused,\n [styles.blink(this.theme)]: blinking,\n [styles.borderless()]: borderless && !focused,\n [styles.disabled(this.theme)]: disabled,\n [styles.warning(this.theme)]: warning,\n [styles.error(this.theme)]: error,\n [styles.focusFallback(this.theme)]: focused && (isIE11 || isEdge),\n [styles.warningFallback(this.theme)]: warning && (isIE11 || isEdge),\n [styles.errorFallback(this.theme)]: error && (isIE11 || isEdge),\n }),\n style: { width },\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n };\n\n const inputProps = {\n ...rest,\n className: cx(styles.input(this.theme), {\n [styles.inputFocus(this.theme)]: focused,\n [styles.inputDisabled(this.theme)]: disabled,\n }),\n value,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onKeyDown: this.handleKeyDown,\n onKeyPress: this.handleKeyPress,\n onBlur: this.handleBlur,\n style: { textAlign: align },\n ref: this.refInput,\n type: 'text',\n placeholder: !this.isMaskVisible && !needsPolyfillPlaceholder ? placeholder : undefined,\n disabled,\n };\n\n if (type === 'password') {\n inputProps.type = type;\n }\n\n const input = mask ? this.renderMaskedInput(inputProps, mask) : React.createElement('input', inputProps);\n\n return (\n <label data-tid={InputDataTids.root} {...labelProps}>\n <span className={styles.sideContainer()}>\n {this.renderLeftIcon()}\n {this.renderPrefix()}\n </span>\n <span className={styles.wrapper()}>\n {input}\n {this.renderPlaceholder()}\n </span>\n <span className={cx(styles.sideContainer(), styles.rightContainer())}>\n {this.renderSuffix()}\n {this.renderRightIcon()}\n </span>\n </label>\n );\n };\n\n private renderMaskedInput(\n inputProps: React.InputHTMLAttributes<HTMLInputElement> & {\n capture?: boolean;\n },\n mask: string,\n ) {\n return (\n <MaskedInput\n {...inputProps}\n mask={mask}\n maskChar={this.props.maskChar}\n alwaysShowMask={this.props.alwaysShowMask}\n formatChars={this.props.formatChars}\n onChange={this.props.onChange}\n onValueChange={this.handleMaskedValueChange}\n onUnexpectedInput={this.handleUnexpectedInput}\n />\n );\n }\n\n private getIconSizeClassname(right = false) {\n switch (this.getProps().size) {\n case 'large':\n return right ? styles.rightIconLarge(this.theme) : styles.leftIconLarge(this.theme);\n case 'medium':\n return right ? styles.rightIconMedium(this.theme) : styles.leftIconMedium(this.theme);\n case 'small':\n default:\n return right ? styles.rightIconSmall(this.theme) : styles.leftIconSmall(this.theme);\n }\n }\n\n private renderLeftIcon() {\n return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());\n }\n\n private renderRightIcon() {\n return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));\n }\n\n private renderIcon(icon: InputIconType, sizeClassName: string) {\n if (!icon) {\n return null;\n }\n const { disabled } = this.props;\n const iconNode = icon instanceof Function ? icon() : icon;\n\n return (\n <span\n className={cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), {\n [styles.iconDisabled()]: disabled,\n })}\n >\n {iconNode}\n </span>\n );\n }\n\n private renderPlaceholder() {\n const { disabled } = this.props;\n const { focused } = this.state;\n let placeholder = null;\n\n if (\n this.state.needsPolyfillPlaceholder &&\n this.props.placeholder &&\n !this.isMaskVisible &&\n !this.props.value &&\n !this.props.defaultValue\n ) {\n placeholder = (\n <div\n className={cx(styles.placeholder(this.theme), {\n [styles.placeholderDisabled(this.theme)]: disabled,\n [styles.placeholderFocus(this.theme)]: focused,\n })}\n style={{ textAlign: this.props.align || 'inherit' }}\n >\n {this.props.placeholder}\n </div>\n );\n }\n\n return placeholder;\n }\n\n private getSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return cx({\n [styles.sizeLarge(this.theme)]: true,\n [styles.sizeLargeFallback(this.theme)]: isIE11 || isEdge,\n });\n case 'medium':\n return cx({\n [styles.sizeMedium(this.theme)]: true,\n [styles.sizeMediumFallback(this.theme)]: isIE11 || isEdge,\n });\n case 'small':\n default:\n return cx({\n [styles.sizeSmall(this.theme)]: true,\n [styles.sizeSmallFallback(this.theme)]: isIE11 || isEdge,\n });\n }\n }\n\n private refInput = (element: HTMLInputElement | MaskedInput | null) => {\n if (element instanceof MaskedInput) {\n this.input = element.input;\n } else {\n this.input = element;\n }\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (needsPolyfillPlaceholder) {\n const fieldIsEmpty = event.target.value === '';\n if (this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {\n this.setState({ needsPolyfillPlaceholder: fieldIsEmpty });\n }\n }\n\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.value);\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({\n focused: true,\n });\n\n if (this.props.selectAllOnFocus) {\n // https://github.com/facebook/react/issues/7769\n this.input && !isIE11 ? this.selectAll() : this.delaySelectAll();\n }\n\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n }\n\n const isDeleteKey = someKeys(isKeyBackspace, isKeyDelete)(e);\n\n if (!e.currentTarget.value && isDeleteKey && !e.repeat) {\n this.handleUnexpectedInput();\n }\n };\n\n private handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyPress) {\n this.props.onKeyPress(event);\n }\n\n if (this.props.maxLength === event.currentTarget.value.length) {\n this.handleUnexpectedInput(event.currentTarget.value);\n }\n };\n\n private handleMaskedValueChange = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private handleUnexpectedInput = (value: string = this.props.value || '') => {\n if (this.props.onUnexpectedInput) {\n this.props.onUnexpectedInput(value);\n } else {\n this.blink();\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({ focused: false });\n\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n };\n\n private renderPrefix = () => {\n const { prefix, disabled } = this.props;\n\n if (!prefix) {\n return null;\n }\n\n return (\n <span className={cx(styles.prefix(this.theme), { [styles.prefixDisabled(this.theme)]: disabled })}>{prefix}</span>\n );\n };\n\n private renderSuffix = () => {\n const { suffix, disabled } = this.props;\n\n if (!suffix) {\n return null;\n }\n\n return (\n <span className={cx(styles.suffix(this.theme), { [styles.suffixDisabled(this.theme)]: disabled })}>{suffix}</span>\n );\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Input.tsx"],"names":["invariant","React","raf","isIE11","isEdge","isKeyBackspace","isKeyDelete","someKeys","needsPolyfillPlaceholder","MaskedInput","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","styles","InputDataTids","root","Input","getProps","defaultProps","state","blinking","focused","selectAllId","blinkTimeout","input","selectAll","setSelectionRange","value","length","delaySelectAll","cancelDelayedSelectAll","cancel","cancelBlink","callback","clearTimeout","setState","renderMain","props","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onKeyPress","onValueChange","width","error","warning","leftIcon","rightIcon","borderless","align","type","mask","maskChar","alwaysShowMask","size","placeholder","selectAllOnFocus","disabled","onUnexpectedInput","prefix","suffix","formatChars","rest","labelProps","className","theme","getSizeClassName","focus","blink","focusFallback","warningFallback","errorFallback","style","inputProps","inputFocus","inputDisabled","onChange","handleChange","onFocus","handleFocus","handleKeyDown","handleKeyPress","onBlur","handleBlur","textAlign","ref","refInput","isMaskVisible","undefined","renderMaskedInput","createElement","sideContainer","renderLeftIcon","renderPrefix","wrapper","renderPlaceholder","rightContainer","renderSuffix","renderRightIcon","element","event","fieldIsEmpty","target","e","isDeleteKey","currentTarget","repeat","handleUnexpectedInput","maxLength","handleMaskedValueChange","prefixDisabled","suffixDisabled","componentWillUnmount","blur","getNode","offsetWidth","window","setTimeout","start","end","Error","document","activeElement","render","setRootNode","getIconSizeClassname","right","rightIconLarge","leftIconLarge","rightIconMedium","leftIconMedium","rightIconSmall","leftIconSmall","renderIcon","icon","sizeClassName","iconNode","Function","useDefaultColor","iconFocus","iconDisabled","defaultValue","placeholderDisabled","placeholderFocus","sizeLarge","sizeLargeFallback","sizeMedium","sizeMediumFallback","sizeSmall","sizeSmallFallback","Boolean","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport invariant from 'invariant';\nimport React from 'react';\nimport raf from 'raf';\n\nimport { isIE11, isEdge } from '../../lib/client';\nimport { isKeyBackspace, isKeyDelete, someKeys } from '../../lib/events/keyboard/identifiers';\nimport { needsPolyfillPlaceholder } from '../../lib/needsPolyfillPlaceholder';\nimport { Nullable, Override } from '../../typings/utility-types';\nimport { MaskedInput } from '../../internal/MaskedInput';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Input.styles';\n\nexport type InputSize = 'small' | 'medium' | 'large';\nexport type InputAlign = 'left' | 'center' | 'right';\nexport type InputType = 'password' | 'text';\nexport type InputIconType = React.ReactNode | (() => React.ReactNode);\n\nexport interface InputProps\n extends CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /**\n * Иконка слева\n * Если `ReactNode` применяются дефолтные стили для иконки\n * Если `() => ReactNode` применяются только стили для позиционирование\n */\n leftIcon?: InputIconType;\n /**\n * Иконка справа\n * Если `ReactNode` применяются дефолтные стили для иконки\n * Если `() => ReactNode` применяются только стили для позиционирование\n */\n rightIcon?: InputIconType;\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n /** Режим прозрачной рамки */\n borderless?: boolean;\n /** Выравнивание текста */\n align?: InputAlign;\n /** Паттерн маски */\n mask?: Nullable<string>;\n /** Символ маски */\n maskChar?: Nullable<string>;\n /**\n * Словарь символов-регулярок для задания маски\n * @default { '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }\n */\n formatChars?: Record<string, string>;\n /** Показывать символы маски */\n alwaysShowMask?: boolean;\n /** Размер */\n size?: InputSize;\n /** onValueChange */\n onValueChange?: (value: string) => void;\n /** Вызывается на label */\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n /** Вызывается на label */\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n /** Вызывается на label */\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n /** Тип */\n type?: InputType;\n /** Значение */\n value?: string;\n capture?: boolean;\n\n /**\n * Префикс\n * `ReactNode` перед значением, но после иконки\n */\n prefix?: React.ReactNode;\n /**\n * Суффикс\n * `ReactNode` после значения, но перед правой иконкой\n */\n suffix?: React.ReactNode;\n /** Выделять введенное значение при фокусе */\n selectAllOnFocus?: boolean;\n /**\n * Обработчик неправильного ввода.\n * По-умолчанию, инпут вспыхивает синим.\n * Если передан - вызывается переданный обработчик,\n * в таком случае вспыхивание можно вызвать\n * публичным методом инстанса `blink()`.\n *\n * @param value значение инпута.\n */\n onUnexpectedInput?: (value: string) => void;\n }\n > {}\n\nexport interface InputState {\n blinking: boolean;\n focused: boolean;\n needsPolyfillPlaceholder: boolean;\n}\n\nexport const InputDataTids = {\n root: 'Input__root',\n} as const;\n\ntype DefaultProps = Required<Pick<InputProps, 'size'>>;\n\n/**\n * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.\n * Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`\n */\n@rootNode\nexport class Input extends React.Component<InputProps, InputState> {\n public static __KONTUR_REACT_UI__ = 'Input';\n\n public static defaultProps: DefaultProps = {\n size: 'small',\n };\n\n private getProps = createPropsGetter(Input.defaultProps);\n\n public state: InputState = {\n needsPolyfillPlaceholder,\n blinking: false,\n focused: false,\n };\n\n private selectAllId: number | null = null;\n private theme!: Theme;\n private blinkTimeout = 0;\n private input: HTMLInputElement | null = null;\n private setRootNode!: TSetRootNode;\n\n public componentWillUnmount() {\n if (this.blinkTimeout) {\n clearTimeout(this.blinkTimeout);\n }\n this.cancelDelayedSelectAll();\n }\n\n /**\n * @public\n */\n public focus() {\n invariant(this.input, 'Cannot call \"focus\" because Input is not mounted');\n this.input.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n invariant(this.input, 'Cannot call \"blur\" because Input is not mounted');\n this.input.blur();\n }\n\n /**\n * @public\n */\n public getNode() {\n return this.input;\n }\n\n /**\n * @public\n */\n public blink() {\n if (this.blinkTimeout) {\n this.cancelBlink(() => {\n // trigger reflow to restart animation\n // @see https://css-tricks.com/restart-css-animation/#article-header-id-0\n void (this.input && this.input.offsetWidth);\n this.blink();\n });\n return;\n }\n this.setState({ blinking: true }, () => {\n this.blinkTimeout = window.setTimeout(this.cancelBlink, 150);\n });\n }\n\n /**\n * @public\n * @param {number} start\n * @param {number} end\n */\n public setSelectionRange(start: number, end: number) {\n if (!this.input) {\n throw new Error('Cannot call \"setSelectionRange\" on unmounted Input');\n }\n\n if (document.activeElement !== this.input) {\n this.focus();\n }\n\n this.input.setSelectionRange(start, end);\n }\n\n public get isMaskVisible(): boolean {\n const { mask, alwaysShowMask } = this.props;\n const { focused } = this.state;\n return Boolean(mask && (focused || alwaysShowMask));\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n {this.renderMain}\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public selectAll = (): void => {\n if (this.input) {\n this.setSelectionRange(0, this.input.value.length);\n }\n };\n\n private delaySelectAll = (): number => (this.selectAllId = raf(this.selectAll));\n\n private cancelDelayedSelectAll = (): void => {\n if (this.selectAllId) {\n raf.cancel(this.selectAllId);\n this.selectAllId = null;\n }\n };\n\n private cancelBlink = (callback?: () => void): void => {\n if (this.blinkTimeout) {\n clearTimeout(this.blinkTimeout);\n this.blinkTimeout = 0;\n if (this.state.blinking) {\n this.setState({ blinking: false }, callback);\n return;\n }\n }\n if (callback) {\n callback();\n }\n };\n\n private renderMain = (props: CommonWrapperRestProps<InputProps>) => {\n const {\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onKeyPress,\n onValueChange,\n width,\n error,\n warning,\n leftIcon,\n rightIcon,\n borderless,\n value,\n align,\n type,\n mask,\n maskChar,\n alwaysShowMask,\n size,\n placeholder,\n selectAllOnFocus,\n disabled,\n onUnexpectedInput,\n prefix,\n suffix,\n formatChars,\n ...rest\n } = props;\n\n const { blinking, focused } = this.state;\n\n const labelProps = {\n className: cx(styles.root(this.theme), this.getSizeClassName(), {\n [styles.focus(this.theme)]: focused,\n [styles.blink(this.theme)]: blinking,\n [styles.borderless()]: borderless && !focused,\n [styles.disabled(this.theme)]: disabled,\n [styles.warning(this.theme)]: warning,\n [styles.error(this.theme)]: error,\n [styles.focusFallback(this.theme)]: focused && (isIE11 || isEdge),\n [styles.warningFallback(this.theme)]: warning && (isIE11 || isEdge),\n [styles.errorFallback(this.theme)]: error && (isIE11 || isEdge),\n }),\n style: { width },\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n };\n\n const inputProps = {\n ...rest,\n className: cx(styles.input(this.theme), {\n [styles.inputFocus(this.theme)]: focused,\n [styles.inputDisabled(this.theme)]: disabled,\n }),\n value,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onKeyDown: this.handleKeyDown,\n onKeyPress: this.handleKeyPress,\n onBlur: this.handleBlur,\n style: { textAlign: align },\n ref: this.refInput,\n type: 'text',\n placeholder: !this.isMaskVisible && !needsPolyfillPlaceholder ? placeholder : undefined,\n disabled,\n };\n\n if (type === 'password') {\n inputProps.type = type;\n }\n\n const input = mask ? this.renderMaskedInput(inputProps, mask) : React.createElement('input', inputProps);\n\n return (\n <label data-tid={InputDataTids.root} {...labelProps}>\n <span className={styles.sideContainer()}>\n {this.renderLeftIcon()}\n {this.renderPrefix()}\n </span>\n <span className={styles.wrapper()}>\n {input}\n {this.renderPlaceholder()}\n </span>\n <span className={cx(styles.sideContainer(), styles.rightContainer())}>\n {this.renderSuffix()}\n {this.renderRightIcon()}\n </span>\n </label>\n );\n };\n\n private renderMaskedInput(\n inputProps: React.InputHTMLAttributes<HTMLInputElement> & {\n capture?: boolean;\n },\n mask: string,\n ) {\n return (\n <MaskedInput\n {...inputProps}\n mask={mask}\n maskChar={this.props.maskChar}\n alwaysShowMask={this.props.alwaysShowMask}\n formatChars={this.props.formatChars}\n onChange={this.props.onChange}\n onValueChange={this.handleMaskedValueChange}\n onUnexpectedInput={this.handleUnexpectedInput}\n />\n );\n }\n\n private getIconSizeClassname(right = false) {\n switch (this.getProps().size) {\n case 'large':\n return right ? styles.rightIconLarge(this.theme) : styles.leftIconLarge(this.theme);\n case 'medium':\n return right ? styles.rightIconMedium(this.theme) : styles.leftIconMedium(this.theme);\n case 'small':\n default:\n return right ? styles.rightIconSmall(this.theme) : styles.leftIconSmall(this.theme);\n }\n }\n\n private renderLeftIcon() {\n return this.renderIcon(this.props.leftIcon, this.getIconSizeClassname());\n }\n\n private renderRightIcon() {\n return this.renderIcon(this.props.rightIcon, this.getIconSizeClassname(true));\n }\n\n private renderIcon(icon: InputIconType, sizeClassName: string) {\n if (!icon) {\n return null;\n }\n const { disabled } = this.props;\n const iconNode = icon instanceof Function ? icon() : icon;\n\n return (\n <span\n className={cx(styles.icon(), sizeClassName, styles.useDefaultColor(this.theme), {\n [styles.iconFocus(this.theme)]: this.state.focused,\n [styles.iconDisabled()]: disabled,\n })}\n >\n {iconNode}\n </span>\n );\n }\n\n private renderPlaceholder() {\n const { disabled } = this.props;\n const { focused } = this.state;\n let placeholder = null;\n\n if (\n this.state.needsPolyfillPlaceholder &&\n this.props.placeholder &&\n !this.isMaskVisible &&\n !this.props.value &&\n !this.props.defaultValue\n ) {\n placeholder = (\n <div\n className={cx(styles.placeholder(this.theme), {\n [styles.placeholderDisabled(this.theme)]: disabled,\n [styles.placeholderFocus(this.theme)]: focused,\n })}\n style={{ textAlign: this.props.align || 'inherit' }}\n >\n {this.props.placeholder}\n </div>\n );\n }\n\n return placeholder;\n }\n\n private getSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return cx({\n [styles.sizeLarge(this.theme)]: true,\n [styles.sizeLargeFallback(this.theme)]: isIE11 || isEdge,\n });\n case 'medium':\n return cx({\n [styles.sizeMedium(this.theme)]: true,\n [styles.sizeMediumFallback(this.theme)]: isIE11 || isEdge,\n });\n case 'small':\n default:\n return cx({\n [styles.sizeSmall(this.theme)]: true,\n [styles.sizeSmallFallback(this.theme)]: isIE11 || isEdge,\n });\n }\n }\n\n private refInput = (element: HTMLInputElement | MaskedInput | null) => {\n if (element instanceof MaskedInput) {\n this.input = element.input;\n } else {\n this.input = element;\n }\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (needsPolyfillPlaceholder) {\n const fieldIsEmpty = event.target.value === '';\n if (this.state.needsPolyfillPlaceholder !== fieldIsEmpty) {\n this.setState({ needsPolyfillPlaceholder: fieldIsEmpty });\n }\n }\n\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.value);\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({\n focused: true,\n });\n\n if (this.props.selectAllOnFocus) {\n // https://github.com/facebook/react/issues/7769\n this.input && !isIE11 ? this.selectAll() : this.delaySelectAll();\n }\n\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n }\n\n const isDeleteKey = someKeys(isKeyBackspace, isKeyDelete)(e);\n\n if (!e.currentTarget.value && isDeleteKey && !e.repeat) {\n this.handleUnexpectedInput();\n }\n };\n\n private handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (this.props.onKeyPress) {\n this.props.onKeyPress(event);\n }\n\n if (this.props.maxLength === event.currentTarget.value.length) {\n this.handleUnexpectedInput(event.currentTarget.value);\n }\n };\n\n private handleMaskedValueChange = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private handleUnexpectedInput = (value: string = this.props.value || '') => {\n if (this.props.onUnexpectedInput) {\n this.props.onUnexpectedInput(value);\n } else {\n this.blink();\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.setState({ focused: false });\n\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n };\n\n private renderPrefix = () => {\n const { prefix, disabled } = this.props;\n\n if (!prefix) {\n return null;\n }\n\n return (\n <span className={cx(styles.prefix(this.theme), { [styles.prefixDisabled(this.theme)]: disabled })}>{prefix}</span>\n );\n };\n\n private renderSuffix = () => {\n const { suffix, disabled } = this.props;\n\n if (!suffix) {\n return null;\n }\n\n return (\n <span className={cx(styles.suffix(this.theme), { [styles.suffixDisabled(this.theme)]: disabled })}>{suffix}</span>\n );\n };\n}\n"]}
|
|
@@ -4,6 +4,18 @@ import SearchIcon from '@skbkontur/react-icons/Search';
|
|
|
4
4
|
<Input leftIcon={<SearchIcon />} />;
|
|
5
5
|
```
|
|
6
6
|
|
|
7
|
+
Очистить значение в `Input`'е можно только с помощью пустой строки
|
|
8
|
+
```jsx harmony
|
|
9
|
+
import { Button, Group } from '@skbkontur/react-ui';
|
|
10
|
+
|
|
11
|
+
const [value, setValue] = React.useState('Значение');
|
|
12
|
+
|
|
13
|
+
<Group>
|
|
14
|
+
<Input value={value} onValueChange={setValue} />
|
|
15
|
+
<Button onClick={() => setValue('')}>Очистить</Button>
|
|
16
|
+
</Group>
|
|
17
|
+
```
|
|
18
|
+
|
|
7
19
|
Пример с префиксом:
|
|
8
20
|
|
|
9
21
|
```jsx harmony
|