@unif/react-native-design 0.38.0 → 0.39.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.
Files changed (28) hide show
  1. package/lib/module/components/ui/ActionMenuContent/ActionMenuContent.js +61 -18
  2. package/lib/module/components/ui/ActionMenuContent/ActionMenuContent.js.map +1 -1
  3. package/lib/module/components/ui/ActionMenuContent/ActionMenuItem.js +57 -0
  4. package/lib/module/components/ui/ActionMenuContent/ActionMenuItem.js.map +1 -0
  5. package/lib/module/components/ui/ActionMenuContent/ActionMenuSheetCard.js +25 -0
  6. package/lib/module/components/ui/ActionMenuContent/ActionMenuSheetCard.js.map +1 -0
  7. package/lib/module/components/ui/ActionMenuContent/styles.js +50 -2
  8. package/lib/module/components/ui/ActionMenuContent/styles.js.map +1 -1
  9. package/lib/module/components/ui/ActionMenuContent/useMenuMousePress.js +26 -0
  10. package/lib/module/components/ui/ActionMenuContent/useMenuMousePress.js.map +1 -0
  11. package/lib/typescript/src/components/ui/ActionMenuContent/ActionMenuContent.d.ts.map +1 -1
  12. package/lib/typescript/src/components/ui/ActionMenuContent/ActionMenuItem.d.ts +3 -0
  13. package/lib/typescript/src/components/ui/ActionMenuContent/ActionMenuItem.d.ts.map +1 -0
  14. package/lib/typescript/src/components/ui/ActionMenuContent/ActionMenuSheetCard.d.ts +3 -0
  15. package/lib/typescript/src/components/ui/ActionMenuContent/ActionMenuSheetCard.d.ts.map +1 -0
  16. package/lib/typescript/src/components/ui/ActionMenuContent/styles.d.ts +57 -2
  17. package/lib/typescript/src/components/ui/ActionMenuContent/styles.d.ts.map +1 -1
  18. package/lib/typescript/src/components/ui/ActionMenuContent/types.d.ts +14 -1
  19. package/lib/typescript/src/components/ui/ActionMenuContent/types.d.ts.map +1 -1
  20. package/lib/typescript/src/components/ui/ActionMenuContent/useMenuMousePress.d.ts +10 -0
  21. package/lib/typescript/src/components/ui/ActionMenuContent/useMenuMousePress.d.ts.map +1 -0
  22. package/package.json +1 -1
  23. package/src/components/ui/ActionMenuContent/ActionMenuContent.tsx +107 -51
  24. package/src/components/ui/ActionMenuContent/ActionMenuItem.tsx +56 -0
  25. package/src/components/ui/ActionMenuContent/ActionMenuSheetCard.tsx +28 -0
  26. package/src/components/ui/ActionMenuContent/styles.ts +50 -3
  27. package/src/components/ui/ActionMenuContent/types.ts +16 -1
  28. package/src/components/ui/ActionMenuContent/useMenuMousePress.ts +30 -0
@@ -2,10 +2,11 @@
2
2
 
3
3
  import React, { useEffect, useState } from 'react';
4
4
  import { Pressable, Text, View } from 'react-native';
5
- import { useSafeAreaInsets } from 'react-native-safe-area-context';
6
- import { space, useThemedStyles } from "../../../theme/index.js";
5
+ import { useThemedStyles } from "../../../theme/index.js";
7
6
  import { Button } from "../Button/index.js";
8
7
  import { makeStyles } from "./styles.js";
