@unif/react-native-chat 3.1.0 → 3.2.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/Process/Process.js +11 -3
- package/lib/module/components/Process/Process.js.map +1 -1
- package/lib/module/components/Process/ProcessCompactStep.js +81 -0
- package/lib/module/components/Process/ProcessCompactStep.js.map +1 -0
- package/lib/module/components/Process/styles.js +31 -1
- package/lib/module/components/Process/styles.js.map +1 -1
- package/lib/typescript/src/components/Process/Process.d.ts.map +1 -1
- package/lib/typescript/src/components/Process/ProcessCompactStep.d.ts +3 -0
- package/lib/typescript/src/components/Process/ProcessCompactStep.d.ts.map +1 -0
- package/lib/typescript/src/components/Process/styles.d.ts +30 -0
- package/lib/typescript/src/components/Process/styles.d.ts.map +1 -1
- package/lib/typescript/src/components/Process/types.d.ts +8 -0
- package/lib/typescript/src/components/Process/types.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/components/Process/Process.tsx +17 -3
- package/src/components/Process/ProcessCompactStep.tsx +110 -0
- package/src/components/Process/styles.ts +27 -1
- package/src/components/Process/types.ts +9 -0
|
@@ -5,6 +5,7 @@ import { Text, View } from 'react-native';
|
|
|
5
5
|
import { Button, Icon, useColors, useThemedStyles } from '@unif/react-native-design';
|
|
6
6
|
import { PROCESS_STATUS_ICONS, PROCESS_STATUS_LABELS } from "./constants.js";
|
|
7
7
|
import { createStyles } from "./styles.js";
|
|
8
|
+
import { ProcessCompactStep } from "./ProcessCompactStep.js";
|
|
8
9
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
9
10
|
function idsWithDetails(ids, steps) {
|
|
10
11
|
const availableIds = new Set(steps.filter(step => step.details != null).map(step => step.id));
|
|
@@ -31,7 +32,8 @@ export function Process(props) {
|
|
|
31
32
|
title,
|
|
32
33
|
identity,
|
|
33
34
|
style,
|
|
34
|
-
testID
|
|
35
|
+
testID,
|
|
36
|
+
variant = 'card'
|
|
35
37
|
} = props;
|
|
36
38
|
const styles = useThemedStyles(createStyles);
|
|
37
39
|
const colors = useColors();
|
|
@@ -49,7 +51,7 @@ export function Process(props) {
|
|
|
49
51
|
props.onExpandedChange?.(nextIds);
|
|
50
52
|
};
|
|
51
53
|
return /*#__PURE__*/_jsxs(View, {
|
|
52
|
-
style: [styles.root, style],
|
|
54
|
+
style: [variant === 'compact' ? styles.compactRoot : styles.root, style],
|
|
53
55
|
testID: testID,
|
|
54
56
|
children: [title || identity ? /*#__PURE__*/_jsxs(View, {
|
|
55
57
|
style: styles.heading,
|
|
@@ -58,11 +60,17 @@ export function Process(props) {
|
|
|
58
60
|
children: title
|
|
59
61
|
}) : null]
|
|
60
62
|
}) : null, /*#__PURE__*/_jsx(View, {
|
|
61
|
-
style: styles.steps,
|
|
63
|
+
style: variant === 'compact' ? styles.compactSteps : styles.steps,
|
|
62
64
|
children: steps.map((step, index) => {
|
|
63
65
|
const statusLabel = PROCESS_STATUS_LABELS[step.status];
|
|
64
66
|
const elapsed = formatElapsedMs(step.elapsedMs);
|
|
65
67
|
const isExpanded = expandedIds.includes(step.id);
|
|
68
|
+
if (variant === 'compact') return /*#__PURE__*/_jsx(ProcessCompactStep, {
|
|
69
|
+
step: step,
|
|
70
|
+
expanded: isExpanded,
|
|
71
|
+
elapsed: elapsed,
|
|
72
|
+
onToggle: () => toggleDetails(step.id)
|
|
73
|
+
}, step.id);
|
|
66
74
|
return /*#__PURE__*/_jsxs(View, {
|
|
67
75
|
style: [styles.step, index === steps.length - 1 && styles.stepLast],
|
|
68
76
|
children: [/*#__PURE__*/_jsxs(View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useState","Text","View","Button","Icon","useColors","useThemedStyles","PROCESS_STATUS_ICONS","PROCESS_STATUS_LABELS","createStyles","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","idsWithDetails","ids","steps","availableIds","Set","filter","step","details","map","id","has","formatElapsedMs","elapsedMs","undefined","Number","isFinite","Math","round","roundedSeconds","formatted","isInteger","String","toFixed","totalSeconds","minutes","floor","remainingSeconds","Process","props","title","identity","style","testID","styles","colors","isControlled","expandedIds","localExpandedIds","setLocalExpandedIds","defaultExpandedIds","current","toggleDetails","stepId","nextIds","includes","onExpandedChange","root","children","heading","headingTitle","index","statusLabel","status","elapsed","isExpanded","length","stepLast","stepHeader","stepTitle","accessible","accessibilityLabel","name","color","error","success","foregroundMuted","statusText","description","label","onPress","size","
|
|
1
|
+
{"version":3,"names":["useEffect","useState","Text","View","Button","Icon","useColors","useThemedStyles","PROCESS_STATUS_ICONS","PROCESS_STATUS_LABELS","createStyles","ProcessCompactStep","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","idsWithDetails","ids","steps","availableIds","Set","filter","step","details","map","id","has","formatElapsedMs","elapsedMs","undefined","Number","isFinite","Math","round","roundedSeconds","formatted","isInteger","String","toFixed","totalSeconds","minutes","floor","remainingSeconds","Process","props","title","identity","style","testID","variant","styles","colors","isControlled","expandedIds","localExpandedIds","setLocalExpandedIds","defaultExpandedIds","current","toggleDetails","stepId","nextIds","includes","onExpandedChange","compactRoot","root","children","heading","headingTitle","compactSteps","index","statusLabel","status","elapsed","isExpanded","expanded","onToggle","length","stepLast","stepHeader","stepTitle","accessible","accessibilityLabel","name","color","error","success","foregroundMuted","statusText","description","label","onPress","size","actions","action","leftIcon","icon","disabled","loading","accessibilityHint"],"sourceRoot":"../../../../src","sources":["components/Process/Process.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Pressable, ScrollView, Text, View } from 'react-native';
|
|
4
|
+
import { Button, Icon, Pulse, Reveal, pressedOpacity, r, useColors, useThemedStyles } from '@unif/react-native-design';
|
|
5
|
+
import { PROCESS_STATUS_ICONS, PROCESS_STATUS_LABELS } from "./constants.js";
|
|
6
|
+
import { createStyles } from "./styles.js";
|
|
7
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
export function ProcessCompactStep({
|
|
9
|
+
step,
|
|
10
|
+
expanded,
|
|
11
|
+
elapsed,
|
|
12
|
+
onToggle
|
|
13
|
+
}) {
|
|
14
|
+
const styles = useThemedStyles(createStyles);
|
|
15
|
+
const colors = useColors();
|
|
16
|
+
const hasDetails = step.details != null;
|
|
17
|
+
const running = step.status === 'running';
|
|
18
|
+
const color = running ? colors.primary : step.status === 'completed' ? colors.success : step.status === 'failed' ? colors.error : colors.foregroundMuted;
|
|
19
|
+
const icon = /*#__PURE__*/_jsx(Icon, {
|
|
20
|
+
name: running || step.status === 'completed' ? 'spark' : PROCESS_STATUS_ICONS[step.status],
|
|
21
|
+
size: r(14),
|
|
22
|
+
color: color
|
|
23
|
+
});
|
|
24
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
25
|
+
children: [/*#__PURE__*/_jsxs(Pressable, {
|
|
26
|
+
testID: `process-step-${step.id}-toggle`,
|
|
27
|
+
accessible: true,
|
|
28
|
+
accessibilityRole: hasDetails ? 'button' : undefined,
|
|
29
|
+
accessibilityLabel: `${step.title},${PROCESS_STATUS_LABELS[step.status]}${elapsed ? `,${elapsed}` : ''}`,
|
|
30
|
+
accessibilityState: hasDetails ? {
|
|
31
|
+
expanded
|
|
32
|
+
} : undefined,
|
|
33
|
+
disabled: !hasDetails,
|
|
34
|
+
onPress: onToggle,
|
|
35
|
+
style: ({
|
|
36
|
+
pressed
|
|
37
|
+
}) => [styles.compactHeader, pressed && {
|
|
38
|
+
opacity: pressedOpacity
|
|
39
|
+
}],
|
|
40
|
+
children: [running ? /*#__PURE__*/_jsx(Pulse, {
|
|
41
|
+
children: icon
|
|
42
|
+
}) : icon, /*#__PURE__*/_jsx(Text, {
|
|
43
|
+
style: styles.compactTitle,
|
|
44
|
+
testID: `process-step-title-${step.id}`,
|
|
45
|
+
numberOfLines: 1,
|
|
46
|
+
children: step.title
|
|
47
|
+
}), elapsed ? /*#__PURE__*/_jsx(Text, {
|
|
48
|
+
style: styles.elapsed,
|
|
49
|
+
children: elapsed
|
|
50
|
+
}) : null, hasDetails ? /*#__PURE__*/_jsx(Icon, {
|
|
51
|
+
name: expanded ? 'chevron-up' : 'chevron-down',
|
|
52
|
+
size: r(14),
|
|
53
|
+
color: colors.foregroundSubtle
|
|
54
|
+
}) : null]
|
|
55
|
+
}), step.description ? /*#__PURE__*/_jsx(Text, {
|
|
56
|
+
style: styles.compactDescription,
|
|
57
|
+
children: step.description
|
|
58
|
+
}) : null, hasDetails && expanded ? /*#__PURE__*/_jsx(Reveal, {
|
|
59
|
+
children: /*#__PURE__*/_jsx(ScrollView, {
|
|
60
|
+
testID: `process-step-${step.id}-details`,
|
|
61
|
+
style: styles.compactDetails,
|
|
62
|
+
nestedScrollEnabled: true,
|
|
63
|
+
keyboardShouldPersistTaps: "handled",
|
|
64
|
+
children: step.details
|
|
65
|
+
})
|
|
66
|
+
}) : null, step.actions?.length ? /*#__PURE__*/_jsx(View, {
|
|
67
|
+
style: styles.actions,
|
|
68
|
+
children: step.actions.map(action => /*#__PURE__*/_jsx(Button, {
|
|
69
|
+
label: action.label,
|
|
70
|
+
leftIcon: action.icon,
|
|
71
|
+
onPress: action.onPress,
|
|
72
|
+
disabled: action.disabled,
|
|
73
|
+
loading: action.loading,
|
|
74
|
+
accessibilityHint: action.accessibilityHint,
|
|
75
|
+
size: "sm",
|
|
76
|
+
variant: "text"
|
|
77
|
+
}, action.id))
|
|
78
|
+
}) : null]
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=ProcessCompactStep.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Pressable","ScrollView","Text","View","Button","Icon","Pulse","Reveal","pressedOpacity","r","useColors","useThemedStyles","PROCESS_STATUS_ICONS","PROCESS_STATUS_LABELS","createStyles","jsx","_jsx","jsxs","_jsxs","ProcessCompactStep","step","expanded","elapsed","onToggle","styles","colors","hasDetails","details","running","status","color","primary","success","error","foregroundMuted","icon","name","size","children","testID","id","accessible","accessibilityRole","undefined","accessibilityLabel","title","accessibilityState","disabled","onPress","style","pressed","compactHeader","opacity","compactTitle","numberOfLines","foregroundSubtle","description","compactDescription","compactDetails","nestedScrollEnabled","keyboardShouldPersistTaps","actions","length","map","action","label","leftIcon","loading","accessibilityHint","variant"],"sourceRoot":"../../../../src","sources":["components/Process/ProcessCompactStep.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,8 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { StyleSheet } from 'react-native';
|
|
4
|
-
import { fw, radius, space, type } from '@unif/react-native-design';
|
|
4
|
+
import { fw, r, radius, space, type } from '@unif/react-native-design';
|
|
5
5
|
export const createStyles = colors => StyleSheet.create({
|
|
6
|
+
compactRoot: {
|
|
7
|
+
gap: space[2]
|
|
8
|
+
},
|
|
9
|
+
compactSteps: {
|
|
10
|
+
gap: space[2]
|
|
11
|
+
},
|
|
12
|
+
compactHeader: {
|
|
13
|
+
flexDirection: 'row',
|
|
14
|
+
alignItems: 'center',
|
|
15
|
+
gap: space[2],
|
|
16
|
+
minHeight: 44,
|
|
17
|
+
paddingVertical: space[1]
|
|
18
|
+
},
|
|
19
|
+
compactTitle: {
|
|
20
|
+
flex: 1,
|
|
21
|
+
minWidth: 0,
|
|
22
|
+
color: colors.foregroundMuted,
|
|
23
|
+
fontSize: type.xs,
|
|
24
|
+
fontWeight: fw.medium
|
|
25
|
+
},
|
|
26
|
+
compactDescription: {
|
|
27
|
+
color: colors.foregroundMuted,
|
|
28
|
+
fontSize: type.xs,
|
|
29
|
+
lineHeight: type.xs * 1.6
|
|
30
|
+
},
|
|
31
|
+
compactDetails: {
|
|
32
|
+
maxHeight: r(180),
|
|
33
|
+
paddingTop: space[3],
|
|
34
|
+
paddingBottom: space[2]
|
|
35
|
+
},
|
|
6
36
|
root: {
|
|
7
37
|
gap: space[4],
|
|
8
38
|
padding: space[5],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","fw","radius","space","type","createStyles","colors","create","
|
|
1
|
+
{"version":3,"names":["StyleSheet","fw","r","radius","space","type","createStyles","colors","create","compactRoot","gap","compactSteps","compactHeader","flexDirection","alignItems","minHeight","paddingVertical","compactTitle","flex","minWidth","color","foregroundMuted","fontSize","xs","fontWeight","medium","compactDescription","lineHeight","compactDetails","maxHeight","paddingTop","paddingBottom","root","padding","borderRadius","xl","borderWidth","borderColor","outline","backgroundColor","surface","heading","headingTitle","foreground","h3","semi","steps","step","borderBottomWidth","hairlineWidth","borderBottomColor","stepLast","stepHeader","stepTitle","sm","status","statusText","xxs","description","elapsed","foregroundSubtle","details","md","surfaceContainer","actions","flexWrap"],"sourceRoot":"../../../../src","sources":["components/Process/styles.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Process.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/Process.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Process.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/Process.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,YAAS,CAAC;AAkCzD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAgI9D"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProcessCompactStep.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/ProcessCompactStep.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAS,CAAC;AAEvD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,+BAyFzB"}
|
|
@@ -1,5 +1,35 @@
|
|
|
1
1
|
import type { ColorTokens } from '@unif/react-native-design';
|
|
2
2
|
export declare const createStyles: (colors: ColorTokens) => Readonly<{
|
|
3
|
+
compactRoot: {
|
|
4
|
+
gap: number;
|
|
5
|
+
};
|
|
6
|
+
compactSteps: {
|
|
7
|
+
gap: number;
|
|
8
|
+
};
|
|
9
|
+
compactHeader: {
|
|
10
|
+
flexDirection: "row";
|
|
11
|
+
alignItems: "center";
|
|
12
|
+
gap: number;
|
|
13
|
+
minHeight: number;
|
|
14
|
+
paddingVertical: number;
|
|
15
|
+
};
|
|
16
|
+
compactTitle: {
|
|
17
|
+
flex: number;
|
|
18
|
+
minWidth: number;
|
|
19
|
+
color: string;
|
|
20
|
+
fontSize: number;
|
|
21
|
+
fontWeight: "500";
|
|
22
|
+
};
|
|
23
|
+
compactDescription: {
|
|
24
|
+
color: string;
|
|
25
|
+
fontSize: number;
|
|
26
|
+
lineHeight: number;
|
|
27
|
+
};
|
|
28
|
+
compactDetails: {
|
|
29
|
+
maxHeight: number;
|
|
30
|
+
paddingTop: number;
|
|
31
|
+
paddingBottom: number;
|
|
32
|
+
};
|
|
3
33
|
root: {
|
|
4
34
|
gap: number;
|
|
5
35
|
padding: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkG5C,CAAC"}
|
|
@@ -12,12 +12,20 @@ export interface ProcessStep {
|
|
|
12
12
|
actions?: readonly ChatAction[];
|
|
13
13
|
}
|
|
14
14
|
export interface ProcessBaseProps {
|
|
15
|
+
/** card 为完整步骤面板;compact 为可整行展开、有界详情的轻量过程展示。 */
|
|
16
|
+
variant?: 'card' | 'compact';
|
|
15
17
|
steps: readonly ProcessStep[];
|
|
16
18
|
title?: string;
|
|
17
19
|
identity?: ReactNode;
|
|
18
20
|
style?: StyleProp<ViewStyle>;
|
|
19
21
|
testID?: string;
|
|
20
22
|
}
|
|
23
|
+
export interface ProcessCompactStepProps {
|
|
24
|
+
step: ProcessStep;
|
|
25
|
+
expanded: boolean;
|
|
26
|
+
elapsed?: string;
|
|
27
|
+
onToggle(): void;
|
|
28
|
+
}
|
|
21
29
|
export interface ProcessControlledExpansion {
|
|
22
30
|
expandedIds: readonly string[];
|
|
23
31
|
onExpandedChange(ids: readonly string[]): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/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,UAAU,EAAE,MAAM,wBAAe,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAC3B,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,iBAAiB,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,gBAAgB,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACvC,gBAAgB,CAAC,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,CAAC,0BAA0B,GAAG,qBAAqB,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/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,UAAU,EAAE,MAAM,wBAAe,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAC3B,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,iBAAiB,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,gBAAgB;IAC/B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,gBAAgB,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACvC,gBAAgB,CAAC,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,CAAC,0BAA0B,GAAG,qBAAqB,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unif/react-native-chat",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.2.0",
|
|
4
4
|
"description": "Unif React Native 聊天组件:消息、输入、附件和交互展示",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"typescript": "^6.0.3"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
|
-
"@unif/react-native-design": "
|
|
99
|
+
"@unif/react-native-design": ">=0.36.0",
|
|
100
100
|
"react": ">=19.2.3 <20.0.0",
|
|
101
101
|
"react-native": ">=0.86.0",
|
|
102
102
|
"react-native-svg": ">=15"
|
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
} from '@unif/react-native-design';
|
|
9
9
|
import { PROCESS_STATUS_ICONS, PROCESS_STATUS_LABELS } from './constants';
|
|
10
10
|
import { createStyles } from './styles';
|
|
11
|
+
import { ProcessCompactStep } from './ProcessCompactStep';
|
|
11
12
|
import type { ProcessProps, ProcessStep } from './types';
|
|
12
13
|
|
|
13
14
|
function idsWithDetails(
|
|
@@ -43,7 +44,7 @@ function formatElapsedMs(elapsedMs: number | undefined): string | undefined {
|
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
export function Process(props: ProcessProps): React.JSX.Element {
|
|
46
|
-
const { steps, title, identity, style, testID } = props;
|
|
47
|
+
const { steps, title, identity, style, testID, variant = 'card' } = props;
|
|
47
48
|
const styles = useThemedStyles(createStyles);
|
|
48
49
|
const colors = useColors();
|
|
49
50
|
const isControlled = props.expandedIds !== undefined;
|
|
@@ -71,18 +72,31 @@ export function Process(props: ProcessProps): React.JSX.Element {
|
|
|
71
72
|
};
|
|
72
73
|
|
|
73
74
|
return (
|
|
74
|
-
<View
|
|
75
|
+
<View
|
|
76
|
+
style={[variant === 'compact' ? styles.compactRoot : styles.root, style]}
|
|
77
|
+
testID={testID}
|
|
78
|
+
>
|
|
75
79
|
{title || identity ? (
|
|
76
80
|
<View style={styles.heading}>
|
|
77
81
|
{identity}
|
|
78
82
|
{title ? <Text style={styles.headingTitle}>{title}</Text> : null}
|
|
79
83
|
</View>
|
|
80
84
|
) : null}
|
|
81
|
-
<View style={styles.steps}>
|
|
85
|
+
<View style={variant === 'compact' ? styles.compactSteps : styles.steps}>
|
|
82
86
|
{steps.map((step, index) => {
|
|
83
87
|
const statusLabel = PROCESS_STATUS_LABELS[step.status];
|
|
84
88
|
const elapsed = formatElapsedMs(step.elapsedMs);
|
|
85
89
|
const isExpanded = expandedIds.includes(step.id);
|
|
90
|
+
if (variant === 'compact')
|
|
91
|
+
return (
|
|
92
|
+
<ProcessCompactStep
|
|
93
|
+
key={step.id}
|
|
94
|
+
step={step}
|
|
95
|
+
expanded={isExpanded}
|
|
96
|
+
elapsed={elapsed}
|
|
97
|
+
onToggle={() => toggleDetails(step.id)}
|
|
98
|
+
/>
|
|
99
|
+
);
|
|
86
100
|
return (
|
|
87
101
|
<View
|
|
88
102
|
key={step.id}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { Pressable, ScrollView, Text, View } from 'react-native';
|
|
2
|
+
import {
|
|
3
|
+
Button,
|
|
4
|
+
Icon,
|
|
5
|
+
Pulse,
|
|
6
|
+
Reveal,
|
|
7
|
+
pressedOpacity,
|
|
8
|
+
r,
|
|
9
|
+
useColors,
|
|
10
|
+
useThemedStyles,
|
|
11
|
+
} from '@unif/react-native-design';
|
|
12
|
+
import { PROCESS_STATUS_ICONS, PROCESS_STATUS_LABELS } from './constants';
|
|
13
|
+
import { createStyles } from './styles';
|
|
14
|
+
import type { ProcessCompactStepProps } from './types';
|
|
15
|
+
|
|
16
|
+
export function ProcessCompactStep({
|
|
17
|
+
step,
|
|
18
|
+
expanded,
|
|
19
|
+
elapsed,
|
|
20
|
+
onToggle,
|
|
21
|
+
}: ProcessCompactStepProps) {
|
|
22
|
+
const styles = useThemedStyles(createStyles);
|
|
23
|
+
const colors = useColors();
|
|
24
|
+
const hasDetails = step.details != null;
|
|
25
|
+
const running = step.status === 'running';
|
|
26
|
+
const color = running
|
|
27
|
+
? colors.primary
|
|
28
|
+
: step.status === 'completed'
|
|
29
|
+
? colors.success
|
|
30
|
+
: step.status === 'failed'
|
|
31
|
+
? colors.error
|
|
32
|
+
: colors.foregroundMuted;
|
|
33
|
+
const icon = (
|
|
34
|
+
<Icon
|
|
35
|
+
name={
|
|
36
|
+
running || step.status === 'completed'
|
|
37
|
+
? 'spark'
|
|
38
|
+
: PROCESS_STATUS_ICONS[step.status]
|
|
39
|
+
}
|
|
40
|
+
size={r(14)}
|
|
41
|
+
color={color}
|
|
42
|
+
/>
|
|
43
|
+
);
|
|
44
|
+
return (
|
|
45
|
+
<View>
|
|
46
|
+
<Pressable
|
|
47
|
+
testID={`process-step-${step.id}-toggle`}
|
|
48
|
+
accessible
|
|
49
|
+
accessibilityRole={hasDetails ? 'button' : undefined}
|
|
50
|
+
accessibilityLabel={`${step.title},${PROCESS_STATUS_LABELS[step.status]}${elapsed ? `,${elapsed}` : ''}`}
|
|
51
|
+
accessibilityState={hasDetails ? { expanded } : undefined}
|
|
52
|
+
disabled={!hasDetails}
|
|
53
|
+
onPress={onToggle}
|
|
54
|
+
style={({ pressed }) => [
|
|
55
|
+
styles.compactHeader,
|
|
56
|
+
pressed && { opacity: pressedOpacity },
|
|
57
|
+
]}
|
|
58
|
+
>
|
|
59
|
+
{running ? <Pulse>{icon}</Pulse> : icon}
|
|
60
|
+
<Text
|
|
61
|
+
style={styles.compactTitle}
|
|
62
|
+
testID={`process-step-title-${step.id}`}
|
|
63
|
+
numberOfLines={1}
|
|
64
|
+
>
|
|
65
|
+
{step.title}
|
|
66
|
+
</Text>
|
|
67
|
+
{elapsed ? <Text style={styles.elapsed}>{elapsed}</Text> : null}
|
|
68
|
+
{hasDetails ? (
|
|
69
|
+
<Icon
|
|
70
|
+
name={expanded ? 'chevron-up' : 'chevron-down'}
|
|
71
|
+
size={r(14)}
|
|
72
|
+
color={colors.foregroundSubtle}
|
|
73
|
+
/>
|
|
74
|
+
) : null}
|
|
75
|
+
</Pressable>
|
|
76
|
+
{step.description ? (
|
|
77
|
+
<Text style={styles.compactDescription}>{step.description}</Text>
|
|
78
|
+
) : null}
|
|
79
|
+
{hasDetails && expanded ? (
|
|
80
|
+
<Reveal>
|
|
81
|
+
<ScrollView
|
|
82
|
+
testID={`process-step-${step.id}-details`}
|
|
83
|
+
style={styles.compactDetails}
|
|
84
|
+
nestedScrollEnabled
|
|
85
|
+
keyboardShouldPersistTaps="handled"
|
|
86
|
+
>
|
|
87
|
+
{step.details}
|
|
88
|
+
</ScrollView>
|
|
89
|
+
</Reveal>
|
|
90
|
+
) : null}
|
|
91
|
+
{step.actions?.length ? (
|
|
92
|
+
<View style={styles.actions}>
|
|
93
|
+
{step.actions.map((action) => (
|
|
94
|
+
<Button
|
|
95
|
+
key={action.id}
|
|
96
|
+
label={action.label}
|
|
97
|
+
leftIcon={action.icon}
|
|
98
|
+
onPress={action.onPress}
|
|
99
|
+
disabled={action.disabled}
|
|
100
|
+
loading={action.loading}
|
|
101
|
+
accessibilityHint={action.accessibilityHint}
|
|
102
|
+
size="sm"
|
|
103
|
+
variant="text"
|
|
104
|
+
/>
|
|
105
|
+
))}
|
|
106
|
+
</View>
|
|
107
|
+
) : null}
|
|
108
|
+
</View>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
@@ -1,9 +1,35 @@
|
|
|
1
1
|
import { StyleSheet } from 'react-native';
|
|
2
|
-
import { fw, radius, space, type } from '@unif/react-native-design';
|
|
2
|
+
import { fw, r, radius, space, type } from '@unif/react-native-design';
|
|
3
3
|
import type { ColorTokens } from '@unif/react-native-design';
|
|
4
4
|
|
|
5
5
|
export const createStyles = (colors: ColorTokens) =>
|
|
6
6
|
StyleSheet.create({
|
|
7
|
+
compactRoot: { gap: space[2] },
|
|
8
|
+
compactSteps: { gap: space[2] },
|
|
9
|
+
compactHeader: {
|
|
10
|
+
flexDirection: 'row',
|
|
11
|
+
alignItems: 'center',
|
|
12
|
+
gap: space[2],
|
|
13
|
+
minHeight: 44,
|
|
14
|
+
paddingVertical: space[1],
|
|
15
|
+
},
|
|
16
|
+
compactTitle: {
|
|
17
|
+
flex: 1,
|
|
18
|
+
minWidth: 0,
|
|
19
|
+
color: colors.foregroundMuted,
|
|
20
|
+
fontSize: type.xs,
|
|
21
|
+
fontWeight: fw.medium,
|
|
22
|
+
},
|
|
23
|
+
compactDescription: {
|
|
24
|
+
color: colors.foregroundMuted,
|
|
25
|
+
fontSize: type.xs,
|
|
26
|
+
lineHeight: type.xs * 1.6,
|
|
27
|
+
},
|
|
28
|
+
compactDetails: {
|
|
29
|
+
maxHeight: r(180),
|
|
30
|
+
paddingTop: space[3],
|
|
31
|
+
paddingBottom: space[2],
|
|
32
|
+
},
|
|
7
33
|
root: {
|
|
8
34
|
gap: space[4],
|
|
9
35
|
padding: space[5],
|
|
@@ -16,6 +16,8 @@ export interface ProcessStep {
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
export interface ProcessBaseProps {
|
|
19
|
+
/** card 为完整步骤面板;compact 为可整行展开、有界详情的轻量过程展示。 */
|
|
20
|
+
variant?: 'card' | 'compact';
|
|
19
21
|
steps: readonly ProcessStep[];
|
|
20
22
|
title?: string;
|
|
21
23
|
identity?: ReactNode;
|
|
@@ -23,6 +25,13 @@ export interface ProcessBaseProps {
|
|
|
23
25
|
testID?: string;
|
|
24
26
|
}
|
|
25
27
|
|
|
28
|
+
export interface ProcessCompactStepProps {
|
|
29
|
+
step: ProcessStep;
|
|
30
|
+
expanded: boolean;
|
|
31
|
+
elapsed?: string;
|
|
32
|
+
onToggle(): void;
|
|
33
|
+
}
|
|
34
|
+
|
|
26
35
|
export interface ProcessControlledExpansion {
|
|
27
36
|
expandedIds: readonly string[];
|
|
28
37
|
onExpandedChange(ids: readonly string[]): void;
|