@0610studio/zs-ui 0.0.39 → 0.0.41
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.
|
@@ -20,7 +20,7 @@ function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgrou
|
|
|
20
20
|
borderRadius: pressedBackgroundBorderRadius,
|
|
21
21
|
flex: fullWidth ? 1 : flex,
|
|
22
22
|
minWidth: minWidth,
|
|
23
|
-
alignSelf: fullWidth ? 'stretch' :
|
|
23
|
+
alignSelf: fullWidth ? 'stretch' : undefined,
|
|
24
24
|
};
|
|
25
25
|
}, [pressedBackgroundColor, pressedBackgroundBorderRadius, flex, minWidth, fullWidth]);
|
|
26
26
|
return (<Pressable onPress={onPress} onLongPress={onLongPress} style={({ pressed }) => handlePressStyle(pressed)}>
|
|
@@ -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,EAAiB,SAAS,EAAa,MAAM,cAAc,CAAC;AACnE,OAAO,QAAQ,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvH,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAGvD,MAAM,gBAAgB,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC;AAc3C,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAW,GAAG,IAAI,EAClB,sBAAsB,GAAG,0BAA0B,EACnD,6BAA6B,GAAG,EAAE,EAClC,IAAI,EACJ,QAAQ,EACR,cAAc,GAAG,CAAC,EAClB,SAAS,GAAG,KAAK,EACjB,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;YAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;YAC1B,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,
|
|
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,EAAiB,SAAS,EAAa,MAAM,cAAc,CAAC;AACnE,OAAO,QAAQ,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvH,OAAO,eAAe,MAAM,0BAA0B,CAAC;AAGvD,MAAM,gBAAgB,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC;AAc3C,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAW,GAAG,IAAI,EAClB,sBAAsB,GAAG,0BAA0B,EACnD,6BAA6B,GAAG,EAAE,EAClC,IAAI,EACJ,QAAQ,EACR,cAAc,GAAG,CAAC,EAClB,SAAS,GAAG,KAAK,EACjB,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;YAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;YAC1B,QAAQ,EAAE,QAAQ;YAClB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAsC;SAC1E,CAAC;IACJ,CAAC,EACD,CAAC,sBAAsB,EAAE,6BAA6B,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,CACnF,CAAC;IAEF,OAAO,CACL,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;MAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACjC;QAAA,CAAC,eAAe,CACd,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAEnB;UAAA,CAAC,KAAK,CAAC,QAAQ,CACjB;QAAA,EAAE,eAAe,CACnB;MAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC","sourcesContent":["import React, { useCallback } from \"react\";\nimport { FlexAlignType, Pressable, 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\";\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 flex?: number;\n minWidth?: number;\n isAnimation?: boolean;\n elevationLevel?: ShadowLevel;\n fullWidth?: boolean;\n}\n\nfunction ZSPressable({\n onPress,\n onLongPress,\n isAnimation = true,\n pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)',\n pressedBackgroundBorderRadius = 16,\n flex,\n minWidth,\n elevationLevel = 0,\n fullWidth = false,\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 flex: fullWidth ? 1 : flex,\n minWidth: minWidth,\n alignSelf: fullWidth ? 'stretch' : undefined as FlexAlignType | undefined,\n };\n },\n [pressedBackgroundColor, pressedBackgroundBorderRadius, flex, minWidth, fullWidth]\n );\n\n return (\n <Pressable\n onPress={onPress}\n onLongPress={onLongPress}\n style={({ pressed }) => handlePressStyle(pressed)}\n >\n <Animated.View style={boxAnimation}>\n <AnimatedWrapper\n isAnimation={isAnimation}\n elevationLevel={elevationLevel}\n style={props.style}\n >\n {props.children}\n </AnimatedWrapper>\n </Animated.View>\n </Pressable>\n );\n}\n\nexport default ZSPressable;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAqD,cAAc,EAAwB,MAAM,cAAc,CAAC;AAIvH,OAAO,EAAE,WAAW,EAA2B,MAAM,aAAa,CAAC;AAKnE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAIzD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,MAAkB,EAClB,KAAK,EACL,YAAY,EACZ,KAAqB,EACrB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAqD,cAAc,EAAwB,MAAM,cAAc,CAAC;AAIvH,OAAO,EAAE,WAAW,EAA2B,MAAM,aAAa,CAAC;AAKnE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AAIzD,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iBAAS,WAAW,CAAC,EACnB,IAAe,EACf,MAAkB,EAClB,KAAK,EACL,YAAY,EACZ,KAAqB,EACrB,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAiB,EACjB,WAAW,EACX,UAAU,EACV,UAAsB,EACtB,YAAiB,EACjB,iBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,QAAoB,EACpB,aAAa,EACb,QAAgB,EAChB,gBAAuB,EACvB,UAAkB,GACnB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA4I9B;;AAED,wBAAuC"}
|
|
@@ -7,7 +7,7 @@ import { extractStyle } from '../../model/utils';
|
|
|
7
7
|
import { useTheme } from '../../model/useThemeProvider';
|
|
8
8
|
import ViewAtom from '../atoms/ViewAtom';
|
|
9
9
|
const iosOffset = Platform.OS === 'ios' ? 8 : 4;
|
|
10
|
-
function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText, label = 'Placeholder', labelColor
|
|
10
|
+
function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText, label = 'Placeholder', labelColor, placeHolderColor, inputBgColor, labelBgColor, borderWidth = 1.2, borderColor, focusColor, errorColor = '#FF3B30', borderRadius = 14, paddingHorizontal = 15, errorMessage, textInputProps, boxStyle = 'outline', innerBoxStyle, disabled = false, allowFontScaling = true, isTextArea = false, }) {
|
|
11
11
|
const { typography, palette } = useTheme();
|
|
12
12
|
const [primaryStyle, subStyle] = typo.split('.');
|
|
13
13
|
// 폰트 크기 및 패밀리 추출
|
|
@@ -43,16 +43,16 @@ function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText,
|
|
|
43
43
|
const handleFocus = useCallback(() => setIsFocused(true), []);
|
|
44
44
|
const handleBlur = useCallback(() => setIsFocused(false), []);
|
|
45
45
|
// 상태에 따른 테두리 색상 설정
|
|
46
|
-
const computedBorderColor = useMemo(() => (status === 'error' ? errorColor : isFocused ? focusColor : borderColor), [status, errorColor, isFocused, focusColor, borderColor]);
|
|
46
|
+
const computedBorderColor = useMemo(() => (status === 'error' ? errorColor : isFocused ? (focusColor || palette.primary.main) : (borderColor || palette.grey[30])), [status, errorColor, isFocused, focusColor, borderColor, palette]);
|
|
47
47
|
// 상태에 따른 라벨 색상 설정
|
|
48
|
-
const computedLabelColor = useMemo(() => (status === 'error' ? errorColor : isFocused ? focusColor : value ? labelColor : placeHolderColor), [status, errorColor, isFocused, focusColor, value, placeHolderColor, labelColor]);
|
|
48
|
+
const computedLabelColor = useMemo(() => (status === 'error' ? errorColor : isFocused ? (focusColor || palette.primary.main) : value ? (labelColor || palette.text.secondary) : (placeHolderColor || palette.grey[40])), [status, errorColor, isFocused, focusColor, value, placeHolderColor, labelColor, palette]);
|
|
49
49
|
// 컨테이너 스타일 정의
|
|
50
50
|
const containerStyle = useMemo(() => ({
|
|
51
51
|
width: '100%',
|
|
52
52
|
justifyContent: isTextArea ? 'flex-start' : 'center',
|
|
53
53
|
borderRadius,
|
|
54
54
|
paddingHorizontal,
|
|
55
|
-
backgroundColor: inputBgColor,
|
|
55
|
+
backgroundColor: inputBgColor || palette.background.base,
|
|
56
56
|
paddingTop: boxStyle === 'inbox' ? 13 : 0,
|
|
57
57
|
...(boxStyle === 'outline' || boxStyle === 'inbox' ? { borderWidth } : {}),
|
|
58
58
|
...(boxStyle === 'underline' ? { borderBottomWidth: borderWidth } : {}),
|
|
@@ -60,19 +60,19 @@ function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText,
|
|
|
60
60
|
: innerBoxStyle === 'middle' ? { borderRadius: 0, borderTopWidth: borderWidth / 2, borderBottomWidth: borderWidth / 2 }
|
|
61
61
|
: innerBoxStyle === 'bottom' ? { borderTopLeftRadius: 0, borderTopRightRadius: 0, borderTopWidth: borderWidth / 2 }
|
|
62
62
|
: {}),
|
|
63
|
-
}), [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle]);
|
|
63
|
+
}), [isTextArea, borderRadius, paddingHorizontal, inputBgColor, borderWidth, boxStyle, innerBoxStyle, palette]);
|
|
64
64
|
// 라벨 스타일 정의
|
|
65
65
|
const labelTextStyle = useMemo(() => ({
|
|
66
66
|
fontSize,
|
|
67
67
|
left: paddingHorizontal,
|
|
68
|
-
backgroundColor: labelBgColor,
|
|
68
|
+
backgroundColor: labelBgColor || palette.background.base,
|
|
69
69
|
paddingHorizontal: boxStyle === 'outline' ? 5 : 0,
|
|
70
70
|
paddingVertical: 2,
|
|
71
71
|
textAlignVertical: 'center',
|
|
72
72
|
fontFamily,
|
|
73
73
|
borderRadius: boxStyle === 'outline' ? 5 : 0,
|
|
74
74
|
overflow: 'hidden',
|
|
75
|
-
}), [fontSize, paddingHorizontal, labelBgColor, boxStyle, fontFamily]);
|
|
75
|
+
}), [fontSize, paddingHorizontal, labelBgColor, boxStyle, fontFamily, palette]);
|
|
76
76
|
// 텍스트 변경 핸들러
|
|
77
77
|
const handleTextChange = useCallback((text) => {
|
|
78
78
|
if (onChangeText)
|
|
@@ -81,7 +81,7 @@ function ZSTextField({ typo = 'body.2', status = 'default', value, onChangeText,
|
|
|
81
81
|
return (<>
|
|
82
82
|
<ViewAtom style={[containerStyle, { borderColor: computedBorderColor }]} onLayout={handleLayout} pointerEvents={disabled ? 'none' : 'auto'}>
|
|
83
83
|
<TextInput {...textInputProps} style={[
|
|
84
|
-
{ paddingTop: 7 + iosOffset, paddingBottom: 5 + iosOffset },
|
|
84
|
+
{ paddingTop: 7 + iosOffset, paddingBottom: 5 + iosOffset, color: palette.text.primary },
|
|
85
85
|
textInputProps?.style,
|
|
86
86
|
{ fontSize, width: '100%', paddingRight: 25, fontFamily },
|
|
87
87
|
]} value={value} onFocus={handleFocus} onBlur={handleBlur} onChangeText={handleTextChange} allowFontScaling={allowFontScaling} selectionColor={palette.grey[50]} autoCorrect={false} spellCheck={false}/>
|
|
@@ -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 = '#757575',\n placeHolderColor = '#B1B1B1',\n inputBgColor = 'white',\n labelBgColor = 'white',\n borderWidth = 1.2,\n borderColor = '#E7EDF0',\n focusColor = '#007AFF',\n errorColor = '#FF3B30',\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\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' ? errorColor : isFocused ? focusColor : borderColor\n ), [status, errorColor, isFocused, focusColor, borderColor]);\n\n // 상태에 따른 라벨 색상 설정\n const computedLabelColor = useMemo(() => (\n status === 'error' ? errorColor : isFocused ? focusColor : value ? labelColor : placeHolderColor\n ), [status, errorColor, isFocused, focusColor, value, placeHolderColor, labelColor]);\n\n // 컨테이너 스타일 정의\n const containerStyle: StyleProp<ViewStyle> = useMemo(() => ({\n width: '100%',\n justifyContent: isTextArea ? 'flex-start' : 'center',\n borderRadius,\n paddingHorizontal,\n backgroundColor: inputBgColor,\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]);\n\n // 라벨 스타일 정의\n const labelTextStyle: StyleProp<TextStyle> = useMemo(() => ({\n fontSize,\n left: paddingHorizontal,\n backgroundColor: labelBgColor,\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]);\n\n // 텍스트 변경 핸들러\n const handleTextChange = useCallback((text: string) => {\n if (onChangeText) onChangeText(text);\n }, [onChangeText]);\n\n return (\n <>\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 },\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={errorColor} fontFamily={fontFamily} />\n )}\n </>\n );\n}\n\nexport default React.memo(ZSTextField);\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSTextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAqB,QAAQ,EAAa,SAAS,EAAwC,MAAM,cAAc,CAAC;AACvH,OAAO,QAAQ,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC9G,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AAIzC,MAAM,SAAS,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AA4BhD,SAAS,WAAW,CAAC,EACnB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,SAAS,EAClB,KAAK,EACL,YAAY,EACZ,KAAK,GAAG,aAAa,EACrB,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,WAAW,GAAG,GAAG,EACjB,WAAW,EACX,UAAU,EACV,UAAU,GAAG,SAAS,EACtB,YAAY,GAAG,EAAE,EACjB,iBAAiB,GAAG,EAAE,EACtB,YAAY,EACZ,cAAc,EACd,QAAQ,GAAG,SAAS,EACpB,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,gBAAgB,GAAG,IAAI,EACvB,UAAU,GAAG,KAAK,GACH;IACf,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC3C,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAA8B,CAAC;IAE9E,iBAAiB;IACjB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAW,IAAI,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IACnJ,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAW,IAAI,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvJ,aAAa;IACb,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,mBAAmB,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,cAAc,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAEzC,4BAA4B;IAC5B,SAAS,CAAC,GAAG,EAAE;QACb,mBAAmB,CAAC,KAAK,GAAG,UAAU,CACpC,KAAK,KAAK,EAAE,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAClB,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,eAAe;IACf,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,GAAG,EAAE;QAC/C,MAAM,aAAa,GAAG,WAAW,CAC/B,mBAAmB,CAAC,KAAK,EACzB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN,CAAC,QAAQ,GAAG,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,OAAO,CACR,CAAC;QAEF,MAAM,QAAQ,GAAG,WAAW,CAC1B,mBAAmB,CAAC,KAAK,EACzB,CAAC,CAAC,EAAE,CAAC,CAAC,EACN;YACE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACnB,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;SACrF,EACD,OAAO,CACR,CAAC;QAEF,OAAO;YACL,GAAG,EAAE,QAAQ;YACb,QAAQ,EAAE,aAAa;SACxB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,WAAW;IACX,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAAwB,EAAE,EAAE;QAC5D,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QAC5C,IAAI,cAAc,CAAC,KAAK,KAAK,MAAM;YAAE,cAAc,CAAC,KAAK,GAAG,MAAM,CAAC;IACrE,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,eAAe;IACf,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAE9D,mBAAmB;IACnB,MAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CACxC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CACvH,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAEtE,kBAAkB;IAClB,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CACvC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAC7K,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE9F,cAAc;IACd,MAAM,cAAc,GAAyB,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC1D,KAAK,EAAE,MAAM;QACb,cAAc,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ;QACpD,YAAY;QACZ,iBAAiB;QACjB,eAAe,EAAE,YAAY,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI;QACxD,UAAU,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACzC,GAAG,CAAC,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC1E,GAAG,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACvE,GAAG,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,sBAAsB,EAAE,CAAC,EAAE,uBAAuB,EAAE,CAAC,EAAE,iBAAiB,EAAE,WAAW,GAAG,CAAC,EAAE;YACzH,CAAC,CAAC,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,cAAc,EAAE,WAAW,GAAG,CAAC,EAAE,iBAAiB,EAAE,WAAW,GAAG,CAAC,EAAE;gBACrH,CAAC,CAAC,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,mBAAmB,EAAE,CAAC,EAAE,oBAAoB,EAAE,CAAC,EAAE,cAAc,EAAE,WAAW,GAAG,CAAC,EAAE;oBACjH,CAAC,CAAC,EAAE,CAAC;KACZ,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhH,YAAY;IACZ,MAAM,cAAc,GAAyB,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC1D,QAAQ;QACR,IAAI,EAAE,iBAAiB;QACvB,eAAe,EAAE,YAAY,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI;QACxD,iBAAiB,EAAE,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACjD,eAAe,EAAE,CAAC;QAClB,iBAAiB,EAAE,QAAQ;QAC3B,UAAU;QACV,YAAY,EAAE,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5C,QAAQ,EAAE,QAAQ;KACnB,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhF,aAAa;IACb,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;QACpD,IAAI,YAAY;YAAE,YAAY,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,EACE;MAAA,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAC9D,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAE1C;QAAA,CAAC,SAAS,CACR,IAAI,cAAc,CAAC,CACnB,KAAK,CAAC,CAAC;YACL,EAAE,UAAU,EAAE,CAAC,GAAG,SAAS,EAAE,aAAa,EAAE,CAAC,GAAG,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YACxF,cAAc,EAAE,KAAK;YACrB,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,EAAE,UAAU,EAAE;SAC1D,CAAC,CACF,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,MAAM,CAAC,CAAC,UAAU,CAAC,CACnB,YAAY,CAAC,CAAC,gBAAgB,CAAC,CAC/B,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,cAAc,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CACjC,WAAW,CAAC,CAAC,KAAK,CAAC,CACnB,UAAU,CAAC,CAAC,KAAK,CAAC,EAGpB;;QAAA,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAC7D;UAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,kBAAkB,EAAE,cAAc,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAC5H;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;QAAA,EAAE,QAAQ,CAEV;;QAAA,CAAC,CAAC,KAAK,IAAI,SAAS,CAAC,IAAI,CACvB,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC,EAAG,CACpF,CACH;MAAA,EAAE,QAAQ,CAEV;;MAAA,CAAC,MAAM,KAAK,OAAO,IAAI,YAAY,IAAI,CACrC,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAC/F,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC","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 = '#FF3B30',\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\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' ? errorColor : isFocused ? (focusColor || palette.primary.main) : (borderColor || palette.grey[30])\n ), [status, errorColor, isFocused, focusColor, borderColor, palette]);\n\n // 상태에 따른 라벨 색상 설정\n const computedLabelColor = useMemo(() => (\n status === 'error' ? errorColor : isFocused ? (focusColor || palette.primary.main) : value ? (labelColor || palette.text.secondary) : (placeHolderColor || palette.grey[40])\n ), [status, errorColor, 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 <>\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.primary },\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={errorColor} fontFamily={fontFamily} />\n )}\n </>\n );\n}\n\nexport default React.memo(ZSTextField);\n"]}
|