@unif/react-native-design 0.36.0 → 0.37.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.
@@ -5,9 +5,12 @@ import { Text, View } from 'react-native';
5
5
  import { useThemedStyles } from "../../../theme/index.js";
6
6
  import { Button } from "../Button/index.js";
7
7
  import { Textarea } from "../Textarea/index.js";
8
+ import { Input } from "../Input/index.js";
8
9
  import { makeStyles } from "./styles.js";
9
10
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
10
11
  export function TextEntryContent({
12
+ variant = 'card',
13
+ placeholder,
11
14
  title,
12
15
  value,
13
16
  onChangeText,
@@ -23,37 +26,46 @@ export function TextEntryContent({
23
26
  testID
24
27
  }) {
25
28
  const styles = useThemedStyles(makeStyles);
29
+ const compact = variant === 'compact';
30
+ const Field = compact ? Input : Textarea;
26
31
  return /*#__PURE__*/_jsxs(View, {
27
- style: [styles.root, style],
32
+ style: [styles.root, compact && styles.compactRoot, style],
28
33
  testID: testID,
29
34
  children: [/*#__PURE__*/_jsx(Text, {
30
- style: styles.title,
35
+ style: [styles.title, compact && styles.compactTitle],
31
36
  accessibilityRole: "header",
32
37
  children: title
33
38
  }), message ? /*#__PURE__*/_jsx(Text, {
34
39
  style: styles.message,
35
40
  children: message
36
- }) : null, /*#__PURE__*/_jsx(Textarea, {
41
+ }) : null, /*#__PURE__*/_jsx(Field, {
37
42
  value: value,
38
43
  onChangeText: onChangeText,
39
44
  maxLength: maxLength,
40
45
  editable: !busy,
41
46
  autoFocus: autoFocus,
42
- accessibilityLabel: title
47
+ accessibilityLabel: title,
48
+ placeholder: placeholder
43
49
  }), /*#__PURE__*/_jsxs(View, {
44
- style: styles.actions,
45
- children: [/*#__PURE__*/_jsx(Button, {
50
+ style: [styles.actions, compact && styles.compactActions],
51
+ children: [compact ? /*#__PURE__*/_jsx(Button, {
52
+ label: cancelLabel,
53
+ size: "sm",
54
+ variant: "ghost",
55
+ disabled: busy,
56
+ onPress: onCancel
57
+ }) : null, /*#__PURE__*/_jsx(Button, {
46
58
  label: confirmLabel,
47
59
  size: "sm",
48
60
  loading: busy,
49
61
  onPress: () => onSubmit(value)
50
- }), /*#__PURE__*/_jsx(Button, {
62
+ }), !compact ? /*#__PURE__*/_jsx(Button, {
51
63
  label: cancelLabel,
52
64
  size: "sm",
53
65
  variant: "outline",
54
66
  disabled: busy,
55
67
  onPress: onCancel
56
- })]
68
+ }) : null]
57
69
  })]
58
70
  });
59
71
  }
@@ -1 +1 @@
1
- {"version":3,"names":["React","Text","View","useThemedStyles","Button","Textarea","makeStyles","jsx","_jsx","jsxs","_jsxs","TextEntryContent","title","value","onChangeText","onSubmit","onCancel","message","busy","maxLength","confirmLabel","cancelLabel","autoFocus","style","testID","styles","root","children","accessibilityRole","editable","accessibilityLabel","actions","label","size","loading","onPress","variant","disabled"],"sourceRoot":"../../../../../src","sources":["components/ui/TextEntryContent/TextEntryContent.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACzC,SAASC,eAAe,QAAQ,yBAAgB;AAChD,SAASC,MAAM,QAAQ,oBAAW;AAClC,SAASC,QAAQ,QAAQ,sBAAa;AACtC,SAASC,UAAU,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGtC,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,KAAK;EACLC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,IAAI,GAAG,KAAK;EACZC,SAAS;EACTC,YAAY,GAAG,IAAI;EACnBC,WAAW,GAAG,IAAI;EAClBC,SAAS,GAAG,IAAI;EAChBC,KAAK;EACLC;AACqB,CAAC,EAAqB;EAC3C,MAAMC,MAAM,GAAGtB,eAAe,CAACG,UAAU,CAAC;EAC1C,oBACEI,KAAA,CAACR,IAAI;IAACqB,KAAK,EAAE,CAACE,MAAM,CAACC,IAAI,EAAEH,KAAK,CAAE;IAACC,MAAM,EAAEA,MAAO;IAAAG,QAAA,gBAChDnB,IAAA,CAACP,IAAI;MAACsB,KAAK,EAAEE,MAAM,CAACb,KAAM;MAACgB,iBAAiB,EAAC,QAAQ;MAAAD,QAAA,EAClDf;IAAK,CACF,CAAC,EACNK,OAAO,gBAAGT,IAAA,CAACP,IAAI;MAACsB,KAAK,EAAEE,MAAM,CAACR,OAAQ;MAAAU,QAAA,EAAEV;IAAO,CAAO,CAAC,GAAG,IAAI,eAC/DT,IAAA,CAACH,QAAQ;MACPQ,KAAK,EAAEA,KAAM;MACbC,YAAY,EAAEA,YAAa;MAC3BK,SAAS,EAAEA,SAAU;MACrBU,QAAQ,EAAE,CAACX,IAAK;MAChBI,SAAS,EAAEA,SAAU;MACrBQ,kBAAkB,EAAElB;IAAM,CAC3B,CAAC,eACFF,KAAA,CAACR,IAAI;MAACqB,KAAK,EAAEE,MAAM,CAACM,OAAQ;MAAAJ,QAAA,gBAC1BnB,IAAA,CAACJ,MAAM;QACL4B,KAAK,EAAEZ,YAAa;QACpBa,IAAI,EAAC,IAAI;QACTC,OAAO,EAAEhB,IAAK;QACdiB,OAAO,EAAEA,CAAA,KAAMpB,QAAQ,CAACF,KAAK;MAAE,CAChC,CAAC,eACFL,IAAA,CAACJ,MAAM;QACL4B,KAAK,EAAEX,WAAY;QACnBY,IAAI,EAAC,IAAI;QACTG,OAAO,EAAC,SAAS;QACjBC,QAAQ,EAAEnB,IAAK;QACfiB,OAAO,EAAEnB;MAAS,CACnB,CAAC;IAAA,CACE,CAAC;EAAA,CACH,CAAC;AAEX","ignoreList":[]}
1
+ {"version":3,"names":["React","Text","View","useThemedStyles","Button","Textarea","Input","makeStyles","jsx","_jsx","jsxs","_jsxs","TextEntryContent","variant","placeholder","title","value","onChangeText","onSubmit","onCancel","message","busy","maxLength","confirmLabel","cancelLabel","autoFocus","style","testID","styles","compact","Field","root","compactRoot","children","compactTitle","accessibilityRole","editable","accessibilityLabel","actions","compactActions","label","size","disabled","onPress","loading"],"sourceRoot":"../../../../../src","sources":["components/ui/TextEntryContent/TextEntryContent.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACzC,SAASC,eAAe,QAAQ,yBAAgB;AAChD,SAASC,MAAM,QAAQ,oBAAW;AAClC,SAASC,QAAQ,QAAQ,sBAAa;AACtC,SAASC,KAAK,QAAQ,mBAAU;AAChC,SAASC,UAAU,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGtC,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,OAAO,GAAG,MAAM;EAChBC,WAAW;EACXC,KAAK;EACLC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,IAAI,GAAG,KAAK;EACZC,SAAS;EACTC,YAAY,GAAG,IAAI;EACnBC,WAAW,GAAG,IAAI;EAClBC,SAAS,GAAG,IAAI;EAChBC,KAAK;EACLC;AACqB,CAAC,EAAqB;EAC3C,MAAMC,MAAM,GAAGzB,eAAe,CAACI,UAAU,CAAC;EAC1C,MAAMsB,OAAO,GAAGhB,OAAO,KAAK,SAAS;EACrC,MAAMiB,KAAK,GAAGD,OAAO,GAAGvB,KAAK,GAAGD,QAAQ;EACxC,oBACEM,KAAA,CAACT,IAAI;IACHwB,KAAK,EAAE,CAACE,MAAM,CAACG,IAAI,EAAEF,OAAO,IAAID,MAAM,CAACI,WAAW,EAAEN,KAAK,CAAE;IAC3DC,MAAM,EAAEA,MAAO;IAAAM,QAAA,gBAEfxB,IAAA,CAACR,IAAI;MACHyB,KAAK,EAAE,CAACE,MAAM,CAACb,KAAK,EAAEc,OAAO,IAAID,MAAM,CAACM,YAAY,CAAE;MACtDC,iBAAiB,EAAC,QAAQ;MAAAF,QAAA,EAEzBlB;IAAK,CACF,CAAC,EACNK,OAAO,gBAAGX,IAAA,CAACR,IAAI;MAACyB,KAAK,EAAEE,MAAM,CAACR,OAAQ;MAAAa,QAAA,EAAEb;IAAO,CAAO,CAAC,GAAG,IAAI,eAC/DX,IAAA,CAACqB,KAAK;MACJd,KAAK,EAAEA,KAAM;MACbC,YAAY,EAAEA,YAAa;MAC3BK,SAAS,EAAEA,SAAU;MACrBc,QAAQ,EAAE,CAACf,IAAK;MAChBI,SAAS,EAAEA,SAAU;MACrBY,kBAAkB,EAAEtB,KAAM;MAC1BD,WAAW,EAAEA;IAAY,CAC1B,CAAC,eACFH,KAAA,CAACT,IAAI;MAACwB,KAAK,EAAE,CAACE,MAAM,CAACU,OAAO,EAAET,OAAO,IAAID,MAAM,CAACW,cAAc,CAAE;MAAAN,QAAA,GAC7DJ,OAAO,gBACNpB,IAAA,CAACL,MAAM;QACLoC,KAAK,EAAEhB,WAAY;QACnBiB,IAAI,EAAC,IAAI;QACT5B,OAAO,EAAC,OAAO;QACf6B,QAAQ,EAAErB,IAAK;QACfsB,OAAO,EAAExB;MAAS,CACnB,CAAC,GACA,IAAI,eACRV,IAAA,CAACL,MAAM;QACLoC,KAAK,EAAEjB,YAAa;QACpBkB,IAAI,EAAC,IAAI;QACTG,OAAO,EAAEvB,IAAK;QACdsB,OAAO,EAAEA,CAAA,KAAMzB,QAAQ,CAACF,KAAK;MAAE,CAChC,CAAC,EACD,CAACa,OAAO,gBACPpB,IAAA,CAACL,MAAM;QACLoC,KAAK,EAAEhB,WAAY;QACnBiB,IAAI,EAAC,IAAI;QACT5B,OAAO,EAAC,SAAS;QACjB6B,QAAQ,EAAErB,IAAK;QACfsB,OAAO,EAAExB;MAAS,CACnB,CAAC,GACA,IAAI;IAAA,CACJ,CAAC;EAAA,CACH,CAAC;AAEX","ignoreList":[]}
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  import { StyleSheet } from 'react-native';
4
- import { fw, radius, space, type } from "../../../theme/index.js";
4
+ import { fw, r, radius, space, type } from "../../../theme/index.js";
5
5
  export const makeStyles = colors => StyleSheet.create({
6
6
  root: {
7
7
  gap: space[4],
@@ -16,6 +16,15 @@ export const makeStyles = colors => StyleSheet.create({
16
16
  fontSize: type.h3,
17
17
  fontWeight: fw.semi
18
18
  },
19
+ compactRoot: {
20
+ borderWidth: 0,
21
+ borderRadius: r(14),
22
+ padding: space[6],
23
+ gap: space[5]
24
+ },
25
+ compactTitle: {
26
+ fontSize: type.sm
27
+ },
19
28
  message: {
20
29
  color: colors.foregroundMuted,
21
30
  fontSize: type.sm
@@ -24,6 +33,10 @@ export const makeStyles = colors => StyleSheet.create({
24
33
  flexDirection: 'row',
25
34
  flexWrap: 'wrap',
26
35
  gap: space[3]
36
+ },
37
+ compactActions: {
38
+ justifyContent: 'flex-end',
39
+ gap: space[4]
27
40
  }
28
41
  });
29
42
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["StyleSheet","fw","radius","space","type","makeStyles","colors","create","root","gap","padding","borderWidth","borderColor","outline","borderRadius","xl","backgroundColor","surface","title","color","foreground","fontSize","h3","fontWeight","semi","message","foregroundMuted","sm","actions","flexDirection","flexWrap"],"sourceRoot":"../../../../../src","sources":["components/ui/TextEntryContent/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,QAA0B,yBAAgB;AAE1E,OAAO,MAAMC,UAAU,GAAIC,MAAmB,IAC5CN,UAAU,CAACO,MAAM,CAAC;EAChBC,IAAI,EAAE;IACJC,GAAG,EAAEN,KAAK,CAAC,CAAC,CAAC;IACbO,OAAO,EAAEP,KAAK,CAAC,CAAC,CAAC;IACjBQ,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEN,MAAM,CAACO,OAAO;IAC3BC,YAAY,EAAEZ,MAAM,CAACa,EAAE;IACvBC,eAAe,EAAEV,MAAM,CAACW;EAC1B,CAAC;EACDC,KAAK,EAAE;IAAEC,KAAK,EAAEb,MAAM,CAACc,UAAU;IAAEC,QAAQ,EAAEjB,IAAI,CAACkB,EAAE;IAAEC,UAAU,EAAEtB,EAAE,CAACuB;EAAK,CAAC;EAC3EC,OAAO,EAAE;IAAEN,KAAK,EAAEb,MAAM,CAACoB,eAAe;IAAEL,QAAQ,EAAEjB,IAAI,CAACuB;EAAG,CAAC;EAC7DC,OAAO,EAAE;IAAEC,aAAa,EAAE,KAAK;IAAEC,QAAQ,EAAE,MAAM;IAAErB,GAAG,EAAEN,KAAK,CAAC,CAAC;EAAE;AACnE,CAAC,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["StyleSheet","fw","r","radius","space","type","makeStyles","colors","create","root","gap","padding","borderWidth","borderColor","outline","borderRadius","xl","backgroundColor","surface","title","color","foreground","fontSize","h3","fontWeight","semi","compactRoot","compactTitle","sm","message","foregroundMuted","actions","flexDirection","flexWrap","compactActions","justifyContent"],"sourceRoot":"../../../../../src","sources":["components/ui/TextEntryContent/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,EAAEC,CAAC,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,QAA0B,yBAAgB;AAE7E,OAAO,MAAMC,UAAU,GAAIC,MAAmB,IAC5CP,UAAU,CAACQ,MAAM,CAAC;EAChBC,IAAI,EAAE;IACJC,GAAG,EAAEN,KAAK,CAAC,CAAC,CAAC;IACbO,OAAO,EAAEP,KAAK,CAAC,CAAC,CAAC;IACjBQ,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEN,MAAM,CAACO,OAAO;IAC3BC,YAAY,EAAEZ,MAAM,CAACa,EAAE;IACvBC,eAAe,EAAEV,MAAM,CAACW;EAC1B,CAAC;EACDC,KAAK,EAAE;IAAEC,KAAK,EAAEb,MAAM,CAACc,UAAU;IAAEC,QAAQ,EAAEjB,IAAI,CAACkB,EAAE;IAAEC,UAAU,EAAEvB,EAAE,CAACwB;EAAK,CAAC;EAC3EC,WAAW,EAAE;IACXd,WAAW,EAAE,CAAC;IACdG,YAAY,EAAEb,CAAC,CAAC,EAAE,CAAC;IACnBS,OAAO,EAAEP,KAAK,CAAC,CAAC,CAAC;IACjBM,GAAG,EAAEN,KAAK,CAAC,CAAC;EACd,CAAC;EACDuB,YAAY,EAAE;IAAEL,QAAQ,EAAEjB,IAAI,CAACuB;EAAG,CAAC;EACnCC,OAAO,EAAE;IAAET,KAAK,EAAEb,MAAM,CAACuB,eAAe;IAAER,QAAQ,EAAEjB,IAAI,CAACuB;EAAG,CAAC;EAC7DG,OAAO,EAAE;IAAEC,aAAa,EAAE,KAAK;IAAEC,QAAQ,EAAE,MAAM;IAAEvB,GAAG,EAAEN,KAAK,CAAC,CAAC;EAAE,CAAC;EAClE8B,cAAc,EAAE;IACdC,cAAc,EAAE,UAAU;IAC1BzB,GAAG,EAAEN,KAAK,CAAC,CAAC;EACd;AACF,CAAC,CAAC","ignoreList":[]}
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import type { TextEntryContentProps } from './types';
3
- export declare function TextEntryContent({ title, value, onChangeText, onSubmit, onCancel, message, busy, maxLength, confirmLabel, cancelLabel, autoFocus, style, testID, }: TextEntryContentProps): React.JSX.Element;
3
+ export declare function TextEntryContent({ variant, placeholder, title, value, onChangeText, onSubmit, onCancel, message, busy, maxLength, confirmLabel, cancelLabel, autoFocus, style, testID, }: TextEntryContentProps): React.JSX.Element;
4
4
  //# sourceMappingURL=TextEntryContent.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextEntryContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextEntryContent/TextEntryContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAY,EACZ,SAAS,EACT,YAAmB,EACnB,WAAkB,EAClB,SAAgB,EAChB,KAAK,EACL,MAAM,GACP,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiC3C"}
1
+ {"version":3,"file":"TextEntryContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextEntryContent/TextEntryContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,EAC/B,OAAgB,EAChB,WAAW,EACX,KAAK,EACL,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAY,EACZ,SAAS,EACT,YAAmB,EACnB,WAAkB,EAClB,SAAgB,EAChB,KAAK,EACL,MAAM,GACP,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqD3C"}
@@ -13,6 +13,15 @@ export declare const makeStyles: (colors: ColorTokens) => Readonly<{
13
13
  fontSize: number;
14
14
  fontWeight: "600";
15
15
  };
16
+ compactRoot: {
17
+ borderWidth: number;
18
+ borderRadius: number;
19
+ padding: number;
20
+ gap: number;
21
+ };
22
+ compactTitle: {
23
+ fontSize: number;
24
+ };
16
25
  message: {
17
26
  color: string;
18
27
  fontSize: number;
@@ -22,5 +31,9 @@ export declare const makeStyles: (colors: ColorTokens) => Readonly<{
22
31
  flexWrap: "wrap";
23
32
  gap: number;
24
33
  };
34
+ compactActions: {
35
+ justifyContent: "flex-end";
36
+ gap: number;
37
+ };
25
38
  }>;
26
39
  //# sourceMappingURL=styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextEntryContent/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE3E,eAAO,MAAM,UAAU,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;EAa1C,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextEntryContent/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE9E,eAAO,MAAM,UAAU,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwB1C,CAAC"}
@@ -1,6 +1,10 @@
1
1
  import type { StyleProp, ViewStyle } from 'react-native';
2
2
  /** 受控文字编辑内容;弹层、键盘和业务提交结果由宿主负责。 */
3
3
  export interface TextEntryContentProps {
4
+ /** card 保留多行卡片;compact 使用单行输入和紧凑操作。 */
5
+ variant?: 'card' | 'compact';
6
+ /** 交给实际输入控件;缺省不添加提示。 */
7
+ placeholder?: string;
4
8
  title: string;
5
9
  value: string;
6
10
  onChangeText(value: string): void;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextEntryContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,kCAAkC;AAClC,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,IAAI,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/TextEntryContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,kCAAkC;AAClC,MAAM,WAAW,qBAAqB;IACpC,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,IAAI,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unif/react-native-design",
3
- "version": "0.36.0",
3
+ "version": "0.37.0",
4
4
  "description": "Unif React Native 设计系统:基础组件、主题、字体和图标",
5
5
  "main": "./lib/module/index.js",
6
6
  "types": "./lib/typescript/src/index.d.ts",
@@ -3,10 +3,13 @@ import { Text, View } from 'react-native';
3
3
  import { useThemedStyles } from '../../../theme';
4
4
  import { Button } from '../Button';
5
5
  import { Textarea } from '../Textarea';
6
+ import { Input } from '../Input';
6
7
  import { makeStyles } from './styles';
7
8
  import type { TextEntryContentProps } from './types';
8
9
 
9
10
  export function TextEntryContent({
11
+ variant = 'card',
12
+ placeholder,
10
13
  title,
11
14
  value,
12
15
  onChangeText,
@@ -22,34 +25,54 @@ export function TextEntryContent({
22
25
  testID,
23
26
  }: TextEntryContentProps): React.JSX.Element {
24
27
  const styles = useThemedStyles(makeStyles);
28
+ const compact = variant === 'compact';
29
+ const Field = compact ? Input : Textarea;
25
30
  return (
26
- <View style={[styles.root, style]} testID={testID}>
27
- <Text style={styles.title} accessibilityRole="header">
31
+ <View
32
+ style={[styles.root, compact && styles.compactRoot, style]}
33
+ testID={testID}
34
+ >
35
+ <Text
36
+ style={[styles.title, compact && styles.compactTitle]}
37
+ accessibilityRole="header"
38
+ >
28
39
  {title}
29
40
  </Text>
30
41
  {message ? <Text style={styles.message}>{message}</Text> : null}
31
- <Textarea
42
+ <Field
32
43
  value={value}
33
44
  onChangeText={onChangeText}
34
45
  maxLength={maxLength}
35
46
  editable={!busy}
36
47
  autoFocus={autoFocus}
37
48
  accessibilityLabel={title}
49
+ placeholder={placeholder}
38
50
  />
39
- <View style={styles.actions}>
51
+ <View style={[styles.actions, compact && styles.compactActions]}>
52
+ {compact ? (
53
+ <Button
54
+ label={cancelLabel}
55
+ size="sm"
56
+ variant="ghost"
57
+ disabled={busy}
58
+ onPress={onCancel}
59
+ />
60
+ ) : null}
40
61
  <Button
41
62
  label={confirmLabel}
42
63
  size="sm"
43
64
  loading={busy}
44
65
  onPress={() => onSubmit(value)}
45
66
  />
46
- <Button
47
- label={cancelLabel}
48
- size="sm"
49
- variant="outline"
50
- disabled={busy}
51
- onPress={onCancel}
52
- />
67
+ {!compact ? (
68
+ <Button
69
+ label={cancelLabel}
70
+ size="sm"
71
+ variant="outline"
72
+ disabled={busy}
73
+ onPress={onCancel}
74
+ />
75
+ ) : null}
53
76
  </View>
54
77
  </View>
55
78
  );
@@ -1,5 +1,5 @@
1
1
  import { StyleSheet } from 'react-native';
2
- import { fw, radius, space, type, type ColorTokens } from '../../../theme';
2
+ import { fw, r, radius, space, type, type ColorTokens } from '../../../theme';
3
3
 
4
4
  export const makeStyles = (colors: ColorTokens) =>
5
5
  StyleSheet.create({
@@ -12,6 +12,17 @@ export const makeStyles = (colors: ColorTokens) =>
12
12
  backgroundColor: colors.surface,
13
13
  },
14
14
  title: { color: colors.foreground, fontSize: type.h3, fontWeight: fw.semi },
15
+ compactRoot: {
16
+ borderWidth: 0,
17
+ borderRadius: r(14),
18
+ padding: space[6],
19
+ gap: space[5],
20
+ },
21
+ compactTitle: { fontSize: type.sm },
15
22
  message: { color: colors.foregroundMuted, fontSize: type.sm },
16
23
  actions: { flexDirection: 'row', flexWrap: 'wrap', gap: space[3] },
24
+ compactActions: {
25
+ justifyContent: 'flex-end',
26
+ gap: space[4],
27
+ },
17
28
  });
@@ -2,6 +2,10 @@ import type { StyleProp, ViewStyle } from 'react-native';
2
2
 
3
3
  /** 受控文字编辑内容;弹层、键盘和业务提交结果由宿主负责。 */
4
4
  export interface TextEntryContentProps {
5
+ /** card 保留多行卡片;compact 使用单行输入和紧凑操作。 */
6
+ variant?: 'card' | 'compact';
7
+ /** 交给实际输入控件;缺省不添加提示。 */
8
+ placeholder?: string;
5
9
  title: string;
6
10
  value: string;
7
11
  onChangeText(value: string): void;