@unif/react-native-design 0.32.1 → 0.33.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/lib/module/components/ui/TextField/TextFieldBase.js +7 -1
- package/lib/module/components/ui/TextField/TextFieldBase.js.map +1 -1
- package/lib/module/components/ui/TextField/constants.js +2 -1
- package/lib/module/components/ui/TextField/constants.js.map +1 -1
- package/lib/module/components/ui/TextField/styles.js +5 -0
- package/lib/module/components/ui/TextField/styles.js.map +1 -1
- package/lib/module/components/ui/TextField/useMultilineLayout.js +4 -4
- package/lib/module/components/ui/TextField/useMultilineLayout.js.map +1 -1
- package/lib/module/components/ui/TextField/useMultilineLayout.web.js +4 -4
- package/lib/module/components/ui/TextField/useMultilineLayout.web.js.map +1 -1
- package/lib/module/components/ui/Textarea/Textarea.js +7 -3
- package/lib/module/components/ui/Textarea/Textarea.js.map +1 -1
- package/lib/typescript/src/components/ui/TextField/TextFieldBase.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/TextField/constants.d.ts +1 -0
- package/lib/typescript/src/components/ui/TextField/constants.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/TextField/styles.d.ts +5 -0
- package/lib/typescript/src/components/ui/TextField/styles.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/TextField/types.d.ts +3 -0
- package/lib/typescript/src/components/ui/TextField/types.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/TextField/useMultilineLayout.d.ts +1 -1
- package/lib/typescript/src/components/ui/TextField/useMultilineLayout.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/TextField/useMultilineLayout.web.d.ts +1 -1
- package/lib/typescript/src/components/ui/TextField/useMultilineLayout.web.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/Textarea/Textarea.d.ts +1 -1
- package/lib/typescript/src/components/ui/Textarea/Textarea.d.ts.map +1 -1
- package/lib/typescript/src/components/ui/Textarea/types.d.ts +4 -2
- package/lib/typescript/src/components/ui/Textarea/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/TextField/TextFieldBase.tsx +13 -1
- package/src/components/ui/TextField/constants.ts +2 -1
- package/src/components/ui/TextField/styles.ts +5 -0
- package/src/components/ui/TextField/types.ts +3 -0
- package/src/components/ui/TextField/useMultilineLayout.ts +3 -3
- package/src/components/ui/TextField/useMultilineLayout.web.ts +4 -5
- package/src/components/ui/Textarea/Textarea.tsx +8 -3
- package/src/components/ui/Textarea/types.ts +4 -2
|
@@ -11,6 +11,7 @@ import { TextFieldSlot } from "./TextFieldSlot.js";
|
|
|
11
11
|
import { useErrorAnnouncement } from "./useErrorAnnouncement.js";
|
|
12
12
|
import { useTextFieldValue } from "./useTextFieldValue.js";
|
|
13
13
|
import { useMultilineLayout } from './useMultilineLayout';
|
|
14
|
+
import { TEXTAREA_PLAIN_VERTICAL_INSET, TEXTAREA_VERTICAL_INSET } from "./constants.js";
|
|
14
15
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
16
|
const log = createLogger('TextField');
|
|
16
17
|
|
|
@@ -24,6 +25,7 @@ export const TextFieldBase = /*#__PURE__*/forwardRef(function TextFieldBase(prop
|
|
|
24
25
|
minHeight,
|
|
25
26
|
maxHeight,
|
|
26
27
|
searchLayout,
|
|
28
|
+
plainSurface,
|
|
27
29
|
leading,
|
|
28
30
|
trailing,
|
|
29
31
|
error,
|
|
@@ -36,6 +38,7 @@ export const TextFieldBase = /*#__PURE__*/forwardRef(function TextFieldBase(prop
|
|
|
36
38
|
accessibilityState,
|
|
37
39
|
accessibilityRole,
|
|
38
40
|
placeholderTextColor: callerPlaceholder,
|
|
41
|
+
underlineColorAndroid: callerUnderline,
|
|
39
42
|
onFocus,
|
|
40
43
|
onBlur,
|
|
41
44
|
onContentSizeChange,
|
|
@@ -72,11 +75,13 @@ export const TextFieldBase = /*#__PURE__*/forwardRef(function TextFieldBase(prop
|
|
|
72
75
|
}, scope);
|
|
73
76
|
const normalizedInputHeight = normalizeInputHeight(height === undefined ? fixed.hitTarget : height);
|
|
74
77
|
const normalizedTextareaHeights = normalizeTextareaHeights(minHeight, maxHeight);
|
|
78
|
+
const plain = multiline && plainSurface === true;
|
|
75
79
|
const multilineLayout = useMultilineLayout({
|
|
76
80
|
enabled: multiline,
|
|
77
81
|
value: controller.value,
|
|
78
82
|
minHeight: normalizedTextareaHeights.minHeight,
|
|
79
83
|
maxHeight: normalizedTextareaHeights.maxHeight,
|
|
84
|
+
verticalInset: plain ? TEXTAREA_PLAIN_VERTICAL_INSET : TEXTAREA_VERTICAL_INSET,
|
|
80
85
|
fontSize: styles.input.fontSize,
|
|
81
86
|
placeholder: allowedNativeProps.placeholder,
|
|
82
87
|
inputRef: nativeRef
|
|
@@ -115,7 +120,7 @@ export const TextFieldBase = /*#__PURE__*/forwardRef(function TextFieldBase(prop
|
|
|
115
120
|
}],
|
|
116
121
|
testID: testID,
|
|
117
122
|
children: [/*#__PURE__*/_jsxs(View, {
|
|
118
|
-
style: [styles.wrap, multiline && styles.wrapMultiline, searchLayout === undefined && wrapStateStyles, searchLayout !== undefined && styles.searchInteractiveRow, multiline ? {
|
|
123
|
+
style: [styles.wrap, multiline && styles.wrapMultiline, searchLayout === undefined && !plain && wrapStateStyles, searchLayout !== undefined && styles.searchInteractiveRow, plain && styles.wrapPlain, multiline ? {
|
|
119
124
|
minHeight: normalizedHeight,
|
|
120
125
|
...(normalizedTextareaHeights.maxHeight !== undefined && {
|
|
121
126
|
maxHeight: normalizedTextareaHeights.maxHeight
|
|
@@ -158,6 +163,7 @@ export const TextFieldBase = /*#__PURE__*/forwardRef(function TextFieldBase(prop
|
|
|
158
163
|
minHeight: searchLayout.interactiveHeight
|
|
159
164
|
}],
|
|
160
165
|
placeholderTextColor: callerPlaceholder ?? colors.foregroundSubtle,
|
|
166
|
+
underlineColorAndroid: plain ? 'transparent' : callerUnderline,
|
|
161
167
|
accessibilityRole: accessibilityRole,
|
|
162
168
|
accessibilityState: mergedAccessibilityState,
|
|
163
169
|
testID: childTestID(testID, 'input')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","useEffect","useImperativeHandle","useState","Platform","Text","TextInput","View","fixed","useColors","useThemedStyles","childTestID","createLogger","normalizeInputHeight","normalizeTextareaHeights","sanitizeTextFieldContainerStyle","makeStyles","TextFieldSlot","useErrorAnnouncement","useTextFieldValue","useMultilineLayout","jsx","_jsx","jsxs","_jsxs","log","TextFieldBase","props","forwardedRef","multiline","height","minHeight","maxHeight","searchLayout","leading","trailing","error","disabled","editable","containerStyle","value","defaultValue","onChangeText","accessibilityState","accessibilityRole","placeholderTextColor","callerPlaceholder","onFocus","onBlur","onContentSizeChange","onLayout","scrollEnabled","testID","style","_style","numberOfLines","_numberOfLines","_ariaDisabled","readOnly","_readOnly","role","_role","enterKeyHint","_enterKeyHint","clearTextOnFocus","_clearTextOnFocus","allowedNativeProps","removedNativeAliasKey","Object","entries","filter","entry","undefined","map","name","join","colors","styles","focused","setFocused","nativeRef","useRef","scope","controller","normalizedInputHeight","hitTarget","normalizedTextareaHeights","multilineLayout","enabled","fontSize","input","placeholder","inputRef","sanitizedContainer","effectiveEditable","mergedAccessibilityState","normalizedHeight","filled","length","diagnostics","diagnosticKey","warn","focus","current","blur","wrapStateStyles","wrapActive","wrapError","wrapFocus","wrapFilled","wrapIdle","interactiveHeight","containerDisabled","rootCentered","minWidth","children","wrap","wrapMultiline","searchInteractiveRow","pointerEvents","searchVisibleSurface","top","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useEffect","useImperativeHandle","useState","Platform","Text","TextInput","View","fixed","useColors","useThemedStyles","childTestID","createLogger","normalizeInputHeight","normalizeTextareaHeights","sanitizeTextFieldContainerStyle","makeStyles","TextFieldSlot","useErrorAnnouncement","useTextFieldValue","useMultilineLayout","TEXTAREA_PLAIN_VERTICAL_INSET","TEXTAREA_VERTICAL_INSET","jsx","_jsx","jsxs","_jsxs","log","TextFieldBase","props","forwardedRef","multiline","height","minHeight","maxHeight","searchLayout","plainSurface","leading","trailing","error","disabled","editable","containerStyle","value","defaultValue","onChangeText","accessibilityState","accessibilityRole","placeholderTextColor","callerPlaceholder","underlineColorAndroid","callerUnderline","onFocus","onBlur","onContentSizeChange","onLayout","scrollEnabled","testID","style","_style","numberOfLines","_numberOfLines","_ariaDisabled","readOnly","_readOnly","role","_role","enterKeyHint","_enterKeyHint","clearTextOnFocus","_clearTextOnFocus","allowedNativeProps","removedNativeAliasKey","Object","entries","filter","entry","undefined","map","name","join","colors","styles","focused","setFocused","nativeRef","useRef","scope","controller","normalizedInputHeight","hitTarget","normalizedTextareaHeights","plain","multilineLayout","enabled","verticalInset","fontSize","input","placeholder","inputRef","sanitizedContainer","effectiveEditable","mergedAccessibilityState","normalizedHeight","filled","length","diagnostics","diagnosticKey","warn","focus","current","blur","wrapStateStyles","wrapActive","wrapError","wrapFocus","wrapFilled","wrapIdle","interactiveHeight","containerDisabled","rootCentered","minWidth","children","wrap","wrapMultiline","searchInteractiveRow","wrapPlain","pointerEvents","searchVisibleSurface","top","bottom","slot","ref","event","inputMultiline","inputScrolling","inputClipped","inputStyle","foregroundSubtle","errorMsg","accessibilityLiveRegion","OS","displayName"],"sourceRoot":"../../../../../src","sources":["components/ui/TextField/TextFieldBase.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,5 +3,6 @@
|
|
|
3
3
|
import { space } from "../../../theme/index.js";
|
|
4
4
|
export const TEXT_FIELD_BORDER_WIDTH = 1;
|
|
5
5
|
export const TEXTAREA_VERTICAL_PADDING = space[4];
|
|
6
|
-
export const
|
|
6
|
+
export const TEXTAREA_PLAIN_VERTICAL_INSET = 2 * TEXTAREA_VERTICAL_PADDING;
|
|
7
|
+
export const TEXTAREA_VERTICAL_INSET = TEXTAREA_PLAIN_VERTICAL_INSET + 2 * TEXT_FIELD_BORDER_WIDTH;
|
|
7
8
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["space","TEXT_FIELD_BORDER_WIDTH","TEXTAREA_VERTICAL_PADDING","TEXTAREA_VERTICAL_INSET"],"sourceRoot":"../../../../../src","sources":["components/ui/TextField/constants.ts"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,yBAAgB;AAEtC,OAAO,MAAMC,uBAAuB,GAAG,CAAC;AACxC,OAAO,MAAMC,yBAAyB,GAAGF,KAAK,CAAC,CAAC,CAAC;AACjD,OAAO,MAAMG,
|
|
1
|
+
{"version":3,"names":["space","TEXT_FIELD_BORDER_WIDTH","TEXTAREA_VERTICAL_PADDING","TEXTAREA_PLAIN_VERTICAL_INSET","TEXTAREA_VERTICAL_INSET"],"sourceRoot":"../../../../../src","sources":["components/ui/TextField/constants.ts"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,yBAAgB;AAEtC,OAAO,MAAMC,uBAAuB,GAAG,CAAC;AACxC,OAAO,MAAMC,yBAAyB,GAAGF,KAAK,CAAC,CAAC,CAAC;AACjD,OAAO,MAAMG,6BAA6B,GAAG,CAAC,GAAGD,yBAAyB;AAC1E,OAAO,MAAME,uBAAuB,GAClCD,6BAA6B,GAAG,CAAC,GAAGF,uBAAuB","ignoreList":[]}
|
|
@@ -18,6 +18,11 @@ export const makeStyles = c => StyleSheet.create({
|
|
|
18
18
|
paddingVertical: TEXTAREA_VERTICAL_PADDING,
|
|
19
19
|
alignItems: 'flex-start'
|
|
20
20
|
},
|
|
21
|
+
wrapPlain: {
|
|
22
|
+
backgroundColor: 'transparent',
|
|
23
|
+
borderWidth: 0,
|
|
24
|
+
borderRadius: 0
|
|
25
|
+
},
|
|
21
26
|
/** Search 的可见底色/边框绝不承载命中区域。 */
|
|
22
27
|
searchInteractiveRow: {
|
|
23
28
|
borderWidth: 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","fw","radius","space","type","t","TEXTAREA_VERTICAL_PADDING","TEXT_FIELD_BORDER_WIDTH","makeStyles","c","create","wrap","flexDirection","alignItems","gap","paddingHorizontal","borderRadius","md","borderWidth","wrapMultiline","paddingVertical","searchInteractiveRow","searchVisibleSurface","position","left","right","wrapIdle","
|
|
1
|
+
{"version":3,"names":["StyleSheet","fw","radius","space","type","t","TEXTAREA_VERTICAL_PADDING","TEXT_FIELD_BORDER_WIDTH","makeStyles","c","create","wrap","flexDirection","alignItems","gap","paddingHorizontal","borderRadius","md","borderWidth","wrapMultiline","paddingVertical","wrapPlain","backgroundColor","searchInteractiveRow","searchVisibleSurface","position","left","right","wrapIdle","surfaceContainerHigh","borderColor","wrapActive","surface","wrapFocus","primary","wrapFilled","outline","wrapError","error","input","flex","minWidth","fontSize","body","color","foreground","padding","margin","outlineWidth","inputMultiline","textAlignVertical","inputScrolling","overflow","inputClipped","slotDisplay","justifyContent","minHeight","slotText","foregroundMuted","sm","slotActionLabel","xs","fontWeight","medium","slotActionLabelDisabled","foregroundSubtle","actionFrame","height","errorMsg","micro","marginTop","regular","containerDisabled","opacity","rootCentered"],"sourceRoot":"../../../../../src","sources":["components/ui/TextField/styles.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { TEXTAREA_VERTICAL_INSET } from "./constants.js";
|
|
4
3
|
/** 原生 Yoga 直接测量文本;固定 height 会阻断 iOS Fabric 的后续内容尺寸通知。 */
|
|
5
4
|
export function useMultilineLayout({
|
|
6
5
|
minHeight,
|
|
7
|
-
maxHeight
|
|
6
|
+
maxHeight,
|
|
7
|
+
verticalInset
|
|
8
8
|
}) {
|
|
9
9
|
return {
|
|
10
10
|
inputStyle: {
|
|
11
|
-
minHeight: Math.max(0, minHeight -
|
|
12
|
-
maxHeight: maxHeight === undefined ? undefined : Math.max(0, maxHeight -
|
|
11
|
+
minHeight: Math.max(0, minHeight - verticalInset),
|
|
12
|
+
maxHeight: maxHeight === undefined ? undefined : Math.max(0, maxHeight - verticalInset)
|
|
13
13
|
},
|
|
14
14
|
// 原生仅在内容溢出时滚动;min=max 时也不等待不会再变化的框高事件。
|
|
15
15
|
scrollEnabled: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useMultilineLayout","minHeight","maxHeight","verticalInset","inputStyle","Math","max","undefined","scrollEnabled"],"sourceRoot":"../../../../../src","sources":["components/ui/TextField/useMultilineLayout.ts"],"mappings":";;AAEA;AACA,OAAO,SAASA,kBAAkBA,CAAC;EACjCC,SAAS;EACTC,SAAS;EACTC;AACoB,CAAC,EAAmB;EACxC,OAAO;IACLC,UAAU,EAAE;MACVH,SAAS,EAAEI,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEL,SAAS,GAAGE,aAAa,CAAC;MACjDD,SAAS,EACPA,SAAS,KAAKK,SAAS,GACnBA,SAAS,GACTF,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,SAAS,GAAGC,aAAa;IAC7C,CAAC;IACD;IACAK,aAAa,EAAE;EACjB,CAAC;AACH","ignoreList":[]}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { useCallback, useLayoutEffect, useState } from 'react';
|
|
4
|
-
import { TEXTAREA_VERTICAL_INSET } from "./constants.js";
|
|
5
4
|
/** RNW 的 contentSize 使用 scrollHeight,固定高度会阻止缩短,须临时解除高度后测量。 */
|
|
6
5
|
export function useMultilineLayout({
|
|
7
6
|
enabled,
|
|
8
7
|
value,
|
|
9
8
|
minHeight,
|
|
10
9
|
maxHeight,
|
|
10
|
+
verticalInset,
|
|
11
11
|
fontSize,
|
|
12
12
|
placeholder,
|
|
13
13
|
inputRef
|
|
14
14
|
}) {
|
|
15
15
|
const [contentHeight, setContentHeight] = useState(0);
|
|
16
16
|
const [width, setWidth] = useState(0);
|
|
17
|
-
const minimum = Math.max(0, minHeight -
|
|
18
|
-
const maximum = maxHeight === undefined ? Infinity : Math.max(0, maxHeight -
|
|
17
|
+
const minimum = Math.max(0, minHeight - verticalInset);
|
|
18
|
+
const maximum = maxHeight === undefined ? Infinity : Math.max(0, maxHeight - verticalInset);
|
|
19
19
|
useLayoutEffect(() => {
|
|
20
20
|
if (!enabled || inputRef.current === null) return;
|
|
21
21
|
const node = inputRef.current;
|
|
@@ -31,7 +31,7 @@ export function useMultilineLayout({
|
|
|
31
31
|
node.style.minHeight = previousMinimum;
|
|
32
32
|
node.scrollTop = scrollTop;
|
|
33
33
|
if (Number.isFinite(measured)) setContentHeight(measured);
|
|
34
|
-
}, [enabled, value, width, fontSize, placeholder, minHeight, maxHeight, inputRef]);
|
|
34
|
+
}, [enabled, value, width, fontSize, placeholder, minHeight, maxHeight, verticalInset, inputRef]);
|
|
35
35
|
const onLayout = useCallback(event => setWidth(event.nativeEvent.layout.width), []);
|
|
36
36
|
return {
|
|
37
37
|
inputStyle: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useLayoutEffect","useState","
|
|
1
|
+
{"version":3,"names":["useCallback","useLayoutEffect","useState","useMultilineLayout","enabled","value","minHeight","maxHeight","verticalInset","fontSize","placeholder","inputRef","contentHeight","setContentHeight","width","setWidth","minimum","Math","max","maximum","undefined","Infinity","current","node","height","previousMinimum","style","scrollTop","measured","scrollHeight","Number","isFinite","onLayout","event","nativeEvent","layout","inputStyle","min","scrollEnabled"],"sourceRoot":"../../../../../src","sources":["components/ui/TextField/useMultilineLayout.web.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,OAAO;AAO9D;AACA,OAAO,SAASC,kBAAkBA,CAAC;EACjCC,OAAO;EACPC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,aAAa;EACbC,QAAQ;EACRC,WAAW;EACXC;AACoB,CAAC,EAAmB;EACxC,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGX,QAAQ,CAAC,CAAC,CAAC;EACrD,MAAM,CAACY,KAAK,EAAEC,QAAQ,CAAC,GAAGb,QAAQ,CAAC,CAAC,CAAC;EACrC,MAAMc,OAAO,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEZ,SAAS,GAAGE,aAAa,CAAC;EACtD,MAAMW,OAAO,GACXZ,SAAS,KAAKa,SAAS,GAAGC,QAAQ,GAAGJ,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEX,SAAS,GAAGC,aAAa,CAAC;EAC7EP,eAAe,CAAC,MAAM;IACpB,IAAI,CAACG,OAAO,IAAIO,QAAQ,CAACW,OAAO,KAAK,IAAI,EAAE;IAC3C,MAAMC,IAAI,GAAGZ,QAAQ,CAACW,OAA6C;IACnE,MAAM;MAAEE,MAAM;MAAElB,SAAS,EAAEmB;IAAgB,CAAC,GAAGF,IAAI,CAACG,KAAK;IACzD,MAAMC,SAAS,GAAGJ,IAAI,CAACI,SAAS;IAChCJ,IAAI,CAACG,KAAK,CAACF,MAAM,GAAG,KAAK;IACzBD,IAAI,CAACG,KAAK,CAACpB,SAAS,GAAG,KAAK;IAC5B,MAAMsB,QAAQ,GAAGL,IAAI,CAACM,YAAY;IAClCN,IAAI,CAACG,KAAK,CAACF,MAAM,GAAGA,MAAM;IAC1BD,IAAI,CAACG,KAAK,CAACpB,SAAS,GAAGmB,eAAe;IACtCF,IAAI,CAACI,SAAS,GAAGA,SAAS;IAC1B,IAAIG,MAAM,CAACC,QAAQ,CAACH,QAAQ,CAAC,EAAEf,gBAAgB,CAACe,QAAQ,CAAC;EAC3D,CAAC,EAAE,CACDxB,OAAO,EACPC,KAAK,EACLS,KAAK,EACLL,QAAQ,EACRC,WAAW,EACXJ,SAAS,EACTC,SAAS,EACTC,aAAa,EACbG,QAAQ,CACT,CAAC;EACF,MAAMqB,QAAQ,GAAGhC,WAAW,CACzBiC,KAAK,IAAKlB,QAAQ,CAACkB,KAAK,CAACC,WAAW,CAACC,MAAM,CAACrB,KAAK,CAAC,EACnD,EACF,CAAC;EACD,OAAO;IACLsB,UAAU,EAAE;MACVZ,MAAM,EAAEP,IAAI,CAACoB,GAAG,CAAClB,OAAO,EAAEF,IAAI,CAACC,GAAG,CAACF,OAAO,EAAEJ,aAAa,CAAC;IAC5D,CAAC;IACD0B,aAAa,EAAE1B,aAAa,GAAGO,OAAO;IACtCa;EACF,CAAC;AACH","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ import { TextFieldBase } from "../TextField/TextFieldBase.js";
|
|
|
5
5
|
import { sanitizeTextFieldWrapperProps } from "../TextField/normalize.js";
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
7
|
/**
|
|
8
|
-
* 多行文本输入框 ——
|
|
8
|
+
* 多行文本输入框 —— 默认视觉与 Input 一致;plain 供外层已提供表面的组合使用。
|
|
9
9
|
*
|
|
10
10
|
* 跟 Input 区别:
|
|
11
11
|
* - 内置 `multiline=true`,业务不用传
|
|
@@ -16,14 +16,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
16
16
|
*
|
|
17
17
|
* Ref:forwardRef<TextFieldHandle>,业务只可调 `focus()` / `blur()`。
|
|
18
18
|
*/
|
|
19
|
-
export const Textarea = /*#__PURE__*/forwardRef(function Textarea(
|
|
19
|
+
export const Textarea = /*#__PURE__*/forwardRef(function Textarea({
|
|
20
|
+
surface = 'default',
|
|
21
|
+
...props
|
|
22
|
+
}, ref) {
|
|
20
23
|
const {
|
|
21
24
|
props: safeProps
|
|
22
25
|
} = sanitizeTextFieldWrapperProps(props);
|
|
23
26
|
return /*#__PURE__*/_jsx(TextFieldBase, {
|
|
24
27
|
ref: ref,
|
|
25
28
|
...safeProps,
|
|
26
|
-
multiline: true
|
|
29
|
+
multiline: true,
|
|
30
|
+
plainSurface: surface === 'plain'
|
|
27
31
|
});
|
|
28
32
|
});
|
|
29
33
|
Textarea.displayName = 'Textarea';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","TextFieldBase","sanitizeTextFieldWrapperProps","jsx","_jsx","Textarea","props","ref","safeProps","multiline","displayName"],"sourceRoot":"../../../../../src","sources":["components/ui/Textarea/Textarea.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,6BAA6B,QAAQ,2BAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,gBAAGL,UAAU,CAChC,SAASK,QAAQA,
|
|
1
|
+
{"version":3,"names":["forwardRef","TextFieldBase","sanitizeTextFieldWrapperProps","jsx","_jsx","Textarea","surface","props","ref","safeProps","multiline","plainSurface","displayName"],"sourceRoot":"../../../../../src","sources":["components/ui/Textarea/Textarea.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,6BAA6B,QAAQ,2BAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,gBAAGL,UAAU,CAChC,SAASK,QAAQA,CAAC;EAAEC,OAAO,GAAG,SAAS;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,EAAE;EACxD,MAAM;IAAED,KAAK,EAAEE;EAAU,CAAC,GAAGP,6BAA6B,CACxDK,KACF,CAAC;EACD,oBACEH,IAAA,CAACH,aAAa;IACZO,GAAG,EAAEA,GAAI;IAAA,GACJC,SAAS;IACdC,SAAS;IACTC,YAAY,EAAEL,OAAO,KAAK;EAAQ,CACnC,CAAC;AAEN,CACF,CAAC;AAEDD,QAAQ,CAACO,WAAW,GAAG,UAAU","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextFieldBase.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/TextFieldBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"TextFieldBase.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/TextFieldBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAcnE,0EAA0E;AAC1E,eAAO,MAAM,aAAa,4FAgPzB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,yBAAyB,QAAW,CAAC;AAClD,eAAO,MAAM,uBAAuB,
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,yBAAyB,QAAW,CAAC;AAClD,eAAO,MAAM,6BAA6B,QAAgC,CAAC;AAC3E,eAAO,MAAM,uBAAuB,QACyB,CAAC"}
|
|
@@ -13,6 +13,11 @@ export declare const makeStyles: (c: ColorTokens) => Readonly<{
|
|
|
13
13
|
paddingVertical: number;
|
|
14
14
|
alignItems: "flex-start";
|
|
15
15
|
};
|
|
16
|
+
wrapPlain: {
|
|
17
|
+
backgroundColor: string;
|
|
18
|
+
borderWidth: number;
|
|
19
|
+
borderRadius: number;
|
|
20
|
+
};
|
|
16
21
|
/** Search 的可见底色/边框绝不承载命中区域。 */
|
|
17
22
|
searchInteractiveRow: {
|
|
18
23
|
borderWidth: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,yDAAyD;AACzD,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMlD,yDAAyD;AACzD,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW;;;;;;;;;;;;;;;;;;IAmBrC,+BAA+B;;;;;;;;;;;;;;;IAe/B,qEAAqE;;;;;;;;;;;;;;;;;;;;;;IAuBrE,sCAAsC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDtC,CAAC"}
|
|
@@ -109,12 +109,15 @@ export type TextFieldBaseProps = Omit<TextInputProps, RemovedTextInputProps> & T
|
|
|
109
109
|
maxHeight?: number;
|
|
110
110
|
/** internal:Search 的 44pt interactive row + 36pt decorative surface。 */
|
|
111
111
|
searchLayout?: SearchFieldLayout;
|
|
112
|
+
/** internal:仅由 Textarea 的公开 surface 选择,无独立表面的多行输入。 */
|
|
113
|
+
plainSurface?: boolean;
|
|
112
114
|
};
|
|
113
115
|
export interface MultilineLayoutInput {
|
|
114
116
|
enabled: boolean;
|
|
115
117
|
value: string;
|
|
116
118
|
minHeight: number;
|
|
117
119
|
maxHeight: number | undefined;
|
|
120
|
+
verticalInset: number;
|
|
118
121
|
fontSize: number | undefined;
|
|
119
122
|
placeholder: string | undefined;
|
|
120
123
|
inputRef: RefObject<ComponentRef<typeof TextInput> | null>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { MultilineLayout, MultilineLayoutInput } from './types';
|
|
2
2
|
/** 原生 Yoga 直接测量文本;固定 height 会阻断 iOS Fabric 的后续内容尺寸通知。 */
|
|
3
|
-
export declare function useMultilineLayout({ minHeight, maxHeight, }: MultilineLayoutInput): MultilineLayout;
|
|
3
|
+
export declare function useMultilineLayout({ minHeight, maxHeight, verticalInset, }: MultilineLayoutInput): MultilineLayout;
|
|
4
4
|
//# sourceMappingURL=useMultilineLayout.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMultilineLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/useMultilineLayout.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useMultilineLayout.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/useMultilineLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAErE,yDAAyD;AACzD,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,SAAS,EACT,aAAa,GACd,EAAE,oBAAoB,GAAG,eAAe,CAYxC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { MultilineLayout, MultilineLayoutInput } from './types';
|
|
2
2
|
/** RNW 的 contentSize 使用 scrollHeight,固定高度会阻止缩短,须临时解除高度后测量。 */
|
|
3
|
-
export declare function useMultilineLayout({ enabled, value, minHeight, maxHeight, fontSize, placeholder, inputRef, }: MultilineLayoutInput): MultilineLayout;
|
|
3
|
+
export declare function useMultilineLayout({ enabled, value, minHeight, maxHeight, verticalInset, fontSize, placeholder, inputRef, }: MultilineLayoutInput): MultilineLayout;
|
|
4
4
|
//# sourceMappingURL=useMultilineLayout.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMultilineLayout.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/useMultilineLayout.web.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useMultilineLayout.web.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextField/useMultilineLayout.web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EACf,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAEjB,8DAA8D;AAC9D,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,WAAW,EACX,QAAQ,GACT,EAAE,oBAAoB,GAAG,eAAe,CAwCxC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { TextFieldHandle } from '../TextField/types';
|
|
2
2
|
import type { TextareaProps } from './types';
|
|
3
3
|
/**
|
|
4
|
-
* 多行文本输入框 ——
|
|
4
|
+
* 多行文本输入框 —— 默认视觉与 Input 一致;plain 供外层已提供表面的组合使用。
|
|
5
5
|
*
|
|
6
6
|
* 跟 Input 区别:
|
|
7
7
|
* - 内置 `multiline=true`,业务不用传
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Textarea/Textarea.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Textarea/Textarea.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,2GAcpB,CAAC"}
|
|
@@ -6,8 +6,10 @@ import type { RemovedTextInputProps, TextFieldCommonProps, TextFieldValueProps }
|
|
|
6
6
|
* 内部固定 `multiline=true`;高度在 `[minHeight, maxHeight]` 之间根据内容增长。
|
|
7
7
|
* 继承除 `style` / `multiline` / `numberOfLines` 之外的 RN `TextInputProps`。
|
|
8
8
|
*/
|
|
9
|
-
export type TextareaProps = Omit<TextInputProps, RemovedTextInputProps> & TextFieldCommonProps & TextFieldValueProps &
|
|
10
|
-
interface
|
|
9
|
+
export type TextareaProps = Omit<TextInputProps, RemovedTextInputProps> & TextFieldCommonProps & TextFieldValueProps & TextareaLayoutProps;
|
|
10
|
+
interface TextareaLayoutProps {
|
|
11
|
+
/** default 绘制独立输入表面;plain 嵌入复合输入,保留文字内边距但不绘制表面。 */
|
|
12
|
+
surface?: 'default' | 'plain';
|
|
11
13
|
/** 最小高度,默认 96(约 5 行) */
|
|
12
14
|
minHeight?: number;
|
|
13
15
|
/** 最大高度(超过后内部滚动),默认不限制 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EACV,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AAE5B;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,EAAE,qBAAqB,CAAC,GACrE,oBAAoB,GACpB,mBAAmB,GACnB,mBAAmB,CAAC;AAEtB,UAAU,mBAAmB;IAC3B,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Textarea/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EACV,qBAAqB,EACrB,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AAE5B;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,EAAE,qBAAqB,CAAC,GACrE,oBAAoB,GACpB,mBAAmB,GACnB,mBAAmB,CAAC;AAEtB,UAAU,mBAAmB;IAC3B,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
|
package/package.json
CHANGED
|
@@ -21,6 +21,10 @@ import type { TextFieldBaseProps, TextFieldHandle } from './types';
|
|
|
21
21
|
import { useErrorAnnouncement } from './useErrorAnnouncement';
|
|
22
22
|
import { useTextFieldValue } from './useTextFieldValue';
|
|
23
23
|
import { useMultilineLayout } from './useMultilineLayout';
|
|
24
|
+
import {
|
|
25
|
+
TEXTAREA_PLAIN_VERTICAL_INSET,
|
|
26
|
+
TEXTAREA_VERTICAL_INSET,
|
|
27
|
+
} from './constants';
|
|
24
28
|
|
|
25
29
|
const log = createLogger('TextField');
|
|
26
30
|
|
|
@@ -36,6 +40,7 @@ export const TextFieldBase = forwardRef<TextFieldHandle, TextFieldBaseProps>(
|
|
|
36
40
|
minHeight,
|
|
37
41
|
maxHeight,
|
|
38
42
|
searchLayout,
|
|
43
|
+
plainSurface,
|
|
39
44
|
leading,
|
|
40
45
|
trailing,
|
|
41
46
|
error,
|
|
@@ -48,6 +53,7 @@ export const TextFieldBase = forwardRef<TextFieldHandle, TextFieldBaseProps>(
|
|
|
48
53
|
accessibilityState,
|
|
49
54
|
accessibilityRole,
|
|
50
55
|
placeholderTextColor: callerPlaceholder,
|
|
56
|
+
underlineColorAndroid: callerUnderline,
|
|
51
57
|
onFocus,
|
|
52
58
|
onBlur,
|
|
53
59
|
onContentSizeChange,
|
|
@@ -98,11 +104,15 @@ export const TextFieldBase = forwardRef<TextFieldHandle, TextFieldBaseProps>(
|
|
|
98
104
|
minHeight,
|
|
99
105
|
maxHeight
|
|
100
106
|
);
|
|
107
|
+
const plain = multiline && plainSurface === true;
|
|
101
108
|
const multilineLayout = useMultilineLayout({
|
|
102
109
|
enabled: multiline,
|
|
103
110
|
value: controller.value,
|
|
104
111
|
minHeight: normalizedTextareaHeights.minHeight,
|
|
105
112
|
maxHeight: normalizedTextareaHeights.maxHeight,
|
|
113
|
+
verticalInset: plain
|
|
114
|
+
? TEXTAREA_PLAIN_VERTICAL_INSET
|
|
115
|
+
: TEXTAREA_VERTICAL_INSET,
|
|
106
116
|
fontSize: styles.input.fontSize,
|
|
107
117
|
placeholder: allowedNativeProps.placeholder as string | undefined,
|
|
108
118
|
inputRef: nativeRef,
|
|
@@ -169,8 +179,9 @@ export const TextFieldBase = forwardRef<TextFieldHandle, TextFieldBaseProps>(
|
|
|
169
179
|
style={[
|
|
170
180
|
styles.wrap,
|
|
171
181
|
multiline && styles.wrapMultiline,
|
|
172
|
-
searchLayout === undefined && wrapStateStyles,
|
|
182
|
+
searchLayout === undefined && !plain && wrapStateStyles,
|
|
173
183
|
searchLayout !== undefined && styles.searchInteractiveRow,
|
|
184
|
+
plain && styles.wrapPlain,
|
|
174
185
|
multiline
|
|
175
186
|
? {
|
|
176
187
|
minHeight: normalizedHeight,
|
|
@@ -236,6 +247,7 @@ export const TextFieldBase = forwardRef<TextFieldHandle, TextFieldBaseProps>(
|
|
|
236
247
|
},
|
|
237
248
|
]}
|
|
238
249
|
placeholderTextColor={callerPlaceholder ?? colors.foregroundSubtle}
|
|
250
|
+
underlineColorAndroid={plain ? 'transparent' : callerUnderline}
|
|
239
251
|
accessibilityRole={accessibilityRole}
|
|
240
252
|
accessibilityState={mergedAccessibilityState}
|
|
241
253
|
testID={childTestID(testID, 'input')}
|
|
@@ -2,5 +2,6 @@ import { space } from '../../../theme';
|
|
|
2
2
|
|
|
3
3
|
export const TEXT_FIELD_BORDER_WIDTH = 1;
|
|
4
4
|
export const TEXTAREA_VERTICAL_PADDING = space[4];
|
|
5
|
+
export const TEXTAREA_PLAIN_VERTICAL_INSET = 2 * TEXTAREA_VERTICAL_PADDING;
|
|
5
6
|
export const TEXTAREA_VERTICAL_INSET =
|
|
6
|
-
2 *
|
|
7
|
+
TEXTAREA_PLAIN_VERTICAL_INSET + 2 * TEXT_FIELD_BORDER_WIDTH;
|
|
@@ -21,6 +21,11 @@ export const makeStyles = (c: ColorTokens) =>
|
|
|
21
21
|
paddingVertical: TEXTAREA_VERTICAL_PADDING,
|
|
22
22
|
alignItems: 'flex-start',
|
|
23
23
|
},
|
|
24
|
+
wrapPlain: {
|
|
25
|
+
backgroundColor: 'transparent',
|
|
26
|
+
borderWidth: 0,
|
|
27
|
+
borderRadius: 0,
|
|
28
|
+
},
|
|
24
29
|
/** Search 的可见底色/边框绝不承载命中区域。 */
|
|
25
30
|
searchInteractiveRow: {
|
|
26
31
|
borderWidth: 0,
|
|
@@ -133,6 +133,8 @@ export type TextFieldBaseProps = Omit<TextInputProps, RemovedTextInputProps> &
|
|
|
133
133
|
maxHeight?: number;
|
|
134
134
|
/** internal:Search 的 44pt interactive row + 36pt decorative surface。 */
|
|
135
135
|
searchLayout?: SearchFieldLayout;
|
|
136
|
+
/** internal:仅由 Textarea 的公开 surface 选择,无独立表面的多行输入。 */
|
|
137
|
+
plainSurface?: boolean;
|
|
136
138
|
};
|
|
137
139
|
|
|
138
140
|
export interface MultilineLayoutInput {
|
|
@@ -140,6 +142,7 @@ export interface MultilineLayoutInput {
|
|
|
140
142
|
value: string;
|
|
141
143
|
minHeight: number;
|
|
142
144
|
maxHeight: number | undefined;
|
|
145
|
+
verticalInset: number;
|
|
143
146
|
fontSize: number | undefined;
|
|
144
147
|
placeholder: string | undefined;
|
|
145
148
|
inputRef: RefObject<ComponentRef<typeof TextInput> | null>;
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { TEXTAREA_VERTICAL_INSET } from './constants';
|
|
2
1
|
import type { MultilineLayout, MultilineLayoutInput } from './types';
|
|
3
2
|
|
|
4
3
|
/** 原生 Yoga 直接测量文本;固定 height 会阻断 iOS Fabric 的后续内容尺寸通知。 */
|
|
5
4
|
export function useMultilineLayout({
|
|
6
5
|
minHeight,
|
|
7
6
|
maxHeight,
|
|
7
|
+
verticalInset,
|
|
8
8
|
}: MultilineLayoutInput): MultilineLayout {
|
|
9
9
|
return {
|
|
10
10
|
inputStyle: {
|
|
11
|
-
minHeight: Math.max(0, minHeight -
|
|
11
|
+
minHeight: Math.max(0, minHeight - verticalInset),
|
|
12
12
|
maxHeight:
|
|
13
13
|
maxHeight === undefined
|
|
14
14
|
? undefined
|
|
15
|
-
: Math.max(0, maxHeight -
|
|
15
|
+
: Math.max(0, maxHeight - verticalInset),
|
|
16
16
|
},
|
|
17
17
|
// 原生仅在内容溢出时滚动;min=max 时也不等待不会再变化的框高事件。
|
|
18
18
|
scrollEnabled: true,
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { useCallback, useLayoutEffect, useState } from 'react';
|
|
2
|
-
import { TEXTAREA_VERTICAL_INSET } from './constants';
|
|
3
2
|
import type {
|
|
4
3
|
MultilineLayout,
|
|
5
4
|
MultilineLayoutInput,
|
|
@@ -12,17 +11,16 @@ export function useMultilineLayout({
|
|
|
12
11
|
value,
|
|
13
12
|
minHeight,
|
|
14
13
|
maxHeight,
|
|
14
|
+
verticalInset,
|
|
15
15
|
fontSize,
|
|
16
16
|
placeholder,
|
|
17
17
|
inputRef,
|
|
18
18
|
}: MultilineLayoutInput): MultilineLayout {
|
|
19
19
|
const [contentHeight, setContentHeight] = useState(0);
|
|
20
20
|
const [width, setWidth] = useState(0);
|
|
21
|
-
const minimum = Math.max(0, minHeight -
|
|
21
|
+
const minimum = Math.max(0, minHeight - verticalInset);
|
|
22
22
|
const maximum =
|
|
23
|
-
maxHeight === undefined
|
|
24
|
-
? Infinity
|
|
25
|
-
: Math.max(0, maxHeight - TEXTAREA_VERTICAL_INSET);
|
|
23
|
+
maxHeight === undefined ? Infinity : Math.max(0, maxHeight - verticalInset);
|
|
26
24
|
useLayoutEffect(() => {
|
|
27
25
|
if (!enabled || inputRef.current === null) return;
|
|
28
26
|
const node = inputRef.current as unknown as WebTextInputMeasurement;
|
|
@@ -43,6 +41,7 @@ export function useMultilineLayout({
|
|
|
43
41
|
placeholder,
|
|
44
42
|
minHeight,
|
|
45
43
|
maxHeight,
|
|
44
|
+
verticalInset,
|
|
46
45
|
inputRef,
|
|
47
46
|
]);
|
|
48
47
|
const onLayout = useCallback<NonNullable<MultilineLayout['onLayout']>>(
|
|
@@ -5,7 +5,7 @@ import type { TextFieldHandle } from '../TextField/types';
|
|
|
5
5
|
import type { TextareaProps } from './types';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
|
-
* 多行文本输入框 ——
|
|
8
|
+
* 多行文本输入框 —— 默认视觉与 Input 一致;plain 供外层已提供表面的组合使用。
|
|
9
9
|
*
|
|
10
10
|
* 跟 Input 区别:
|
|
11
11
|
* - 内置 `multiline=true`,业务不用传
|
|
@@ -17,12 +17,17 @@ import type { TextareaProps } from './types';
|
|
|
17
17
|
* Ref:forwardRef<TextFieldHandle>,业务只可调 `focus()` / `blur()`。
|
|
18
18
|
*/
|
|
19
19
|
export const Textarea = forwardRef<TextFieldHandle, TextareaProps>(
|
|
20
|
-
function Textarea(props, ref) {
|
|
20
|
+
function Textarea({ surface = 'default', ...props }, ref) {
|
|
21
21
|
const { props: safeProps } = sanitizeTextFieldWrapperProps(
|
|
22
22
|
props as TextareaProps & Record<string, unknown>
|
|
23
23
|
);
|
|
24
24
|
return (
|
|
25
|
-
<TextFieldBase
|
|
25
|
+
<TextFieldBase
|
|
26
|
+
ref={ref}
|
|
27
|
+
{...(safeProps as TextareaProps)}
|
|
28
|
+
multiline
|
|
29
|
+
plainSurface={surface === 'plain'}
|
|
30
|
+
/>
|
|
26
31
|
);
|
|
27
32
|
}
|
|
28
33
|
);
|
|
@@ -14,9 +14,11 @@ import type {
|
|
|
14
14
|
export type TextareaProps = Omit<TextInputProps, RemovedTextInputProps> &
|
|
15
15
|
TextFieldCommonProps &
|
|
16
16
|
TextFieldValueProps &
|
|
17
|
-
|
|
17
|
+
TextareaLayoutProps;
|
|
18
18
|
|
|
19
|
-
interface
|
|
19
|
+
interface TextareaLayoutProps {
|
|
20
|
+
/** default 绘制独立输入表面;plain 嵌入复合输入,保留文字内边距但不绘制表面。 */
|
|
21
|
+
surface?: 'default' | 'plain';
|
|
20
22
|
/** 最小高度,默认 96(约 5 行) */
|
|
21
23
|
minHeight?: number;
|
|
22
24
|
/** 最大高度(超过后内部滚动),默认不限制 */
|