@0610studio/zs-ui 0.0.21 → 0.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -19,11 +19,15 @@ npx expo install @react-native-async-storage/async-storage react-native-gesture-
|
|
|
19
19
|
npx expo install @0610studio/zs-ui
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
+
<br />
|
|
23
|
+
|
|
22
24
|
### 사용법
|
|
23
25
|
|
|
24
26
|
사용법은 [문서](https://0610studio.github.io/zs-ui/docs/intro)를 확인해주세요.
|
|
25
27
|
|
|
26
28
|
|
|
29
|
+
<br />
|
|
30
|
+
|
|
27
31
|
### playground
|
|
28
32
|
|
|
29
33
|
[EXPO snack](https://snack.expo.dev/@studio0610/zs-ui-playground)에서 테스트 가능합니다.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAwF,UAAU,EAAE,MAAM,cAAc,CAAC;AAM3I,KAAK,gBAAgB,GAAG,SAAS,GAAG;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;CAC1D,CAAC;AAEF,iBAAS,WAAW,CAAC,EACnB,eAAe,EACf,QAAgB,EAChB,cAAc,EACd,QAAyB,EACzB,KAAyB,EACzB,YAAmB,EACnB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,4BAAmC,EACnC,gBAAwC,EACxC,sBAAsB,EACtB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAwF,UAAU,EAAE,MAAM,cAAc,CAAC;AAM3I,KAAK,gBAAgB,GAAG,SAAS,GAAG;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;CAC1D,CAAC;AAEF,iBAAS,WAAW,CAAC,EACnB,eAAe,EACf,QAAgB,EAChB,cAAc,EACd,QAAyB,EACzB,KAAyB,EACzB,YAAmB,EACnB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,4BAAmC,EACnC,gBAAwC,EACxC,sBAAsB,EACtB,QAAwD,EACxD,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAgDlB;AAQD,eAAe,WAAW,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
|
|
|
4
4
|
import ViewAtom from '../atoms/ViewAtom';
|
|
5
5
|
import ScrollViewAtom from '../atoms/ScrollViewAtom';
|
|
6
6
|
import { useTheme } from '../../model/useThemeProvider';
|
|
7
|
-
function ZSContainer({ backgroundColor, isLoader = false, statusBarColor, barStyle = 'dark-content', edges = ['top', 'bottom'], isScrollView = true, scrollViewRef, topComponent, bottomComponent, showsVerticalScrollIndicator = true, loadingComponent = <ActivityIndicator />, keyboardVerticalOffset, behavior = Platform.OS === 'ios' ? '
|
|
7
|
+
function ZSContainer({ backgroundColor, isLoader = false, statusBarColor, barStyle = 'dark-content', edges = ['top', 'bottom'], isScrollView = true, scrollViewRef, topComponent, bottomComponent, showsVerticalScrollIndicator = true, loadingComponent = <ActivityIndicator />, keyboardVerticalOffset, behavior = Platform.OS === 'ios' ? 'padding' : undefined, ...props }) {
|
|
8
8
|
const { palette } = useTheme(); // 테마 사용
|
|
9
9
|
const [isDelayed, setIsDelayed] = useState(true);
|
|
10
10
|
useEffect(() => {
|
|
@@ -13,13 +13,13 @@ function ZSContainer({ backgroundColor, isLoader = false, statusBarColor, barSty
|
|
|
13
13
|
}, 200);
|
|
14
14
|
return () => clearTimeout(timer);
|
|
15
15
|
}, []);
|
|
16
|
-
return (<SafeAreaView style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1]} edges={edges}>
|
|
16
|
+
return (<SafeAreaView style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1, styles.fullWidth]} edges={edges}>
|
|
17
17
|
<StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base}/>
|
|
18
18
|
|
|
19
|
-
{!isDelayed && (<KeyboardAvoidingView style={styles.flex1} behavior={behavior} keyboardVerticalOffset={keyboardVerticalOffset} enabled>
|
|
19
|
+
{!isDelayed && (<KeyboardAvoidingView style={[styles.flex1, styles.fullWidth]} behavior={behavior} keyboardVerticalOffset={keyboardVerticalOffset} enabled>
|
|
20
20
|
{topComponent && topComponent}
|
|
21
21
|
|
|
22
|
-
{isLoader ? (loadingComponent) : isScrollView ? (<ScrollViewAtom ref={scrollViewRef} style={styles.
|
|
22
|
+
{isLoader ? (loadingComponent) : isScrollView ? (<ScrollViewAtom ref={scrollViewRef} style={styles.fullWidth} bounces={false} contentContainerStyle={styles.scrollContainerStyle} showsVerticalScrollIndicator={showsVerticalScrollIndicator} keyboardShouldPersistTaps="handled">
|
|
23
23
|
<ViewAtom style={[styles.flex1, props.style]}>
|
|
24
24
|
{props.children}
|
|
25
25
|
</ViewAtom>
|
|
@@ -30,8 +30,9 @@ function ZSContainer({ backgroundColor, isLoader = false, statusBarColor, barSty
|
|
|
30
30
|
</SafeAreaView>);
|
|
31
31
|
}
|
|
32
32
|
const styles = StyleSheet.create({
|
|
33
|
-
flex1: { flex: 1
|
|
34
|
-
|
|
33
|
+
flex1: { flex: 1 },
|
|
34
|
+
fullWidth: { width: Dimensions.get('window').width },
|
|
35
|
+
scrollContainerStyle: { flexGrow: 1, alignItems: 'center', width: Dimensions.get('window').width },
|
|
35
36
|
});
|
|
36
37
|
export default ZSContainer;
|
|
37
38
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAa,oBAAoB,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,QAAQ,EAAc,MAAM,cAAc,CAAC;AAC3I,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,cAAc,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAkBxD,SAAS,WAAW,CAAC,EACnB,eAAe,EACf,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,QAAQ,GAAG,cAAc,EACzB,KAAK,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,EACzB,YAAY,GAAG,IAAI,EACnB,aAAa,EACb,YAAY,EACZ,eAAe,EACf,4BAA4B,GAAG,IAAI,EACnC,gBAAgB,GAAG,CAAC,iBAAiB,CAAC,AAAD,EAAG,EACxC,sBAAsB,EACtB,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useState, useEffect } from 'react';\nimport { ViewProps, KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, Platform, ScrollView } from 'react-native';\nimport { SafeAreaView } from 'react-native-safe-area-context';\nimport ViewAtom from '../atoms/ViewAtom';\nimport ScrollViewAtom from '../atoms/ScrollViewAtom';\nimport { useTheme } from '../../model/useThemeProvider';\n\ntype ZSContainerProps = ViewProps & {\n backgroundColor?: string;\n isLoader?: boolean;\n statusBarColor?: string;\n barStyle?: 'light-content' | 'dark-content';\n edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\n isScrollView?: boolean;\n scrollViewRef?: React.RefObject<ScrollView>;\n topComponent?: ReactNode;\n bottomComponent?: ReactNode;\n showsVerticalScrollIndicator?: boolean;\n loadingComponent?: React.ReactNode;\n keyboardVerticalOffset?: number;\n behavior?: \"padding\" | \"height\" | \"position\" | undefined;\n};\n\nfunction ZSContainer({\n backgroundColor,\n isLoader = false,\n statusBarColor,\n barStyle = 'dark-content',\n edges = ['top', 'bottom'],\n isScrollView = true,\n scrollViewRef,\n topComponent,\n bottomComponent,\n showsVerticalScrollIndicator = true,\n loadingComponent = <ActivityIndicator />,\n keyboardVerticalOffset,\n behavior = Platform.OS === 'ios' ? 'padding' : undefined,\n ...props\n}: ZSContainerProps) {\n const { palette } = useTheme(); // 테마 사용\n const [isDelayed, setIsDelayed] = useState(true);\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setIsDelayed(false);\n }, 200);\n return () => clearTimeout(timer);\n }, []);\n\n return (\n <SafeAreaView style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1, styles.fullWidth]} edges={edges}>\n <StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base} />\n\n {!isDelayed && (\n <KeyboardAvoidingView\n style={[styles.flex1, styles.fullWidth]}\n behavior={behavior}\n keyboardVerticalOffset={keyboardVerticalOffset}\n enabled\n >\n {topComponent && topComponent}\n\n {isLoader ? (\n loadingComponent\n ) : isScrollView ? (\n <ScrollViewAtom\n ref={scrollViewRef}\n style={styles.fullWidth}\n bounces={false}\n contentContainerStyle={styles.scrollContainerStyle}\n showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n keyboardShouldPersistTaps=\"handled\"\n >\n <ViewAtom style={[styles.flex1, props.style]}>\n {props.children}\n </ViewAtom>\n </ScrollViewAtom>\n ) : (\n <ViewAtom style={[styles.flex1, props.style]}>{props.children}</ViewAtom>\n )}\n\n {!isLoader && bottomComponent && bottomComponent}\n </KeyboardAvoidingView>\n )}\n </SafeAreaView>\n );\n}\n\nconst styles = StyleSheet.create({\n flex1: { flex: 1 },\n fullWidth: { width: Dimensions.get('window').width },\n scrollContainerStyle: { flexGrow: 1, alignItems: 'center', width: Dimensions.get('window').width },\n});\n\nexport default ZSContainer;\n"]}
|