@next-shared/form 0.7.10 → 0.8.1

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.
@@ -0,0 +1,141 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.TextareaAutoResize = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _react = _interopRequireWildcard(require("react"));
11
+ var _reactDom = require("react-dom");
12
+ var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
13
+ var _calculateAutoSizeStyle = _interopRequireDefault(require("./utils/calculateAutoSizeStyle.js"));
14
+ // istanbul ignore next
15
+ const modKey = /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? "metaKey" : "ctrlKey";
16
+ const TextareaAutoResize = exports.TextareaAutoResize = /*#__PURE__*/_react.default.forwardRef(LegacyTextareaAutoResize);
17
+ function LegacyTextareaAutoResize({
18
+ autoResize: _autoResize,
19
+ minRows,
20
+ maxRows,
21
+ borderSize,
22
+ paddingSize,
23
+ containerRef,
24
+ value: propValue,
25
+ style,
26
+ submitWhen,
27
+ onChange,
28
+ onSubmit,
29
+ onKeyDown,
30
+ onCompositionStart,
31
+ onCompositionEnd,
32
+ ...props
33
+ }, ref) {
34
+ const autoResize = _autoResize ?? true;
35
+ const [value, setValue] = (0, _react.useState)(propValue ?? "");
36
+ const textareaRef = (0, _react.useRef)(null);
37
+ const [autoStyle, setAutoStyle] = (0, _react.useState)(null);
38
+ (0, _react.useImperativeHandle)(ref, () => ({
39
+ focus: () => {
40
+ const textarea = textareaRef.current;
41
+ // istanbul ignore else: defensive check
42
+ if (textarea) {
43
+ var _textarea$value;
44
+ const valueLength = (_textarea$value = textarea.value) === null || _textarea$value === void 0 ? void 0 : _textarea$value.length;
45
+ textarea.focus();
46
+ valueLength && textarea.setSelectionRange(valueLength, valueLength);
47
+ }
48
+ }
49
+ }), []);
50
+ const doAutoResize = (0, _react.useCallback)(() => {
51
+ const textarea = textareaRef.current;
52
+ if (textarea && autoResize) {
53
+ const style = (0, _calculateAutoSizeStyle.default)(textarea, {
54
+ minRows,
55
+ maxRows,
56
+ borderSize,
57
+ paddingSize
58
+ });
59
+ // istanbul ignore next
60
+ if (process.env.NODE_ENV === "test") {
61
+ setAutoStyle(style);
62
+ } else {
63
+ (0, _reactDom.flushSync)(() => {
64
+ setAutoStyle(style);
65
+ });
66
+ }
67
+ }
68
+ }, [autoResize, maxRows, minRows, borderSize, paddingSize]);
69
+ const handleInputChange = e => {
70
+ setValue(e.target.value);
71
+ onChange === null || onChange === void 0 || onChange(e);
72
+ };
73
+ (0, _react.useEffect)(() => {
74
+ setValue(propValue ?? "");
75
+ }, [propValue]);
76
+ (0, _react.useEffect)(() => {
77
+ doAutoResize();
78
+ }, [doAutoResize, value]);
79
+ const compositionRef = (0, _react.useRef)(false);
80
+ const handleCompositionStart = (0, _react.useCallback)(e => {
81
+ compositionRef.current = true;
82
+ onCompositionStart === null || onCompositionStart === void 0 || onCompositionStart(e);
83
+ }, [onCompositionStart]);
84
+ const handleCompositionEnd = (0, _react.useCallback)(e => {
85
+ compositionRef.current = false;
86
+ onCompositionEnd === null || onCompositionEnd === void 0 || onCompositionEnd(e);
87
+ }, [onCompositionEnd]);
88
+ const handleKeyDown = (0, _react.useCallback)(e => {
89
+ if (compositionRef.current) {
90
+ // Ignore key events during composition
91
+ return;
92
+ }
93
+ if (e.key === "Enter" && (submitWhen === "enter-without-shift" ? !e.shiftKey : submitWhen === "enter-with-mod" && e[modKey])) {
94
+ e.preventDefault();
95
+ e.stopPropagation();
96
+ onSubmit === null || onSubmit === void 0 || onSubmit(e);
97
+ }
98
+ onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
99
+ }, [onKeyDown, onSubmit, submitWhen]);
100
+
101
+ // istanbul ignore next
102
+ (0, _react.useEffect)(() => {
103
+ const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
104
+ if (!container || !autoResize) {
105
+ return;
106
+ }
107
+ let previousInlineSize;
108
+ const observer = new _resizeObserverPolyfill.default(entries => {
109
+ for (const entry of entries) {
110
+ if (entry.target === container) {
111
+ // istanbul ignore next: compatibility
112
+ const currentInlineSize = entry.contentBoxSize ? entry.contentBoxSize[0] ? entry.contentBoxSize[0].inlineSize : entry.contentBoxSize.inlineSize : entry.contentRect.width;
113
+ if (currentInlineSize !== undefined && currentInlineSize !== previousInlineSize) {
114
+ const isInitial = !previousInlineSize;
115
+ previousInlineSize = currentInlineSize;
116
+ if (!isInitial) {
117
+ requestAnimationFrame(doAutoResize);
118
+ }
119
+ }
120
+ }
121
+ }
122
+ });
123
+ observer.observe(container);
124
+ return () => {
125
+ observer.disconnect();
126
+ };
127
+ }, [autoResize, containerRef, doAutoResize]);
128
+ return /*#__PURE__*/_react.default.createElement("textarea", (0, _extends2.default)({}, props, {
129
+ ref: textareaRef,
130
+ value: value,
131
+ style: {
132
+ ...style,
133
+ ...autoStyle
134
+ },
135
+ onChange: handleInputChange,
136
+ onCompositionStart: handleCompositionStart,
137
+ onCompositionEnd: handleCompositionEnd,
138
+ onKeyDown: handleKeyDown
139
+ }));
140
+ }
141
+ //# sourceMappingURL=TextareaAutoResize.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TextareaAutoResize.js","names":["_react","_interopRequireWildcard","require","_reactDom","_resizeObserverPolyfill","_interopRequireDefault","_calculateAutoSizeStyle","modKey","test","navigator","platform","TextareaAutoResize","exports","React","forwardRef","LegacyTextareaAutoResize","autoResize","_autoResize","minRows","maxRows","borderSize","paddingSize","containerRef","value","propValue","style","submitWhen","onChange","onSubmit","onKeyDown","onCompositionStart","onCompositionEnd","props","ref","setValue","useState","textareaRef","useRef","autoStyle","setAutoStyle","useImperativeHandle","focus","textarea","current","_textarea$value","valueLength","length","setSelectionRange","doAutoResize","useCallback","calculateAutoSizeStyle","process","env","NODE_ENV","flushSync","handleInputChange","e","target","useEffect","compositionRef","handleCompositionStart","handleCompositionEnd","handleKeyDown","key","shiftKey","preventDefault","stopPropagation","container","previousInlineSize","observer","ResizeObserver","entries","entry","currentInlineSize","contentBoxSize","inlineSize","contentRect","width","undefined","isInitial","requestAnimationFrame","observe","disconnect","default","createElement","_extends2"],"sources":["../../src/TextareaAutoResize.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport ResizeObserver from \"resize-observer-polyfill\";\nimport calculateAutoSizeStyle from \"./utils/calculateAutoSizeStyle.js\";\n\n// istanbul ignore next\nconst modKey = /Mac|iPod|iPhone|iPad/.test(navigator.platform)\n ? \"metaKey\"\n : \"ctrlKey\";\n\nexport interface TextareaAutoResizeProps\n extends React.DetailedHTMLProps<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n HTMLTextAreaElement\n > {\n /** @default true */\n autoResize?: boolean;\n minRows?: number | null;\n maxRows?: number | null;\n /** @default 2 */\n borderSize?: number;\n /** @default 8 */\n paddingSize?: number;\n containerRef?: React.RefObject<HTMLElement>;\n submitWhen?: \"enter-without-shift\" | \"enter-with-mod\";\n}\n\nexport interface TextareaAutoResizeRef {\n focus(): void;\n}\n\nexport const TextareaAutoResize = React.forwardRef<\n TextareaAutoResizeRef,\n TextareaAutoResizeProps\n>(LegacyTextareaAutoResize);\n\nfunction LegacyTextareaAutoResize(\n {\n autoResize: _autoResize,\n minRows,\n maxRows,\n borderSize,\n paddingSize,\n containerRef,\n value: propValue,\n style,\n submitWhen,\n onChange,\n onSubmit,\n onKeyDown,\n onCompositionStart,\n onCompositionEnd,\n ...props\n }: TextareaAutoResizeProps,\n ref: React.ForwardedRef<TextareaAutoResizeRef>\n): React.JSX.Element {\n const autoResize = _autoResize ?? true;\n const [value, setValue] = useState(propValue ?? \"\");\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const [autoStyle, setAutoStyle] = useState<React.CSSProperties | null>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => {\n const textarea = textareaRef.current;\n // istanbul ignore else: defensive check\n if (textarea) {\n const valueLength = textarea.value?.length;\n textarea.focus();\n valueLength && textarea.setSelectionRange(valueLength, valueLength);\n }\n },\n }),\n []\n );\n\n const doAutoResize = useCallback(() => {\n const textarea = textareaRef.current;\n if (textarea && autoResize) {\n const style = calculateAutoSizeStyle(textarea, {\n minRows,\n maxRows,\n borderSize,\n paddingSize,\n });\n // istanbul ignore next\n if (process.env.NODE_ENV === \"test\") {\n setAutoStyle(style);\n } else {\n flushSync(() => {\n setAutoStyle(style);\n });\n }\n }\n }, [autoResize, maxRows, minRows, borderSize, paddingSize]);\n\n const handleInputChange = (\n e: React.ChangeEvent<HTMLTextAreaElement>\n ): void => {\n setValue(e.target.value);\n onChange?.(e);\n };\n\n useEffect(() => {\n setValue(propValue ?? \"\");\n }, [propValue]);\n\n useEffect(() => {\n doAutoResize();\n }, [doAutoResize, value]);\n\n const compositionRef = useRef(false);\n\n const handleCompositionStart = useCallback(\n (e: React.CompositionEvent<HTMLTextAreaElement>) => {\n compositionRef.current = true;\n onCompositionStart?.(e);\n },\n [onCompositionStart]\n );\n\n const handleCompositionEnd = useCallback(\n (e: React.CompositionEvent<HTMLTextAreaElement>) => {\n compositionRef.current = false;\n onCompositionEnd?.(e);\n },\n [onCompositionEnd]\n );\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (compositionRef.current) {\n // Ignore key events during composition\n return;\n }\n\n if (\n e.key === \"Enter\" &&\n (submitWhen === \"enter-without-shift\"\n ? !e.shiftKey\n : submitWhen === \"enter-with-mod\" && e[modKey])\n ) {\n e.preventDefault();\n e.stopPropagation();\n onSubmit?.(e);\n }\n\n onKeyDown?.(e);\n },\n [onKeyDown, onSubmit, submitWhen]\n );\n\n // istanbul ignore next\n useEffect(() => {\n const container = containerRef?.current;\n if (!container || !autoResize) {\n return;\n }\n let previousInlineSize: number | undefined;\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (entry.target === container) {\n // istanbul ignore next: compatibility\n const currentInlineSize = entry.contentBoxSize\n ? entry.contentBoxSize[0]\n ? entry.contentBoxSize[0].inlineSize\n : (entry.contentBoxSize as unknown as ResizeObserverSize)\n .inlineSize\n : entry.contentRect.width;\n if (\n currentInlineSize !== undefined &&\n currentInlineSize !== previousInlineSize\n ) {\n const isInitial = !previousInlineSize;\n previousInlineSize = currentInlineSize;\n if (!isInitial) {\n requestAnimationFrame(doAutoResize);\n }\n }\n }\n }\n });\n observer.observe(container);\n return () => {\n observer.disconnect();\n };\n }, [autoResize, containerRef, doAutoResize]);\n\n return (\n <textarea\n {...props}\n ref={textareaRef}\n value={value}\n style={{\n ...style,\n ...autoStyle,\n }}\n onChange={handleInputChange}\n onCompositionStart={handleCompositionStart}\n onCompositionEnd={handleCompositionEnd}\n onKeyDown={handleKeyDown}\n />\n );\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/cjs/index.js CHANGED
@@ -58,4 +58,15 @@ Object.keys(_pickFormItemProps).forEach(function (key) {
58
58
  }
59
59
  });