8
+ import { ActionMenuItem } from "./ActionMenuItem.js";
9
+ import { ActionMenuSheetCard } from "./ActionMenuSheetCard.js";
9
10
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
10
11
  export function ActionMenuContent({
11
12
  actions,
@@ -18,20 +19,20 @@ export function ActionMenuContent({
18
19
  testID = 'action-menu'
19
20
  }) {
20
21
  const styles = useThemedStyles(makeStyles);
21
- const insets = useSafeAreaInsets();
22
22
  const [confirmationId, setConfirmationId] = useState(null);
23
23
  const isSheet = presentation === 'sheet';
24
+ const isPopover = presentation === 'popover';
24
25
  const confirming = actions.find(action => action.id === confirmationId && action.confirmation !== undefined);
26
+ const cancelConfirmation = () => setConfirmationId(null);
27
+ const confirmSelected = () => {
28
+ if (!confirming) return;
29
+ onClose();
30
+ confirming.onPress();
31
+ };
25
32
  useEffect(() => {
26
33
  if (!confirming) setConfirmationId(null);
27
34
  }, [confirming]);
28
- const content = /*#__PURE__*/_jsxs(Pressable, {
29
- accessible: false,
30
- testID: `${testID}-card`,
31
- style: [isSheet ? styles.sheetCard : styles.dialogCard, isSheet && {
32
- paddingBottom: insets.bottom + space[5]
33
- }, contentStyle],
34
- onPress: event => event.stopPropagation(),
35
+ const body = /*#__PURE__*/_jsxs(_Fragment, {
35
36
  children: [title ? /*#__PURE__*/_jsx(Text, {
36
37
  testID: `${testID}-title`,
37
38
  style: styles.title,
@@ -43,31 +44,53 @@ export function ActionMenuContent({
43
44
  style: styles.confirmation,
44
45
  accessibilityLiveRegion: "polite",
45
46
  children: confirming.confirmation.message
46
- }), /*#__PURE__*/_jsxs(View, {
47
+ }), isPopover ? /*#__PURE__*/_jsxs(View, {
48
+ style: styles.popoverConfirmationActions,
49
+ children: [/*#__PURE__*/_jsx(ActionMenuItem, {
50
+ action: {
51
+ id: 'cancel-confirmation',
52
+ label: cancelLabel,
53
+ onPress: cancelConfirmation
54
+ },
55
+ onPress: cancelConfirmation
56
+ }), /*#__PURE__*/_jsx(ActionMenuItem, {
57
+ action: {
58
+ ...confirming,
59
+ label: confirming.confirmation.confirmLabel,
60
+ icon: undefined,
61
+ tone: 'danger'
62
+ },
63
+ onPress: confirmSelected
64
+ })]
65
+ }) : /*#__PURE__*/_jsxs(View, {
47
66
  style: styles.sheetActions,
48
67
  children: [/*#__PURE__*/_jsx(Button, {
49
68
  label: cancelLabel,
50
69
  variant: "neutral",
51
70
  style: styles.sheetAction,
52
- onPress: () => setConfirmationId(null)
71
+ onPress: cancelConfirmation
53
72
  }), /*#__PURE__*/_jsx(Button, {
54
73
  label: confirming.confirmation.confirmLabel,
55
74
  variant: "danger",
56
75
  disabled: confirming.disabled,
57
76
  loading: confirming.loading,
58
77
  style: styles.sheetAction,
59
- onPress: () => {
60
- onClose();
61
- confirming.onPress();
62
- }
78
+ onPress: confirmSelected
63
79
  })]
64
80
  })]
65
81
  }) : /*#__PURE__*/_jsxs(_Fragment, {
66
82
  children: [/*#__PURE__*/_jsx(View, {
67
83
  testID: `${testID}-actions`,
68
84
  style: isSheet ? styles.sheetActions : undefined,
69
- children: actions.map(action => /*#__PURE__*/_jsx(Button, {
85
+ children: actions.map(action => isPopover ? /*#__PURE__*/_jsx(ActionMenuItem, {
86
+ action: action,
87
+ onPress: () => {
88
+ if (action.confirmation) setConfirmationId(action.id);else action.onPress();
89
+ }
90
+ }, action.id) : /*#__PURE__*/_jsx(Button, {
70
91
  label: action.label,
92
+ leftIcon: action.icon,
93
+ accessibilityHint: action.accessibilityHint,
71
94
  disabled: action.disabled,
72
95
  loading: action.loading,
73
96
  variant: isSheet ? action.tone ?? 'neutral' : 'text',
@@ -80,13 +103,33 @@ export function ActionMenuContent({
80
103
  action.onPress();
81
104
  }
82
105
  }, action.id))
83
- }), !isSheet ? /*#__PURE__*/_jsx(Button, {
106
+ }), !isSheet && !isPopover ? /*#__PURE__*/_jsx(Button, {
84
107
  label: cancelLabel,
85
108
  variant: "text",
86
109
  onPress: onClose
87
110
  }) : null]
88
111
  })]
89
112
  });
113
+ const content = isSheet ? /*#__PURE__*/_jsx(ActionMenuSheetCard, {
114
+ contentStyle: contentStyle,
115
+ testID: `${testID}-card`,
116
+ children: body
117
+ }) : isPopover ? /*#__PURE__*/_jsx(View, {
118
+ testID: `${testID}-card`,
119
+ style: [styles.popoverCard, contentStyle],
120
+ children: body
121
+ }) : /*#__PURE__*/_jsx(Pressable, {
122
+ accessible: false,
123
+ testID: `${testID}-card`,
124
+ style: [styles.dialogCard, contentStyle],
125
+ onPress: event => event.stopPropagation(),
126
+ children: body
127
+ });
128
+ if (isPopover) return /*#__PURE__*/_jsx(View, {
129
+ testID: testID,
130
+ style: [styles.popoverRoot, style],
131
+ children: content
132
+ });
90
133
  return /*#__PURE__*/_jsx(Pressable, {
91
134
  accessible: false,
92
135
  testID: testID,
@@ -1 +1 @@
1
- {"version":3,"names":["React","useEffect","useState","Pressable","Text","View","useSafeAreaInsets","space","useThemedStyles","Button","makeStyles","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ActionMenuContent","actions","onClose","presentation","title","cancelLabel","style","contentStyle","testID","styles","insets","confirmationId","setConfirmationId","isSheet","confirming","find","action","id","confirmation","undefined","content","accessible","sheetCard","dialogCard","paddingBottom","bottom","onPress","event","stopPropagation","children","numberOfLines","ellipsizeMode","accessibilityLiveRegion","message","sheetActions","label","variant","sheetAction","confirmLabel","disabled","loading","map","tone","sheetRoot","dialogRoot"],"sourceRoot":"../../../../../src","sources":["components/ui/ActionMenuContent/ActionMenuContent.tsx"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["React","useEffect","useState","Pressable","Text","View","useThemedStyles","Button","makeStyles","ActionMenuItem","ActionMenuSheetCard","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ActionMenuContent","actions","onClose","presentation","title","cancelLabel","style","contentStyle","testID","styles","confirmationId","setConfirmationId","isSheet","isPopover","confirming","find","action","id","confirmation","undefined","cancelConfirmation","confirmSelected","onPress","body","children","numberOfLines","ellipsizeMode","accessibilityLiveRegion","message","popoverConfirmationActions","label","confirmLabel","icon","tone","sheetActions","variant","sheetAction","disabled","loading","map","leftIcon","accessibilityHint","content","popoverCard","accessible","dialogCard","event","stopPropagation","popoverRoot","sheetRoot","dialogRoot"],"sourceRoot":"../../../../../src","sources":["components/ui/ActionMenuContent/ActionMenuContent.tsx"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+
3
+ import { ActivityIndicator, Pressable, Text, View } from 'react-native';
4
+ import { useColors, useThemedStyles } from "../../../theme/index.js";
5
+ import { Icon } from "../Icon/index.js";
6
+ import { normalizeNonBlankText } from "../shared/accessibilityName.js";
7
+ import { useMenuMousePress } from "./useMenuMousePress.js";
8
+ import { makeStyles } from "./styles.js";
9
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
10
+ export function ActionMenuItem({
11
+ action,
12
+ onPress
13
+ }) {
14
+ const styles = useThemedStyles(makeStyles);
15
+ const colors = useColors();
16
+ const label = normalizeNonBlankText(action.label);
17
+ const busy = action.loading === true;
18
+ const disabled = action.disabled === true || busy || !label;
19
+ const {
20
+ mousePressed,
21
+ ...mouseHandlers
22
+ } = useMenuMousePress(disabled);
23
+ const color = action.tone === 'danger' ? colors.error : colors.foreground;
24
+ return /*#__PURE__*/_jsxs(Pressable, {
25
+ accessible: Boolean(label),
26
+ accessibilityRole: label ? 'button' : undefined,
27
+ accessibilityLabel: label,
28
+ accessibilityHint: action.accessibilityHint,
29
+ accessibilityState: {
30
+ disabled,
31
+ busy
32
+ },
33
+ disabled: disabled,
34
+ onPress: disabled ? undefined : onPress,
35
+ ...mouseHandlers,
36
+ style: ({
37
+ pressed
38
+ }) => [styles.popoverRow, (pressed || mousePressed) && styles.popoverRowPressed, disabled && styles.popoverRowDisabled],
39
+ children: [action.icon || busy ? /*#__PURE__*/_jsx(View, {
40
+ style: styles.popoverIcon,
41
+ accessibilityElementsHidden: true,
42
+ importantForAccessibility: "no-hide-descendants",
43
+ children: busy ? /*#__PURE__*/_jsx(ActivityIndicator, {
44
+ size: "small",
45
+ color: colors.foregroundMuted
46
+ }) : action.icon ? /*#__PURE__*/_jsx(Icon, {
47
+ name: action.icon,
48
+ size: 20,
49
+ color: color
50
+ }) : null
51
+ }) : null, /*#__PURE__*/_jsx(Text, {
52
+ style: [styles.popoverLabel, action.tone === 'danger' && styles.popoverDanger],
53
+ children: action.label
54
+ })]
55
+ });
56
+ }
57
+ //# sourceMappingURL=ActionMenuItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["ActivityIndicator","Pressable","Text","View","useColors","useThemedStyles","Icon","normalizeNonBlankText","useMenuMousePress","makeStyles","jsx","_jsx","jsxs","_jsxs","ActionMenuItem","action","onPress","styles","colors","label","busy","loading","disabled","mousePressed","mouseHandlers","color","tone","error","foreground","accessible","Boolean","accessibilityRole","undefined","accessibilityLabel","accessibilityHint","accessibilityState","style","pressed","popoverRow","popoverRowPressed","popoverRowDisabled","children","icon","popoverIcon","accessibilityElementsHidden","importantForAccessibility","size","foregroundMuted","name","popoverLabel","popoverDanger"],"sourceRoot":"../../../../../src","sources":["components/ui/ActionMenuContent/ActionMenuItem.tsx"],"mappings":";;AAAA,SAASA,iBAAiB,EAAEC,SAAS,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACvE,SAASC,SAAS,EAAEC,eAAe,QAAQ,yBAAgB;AAC3D,SAASC,IAAI,QAAQ,kBAAS;AAC9B,SAASC,qBAAqB,QAAQ,gCAA6B;AACnE,SAASC,iBAAiB,QAAQ,wBAAqB;AACvD,SAASC,UAAU,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGtC,OAAO,SAASC,cAAcA,CAAC;EAAEC,MAAM;EAAEC;AAA6B,CAAC,EAAE;EACvE,MAAMC,MAAM,GAAGZ,eAAe,CAACI,UAAU,CAAC;EAC1C,MAAMS,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,KAAK,GAAGZ,qBAAqB,CAACQ,MAAM,CAACI,KAAK,CAAC;EACjD,MAAMC,IAAI,GAAGL,MAAM,CAACM,OAAO,KAAK,IAAI;EACpC,MAAMC,QAAQ,GAAGP,MAAM,CAACO,QAAQ,KAAK,IAAI,IAAIF,IAAI,IAAI,CAACD,KAAK;EAC3D,MAAM;IAAEI,YAAY;IAAE,GAAGC;EAAc,CAAC,GAAGhB,iBAAiB,CAACc,QAAQ,CAAC;EACtE,MAAMG,KAAK,GAAGV,MAAM,CAACW,IAAI,KAAK,QAAQ,GAAGR,MAAM,CAACS,KAAK,GAAGT,MAAM,CAACU,UAAU;EACzE,oBACEf,KAAA,CAACZ,SAAS;IACR4B,UAAU,EAAEC,OAAO,CAACX,KAAK,CAAE;IAC3BY,iBAAiB,EAAEZ,KAAK,GAAG,QAAQ,GAAGa,SAAU;IAChDC,kBAAkB,EAAEd,KAAM;IAC1Be,iBAAiB,EAAEnB,MAAM,CAACmB,iBAAkB;IAC5CC,kBAAkB,EAAE;MAAEb,QAAQ;MAAEF;IAAK,CAAE;IACvCE,QAAQ,EAAEA,QAAS;IACnBN,OAAO,EAAEM,QAAQ,GAAGU,SAAS,GAAGhB,OAAQ;IAAA,GACpCQ,aAAa;IACjBY,KAAK,EAAEA,CAAC;MAAEC;IAAQ,CAAC,KAAK,CACtBpB,MAAM,CAACqB,UAAU,EACjB,CAACD,OAAO,IAAId,YAAY,KAAKN,MAAM,CAACsB,iBAAiB,EACrDjB,QAAQ,IAAIL,MAAM,CAACuB,kBAAkB,CACrC;IAAAC,QAAA,GAED1B,MAAM,CAAC2B,IAAI,IAAItB,IAAI,gBAClBT,IAAA,CAACR,IAAI;MACHiC,KAAK,EAAEnB,MAAM,CAAC0B,WAAY;MAC1BC,2BAA2B;MAC3BC,yBAAyB,EAAC,qBAAqB;MAAAJ,QAAA,EAE9CrB,IAAI,gBACHT,IAAA,CAACX,iBAAiB;QAAC8C,IAAI,EAAC,OAAO;QAACrB,KAAK,EAAEP,MAAM,CAAC6B;MAAgB,CAAE,CAAC,GAC/DhC,MAAM,CAAC2B,IAAI,gBACb/B,IAAA,CAACL,IAAI;QAAC0C,IAAI,EAAEjC,MAAM,CAAC2B,IAAK;QAACI,IAAI,EAAE,EAAG;QAACrB,KAAK,EAAEA;MAAM,CAAE,CAAC,GACjD;IAAI,CACJ,CAAC,GACL,IAAI,eACRd,IAAA,CAACT,IAAI;MACHkC,KAAK,EAAE,CACLnB,MAAM,CAACgC,YAAY,EACnBlC,MAAM,CAACW,IAAI,KAAK,QAAQ,IAAIT,MAAM,CAACiC,aAAa,CAChD;MAAAT,QAAA,EAED1B,MAAM,CAACI;IAAK,CACT,CAAC;EAAA,CACE,CAAC;AAEhB","ignoreList":[]}
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ import { Pressable } from 'react-native';
4
+ import { useSafeAreaInsets } from 'react-native-safe-area-context';
5
+ import { space, useThemedStyles } from "../../../theme/index.js";
6
+ import { makeStyles } from "./styles.js";
7
+ import { jsx as _jsx } from "react/jsx-runtime";
8
+ export function ActionMenuSheetCard({
9
+ children,
10
+ contentStyle,
11
+ testID
12
+ }) {
13
+ const styles = useThemedStyles(makeStyles);
14
+ const insets = useSafeAreaInsets();
15
+ return /*#__PURE__*/_jsx(Pressable, {
16
+ accessible: false,
17
+ testID: testID,
18
+ style: [styles.sheetCard, {
19
+ paddingBottom: insets.bottom + space[5]
20
+ }, contentStyle],
21
+ onPress: event => event.stopPropagation(),
22
+ children: children
23
+ });
24
+ }
25
+ //# sourceMappingURL=ActionMenuSheetCard.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["Pressable","useSafeAreaInsets","space","useThemedStyles","makeStyles","jsx","_jsx","ActionMenuSheetCard","children","contentStyle","testID","styles","insets","accessible","style","sheetCard","paddingBottom","bottom","onPress","event","stopPropagation"],"sourceRoot":"../../../../../src","sources":["components/ui/ActionMenuContent/ActionMenuSheetCard.tsx"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,cAAc;AACxC,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,KAAK,EAAEC,eAAe,QAAQ,yBAAgB;AACvD,SAASC,UAAU,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGtC,OAAO,SAASC,mBAAmBA,CAAC;EAClCC,QAAQ;EACRC,YAAY;EACZC;AACwB,CAAC,EAAE;EAC3B,MAAMC,MAAM,GAAGR,eAAe,CAACC,UAAU,CAAC;EAC1C,MAAMQ,MAAM,GAAGX,iBAAiB,CAAC,CAAC;EAClC,oBACEK,IAAA,CAACN,SAAS;IACRa,UAAU,EAAE,KAAM;IAClBH,MAAM,EAAEA,MAAO;IACfI,KAAK,EAAE,CACLH,MAAM,CAACI,SAAS,EAChB;MAAEC,aAAa,EAAEJ,MAAM,CAACK,MAAM,GAAGf,KAAK,CAAC,CAAC;IAAE,CAAC,EAC3CO,YAAY,CACZ;IACFS,OAAO,EAAGC,KAAK,IAAKA,KAAK,CAACC,eAAe,CAAC,CAAE;IAAAZ,QAAA,EAE3CA;EAAQ,CACA,CAAC;AAEhB","ignoreList":[]}
@@ -1,8 +1,56 @@
1
1
  "use strict";
2
2
 
3
3
  import { StyleSheet } from 'react-native';
4
- import { fw, radius, space, type as typography } from "../../../theme/index.js";
5
- export const makeStyles = c => StyleSheet.create({
4
+ import { fixed, fw, r, radius, space, type as typography } from "../../../theme/index.js";
5
+ export const makeStyles = (c, shadows) => StyleSheet.create({
6
+ popoverRoot: {
7
+ width: r(200),
8
+ maxWidth: '100%',
9
+ borderRadius: r(20),
10
+ borderWidth: 0.5,
11
+ borderColor: c.outline,
12
+ backgroundColor: c.surface,
13
+ ...shadows.card
14
+ },
15
+ popoverCard: {
16
+ borderRadius: r(20),
17
+ overflow: 'hidden',
18
+ paddingVertical: space[2]
19
+ },
20
+ popoverRow: {
21
+ minHeight: fixed.hitTarget,
22
+ flexDirection: 'row',
23
+ alignItems: 'center',
24
+ gap: space[5],
25
+ paddingVertical: space[3],
26
+ paddingHorizontal: space[6]
27
+ },
28
+ popoverRowPressed: {
29
+ backgroundColor: c.surfaceContainer
30
+ },
31
+ popoverRowDisabled: {
32
+ opacity: 0.4
33
+ },
34
+ popoverIcon: {
35
+ width: 40,
36
+ height: 40,
37
+ borderRadius: 20,
38
+ alignItems: 'center',
39
+ justifyContent: 'center',
40
+ backgroundColor: c.surfaceContainer
41
+ },
42
+ popoverLabel: {
43
+ flex: 1,
44
+ minWidth: 0,
45
+ fontSize: typography.body,
46
+ color: c.foreground
47
+ },
48
+ popoverDanger: {
49
+ color: c.error
50
+ },
51
+ popoverConfirmationActions: {
52
+ paddingTop: space[2]
53
+ },
6
54
  dialogRoot: {
7
55
  flex: 1,
8
56
  justifyContent: 'center',
@@ -1 +1 @@
1
- {"version":3,"names":["StyleSheet","fw","radius","space","type","typography","makeStyles","c","create","dialogRoot","flex","justifyContent","alignItems","backgroundColor","scrim","sheetRoot","dialogCard","surface","borderRadius","xl","padding","width","maxWidth","gap","sheetCard","borderTopLeftRadius","borderTopRightRadius","paddingHorizontal","paddingTop","title","color","foreground","fontSize","sm","fontWeight","semi","textAlign","paddingVertical","confirmation","foregroundMuted","xs","sheetActions","flexDirection","flexWrap","sheetAction"],"sourceRoot":"../../../../../src","sources":["components/ui/ActionMenuContent/styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,EAAE,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,IAAIC,UAAU,QAAQ,yBAAgB;AAEtE,OAAO,MAAMC,UAAU,GAAIC,CAAc,IACvCP,UAAU,CAACQ,MAAM,CAAC;EAChBC,UAAU,EAAE;IACVC,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAEN,CAAC,CAACO;EACrB,CAAC;EACDC,SAAS,EAAE;IACTL,IAAI,EAAE,CAAC;IACPC,cAAc,EAAE,UAAU;IAC1BE,eAAe,EAAEN,CAAC,CAACO;EACrB,CAAC;EACDE,UAAU,EAAE;IACVH,eAAe,EAAEN,CAAC,CAACU,OAAO;IAC1BC,YAAY,EAAEhB,MAAM,CAACiB,EAAE;IACvBC,OAAO,EAAEjB,KAAK,CAAC,CAAC,CAAC;IACjBkB,KAAK,EAAE,KAAK;IACZC,QAAQ,EAAE,GAAG;IACbC,GAAG,EAAEpB,KAAK,CAAC,CAAC;EACd,CAAC;EACDqB,SAAS,EAAE;IACTX,eAAe,EAAEN,CAAC,CAACU,OAAO;IAC1BQ,mBAAmB,EAAEvB,MAAM,CAACiB,EAAE;IAC9BO,oBAAoB,EAAExB,MAAM,CAACiB,EAAE;IAC/BQ,iBAAiB,EAAExB,KAAK,CAAC,CAAC,CAAC;IAC3ByB,UAAU,EAAEzB,KAAK,CAAC,CAAC,CAAC;IACpBoB,GAAG,EAAEpB,KAAK,CAAC,CAAC;EACd,CAAC;EACD0B,KAAK,EAAE;IACLC,KAAK,EAAEvB,CAAC,CAACwB,UAAU;IACnBC,QAAQ,EAAE3B,UAAU,CAAC4B,EAAE;IACvBC,UAAU,EAAEjC,EAAE,CAACkC,IAAI;IACnBC,SAAS,EAAE,QAAQ;IACnBC,eAAe,EAAElC,KAAK,CAAC,CAAC;EAC1B,CAAC;EACDmC,YAAY,EAAE;IACZR,KAAK,EAAEvB,CAAC,CAACgC,eAAe;IACxBP,QAAQ,EAAE3B,UAAU,CAACmC,EAAE;IACvBJ,SAAS,EAAE;EACb,CAAC;EACDK,YAAY,EAAE;IAAEC,aAAa,EAAE,KAAK;IAAEC,QAAQ,EAAE,MAAM;IAAEpB,GAAG,EAAEpB,KAAK,CAAC,CAAC;EAAE,CAAC;EACvEyC,WAAW,EAAE;IAAElC,IAAI,EAAE;EAAE;AACzB,CAAC,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["StyleSheet","fixed","fw","r","radius","space","type","typography","makeStyles","c","shadows","create","popoverRoot","width","maxWidth","borderRadius","borderWidth","borderColor","outline","backgroundColor","surface","card","popoverCard","overflow","paddingVertical","popoverRow","minHeight","hitTarget","flexDirection","alignItems","gap","paddingHorizontal","popoverRowPressed","surfaceContainer","popoverRowDisabled","opacity","popoverIcon","height","justifyContent","popoverLabel","flex","minWidth","fontSize","body","color","foreground","popoverDanger","error","popoverConfirmationActions","paddingTop","dialogRoot","scrim","sheetRoot","dialogCard","xl","padding","sheetCard","borderTopLeftRadius","borderTopRightRadius","title","sm","fontWeight","semi","textAlign","confirmation","foregroundMuted","xs","sheetActions","flexWrap","sheetAction"],"sourceRoot":"../../../../../src","sources":["components/ui/ActionMenuContent/styles.ts"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ import { useEffect, useState } from 'react';
4
+ import { Platform } from 'react-native';
5
+ /** Web 菜单按下时保留原输入焦点;实际选择只由 Pressable.onPress 交付。 */
6
+ export function useMenuMousePress(disabled) {
7
+ const [pressed, setPressed] = useState(false);
8
+ const enabled = Platform.OS === 'web' && !disabled;
9
+ useEffect(() => {
10
+ if (disabled) setPressed(false);
11
+ }, [disabled]);
12
+ const begin = event => {
13
+ if (!enabled || event.nativeEvent.pointerType !== 'mouse' || event.nativeEvent.button !== 0) return;
14
+ event.preventDefault();
15
+ setPressed(true);
16
+ };
17
+ const end = () => setPressed(false);
18
+ return {
19
+ mousePressed: enabled && pressed,
20
+ onPointerDown: begin,
21
+ onPointerUp: end,
22
+ onPointerCancel: end,
23
+ onPointerLeave: end
24
+ };
25
+ }
26
+ //# sourceMappingURL=useMenuMousePress.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["useEffect","useState","Platform","useMenuMousePress","disabled","pressed","setPressed","enabled","OS","begin","event","nativeEvent","pointerType","button","preventDefault","end","mousePressed","onPointerDown","onPointerUp","onPointerCancel","onPointerLeave"],"sourceRoot":"../../../../../src","sources":["components/ui/ActionMenuContent/useMenuMousePress.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,QAAQ,QAAQ,cAAc;AAGvC;AACA,OAAO,SAASC,iBAAiBA,CAACC,QAAiB,EAAE;EACnD,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGL,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMM,OAAO,GAAGL,QAAQ,CAACM,EAAE,KAAK,KAAK,IAAI,CAACJ,QAAQ;EAClDJ,SAAS,CAAC,MAAM;IACd,IAAII,QAAQ,EAAEE,UAAU,CAAC,KAAK,CAAC;EACjC,CAAC,EAAE,CAACF,QAAQ,CAAC,CAAC;EACd,MAAMK,KAAK,GAAIC,KAAmB,IAAK;IACrC,IACE,CAACH,OAAO,IACRG,KAAK,CAACC,WAAW,CAACC,WAAW,KAAK,OAAO,IACzCF,KAAK,CAACC,WAAW,CAACE,MAAM,KAAK,CAAC,EAE9B;IACFH,KAAK,CAACI,cAAc,CAAC,CAAC;IACtBR,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC;EACD,MAAMS,GAAG,GAAGA,CAAA,KAAMT,UAAU,CAAC,KAAK,CAAC;EACnC,OAAO;IACLU,YAAY,EAAET,OAAO,IAAIF,OAAO;IAChCY,aAAa,EAAER,KAAK;IACpBS,WAAW,EAAEH,GAAG;IAChBI,eAAe,EAAEJ,GAAG;IACpBK,cAAc,EAAEL;EAClB,CAAC;AACH","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"ActionMenuContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/ActionMenuContent/ActionMenuContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,EACP,YAAuB,EACvB,KAAK,EACL,WAAkB,EAClB,KAAK,EACL,YAAY,EACZ,MAAsB,GACvB,EAAE,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsG5C"}
1
+ {"version":3,"file":"ActionMenuContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/ActionMenuContent/ActionMenuContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAKtD,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,OAAO,EACP,YAAuB,EACvB,KAAK,EACL,WAAkB,EAClB,KAAK,EACL,YAAY,EACZ,MAAsB,GACvB,EAAE,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6J5C"}
@@ -0,0 +1,3 @@
1
+ import type { ActionMenuItemProps } from './types';
2
+ export declare function ActionMenuItem({ action, onPress }: ActionMenuItemProps): import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=ActionMenuItem.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ActionMenuItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/ActionMenuContent/ActionMenuItem.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,mBAAmB,2CA+CtE"}
@@ -0,0 +1,3 @@
1
+ import type { ActionMenuSheetCardProps } from './types';
2
+ export declare function ActionMenuSheetCard({ children, contentStyle, testID, }: ActionMenuSheetCardProps): import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=ActionMenuSheetCard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ActionMenuSheetCard.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/ActionMenuContent/ActionMenuSheetCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,YAAY,EACZ,MAAM,GACP,EAAE,wBAAwB,2CAiB1B"}
@@ -1,5 +1,60 @@
1
- import type { ColorTokens } from '../../../theme';
2
- export declare const makeStyles: (c: ColorTokens) => Readonly<{
1
+ import type { ColorTokens, ShadowTokens } from '../../../theme';
2
+ export declare const makeStyles: (c: ColorTokens, shadows: ShadowTokens) => Readonly<{
3
+ popoverRoot: {
4
+ shadowColor: string;
5
+ shadowOffset: {
6
+ readonly width: number;
7
+ readonly height: number;
8
+ };
9
+ shadowOpacity: number;
10
+ shadowRadius: number;
11
+ elevation: number;
12
+ width: number;
13
+ maxWidth: string;
14
+ borderRadius: number;
15
+ borderWidth: number;
16
+ borderColor: string;
17
+ backgroundColor: string;
18
+ };
19
+ popoverCard: {
20
+ borderRadius: number;
21
+ overflow: "hidden";
22
+ paddingVertical: number;
23
+ };
24
+ popoverRow: {
25
+ minHeight: 44;
26
+ flexDirection: "row";
27
+ alignItems: "center";
28
+ gap: number;
29
+ paddingVertical: number;
30
+ paddingHorizontal: number;
31
+ };
32
+ popoverRowPressed: {
33
+ backgroundColor: string;
34
+ };
35
+ popoverRowDisabled: {
36
+ opacity: number;
37
+ };
38
+ popoverIcon: {
39
+ width: number;
40
+ height: number;
41
+ borderRadius: number;
42
+ alignItems: "center";
43
+ justifyContent: "center";
44
+ backgroundColor: string;
45
+ };
46
+ popoverLabel: {
47
+ flex: number;
48
+ minWidth: number;
49
+ fontSize: number;
50
+ color: string;
51
+ };
52
+ popoverDanger: {
53
+ color: string;
54
+ };
55
+ popoverConfirmationActions: {
56
+ paddingTop: number;
57
+ };
3
58
  dialogRoot: {
4
59
  flex: number;
5
60
  justifyContent: "center";
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/ActionMenuContent/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CrC,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/ActionMenuContent/styles.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAChE,eAAO,MAAM,UAAU,GAAI,GAAG,WAAW,EAAE,SAAS,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmF5D,CAAC"}
@@ -1,4 +1,6 @@
1
+ import type { ReactNode } from 'react';
1
2
  import type { StyleProp, ViewStyle } from 'react-native';
3
+ import type { IconName } from '../Icon';
2
4
  export interface ActionMenuConfirmation {
3
5
  message: string;
4
6
  confirmLabel: string;
@@ -6,6 +8,8 @@ export interface ActionMenuConfirmation {
6
8
  export interface ActionMenuAction {
7
9
  id: string;
8
10
  label: string;
11
+ icon?: IconName;
12
+ accessibilityHint?: string;
9
13
  onPress(): void;
10
14
  disabled?: boolean;
11
15
  loading?: boolean;
@@ -15,7 +19,7 @@ export interface ActionMenuAction {
15
19
  /** 操作、确认有效性和宿主关闭由调用方负责。 */
16
20
  export interface ActionMenuContentProps {
17
21
  actions: readonly ActionMenuAction[];
18
- presentation?: 'dialog' | 'sheet';
22
+ presentation?: 'dialog' | 'sheet' | 'popover';
19
23
  title?: string;
20
24
  cancelLabel?: string;
21
25
  onClose(): void;
@@ -23,4 +27,13 @@ export interface ActionMenuContentProps {
23
27
  contentStyle?: StyleProp<ViewStyle>;
24
28
  testID?: string;
25
29
  }
30
+ export interface ActionMenuItemProps {
31
+ action: ActionMenuAction;
32
+ onPress(): void;
33
+ }
34
+ export interface ActionMenuSheetCardProps {
35
+ children: ReactNode;
36
+ contentStyle?: StyleProp<ViewStyle>;
37
+ testID: string;
38
+ }
26
39
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/ActionMenuContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,IAAI,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACvC;AAED,2BAA2B;AAC3B,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,IAAI,IAAI,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/ActionMenuContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,IAAI,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACvC;AAED,2BAA2B;AAC3B,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,IAAI,IAAI,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,gBAAgB,CAAC;IACzB,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;CAChB"}
@@ -0,0 +1,10 @@
1
+ import type { PointerEvent } from 'react-native';
2
+ /** Web 菜单按下时保留原输入焦点;实际选择只由 Pressable.onPress 交付。 */
3
+ export declare function useMenuMousePress(disabled: boolean): {
4
+ mousePressed: boolean;
5
+ onPointerDown: (event: PointerEvent) => void;
6
+ onPointerUp: () => void;
7
+ onPointerCancel: () => void;
8
+ onPointerLeave: () => void;
9
+ };
10
+ //# sourceMappingURL=useMenuMousePress.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMenuMousePress.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/ActionMenuContent/useMenuMousePress.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,oDAAoD;AACpD,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,OAAO;;2BAM3B,YAAY;;;;EAkBnC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unif/react-native-design",
3
- "version": "0.38.0",
3
+ "version": "0.39.0",
4
4
  "description": "Unif React Native 设计系统:基础组件、主题、字体和图标",
5
5
  "main": "./lib/module/index.js",
6
6
  "types": "./lib/typescript/src/index.d.ts",
@@ -1,10 +1,11 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { Pressable, Text, View } from 'react-native';
3
- import { useSafeAreaInsets } from 'react-native-safe-area-context';
4
- import { space, useThemedStyles } from '../../../theme';
3
+ import { useThemedStyles } from '../../../theme';
5
4
  import { Button } from '../Button';
6
5
  import type { ActionMenuContentProps } from './types';
7
6
  import { makeStyles } from './styles';
7
+ import { ActionMenuItem } from './ActionMenuItem';
8
+ import { ActionMenuSheetCard } from './ActionMenuSheetCard';
8
9
 
9
10
  export function ActionMenuContent({
10
11
  actions,
@@ -17,29 +18,27 @@ export function ActionMenuContent({
17
18
  testID = 'action-menu',
18
19
  }: ActionMenuContentProps): React.JSX.Element {
19
20
  const styles = useThemedStyles(makeStyles);
20
- const insets = useSafeAreaInsets();
21
21
  const [confirmationId, setConfirmationId] = useState<string | null>(null);
22
22
  const isSheet = presentation === 'sheet';
23
+ const isPopover = presentation === 'popover';
23
24
  const confirming = actions.find(
24
25
  (action) =>
25
26
  action.id === confirmationId && action.confirmation !== undefined
26
27
  );
27
28
 
29
+ const cancelConfirmation = () => setConfirmationId(null);
30
+ const confirmSelected = () => {
31
+ if (!confirming) return;
32
+ onClose();
33
+ confirming.onPress();
34
+ };
35
+
28
36
  useEffect(() => {
29
37
  if (!confirming) setConfirmationId(null);
30
38
  }, [confirming]);
31
39
 
32
- const content = (
33
- <Pressable
34
- accessible={false}
35
- testID={`${testID}-card`}
36
- style={[
37
- isSheet ? styles.sheetCard : styles.dialogCard,
38
- isSheet && { paddingBottom: insets.bottom + space[5] },
39
- contentStyle,
40
- ]}
41
- onPress={(event) => event.stopPropagation()}
42
- >
40
+ const body = (
41
+ <>
43
42
  {title ? (
44
43
  <Text
45
44
  testID={`${testID}-title`}
@@ -55,25 +54,44 @@ export function ActionMenuContent({
55
54
  <Text style={styles.confirmation} accessibilityLiveRegion="polite">
56
55
  {confirming.confirmation.message}
57
56
  </Text>
58
- <View style={styles.sheetActions}>
59
- <Button
60
- label={cancelLabel}
61
- variant="neutral"
62
- style={styles.sheetAction}
63
- onPress={() => setConfirmationId(null)}
64
- />
65
- <Button
66
- label={confirming.confirmation.confirmLabel}
67
- variant="danger"
68
- disabled={confirming.disabled}
69
- loading={confirming.loading}
70
- style={styles.sheetAction}
71
- onPress={() => {
72
- onClose();
73
- confirming.onPress();
74
- }}
75
- />
76
- </View>
57
+ {isPopover ? (
58
+ <View style={styles.popoverConfirmationActions}>
59
+ <ActionMenuItem
60
+ action={{
61
+ id: 'cancel-confirmation',
62
+ label: cancelLabel,
63
+ onPress: cancelConfirmation,
64
+ }}
65
+ onPress={cancelConfirmation}
66
+ />
67
+ <ActionMenuItem
68
+ action={{
69
+ ...confirming,
70
+ label: confirming.confirmation.confirmLabel,
71
+ icon: undefined,
72
+ tone: 'danger',
73
+ }}
74
+ onPress={confirmSelected}
75
+ />
76
+ </View>
77
+ ) : (
78
+ <View style={styles.sheetActions}>
79
+ <Button
80
+ label={cancelLabel}
81
+ variant="neutral"
82
+ style={styles.sheetAction}
83
+ onPress={cancelConfirmation}
84
+ />
85
+ <Button
86
+ label={confirming.confirmation.confirmLabel}
87
+ variant="danger"
88
+ disabled={confirming.disabled}
89
+ loading={confirming.loading}
90
+ style={styles.sheetAction}
91
+ onPress={confirmSelected}
92
+ />
93
+ </View>
94
+ )}
77
95
  </>
78
96
  ) : (
79
97
  <>
@@ -81,32 +99,70 @@ export function ActionMenuContent({
81
99
  testID={`${testID}-actions`}
82
100
  style={isSheet ? styles.sheetActions : undefined}
83
101
  >
84
- {actions.map((action) => (
85
- <Button
86
- key={action.id}
87
- label={action.label}
88
- disabled={action.disabled}
89
- loading={action.loading}
90
- variant={isSheet ? (action.tone ?? 'neutral') : 'text'}
91
- style={isSheet ? styles.sheetAction : undefined}
92
- onPress={() => {
93
- if (action.confirmation) {
94
- setConfirmationId(action.id);
95
- return;
96
- }
97
- action.onPress();
98
- }}
99
- />
100
- ))}
102
+ {actions.map((action) =>
103
+ isPopover ? (
104
+ <ActionMenuItem
105
+ key={action.id}
106
+ action={action}
107
+ onPress={() => {
108
+ if (action.confirmation) setConfirmationId(action.id);
109
+ else action.onPress();
110
+ }}
111
+ />
112
+ ) : (
113
+ <Button
114
+ key={action.id}
115
+ label={action.label}
116
+ leftIcon={action.icon}
117
+ accessibilityHint={action.accessibilityHint}
118
+ disabled={action.disabled}
119
+ loading={action.loading}
120
+ variant={isSheet ? (action.tone ?? 'neutral') : 'text'}
121
+ style={isSheet ? styles.sheetAction : undefined}
122
+ onPress={() => {
123
+ if (action.confirmation) {
124
+ setConfirmationId(action.id);
125
+ return;
126
+ }
127
+ action.onPress();
128
+ }}
129
+ />
130
+ )
131
+ )}
101
132
  </View>
102
- {!isSheet ? (
133
+ {!isSheet && !isPopover ? (
103
134
  <Button label={cancelLabel} variant="text" onPress={onClose} />
104
135
  ) : null}
105
136
  </>
106
137
  )}
138
+ </>
139
+ );
140
+ const content = isSheet ? (
141
+ <ActionMenuSheetCard contentStyle={contentStyle} testID={`${testID}-card`}>
142
+ {body}
143
+ </ActionMenuSheetCard>
144
+ ) : isPopover ? (
145
+ <View testID={`${testID}-card`} style={[styles.popoverCard, contentStyle]}>
146
+ {body}
147
+ </View>
148
+ ) : (
149
+ <Pressable
150
+ accessible={false}
151
+ testID={`${testID}-card`}
152
+ style={[styles.dialogCard, contentStyle]}
153
+ onPress={(event) => event.stopPropagation()}
154
+ >
155
+ {body}
107
156
  </Pressable>
108
157
  );
109
158
 
159
+ if (isPopover)
160
+ return (
161
+ <View testID={testID} style={[styles.popoverRoot, style]}>
162
+ {content}
163
+ </View>
164
+ );
165
+
110
166
  return (
111
167
  <Pressable
112
168
  accessible={false}
@@ -0,0 +1,56 @@
1
+ import { ActivityIndicator, Pressable, Text, View } from 'react-native';
2
+ import { useColors, useThemedStyles } from '../../../theme';
3
+ import { Icon } from '../Icon';
4
+ import { normalizeNonBlankText } from '../shared/accessibilityName';
5
+ import { useMenuMousePress } from './useMenuMousePress';
6
+ import { makeStyles } from './styles';
7
+ import type { ActionMenuItemProps } from './types';
8
+
9
+ export function ActionMenuItem({ action, onPress }: ActionMenuItemProps) {
10
+ const styles = useThemedStyles(makeStyles);
11
+ const colors = useColors();
12
+ const label = normalizeNonBlankText(action.label);
13
+ const busy = action.loading === true;
14
+ const disabled = action.disabled === true || busy || !label;
15
+ const { mousePressed, ...mouseHandlers } = useMenuMousePress(disabled);
16
+ const color = action.tone === 'danger' ? colors.error : colors.foreground;
17
+ return (
18
+ <Pressable
19
+ accessible={Boolean(label)}
20
+ accessibilityRole={label ? 'button' : undefined}
21
+ accessibilityLabel={label}
22
+ accessibilityHint={action.accessibilityHint}
23
+ accessibilityState={{ disabled, busy }}
24
+ disabled={disabled}
25
+ onPress={disabled ? undefined : onPress}
26
+ {...mouseHandlers}
27
+ style={({ pressed }) => [
28
+ styles.popoverRow,
29
+ (pressed || mousePressed) && styles.popoverRowPressed,
30
+ disabled && styles.popoverRowDisabled,
31
+ ]}
32
+ >
33
+ {action.icon || busy ? (
34
+ <View
35
+ style={styles.popoverIcon}
36
+ accessibilityElementsHidden
37
+ importantForAccessibility="no-hide-descendants"
38
+ >
39
+ {busy ? (
40
+ <ActivityIndicator size="small" color={colors.foregroundMuted} />
41
+ ) : action.icon ? (
42
+ <Icon name={action.icon} size={20} color={color} />
43
+ ) : null}
44
+ </View>
45
+ ) : null}
46
+ <Text
47
+ style={[
48
+ styles.popoverLabel,
49
+ action.tone === 'danger' && styles.popoverDanger,
50
+ ]}
51
+ >
52
+ {action.label}
53
+ </Text>
54
+ </Pressable>
55
+ );
56
+ }
@@ -0,0 +1,28 @@
1
+ import { Pressable } from 'react-native';
2
+ import { useSafeAreaInsets } from 'react-native-safe-area-context';
3
+ import { space, useThemedStyles } from '../../../theme';
4
+ import { makeStyles } from './styles';
5
+ import type { ActionMenuSheetCardProps } from './types';
6
+
7
+ export function ActionMenuSheetCard({
8
+ children,
9
+ contentStyle,
10
+ testID,
11
+ }: ActionMenuSheetCardProps) {
12
+ const styles = useThemedStyles(makeStyles);
13
+ const insets = useSafeAreaInsets();
14
+ return (
15
+ <Pressable
16
+ accessible={false}
17
+ testID={testID}
18
+ style={[
19
+ styles.sheetCard,
20
+ { paddingBottom: insets.bottom + space[5] },
21
+ contentStyle,
22
+ ]}
23
+ onPress={(event) => event.stopPropagation()}
24
+ >
25
+ {children}
26
+ </Pressable>
27
+ );
28
+ }
@@ -1,8 +1,55 @@
1
1
  import { StyleSheet } from 'react-native';
2
- import { fw, radius, space, type as typography } from '../../../theme';
3
- import type { ColorTokens } from '../../../theme';
4
- export const makeStyles = (c: ColorTokens) =>
2
+ import {
3
+ fixed,
4
+ fw,
5
+ r,
6
+ radius,
7
+ space,
8
+ type as typography,
9
+ } from '../../../theme';
10
+ import type { ColorTokens, ShadowTokens } from '../../../theme';
11
+ export const makeStyles = (c: ColorTokens, shadows: ShadowTokens) =>
5
12
  StyleSheet.create({
13
+ popoverRoot: {
14
+ width: r(200),
15
+ maxWidth: '100%',
16
+ borderRadius: r(20),
17
+ borderWidth: 0.5,
18
+ borderColor: c.outline,
19
+ backgroundColor: c.surface,
20
+ ...shadows.card,
21
+ },
22
+ popoverCard: {
23
+ borderRadius: r(20),
24
+ overflow: 'hidden',
25
+ paddingVertical: space[2],
26
+ },
27
+ popoverRow: {
28
+ minHeight: fixed.hitTarget,
29
+ flexDirection: 'row',
30
+ alignItems: 'center',
31
+ gap: space[5],
32
+ paddingVertical: space[3],
33
+ paddingHorizontal: space[6],
34
+ },
35
+ popoverRowPressed: { backgroundColor: c.surfaceContainer },
36
+ popoverRowDisabled: { opacity: 0.4 },
37
+ popoverIcon: {
38
+ width: 40,
39
+ height: 40,
40
+ borderRadius: 20,
41
+ alignItems: 'center',
42
+ justifyContent: 'center',
43
+ backgroundColor: c.surfaceContainer,
44
+ },
45
+ popoverLabel: {
46
+ flex: 1,
47
+ minWidth: 0,
48
+ fontSize: typography.body,
49
+ color: c.foreground,
50
+ },
51
+ popoverDanger: { color: c.error },
52
+ popoverConfirmationActions: { paddingTop: space[2] },
6
53
  dialogRoot: {
7
54
  flex: 1,
8
55
  justifyContent: 'center',
@@ -1,4 +1,6 @@
1
+ import type { ReactNode } from 'react';
1
2
  import type { StyleProp, ViewStyle } from 'react-native';
3
+ import type { IconName } from '../Icon';
2
4
 
3
5
  export interface ActionMenuConfirmation {
4
6
  message: string;
@@ -8,6 +10,8 @@ export interface ActionMenuConfirmation {
8
10
  export interface ActionMenuAction {
9
11
  id: string;
10
12
  label: string;
13
+ icon?: IconName;
14
+ accessibilityHint?: string;
11
15
  onPress(): void;
12
16
  disabled?: boolean;
13
17
  loading?: boolean;
@@ -18,7 +22,7 @@ export interface ActionMenuAction {
18
22
  /** 操作、确认有效性和宿主关闭由调用方负责。 */
19
23
  export interface ActionMenuContentProps {
20
24
  actions: readonly ActionMenuAction[];
21
- presentation?: 'dialog' | 'sheet';
25
+ presentation?: 'dialog' | 'sheet' | 'popover';
22
26
  title?: string;
23
27
  cancelLabel?: string;
24
28
  onClose(): void;
@@ -26,3 +30,14 @@ export interface ActionMenuContentProps {
26
30
  contentStyle?: StyleProp<ViewStyle>;
27
31
  testID?: string;
28
32
  }
33
+
34
+ export interface ActionMenuItemProps {
35
+ action: ActionMenuAction;
36
+ onPress(): void;
37
+ }
38
+
39
+ export interface ActionMenuSheetCardProps {
40
+ children: ReactNode;
41
+ contentStyle?: StyleProp<ViewStyle>;
42
+ testID: string;
43
+ }
@@ -0,0 +1,30 @@
1
+ import { useEffect, useState } from 'react';
2
+ import { Platform } from 'react-native';
3
+ import type { PointerEvent } from 'react-native';
4
+
5
+ /** Web 菜单按下时保留原输入焦点;实际选择只由 Pressable.onPress 交付。 */
6
+ export function useMenuMousePress(disabled: boolean) {
7
+ const [pressed, setPressed] = useState(false);
8
+ const enabled = Platform.OS === 'web' && !disabled;
9
+ useEffect(() => {
10
+ if (disabled) setPressed(false);
11
+ }, [disabled]);
12
+ const begin = (event: PointerEvent) => {
13
+ if (
14
+ !enabled ||
15
+ event.nativeEvent.pointerType !== 'mouse' ||
16
+ event.nativeEvent.button !== 0
17
+ )
18
+ return;
19
+ event.preventDefault();
20
+ setPressed(true);
21
+ };
22
+ const end = () => setPressed(false);
23
+ return {
24
+ mousePressed: enabled && pressed,
25
+ onPointerDown: begin,
26
+ onPointerUp: end,
27
+ onPointerCancel: end,
28
+ onPointerLeave: end,
29
+ };
30
+ }