@0610studio/zs-ui 0.1.8 → 0.2.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.
|
@@ -16,6 +16,7 @@ export type ZSContainerProps = ViewProps & {
|
|
|
16
16
|
behavior?: 'padding' | 'height' | 'position';
|
|
17
17
|
automaticallyAdjustKeyboardInsets?: boolean;
|
|
18
18
|
keyboardScrollExtraOffset?: number;
|
|
19
|
+
translucent?: boolean;
|
|
19
20
|
/**
|
|
20
21
|
* 분할 레이아웃이 적용될 최소 화면 너비 (기본값: 700dp)
|
|
21
22
|
* - 일반 스마트폰: ~430dp
|
|
@@ -42,6 +43,7 @@ declare const ZSContainer: React.ForwardRefExoticComponent<ViewProps & {
|
|
|
42
43
|
behavior?: "padding" | "height" | "position";
|
|
43
44
|
automaticallyAdjustKeyboardInsets?: boolean;
|
|
44
45
|
keyboardScrollExtraOffset?: number;
|
|
46
|
+
translucent?: boolean;
|
|
45
47
|
/**
|
|
46
48
|
* 분할 레이아웃이 적용될 최소 화면 너비 (기본값: 700dp)
|
|
47
49
|
* - 일반 스마트폰: ~430dp
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAgE,MAAM,OAAO,CAAC;AACvG,OAAO,EAAE,SAAS,EAA8E,UAAU,EAAgF,MAAM,cAAc,CAAC;AAK/M,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,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,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,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,CAAC;IAC7C,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,QAAA,MAAM,WAAW;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAgE,MAAM,OAAO,CAAC;AACvG,OAAO,EAAE,SAAS,EAA8E,UAAU,EAAgF,MAAM,cAAc,CAAC;AAK/M,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,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,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,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,CAAC;IAC7C,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,QAAA,MAAM,WAAW;sBA5BG,MAAM;eACb,OAAO;qBACD,MAAM;eACZ,eAAe,GAAG,cAAc;YACnC,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;yBAC7B,OAAO;mBACb,SAAS;sBACN,SAAS;qBACV,SAAS;mCACK,OAAO;uBACnB,KAAK,CAAC,SAAS;6BACT,MAAM;eACpB,SAAS,GAAG,QAAQ,GAAG,UAAU;wCACR,OAAO;gCACf,MAAM;kBACpB,OAAO;IACrB;;;;;OAKG;sBACe,MAAM;iBACX,MAAM;oCA2JnB,CAAC;AAmBH,eAAe,WAAW,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndica
|
|
|
3
3
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
4
4
|
import ScrollViewAtom from '../atoms/ScrollViewAtom';
|
|
5
5
|
import { useTheme } from '../../model/useThemeProvider';
|
|
6
|
-
const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, isLoader = false, statusBarColor, barStyle
|
|
6
|
+
const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, isLoader = false, statusBarColor, barStyle, edges = ['top', 'bottom'], scrollViewDisabled = false, topComponent, bottomComponent, rightComponent, splitBreakpoint = 700, splitRatio = 0.5, showsVerticalScrollIndicator = true, loadingComponent = <ActivityIndicator />, keyboardVerticalOffset, behavior, automaticallyAdjustKeyboardInsets = true, keyboardScrollExtraOffset, translucent, ...props }, forwardedRef) {
|
|
7
7
|
const { palette } = useTheme();
|
|
8
8
|
const [isDelayed, setIsDelayed] = useState(true);
|
|
9
9
|
const positionRef = useRef(0);
|
|
@@ -78,7 +78,8 @@ const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, isLoader
|
|
|
78
78
|
{renderContent()}
|
|
79
79
|
{!isLoader && bottomComponent && bottomComponent}
|
|
80
80
|
</KeyboardAvoidingView>)}
|
|
81
|
-
|
|
81
|
+
|
|
82
|
+
{(barStyle || statusBarColor || translucent) && (<StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base} translucent={translucent}/>)}
|
|
82
83
|
</SafeAreaView>);
|
|
83
84
|
});
|
|
84
85
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
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, useImperativeHandle, forwardRef, useRef } from 'react';\r\nimport { ViewProps, KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, ScrollView, NativeSyntheticEvent, NativeScrollEvent, Keyboard, View, useWindowDimensions } from 'react-native';\r\nimport { SafeAreaView } from 'react-native-safe-area-context';\r\nimport ScrollViewAtom from '../atoms/ScrollViewAtom';\r\nimport { useTheme } from '../../model/useThemeProvider';\r\n\r\nexport type ZSContainerProps = ViewProps & {\r\n backgroundColor?: string;\r\n isLoader?: boolean;\r\n statusBarColor?: string;\r\n barStyle?: 'light-content' | 'dark-content';\r\n edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\r\n scrollViewDisabled?: boolean;\r\n topComponent?: ReactNode;\r\n bottomComponent?: ReactNode;\r\n rightComponent?: ReactNode;\r\n showsVerticalScrollIndicator?: boolean;\r\n loadingComponent?: React.ReactNode;\r\n keyboardVerticalOffset?: number;\r\n behavior?: 'padding' | 'height' | 'position';\r\n automaticallyAdjustKeyboardInsets?: boolean;\r\n keyboardScrollExtraOffset?: number;\r\n /**\r\n * 분할 레이아웃이 적용될 최소 화면 너비 (기본값: 700dp)\r\n * - 일반 스마트폰: ~430dp\r\n * - 폴더블 (펼쳤을 때): ~717dp\r\n * - 태블릿: 600dp ~ 1024dp\r\n */\r\n splitBreakpoint?: number;\r\n splitRatio?: number;\r\n};\r\n\r\nexport type ZSContainerRef = ScrollView;\r\n\r\nconst ZSContainer = forwardRef<ZSContainerRef, ZSContainerProps>(function ZSContainer(\r\n {\r\n backgroundColor,\r\n isLoader = false,\r\n statusBarColor,\r\n barStyle = 'dark-content',\r\n edges = ['top', 'bottom'],\r\n scrollViewDisabled = false,\r\n topComponent,\r\n bottomComponent,\r\n rightComponent,\r\n splitBreakpoint = 700,\r\n splitRatio = 0.5,\r\n showsVerticalScrollIndicator = true,\r\n loadingComponent = <ActivityIndicator />,\r\n keyboardVerticalOffset,\r\n behavior,\r\n automaticallyAdjustKeyboardInsets = true,\r\n keyboardScrollExtraOffset,\r\n ...props\r\n },\r\n forwardedRef\r\n) {\r\n const { palette } = useTheme();\r\n const [isDelayed, setIsDelayed] = useState(true);\r\n const positionRef = useRef<number | null>(0);\r\n const scrollViewRef = useRef<ScrollView>(null);\r\n const lastTouchY = useRef<number | null>(0);\r\n const { width: windowWidth } = useWindowDimensions();\r\n const isSplitView = (windowWidth >= splitBreakpoint) && rightComponent;\r\n\r\n useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, []);\r\n\r\n useEffect(() => {\r\n const timer = setTimeout(() => {\r\n setIsDelayed(false);\r\n }, 200);\r\n return () => clearTimeout(timer);\r\n }, []);\r\n\r\n useEffect(() => {\r\n const keyboardShowSubscription = Keyboard.addListener('keyboardDidShow', (e) => {\r\n if (scrollViewRef.current && keyboardScrollExtraOffset) {\r\n const screenHeight = Dimensions.get('window').height;\r\n const keyboardHeight = e.endCoordinates.height;\r\n const safeAreaBottom = 0;\r\n const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;\r\n\r\n // 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산\r\n const currentScrollPosition = positionRef.current || 0;\r\n const touchPosition = lastTouchY.current || 0;\r\n\r\n const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;\r\n scrollViewRef.current.scrollTo({\r\n y: currentScrollPosition + scrollOffset,\r\n animated: true,\r\n });\r\n }\r\n });\r\n\r\n return () => {\r\n positionRef.current = null;\r\n lastTouchY.current = null;\r\n keyboardShowSubscription.remove();\r\n };\r\n }, [keyboardScrollExtraOffset]);\r\n\r\n const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\r\n if (keyboardScrollExtraOffset) positionRef.current = event.nativeEvent.contentOffset.y;\r\n };\r\n\r\n const handleTouch = (evt: any) => {\r\n if (keyboardScrollExtraOffset) lastTouchY.current = evt.nativeEvent.pageY;\r\n };\r\n\r\n const renderContent = () => {\r\n if (isLoader) return loadingComponent;\r\n\r\n const leftWidth = isSplitView ? windowWidth * splitRatio : windowWidth;\r\n const rightWidth = windowWidth * (1 - splitRatio);\r\n\r\n return (\r\n <View style={[styles.splitContainer]}>\r\n {\r\n scrollViewDisabled ? (\r\n <View style={[styles.flex1, props.style, { width: leftWidth }]}>\r\n {props.children}\r\n </View>\r\n ) : (\r\n <ScrollViewAtom\r\n ref={scrollViewRef}\r\n style={[styles.flex1, { width: leftWidth }]}\r\n contentContainerStyle={styles.scrollContainerStyle}\r\n bounces={false}\r\n overScrollMode=\"never\"\r\n showsVerticalScrollIndicator={showsVerticalScrollIndicator}\r\n keyboardShouldPersistTaps=\"handled\"\r\n automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets}\r\n onScroll={handleScroll}\r\n onTouchStart={handleTouch}\r\n >\r\n <View style={[styles.splitView, props.style, { width: leftWidth }]}>\r\n {props.children}\r\n </View>\r\n </ScrollViewAtom>\r\n )\r\n }\r\n\r\n {rightComponent && isSplitView && (\r\n <View style={[styles.splitView, { width: rightWidth }]}>\r\n {rightComponent}\r\n </View>\r\n )}\r\n </View>\r\n );\r\n };\r\n\r\n return (\r\n <SafeAreaView\r\n style={[\r\n { backgroundColor: backgroundColor || palette.background.base },\r\n styles.flex1,\r\n styles.fullWidth,\r\n ]}\r\n edges={edges}\r\n >\r\n {!isDelayed && (\r\n <KeyboardAvoidingView\r\n style={[styles.flex1, styles.fullWidth]}\r\n behavior={behavior}\r\n keyboardVerticalOffset={keyboardVerticalOffset}\r\n >\r\n {topComponent && topComponent}\r\n {renderContent()}\r\n {!isLoader && bottomComponent && bottomComponent}\r\n </KeyboardAvoidingView>\r\n )}\r\n <StatusBar\r\n barStyle={barStyle}\r\n backgroundColor={statusBarColor || palette.background.base}\r\n />\r\n </SafeAreaView>\r\n );\r\n});\r\n\r\nconst styles = StyleSheet.create({\r\n flex1: { flex: 1 },\r\n fullWidth: { width: Dimensions.get('window').width },\r\n scrollContainerStyle: {\r\n flexGrow: 1,\r\n alignItems: 'center',\r\n },\r\n splitContainer: {\r\n flex: 1,\r\n flexDirection: 'row',\r\n width: '100%',\r\n },\r\n splitView: {\r\n minHeight: '100%',\r\n },\r\n});\r\n\r\nexport default ZSContainer;\r\n"]}
|
|
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, useImperativeHandle, forwardRef, useRef } from 'react';\r\nimport { ViewProps, KeyboardAvoidingView, StatusBar, StyleSheet, Dimensions, ActivityIndicator, ScrollView, NativeSyntheticEvent, NativeScrollEvent, Keyboard, View, useWindowDimensions } from 'react-native';\r\nimport { SafeAreaView } from 'react-native-safe-area-context';\r\nimport ScrollViewAtom from '../atoms/ScrollViewAtom';\r\nimport { useTheme } from '../../model/useThemeProvider';\r\n\r\nexport type ZSContainerProps = ViewProps & {\r\n backgroundColor?: string;\r\n isLoader?: boolean;\r\n statusBarColor?: string;\r\n barStyle?: 'light-content' | 'dark-content';\r\n edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\r\n scrollViewDisabled?: boolean;\r\n topComponent?: ReactNode;\r\n bottomComponent?: ReactNode;\r\n rightComponent?: ReactNode;\r\n showsVerticalScrollIndicator?: boolean;\r\n loadingComponent?: React.ReactNode;\r\n keyboardVerticalOffset?: number;\r\n behavior?: 'padding' | 'height' | 'position';\r\n automaticallyAdjustKeyboardInsets?: boolean;\r\n keyboardScrollExtraOffset?: number;\r\n translucent?: boolean;\r\n /**\r\n * 분할 레이아웃이 적용될 최소 화면 너비 (기본값: 700dp)\r\n * - 일반 스마트폰: ~430dp\r\n * - 폴더블 (펼쳤을 때): ~717dp\r\n * - 태블릿: 600dp ~ 1024dp\r\n */\r\n splitBreakpoint?: number;\r\n splitRatio?: number;\r\n};\r\n\r\nexport type ZSContainerRef = ScrollView;\r\n\r\nconst ZSContainer = forwardRef<ZSContainerRef, ZSContainerProps>(function ZSContainer(\r\n {\r\n backgroundColor,\r\n isLoader = false,\r\n statusBarColor,\r\n barStyle,\r\n edges = ['top', 'bottom'],\r\n scrollViewDisabled = false,\r\n topComponent,\r\n bottomComponent,\r\n rightComponent,\r\n splitBreakpoint = 700,\r\n splitRatio = 0.5,\r\n showsVerticalScrollIndicator = true,\r\n loadingComponent = <ActivityIndicator />,\r\n keyboardVerticalOffset,\r\n behavior,\r\n automaticallyAdjustKeyboardInsets = true,\r\n keyboardScrollExtraOffset,\r\n translucent,\r\n ...props\r\n },\r\n forwardedRef\r\n) {\r\n const { palette } = useTheme();\r\n const [isDelayed, setIsDelayed] = useState(true);\r\n const positionRef = useRef<number | null>(0);\r\n const scrollViewRef = useRef<ScrollView>(null);\r\n const lastTouchY = useRef<number | null>(0);\r\n const { width: windowWidth } = useWindowDimensions();\r\n const isSplitView = (windowWidth >= splitBreakpoint) && rightComponent;\r\n\r\n useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, []);\r\n\r\n useEffect(() => {\r\n const timer = setTimeout(() => {\r\n setIsDelayed(false);\r\n }, 200);\r\n return () => clearTimeout(timer);\r\n }, []);\r\n\r\n useEffect(() => {\r\n const keyboardShowSubscription = Keyboard.addListener('keyboardDidShow', (e) => {\r\n if (scrollViewRef.current && keyboardScrollExtraOffset) {\r\n const screenHeight = Dimensions.get('window').height;\r\n const keyboardHeight = e.endCoordinates.height;\r\n const safeAreaBottom = 0;\r\n const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;\r\n\r\n // 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산\r\n const currentScrollPosition = positionRef.current || 0;\r\n const touchPosition = lastTouchY.current || 0;\r\n\r\n const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;\r\n scrollViewRef.current.scrollTo({\r\n y: currentScrollPosition + scrollOffset,\r\n animated: true,\r\n });\r\n }\r\n });\r\n\r\n return () => {\r\n positionRef.current = null;\r\n lastTouchY.current = null;\r\n keyboardShowSubscription.remove();\r\n };\r\n }, [keyboardScrollExtraOffset]);\r\n\r\n const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\r\n if (keyboardScrollExtraOffset) positionRef.current = event.nativeEvent.contentOffset.y;\r\n };\r\n\r\n const handleTouch = (evt: any) => {\r\n if (keyboardScrollExtraOffset) lastTouchY.current = evt.nativeEvent.pageY;\r\n };\r\n\r\n const renderContent = () => {\r\n if (isLoader) return loadingComponent;\r\n\r\n const leftWidth = isSplitView ? windowWidth * splitRatio : windowWidth;\r\n const rightWidth = windowWidth * (1 - splitRatio);\r\n\r\n return (\r\n <View style={[styles.splitContainer]}>\r\n {\r\n scrollViewDisabled ? (\r\n <View style={[styles.flex1, props.style, { width: leftWidth }]}>\r\n {props.children}\r\n </View>\r\n ) : (\r\n <ScrollViewAtom\r\n ref={scrollViewRef}\r\n style={[styles.flex1, { width: leftWidth }]}\r\n contentContainerStyle={styles.scrollContainerStyle}\r\n bounces={false}\r\n overScrollMode=\"never\"\r\n showsVerticalScrollIndicator={showsVerticalScrollIndicator}\r\n keyboardShouldPersistTaps=\"handled\"\r\n automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets}\r\n onScroll={handleScroll}\r\n onTouchStart={handleTouch}\r\n >\r\n <View style={[styles.splitView, props.style, { width: leftWidth }]}>\r\n {props.children}\r\n </View>\r\n </ScrollViewAtom>\r\n )\r\n }\r\n\r\n {rightComponent && isSplitView && (\r\n <View style={[styles.splitView, { width: rightWidth }]}>\r\n {rightComponent}\r\n </View>\r\n )}\r\n </View>\r\n );\r\n };\r\n\r\n return (\r\n <SafeAreaView\r\n style={[\r\n { backgroundColor: backgroundColor || palette.background.base },\r\n styles.flex1,\r\n styles.fullWidth,\r\n ]}\r\n edges={edges}\r\n >\r\n {!isDelayed && (\r\n <KeyboardAvoidingView\r\n style={[styles.flex1, styles.fullWidth]}\r\n behavior={behavior}\r\n keyboardVerticalOffset={keyboardVerticalOffset}\r\n >\r\n {topComponent && topComponent}\r\n {renderContent()}\r\n {!isLoader && bottomComponent && bottomComponent}\r\n </KeyboardAvoidingView>\r\n )}\r\n\r\n {\r\n (barStyle || statusBarColor || translucent) && (\r\n <StatusBar\r\n barStyle={barStyle}\r\n backgroundColor={statusBarColor || palette.background.base}\r\n translucent={translucent}\r\n />\r\n )\r\n }\r\n </SafeAreaView>\r\n );\r\n});\r\n\r\nconst styles = StyleSheet.create({\r\n flex1: { flex: 1 },\r\n fullWidth: { width: Dimensions.get('window').width },\r\n scrollContainerStyle: {\r\n flexGrow: 1,\r\n alignItems: 'center',\r\n },\r\n splitContainer: {\r\n flex: 1,\r\n flexDirection: 'row',\r\n width: '100%',\r\n },\r\n splitView: {\r\n minHeight: '100%',\r\n },\r\n});\r\n\r\nexport default ZSContainer;\r\n"]}
|