60
60
  });
61
+ var _TextareaAutoResize = require("./TextareaAutoResize.js");
62
+ Object.keys(_TextareaAutoResize).forEach(function (key) {
63
+ if (key === "default" || key === "__esModule") return;
64
+ if (key in exports && exports[key] === _TextareaAutoResize[key]) return;
65
+ Object.defineProperty(exports, key, {
66
+ enumerable: true,
67
+ get: function () {
68
+ return _TextareaAutoResize[key];
69
+ }
70
+ });
71
+ });
61
72
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_Form","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_FormItemElement","_FormStore","_interfaces","_pickFormItemProps"],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"./Form.js\";\nexport * from \"./FormItemElement.js\";\nexport * from \"./FormStore.js\";\nexport * from \"./interfaces.js\";\nexport * from \"./pickFormItemProps.js\";\n"],"mappings":";;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,KAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,KAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,KAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,gBAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,gBAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,gBAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,gBAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,UAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,UAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,UAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,UAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,WAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,WAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,WAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,WAAA,CAAAP,GAAA;IAAA;EAAA;AAAA;AACA,IAAAQ,kBAAA,GAAAZ,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAU,kBAAA,EAAAT,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAQ,kBAAA,CAAAR,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAI,kBAAA,CAAAR,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["_Form","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_FormItemElement","_FormStore","_interfaces","_pickFormItemProps","_TextareaAutoResize"],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"./Form.js\";\nexport * from \"./FormItemElement.js\";\nexport * from \"./FormStore.js\";\nexport * from \"./interfaces.js\";\nexport * from \"./pickFormItemProps.js\";\nexport * from \"./TextareaAutoResize.js\";\n"],"mappings":";;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,KAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,KAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,KAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,gBAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,gBAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,gBAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,gBAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,UAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,UAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,UAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,UAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,WAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,WAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,WAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,WAAA,CAAAP,GAAA;IAAA;EAAA;AAAA;AACA,IAAAQ,kBAAA,GAAAZ,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAU,kBAAA,EAAAT,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAQ,kBAAA,CAAAR,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAI,kBAAA,CAAAR,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,mBAAA,GAAAb,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAW,mBAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAS,mBAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAK,mBAAA,CAAAT,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
@@ -0,0 +1,77 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = calculateAutoSizeStyle;
7
+ // istanbul ignore file
8
+
9
+ const HIDDEN_TEXTAREA_STYLE = `
10
+ min-height: 0!important;
11
+ max-height: none!important;
12
+ height: 0!important;
13
+ visibility: hidden!important;
14
+ overflow: hidden!important;
15
+ position: absolute!important;
16
+ z-index: -1000!important;
17
+ top: 0!important;
18
+ right: 0!important;
19
+ pointer-events: none!important;
20
+ `;
21
+ const SIZING_STYLE = ["letter-spacing", "line-height", "padding-top", "padding-bottom", "font-family", "font-weight", "font-size", "font-variant", "text-rendering", "text-transform", "width", "text-indent", "padding-left", "padding-right", "border-width", "box-sizing", "word-break", "white-space"];
22
+ let hiddenTextarea;
23
+ /**
24
+ * 计算 textarea 高度
25
+ * https://github.com/react-component/textarea/blob/1c0026fbe30e5f7dff1fca695b2cf262246381ca/src/calculateNodeHeight.tsx
26
+ */
27
+ function calculateAutoSizeStyle(uiTextNode, options) {
28
+ const {
29
+ minRows = null,
30
+ maxRows = null,
31
+ borderSize = 2,
32
+ paddingSize = 8
33
+ } = options ?? {};
34
+ if (!hiddenTextarea) {
35
+ hiddenTextarea = document.createElement("textarea");
36
+ hiddenTextarea.setAttribute("tab-index", "-1");
37
+ hiddenTextarea.setAttribute("aria-hidden", "true");
38
+ document.body.appendChild(hiddenTextarea);
39
+ }
40
+ const uiTextNodeStyle = window.getComputedStyle(uiTextNode);
41
+ const sizingStyle = SIZING_STYLE.map(name => `${name}:${uiTextNodeStyle.getPropertyValue(name)}`).join(";");
42
+
43
+ // equal style
44
+ hiddenTextarea.setAttribute("style", `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
45
+ hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || "";
46
+ let minHeight;
47
+ let maxHeight;
48
+ let overflowY;
49
+ let height = hiddenTextarea.scrollHeight + borderSize;
50
+ if (minRows !== null || maxRows !== null) {
51
+ const singleRowHeight = process.env.NODE_ENV === "test" ? 22 : parseFloat(window.getComputedStyle(hiddenTextarea).getPropertyValue("line-height"));
52
+ if (minRows !== null) {
53
+ minHeight = singleRowHeight * minRows + paddingSize + borderSize;
54
+ height = Math.max(minHeight, height);
55
+ }
56
+ if (maxRows !== null) {
57
+ maxHeight = singleRowHeight * maxRows + paddingSize + borderSize;
58
+ if (height <= maxHeight) {
59
+ overflowY = "hidden";
60
+ }
61
+ height = Math.min(maxHeight, height);
62
+ }
63
+ }
64
+ const style = {
65
+ height,
66
+ overflowY,
67
+ resize: "none"
68
+ };
69
+ if (minHeight) {
70
+ style.minHeight = minHeight;
71
+ }
72
+ if (maxHeight) {
73
+ style.maxHeight = maxHeight;
74
+ }
75
+ return style;
76
+ }
77
+ //# sourceMappingURL=calculateAutoSizeStyle.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"calculateAutoSizeStyle.js","names":["HIDDEN_TEXTAREA_STYLE","SIZING_STYLE","hiddenTextarea","calculateAutoSizeStyle","uiTextNode","options","minRows","maxRows","borderSize","paddingSize","document","createElement","setAttribute","body","appendChild","uiTextNodeStyle","window","getComputedStyle","sizingStyle","map","name","getPropertyValue","join","value","placeholder","minHeight","maxHeight","overflowY","height","scrollHeight","singleRowHeight","process","env","NODE_ENV","parseFloat","Math","max","min","style","resize"],"sources":["../../../src/utils/calculateAutoSizeStyle.ts"],"sourcesContent":["// istanbul ignore file\nimport type React from \"react\";\n\nconst HIDDEN_TEXTAREA_STYLE = `\n min-height: 0!important;\n max-height: none!important;\n height: 0!important;\n visibility: hidden!important;\n overflow: hidden!important;\n position: absolute!important;\n z-index: -1000!important;\n top: 0!important;\n right: 0!important;\n pointer-events: none!important;\n`;\n\nconst SIZING_STYLE = [\n \"letter-spacing\",\n \"line-height\",\n \"padding-top\",\n \"padding-bottom\",\n \"font-family\",\n \"font-weight\",\n \"font-size\",\n \"font-variant\",\n \"text-rendering\",\n \"text-transform\",\n \"width\",\n \"text-indent\",\n \"padding-left\",\n \"padding-right\",\n \"border-width\",\n \"box-sizing\",\n \"word-break\",\n \"white-space\",\n];\n\nlet hiddenTextarea: HTMLTextAreaElement | undefined;\n\nexport interface AutoSizeOptions {\n minRows?: number | null;\n maxRows?: number | null;\n borderSize?: number;\n paddingSize?: number;\n}\n\n/**\n * 计算 textarea 高度\n * https://github.com/react-component/textarea/blob/1c0026fbe30e5f7dff1fca695b2cf262246381ca/src/calculateNodeHeight.tsx\n */\nexport default function calculateAutoSizeStyle(\n uiTextNode: HTMLTextAreaElement,\n options?: AutoSizeOptions\n): React.CSSProperties {\n const {\n minRows = null,\n maxRows = null,\n borderSize = 2,\n paddingSize = 8,\n } = options ?? {};\n\n if (!hiddenTextarea) {\n hiddenTextarea = document.createElement(\"textarea\");\n hiddenTextarea.setAttribute(\"tab-index\", \"-1\");\n hiddenTextarea.setAttribute(\"aria-hidden\", \"true\");\n document.body.appendChild(hiddenTextarea);\n }\n\n const uiTextNodeStyle = window.getComputedStyle(uiTextNode);\n const sizingStyle = SIZING_STYLE.map(\n (name) => `${name}:${uiTextNodeStyle.getPropertyValue(name)}`\n ).join(\";\");\n\n // equal style\n hiddenTextarea.setAttribute(\n \"style\",\n `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`\n );\n hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || \"\";\n\n let minHeight: number | undefined;\n let maxHeight: number | undefined;\n let overflowY: React.CSSProperties[\"overflowY\"];\n\n let height = hiddenTextarea.scrollHeight + borderSize;\n\n if (minRows !== null || maxRows !== null) {\n const singleRowHeight =\n process.env.NODE_ENV === \"test\"\n ? 22\n : parseFloat(\n window\n .getComputedStyle(hiddenTextarea)\n .getPropertyValue(\"line-height\")\n );\n if (minRows !== null) {\n minHeight = singleRowHeight * minRows + paddingSize + borderSize;\n height = Math.max(minHeight, height);\n }\n if (maxRows !== null) {\n maxHeight = singleRowHeight * maxRows + paddingSize + borderSize;\n if (height <= maxHeight) {\n overflowY = \"hidden\";\n }\n height = Math.min(maxHeight, height);\n }\n }\n\n const style: React.CSSProperties = {\n height,\n overflowY,\n resize: \"none\",\n };\n\n if (minHeight) {\n style.minHeight = minHeight;\n }\n if (maxHeight) {\n style.maxHeight = maxHeight;\n }\n\n return style;\n}\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,135 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
3
+ import { flushSync } from "react-dom";
4
+ import ResizeObserver from "resize-observer-polyfill";
5
+ import calculateAutoSizeStyle from "./utils/calculateAutoSizeStyle.js";
6
+
7
+ // istanbul ignore next
8
+ const modKey = /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? "metaKey" : "ctrlKey";
9
+ export const TextareaAutoResize = /*#__PURE__*/React.forwardRef(LegacyTextareaAutoResize);
10
+ function LegacyTextareaAutoResize(_ref, ref) {
11
+ let {
12
+ autoResize: _autoResize,
13
+ minRows,
14
+ maxRows,
15
+ borderSize,
16
+ paddingSize,
17
+ containerRef,
18
+ value: propValue,
19
+ style,
20
+ submitWhen,
21
+ onChange,
22
+ onSubmit,
23
+ onKeyDown,
24
+ onCompositionStart,
25
+ onCompositionEnd,
26
+ ...props
27
+ } = _ref;
28
+ const autoResize = _autoResize !== null && _autoResize !== void 0 ? _autoResize : true;
29
+ const [value, setValue] = useState(propValue !== null && propValue !== void 0 ? propValue : "");
30
+ const textareaRef = useRef(null);
31
+ const [autoStyle, setAutoStyle] = useState(null);
32
+ useImperativeHandle(ref, () => ({
33
+ focus: () => {
34
+ const textarea = textareaRef.current;
35
+ // istanbul ignore else: defensive check
36
+ if (textarea) {
37
+ var _textarea$value;
38
+ const valueLength = (_textarea$value = textarea.value) === null || _textarea$value === void 0 ? void 0 : _textarea$value.length;
39
+ textarea.focus();
40
+ valueLength && textarea.setSelectionRange(valueLength, valueLength);
41
+ }
42
+ }
43
+ }), []);
44
+ const doAutoResize = useCallback(() => {
45
+ const textarea = textareaRef.current;
46
+ if (textarea && autoResize) {
47
+ const style = calculateAutoSizeStyle(textarea, {
48
+ minRows,
49
+ maxRows,
50
+ borderSize,
51
+ paddingSize
52
+ });
53
+ // istanbul ignore next
54
+ if (process.env.NODE_ENV === "test") {
55
+ setAutoStyle(style);
56
+ } else {
57
+ flushSync(() => {
58
+ setAutoStyle(style);
59
+ });
60
+ }
61
+ }
62
+ }, [autoResize, maxRows, minRows, borderSize, paddingSize]);
63
+ const handleInputChange = e => {
64
+ setValue(e.target.value);
65
+ onChange === null || onChange === void 0 || onChange(e);
66
+ };
67
+ useEffect(() => {
68
+ setValue(propValue !== null && propValue !== void 0 ? propValue : "");
69
+ }, [propValue]);
70
+ useEffect(() => {
71
+ doAutoResize();
72
+ }, [doAutoResize, value]);
73
+ const compositionRef = useRef(false);
74
+ const handleCompositionStart = useCallback(e => {
75
+ compositionRef.current = true;
76
+ onCompositionStart === null || onCompositionStart === void 0 || onCompositionStart(e);
77
+ }, [onCompositionStart]);
78
+ const handleCompositionEnd = useCallback(e => {
79
+ compositionRef.current = false;
80
+ onCompositionEnd === null || onCompositionEnd === void 0 || onCompositionEnd(e);
81
+ }, [onCompositionEnd]);
82
+ const handleKeyDown = useCallback(e => {
83
+ if (compositionRef.current) {
84
+ // Ignore key events during composition
85
+ return;
86
+ }
87
+ if (e.key === "Enter" && (submitWhen === "enter-without-shift" ? !e.shiftKey : submitWhen === "enter-with-mod" && e[modKey])) {
88
+ e.preventDefault();
89
+ e.stopPropagation();
90
+ onSubmit === null || onSubmit === void 0 || onSubmit(e);
91
+ }
92
+ onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
93
+ }, [onKeyDown, onSubmit, submitWhen]);
94
+
95
+ // istanbul ignore next
96
+ useEffect(() => {
97
+ const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
98
+ if (!container || !autoResize) {
99
+ return;
100
+ }
101
+ let previousInlineSize;
102
+ const observer = new ResizeObserver(entries => {
103
+ for (const entry of entries) {
104
+ if (entry.target === container) {
105
+ // istanbul ignore next: compatibility
106
+ const currentInlineSize = entry.contentBoxSize ? entry.contentBoxSize[0] ? entry.contentBoxSize[0].inlineSize : entry.contentBoxSize.inlineSize : entry.contentRect.width;
107
+ if (currentInlineSize !== undefined && currentInlineSize !== previousInlineSize) {
108
+ const isInitial = !previousInlineSize;
109
+ previousInlineSize = currentInlineSize;
110
+ if (!isInitial) {
111
+ requestAnimationFrame(doAutoResize);
112
+ }
113
+ }
114
+ }
115
+ }
116
+ });
117
+ observer.observe(container);
118
+ return () => {
119
+ observer.disconnect();
120
+ };
121
+ }, [autoResize, containerRef, doAutoResize]);
122
+ return /*#__PURE__*/React.createElement("textarea", _extends({}, props, {
123
+ ref: textareaRef,
124
+ value: value,
125
+ style: {
126
+ ...style,
127
+ ...autoStyle
128
+ },
129
+ onChange: handleInputChange,
130
+ onCompositionStart: handleCompositionStart,
131
+ onCompositionEnd: handleCompositionEnd,
132
+ onKeyDown: handleKeyDown
133
+ }));
134
+ }
135
+ //# sourceMappingURL=TextareaAutoResize.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TextareaAutoResize.js","names":["React","useCallback","useEffect","useImperativeHandle","useRef","useState","flushSync","ResizeObserver","calculateAutoSizeStyle","modKey","test","navigator","platform","TextareaAutoResize","forwardRef","LegacyTextareaAutoResize","_ref","ref","autoResize","_autoResize","minRows","maxRows","borderSize","paddingSize","containerRef","value","propValue","style","submitWhen","onChange","onSubmit","onKeyDown","onCompositionStart","onCompositionEnd","props","setValue","textareaRef","autoStyle","setAutoStyle","focus","textarea","current","_textarea$value","valueLength","length","setSelectionRange","doAutoResize","process","env","NODE_ENV","handleInputChange","e","target","compositionRef","handleCompositionStart","handleCompositionEnd","handleKeyDown","key","shiftKey","preventDefault","stopPropagation","container","previousInlineSize","observer","entries","entry","currentInlineSize","contentBoxSize","inlineSize","contentRect","width","undefined","isInitial","requestAnimationFrame","observe","disconnect","createElement","_extends"],"sources":["../../src/TextareaAutoResize.tsx"],"sourcesContent":["import React, {\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport ResizeObserver from \"resize-observer-polyfill\";\nimport calculateAutoSizeStyle from \"./utils/calculateAutoSizeStyle.js\";\n\n// istanbul ignore next\nconst modKey = /Mac|iPod|iPhone|iPad/.test(navigator.platform)\n ? \"metaKey\"\n : \"ctrlKey\";\n\nexport interface TextareaAutoResizeProps\n extends React.DetailedHTMLProps<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n HTMLTextAreaElement\n > {\n /** @default true */\n autoResize?: boolean;\n minRows?: number | null;\n maxRows?: number | null;\n /** @default 2 */\n borderSize?: number;\n /** @default 8 */\n paddingSize?: number;\n containerRef?: React.RefObject<HTMLElement>;\n submitWhen?: \"enter-without-shift\" | \"enter-with-mod\";\n}\n\nexport interface TextareaAutoResizeRef {\n focus(): void;\n}\n\nexport const TextareaAutoResize = React.forwardRef<\n TextareaAutoResizeRef,\n TextareaAutoResizeProps\n>(LegacyTextareaAutoResize);\n\nfunction LegacyTextareaAutoResize(\n {\n autoResize: _autoResize,\n minRows,\n maxRows,\n borderSize,\n paddingSize,\n containerRef,\n value: propValue,\n style,\n submitWhen,\n onChange,\n onSubmit,\n onKeyDown,\n onCompositionStart,\n onCompositionEnd,\n ...props\n }: TextareaAutoResizeProps,\n ref: React.ForwardedRef<TextareaAutoResizeRef>\n): React.JSX.Element {\n const autoResize = _autoResize ?? true;\n const [value, setValue] = useState(propValue ?? \"\");\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const [autoStyle, setAutoStyle] = useState<React.CSSProperties | null>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus: () => {\n const textarea = textareaRef.current;\n // istanbul ignore else: defensive check\n if (textarea) {\n const valueLength = textarea.value?.length;\n textarea.focus();\n valueLength && textarea.setSelectionRange(valueLength, valueLength);\n }\n },\n }),\n []\n );\n\n const doAutoResize = useCallback(() => {\n const textarea = textareaRef.current;\n if (textarea && autoResize) {\n const style = calculateAutoSizeStyle(textarea, {\n minRows,\n maxRows,\n borderSize,\n paddingSize,\n });\n // istanbul ignore next\n if (process.env.NODE_ENV === \"test\") {\n setAutoStyle(style);\n } else {\n flushSync(() => {\n setAutoStyle(style);\n });\n }\n }\n }, [autoResize, maxRows, minRows, borderSize, paddingSize]);\n\n const handleInputChange = (\n e: React.ChangeEvent<HTMLTextAreaElement>\n ): void => {\n setValue(e.target.value);\n onChange?.(e);\n };\n\n useEffect(() => {\n setValue(propValue ?? \"\");\n }, [propValue]);\n\n useEffect(() => {\n doAutoResize();\n }, [doAutoResize, value]);\n\n const compositionRef = useRef(false);\n\n const handleCompositionStart = useCallback(\n (e: React.CompositionEvent<HTMLTextAreaElement>) => {\n compositionRef.current = true;\n onCompositionStart?.(e);\n },\n [onCompositionStart]\n );\n\n const handleCompositionEnd = useCallback(\n (e: React.CompositionEvent<HTMLTextAreaElement>) => {\n compositionRef.current = false;\n onCompositionEnd?.(e);\n },\n [onCompositionEnd]\n );\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (compositionRef.current) {\n // Ignore key events during composition\n return;\n }\n\n if (\n e.key === \"Enter\" &&\n (submitWhen === \"enter-without-shift\"\n ? !e.shiftKey\n : submitWhen === \"enter-with-mod\" && e[modKey])\n ) {\n e.preventDefault();\n e.stopPropagation();\n onSubmit?.(e);\n }\n\n onKeyDown?.(e);\n },\n [onKeyDown, onSubmit, submitWhen]\n );\n\n // istanbul ignore next\n useEffect(() => {\n const container = containerRef?.current;\n if (!container || !autoResize) {\n return;\n }\n let previousInlineSize: number | undefined;\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n if (entry.target === container) {\n // istanbul ignore next: compatibility\n const currentInlineSize = entry.contentBoxSize\n ? entry.contentBoxSize[0]\n ? entry.contentBoxSize[0].inlineSize\n : (entry.contentBoxSize as unknown as ResizeObserverSize)\n .inlineSize\n : entry.contentRect.width;\n if (\n currentInlineSize !== undefined &&\n currentInlineSize !== previousInlineSize\n ) {\n const isInitial = !previousInlineSize;\n previousInlineSize = currentInlineSize;\n if (!isInitial) {\n requestAnimationFrame(doAutoResize);\n }\n }\n }\n }\n });\n observer.observe(container);\n return () => {\n observer.disconnect();\n };\n }, [autoResize, containerRef, doAutoResize]);\n\n return (\n <textarea\n {...props}\n ref={textareaRef}\n value={value}\n style={{\n ...style,\n ...autoStyle,\n }}\n onChange={handleInputChange}\n onCompositionStart={handleCompositionStart}\n onCompositionEnd={handleCompositionEnd}\n onKeyDown={handleKeyDown}\n />\n );\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/esm/index.js CHANGED
@@ -3,4 +3,5 @@ export * from "./FormItemElement.js";
3
3
  export * from "./FormStore.js";
4
4
  export * from "./interfaces.js";
5
5
  export * from "./pickFormItemProps.js";
6
+ export * from "./TextareaAutoResize.js";
6
7
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"./Form.js\";\nexport * from \"./FormItemElement.js\";\nexport * from \"./FormStore.js\";\nexport * from \"./interfaces.js\";\nexport * from \"./pickFormItemProps.js\";\n"],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,sBAAsB;AACpC,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,wBAAwB","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"./Form.js\";\nexport * from \"./FormItemElement.js\";\nexport * from \"./FormStore.js\";\nexport * from \"./interfaces.js\";\nexport * from \"./pickFormItemProps.js\";\nexport * from \"./TextareaAutoResize.js\";\n"],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,sBAAsB;AACpC,cAAc,gBAAgB;AAC9B,cAAc,iBAAiB;AAC/B,cAAc,wBAAwB;AACtC,cAAc,yBAAyB","ignoreList":[]}
@@ -0,0 +1,71 @@
1
+ // istanbul ignore file
2
+
3
+ const HIDDEN_TEXTAREA_STYLE = `
4
+ min-height: 0!important;
5
+ max-height: none!important;
6
+ height: 0!important;
7
+ visibility: hidden!important;
8
+ overflow: hidden!important;
9
+ position: absolute!important;
10
+ z-index: -1000!important;
11
+ top: 0!important;
12
+ right: 0!important;
13
+ pointer-events: none!important;
14
+ `;
15
+ const SIZING_STYLE = ["letter-spacing", "line-height", "padding-top", "padding-bottom", "font-family", "font-weight", "font-size", "font-variant", "text-rendering", "text-transform", "width", "text-indent", "padding-left", "padding-right", "border-width", "box-sizing", "word-break", "white-space"];
16
+ let hiddenTextarea;
17
+ /**
18
+ * 计算 textarea 高度
19
+ * https://github.com/react-component/textarea/blob/1c0026fbe30e5f7dff1fca695b2cf262246381ca/src/calculateNodeHeight.tsx
20
+ */
21
+ export default function calculateAutoSizeStyle(uiTextNode, options) {
22
+ const {
23
+ minRows = null,
24
+ maxRows = null,
25
+ borderSize = 2,
26
+ paddingSize = 8
27
+ } = options !== null && options !== void 0 ? options : {};
28
+ if (!hiddenTextarea) {
29
+ hiddenTextarea = document.createElement("textarea");
30
+ hiddenTextarea.setAttribute("tab-index", "-1");
31
+ hiddenTextarea.setAttribute("aria-hidden", "true");
32
+ document.body.appendChild(hiddenTextarea);
33
+ }
34
+ const uiTextNodeStyle = window.getComputedStyle(uiTextNode);
35
+ const sizingStyle = SIZING_STYLE.map(name => `${name}:${uiTextNodeStyle.getPropertyValue(name)}`).join(";");
36
+
37
+ // equal style
38
+ hiddenTextarea.setAttribute("style", `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
39
+ hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || "";
40
+ let minHeight;
41
+ let maxHeight;
42
+ let overflowY;
43
+ let height = hiddenTextarea.scrollHeight + borderSize;
44
+ if (minRows !== null || maxRows !== null) {
45
+ const singleRowHeight = process.env.NODE_ENV === "test" ? 22 : parseFloat(window.getComputedStyle(hiddenTextarea).getPropertyValue("line-height"));
46
+ if (minRows !== null) {
47
+ minHeight = singleRowHeight * minRows + paddingSize + borderSize;
48
+ height = Math.max(minHeight, height);
49
+ }
50
+ if (maxRows !== null) {
51
+ maxHeight = singleRowHeight * maxRows + paddingSize + borderSize;
52
+ if (height <= maxHeight) {
53
+ overflowY = "hidden";
54
+ }
55
+ height = Math.min(maxHeight, height);
56
+ }
57
+ }
58
+ const style = {
59
+ height,
60
+ overflowY,
61
+ resize: "none"
62
+ };
63
+ if (minHeight) {
64
+ style.minHeight = minHeight;
65
+ }
66
+ if (maxHeight) {
67
+ style.maxHeight = maxHeight;
68
+ }
69
+ return style;
70
+ }
71
+ //# sourceMappingURL=calculateAutoSizeStyle.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"calculateAutoSizeStyle.js","names":["HIDDEN_TEXTAREA_STYLE","SIZING_STYLE","hiddenTextarea","calculateAutoSizeStyle","uiTextNode","options","minRows","maxRows","borderSize","paddingSize","document","createElement","setAttribute","body","appendChild","uiTextNodeStyle","window","getComputedStyle","sizingStyle","map","name","getPropertyValue","join","value","placeholder","minHeight","maxHeight","overflowY","height","scrollHeight","singleRowHeight","process","env","NODE_ENV","parseFloat","Math","max","min","style","resize"],"sources":["../../../src/utils/calculateAutoSizeStyle.ts"],"sourcesContent":["// istanbul ignore file\nimport type React from \"react\";\n\nconst HIDDEN_TEXTAREA_STYLE = `\n min-height: 0!important;\n max-height: none!important;\n height: 0!important;\n visibility: hidden!important;\n overflow: hidden!important;\n position: absolute!important;\n z-index: -1000!important;\n top: 0!important;\n right: 0!important;\n pointer-events: none!important;\n`;\n\nconst SIZING_STYLE = [\n \"letter-spacing\",\n \"line-height\",\n \"padding-top\",\n \"padding-bottom\",\n \"font-family\",\n \"font-weight\",\n \"font-size\",\n \"font-variant\",\n \"text-rendering\",\n \"text-transform\",\n \"width\",\n \"text-indent\",\n \"padding-left\",\n \"padding-right\",\n \"border-width\",\n \"box-sizing\",\n \"word-break\",\n \"white-space\",\n];\n\nlet hiddenTextarea: HTMLTextAreaElement | undefined;\n\nexport interface AutoSizeOptions {\n minRows?: number | null;\n maxRows?: number | null;\n borderSize?: number;\n paddingSize?: number;\n}\n\n/**\n * 计算 textarea 高度\n * https://github.com/react-component/textarea/blob/1c0026fbe30e5f7dff1fca695b2cf262246381ca/src/calculateNodeHeight.tsx\n */\nexport default function calculateAutoSizeStyle(\n uiTextNode: HTMLTextAreaElement,\n options?: AutoSizeOptions\n): React.CSSProperties {\n const {\n minRows = null,\n maxRows = null,\n borderSize = 2,\n paddingSize = 8,\n } = options ?? {};\n\n if (!hiddenTextarea) {\n hiddenTextarea = document.createElement(\"textarea\");\n hiddenTextarea.setAttribute(\"tab-index\", \"-1\");\n hiddenTextarea.setAttribute(\"aria-hidden\", \"true\");\n document.body.appendChild(hiddenTextarea);\n }\n\n const uiTextNodeStyle = window.getComputedStyle(uiTextNode);\n const sizingStyle = SIZING_STYLE.map(\n (name) => `${name}:${uiTextNodeStyle.getPropertyValue(name)}`\n ).join(\";\");\n\n // equal style\n hiddenTextarea.setAttribute(\n \"style\",\n `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`\n );\n hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || \"\";\n\n let minHeight: number | undefined;\n let maxHeight: number | undefined;\n let overflowY: React.CSSProperties[\"overflowY\"];\n\n let height = hiddenTextarea.scrollHeight + borderSize;\n\n if (minRows !== null || maxRows !== null) {\n const singleRowHeight =\n process.env.NODE_ENV === \"test\"\n ? 22\n : parseFloat(\n window\n .getComputedStyle(hiddenTextarea)\n .getPropertyValue(\"line-height\")\n );\n if (minRows !== null) {\n minHeight = singleRowHeight * minRows + paddingSize + borderSize;\n height = Math.max(minHeight, height);\n }\n if (maxRows !== null) {\n maxHeight = singleRowHeight * maxRows + paddingSize + borderSize;\n if (height <= maxHeight) {\n overflowY = \"hidden\";\n }\n height = Math.min(maxHeight, height);\n }\n }\n\n const style: React.CSSProperties = {\n height,\n overflowY,\n resize: \"none\",\n };\n\n if (minHeight) {\n style.minHeight = minHeight;\n }\n if (maxHeight) {\n style.maxHeight = maxHeight;\n }\n\n return style;\n}\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,17 @@
1
+ import React from "react";
2
+ export interface TextareaAutoResizeProps extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
3
+ /** @default true */
4
+ autoResize?: boolean;
5
+ minRows?: number | null;
6
+ maxRows?: number | null;
7
+ /** @default 2 */
8
+ borderSize?: number;
9
+ /** @default 8 */
10
+ paddingSize?: number;
11
+ containerRef?: React.RefObject<HTMLElement>;
12
+ submitWhen?: "enter-without-shift" | "enter-with-mod";
13
+ }
14
+ export interface TextareaAutoResizeRef {
15
+ focus(): void;
16
+ }
17
+ export declare const TextareaAutoResize: React.ForwardRefExoticComponent<Omit<TextareaAutoResizeProps, "ref"> & React.RefAttributes<TextareaAutoResizeRef>>;
@@ -3,3 +3,4 @@ export * from "./FormItemElement.js";
3
3
  export * from "./FormStore.js";
