@0610studio/zs-ui 0.3.1 → 0.3.3
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/build/ui/ZSPressable/index.d.ts +4 -4
- package/build/ui/ZSPressable/index.d.ts.map +1 -1
- package/build/ui/ZSPressable/index.js +12 -13
- package/build/ui/ZSPressable/index.js.map +1 -1
- package/build/ui/ZSRadioGroup/index.d.ts +2 -2
- package/build/ui/ZSRadioGroup/index.d.ts.map +1 -1
- package/build/ui/ZSRadioGroup/index.js +33 -24
- package/build/ui/ZSRadioGroup/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ViewProps } from "react-native";
|
|
3
3
|
import type { ShadowLevel } from "../types";
|
|
4
|
+
import { ViewColorOptions } from "../../theme/types";
|
|
4
5
|
interface ZSPressableProps extends ViewProps {
|
|
5
|
-
onPress
|
|
6
|
+
onPress?: (value?: any) => void;
|
|
6
7
|
onLongPress?: (value?: any) => void;
|
|
7
8
|
pressedBackgroundColor?: string;
|
|
8
9
|
pressedBackgroundBorderRadius?: number;
|
|
9
|
-
flex?: number;
|
|
10
|
-
minWidth?: number;
|
|
11
10
|
isAnimation?: boolean;
|
|
12
11
|
elevationLevel?: ShadowLevel;
|
|
13
12
|
fullWidth?: boolean;
|
|
13
|
+
color?: ViewColorOptions;
|
|
14
14
|
}
|
|
15
|
-
declare function ZSPressable({ onPress, onLongPress, isAnimation, pressedBackgroundColor, pressedBackgroundBorderRadius,
|
|
15
|
+
declare function ZSPressable({ onPress, onLongPress, isAnimation, pressedBackgroundColor, pressedBackgroundBorderRadius, elevationLevel, fullWidth, color, ...props }: ZSPressableProps): React.JSX.Element;
|
|
16
16
|
export default ZSPressable;
|
|
17
17
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAkB,EAClB,sBAAmD,EACnD,6BAAkC,EAClC,cAAc,EACd,SAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAgDlB;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { useCallback } from "react";
|
|
2
|
-
import { Pressable } from "react-native";
|
|
2
|
+
import { Pressable, View } from "react-native";
|
|
3
3
|
import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, runOnJS } from "react-native-reanimated";
|
|
4
4
|
import AnimatedWrapper from "../atoms/AnimatedWrapper";
|
|
5
5
|
const DEFAULT_DURATION = { duration: 100 };
|
|
6
|
-
function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)', pressedBackgroundBorderRadius = 16,
|
|
6
|
+
function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)', pressedBackgroundBorderRadius = 16, elevationLevel, fullWidth = false, color, ...props }) {
|
|
7
7
|
const isButtonPress = useSharedValue(0);
|
|
8
8
|
const boxAnimation = useAnimatedStyle(() => {
|
|
9
9
|
const scale = interpolate(isButtonPress.value, [0, 1], [1, 0.96], 'clamp');
|
|
@@ -18,18 +18,17 @@ function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgrou
|
|
|
18
18
|
return {
|
|
19
19
|
backgroundColor: pressed ? pressedBackgroundColor : 'transparent',
|
|
20
20
|
borderRadius: pressedBackgroundBorderRadius,
|
|
21
|
-
flex: fullWidth ? 1 : flex,
|
|
22
|
-
minWidth: minWidth,
|
|
23
|
-
alignSelf: fullWidth ? 'stretch' : undefined,
|
|
24
21
|
};
|
|
25
|
-
}, [pressedBackgroundColor, pressedBackgroundBorderRadius,
|
|
26
|
-
return (<
|
|
27
|
-
<
|
|
28
|
-
<
|
|
29
|
-
{props.
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
22
|
+
}, [pressedBackgroundColor, pressedBackgroundBorderRadius, fullWidth]);
|
|
23
|
+
return (<View style={{ width: fullWidth ? '100%' : undefined }}>
|
|
24
|
+
<Pressable onPress={onPress} onLongPress={onLongPress} style={({ pressed }) => handlePressStyle(pressed)}>
|
|
25
|
+
<Animated.View style={boxAnimation}>
|
|
26
|
+
<AnimatedWrapper color={color} isAnimation={isAnimation} elevationLevel={elevationLevel} style={props.style}>
|
|
27
|
+
{props.children}
|
|
28
|
+
</AnimatedWrapper>
|
|
29
|
+
</Animated.View>
|
|
30
|
+
</Pressable>
|
|
31
|
+
</View>);
|
|
33
32
|
}
|
|
34
33
|
export default ZSPressable;
|
|
35
34
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAC1D,OAAO,QAAQ,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvH,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAIvD,MAAM,gBAAgB,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC;AAa3C,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAW,GAAG,IAAI,EAClB,sBAAsB,GAAG,0BAA0B,EACnD,6BAA6B,GAAG,EAAE,EAClC,cAAc,EACd,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,GAAG,KAAK,EACS;IACjB,MAAM,aAAa,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAExC,MAAM,YAAY,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACzC,MAAM,KAAK,GAAG,WAAW,CACvB,aAAa,CAAC,KAAK,EACnB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,CAAC,EAAE,IAAI,CAAC,EACT,OAAO,CACR,CAAC;QACF,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC;SAC5D,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,OAAgB,EAAE,EAAE;QACnB,OAAO,CAAC,GAAG,EAAE;YACX,aAAa,CAAC,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC,CAAC,EAAE,CAAC;QACL,OAAO;YACL,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,aAAa;YACjE,YAAY,EAAE,6BAA6B;SAC5C,CAAC;IACJ,CAAC,EACD,CAAC,sBAAsB,EAAE,6BAA6B,EAAE,SAAS,CAAC,CACnE,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,MAAe,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAC9D;MAAA,CAAC,SAAS,CACR,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAElD;QAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACjC;UAAA,CAAC,eAAe,CACd,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAEnB;YAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;UAAA,EAAE,eAAe,CACnB;QAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC","sourcesContent":["import React, { useCallback } from \"react\";\nimport { Pressable, View, ViewProps } from \"react-native\";\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming, runOnJS } from \"react-native-reanimated\";\nimport AnimatedWrapper from \"../atoms/AnimatedWrapper\";\nimport type { ShadowLevel } from \"../types\";\nimport { ViewColorOptions } from \"../../theme/types\";\n\nconst DEFAULT_DURATION = { duration: 100 };\n\ninterface ZSPressableProps extends ViewProps {\n onPress?: (value?: any) => void;\n onLongPress?: (value?: any) => void;\n pressedBackgroundColor?: string;\n pressedBackgroundBorderRadius?: number;\n isAnimation?: boolean;\n elevationLevel?: ShadowLevel;\n fullWidth?: boolean;\n color?: ViewColorOptions;\n}\n\nfunction ZSPressable({\n onPress,\n onLongPress,\n isAnimation = true,\n pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)',\n pressedBackgroundBorderRadius = 16,\n elevationLevel,\n fullWidth = false,\n color,\n ...props\n}: ZSPressableProps) {\n const isButtonPress = useSharedValue(0);\n\n const boxAnimation = useAnimatedStyle(() => {\n const scale = interpolate(\n isButtonPress.value,\n [0, 1],\n [1, 0.96],\n 'clamp'\n );\n return {\n transform: [{ scale: withTiming(scale, DEFAULT_DURATION) }],\n };\n }, []);\n\n const handlePressStyle = useCallback(\n (pressed: boolean) => {\n runOnJS(() => {\n isButtonPress.value = pressed ? 1 : 0;\n })();\n return {\n backgroundColor: pressed ? pressedBackgroundColor : 'transparent',\n borderRadius: pressedBackgroundBorderRadius,\n };\n },\n [pressedBackgroundColor, pressedBackgroundBorderRadius, fullWidth]\n );\n\n return (\n <View style={{ width: fullWidth ? '100%' as const : undefined }}>\n <Pressable\n onPress={onPress}\n onLongPress={onLongPress}\n style={({ pressed }) => handlePressStyle(pressed)}\n >\n <Animated.View style={boxAnimation}>\n <AnimatedWrapper\n color={color}\n isAnimation={isAnimation}\n elevationLevel={elevationLevel}\n style={props.style}\n >\n {props.children}\n </AnimatedWrapper>\n </Animated.View>\n </Pressable>\n </View>\n );\n}\n\nexport default ZSPressable;\n"]}
|
|
@@ -2,16 +2,16 @@ import React from 'react';
|
|
|
2
2
|
import { ViewProps } from 'react-native';
|
|
3
3
|
import { RadioOption } from '../types';
|
|
4
4
|
import { ZSTextProps } from '../ZSText';
|
|
5
|
-
declare function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle,
|
|
5
|
+
declare function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled, fullWidth, selectStyle, rowCount, }: {
|
|
6
6
|
options: RadioOption[];
|
|
7
7
|
value?: RadioOption;
|
|
8
8
|
onSelect: (value: RadioOption) => void;
|
|
9
9
|
containerStyle?: ViewProps;
|
|
10
10
|
valueStyle?: ZSTextProps;
|
|
11
11
|
selectStyle?: ZSTextProps;
|
|
12
|
-
minWidth?: number;
|
|
13
12
|
disabled?: boolean;
|
|
14
13
|
fullWidth?: boolean;
|
|
14
|
+
rowCount?: 2 | 3;
|
|
15
15
|
}): React.JSX.Element;
|
|
16
16
|
declare const _default: React.MemoExoticComponent<typeof ZSRadioGroup>;
|
|
17
17
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAKhD,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAKhD,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAgB,EAChB,SAAiB,EACjB,WAAW,EACX,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAClB,qBAgHA;;AAED,wBAAkC"}
|
|
@@ -4,7 +4,7 @@ import ZSText from '../ZSText';
|
|
|
4
4
|
import ZSPressable from '../ZSPressable';
|
|
5
5
|
import { useTheme } from '../../model/useThemeProvider';
|
|
6
6
|
import { SvgCheck } from '../../assets/SvgCheck';
|
|
7
|
-
function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle,
|
|
7
|
+
function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled = false, fullWidth = false, selectStyle, rowCount, }) {
|
|
8
8
|
const { palette } = useTheme();
|
|
9
9
|
const handleSelect = useCallback((option) => {
|
|
10
10
|
if (!disabled) {
|
|
@@ -13,15 +13,24 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, mi
|
|
|
13
13
|
}, [disabled, onSelect]);
|
|
14
14
|
return (<ViewAtom style={{
|
|
15
15
|
flexDirection: fullWidth ? 'column' : 'row',
|
|
16
|
-
gap: 10,
|
|
17
16
|
flexWrap: fullWidth ? 'nowrap' : 'wrap',
|
|
18
17
|
width: '100%',
|
|
18
|
+
marginHorizontal: fullWidth ? 0 : -5,
|
|
19
19
|
}} {...containerStyle}>
|
|
20
|
-
{options.map((option) => {
|
|
20
|
+
{options.map((option, index) => {
|
|
21
21
|
const isSelected = value?.index === option.index;
|
|
22
22
|
const setColor = isSelected ? palette.primary.light : palette.background.neutral;
|
|
23
|
-
return (<
|
|
24
|
-
|
|
23
|
+
return (<ViewAtom key={option.index} style={{
|
|
24
|
+
width: rowCount === 2
|
|
25
|
+
? '50%'
|
|
26
|
+
: rowCount === 3
|
|
27
|
+
? '33.33%'
|
|
28
|
+
: '100%',
|
|
29
|
+
paddingHorizontal: 5,
|
|
30
|
+
paddingBottom: index === options.length - 1 ? 0 : 10,
|
|
31
|
+
}}>
|
|
32
|
+
<ZSPressable onPress={() => handleSelect(option)} pressedBackgroundColor="transparent" fullWidth>
|
|
33
|
+
<ViewAtom style={{
|
|
25
34
|
flexDirection: 'row',
|
|
26
35
|
alignItems: 'center',
|
|
27
36
|
paddingVertical: 12,
|
|
@@ -31,10 +40,9 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, mi
|
|
|
31
40
|
borderRadius: 26,
|
|
32
41
|
borderColor: setColor,
|
|
33
42
|
backgroundColor: isSelected ? palette.background.layer1 : 'transparent',
|
|
34
|
-
flex: 1,
|
|
35
43
|
}}>
|
|
36
|
-
|
|
37
|
-
|
|
44
|
+
{/* fullWidth가 false일 때 동그라미 체크박스 표시 */}
|
|
45
|
+
{!fullWidth && (<ViewAtom style={{
|
|
38
46
|
width: 20,
|
|
39
47
|
height: 20,
|
|
40
48
|
borderWidth: 1,
|
|
@@ -43,21 +51,21 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, mi
|
|
|
43
51
|
justifyContent: 'center',
|
|
44
52
|
alignItems: 'center',
|
|
45
53
|
}}>
|
|
46
|
-
|
|
54
|
+
<ViewAtom style={{
|
|
47
55
|
width: 12,
|
|
48
56
|
height: 12,
|
|
49
57
|
borderRadius: 6,
|
|
50
58
|
backgroundColor: setColor,
|
|
51
59
|
}}/>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
60
|
+
</ViewAtom>)}
|
|
61
|
+
{/* 옵션 텍스트 표시 */}
|
|
62
|
+
<ZSText style={{ paddingHorizontal: 10 }} {...valueStyle}>
|
|
63
|
+
{option.value}
|
|
64
|
+
</ZSText>
|
|
57
65
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
66
|
+
{/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}
|
|
67
|
+
{fullWidth && (<ViewAtom style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
|
|
68
|
+
<ViewAtom style={{
|
|
61
69
|
backgroundColor: isSelected
|
|
62
70
|
? palette.primary.main
|
|
63
71
|
: palette.background.layer2,
|
|
@@ -68,13 +76,14 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, mi
|
|
|
68
76
|
justifyContent: 'center',
|
|
69
77
|
alignItems: 'center',
|
|
70
78
|
}}>
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
79
|
+
{isSelected ? (<SvgCheck size={18}/>) : (<ZSText typo="body.5" {...selectStyle}>
|
|
80
|
+
선택
|
|
81
|
+
</ZSText>)}
|
|
82
|
+
</ViewAtom>
|
|
83
|
+
</ViewAtom>)}
|
|
84
|
+
</ViewAtom>
|
|
85
|
+
</ZSPressable>
|
|
86
|
+
</ViewAtom>);
|
|
78
87
|
})}
|
|
79
88
|
</ViewAtom>);
|
|
80
89
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,MAAuB,MAAM,WAAW,CAAC;AAChD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,SAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, memo } from 'react';\nimport { ViewProps } from 'react-native';\nimport { RadioOption } from '../types';\nimport ViewAtom from '../atoms/ViewAtom';\nimport ZSText, { ZSTextProps } from '../ZSText';\nimport ZSPressable from '../ZSPressable';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { SvgCheck } from '../../assets/SvgCheck';\n\nfunction ZSRadioGroup({\n options,\n value,\n onSelect,\n containerStyle,\n valueStyle,\n disabled = false,\n fullWidth = false,\n selectStyle,\n rowCount,\n}: {\n options: RadioOption[];\n value?: RadioOption;\n onSelect: (value: RadioOption) => void;\n containerStyle?: ViewProps;\n valueStyle?: ZSTextProps;\n selectStyle?: ZSTextProps;\n disabled?: boolean;\n fullWidth?: boolean;\n rowCount?: 2 | 3;\n}) {\n const { palette } = useTheme();\n\n const handleSelect = useCallback((option: RadioOption) => {\n if (!disabled) {\n onSelect(option);\n }\n }, [disabled, onSelect]);\n\n return (\n <ViewAtom\n style={{\n flexDirection: fullWidth ? 'column' : 'row',\n flexWrap: fullWidth ? 'nowrap' : 'wrap',\n width: '100%',\n marginHorizontal: fullWidth ? 0 : -5,\n }}\n {...containerStyle}\n >\n {options.map((option, index) => {\n const isSelected = value?.index === option.index;\n const setColor = isSelected ? palette.primary.light : palette.background.neutral;\n\n return (\n <ViewAtom key={option.index} style={{ \n width: rowCount === 2 \n ? '50%' \n : rowCount === 3 \n ? '33.33%' \n : '100%',\n paddingHorizontal: 5,\n paddingBottom: index === options.length - 1 ? 0 : 10,\n }}>\n <ZSPressable\n onPress={() => handleSelect(option)}\n pressedBackgroundColor=\"transparent\"\n fullWidth\n >\n <ViewAtom\n style={{\n flexDirection: 'row',\n alignItems: 'center',\n paddingVertical: 12,\n borderWidth: 1,\n paddingLeft: 10,\n paddingRight: 15,\n borderRadius: 26,\n borderColor: setColor,\n backgroundColor: isSelected ? palette.background.layer1 : 'transparent',\n }}\n >\n {/* fullWidth가 false일 때 동그라미 체크박스 표시 */}\n {!fullWidth && (\n <ViewAtom\n style={{\n width: 20,\n height: 20,\n borderWidth: 1,\n borderRadius: 10,\n borderColor: setColor,\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n <ViewAtom\n style={{\n width: 12,\n height: 12,\n borderRadius: 6,\n backgroundColor: setColor,\n }}\n />\n </ViewAtom>\n )}\n {/* 옵션 텍스트 표시 */}\n <ZSText style={{ paddingHorizontal: 10 }} {...valueStyle}>\n {option.value}\n </ZSText>\n\n {/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}\n {fullWidth && (\n <ViewAtom style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>\n <ViewAtom\n style={{\n backgroundColor: isSelected\n ? palette.primary.main\n : palette.background.layer2,\n paddingHorizontal: 10,\n borderRadius: 50,\n minWidth: 42,\n minHeight: 24,\n justifyContent: 'center',\n alignItems: 'center',\n }}\n >\n {isSelected ? (\n <SvgCheck size={18} />\n ) : (\n <ZSText typo=\"body.5\" {...selectStyle}>\n 선택\n </ZSText>\n )}\n </ViewAtom>\n </ViewAtom>\n )}\n </ViewAtom>\n </ZSPressable>\n </ViewAtom>\n );\n })}\n </ViewAtom>\n );\n}\n\nexport default memo(ZSRadioGroup);\n"]}
|