@0610studio/zs-ui 0.5.0 → 0.5.2
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/useStyleSheetCreate.d.ts +1 -1
- package/build/model/useStyleSheetCreate.d.ts.map +1 -1
- package/build/model/useStyleSheetCreate.js.map +1 -1
- package/build/ui/ZSRadioGroup/index.d.ts +2 -3
- package/build/ui/ZSRadioGroup/index.d.ts.map +1 -1
- package/build/ui/ZSRadioGroup/index.js +15 -10
- package/build/ui/ZSRadioGroup/index.js.map +1 -1
- package/build/ui/ZSTextField/index.js +2 -2
- package/build/ui/ZSTextField/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { Theme } from "../theme/types";
|
|
2
|
-
export declare const useStyleSheetCreate: (createStyles: (palette: Theme) =>
|
|
2
|
+
export declare const useStyleSheetCreate: <T extends Record<string, any>>(createStyles: (palette: Theme) => T) => T;
|
|
3
3
|
//# sourceMappingURL=useStyleSheetCreate.d.ts.map
|
|
@@ -1 +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,
|
|
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,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC/D,cAAc,CAAC,OAAO,EAAE,KAAK,KAAK,CAAC,KAClC,CAGF,CAAC"}
|
|
@@ -1 +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,
|
|
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,CACjC,YAAmC,EAChC,EAAE;IACL,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 = <T extends Record<string, any>>(\n createStyles: (palette: Theme) => T\n): T => {\n const { palette } = useTheme();\n return useMemo(() => createStyles(palette), [palette]);\n};"]}
|
|
@@ -2,7 +2,7 @@ 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, disabled,
|
|
5
|
+
declare function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled, selectStyle, rowCount, }: {
|
|
6
6
|
options: RadioOption[];
|
|
7
7
|
value?: RadioOption;
|
|
8
8
|
onSelect: (value: RadioOption) => void;
|
|
@@ -10,8 +10,7 @@ declare function ZSRadioGroup({ options, value, onSelect, containerStyle, valueS
|
|
|
10
10
|
valueStyle?: ZSTextProps;
|
|
11
11
|
selectStyle?: ZSTextProps;
|
|
12
12
|
disabled?: boolean;
|
|
13
|
-
|
|
14
|
-
rowCount?: 2 | 3;
|
|
13
|
+
rowCount?: 1 | 2 | 3;
|
|
15
14
|
}): React.JSX.Element;
|
|
16
15
|
declare const _default: React.MemoExoticComponent<typeof ZSRadioGroup>;
|
|
17
16
|
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,QAAgB,EAChB,
|
|
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,WAAW,EACX,QAAY,GACb,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,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB,qBAqHA;;AAED,wBAAkC"}
|
|
@@ -4,29 +4,34 @@ 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, disabled = false,
|
|
7
|
+
function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled = false, selectStyle, rowCount = 1, }) {
|
|
8
8
|
const { palette } = useTheme();
|
|
9
|
+
const isFullWidth = rowCount === 1;
|
|
9
10
|
const handleSelect = useCallback((option) => {
|
|
10
11
|
if (!disabled) {
|
|
11
12
|
onSelect(option);
|
|
12
13
|
}
|
|
13
14
|
}, [disabled, onSelect]);
|
|
14
15
|
return (<ViewAtom style={{
|
|
15
|
-
flexDirection:
|
|
16
|
-
flexWrap:
|
|
16
|
+
flexDirection: isFullWidth ? 'column' : 'row',
|
|
17
|
+
flexWrap: isFullWidth ? 'nowrap' : 'wrap',
|
|
17
18
|
width: '100%',
|
|
18
19
|
}} {...containerStyle}>
|
|
19
20
|
{options.map((option, index) => {
|
|
20
21
|
const isSelected = value?.index === option.index;
|
|
21
22
|
const setColor = isSelected ? palette.primary.light : palette.background.neutral;
|
|
23
|
+
const colCount = rowCount;
|
|
24
|
+
const isLastCol = (index + 1) % colCount === 0;
|
|
25
|
+
const isLastRow = Math.ceil((index + 1) / colCount) === Math.ceil(options.length / colCount);
|
|
22
26
|
return (<ViewAtom key={option.index} style={{
|
|
23
27
|
width: rowCount === 2
|
|
24
28
|
? '50%'
|
|
25
29
|
: rowCount === 3
|
|
26
30
|
? '33.33%'
|
|
27
31
|
: '100%',
|
|
28
|
-
|
|
29
|
-
|
|
32
|
+
paddingRight: isFullWidth ? 0 : isLastCol ? 0 : 3,
|
|
33
|
+
paddingLeft: isFullWidth ? 0 : isLastCol ? 3 : 0,
|
|
34
|
+
paddingBottom: isLastRow ? 0 : 10,
|
|
30
35
|
}}>
|
|
31
36
|
<ZSPressable onPress={() => handleSelect(option)} pressedBackgroundColor="transparent" fullWidth>
|
|
32
37
|
<ViewAtom style={{
|
|
@@ -36,12 +41,12 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, di
|
|
|
36
41
|
borderWidth: 1,
|
|
37
42
|
paddingLeft: 10,
|
|
38
43
|
paddingRight: 15,
|
|
39
|
-
borderRadius:
|
|
44
|
+
borderRadius: 100,
|
|
40
45
|
borderColor: setColor,
|
|
41
46
|
backgroundColor: isSelected ? palette.background.layer1 : 'transparent',
|
|
42
47
|
}}>
|
|
43
48
|
{/* fullWidth가 false일 때 동그라미 체크박스 표시 */}
|
|
44
|
-
{!
|
|
49
|
+
{!(isFullWidth) && (<ViewAtom style={{
|
|
45
50
|
width: 20,
|
|
46
51
|
height: 20,
|
|
47
52
|
borderWidth: 1,
|
|
@@ -58,18 +63,18 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, di
|
|
|
58
63
|
}}/>
|
|
59
64
|
</ViewAtom>)}
|
|
60
65
|
{/* 옵션 텍스트 표시 */}
|
|
61
|
-
<ZSText style={{
|
|
66
|
+
<ZSText style={{ paddingLeft: 10, paddingRight: 12 }} {...valueStyle}>
|
|
62
67
|
{option.value}
|
|
63
68
|
</ZSText>
|
|
64
69
|
|
|
65
70
|
{/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}
|
|
66
|
-
{
|
|
71
|
+
{isFullWidth && (<ViewAtom style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
|
|
67
72
|
<ViewAtom style={{
|
|
68
73
|
backgroundColor: isSelected
|
|
69
74
|
? palette.primary.main
|
|
70
75
|
: palette.background.layer2,
|
|
71
76
|
paddingHorizontal: 10,
|
|
72
|
-
borderRadius:
|
|
77
|
+
borderRadius: 100,
|
|
73
78
|
minWidth: 42,
|
|
74
79
|
minHeight: 24,
|
|
75
80
|
justifyContent: 'center',
|
|
@@ -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,GAAG,KAAK,EAChB,
|
|
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 selectStyle,\n rowCount = 1,\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 rowCount?: 1 | 2 | 3;\n}) {\n const { palette } = useTheme();\n const isFullWidth = rowCount === 1;\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: isFullWidth ? 'column' : 'row',\n flexWrap: isFullWidth ? '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 const colCount = rowCount;\n const isLastCol = (index + 1) % colCount === 0;\n const isLastRow = Math.ceil((index + 1) / colCount) === Math.ceil(options.length / colCount);\n\n return (\n <ViewAtom key={option.index} style={{\n width: rowCount === 2\n ? '50%'\n : rowCount === 3\n ? '33.33%'\n : '100%',\n paddingRight: isFullWidth ? 0 : isLastCol ? 0 : 3,\n paddingLeft: isFullWidth ? 0 : isLastCol ? 3 : 0,\n paddingBottom: isLastRow ? 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: 100,\n borderColor: setColor,\n backgroundColor: isSelected ? palette.background.layer1 : 'transparent',\n }}\n >\n {/* fullWidth가 false일 때 동그라미 체크박스 표시 */}\n {!(isFullWidth) && (\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={{ paddingLeft: 10, paddingRight: 12 }} {...valueStyle}>\n {option.value}\n </ZSText>\n\n {/* fullWidth가 true일 때 우측에 선택 버튼 표시 */}\n {isFullWidth && (\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: 100,\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"]}
|
|
@@ -24,10 +24,10 @@ function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText,
|
|
|
24
24
|
}, [value, isFocused]);
|
|
25
25
|
// 라벨 애니메이션 스타일
|
|
26
26
|
const animatedLabelStyle = useAnimatedStyle(() => {
|
|
27
|
-
const labelFontSize = interpolate(labelAnimationValue.value, [0, 1], [fontSize + (boxStyle === 'inbox' ?
|
|
27
|
+
const labelFontSize = interpolate(labelAnimationValue.value, [0, 1], [fontSize + (boxStyle === 'inbox' ? 1 : 0), boxStyle === 'inbox' ? 10 : 11], 'clamp');
|
|
28
28
|
const labelTop = interpolate(labelAnimationValue.value, [0, 1], [
|
|
29
29
|
isTextArea ? 12 : 0,
|
|
30
|
-
isTextArea ? -12 : -(boxHeightValue.value / 2) - 1 + (boxStyle === 'inbox' ? 17 :
|
|
30
|
+
isTextArea ? -12 : -(boxHeightValue.value / 2) - 1 + (boxStyle === 'inbox' ? 17 : 2),
|
|
31
31
|
], 'clamp');
|
|
32
32
|
return {
|
|
33
33
|
top: labelTop,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo, useCallback, useState, useEffect } from 'react';\nimport { LayoutChangeEvent, Platform, StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native';\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport ButtonClose from './ui/ButtonClose';\nimport ErrorComponent from './ui/ErrorComponent';\nimport { TypoOptions, TypoStyle, TypoSubStyle } from '../../theme';\nimport { extractStyle } from '../../model/utils';\nimport { useTheme } from '../../model/useThemeProvider';\nimport ViewAtom from '../atoms/ViewAtom';\n\nexport type BoxStyle = 'outline' | 'underline' | 'inbox';\n\nconst iosOffset = Platform.OS === 'ios' ? 8 : 4;\n\ninterface TextFieldProps {\n typo?: TypoOptions;\n status?: 'default' | 'error';\n value: string;\n onChangeText?: (text: string) => void;\n inputBgColor?: string;\n labelBgColor?: string;\n label?: string;\n labelColor?: string;\n placeHolderColor?: string;\n fontSize?: number;\n borderColor?: string;\n borderRadius?: number;\n focusColor?: string;\n errorColor?: string;\n paddingHorizontal?: number;\n borderWidth?: number;\n errorMessage?: string;\n textInputProps?: TextInputProps;\n boxStyle?: BoxStyle;\n innerBoxStyle?: 'top' | 'middle' | 'bottom';\n disabled?: boolean;\n allowFontScaling?: boolean;\n isTextArea?: boolean;\n}\n\nfunction ZSTextField({\n typo = 'body.2',\n status = 'default',\n value,\n onChangeText,\n label = 'Placeholder',\n labelColor,\n placeHolderColor,\n inputBgColor,\n labelBgColor,\n borderWidth = 1.2,\n borderColor,\n focusColor,\n errorColor,\n borderRadius = 14,\n paddingHorizontal = 15,\n errorMessage,\n textInputProps,\n boxStyle = 'outline',\n innerBoxStyle,\n disabled = false,\n allowFontScaling = true,\n isTextArea = false,\n}: TextFieldProps): JSX.Element {\n const { typography, palette } = useTheme();\n const [primaryStyle, subStyle] = typo.split('.') as [TypoStyle, TypoSubStyle];\n let fErrorColor = errorColor || palette.danger.main;\n\n // 폰트 크기 및 패밀리 추출\n const fontSize = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontSize') as number || 17, [typography, primaryStyle, subStyle]);\n const fontFamily = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontFamily') as string || '', [typography, primaryStyle, subStyle]);\n\n // 컴포넌트 상태 관리\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const labelAnimationValue = useSharedValue(0);\n const boxHeightValue = useSharedValue(0);\n\n // 포커스 및 값 변경 시 라벨 애니메이션 트리거\n useEffect(() => {\n labelAnimationValue.value = withTiming(\n value !== '' || isFocused ? 1 : 0,\n { duration: 150 }\n );\n }, [value, isFocused]);\n\n // 라벨 애니메이션 스타일\n const animatedLabelStyle = useAnimatedStyle(() => {\n const labelFontSize = interpolate(\n labelAnimationValue.value,\n [0, 1],\n [fontSize + (boxStyle === 'inbox' ? 2 : 0), boxStyle === 'inbox' ? 11 : 12],\n 'clamp'\n );\n\n const labelTop = interpolate(\n labelAnimationValue.value,\n [0, 1],\n [\n isTextArea ? 12 : 0,\n isTextArea ? -12 : -(boxHeightValue.value / 2) - 1 + (boxStyle === 'inbox' ? 17 : 0),\n ],\n 'clamp'\n );\n\n return {\n top: labelTop,\n fontSize: labelFontSize,\n };\n });\n\n // 레이아웃 핸들러\n const handleLayout = useCallback((event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n if (boxHeightValue.value !== height) boxHeightValue.value = height;\n }, [boxHeightValue]);\n\n // 포커스 및 블러 핸들러\n const handleFocus = useCallback(() => setIsFocused(true), []);\n const handleBlur = useCallback(() => setIsFocused(false), []);\n\n // 상태에 따른 테두리 색상 설정\n const computedBorderColor = useMemo(() => (\n status === 'error' ? fErrorColor : isFocused ? (focusColor || palette.primary.main) : (borderColor || palette.grey[30])\n ), [status, fErrorColor, isFocused, focusColor, borderColor, palette]);\n\n // 상태에 따른 라벨 색상 설정\n const computedLabelColor = useMemo(() => (\n status === 'error' ? fErrorColor : isFocused ? (focusColor || palette.primary.main) : value ? (labelColor || palette.text.secondary) : (placeHolderColor || palette.grey[40])\n ), [status, fErrorColor, isFocused, focusColor, value, placeHolderColor, labelColor, palette]);\n\n // 컨테이너 스타일 정의\n const containerStyle: StyleProp<ViewStyle> = useMemo(() => ({\n width: '100%',\n justifyContent: isTextArea ? 'flex-start' : 'center',\n borderRadius,\n paddingHorizontal,\n backgroundColor: inputBgColor || palette.background.base,\n paddingTop: boxStyle === 'inbox' ? 13 : 0,\n ...(boxStyle === 'outline' || boxStyle === 'inbox' ? { borderWidth } : {}),\n ...(boxStyle === 'underline' ? { borderBottomWidth: borderWidth } : {}),\n ...(innerBoxStyle === 'top' ? { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottomWidth: borderWidth / 2 }\n : innerBoxStyle === 'middle' ? { borderRadius: 0, borderTopWidth: borderWidth / 2, borderBottomWidth: borderWidth / 2 }\n : innerBoxStyle === 'bottom' ? { borderTopLeftRadius: 0, borderTopRightRadius: 0, borderTopWidth: borderWidth / 2 }\n : {}),\n }), [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle, palette]);\n\n // 라벨 스타일 정의\n const labelTextStyle: StyleProp<TextStyle> = useMemo(() => ({\n fontSize,\n left: paddingHorizontal,\n backgroundColor: labelBgColor || palette.background.base,\n paddingHorizontal: boxStyle === 'outline' ? 5 : 0,\n paddingVertical: 2,\n textAlignVertical: 'center',\n fontFamily,\n borderRadius: boxStyle === 'outline' ? 5 : 0,\n overflow: 'hidden',\n }), [fontSize, paddingHorizontal, labelBgColor, boxStyle, fontFamily, palette]);\n\n // 텍스트 변경 핸들러\n const handleTextChange = useCallback((text: string) => {\n if (onChangeText) onChangeText(text);\n }, [onChangeText]);\n\n return (\n <ViewAtom style={{ alignSelf: 'stretch', width: '100%' }}>\n <ViewAtom\n style={[containerStyle, { borderColor: computedBorderColor }]}\n onLayout={handleLayout}\n pointerEvents={disabled ? 'none' : 'auto'}\n >\n <TextInput\n {...textInputProps}\n style={[\n { paddingTop: 7 + iosOffset, paddingBottom: 5 + iosOffset, color: palette.text.base },\n textInputProps?.style,\n { fontSize, width: '100%', paddingRight: 25, fontFamily },\n ]}\n value={value}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChangeText={handleTextChange}\n allowFontScaling={allowFontScaling}\n selectionColor={palette.grey[50]}\n autoCorrect={false}\n spellCheck={false}\n />\n\n <ViewAtom pointerEvents=\"none\" style={{ position: 'absolute' }}>\n <Animated.Text allowFontScaling={allowFontScaling} style={[animatedLabelStyle, labelTextStyle, { color: computedLabelColor }]}>\n {label}\n </Animated.Text>\n </ViewAtom>\n\n {(value && isFocused) && (\n <ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText} />\n )}\n </ViewAtom>\n\n {status === 'error' && errorMessage && (\n <ErrorComponent errorMessage={errorMessage} errorColor={fErrorColor} />\n )}\n </ViewAtom>\n );\n}\n\nexport default React.memo(ZSTextField);\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo, useCallback, useState, useEffect } from 'react';\nimport { LayoutChangeEvent, Platform, StyleProp, TextInput, TextInputProps, TextStyle, ViewStyle } from 'react-native';\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\nimport ButtonClose from './ui/ButtonClose';\nimport ErrorComponent from './ui/ErrorComponent';\nimport { TypoOptions, TypoStyle, TypoSubStyle } from '../../theme';\nimport { extractStyle } from '../../model/utils';\nimport { useTheme } from '../../model/useThemeProvider';\nimport ViewAtom from '../atoms/ViewAtom';\n\nexport type BoxStyle = 'outline' | 'underline' | 'inbox';\n\nconst iosOffset = Platform.OS === 'ios' ? 8 : 4;\n\ninterface TextFieldProps {\n typo?: TypoOptions;\n status?: 'default' | 'error';\n value: string;\n onChangeText?: (text: string) => void;\n inputBgColor?: string;\n labelBgColor?: string;\n label?: string;\n labelColor?: string;\n placeHolderColor?: string;\n fontSize?: number;\n borderColor?: string;\n borderRadius?: number;\n focusColor?: string;\n errorColor?: string;\n paddingHorizontal?: number;\n borderWidth?: number;\n errorMessage?: string;\n textInputProps?: TextInputProps;\n boxStyle?: BoxStyle;\n innerBoxStyle?: 'top' | 'middle' | 'bottom';\n disabled?: boolean;\n allowFontScaling?: boolean;\n isTextArea?: boolean;\n}\n\nfunction ZSTextField({\n typo = 'body.2',\n status = 'default',\n value,\n onChangeText,\n label = 'Placeholder',\n labelColor,\n placeHolderColor,\n inputBgColor,\n labelBgColor,\n borderWidth = 1.2,\n borderColor,\n focusColor,\n errorColor,\n borderRadius = 14,\n paddingHorizontal = 15,\n errorMessage,\n textInputProps,\n boxStyle = 'outline',\n innerBoxStyle,\n disabled = false,\n allowFontScaling = true,\n isTextArea = false,\n}: TextFieldProps): JSX.Element {\n const { typography, palette } = useTheme();\n const [primaryStyle, subStyle] = typo.split('.') as [TypoStyle, TypoSubStyle];\n let fErrorColor = errorColor || palette.danger.main;\n\n // 폰트 크기 및 패밀리 추출\n const fontSize = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontSize') as number || 17, [typography, primaryStyle, subStyle]);\n const fontFamily = useMemo(() => extractStyle(typography[primaryStyle][subStyle], 'fontFamily') as string || '', [typography, primaryStyle, subStyle]);\n\n // 컴포넌트 상태 관리\n const [isFocused, setIsFocused] = useState<boolean>(false);\n const labelAnimationValue = useSharedValue(0);\n const boxHeightValue = useSharedValue(0);\n\n // 포커스 및 값 변경 시 라벨 애니메이션 트리거\n useEffect(() => {\n labelAnimationValue.value = withTiming(\n value !== '' || isFocused ? 1 : 0,\n { duration: 150 }\n );\n }, [value, isFocused]);\n\n // 라벨 애니메이션 스타일\n const animatedLabelStyle = useAnimatedStyle(() => {\n const labelFontSize = interpolate(\n labelAnimationValue.value,\n [0, 1],\n [fontSize + (boxStyle === 'inbox' ? 1 : 0), boxStyle === 'inbox' ? 10 : 11],\n 'clamp'\n );\n\n const labelTop = interpolate(\n labelAnimationValue.value,\n [0, 1],\n [\n isTextArea ? 12 : 0,\n isTextArea ? -12 : -(boxHeightValue.value / 2) - 1 + (boxStyle === 'inbox' ? 17 : 2),\n ],\n 'clamp'\n );\n\n return {\n top: labelTop,\n fontSize: labelFontSize,\n };\n });\n\n // 레이아웃 핸들러\n const handleLayout = useCallback((event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n if (boxHeightValue.value !== height) boxHeightValue.value = height;\n }, [boxHeightValue]);\n\n // 포커스 및 블러 핸들러\n const handleFocus = useCallback(() => setIsFocused(true), []);\n const handleBlur = useCallback(() => setIsFocused(false), []);\n\n // 상태에 따른 테두리 색상 설정\n const computedBorderColor = useMemo(() => (\n status === 'error' ? fErrorColor : isFocused ? (focusColor || palette.primary.main) : (borderColor || palette.grey[30])\n ), [status, fErrorColor, isFocused, focusColor, borderColor, palette]);\n\n // 상태에 따른 라벨 색상 설정\n const computedLabelColor = useMemo(() => (\n status === 'error' ? fErrorColor : isFocused ? (focusColor || palette.primary.main) : value ? (labelColor || palette.text.secondary) : (placeHolderColor || palette.grey[40])\n ), [status, fErrorColor, isFocused, focusColor, value, placeHolderColor, labelColor, palette]);\n\n // 컨테이너 스타일 정의\n const containerStyle: StyleProp<ViewStyle> = useMemo(() => ({\n width: '100%',\n justifyContent: isTextArea ? 'flex-start' : 'center',\n borderRadius,\n paddingHorizontal,\n backgroundColor: inputBgColor || palette.background.base,\n paddingTop: boxStyle === 'inbox' ? 13 : 0,\n ...(boxStyle === 'outline' || boxStyle === 'inbox' ? { borderWidth } : {}),\n ...(boxStyle === 'underline' ? { borderBottomWidth: borderWidth } : {}),\n ...(innerBoxStyle === 'top' ? { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, borderBottomWidth: borderWidth / 2 }\n : innerBoxStyle === 'middle' ? { borderRadius: 0, borderTopWidth: borderWidth / 2, borderBottomWidth: borderWidth / 2 }\n : innerBoxStyle === 'bottom' ? { borderTopLeftRadius: 0, borderTopRightRadius: 0, borderTopWidth: borderWidth / 2 }\n : {}),\n }), [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle, palette]);\n\n // 라벨 스타일 정의\n const labelTextStyle: StyleProp<TextStyle> = useMemo(() => ({\n fontSize,\n left: paddingHorizontal,\n backgroundColor: labelBgColor || palette.background.base,\n paddingHorizontal: boxStyle === 'outline' ? 5 : 0,\n paddingVertical: 2,\n textAlignVertical: 'center',\n fontFamily,\n borderRadius: boxStyle === 'outline' ? 5 : 0,\n overflow: 'hidden',\n }), [fontSize, paddingHorizontal, labelBgColor, boxStyle, fontFamily, palette]);\n\n // 텍스트 변경 핸들러\n const handleTextChange = useCallback((text: string) => {\n if (onChangeText) onChangeText(text);\n }, [onChangeText]);\n\n return (\n <ViewAtom style={{ alignSelf: 'stretch', width: '100%' }}>\n <ViewAtom\n style={[containerStyle, { borderColor: computedBorderColor }]}\n onLayout={handleLayout}\n pointerEvents={disabled ? 'none' : 'auto'}\n >\n <TextInput\n {...textInputProps}\n style={[\n { paddingTop: 7 + iosOffset, paddingBottom: 5 + iosOffset, color: palette.text.base },\n textInputProps?.style,\n { fontSize, width: '100%', paddingRight: 25, fontFamily },\n ]}\n value={value}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChangeText={handleTextChange}\n allowFontScaling={allowFontScaling}\n selectionColor={palette.grey[50]}\n autoCorrect={false}\n spellCheck={false}\n />\n\n <ViewAtom pointerEvents=\"none\" style={{ position: 'absolute' }}>\n <Animated.Text allowFontScaling={allowFontScaling} style={[animatedLabelStyle, labelTextStyle, { color: computedLabelColor }]}>\n {label}\n </Animated.Text>\n </ViewAtom>\n\n {(value && isFocused) && (\n <ButtonClose marginTop={isTextArea ? 13 : undefined} onChangeText={onChangeText} />\n )}\n </ViewAtom>\n\n {status === 'error' && errorMessage && (\n <ErrorComponent errorMessage={errorMessage} errorColor={fErrorColor} />\n )}\n </ViewAtom>\n );\n}\n\nexport default React.memo(ZSTextField);\n"]}
|