4
4
  export * from "./interfaces.js";
5
5
  export * from "./pickFormItemProps.js";
6
+ export * from "./TextareaAutoResize.js";
@@ -0,0 +1,12 @@
1
+ import type React from "react";
2
+ export interface AutoSizeOptions {
3
+ minRows?: number | null;
4
+ maxRows?: number | null;
5
+ borderSize?: number;
6
+ paddingSize?: number;
7
+ }
8
+ /**
9
+ * 计算 textarea 高度
10
+ * https://github.com/react-component/textarea/blob/1c0026fbe30e5f7dff1fca695b2cf262246381ca/src/calculateNodeHeight.tsx
11
+ */
12
+ export default function calculateAutoSizeStyle(uiTextNode: HTMLTextAreaElement, options?: AutoSizeOptions): React.CSSProperties;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@next-shared/form",
3
- "version": "0.7.10",
3
+ "version": "0.8.1",
4
4
  "homepage": "https://github.com/easyops-cn/next-advanced-bricks/tree/master/shared/form",
5
5
  "repository": {
6
6
  "type": "git",
@@ -37,13 +37,16 @@
37
37
  "dependencies": {
38
38
  "@next-core/element": "^1.2.17",
39
39
  "@next-core/react-element": "^1.0.36",
40
- "@next-core/types": "^1.14.0",
41
- "lodash": "^4.17.21"
40
+ "@next-core/types": "^1.15.0",
41
+ "lodash": "^4.17.21",
42
+ "react": "0.0.0-experimental-ee8509801-20230117",
43
+ "react-dom": "0.0.0-experimental-ee8509801-20230117",
44
+ "resize-observer-polyfill": "^1.5.1"
42
45
  },
43
46
  "devDependencies": {
44
47
  "@next-core/build-next-libs": "^1.0.24",
45
48
  "@next-core/test-next": "^1.1.9",
46
49
  "concurrently": "^9.1.0"
47
50
  },
48
- "gitHead": "0aa0f91552094a6b73c5879eac6d2b21c86973b8"
51
+ "gitHead": "caa9d3ad2e36f024b7b5a00f7ee0bf118890e464"
49
52
  }