@flodesk/grain 8.5.1 → 8.6.0
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/es/components/textarea.js +54 -22
- package/package.json +1 -1
|
@@ -12,33 +12,63 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
12
12
|
|
|
13
13
|
import React, { forwardRef } from 'react';
|
|
14
14
|
import PropTypes from 'prop-types';
|
|
15
|
-
import { FieldHint, FieldLabel, fieldVars, getFieldStyles } from '../foundational';
|
|
15
|
+
import { componentVars, FieldHint, FieldLabel, fieldVars, getFieldStyles } from '../foundational';
|
|
16
16
|
import { Box } from './box';
|
|
17
17
|
import { Text } from './text';
|
|
18
18
|
import { types } from '../types';
|
|
19
19
|
import { css } from '@emotion/react';
|
|
20
20
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
21
|
-
|
|
22
|
-
var value = _ref.value,
|
|
23
|
-
placeholder = _ref.placeholder,
|
|
24
|
-
label = _ref.label,
|
|
25
|
-
id = _ref.id,
|
|
26
|
-
hasError = _ref.hasError,
|
|
27
|
-
errorMessage = _ref.errorMessage,
|
|
28
|
-
isReadOnly = _ref.isReadOnly,
|
|
29
|
-
isDisabled = _ref.isDisabled,
|
|
30
|
-
hint = _ref.hint,
|
|
31
|
-
maxLength = _ref.maxLength,
|
|
32
|
-
children = _ref.children,
|
|
33
|
-
_ref$rows = _ref.rows,
|
|
34
|
-
rows = _ref$rows === void 0 ? 3 : _ref$rows,
|
|
35
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
21
|
+
var paddingY = '8px';
|
|
36
22
|
|
|
23
|
+
var Counter = function Counter(_ref) {
|
|
24
|
+
var length = _ref.length,
|
|
25
|
+
maxLength = _ref.maxLength;
|
|
26
|
+
return ___EmotionJSX(Box, {
|
|
27
|
+
position: "absolute",
|
|
28
|
+
paddingX: fieldVars.xPadding,
|
|
29
|
+
paddingY: paddingY,
|
|
30
|
+
right: componentVars.strokeSize,
|
|
31
|
+
bottom: componentVars.strokeSize,
|
|
32
|
+
backgroundColor: "background"
|
|
33
|
+
}, ___EmotionJSX(Text, {
|
|
34
|
+
color: "content2",
|
|
35
|
+
display: "inline"
|
|
36
|
+
}, length, "/"), maxLength);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
var TextareaWrapper = function TextareaWrapper(_ref2) {
|
|
40
|
+
var children = _ref2.children,
|
|
41
|
+
maxLength = _ref2.maxLength;
|
|
42
|
+
if (!maxLength) return children;
|
|
43
|
+
return ___EmotionJSX(Box, {
|
|
44
|
+
position: "relative"
|
|
45
|
+
}, children);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export var Textarea = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
|
49
|
+
var value = _ref3.value,
|
|
50
|
+
placeholder = _ref3.placeholder,
|
|
51
|
+
label = _ref3.label,
|
|
52
|
+
id = _ref3.id,
|
|
53
|
+
hasError = _ref3.hasError,
|
|
54
|
+
errorMessage = _ref3.errorMessage,
|
|
55
|
+
isReadOnly = _ref3.isReadOnly,
|
|
56
|
+
isDisabled = _ref3.isDisabled,
|
|
57
|
+
hint = _ref3.hint,
|
|
58
|
+
maxLength = _ref3.maxLength,
|
|
59
|
+
children = _ref3.children,
|
|
60
|
+
_ref3$rows = _ref3.rows,
|
|
61
|
+
rows = _ref3$rows === void 0 ? 3 : _ref3$rows,
|
|
62
|
+
props = _objectWithoutProperties(_ref3, _excluded);
|
|
63
|
+
|
|
64
|
+
var bottomPadding = maxLength ? "calc(".concat(paddingY, " * 2 + var(--grn-lineHeight-global))") : paddingY;
|
|
37
65
|
return ___EmotionJSX("div", null, (label || hint) && ___EmotionJSX(Box, {
|
|
38
66
|
marginBottom: "betweenFormControlAndLabel"
|
|
39
67
|
}, label && ___EmotionJSX(FieldLabel, {
|
|
40
68
|
htmlFor: id
|
|
41
|
-
}, label), hint && ___EmotionJSX(FieldHint, null, hint)), ___EmotionJSX(
|
|
69
|
+
}, label), hint && ___EmotionJSX(FieldHint, null, hint)), ___EmotionJSX(TextareaWrapper, {
|
|
70
|
+
maxLength: maxLength
|
|
71
|
+
}, ___EmotionJSX("textarea", _extends({
|
|
42
72
|
ref: ref,
|
|
43
73
|
id: id,
|
|
44
74
|
value: value,
|
|
@@ -50,12 +80,14 @@ export var Textarea = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
50
80
|
disabled: isDisabled,
|
|
51
81
|
css: /*#__PURE__*/css(getFieldStyles({
|
|
52
82
|
hasError: hasError
|
|
53
|
-
}), ";resize:none;padding:
|
|
54
|
-
}, props)),
|
|
83
|
+
}), ";resize:none;padding:", paddingY, " ", fieldVars.xPadding, " ", bottomPadding, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Textarea;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHRhcmVhLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2RW9CIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RleHRhcmVhLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIEZpZWxkSGludCwgRmllbGRMYWJlbCwgZmllbGRWYXJzLCBnZXRGaWVsZFN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuL2JveCc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi90ZXh0JztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5jb25zdCBwYWRkaW5nWSA9ICc4cHgnO1xuXG5jb25zdCBDb3VudGVyID0gKHsgbGVuZ3RoLCBtYXhMZW5ndGggfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxCb3hcbiAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgcGFkZGluZ1g9e2ZpZWxkVmFycy54UGFkZGluZ31cbiAgICAgIHBhZGRpbmdZPXtwYWRkaW5nWX1cbiAgICAgIHJpZ2h0PXtjb21wb25lbnRWYXJzLnN0cm9rZVNpemV9XG4gICAgICBib3R0b209e2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX1cbiAgICAgIGJhY2tncm91bmRDb2xvcj1cImJhY2tncm91bmRcIlxuICAgID5cbiAgICAgIDxUZXh0IGNvbG9yPVwiY29udGVudDJcIiBkaXNwbGF5PVwiaW5saW5lXCI+XG4gICAgICAgIHtsZW5ndGh9L1xuICAgICAgPC9UZXh0PlxuICAgICAge21heExlbmd0aH1cbiAgICA8L0JveD5cbiAgKTtcbn07XG5cbmNvbnN0IFRleHRhcmVhV3JhcHBlciA9ICh7IGNoaWxkcmVuLCBtYXhMZW5ndGggfSkgPT4ge1xuICBpZiAoIW1heExlbmd0aCkgcmV0dXJuIGNoaWxkcmVuO1xuXG4gIHJldHVybiA8Qm94IHBvc2l0aW9uPVwicmVsYXRpdmVcIj57Y2hpbGRyZW59PC9Cb3g+O1xufTtcblxuZXhwb3J0IGNvbnN0IFRleHRhcmVhID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIHZhbHVlLFxuICAgICAgcGxhY2Vob2xkZXIsXG4gICAgICBsYWJlbCxcbiAgICAgIGlkLFxuICAgICAgaGFzRXJyb3IsXG4gICAgICBlcnJvck1lc3NhZ2UsXG4gICAgICBpc1JlYWRPbmx5LFxuICAgICAgaXNEaXNhYmxlZCxcbiAgICAgIGhpbnQsXG4gICAgICBtYXhMZW5ndGgsXG4gICAgICBjaGlsZHJlbixcbiAgICAgIHJvd3MgPSAzLFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgY29uc3QgYm90dG9tUGFkZGluZyA9IG1heExlbmd0aFxuICAgICAgPyBgY2FsYygke3BhZGRpbmdZfSAqIDIgKyB2YXIoLS1ncm4tbGluZUhlaWdodC1nbG9iYWwpKWBcbiAgICAgIDogcGFkZGluZ1k7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdj5cbiAgICAgICAgeyhsYWJlbCB8fCBoaW50KSAmJiAoXG4gICAgICAgICAgPEJveCBtYXJnaW5Cb3R0b209XCJiZXR3ZWVuRm9ybUNvbnRyb2xBbmRMYWJlbFwiPlxuICAgICAgICAgICAge2xhYmVsICYmIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfT57bGFiZWx9PC9GaWVsZExhYmVsPn1cbiAgICAgICAgICAgIHtoaW50ICYmIDxGaWVsZEhpbnQ+e2hpbnR9PC9GaWVsZEhpbnQ+fVxuICAgICAgICAgIDwvQm94PlxuICAgICAgICApfVxuXG4gICAgICAgIDxUZXh0YXJlYVdyYXBwZXIgbWF4TGVuZ3RoPXttYXhMZW5ndGh9PlxuICAgICAgICAgIDx0ZXh0YXJlYVxuICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgICBpZD17aWR9XG4gICAgICAgICAgICB2YWx1ZT17dmFsdWV9XG4gICAgICAgICAgICBuYW1lPXtpZH1cbiAgICAgICAgICAgIHJvd3M9e3Jvd3N9XG4gICAgICAgICAgICBtYXhMZW5ndGg9e21heExlbmd0aH1cbiAgICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICAgIHJlYWRPbmx5PXtpc1JlYWRPbmx5fVxuICAgICAgICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgICAgJHtnZXRGaWVsZFN0eWxlcyh7IGhhc0Vycm9yIH0pfTtcbiAgICAgICAgICAgICAgcmVzaXplOiBub25lO1xuICAgICAgICAgICAgICBwYWRkaW5nOiAke3BhZGRpbmdZfSAke2ZpZWxkVmFycy54UGFkZGluZ30gJHtib3R0b21QYWRkaW5nfTtcbiAgICAgICAgICAgIGB9XG4gICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgLz5cbiAgICAgICAgICB7bWF4TGVuZ3RoICYmIDxDb3VudGVyIGxlbmd0aD17dmFsdWUubGVuZ3RofSBtYXhMZW5ndGg9e21heExlbmd0aH0gLz59XG4gICAgICAgIDwvVGV4dGFyZWFXcmFwcGVyPlxuXG4gICAgICAgIHtlcnJvck1lc3NhZ2UgJiYgKFxuICAgICAgICAgIDxCb3ggY29sb3I9XCJkYW5nZXJcIiBtYXJnaW5Ub3A9XCJiZXR3ZWVuRm9ybUNvbnRyb2xBbmRMYWJlbFwiPlxuICAgICAgICAgICAge2Vycm9yTWVzc2FnZX1cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgKX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH0sXG4pO1xuXG5UZXh0YXJlYS5wcm9wVHlwZXMgPSB7XG4gIHZhbHVlOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBwbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgbGFiZWw6IHR5cGVzLmxhYmVsLFxuICBpZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBoYXNFcnJvcjogUHJvcFR5cGVzLmJvb2wsXG4gIGVycm9yTWVzc2FnZTogUHJvcFR5cGVzLnN0cmluZyxcbiAgaXNSZWFkT25seTogUHJvcFR5cGVzLmJvb2wsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBoaW50OiB0eXBlcy5oaW50LFxuICBtYXhMZW5ndGg6IFByb3BUeXBlcy5udW1iZXIsXG4gIHJvd3M6IFByb3BUeXBlcy5udW1iZXIsXG59O1xuIl19 */")
|
|
84
|
+
}, props)), maxLength && ___EmotionJSX(Counter, {
|
|
85
|
+
length: value.length,
|
|
86
|
+
maxLength: maxLength
|
|
87
|
+
})), errorMessage && ___EmotionJSX(Box, {
|
|
88
|
+
color: "danger",
|
|
55
89
|
marginTop: "betweenFormControlAndLabel"
|
|
56
|
-
},
|
|
57
|
-
color: "danger"
|
|
58
|
-
}, errorMessage)));
|
|
90
|
+
}, errorMessage));
|
|
59
91
|
});
|
|
60
92
|
Textarea.propTypes = {
|
|
61
93
|
value: PropTypes.string,
|