@dangerousthings/react-native 0.2.1 → 0.4.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/README.md +17 -1
- package/dist/components/DTAccordion.d.ts.map +1 -1
- package/dist/components/DTAccordion.js +7 -7
- package/dist/components/DTAccordion.js.map +1 -1
- package/dist/components/DTBadgeOverlay.d.ts +29 -0
- package/dist/components/DTBadgeOverlay.d.ts.map +1 -0
- package/dist/components/DTBadgeOverlay.js +12 -0
- package/dist/components/DTBadgeOverlay.js.map +1 -0
- package/dist/components/DTButton.d.ts +14 -20
- package/dist/components/DTButton.d.ts.map +1 -1
- package/dist/components/DTButton.js +90 -28
- package/dist/components/DTButton.js.map +1 -1
- package/dist/components/DTCard.d.ts +21 -3
- package/dist/components/DTCard.d.ts.map +1 -1
- package/dist/components/DTCard.js +150 -9
- package/dist/components/DTCard.js.map +1 -1
- package/dist/components/DTCheckbox.d.ts.map +1 -1
- package/dist/components/DTCheckbox.js +21 -8
- package/dist/components/DTCheckbox.js.map +1 -1
- package/dist/components/DTChip.d.ts +2 -2
- package/dist/components/DTChip.d.ts.map +1 -1
- package/dist/components/DTChip.js +6 -11
- package/dist/components/DTChip.js.map +1 -1
- package/dist/components/DTDrawer.d.ts.map +1 -1
- package/dist/components/DTDrawer.js +13 -9
- package/dist/components/DTDrawer.js.map +1 -1
- package/dist/components/DTFeatureLegend.d.ts +41 -0
- package/dist/components/DTFeatureLegend.d.ts.map +1 -0
- package/dist/components/DTFeatureLegend.js +55 -0
- package/dist/components/DTFeatureLegend.js.map +1 -0
- package/dist/components/DTGallery.d.ts +6 -1
- package/dist/components/DTGallery.d.ts.map +1 -1
- package/dist/components/DTGallery.js +27 -8
- package/dist/components/DTGallery.js.map +1 -1
- package/dist/components/DTHexagon.d.ts.map +1 -1
- package/dist/components/DTHexagon.js +3 -1
- package/dist/components/DTHexagon.js.map +1 -1
- package/dist/components/DTLabel.d.ts.map +1 -1
- package/dist/components/DTLabel.js +13 -8
- package/dist/components/DTLabel.js.map +1 -1
- package/dist/components/DTMediaFrame.d.ts.map +1 -1
- package/dist/components/DTMediaFrame.js +14 -7
- package/dist/components/DTMediaFrame.js.map +1 -1
- package/dist/components/DTMenu.d.ts.map +1 -1
- package/dist/components/DTMenu.js +9 -9
- package/dist/components/DTMenu.js.map +1 -1
- package/dist/components/DTMobileFilterOverlay.d.ts +35 -0
- package/dist/components/DTMobileFilterOverlay.d.ts.map +1 -0
- package/dist/components/DTMobileFilterOverlay.js +135 -0
- package/dist/components/DTMobileFilterOverlay.js.map +1 -0
- package/dist/components/DTModal.d.ts.map +1 -1
- package/dist/components/DTModal.js +6 -5
- package/dist/components/DTModal.js.map +1 -1
- package/dist/components/DTProgressBar.d.ts.map +1 -1
- package/dist/components/DTProgressBar.js +7 -7
- package/dist/components/DTProgressBar.js.map +1 -1
- package/dist/components/DTQuantityStepper.d.ts.map +1 -1
- package/dist/components/DTQuantityStepper.js +15 -5
- package/dist/components/DTQuantityStepper.js.map +1 -1
- package/dist/components/DTRadioGroup.d.ts.map +1 -1
- package/dist/components/DTRadioGroup.js +16 -10
- package/dist/components/DTRadioGroup.js.map +1 -1
- package/dist/components/DTSearchInput.d.ts.map +1 -1
- package/dist/components/DTSearchInput.js +7 -7
- package/dist/components/DTSearchInput.js.map +1 -1
- package/dist/components/DTStaggerContainer.d.ts +28 -0
- package/dist/components/DTStaggerContainer.d.ts.map +1 -0
- package/dist/components/DTStaggerContainer.js +28 -0
- package/dist/components/DTStaggerContainer.js.map +1 -0
- package/dist/components/DTSwitch.js +6 -5
- package/dist/components/DTSwitch.js.map +1 -1
- package/dist/components/DTTextInput.d.ts.map +1 -1
- package/dist/components/DTTextInput.js +8 -9
- package/dist/components/DTTextInput.js.map +1 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +8 -1
- package/dist/index.js.map +1 -1
- package/dist/theme/paperTheme.d.ts +8 -0
- package/dist/theme/paperTheme.d.ts.map +1 -1
- package/dist/theme/paperTheme.js +6 -0
- package/dist/theme/paperTheme.js.map +1 -1
- package/dist/utils/animations.d.ts +22 -0
- package/dist/utils/animations.d.ts.map +1 -0
- package/dist/utils/animations.js +62 -0
- package/dist/utils/animations.js.map +1 -0
- package/dist/utils/variantColors.d.ts +6 -4
- package/dist/utils/variantColors.d.ts.map +1 -1
- package/dist/utils/variantColors.js +10 -10
- package/dist/utils/variantColors.js.map +1 -1
- package/package.json +22 -1
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* DT Mobile Filter Overlay
|
|
4
|
+
*
|
|
5
|
+
* Full-screen slide-up overlay for mobile filter menus.
|
|
6
|
+
* Source: dt-shopify-storefront MobileFilterMenu component.
|
|
7
|
+
*/
|
|
8
|
+
import { useRef, useEffect } from 'react';
|
|
9
|
+
import { StyleSheet, View, Pressable, Animated, Dimensions, BackHandler, } from 'react-native';
|
|
10
|
+
import { Text, Portal } from 'react-native-paper';
|
|
11
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
12
|
+
import { getVariantColor } from '../utils/variantColors';
|
|
13
|
+
export function DTMobileFilterOverlay({ visible, onDismiss, heading = 'Filters', activeFilterCount, onClearAll, variant = 'normal', children, style, }) {
|
|
14
|
+
const theme = useDTTheme();
|
|
15
|
+
const accentColor = getVariantColor(theme, variant);
|
|
16
|
+
const slideAnim = useRef(new Animated.Value(0)).current;
|
|
17
|
+
const backdropAnim = useRef(new Animated.Value(0)).current;
|
|
18
|
+
const screenHeight = Dimensions.get('window').height;
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (visible) {
|
|
21
|
+
Animated.parallel([
|
|
22
|
+
Animated.timing(backdropAnim, {
|
|
23
|
+
toValue: 1,
|
|
24
|
+
duration: 200,
|
|
25
|
+
useNativeDriver: true,
|
|
26
|
+
}),
|
|
27
|
+
Animated.timing(slideAnim, {
|
|
28
|
+
toValue: 1,
|
|
29
|
+
duration: 300,
|
|
30
|
+
useNativeDriver: true,
|
|
31
|
+
}),
|
|
32
|
+
]).start();
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
Animated.parallel([
|
|
36
|
+
Animated.timing(backdropAnim, {
|
|
37
|
+
toValue: 0,
|
|
38
|
+
duration: 200,
|
|
39
|
+
useNativeDriver: true,
|
|
40
|
+
}),
|
|
41
|
+
Animated.timing(slideAnim, {
|
|
42
|
+
toValue: 0,
|
|
43
|
+
duration: 200,
|
|
44
|
+
useNativeDriver: true,
|
|
45
|
+
}),
|
|
46
|
+
]).start();
|
|
47
|
+
}
|
|
48
|
+
}, [visible, backdropAnim, slideAnim]);
|
|
49
|
+
// Android back button
|
|
50
|
+
useEffect(() => {
|
|
51
|
+
if (!visible)
|
|
52
|
+
return;
|
|
53
|
+
const handler = BackHandler.addEventListener('hardwareBackPress', () => {
|
|
54
|
+
onDismiss();
|
|
55
|
+
return true;
|
|
56
|
+
});
|
|
57
|
+
return () => handler.remove();
|
|
58
|
+
}, [visible, onDismiss]);
|
|
59
|
+
if (!visible)
|
|
60
|
+
return null;
|
|
61
|
+
const translateY = slideAnim.interpolate({
|
|
62
|
+
inputRange: [0, 1],
|
|
63
|
+
outputRange: [screenHeight, 0],
|
|
64
|
+
});
|
|
65
|
+
return (_jsx(Portal, { children: _jsxs(View, { style: styles.overlay, children: [_jsx(Animated.View, { style: [styles.backdrop, { opacity: backdropAnim }], children: _jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: onDismiss }) }), _jsxs(Animated.View, { style: [
|
|
66
|
+
styles.content,
|
|
67
|
+
{
|
|
68
|
+
backgroundColor: theme.colors.background,
|
|
69
|
+
transform: [{ translateY }],
|
|
70
|
+
maxHeight: screenHeight * 0.85,
|
|
71
|
+
},
|
|
72
|
+
style,
|
|
73
|
+
], children: [_jsxs(View, { style: [styles.header, { backgroundColor: accentColor }], children: [_jsxs(View, { style: styles.headerLeft, children: [_jsx(Text, { variant: "titleMedium", style: [styles.headerText, { color: theme.colors.onPrimary }], children: heading }), activeFilterCount !== undefined && activeFilterCount > 0 && (_jsx(View, { style: [styles.countBadge, { backgroundColor: theme.colors.onPrimary }], children: _jsx(Text, { style: [styles.countText, { color: accentColor }], children: activeFilterCount }) }))] }), _jsx(Pressable, { onPress: onDismiss, hitSlop: 8, children: _jsx(Text, { style: [styles.closeText, { color: theme.colors.onPrimary }], children: "CLOSE" }) })] }), onClearAll && activeFilterCount !== undefined && activeFilterCount > 0 && (_jsx(Pressable, { onPress: onClearAll, style: [styles.clearAll, { borderBottomColor: accentColor }], children: _jsx(Text, { style: [styles.clearAllText, { color: accentColor }], children: "Clear All Filters" }) })), _jsx(View, { style: styles.body, children: children })] })] }) }));
|
|
74
|
+
}
|
|
75
|
+
const styles = StyleSheet.create({
|
|
76
|
+
overlay: {
|
|
77
|
+
...StyleSheet.absoluteFillObject,
|
|
78
|
+
zIndex: 1000,
|
|
79
|
+
justifyContent: 'flex-end',
|
|
80
|
+
},
|
|
81
|
+
backdrop: {
|
|
82
|
+
...StyleSheet.absoluteFillObject,
|
|
83
|
+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
84
|
+
},
|
|
85
|
+
content: {
|
|
86
|
+
borderTopLeftRadius: 0,
|
|
87
|
+
borderTopRightRadius: 0,
|
|
88
|
+
overflow: 'hidden',
|
|
89
|
+
},
|
|
90
|
+
header: {
|
|
91
|
+
flexDirection: 'row',
|
|
92
|
+
alignItems: 'center',
|
|
93
|
+
justifyContent: 'space-between',
|
|
94
|
+
paddingHorizontal: 16,
|
|
95
|
+
paddingVertical: 12,
|
|
96
|
+
},
|
|
97
|
+
headerLeft: {
|
|
98
|
+
flexDirection: 'row',
|
|
99
|
+
alignItems: 'center',
|
|
100
|
+
gap: 8,
|
|
101
|
+
},
|
|
102
|
+
headerText: {
|
|
103
|
+
fontWeight: '700',
|
|
104
|
+
letterSpacing: 0.5,
|
|
105
|
+
},
|
|
106
|
+
countBadge: {
|
|
107
|
+
paddingHorizontal: 8,
|
|
108
|
+
paddingVertical: 2,
|
|
109
|
+
borderRadius: 10,
|
|
110
|
+
minWidth: 24,
|
|
111
|
+
alignItems: 'center',
|
|
112
|
+
},
|
|
113
|
+
countText: {
|
|
114
|
+
fontSize: 12,
|
|
115
|
+
fontWeight: '700',
|
|
116
|
+
},
|
|
117
|
+
closeText: {
|
|
118
|
+
fontSize: 14,
|
|
119
|
+
fontWeight: '600',
|
|
120
|
+
letterSpacing: 1,
|
|
121
|
+
},
|
|
122
|
+
clearAll: {
|
|
123
|
+
paddingHorizontal: 16,
|
|
124
|
+
paddingVertical: 10,
|
|
125
|
+
borderBottomWidth: 1,
|
|
126
|
+
},
|
|
127
|
+
clearAllText: {
|
|
128
|
+
fontSize: 14,
|
|
129
|
+
fontWeight: '600',
|
|
130
|
+
},
|
|
131
|
+
body: {
|
|
132
|
+
flexGrow: 1,
|
|
133
|
+
},
|
|
134
|
+
});
|
|
135
|
+
//# sourceMappingURL=DTMobileFilterOverlay.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DTMobileFilterOverlay.js","sourceRoot":"","sources":["../../src/components/DTMobileFilterOverlay.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTModal.d.ts","sourceRoot":"","sources":["../../src/components/DTModal.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAa,SAAS,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"DTModal.d.ts","sourceRoot":"","sources":["../../src/components/DTModal.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAa,SAAS,EAAE,SAAS,EAA4C,MAAM,cAAc,CAAC;AAGzG,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,wBAAwB,CAAC;AAGtD,UAAU,YAAY;IACpB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAkB,EAClB,QAAQ,EACR,WAAkB,EAClB,YAAY,EACZ,KAAK,GACN,EAAE,YAAY,2CAyCd"}
|
|
@@ -9,9 +9,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
9
9
|
* - Centered overlay with dark backdrop
|
|
10
10
|
* - Content in beveled card container
|
|
11
11
|
*/
|
|
12
|
-
import { StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
|
|
13
|
-
import { Portal, Modal } from 'react-native-paper';
|
|
14
|
-
import {
|
|
12
|
+
import { StyleSheet, KeyboardAvoidingView, Platform, Pressable } from 'react-native';
|
|
13
|
+
import { Portal, Modal, Text } from 'react-native-paper';
|
|
14
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
15
15
|
import { DTCard } from './DTCard';
|
|
16
16
|
/**
|
|
17
17
|
* DT-styled Modal wrapping React Native Paper Modal + Portal
|
|
@@ -27,11 +27,12 @@ import { DTCard } from './DTCard';
|
|
|
27
27
|
* </DTModal>
|
|
28
28
|
*/
|
|
29
29
|
export function DTModal({ visible, onDismiss, title, variant = 'normal', children, dismissable = true, contentStyle, style, }) {
|
|
30
|
+
const theme = useDTTheme();
|
|
30
31
|
return (_jsx(Portal, { children: _jsx(Modal, { visible: visible, onDismiss: onDismiss, dismissable: dismissable, contentContainerStyle: [styles.container, style], style: styles.modal, theme: {
|
|
31
32
|
colors: {
|
|
32
|
-
backdrop:
|
|
33
|
+
backdrop: theme.colors.backdrop,
|
|
33
34
|
},
|
|
34
|
-
}, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: styles.keyboardAvoid, children: _jsx(DTCard, { mode: variant, title: title, showHeader: !!title, contentStyle: contentStyle, children: children }) }) }) }));
|
|
35
|
+
}, children: _jsx(KeyboardAvoidingView, { behavior: Platform.OS === 'ios' ? 'padding' : undefined, style: styles.keyboardAvoid, children: _jsx(DTCard, { mode: variant, title: title, showHeader: !!title, headerRight: dismissable ? (_jsx(Pressable, { onPress: onDismiss, hitSlop: 8, accessibilityLabel: "Close", accessibilityRole: "button", children: _jsx(Text, { style: { color: theme.colors.onPrimary, fontSize: 18, lineHeight: 18 }, children: '\u2715' }) })) : undefined, contentStyle: contentStyle, children: children }) }) }) }));
|
|
35
36
|
}
|
|
36
37
|
const styles = StyleSheet.create({
|
|
37
38
|
modal: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTModal.js","sourceRoot":"","sources":["../../src/components/DTModal.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAC,UAAU,EAAwB,oBAAoB,EAAE,QAAQ,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"DTModal.js","sourceRoot":"","sources":["../../src/components/DTModal.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAC,UAAU,EAAwB,oBAAoB,EAAE,QAAQ,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AACzG,OAAO,EAAC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAuChC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAO,GAAG,QAAQ,EAClB,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,YAAY,EACZ,KAAK,GACQ;IACb,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAE3B,OAAO,CACL,KAAC,MAAM,cACL,KAAC,KAAK,IACJ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,qBAAqB,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,EAChD,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE;gBACL,MAAM,EAAE;oBACN,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,QAAQ;iBAChC;aACF,YACD,KAAC,oBAAoB,IACnB,QAAQ,EAAE,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvD,KAAK,EAAE,MAAM,CAAC,aAAa,YAC3B,KAAC,MAAM,IACL,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,EACnB,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,CACzB,KAAC,SAAS,IACR,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,CAAC,EACV,kBAAkB,EAAC,OAAO,EAC1B,iBAAiB,EAAC,QAAQ,YAC1B,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,YACzE,QAAQ,GACJ,GACG,CACb,CAAC,CAAC,CAAC,SAAS,EACb,YAAY,EAAE,YAAY,YACzB,QAAQ,GACF,GACY,GACjB,GACD,CACV,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE,EAAE;IACT,SAAS,EAAE;QACT,gBAAgB,EAAE,EAAE;KACrB;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/DTProgressBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAGpE,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAGvE,UAAU,kBAAkB;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAkB,EAClB,WAA0B,EAC1B,MAAU,EACV,QAAQ,EAAE,SAAgB,EAC1B,SAAiB,EACjB,KAAK,EACL,KAAK,GACN,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"DTProgressBar.d.ts","sourceRoot":"","sources":["../../src/components/DTProgressBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAGpE,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAGvE,UAAU,kBAAkB;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAkB,EAClB,WAA0B,EAC1B,MAAU,EACV,QAAQ,EAAE,SAAgB,EAC1B,SAAiB,EACjB,KAAK,EACL,KAAK,GACN,EAAE,kBAAkB,2CAqCpB"}
|
|
@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
11
11
|
*/
|
|
12
12
|
import { StyleSheet, View } from 'react-native';
|
|
13
13
|
import { ProgressBar, Text } from 'react-native-paper';
|
|
14
|
-
import {
|
|
14
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
15
15
|
import { getVariantColor } from '../utils/variantColors';
|
|
16
16
|
import { useComponentLayout } from '../utils/useComponentLayout';
|
|
17
17
|
/**
|
|
@@ -27,14 +27,15 @@ import { useComponentLayout } from '../utils/useComponentLayout';
|
|
|
27
27
|
* <DTProgressBar value={0.3} orientation="vertical" height={100} variant="success" />
|
|
28
28
|
*/
|
|
29
29
|
export function DTProgressBar({ value, variant = 'normal', orientation = 'horizontal', height = 4, animated: _animated = true, showLabel = false, color, style, }) {
|
|
30
|
-
const
|
|
30
|
+
const theme = useDTTheme();
|
|
31
|
+
const accentColor = getVariantColor(theme, variant, color);
|
|
31
32
|
const clampedValue = Math.max(0, Math.min(1, value));
|
|
32
33
|
if (orientation === 'vertical') {
|
|
33
|
-
return (_jsx(VerticalProgressBar, { value: clampedValue, color: accentColor, width: height, showLabel: showLabel, style: style }));
|
|
34
|
+
return (_jsx(VerticalProgressBar, { value: clampedValue, color: accentColor, trackColor: theme.colors.surfaceDisabled, width: height, showLabel: showLabel, style: style }));
|
|
34
35
|
}
|
|
35
36
|
return (_jsxs(View, { style: [styles.horizontalContainer, style], children: [_jsx(ProgressBar, { progress: clampedValue, color: accentColor, style: [styles.bar, { height }], theme: {
|
|
36
37
|
colors: {
|
|
37
|
-
surfaceVariant:
|
|
38
|
+
surfaceVariant: theme.colors.surfaceDisabled,
|
|
38
39
|
},
|
|
39
40
|
} }), showLabel && (_jsxs(Text, { style: [styles.label, { color: accentColor }], children: [Math.round(clampedValue * 100), "%"] }))] }));
|
|
40
41
|
}
|
|
@@ -42,10 +43,10 @@ export function DTProgressBar({ value, variant = 'normal', orientation = 'horizo
|
|
|
42
43
|
* Vertical progress bar using measured pixel height instead of
|
|
43
44
|
* percentage strings (which don't animate smoothly in RN).
|
|
44
45
|
*/
|
|
45
|
-
function VerticalProgressBar({ value, color, width, showLabel, style, }) {
|
|
46
|
+
function VerticalProgressBar({ value, color, trackColor, width, showLabel, style, }) {
|
|
46
47
|
const { dimensions, onLayout, hasDimensions } = useComponentLayout();
|
|
47
48
|
const fillHeight = hasDimensions ? dimensions.height * value : 0;
|
|
48
|
-
return (_jsxs(View, { style: [styles.verticalContainer, { width }, style], children: [_jsx(View, { style: styles.verticalTrack, onLayout: onLayout, children: _jsx(View, { style: [
|
|
49
|
+
return (_jsxs(View, { style: [styles.verticalContainer, { width }, style], children: [_jsx(View, { style: [styles.verticalTrack, { backgroundColor: trackColor }], onLayout: onLayout, children: _jsx(View, { style: [
|
|
49
50
|
styles.verticalFill,
|
|
50
51
|
{
|
|
51
52
|
backgroundColor: color,
|
|
@@ -67,7 +68,6 @@ const styles = StyleSheet.create({
|
|
|
67
68
|
verticalTrack: {
|
|
68
69
|
flex: 1,
|
|
69
70
|
width: '100%',
|
|
70
|
-
backgroundColor: DTColors.disabledBackground,
|
|
71
71
|
justifyContent: 'flex-end',
|
|
72
72
|
},
|
|
73
73
|
verticalFill: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTProgressBar.js","sourceRoot":"","sources":["../../src/components/DTProgressBar.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAuB,MAAM,cAAc,CAAC;AACpE,OAAO,EAAC,WAAW,EAAE,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"DTProgressBar.js","sourceRoot":"","sources":["../../src/components/DTProgressBar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTQuantityStepper.d.ts","sourceRoot":"","sources":["../../src/components/DTQuantityStepper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAmB,SAAS,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"DTQuantityStepper.d.ts","sourceRoot":"","sources":["../../src/components/DTQuantityStepper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAA4B,MAAM,cAAc,CAAC;AAI/F,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAGvE,KAAK,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAkClD,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAQ,EACR,IAAQ,EACR,OAAkB,EAClB,QAAgB,EAChB,KAAK,EACL,IAAe,EACf,KAAK,EACL,KAAK,GACN,EAAE,sBAAsB,2CAsGxB"}
|
|
@@ -9,10 +9,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
9
9
|
* - Plus/minus buttons with beveled corners
|
|
10
10
|
* - Quantity display between buttons
|
|
11
11
|
*/
|
|
12
|
-
import { StyleSheet, View, Pressable } from 'react-native';
|
|
12
|
+
import { StyleSheet, View, Pressable, Text as RNText } from 'react-native';
|
|
13
13
|
import { Text } from 'react-native-paper';
|
|
14
14
|
import Svg, { Path } from 'react-native-svg';
|
|
15
|
-
import {
|
|
15
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
16
16
|
import { getVariantColor } from '../utils/variantColors';
|
|
17
17
|
import { buildButtonBevelPath } from '../utils/bevelPaths';
|
|
18
18
|
const sizeConfigs = {
|
|
@@ -48,7 +48,9 @@ const sizeConfigs = {
|
|
|
48
48
|
* <DTQuantityStepper value={qty} onValueChange={setQty} min={1} max={10} variant="emphasis" />
|
|
49
49
|
*/
|
|
50
50
|
export function DTQuantityStepper({ value, onValueChange, min = 0, max = 99, step = 1, variant = 'normal', disabled = false, label, size = 'medium', color, style, }) {
|
|
51
|
-
const
|
|
51
|
+
const theme = useDTTheme();
|
|
52
|
+
const useBevels = theme.custom.bevelMd > 0;
|
|
53
|
+
const accentColor = getVariantColor(theme, variant, color);
|
|
52
54
|
const config = sizeConfigs[size];
|
|
53
55
|
const atMin = value <= min;
|
|
54
56
|
const atMax = value >= max;
|
|
@@ -75,9 +77,17 @@ export function DTQuantityStepper({ value, onValueChange, min = 0, max = 99, ste
|
|
|
75
77
|
const hitSlop = hitSlopSize > 0 ? hitSlopSize : undefined;
|
|
76
78
|
return (_jsx(Pressable, { onPress: onPress, disabled: disabled || isDisabled, hitSlop: hitSlop, style: ({ pressed }) => ({
|
|
77
79
|
opacity: disabled || isDisabled ? 0.3 : pressed ? 0.7 : 1,
|
|
78
|
-
}), children: _jsxs(Svg, { width: s, height: s, viewBox: `0 0 ${s} ${s}`, children: [_jsx(Path, { d: buildButtonBevelPath(s, s, config.bevelSize, borderWidth), fill: "transparent", stroke: accentColor, strokeWidth: borderWidth }), _jsx(Path, { d: iconPath, fill: "none", stroke: accentColor, strokeWidth: sw, strokeLinecap: "round" })] })
|
|
80
|
+
}), children: useBevels ? (_jsxs(Svg, { width: s, height: s, viewBox: `0 0 ${s} ${s}`, children: [_jsx(Path, { d: buildButtonBevelPath(s, s, config.bevelSize, borderWidth), fill: "transparent", stroke: accentColor, strokeWidth: borderWidth }), _jsx(Path, { d: iconPath, fill: "none", stroke: accentColor, strokeWidth: sw, strokeLinecap: "round" })] })) : (_jsx(View, { style: {
|
|
81
|
+
width: s,
|
|
82
|
+
height: s,
|
|
83
|
+
borderWidth,
|
|
84
|
+
borderColor: accentColor,
|
|
85
|
+
borderRadius: theme.custom.radiusSm,
|
|
86
|
+
alignItems: 'center',
|
|
87
|
+
justifyContent: 'center',
|
|
88
|
+
}, children: _jsx(RNText, { style: { color: accentColor, fontSize: s * 0.5, lineHeight: s * 0.6 }, children: type === 'minus' ? '−' : '+' }) })) }));
|
|
79
89
|
};
|
|
80
|
-
return (_jsxs(View, { style: [styles.wrapper, style], children: [label && (_jsx(Text, { style: [styles.label, { color:
|
|
90
|
+
return (_jsxs(View, { style: [styles.wrapper, style], children: [label && (_jsx(Text, { style: [styles.label, { color: theme.colors.onSurface }], children: label })), _jsxs(View, { style: styles.container, children: [renderStepButton('minus', handleDecrement, atMin), _jsx(View, { style: [styles.valueContainer, { minWidth: config.minWidth }], children: _jsx(Text, { style: [
|
|
81
91
|
styles.valueText,
|
|
82
92
|
{ fontSize: config.fontSize, color: accentColor },
|
|
83
93
|
], children: value }) }), renderStepButton('plus', handleIncrement, atMax)] })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTQuantityStepper.js","sourceRoot":"","sources":["../../src/components/DTQuantityStepper.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAwB,SAAS,EAAC,MAAM,cAAc,CAAC;AAC/
|
|
1
|
+
{"version":3,"file":"DTQuantityStepper.js","sourceRoot":"","sources":["../../src/components/DTQuantityStepper.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTRadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/DTRadioGroup.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAI/E,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAcvE,UAAU,iBAAiB;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,OAAkB,EAClB,QAAQ,EACR,KAAK,GACN,EAAE,iBAAiB,2CAMnB;AAID,UAAU,kBAAkB;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;
|
|
1
|
+
{"version":3,"file":"DTRadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/DTRadioGroup.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAI/E,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAcvE,UAAU,iBAAiB;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,OAAkB,EAClB,QAAQ,EACR,KAAK,GACN,EAAE,iBAAiB,2CAMnB;AAID,UAAU,kBAAkB;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAyBD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,KAAK,GACN,EAAE,kBAAkB,2CAmEpB"}
|
|
@@ -14,7 +14,7 @@ import { createContext, useContext } from 'react';
|
|
|
14
14
|
import { StyleSheet, View, Pressable } from 'react-native';
|
|
15
15
|
import { Text } from 'react-native-paper';
|
|
16
16
|
import Svg, { Polygon } from 'react-native-svg';
|
|
17
|
-
import {
|
|
17
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
18
18
|
import { getVariantColor } from '../utils/variantColors';
|
|
19
19
|
const RadioContext = createContext(null);
|
|
20
20
|
/**
|
|
@@ -41,6 +41,14 @@ function hexPoints(cx, cy, r) {
|
|
|
41
41
|
}
|
|
42
42
|
return pts.join(' ');
|
|
43
43
|
}
|
|
44
|
+
/** Convert hex color to rgba with given alpha */
|
|
45
|
+
function hexToRgba(hex, alpha) {
|
|
46
|
+
const clean = hex.replace('#', '');
|
|
47
|
+
const r = parseInt(clean.substring(0, 2), 16);
|
|
48
|
+
const g = parseInt(clean.substring(2, 4), 16);
|
|
49
|
+
const b = parseInt(clean.substring(4, 6), 16);
|
|
50
|
+
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
51
|
+
}
|
|
44
52
|
/**
|
|
45
53
|
* DT-styled RadioOption with hexagonal indicator
|
|
46
54
|
*
|
|
@@ -50,33 +58,31 @@ function hexPoints(cx, cy, r) {
|
|
|
50
58
|
* <DTRadioOption value="option1" label="First option" />
|
|
51
59
|
*/
|
|
52
60
|
export function DTRadioOption({ value, label, description, disabled = false, style, }) {
|
|
61
|
+
const theme = useDTTheme();
|
|
53
62
|
const context = useContext(RadioContext);
|
|
54
63
|
if (!context) {
|
|
55
64
|
throw new Error('DTRadioOption must be used inside DTRadioGroup');
|
|
56
65
|
}
|
|
57
66
|
const { value: selectedValue, onValueChange, variant } = context;
|
|
58
67
|
const isSelected = selectedValue === value;
|
|
59
|
-
const accentColor = getVariantColor(variant);
|
|
60
|
-
const selectedBgColor =
|
|
61
|
-
|
|
62
|
-
: variant === 'emphasis'
|
|
63
|
-
? 'modeEmphasisSelected'
|
|
64
|
-
: 'modeNormal');
|
|
68
|
+
const accentColor = getVariantColor(theme, variant);
|
|
69
|
+
const selectedBgColor = hexToRgba(accentColor, 0.7);
|
|
70
|
+
const unselectedBorderColor = hexToRgba(theme.custom.modeNormal, 0.3);
|
|
65
71
|
const opacity = disabled ? 0.5 : 1;
|
|
66
72
|
return (_jsxs(Pressable, { onPress: () => !disabled && onValueChange(value), style: ({ pressed }) => [
|
|
67
73
|
styles.option,
|
|
68
74
|
{
|
|
69
|
-
borderColor: isSelected ? accentColor :
|
|
75
|
+
borderColor: isSelected ? accentColor : unselectedBorderColor,
|
|
70
76
|
backgroundColor: isSelected ? selectedBgColor : 'transparent',
|
|
71
77
|
opacity: pressed ? 0.7 : opacity,
|
|
72
78
|
},
|
|
73
79
|
style,
|
|
74
80
|
], children: [_jsxs(Svg, { width: INDICATOR_SIZE, height: INDICATOR_SIZE, viewBox: `0 0 ${INDICATOR_SIZE} ${INDICATOR_SIZE}`, children: [_jsx(Polygon, { points: hexPoints(INDICATOR_SIZE / 2, INDICATOR_SIZE / 2, INDICATOR_SIZE / 2 - INDICATOR_BORDER / 2), fill: "transparent", stroke: accentColor, strokeWidth: INDICATOR_BORDER, strokeLinejoin: "miter" }), isSelected && (_jsx(Polygon, { points: hexPoints(INDICATOR_SIZE / 2, INDICATOR_SIZE / 2, INDICATOR_INNER / 2), fill: accentColor }))] }), _jsxs(View, { style: styles.optionText, children: [_jsx(Text, { style: [
|
|
75
81
|
styles.optionLabel,
|
|
76
|
-
{ color: isSelected ?
|
|
82
|
+
{ color: isSelected ? theme.colors.onPrimary : theme.colors.onSurface },
|
|
77
83
|
], children: label }), description && (_jsx(Text, { variant: "bodySmall", style: [
|
|
78
84
|
styles.optionDescription,
|
|
79
|
-
{ color: isSelected ?
|
|
85
|
+
{ color: isSelected ? theme.colors.onPrimary : theme.colors.onSurfaceDisabled },
|
|
80
86
|
], children: description }))] })] }));
|
|
81
87
|
}
|
|
82
88
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTRadioGroup.js","sourceRoot":"","sources":["../../src/components/DTRadioGroup.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,EAAC,UAAU,EAAE,IAAI,EAAwB,SAAS,EAAC,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,GAAG,EAAE,EAAC,OAAO,EAAC,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"DTRadioGroup.js","sourceRoot":"","sources":["../../src/components/DTRadioGroup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTSearchInput.d.ts","sourceRoot":"","sources":["../../src/components/DTSearchInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,cAAc,CAAC;AAGzF,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAEvE,UAAU,kBAAkB;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAyB,EACzB,OAAkB,EAClB,OAAe,EACf,QAAgB,EAChB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,UAAU,GACX,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"DTSearchInput.d.ts","sourceRoot":"","sources":["../../src/components/DTSearchInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,cAAc,CAAC;AAGzF,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAEvE,UAAU,kBAAkB;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAyB,EACzB,OAAkB,EAClB,OAAe,EACf,QAAgB,EAChB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,UAAU,GACX,EAAE,kBAAkB,2CA2DpB"}
|
|
@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
11
11
|
import { useState, useRef, useEffect } from 'react';
|
|
12
12
|
import { StyleSheet, View, Animated } from 'react-native';
|
|
13
13
|
import { Searchbar, ActivityIndicator } from 'react-native-paper';
|
|
14
|
-
import {
|
|
14
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
15
15
|
import { getVariantColor } from '../utils/variantColors';
|
|
16
16
|
/**
|
|
17
17
|
* DT-styled SearchInput wrapping React Native Paper Searchbar
|
|
@@ -23,7 +23,8 @@ import { getVariantColor } from '../utils/variantColors';
|
|
|
23
23
|
* <DTSearchInput value={query} onChangeText={setQuery} loading={isSearching} variant="emphasis" />
|
|
24
24
|
*/
|
|
25
25
|
export function DTSearchInput({ value, onChangeText, onSubmit, placeholder = 'Search...', variant = 'normal', loading = false, disabled = false, autoFocus = false, color, style, inputStyle, }) {
|
|
26
|
-
const
|
|
26
|
+
const theme = useDTTheme();
|
|
27
|
+
const accentColor = getVariantColor(theme, variant, color);
|
|
27
28
|
const [focused, setFocused] = useState(false);
|
|
28
29
|
const focusAnim = useRef(new Animated.Value(0)).current;
|
|
29
30
|
useEffect(() => {
|
|
@@ -35,12 +36,12 @@ export function DTSearchInput({ value, onChangeText, onSubmit, placeholder = 'Se
|
|
|
35
36
|
anim.start();
|
|
36
37
|
return () => anim.stop();
|
|
37
38
|
}, [focused, focusAnim]);
|
|
38
|
-
return (_jsxs(View, { style: [styles.container, style], children: [_jsx(Searchbar, { value: value, onChangeText: onChangeText, onSubmitEditing: onSubmit, onFocus: () => setFocused(true), onBlur: () => setFocused(false), returnKeyType: "search", placeholder: placeholder, placeholderTextColor:
|
|
39
|
+
return (_jsxs(View, { style: [styles.container, style], children: [_jsx(Searchbar, { value: value, onChangeText: onChangeText, onSubmitEditing: onSubmit, onFocus: () => setFocused(true), onBlur: () => setFocused(false), returnKeyType: "search", placeholder: placeholder, placeholderTextColor: theme.colors.onSurfaceDisabled, editable: !disabled, autoFocus: autoFocus, icon: loading
|
|
39
40
|
? () => _jsx(ActivityIndicator, { size: 20, color: accentColor })
|
|
40
|
-
: 'magnify', iconColor: accentColor, inputStyle: [styles.input, { color:
|
|
41
|
+
: 'magnify', iconColor: accentColor, inputStyle: [styles.input, { color: theme.colors.onSurface }, inputStyle], style: [styles.searchbar, { borderColor: accentColor, backgroundColor: theme.colors.background }], rippleColor: accentColor, theme: {
|
|
41
42
|
colors: {
|
|
42
|
-
elevation: { level3:
|
|
43
|
-
onSurface:
|
|
43
|
+
elevation: { level3: theme.colors.background },
|
|
44
|
+
onSurface: theme.colors.onSurface,
|
|
44
45
|
onSurfaceVariant: accentColor,
|
|
45
46
|
},
|
|
46
47
|
roundness: 0,
|
|
@@ -56,7 +57,6 @@ const styles = StyleSheet.create({
|
|
|
56
57
|
container: {},
|
|
57
58
|
searchbar: {
|
|
58
59
|
borderWidth: 2,
|
|
59
|
-
backgroundColor: DTColors.dark,
|
|
60
60
|
elevation: 0,
|
|
61
61
|
},
|
|
62
62
|
input: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTSearchInput.js","sourceRoot":"","sources":["../../src/components/DTSearchInput.tsx"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAClD,OAAO,EAAC,UAAU,EAAE,IAAI,EAAmC,QAAQ,EAAC,MAAM,cAAc,CAAC;AACzF,OAAO,EAAC,SAAS,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"DTSearchInput.js","sourceRoot":"","sources":["../../src/components/DTSearchInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DT Stagger Container
|
|
3
|
+
*
|
|
4
|
+
* Animates children with staggered scale-in entrances.
|
|
5
|
+
* Source: dt-shopify-storefront framer-motion staggered card entrance pattern.
|
|
6
|
+
*/
|
|
7
|
+
import { ReactNode } from 'react';
|
|
8
|
+
import { ViewStyle, StyleProp } from 'react-native';
|
|
9
|
+
interface DTStaggerContainerProps {
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Duration of each child's scale-in animation in ms
|
|
13
|
+
* @default 330
|
|
14
|
+
*/
|
|
15
|
+
duration?: number;
|
|
16
|
+
/**
|
|
17
|
+
* Delay between each child's animation start in ms
|
|
18
|
+
* @default 75
|
|
19
|
+
*/
|
|
20
|
+
interval?: number;
|
|
21
|
+
/**
|
|
22
|
+
* Additional styles for the container
|
|
23
|
+
*/
|
|
24
|
+
style?: StyleProp<ViewStyle>;
|
|
25
|
+
}
|
|
26
|
+
export declare function DTStaggerContainer({ children, duration, interval, style, }: DTStaggerContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export {};
|
|
28
|
+
//# sourceMappingURL=DTStaggerContainer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DTStaggerContainer.d.ts","sourceRoot":"","sources":["../../src/components/DTStaggerContainer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAA8B,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAW,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5D,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAc,EACd,QAAa,EACb,KAAK,GACN,EAAE,uBAAuB,2CAgCzB"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* DT Stagger Container
|
|
4
|
+
*
|
|
5
|
+
* Animates children with staggered scale-in entrances.
|
|
6
|
+
* Source: dt-shopify-storefront framer-motion staggered card entrance pattern.
|
|
7
|
+
*/
|
|
8
|
+
import { Children, useRef, useEffect } from 'react';
|
|
9
|
+
import { Animated } from 'react-native';
|
|
10
|
+
export function DTStaggerContainer({ children, duration = 330, interval = 75, style, }) {
|
|
11
|
+
const childArray = Children.toArray(children);
|
|
12
|
+
const animations = useRef(childArray.map(() => new Animated.Value(0))).current;
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
// Reset animations if child count changes
|
|
15
|
+
while (animations.length < childArray.length) {
|
|
16
|
+
animations.push(new Animated.Value(0));
|
|
17
|
+
}
|
|
18
|
+
const staggered = childArray.map((_, i) => Animated.timing(animations[i], {
|
|
19
|
+
toValue: 1,
|
|
20
|
+
duration,
|
|
21
|
+
delay: i * interval,
|
|
22
|
+
useNativeDriver: true,
|
|
23
|
+
}));
|
|
24
|
+
Animated.parallel(staggered).start();
|
|
25
|
+
}, [childArray.length, duration, interval]);
|
|
26
|
+
return (_jsx(Animated.View, { style: style, children: childArray.map((child, i) => (_jsx(Animated.View, { style: { transform: [{ scale: animations[i] ?? new Animated.Value(1) }] }, children: child }, i))) }));
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=DTStaggerContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DTStaggerContainer.js","sourceRoot":"","sources":["../../src/components/DTStaggerContainer.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,EAAY,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAC,QAAQ,EAAuB,MAAM,cAAc,CAAC;AAoB5D,MAAM,UAAU,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,GAAG,GAAG,EACd,QAAQ,GAAG,EAAE,EACb,KAAK,GACmB;IACxB,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAE/E,SAAS,CAAC,GAAG,EAAE;QACb,0CAA0C;QAC1C,OAAO,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC;YAC7C,UAAU,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACzC,CAAC;QAED,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACxC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;YAC7B,OAAO,EAAE,CAAC;YACV,QAAQ;YACR,KAAK,EAAE,CAAC,GAAG,QAAQ;YACnB,eAAe,EAAE,IAAI;SACtB,CAAC,CACH,CAAC;QACF,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5C,OAAO,CACL,KAAC,QAAQ,CAAC,IAAI,IAAC,KAAK,EAAE,KAAK,YACxB,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAC5B,KAAC,QAAQ,CAAC,IAAI,IAEZ,KAAK,EAAE,EAAC,SAAS,EAAE,CAAC,EAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAC,CAAC,EAAC,YACpE,KAAK,IAFD,CAAC,CAGQ,CACjB,CAAC,GACY,CACjB,CAAC;AACJ,CAAC"}
|