@activecollab/components 2.0.130 → 2.0.131
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/dist/cjs/components/Textarea/Styles.js +2 -23
- package/dist/cjs/components/Textarea/Styles.js.map +1 -1
- package/dist/cjs/components/Textarea/Textarea.js +6 -52
- package/dist/cjs/components/Textarea/Textarea.js.map +1 -1
- package/dist/esm/components/Textarea/Styles.d.ts +0 -2
- package/dist/esm/components/Textarea/Styles.d.ts.map +1 -1
- package/dist/esm/components/Textarea/Styles.js +1 -22
- package/dist/esm/components/Textarea/Styles.js.map +1 -1
- package/dist/esm/components/Textarea/Textarea.d.ts +1 -5
- package/dist/esm/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/esm/components/Textarea/Textarea.js +7 -41
- package/dist/esm/components/Textarea/Textarea.js.map +1 -1
- package/dist/index.js +184 -243
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledTextarea =
|
|
6
|
+
exports.StyledTextarea = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
8
8
|
var _BoxSizingStyle = require("../BoxSizingStyle");
|
|
9
9
|
var _FontStyle = require("../FontStyle");
|
|
@@ -12,7 +12,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
12
12
|
var StyledTextarea = exports.StyledTextarea = _styledComponents.default.textarea.withConfig({
|
|
13
13
|
displayName: "Styles__StyledTextarea",
|
|
14
14
|
componentId: "sc-m6jqw8-0"
|
|
15
|
-
})(["", " ", " ", " ", " ", "
|
|
15
|
+
})(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
|
|
16
16
|
"fontSize": "0.875rem"
|
|
17
17
|
}, {
|
|
18
18
|
"color": "var(--color-theme-900)"
|
|
@@ -22,8 +22,6 @@ var StyledTextarea = exports.StyledTextarea = _styledComponents.default.textarea
|
|
|
22
22
|
"letterSpacing": "0.02em"
|
|
23
23
|
}, {
|
|
24
24
|
"fontWeight": "400"
|
|
25
|
-
}, {
|
|
26
|
-
"resize": "none"
|
|
27
25
|
}, {
|
|
28
26
|
"borderColor": "var(--color-theme-500)"
|
|
29
27
|
}, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
|
|
@@ -46,24 +44,5 @@ var StyledTextarea = exports.StyledTextarea = _styledComponents.default.textarea
|
|
|
46
44
|
}, function (props) {
|
|
47
45
|
return !props.disabled && props.$invalid && props.$mode === "flat" && (0, _styledComponents.css)(["color:var(--red-alert);"]);
|
|
48
46
|
});
|
|
49
|
-
var StyledTextAreaWrapper = exports.StyledTextAreaWrapper = _styledComponents.default.div.withConfig({
|
|
50
|
-
displayName: "Styles__StyledTextAreaWrapper",
|
|
51
|
-
componentId: "sc-m6jqw8-1"
|
|
52
|
-
})(["", ""], {
|
|
53
|
-
"position": "relative",
|
|
54
|
-
"display": "flex",
|
|
55
|
-
"width": "fit-content"
|
|
56
|
-
});
|
|
57
|
-
var StyledProgressRingWrapper = exports.StyledProgressRingWrapper = _styledComponents.default.div.withConfig({
|
|
58
|
-
displayName: "Styles__StyledProgressRingWrapper",
|
|
59
|
-
componentId: "sc-m6jqw8-2"
|
|
60
|
-
})(["", ""], {
|
|
61
|
-
"position": "absolute",
|
|
62
|
-
"bottom": "0.5rem",
|
|
63
|
-
"right": "0.5rem",
|
|
64
|
-
"display": "flex"
|
|
65
|
-
});
|
|
66
47
|
StyledTextarea.displayName = "StyledTextarea";
|
|
67
|
-
StyledTextAreaWrapper.displayName = "StyledTextAreaWrapper";
|
|
68
|
-
StyledProgressRingWrapper.displayName = "StyledProgressRingWrapper";
|
|
69
48
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledTextarea","exports","styled","textarea","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$mode","css","disabled","$invalid"
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_FontStyle","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledTextarea","exports","styled","textarea","withConfig","displayName","componentId","FontStyle","BoxSizingStyle","props","$mode","css","disabled","$invalid"],"sources":["../../../../src/components/Textarea/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputMode } from \"../Input/types\";\n\ninterface StyledTextareaProps {\n disabled: boolean;\n $invalid: boolean;\n $mode: InputMode;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n ${tw`tw-text-body-2`}\n ${tw`tw-text-theme-900`}\n ${tw`tw-leading-regular`}\n ${tw`tw-tracking-regular`}\n ${tw`tw-font-regular`}\n border-width: 1px;\n border-style: solid;\n background-color: var(--input-background-color);\n ${tw`tw-border-theme-500`}\n border-radius: 8px;\n padding: 4px 8px 6px 8px;\n height: auto;\n transition: all 0.3s ease;\n width: 360px;\n min-height: 90px;\n outline: none;\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n border: none;\n background-color: transparent;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ${tw`tw-cursor-not-allowed tw-opacity-50`}\n `}\n\n ${(props) =>\n !props.disabled &&\n !props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n &:active,\n &:focus,\n &:hover {\n ${tw`tw-border-primary`}\n }\n `}\n\n &::placeholder {\n ${tw`tw-text-theme-transparent-500`}\n }\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n ${tw`tw-border-alert`}\n `}\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"flat\" &&\n css`\n color: var(--red-alert);\n `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAyC,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASlC,IAAMY,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,QAAQ,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wSACvC;EAAA;AAAe,CAAC,EAChB;EAAA;AAAkB,CAAC,EACnB;EAAA;AAAmB,CAAC,EACpB;EAAA;AAAoB,CAAC,EACrB;EAAA;AAAgB,CAAC,EAIjB;EAAA;AAAoB,CAAC,EAQvBC,oBAAS,EACTC,8BAAc,EAEd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,MAAM,QACtBC,qBAAG,gDAGF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,QAAQ,QACdD,qBAAG,YACG;IAAA;IAAA;EAAoC,CAAC,CAC1C;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,QAAQ,IACf,CAACH,KAAK,CAACI,QAAQ,IACfJ,KAAK,CAACC,KAAK,KAAK,UAAU,QAC1BC,qBAAG,sCAIK;IAAA;EAAkB,CAAC,CAE1B;AAAA,GAGG;EAAA;AAA8B,CAAC,EAGnC,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,QAAQ,IACfH,KAAK,CAACI,QAAQ,IACdJ,KAAK,CAACC,KAAK,KAAK,UAAU,QAC1BC,qBAAG,YACG;IAAA;EAAgB,CAAC,CACtB;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,QAAQ,IACfH,KAAK,CAACI,QAAQ,IACdJ,KAAK,CAACC,KAAK,KAAK,MAAM,QACtBC,qBAAG,8BAEF;AAAA,EACJ;AAEDX,cAAc,CAACK,WAAW,GAAG,gBAAgB"}
|
|
@@ -7,23 +7,14 @@ exports.Textarea = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
9
|
var _Styles = require("./Styles");
|
|
10
|
-
var
|
|
11
|
-
var _ProgressRing = require("../ProgressRing");
|
|
12
|
-
var _excluded = ["className", "disabled", "invalid", "mode", "maxLength", "value", "hideProgress", "onChange"];
|
|
10
|
+
var _excluded = ["className", "disabled", "invalid", "mode"];
|
|
13
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
15
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
14
|
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); }
|
|
17
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
18
|
-
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."); }
|
|
19
|
-
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); }
|
|
20
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
21
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
22
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
15
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
24
16
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
25
17
|
var Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
26
|
-
var _value$length;
|
|
27
18
|
var className = _ref.className,
|
|
28
19
|
_ref$disabled = _ref.disabled,
|
|
29
20
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
@@ -31,54 +22,17 @@ var Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (
|
|
|
31
22
|
invalid = _ref$invalid === void 0 ? false : _ref$invalid,
|
|
32
23
|
_ref$mode = _ref.mode,
|
|
33
24
|
mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
|
|
34
|
-
maxLength = _ref.maxLength,
|
|
35
|
-
value = _ref.value,
|
|
36
|
-
_ref$hideProgress = _ref.hideProgress,
|
|
37
|
-
hideProgress = _ref$hideProgress === void 0 ? false : _ref$hideProgress,
|
|
38
|
-
onChange = _ref.onChange,
|
|
39
25
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
40
|
-
|
|
41
|
-
var handleRef = (0, _utils.useForkRef)(ref, innerRef);
|
|
42
|
-
var _React$useState = _react.default.useState((_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : 0),
|
|
43
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
44
|
-
currentLength = _React$useState2[0],
|
|
45
|
-
setCurrentLength = _React$useState2[1];
|
|
46
|
-
var warningGauge = (0, _react.useMemo)(function () {
|
|
47
|
-
return 75 * Number(maxLength) / 100;
|
|
48
|
-
}, [maxLength]);
|
|
49
|
-
var progressColor = (0, _react.useMemo)(function () {
|
|
50
|
-
if (currentLength >= Number(maxLength)) {
|
|
51
|
-
return "var(--red-alert)";
|
|
52
|
-
}
|
|
53
|
-
if (currentLength > warningGauge && currentLength < Number(maxLength)) {
|
|
54
|
-
return "var(--warning)";
|
|
55
|
-
}
|
|
56
|
-
return "var(--color-sucess-green)";
|
|
57
|
-
}, [currentLength, maxLength, warningGauge]);
|
|
58
|
-
var max = Number(maxLength !== null && maxLength !== void 0 ? maxLength : 1);
|
|
59
|
-
var progress = Math.min(currentLength / max * 100, 100);
|
|
60
|
-
var handleChange = function handleChange(e) {
|
|
61
|
-
setCurrentLength(e.target.value.length);
|
|
62
|
-
if (onChange) {
|
|
63
|
-
onChange(e);
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
return /*#__PURE__*/_react.default.createElement(_Styles.StyledTextAreaWrapper, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledTextarea, _extends({}, rest, {
|
|
67
|
-
value: value,
|
|
26
|
+
return /*#__PURE__*/_react.default.createElement(_Styles.StyledTextarea, _extends({}, rest, {
|
|
68
27
|
$invalid: invalid,
|
|
69
|
-
ref:
|
|
28
|
+
ref: ref,
|
|
70
29
|
$mode: mode,
|
|
71
30
|
disabled: disabled,
|
|
72
31
|
"aria-invalid": invalid,
|
|
73
32
|
className: (0, _classnames.default)("c-textarea", {
|
|
74
33
|
"c-textarea__disabled": disabled
|
|
75
|
-
}, className)
|
|
76
|
-
|
|
77
|
-
})), maxLength && !hideProgress && /*#__PURE__*/_react.default.createElement(_Styles.StyledProgressRingWrapper, null, /*#__PURE__*/_react.default.createElement(_ProgressRing.ProgressRing, {
|
|
78
|
-
progress: progress,
|
|
79
|
-
radius: 10,
|
|
80
|
-
stroke: 1.5,
|
|
81
|
-
progressColor: progressColor
|
|
82
|
-
})));
|
|
34
|
+
}, className)
|
|
35
|
+
}));
|
|
83
36
|
});
|
|
37
|
+
Textarea.displayName = "Textarea";
|
|
84
38
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_utils","_ProgressRing","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","arr2","l","Symbol","iterator","f","next","done","push","value","return","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Textarea","exports","forwardRef","_ref","ref","_value$length","className","_ref$disabled","disabled","_ref$invalid","invalid","_ref$mode","mode","maxLength","_ref$hideProgress","hideProgress","onChange","rest","innerRef","useRef","handleRef","useForkRef","_React$useState","React","useState","_React$useState2","currentLength","setCurrentLength","warningGauge","useMemo","Number","progressColor","max","progress","Math","min","handleChange","createElement","StyledTextAreaWrapper","StyledTextarea","$invalid","$mode","classnames","StyledProgressRingWrapper","ProgressRing","radius","stroke"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef, Ref, useMemo, useRef } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n StyledProgressRingWrapper,\n StyledTextarea,\n StyledTextAreaWrapper,\n} from \"./Styles\";\nimport { useForkRef } from \"../../utils\";\nimport { InputMode } from \"../Input/types\";\nimport { ProgressRing } from \"../ProgressRing\";\n\nexport interface TextareaProps {\n invalid?: boolean;\n mode?: InputMode;\n maxLength?: number;\n value?: string;\n hideProgress?: boolean;\n onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nexport const Textarea = forwardRef(\n (\n {\n className,\n disabled = false,\n invalid = false,\n mode = \"outlined\",\n maxLength,\n value,\n hideProgress = false,\n onChange,\n ...rest\n }: TextareaProps &\n Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n ref: Ref<HTMLTextAreaElement> | null | undefined\n ) => {\n const innerRef = useRef<HTMLTextAreaElement>(null);\n const handleRef = useForkRef(ref, innerRef);\n\n const [currentLength, setCurrentLength] = React.useState<number>(\n value?.length ?? 0\n );\n\n const warningGauge = useMemo(\n () => (75 * Number(maxLength)) / 100,\n [maxLength]\n );\n\n const progressColor = useMemo(() => {\n if (currentLength >= Number(maxLength)) {\n return \"var(--red-alert)\";\n }\n if (currentLength > warningGauge && currentLength < Number(maxLength)) {\n return \"var(--warning)\";\n }\n return \"var(--color-sucess-green)\";\n }, [currentLength, maxLength, warningGauge]);\n\n const max = Number(maxLength ?? 1);\n\n const progress = Math.min((currentLength / max) * 100, 100);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n setCurrentLength(e.target.value.length);\n if (onChange) {\n onChange(e);\n }\n };\n\n return (\n <StyledTextAreaWrapper>\n <StyledTextarea\n {...rest}\n value={value}\n $invalid={invalid}\n ref={handleRef}\n $mode={mode}\n disabled={disabled}\n aria-invalid={invalid}\n className={classnames(\n \"c-textarea\",\n { \"c-textarea__disabled\": disabled },\n className\n )}\n onChange={handleChange}\n />\n {maxLength && !hideProgress && (\n <StyledProgressRingWrapper>\n <ProgressRing\n progress={progress}\n radius={10}\n stroke={1.5}\n progressColor={progressColor}\n />\n </StyledProgressRingWrapper>\n )}\n </StyledTextAreaWrapper>\n );\n }\n);\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Textarea.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_excluded","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","_extends","assign","bind","target","arguments","length","source","key","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","Textarea","exports","forwardRef","_ref","ref","className","_ref$disabled","disabled","_ref$invalid","invalid","_ref$mode","mode","rest","createElement","StyledTextarea","$invalid","$mode","classnames","displayName"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { forwardRef, Ref } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledTextarea } from \"./Styles\";\nimport { InputMode } from \"../Input/types\";\n\nexport interface TextareaProps {\n invalid?: boolean;\n mode?: InputMode;\n}\n\nexport const Textarea = forwardRef(\n (\n {\n className,\n disabled = false,\n invalid = false,\n mode = \"outlined\",\n ...rest\n }: TextareaProps &\n Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n ref: Ref<HTMLTextAreaElement> | null | undefined\n ) => {\n return (\n <StyledTextarea\n {...rest}\n $invalid={invalid}\n ref={ref}\n $mode={mode}\n disabled={disabled}\n aria-invalid={invalid}\n className={classnames(\n \"c-textarea\",\n { \"c-textarea__disabled\": disabled },\n className\n )}\n />\n );\n }\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AAA0C,IAAAI,SAAA;AAAA,SAAAF,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAAA,SAAAY,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAL,CAAA,MAAAA,CAAA,GAAAM,SAAA,CAAAC,MAAA,EAAAP,CAAA,UAAAQ,MAAA,GAAAF,SAAA,CAAAN,CAAA,YAAAS,GAAA,IAAAD,MAAA,QAAAf,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAS,MAAA,EAAAC,GAAA,KAAAJ,MAAA,CAAAI,GAAA,IAAAD,MAAA,CAAAC,GAAA,gBAAAJ,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAJ,SAAA;AAAA,SAAAK,yBAAAH,MAAA,EAAAI,QAAA,QAAAJ,MAAA,yBAAAH,MAAA,GAAAQ,6BAAA,CAAAL,MAAA,EAAAI,QAAA,OAAAH,GAAA,EAAAT,CAAA,MAAAP,MAAA,CAAAqB,qBAAA,QAAAC,gBAAA,GAAAtB,MAAA,CAAAqB,qBAAA,CAAAN,MAAA,QAAAR,CAAA,MAAAA,CAAA,GAAAe,gBAAA,CAAAR,MAAA,EAAAP,CAAA,MAAAS,GAAA,GAAAM,gBAAA,CAAAf,CAAA,OAAAY,QAAA,CAAAI,OAAA,CAAAP,GAAA,uBAAAhB,MAAA,CAAAI,SAAA,CAAAoB,oBAAA,CAAAlB,IAAA,CAAAS,MAAA,EAAAC,GAAA,aAAAJ,MAAA,CAAAI,GAAA,IAAAD,MAAA,CAAAC,GAAA,cAAAJ,MAAA;AAAA,SAAAQ,8BAAAL,MAAA,EAAAI,QAAA,QAAAJ,MAAA,yBAAAH,MAAA,WAAAa,UAAA,GAAAzB,MAAA,CAAA0B,IAAA,CAAAX,MAAA,OAAAC,GAAA,EAAAT,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAkB,UAAA,CAAAX,MAAA,EAAAP,CAAA,MAAAS,GAAA,GAAAS,UAAA,CAAAlB,CAAA,OAAAY,QAAA,CAAAI,OAAA,CAAAP,GAAA,kBAAAJ,MAAA,CAAAI,GAAA,IAAAD,MAAA,CAAAC,GAAA,YAAAJ,MAAA;AAQnC,IAAMe,QAAQ,GAAAC,OAAA,CAAAD,QAAA,gBAAG,IAAAE,iBAAU,EAChC,UAAAC,IAAA,EASEC,GAAgD,EAC7C;EAAA,IARDC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAAC,aAAA,GAAAH,IAAA,CACTI,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,YAAA,GAAAL,IAAA,CAChBM,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IAAAE,SAAA,GAAAP,IAAA,CACfQ,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,UAAU,GAAAA,SAAA;IACdE,IAAI,GAAArB,wBAAA,CAAAY,IAAA,EAAA5C,SAAA;EAKT,oBACEN,MAAA,CAAAS,OAAA,CAAAmD,aAAA,CAACvD,OAAA,CAAAwD,cAAc,EAAAhC,QAAA,KACT8B,IAAI;IACRG,QAAQ,EAAEN,OAAQ;IAClBL,GAAG,EAAEA,GAAI;IACTY,KAAK,EAAEL,IAAK;IACZJ,QAAQ,EAAEA,QAAS;IACnB,gBAAcE,OAAQ;IACtBJ,SAAS,EAAE,IAAAY,mBAAU,EACnB,YAAY,EACZ;MAAE,sBAAsB,EAAEV;IAAS,CAAC,EACpCF,SACF;EAAE,EACH,CAAC;AAEN,CACF,CAAC;AAEDL,QAAQ,CAACkB,WAAW,GAAG,UAAU"}
|
|
@@ -5,7 +5,5 @@ interface StyledTextareaProps {
|
|
|
5
5
|
$mode: InputMode;
|
|
6
6
|
}
|
|
7
7
|
export declare const StyledTextarea: import("styled-components").StyledComponent<"textarea", any, StyledTextareaProps, never>;
|
|
8
|
-
export declare const StyledTextAreaWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
|
-
export declare const StyledProgressRingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
8
|
export {};
|
|
11
9
|
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0FAgE1B,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { FontStyle } from "../FontStyle";
|
|
|
4
4
|
export const StyledTextarea = styled.textarea.withConfig({
|
|
5
5
|
displayName: "Styles__StyledTextarea",
|
|
6
6
|
componentId: "sc-m6jqw8-0"
|
|
7
|
-
})(["", " ", " ", " ", " ", "
|
|
7
|
+
})(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
|
|
8
8
|
"fontSize": "0.875rem"
|
|
9
9
|
}, {
|
|
10
10
|
"color": "var(--color-theme-900)"
|
|
@@ -14,8 +14,6 @@ export const StyledTextarea = styled.textarea.withConfig({
|
|
|
14
14
|
"letterSpacing": "0.02em"
|
|
15
15
|
}, {
|
|
16
16
|
"fontWeight": "400"
|
|
17
|
-
}, {
|
|
18
|
-
"resize": "none"
|
|
19
17
|
}, {
|
|
20
18
|
"borderColor": "var(--color-theme-500)"
|
|
21
19
|
}, FontStyle, BoxSizingStyle, props => props.$mode === "flat" && css(["border:none;background-color:transparent;"]), props => props.disabled && css(["", ""], {
|
|
@@ -28,24 +26,5 @@ export const StyledTextarea = styled.textarea.withConfig({
|
|
|
28
26
|
}, props => !props.disabled && props.$invalid && props.$mode === "outlined" && css(["", ""], {
|
|
29
27
|
"borderColor": "var(--red-alert)"
|
|
30
28
|
}), props => !props.disabled && props.$invalid && props.$mode === "flat" && css(["color:var(--red-alert);"]));
|
|
31
|
-
export const StyledTextAreaWrapper = styled.div.withConfig({
|
|
32
|
-
displayName: "Styles__StyledTextAreaWrapper",
|
|
33
|
-
componentId: "sc-m6jqw8-1"
|
|
34
|
-
})(["", ""], {
|
|
35
|
-
"position": "relative",
|
|
36
|
-
"display": "flex",
|
|
37
|
-
"width": "fit-content"
|
|
38
|
-
});
|
|
39
|
-
export const StyledProgressRingWrapper = styled.div.withConfig({
|
|
40
|
-
displayName: "Styles__StyledProgressRingWrapper",
|
|
41
|
-
componentId: "sc-m6jqw8-2"
|
|
42
|
-
})(["", ""], {
|
|
43
|
-
"position": "absolute",
|
|
44
|
-
"bottom": "0.5rem",
|
|
45
|
-
"right": "0.5rem",
|
|
46
|
-
"display": "flex"
|
|
47
|
-
});
|
|
48
29
|
StyledTextarea.displayName = "StyledTextarea";
|
|
49
|
-
StyledTextAreaWrapper.displayName = "StyledTextAreaWrapper";
|
|
50
|
-
StyledProgressRingWrapper.displayName = "StyledProgressRingWrapper";
|
|
51
30
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","withConfig","displayName","componentId","props","$mode","disabled","$invalid"
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","withConfig","displayName","componentId","props","$mode","disabled","$invalid"],"sources":["../../../../src/components/Textarea/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputMode } from \"../Input/types\";\n\ninterface StyledTextareaProps {\n disabled: boolean;\n $invalid: boolean;\n $mode: InputMode;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n ${tw`tw-text-body-2`}\n ${tw`tw-text-theme-900`}\n ${tw`tw-leading-regular`}\n ${tw`tw-tracking-regular`}\n ${tw`tw-font-regular`}\n border-width: 1px;\n border-style: solid;\n background-color: var(--input-background-color);\n ${tw`tw-border-theme-500`}\n border-radius: 8px;\n padding: 4px 8px 6px 8px;\n height: auto;\n transition: all 0.3s ease;\n width: 360px;\n min-height: 90px;\n outline: none;\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${(props) =>\n props.$mode === \"flat\" &&\n css`\n border: none;\n background-color: transparent;\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n ${tw`tw-cursor-not-allowed tw-opacity-50`}\n `}\n\n ${(props) =>\n !props.disabled &&\n !props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n &:active,\n &:focus,\n &:hover {\n ${tw`tw-border-primary`}\n }\n `}\n\n &::placeholder {\n ${tw`tw-text-theme-transparent-500`}\n }\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"outlined\" &&\n css`\n ${tw`tw-border-alert`}\n `}\n\n ${(props) =>\n !props.disabled &&\n props.$invalid &&\n props.$mode === \"flat\" &&\n css`\n color: var(--red-alert);\n `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AASxC,OAAO,MAAMC,cAAc,GAAGJ,MAAM,CAACK,QAAQ,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wSACvC;EAAA;AAAe,CAAC,EAChB;EAAA;AAAkB,CAAC,EACnB;EAAA;AAAmB,CAAC,EACpB;EAAA;AAAoB,CAAC,EACrB;EAAA;AAAgB,CAAC,EAIjB;EAAA;AAAoB,CAAC,EAQvBL,SAAS,EACTD,cAAc,EAEbO,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,+CAGF,EAEAQ,KAAK,IACNA,KAAK,CAACE,QAAQ,IACdV,GAAG,WACG;EAAA;EAAA;AAAoC,CAAC,CAC1C,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACf,CAACF,KAAK,CAACG,QAAQ,IACfH,KAAK,CAACC,KAAK,KAAK,UAAU,IAC1BT,GAAG,qCAIK;EAAA;AAAkB,CAAC,CAE1B,EAGG;EAAA;AAA8B,CAAC,EAGlCQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACfF,KAAK,CAACG,QAAQ,IACdH,KAAK,CAACC,KAAK,KAAK,UAAU,IAC1BT,GAAG,WACG;EAAA;AAAgB,CAAC,CACtB,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACfF,KAAK,CAACG,QAAQ,IACdH,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,6BAEF,CACJ;AAEDG,cAAc,CAACG,WAAW,GAAG,gBAAgB"}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { InputMode } from "../Input/types";
|
|
3
3
|
export interface TextareaProps {
|
|
4
4
|
invalid?: boolean;
|
|
5
5
|
mode?: InputMode;
|
|
6
|
-
maxLength?: number;
|
|
7
|
-
value?: string;
|
|
8
|
-
hideProgress?: boolean;
|
|
9
|
-
onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
|
|
10
6
|
}
|
|
11
7
|
export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof TextareaProps> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
12
8
|
//# sourceMappingURL=Textarea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAK/C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,qOA4BpB,CAAC"}
|
|
@@ -1,59 +1,25 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
-
import React, { forwardRef
|
|
2
|
+
import React, { forwardRef } from "react";
|
|
3
3
|
import classnames from "classnames";
|
|
4
|
-
import {
|
|
5
|
-
import { useForkRef } from "../../utils";
|
|
6
|
-
import { ProgressRing } from "../ProgressRing";
|
|
4
|
+
import { StyledTextarea } from "./Styles";
|
|
7
5
|
export const Textarea = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
8
|
-
var _value$length;
|
|
9
6
|
let {
|
|
10
7
|
className,
|
|
11
8
|
disabled = false,
|
|
12
9
|
invalid = false,
|
|
13
10
|
mode = "outlined",
|
|
14
|
-
maxLength,
|
|
15
|
-
value,
|
|
16
|
-
hideProgress = false,
|
|
17
|
-
onChange,
|
|
18
11
|
...rest
|
|
19
12
|
} = _ref;
|
|
20
|
-
|
|
21
|
-
const handleRef = useForkRef(ref, innerRef);
|
|
22
|
-
const [currentLength, setCurrentLength] = React.useState((_value$length = value == null ? void 0 : value.length) != null ? _value$length : 0);
|
|
23
|
-
const warningGauge = useMemo(() => 75 * Number(maxLength) / 100, [maxLength]);
|
|
24
|
-
const progressColor = useMemo(() => {
|
|
25
|
-
if (currentLength >= Number(maxLength)) {
|
|
26
|
-
return "var(--red-alert)";
|
|
27
|
-
}
|
|
28
|
-
if (currentLength > warningGauge && currentLength < Number(maxLength)) {
|
|
29
|
-
return "var(--warning)";
|
|
30
|
-
}
|
|
31
|
-
return "var(--color-sucess-green)";
|
|
32
|
-
}, [currentLength, maxLength, warningGauge]);
|
|
33
|
-
const max = Number(maxLength != null ? maxLength : 1);
|
|
34
|
-
const progress = Math.min(currentLength / max * 100, 100);
|
|
35
|
-
const handleChange = e => {
|
|
36
|
-
setCurrentLength(e.target.value.length);
|
|
37
|
-
if (onChange) {
|
|
38
|
-
onChange(e);
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
return /*#__PURE__*/React.createElement(StyledTextAreaWrapper, null, /*#__PURE__*/React.createElement(StyledTextarea, _extends({}, rest, {
|
|
42
|
-
value: value,
|
|
13
|
+
return /*#__PURE__*/React.createElement(StyledTextarea, _extends({}, rest, {
|
|
43
14
|
$invalid: invalid,
|
|
44
|
-
ref:
|
|
15
|
+
ref: ref,
|
|
45
16
|
$mode: mode,
|
|
46
17
|
disabled: disabled,
|
|
47
18
|
"aria-invalid": invalid,
|
|
48
19
|
className: classnames("c-textarea", {
|
|
49
20
|
"c-textarea__disabled": disabled
|
|
50
|
-
}, className)
|
|
51
|
-
|
|
52
|
-
})), maxLength && !hideProgress && /*#__PURE__*/React.createElement(StyledProgressRingWrapper, null, /*#__PURE__*/React.createElement(ProgressRing, {
|
|
53
|
-
progress: progress,
|
|
54
|
-
radius: 10,
|
|
55
|
-
stroke: 1.5,
|
|
56
|
-
progressColor: progressColor
|
|
57
|
-
})));
|
|
21
|
+
}, className)
|
|
22
|
+
}));
|
|
58
23
|
});
|
|
24
|
+
Textarea.displayName = "Textarea";
|
|
59
25
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","names":["React","forwardRef","
|
|
1
|
+
{"version":3,"file":"Textarea.js","names":["React","forwardRef","classnames","StyledTextarea","Textarea","_ref","ref","className","disabled","invalid","mode","rest","createElement","_extends","$invalid","$mode","displayName"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { forwardRef, Ref } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledTextarea } from \"./Styles\";\nimport { InputMode } from \"../Input/types\";\n\nexport interface TextareaProps {\n invalid?: boolean;\n mode?: InputMode;\n}\n\nexport const Textarea = forwardRef(\n (\n {\n className,\n disabled = false,\n invalid = false,\n mode = \"outlined\",\n ...rest\n }: TextareaProps &\n Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n ref: Ref<HTMLTextAreaElement> | null | undefined\n ) => {\n return (\n <StyledTextarea\n {...rest}\n $invalid={invalid}\n ref={ref}\n $mode={mode}\n disabled={disabled}\n aria-invalid={invalid}\n className={classnames(\n \"c-textarea\",\n { \"c-textarea__disabled\": disabled },\n className\n )}\n />\n );\n }\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAa,OAAO;AAE9C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,cAAc,QAAQ,UAAU;AAQzC,OAAO,MAAMC,QAAQ,gBAAGH,UAAU,CAChC,CAAAI,IAAA,EASEC,GAAgD,KAC7C;EAAA,IATH;IACEC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO,GAAG,KAAK;IACfC,IAAI,GAAG,UAAU;IACjB,GAAGC;EAEiE,CAAC,GAAAN,IAAA;EAGvE,oBACEL,KAAA,CAAAY,aAAA,CAACT,cAAc,EAAAU,QAAA,KACTF,IAAI;IACRG,QAAQ,EAAEL,OAAQ;IAClBH,GAAG,EAAEA,GAAI;IACTS,KAAK,EAAEL,IAAK;IACZF,QAAQ,EAAEA,QAAS;IACnB,gBAAcC,OAAQ;IACtBF,SAAS,EAAEL,UAAU,CACnB,YAAY,EACZ;MAAE,sBAAsB,EAAEM;IAAS,CAAC,EACpCD,SACF;EAAE,EACH,CAAC;AAEN,CACF,CAAC;AAEDH,QAAQ,CAACY,WAAW,GAAG,UAAU"}
|