@salutejs/plasma-new-hope 0.90.0-canary.1260.9580678742.0 → 0.91.0-canary.1261.9609334871.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Dropdown/Dropdown.js +15 -16
- package/cjs/components/Dropdown/Dropdown.js.map +1 -1
- package/cjs/components/Popover/Popover.js +4 -5
- package/cjs/components/Popover/Popover.js.map +1 -1
- package/cjs/components/TextArea/TextArea.js +6 -4
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/hooks/useAutoResize.js +10 -4
- package/cjs/components/TextArea/hooks/useAutoResize.js.map +1 -1
- package/cjs/components/_Icon/IconRoot.js +1 -1
- package/cjs/components/_Icon/IconRoot.js.map +1 -1
- package/es/components/Dropdown/Dropdown.js +11 -12
- package/es/components/Dropdown/Dropdown.js.map +1 -1
- package/es/components/Popover/Popover.js +4 -5
- package/es/components/Popover/Popover.js.map +1 -1
- package/es/components/TextArea/TextArea.js +7 -5
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/hooks/useAutoResize.js +10 -4
- package/es/components/TextArea/hooks/useAutoResize.js.map +1 -1
- package/es/components/_Icon/IconRoot.js +1 -1
- package/es/components/_Icon/IconRoot.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Button/Button.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Dropdown/Dropdown.js +11 -12
- package/styled-components/cjs/components/Popover/Popover.js +4 -5
- package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +7 -5
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +1 -1
- package/styled-components/cjs/components/TextArea/TextArea.js +11 -4
- package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx +45 -6
- package/styled-components/cjs/components/TextArea/hooks/useAutoResize.js +10 -4
- package/styled-components/cjs/components/_Icon/IconRoot.js +1 -1
- package/styled-components/es/components/Button/Button.template-doc.mdx +3 -3
- package/styled-components/es/components/Dropdown/Dropdown.js +11 -12
- package/styled-components/es/components/Popover/Popover.js +4 -5
- package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +7 -5
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +1 -1
- package/styled-components/es/components/TextArea/TextArea.js +12 -4
- package/styled-components/es/components/TextArea/TextArea.template-doc.mdx +45 -6
- package/styled-components/es/components/TextArea/hooks/useAutoResize.js +10 -4
- package/styled-components/es/components/_Icon/IconRoot.js +1 -1
- package/types/components/Dropdown/Dropdown.d.ts +2 -2
- package/types/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/types/components/Dropdown/Dropdown.types.d.ts +0 -4
- package/types/components/Dropdown/Dropdown.types.d.ts.map +1 -1
- package/types/components/Popover/Popover.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.d.ts +2 -2
- package/types/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/components/TextArea/TextArea.types.d.ts +49 -23
- package/types/components/TextArea/TextArea.types.d.ts.map +1 -1
- package/types/components/TextArea/hooks/useAutoResize.d.ts +1 -1
- package/types/components/TextArea/hooks/useAutoResize.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts +31 -1
- package/types/examples/plasma_b2c/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts +31 -1
- package/types/examples/plasma_web/components/TextArea/TextArea.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/TextArea/TextArea.d.ts +31 -1
- package/types/examples/sds_engineer/components/TextArea/TextArea.d.ts.map +1 -1
@@ -24,6 +24,11 @@ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableTo
|
|
24
24
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
25
25
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
26
26
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
27
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
28
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
29
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
30
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
31
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
27
32
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
28
33
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
29
34
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
@@ -144,15 +149,17 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
|
|
144
149
|
}
|
145
150
|
onChange === null || onChange === void 0 || onChange(event);
|
146
151
|
}, [value, onChange]);
|
147
|
-
var dynamicLabelClasses = getDynamicLabelClasses({
|
152
|
+
var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
|
148
153
|
size: size,
|
149
154
|
readOnly: readOnly,
|
150
155
|
label: label,
|
151
156
|
labelPlacement: labelPlacement,
|
152
|
-
autoResize: autoResize,
|
153
|
-
rows: rows,
|
154
157
|
value: value || uncontrolledValue || defaultValue
|
155
|
-
},
|
158
|
+
}, rows ? {
|
159
|
+
rows: rows
|
160
|
+
} : {
|
161
|
+
autoResize: autoResize
|
162
|
+
}), focused);
|
156
163
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
157
164
|
view: overriddenView,
|
158
165
|
size: size,
|
@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
11
11
|
|
12
12
|
## Использование
|
13
13
|
Компонент `TextArea` может содержать иконку (или кнопку) справа.
|
14
|
-
Для этого используйте свойство
|
14
|
+
Для этого используйте свойство `contentRight`:
|
15
15
|
|
16
16
|
```tsx live
|
17
17
|
import React from 'react';
|
@@ -31,16 +31,55 @@ export function App() {
|
|
31
31
|
}
|
32
32
|
```
|
33
33
|
|
34
|
-
|
34
|
+
### Размеры компонента
|
35
|
+
Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
|
35
36
|
указав значения в `rem` или соответствующие свойствам css значения.
|
37
|
+
`height` и `width` отвечают за **всю** высоту и ширину компонента.
|
36
38
|
|
37
|
-
|
39
|
+
```tsx live
|
40
|
+
import React from 'react';
|
41
|
+
import { TextArea } from '@salutejs/{{ package }}';
|
42
|
+
|
43
|
+
export function App() {
|
44
|
+
return (
|
45
|
+
<div>
|
46
|
+
<TextArea
|
47
|
+
placeholder="Введите значение"
|
48
|
+
defaultValue="Значение"
|
49
|
+
height={10}
|
50
|
+
width={20}
|
51
|
+
/>
|
52
|
+
</div>
|
53
|
+
);
|
54
|
+
}
|
55
|
+
```
|
56
|
+
|
57
|
+
Свойства `rows` и `cols` указываются в абсолютных единицах, отвечают за фиксированное количество строк и столбцов.
|
58
|
+
|
59
|
+
```tsx live
|
60
|
+
import React from 'react';
|
61
|
+
import { TextArea } from '@salutejs/{{ package }}';
|
62
|
+
|
63
|
+
export function App() {
|
64
|
+
return (
|
65
|
+
<div>
|
66
|
+
<TextArea
|
67
|
+
placeholder="Введите значение"
|
68
|
+
defaultValue="Значение"
|
69
|
+
rows={5}
|
70
|
+
cols={20}
|
71
|
+
/>
|
72
|
+
</div>
|
73
|
+
);
|
74
|
+
}
|
75
|
+
```
|
76
|
+
|
77
|
+
### Autoresize
|
38
78
|
Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
|
39
79
|
Для этого необходимо использовать свойство `autoResize`.
|
40
80
|
При этом, если пользователь вручную регулирует высоту(`resize`), то она так и остается пользовательской.
|
41
81
|
|
42
|
-
|
43
|
-
указав их в `rem`.
|
82
|
+
Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.
|
44
83
|
|
45
84
|
```tsx live
|
46
85
|
import React from 'react';
|
@@ -85,4 +124,4 @@ export function App() {
|
|
85
124
|
</div>
|
86
125
|
);
|
87
126
|
}
|
88
|
-
```
|
127
|
+
```
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.useAutoResize = exports.ROOT_FONT_SIZE = void 0;
|
7
7
|
var _react = /*#__PURE__*/require("react");
|
8
8
|
var ROOT_FONT_SIZE = exports.ROOT_FONT_SIZE = 16;
|
9
|
-
var useAutoResize = exports.useAutoResize = function useAutoResize(active, ref, value,
|
9
|
+
var useAutoResize = exports.useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto) {
|
10
10
|
var isManualResize = (0, _react.useRef)(false);
|
11
11
|
var previousHeight = (0, _react.useRef)();
|
12
12
|
(0, _react.useEffect)(function () {
|
@@ -17,9 +17,15 @@ var useAutoResize = exports.useAutoResize = function useAutoResize(active, ref,
|
|
17
17
|
isManualResize.current = true;
|
18
18
|
return;
|
19
19
|
}
|
20
|
-
|
21
|
-
var
|
22
|
-
var
|
20
|
+
var style = getComputedStyle(ref.current);
|
21
|
+
var lineHeight = parseInt(style.lineHeight, 10);
|
22
|
+
var lineHeightInRem = lineHeight / ROOT_FONT_SIZE;
|
23
|
+
var minAutoHeight = minAuto ? minAuto * lineHeightInRem : 0;
|
24
|
+
ref.current.style.height = "".concat(minAutoHeight, "rem");
|
25
|
+
var lines = Math.floor(ref.current.scrollHeight / lineHeight);
|
26
|
+
var newScrollHeight = lines * lineHeightInRem;
|
27
|
+
var maxAutoHeight = maxAuto ? maxAuto * lineHeightInRem : newScrollHeight;
|
28
|
+
var newHeight = Math.min(newScrollHeight, maxAutoHeight);
|
23
29
|
ref.current.style.height = "".concat(newHeight, "rem");
|
24
30
|
previousHeight.current = newHeight;
|
25
31
|
}
|
@@ -40,7 +40,7 @@ var IconRoot = exports.IconRoot = function IconRoot(_ref4) {
|
|
40
40
|
color = _ref4.color,
|
41
41
|
className = _ref4.className,
|
42
42
|
sizeCustomProperty = _ref4.sizeCustomProperty;
|
43
|
-
var c = color || 'var(--
|
43
|
+
var c = color || 'var(--text-primary)';
|
44
44
|
var w = sizeCustomProperty ? "var(".concat(sizeCustomProperty, ")") : "".concat(sizeMap[size], "rem");
|
45
45
|
return /*#__PURE__*/_react["default"].createElement(StyledRoot, {
|
46
46
|
"aria-hidden": true,
|
@@ -86,7 +86,7 @@ import { Button } from '@salutejs/{{package}}';
|
|
86
86
|
|
87
87
|
export function App() {
|
88
88
|
return (
|
89
|
-
<div style
|
89
|
+
<div style=\{{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
90
90
|
<Button text="Button" stretching="fixed" />
|
91
91
|
<Button text="Button" stretching="auto" />
|
92
92
|
<Button text="Button" stretching="filled" />
|
@@ -99,7 +99,7 @@ export function App() {
|
|
99
99
|
Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
|
100
100
|
Возможные значения свойства `contentPlacing`:
|
101
101
|
+ `default` – контент центрируется;
|
102
|
-
+ `relaxed` – контент
|
102
|
+
+ `relaxed` – контент располагается по краям.
|
103
103
|
|
104
104
|
```tsx live
|
105
105
|
import React from 'react';
|
@@ -107,7 +107,7 @@ import { Button } from '@salutejs/{{package}}';
|
|
107
107
|
|
108
108
|
export function App() {
|
109
109
|
return (
|
110
|
-
<div style
|
110
|
+
<div style=\{{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
111
111
|
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
|
112
112
|
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
|
113
113
|
</div>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow"
|
1
|
+
var _excluded = ["items", "children", "placement", "offset", "closeOnOverlayClick", "onToggle", "size", "view", "itemRole", "className", "listWidth", "listHeight", "listOverflow", "closeOnSelect", "onHover", "onItemSelect", "onItemClick", "trigger", "variant", "hasArrow"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -54,7 +54,6 @@ export var dropdownRoot = function dropdownRoot(Root) {
|
|
54
54
|
variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
|
55
55
|
_ref$hasArrow = _ref.hasArrow,
|
56
56
|
hasArrow = _ref$hasArrow === void 0 ? true : _ref$hasArrow,
|
57
|
-
portal = _ref.portal,
|
58
57
|
rest = _objectWithoutProperties(_ref, _excluded);
|
59
58
|
var _useReducer = useReducer(pathReducer, []),
|
60
59
|
_useReducer2 = _slicedToArray(_useReducer, 2),
|
@@ -106,8 +105,15 @@ export var dropdownRoot = function dropdownRoot(Root) {
|
|
106
105
|
}, '').replace(/^(\/)/, '');
|
107
106
|
return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
|
108
107
|
};
|
109
|
-
return /*#__PURE__*/React.createElement(
|
108
|
+
return /*#__PURE__*/React.createElement(Root, _extends({
|
109
|
+
className: cx(className, classes.dropdownRoot),
|
110
|
+
ref: ref,
|
111
|
+
view: view,
|
112
|
+
size: size,
|
113
|
+
items: items
|
114
|
+
}, rest), /*#__PURE__*/React.createElement(StyledPopover, {
|
110
115
|
isOpen: isCurrentListOpen,
|
116
|
+
usePortal: false,
|
111
117
|
onToggle: handleGlobalToggle,
|
112
118
|
offset: offset,
|
113
119
|
placement: getPlacements(placement),
|
@@ -121,15 +127,8 @@ export var dropdownRoot = function dropdownRoot(Root) {
|
|
121
127
|
'aria-activedescendant': getActiveDescendant(),
|
122
128
|
onKeyDown: onKeyDown
|
123
129
|
}),
|
124
|
-
preventOverflow: false
|
125
|
-
|
126
|
-
frame: portal
|
127
|
-
}, /*#__PURE__*/React.createElement(Root, _extends({
|
128
|
-
className: cx(className, classes.dropdownRoot),
|
129
|
-
ref: ref,
|
130
|
-
view: view,
|
131
|
-
size: size
|
132
|
-
}, rest), /*#__PURE__*/React.createElement(Ul, {
|
130
|
+
preventOverflow: false
|
131
|
+
}, /*#__PURE__*/React.createElement(Ul, {
|
133
132
|
listHeight: listHeight,
|
134
133
|
listOverflow: listOverflow,
|
135
134
|
role: "tree",
|
@@ -114,20 +114,19 @@ export var popoverRoot = function popoverRoot(Root) {
|
|
114
114
|
}, [closeOnEsc, isOpen, onToggle]);
|
115
115
|
var onDocumentClick = useCallback(function (event) {
|
116
116
|
if (isOpen && closeOnOverlayClick && onToggle) {
|
117
|
-
var _rootRef$current
|
117
|
+
var _rootRef$current;
|
118
118
|
var targetIsRoot = event.target === rootRef.current;
|
119
119
|
var rootHasTarget = (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.contains(event.target);
|
120
|
-
|
121
|
-
if (!targetIsRoot && !rootHasTarget && !popoverRootHasTarget) {
|
120
|
+
if (!targetIsRoot && !rootHasTarget) {
|
122
121
|
onToggle(false, event);
|
123
122
|
}
|
124
123
|
}
|
125
124
|
}, [closeOnOverlayClick, isOpen, onToggle]);
|
126
125
|
var onClick = useCallback(function (event) {
|
127
126
|
if (trigger === 'click') {
|
128
|
-
var _popoverRef$
|
127
|
+
var _popoverRef$current;
|
129
128
|
var targetIsPopover = event.target === popoverRef.current;
|
130
|
-
var rootHasTarget = (_popoverRef$
|
129
|
+
var rootHasTarget = (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.contains(event.target);
|
131
130
|
if (!targetIsPopover && !rootHasTarget) {
|
132
131
|
onToggle === null || onToggle === void 0 || onToggle(!isOpen, event);
|
133
132
|
}
|
@@ -31,9 +31,11 @@ export function App() {
|
|
31
31
|
Компоненты `Radiobox` следует объединять в `RadioGroup`
|
32
32
|
|
33
33
|
```tsx live
|
34
|
-
<
|
35
|
-
<
|
36
|
-
|
37
|
-
|
38
|
-
|
34
|
+
<div>
|
35
|
+
<RadioGroup aria-labelledby="radiogroup-title-id">
|
36
|
+
<H3 id="radiogroup-title-id" style=\{{"margin-bottom": "12px"}}>Заголовок</H3>
|
37
|
+
<Radiobox name="radio-1" label="Радиокнопка 1" description="Описание 1" defaultChecked />
|
38
|
+
<Radiobox name="radio-1" label="Радиокнопка 2" description="Описание 2" />
|
39
|
+
</RadioGroup>
|
40
|
+
</div>
|
39
41
|
```
|
@@ -1,9 +1,15 @@
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
1
2
|
var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
|
2
3
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
4
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
4
5
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
5
6
|
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
6
7
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
8
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
9
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
10
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
11
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
12
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
7
13
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
8
14
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
9
15
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
@@ -135,15 +141,17 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
135
141
|
}
|
136
142
|
onChange === null || onChange === void 0 || onChange(event);
|
137
143
|
}, [value, onChange]);
|
138
|
-
var dynamicLabelClasses = getDynamicLabelClasses({
|
144
|
+
var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
|
139
145
|
size: size,
|
140
146
|
readOnly: readOnly,
|
141
147
|
label: label,
|
142
148
|
labelPlacement: labelPlacement,
|
143
|
-
autoResize: autoResize,
|
144
|
-
rows: rows,
|
145
149
|
value: value || uncontrolledValue || defaultValue
|
146
|
-
},
|
150
|
+
}, rows ? {
|
151
|
+
rows: rows
|
152
|
+
} : {
|
153
|
+
autoResize: autoResize
|
154
|
+
}), focused);
|
147
155
|
return /*#__PURE__*/React.createElement(Root, {
|
148
156
|
view: overriddenView,
|
149
157
|
size: size,
|
@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
11
11
|
|
12
12
|
## Использование
|
13
13
|
Компонент `TextArea` может содержать иконку (или кнопку) справа.
|
14
|
-
Для этого используйте свойство
|
14
|
+
Для этого используйте свойство `contentRight`:
|
15
15
|
|
16
16
|
```tsx live
|
17
17
|
import React from 'react';
|
@@ -31,16 +31,55 @@ export function App() {
|
|
31
31
|
}
|
32
32
|
```
|
33
33
|
|
34
|
-
|
34
|
+
### Размеры компонента
|
35
|
+
Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
|
35
36
|
указав значения в `rem` или соответствующие свойствам css значения.
|
37
|
+
`height` и `width` отвечают за **всю** высоту и ширину компонента.
|
36
38
|
|
37
|
-
|
39
|
+
```tsx live
|
40
|
+
import React from 'react';
|
41
|
+
import { TextArea } from '@salutejs/{{ package }}';
|
42
|
+
|
43
|
+
export function App() {
|
44
|
+
return (
|
45
|
+
<div>
|
46
|
+
<TextArea
|
47
|
+
placeholder="Введите значение"
|
48
|
+
defaultValue="Значение"
|
49
|
+
height={10}
|
50
|
+
width={20}
|
51
|
+
/>
|
52
|
+
</div>
|
53
|
+
);
|
54
|
+
}
|
55
|
+
```
|
56
|
+
|
57
|
+
Свойства `rows` и `cols` указываются в абсолютных единицах, отвечают за фиксированное количество строк и столбцов.
|
58
|
+
|
59
|
+
```tsx live
|
60
|
+
import React from 'react';
|
61
|
+
import { TextArea } from '@salutejs/{{ package }}';
|
62
|
+
|
63
|
+
export function App() {
|
64
|
+
return (
|
65
|
+
<div>
|
66
|
+
<TextArea
|
67
|
+
placeholder="Введите значение"
|
68
|
+
defaultValue="Значение"
|
69
|
+
rows={5}
|
70
|
+
cols={20}
|
71
|
+
/>
|
72
|
+
</div>
|
73
|
+
);
|
74
|
+
}
|
75
|
+
```
|
76
|
+
|
77
|
+
### Autoresize
|
38
78
|
Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
|
39
79
|
Для этого необходимо использовать свойство `autoResize`.
|
40
80
|
При этом, если пользователь вручную регулирует высоту(`resize`), то она так и остается пользовательской.
|
41
81
|
|
42
|
-
|
43
|
-
указав их в `rem`.
|
82
|
+
Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.
|
44
83
|
|
45
84
|
```tsx live
|
46
85
|
import React from 'react';
|
@@ -85,4 +124,4 @@ export function App() {
|
|
85
124
|
</div>
|
86
125
|
);
|
87
126
|
}
|
88
|
-
```
|
127
|
+
```
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { useEffect, useRef } from 'react';
|
2
2
|
export var ROOT_FONT_SIZE = 16;
|
3
|
-
export var useAutoResize = function useAutoResize(active, ref, value,
|
3
|
+
export var useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto) {
|
4
4
|
var isManualResize = useRef(false);
|
5
5
|
var previousHeight = useRef();
|
6
6
|
useEffect(function () {
|
@@ -11,9 +11,15 @@ export var useAutoResize = function useAutoResize(active, ref, value, minHeight,
|
|
11
11
|
isManualResize.current = true;
|
12
12
|
return;
|
13
13
|
}
|
14
|
-
|
15
|
-
var
|
16
|
-
var
|
14
|
+
var style = getComputedStyle(ref.current);
|
15
|
+
var lineHeight = parseInt(style.lineHeight, 10);
|
16
|
+
var lineHeightInRem = lineHeight / ROOT_FONT_SIZE;
|
17
|
+
var minAutoHeight = minAuto ? minAuto * lineHeightInRem : 0;
|
18
|
+
ref.current.style.height = "".concat(minAutoHeight, "rem");
|
19
|
+
var lines = Math.floor(ref.current.scrollHeight / lineHeight);
|
20
|
+
var newScrollHeight = lines * lineHeightInRem;
|
21
|
+
var maxAutoHeight = maxAuto ? maxAuto * lineHeightInRem : newScrollHeight;
|
22
|
+
var newHeight = Math.min(newScrollHeight, maxAutoHeight);
|
17
23
|
ref.current.style.height = "".concat(newHeight, "rem");
|
18
24
|
previousHeight.current = newHeight;
|
19
25
|
}
|
@@ -33,7 +33,7 @@ export var IconRoot = function IconRoot(_ref4) {
|
|
33
33
|
color = _ref4.color,
|
34
34
|
className = _ref4.className,
|
35
35
|
sizeCustomProperty = _ref4.sizeCustomProperty;
|
36
|
-
var c = color || 'var(--
|
36
|
+
var c = color || 'var(--text-primary)';
|
37
37
|
var w = sizeCustomProperty ? "var(".concat(sizeCustomProperty, ")") : "".concat(sizeMap[size], "rem");
|
38
38
|
return /*#__PURE__*/React.createElement(StyledRoot, {
|
39
39
|
"aria-hidden": true,
|
@@ -4,11 +4,11 @@ import type { DropdownProps } from './Dropdown.types';
|
|
4
4
|
/**
|
5
5
|
* Выпадающий список.
|
6
6
|
*/
|
7
|
-
export declare const dropdownRoot: (Root: RootProps<HTMLDivElement,
|
7
|
+
export declare const dropdownRoot: (Root: RootProps<HTMLDivElement, DropdownProps>) => React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
|
8
8
|
export declare const dropdownConfig: {
|
9
9
|
name: string;
|
10
10
|
tag: string;
|
11
|
-
layout: (Root: RootProps<HTMLDivElement,
|
11
|
+
layout: (Root: RootProps<HTMLDivElement, DropdownProps>) => React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
|
12
12
|
base: import("@linaria/core").LinariaClassName;
|
13
13
|
variations: {
|
14
14
|
view: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU1C,OAAO,KAAK,EAAE,aAAa,EAA0B,MAAM,kBAAkB,CAAC;AAK9E;;GAEG;AACH,eAAO,MAAM,YAAY,SAAU,UAAU,cAAc,EAAE,
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAU1C,OAAO,KAAK,EAAE,aAAa,EAA0B,MAAM,kBAAkB,CAAC;AAK9E;;GAEG;AACH,eAAO,MAAM,YAAY,SAAU,UAAU,cAAc,EAAE,aAAa,CAAC,yFAgItE,CAAC;AAEN,eAAO,MAAM,cAAc;;;mBAlIQ,UAAU,cAAc,EAAE,aAAa,CAAC;;;;;;;;;;;;;;CAmJ1E,CAAC"}
|
@@ -71,10 +71,6 @@ export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
|
|
71
71
|
* @default normal
|
72
72
|
*/
|
73
73
|
variant?: 'normal' | 'tight';
|
74
|
-
/**
|
75
|
-
* Портал для выпадающего списка. Принимает id контейнера или ref.
|
76
|
-
*/
|
77
|
-
portal?: string | React.RefObject<HTMLElement>;
|
78
74
|
/**
|
79
75
|
* Обработчик клика по item.
|
80
76
|
* @deprecated использовать onItemSelect.
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE,oBAAY,sBAAsB,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACzE,oBAAY,iBAAiB,GAAG,sBAAsB,GAAG,MAAM,CAAC;AAEhE,oBAAY,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAC,sBAAsB,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,KAAK,KAAK,IAAI,CAAC;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B
|
1
|
+
{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE,oBAAY,sBAAsB,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACzE,oBAAY,iBAAiB,GAAG,sBAAsB,GAAG,MAAM,CAAC;AAEhE,oBAAY,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAC,sBAAsB,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,KAAK,KAAK,IAAI,CAAC;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACxE;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,oBAAY,sBAAsB,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAMpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAItE,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,WAAW,SAAU,UAAU,cAAc,EAAE,YAAY,CAAC,+
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+D,MAAM,OAAO,CAAC;AAMpF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAItE,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,iBAAiB,wBAAwB,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,WAAW,SAAU,UAAU,cAAc,EAAE,YAAY,CAAC,+JAwPpE,CAAC;AAEN,eAAO,MAAM,aAAa;;;mBA1PQ,UAAU,cAAc,EAAE,YAAY,CAAC;;;;;;;;;;CAuQxE,CAAC"}
|
@@ -2,11 +2,11 @@ import React from 'react';
|
|
2
2
|
import type { RootProps } from '../../engines/types';
|
3
3
|
import type { TextAreaProps } from './TextArea.types';
|
4
4
|
export declare const getDynamicLabelClasses: (props: TextAreaProps, focused: boolean) => (string | undefined)[];
|
5
|
-
export declare const textAreaRoot: (Root: RootProps<HTMLTextAreaElement, TextAreaProps>) => React.ForwardRefExoticComponent<
|
5
|
+
export declare const textAreaRoot: (Root: RootProps<HTMLTextAreaElement, TextAreaProps>) => React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
6
6
|
export declare const textAreaConfig: {
|
7
7
|
name: string;
|
8
8
|
tag: string;
|
9
|
-
layout: (Root: RootProps<HTMLTextAreaElement, TextAreaProps>) => React.ForwardRefExoticComponent<
|
9
|
+
layout: (Root: RootProps<HTMLTextAreaElement, TextAreaProps>) => React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
10
10
|
base: import("@linaria/core").LinariaClassName;
|
11
11
|
variations: {
|
12
12
|
size: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAK5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAmBrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA6BtD,eAAO,MAAM,sBAAsB,UAAW,aAAa,WAAW,OAAO,2BA4B5E,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,UAAU,mBAAmB,EAAE,aAAa,CAAC,
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAK5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAmBrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA6BtD,eAAO,MAAM,sBAAsB,UAAW,aAAa,WAAW,OAAO,2BA4B5E,CAAC;AAEF,eAAO,MAAM,YAAY,SAAU,UAAU,mBAAmB,EAAE,aAAa,CAAC,8FAiJ1E,CAAC;AAEP,eAAO,MAAM,cAAc;;;mBAnJQ,UAAU,mBAAmB,EAAE,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;CA2K/E,CAAC"}
|
@@ -1,5 +1,52 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { TextareaHTMLAttributes } from '@salutejs/plasma-core';
|
3
|
+
declare type Only<T, U, R> = {
|
4
|
+
[P in keyof T]: T[P];
|
5
|
+
} & {
|
6
|
+
[P in keyof U]?: never;
|
7
|
+
} & {
|
8
|
+
[P in keyof R]?: never;
|
9
|
+
};
|
10
|
+
declare type OneOf<T, U, R> = Only<T, U, R> | Only<U, T, R> | Only<R, T, U>;
|
11
|
+
export declare type TextAreaPropsAutoResize = {
|
12
|
+
/**
|
13
|
+
* Автоматическая высота поля ввода.
|
14
|
+
*/
|
15
|
+
autoResize?: boolean;
|
16
|
+
/**
|
17
|
+
* Максимальная высота поля ввода в автоматическом режиме (в абсолютных единицах).
|
18
|
+
* @example maxAuto="5", maxAuto={5}
|
19
|
+
*/
|
20
|
+
maxAuto?: number;
|
21
|
+
/**
|
22
|
+
* Минимальная высота поля ввода в автоматическом режиме (в абсолютных единицах).
|
23
|
+
* @example minAuto="5", minAuto={5}
|
24
|
+
*/
|
25
|
+
minAuto?: number;
|
26
|
+
};
|
27
|
+
export declare type TextAreaPropsHeightWidth = {
|
28
|
+
/**
|
29
|
+
* Высота текстового поля, значения в rem. Отвечает за ВСЮ высоту компонента.
|
30
|
+
* @example height="10", height={10}
|
31
|
+
*/
|
32
|
+
height?: number | string;
|
33
|
+
/**
|
34
|
+
* Ширина текстового поля, значения в rem. Отвечает за ВСЮ ширину компонента.
|
35
|
+
* @example width="10", width={10}
|
36
|
+
*/
|
37
|
+
width?: number | string;
|
38
|
+
};
|
39
|
+
export declare type TextAreaPropsRowsCols = {
|
40
|
+
/**
|
41
|
+
* Высота текстового поля (в абсолютных единицах) – фиксированное число отображаемых строк без прокрутки.
|
42
|
+
*/
|
43
|
+
rows?: number;
|
44
|
+
/**
|
45
|
+
* Ширина текстового поля (в абсолютных единицах) – фиксированное число столбцов.
|
46
|
+
*/
|
47
|
+
cols?: number;
|
48
|
+
};
|
49
|
+
export declare type TextAreaDimensionsProps = OneOf<TextAreaPropsAutoResize, TextAreaPropsHeightWidth, TextAreaPropsRowsCols>;
|
3
50
|
export interface TextAreaPropsBase {
|
4
51
|
/**
|
5
52
|
* Статус компонента: заполнен успешно / с предупреждением / с ошибкой.
|
@@ -23,16 +70,6 @@ export interface TextAreaPropsBase {
|
|
23
70
|
* @deprecated устаревшее свойство
|
24
71
|
*/
|
25
72
|
resize?: 'none' | 'both' | 'horizontal' | 'vertical';
|
26
|
-
/**
|
27
|
-
* Высота текстового поля, значения в rem
|
28
|
-
* @example height="10", height={10}
|
29
|
-
*/
|
30
|
-
height?: number | string;
|
31
|
-
/**
|
32
|
-
* Ширина текстового поля, значения в rem
|
33
|
-
* @example width="10", width={10}
|
34
|
-
*/
|
35
|
-
width?: number | string;
|
36
73
|
/**
|
37
74
|
* Вспомогательный текст снизу слева для поля ввода.
|
38
75
|
* @deprecated свойство устарело, необходимо использовать `leftHelper`.
|
@@ -46,18 +83,6 @@ export interface TextAreaPropsBase {
|
|
46
83
|
* Вспомогательный текст снизу справа для поля ввода.
|
47
84
|
*/
|
48
85
|
rightHelper?: string;
|
49
|
-
/**
|
50
|
-
* Автоматическая высота поля ввода.
|
51
|
-
*/
|
52
|
-
autoResize?: boolean;
|
53
|
-
/**
|
54
|
-
* Максимальная высота поля ввода в автоматическом режиме(в rem).
|
55
|
-
*/
|
56
|
-
maxAuto?: number;
|
57
|
-
/**
|
58
|
-
* Минимальная высота поля ввода в автоматическом режиме(в rem).
|
59
|
-
*/
|
60
|
-
minAuto?: number;
|
61
86
|
}
|
62
87
|
export interface TextAreaPropsExtends extends TextAreaPropsBase {
|
63
88
|
/**
|
@@ -69,5 +94,6 @@ export interface TextAreaPropsExtends extends TextAreaPropsBase {
|
|
69
94
|
*/
|
70
95
|
view?: string;
|
71
96
|
}
|
72
|
-
export declare type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & TextAreaPropsExtends;
|
97
|
+
export declare type TextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'rows' | 'cols'> & TextAreaPropsExtends & TextAreaDimensionsProps;
|
98
|
+
export {};
|
73
99
|
//# sourceMappingURL=TextArea.types.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextArea.types.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.types.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,
|
1
|
+
{"version":3,"file":"TextArea.types.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.types.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,aAAK,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI;KAChB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACvB,GACG;KACK,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK;CACzB,GACD;KACK,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK;CACzB,CAAC;AAEN,aAAK,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAEpE,oBAAY,uBAAuB,GAAG;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,wBAAwB,GAAG;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B,CAAC;AAEF,oBAAY,qBAAqB,GAAG;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,uBAAuB,GAAG,KAAK,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,qBAAqB,CAAC,CAAC;AAEtH,MAAM,WAAW,iBAAiB;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,EAAE,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC9C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAC;IACrD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC3D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,oBAAY,aAAa,GAAG,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC1F,oBAAoB,GACpB,uBAAuB,CAAC"}
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { MutableRefObject } from 'react';
|
2
2
|
export declare const ROOT_FONT_SIZE = 16;
|
3
|
-
export declare const useAutoResize: <T extends HTMLTextAreaElement>(active: boolean, ref: MutableRefObject<T | null>, value?: string | number | readonly string[] | undefined,
|
3
|
+
export declare const useAutoResize: <T extends HTMLTextAreaElement>(active: boolean, ref: MutableRefObject<T | null>, value?: string | number | readonly string[] | undefined, minAuto?: number | undefined, maxAuto?: number | undefined) => void;
|
4
4
|
//# sourceMappingURL=useAutoResize.d.ts.map
|