@0610studio/zs-ui 0.3.2 → 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/build/model/index.d.ts +2 -1
- package/build/model/index.d.ts.map +1 -1
- package/build/model/index.js +2 -1
- package/build/model/index.js.map +1 -1
- package/build/model/useStyleSheetCreate.d.ts +3 -0
- package/build/model/useStyleSheetCreate.d.ts.map +1 -0
- package/build/model/useStyleSheetCreate.js +7 -0
- package/build/model/useStyleSheetCreate.js.map +1 -0
- 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 +32 -24
- package/build/ui/ZSRadioGroup/index.js.map +1 -1
- package/package.json +1 -1
package/build/model/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { OverlayProvider } from "./useOverlayProvider";
|
|
2
2
|
import { ThemeProvider, useTheme } from "./useThemeProvider";
|
|
3
|
-
|
|
3
|
+
import { useStyleSheetCreate } from "./useStyleSheetCreate";
|
|
4
|
+
export { useTheme, OverlayProvider, ThemeProvider, useStyleSheetCreate };
|
|
4
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACb,mBAAmB,EACpB,CAAA"}
|
package/build/model/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { OverlayProvider } from "./useOverlayProvider";
|
|
2
2
|
import { ThemeProvider, useTheme } from "./useThemeProvider";
|
|
3
|
-
|
|
3
|
+
import { useStyleSheetCreate } from "./useStyleSheetCreate";
|
|
4
|
+
export { useTheme, OverlayProvider, ThemeProvider, useStyleSheetCreate };
|
|
4
5
|
//# sourceMappingURL=index.js.map
|
package/build/model/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACb,mBAAmB,EACpB,CAAA","sourcesContent":["import { OverlayProvider } from \"./useOverlayProvider\"; \nimport { ThemeProvider, useTheme } from \"./useThemeProvider\";\nimport { useStyleSheetCreate } from \"./useStyleSheetCreate\";\n\nexport {\n useTheme,\n OverlayProvider,\n ThemeProvider,\n useStyleSheetCreate\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStyleSheetCreate.d.ts","sourceRoot":"","sources":["../../src/model/useStyleSheetCreate.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,eAAO,MAAM,mBAAmB,GAAI,cAAc,CAAC,OAAO,EAAE,KAAK,KAAK,GAAG,QAGxE,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { useTheme } from "./useThemeProvider";
|
|
3
|
+
export const useStyleSheetCreate = (createStyles) => {
|
|
4
|
+
const { palette } = useTheme();
|
|
5
|
+
return useMemo(() => createStyles(palette), [palette]);
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=useStyleSheetCreate.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStyleSheetCreate.js","sourceRoot":"","sources":["../../src/model/useStyleSheetCreate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,YAAqC,EAAE,EAAE;IAC3E,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC/B,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AACzD,CAAC,CAAC","sourcesContent":["import { useMemo } from \"react\";\nimport { Theme } from \"../theme/types\";\nimport { useTheme } from \"./useThemeProvider\";\n\nexport const useStyleSheetCreate = (createStyles: (palette: Theme) => any) => {\n const { palette } = useTheme();\n return useMemo(() => createStyles(palette), [palette]);\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,qBA+GA;;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,23 @@ 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%',
|
|
19
18
|
}} {...containerStyle}>
|
|
20
|
-
{options.map((option) => {
|
|
19
|
+
{options.map((option, index) => {
|
|
21
20
|
const isSelected = value?.index === option.index;
|
|
22
21
|
const setColor = isSelected ? palette.primary.light : palette.background.neutral;
|
|
23
|
-
return (<
|
|
24
|
-
|
|
22
|
+
return (<ViewAtom key={option.index} style={{
|
|
23
|
+
width: rowCount === 2
|
|
24
|
+
? '50%'
|
|
25
|
+
: rowCount === 3
|
|
26
|
+
? '33.33%'
|
|
27
|
+
: '100%',
|
|
28
|
+
paddingHorizontal: 5,
|
|
29
|
+
paddingBottom: index === options.length - 1 ? 0 : 10,
|
|
30
|
+
}}>
|
|
31
|
+
<ZSPressable onPress={() => handleSelect(option)} pressedBackgroundColor="transparent" fullWidth>
|
|
32
|
+
<ViewAtom style={{
|
|
25
33
|
flexDirection: 'row',
|
|
26
34
|
alignItems: 'center',
|
|
27
35
|
paddingVertical: 12,
|
|
@@ -31,10 +39,9 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, mi
|
|
|
31
39
|
borderRadius: 26,
|
|
32
40
|
borderColor: setColor,
|
|
33
41
|
backgroundColor: isSelected ? palette.background.layer1 : 'transparent',
|
|
34
|
-
flex: 1,
|
|
35
42
|
}}>
|
|
36
|
-
|
|
37
|
-
|
|
43
|
+
{/* fullWidth가 false일 때 동그라미 체크박스 표시 */}
|
|
44
|
+
{!fullWidth && (<ViewAtom style={{
|
|
38
45
|
width: 20,
|
|
39
46
|
height: 20,
|
|
40
47
|
borderWidth: 1,
|
|
@@ -43,21 +50,21 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, mi
|
|
|
43
50
|
justifyContent: 'center',
|
|
44
51
|
alignItems: 'center',
|
|
45
52
|
}}>
|
|
46
|
-
|
|
53
|
+
<ViewAtom style={{
|
|
47
54
|
width: 12,
|
|
48
55
|
height: 12,
|
|
49
56
|
borderRadius: 6,
|
|
50
57
|
backgroundColor: setColor,
|
|
51
58
|
}}/>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
59
|
+
</ViewAtom>)}
|
|
60
|
+
{/* 옵션 텍스트 표시 */}
|
|
61
|
+
<ZSText style={{ paddingHorizontal: 10 }} {...valueStyle}>
|
|
62
|
+
{option.value}
|
|
63
|
+
</ZSText>
|
|
57
64
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
65
|
+
{/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}
|
|
66
|
+
{fullWidth && (<ViewAtom style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
|
|
67
|
+
<ViewAtom style={{
|
|
61
68
|
backgroundColor: isSelected
|
|
62
69
|
? palette.primary.main
|
|
63
70
|
: palette.background.layer2,
|
|
@@ -68,13 +75,14 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, mi
|
|
|
68
75
|
justifyContent: 'center',
|
|
69
76
|
alignItems: 'center',
|
|
70
77
|
}}>
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
+
{isSelected ? (<SvgCheck size={18}/>) : (<ZSText typo="body.5" {...selectStyle}>
|
|
79
|
+
선택
|
|
80
|
+
</ZSText>)}
|
|
81
|
+
</ViewAtom>
|
|
82
|
+
</ViewAtom>)}
|
|
83
|
+
</ViewAtom>
|
|
84
|
+
</ZSPressable>
|
|
85
|
+
</ViewAtom>);
|
|
78
86
|
})}
|
|
79
87
|
</ViewAtom>);
|
|
80
88
|
}
|
|
@@ -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 }}\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"]}
|