@0610studio/zs-ui 0.6.0 → 0.7.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/README.md +3 -5
- package/build/index.d.ts +11 -2
- package/build/index.d.ts.map +1 -1
- package/build/index.js +11 -2
- package/build/index.js.map +1 -1
- package/build/overlay/AlertOverlay/index.js +1 -1
- package/build/overlay/AlertOverlay/index.js.map +1 -1
- package/build/overlay/Modality/index.js +1 -1
- package/build/overlay/Modality/index.js.map +1 -1
- package/build/overlay/PopOver/PopOverButton.js +1 -1
- package/build/overlay/PopOver/PopOverButton.js.map +1 -1
- package/build/overlay/SnackbarNotify/ui/SnackbarItem.js +1 -1
- package/build/overlay/SnackbarNotify/ui/SnackbarItem.js.map +1 -1
- package/build/ui/ZSBottomCta/index.d.ts.map +1 -1
- package/build/ui/ZSBottomCta/index.js +3 -1
- package/build/ui/ZSBottomCta/index.js.map +1 -1
- package/build/ui/ZSContainer/index.d.ts +1 -13
- package/build/ui/ZSContainer/index.d.ts.map +1 -1
- package/build/ui/ZSContainer/index.js +24 -58
- package/build/ui/ZSContainer/index.js.map +1 -1
- package/build/ui/ZSContainer/ui/VariantView.js +5 -4
- package/build/ui/ZSContainer/ui/VariantView.js.map +1 -1
- package/package.json +2 -2
- package/build/ui/index.d.ts +0 -13
- package/build/ui/index.d.ts.map +0 -1
- package/build/ui/index.js +0 -13
- package/build/ui/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -11,23 +11,21 @@ ZS-ui는 JavaScript만으로 구현된 Expo용 UI 컴포넌트 라이브러리
|
|
|
11
11
|
|
|
12
12
|
<br />
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
## 설치
|
|
15
15
|
|
|
16
16
|
```bash
|
|
17
|
-
npx expo install @react-native-async-storage/async-storage react-native-reanimated react-native-svg react-native-safe-area-context
|
|
18
|
-
|
|
19
17
|
npx expo install @0610studio/zs-ui
|
|
20
18
|
```
|
|
21
19
|
|
|
22
20
|
<br />
|
|
23
21
|
|
|
24
|
-
|
|
22
|
+
## 사용법
|
|
25
23
|
|
|
26
24
|
사용법은 [문서](https://0610studio.github.io/zs-ui/docs/intro)를 확인해주세요.
|
|
27
25
|
|
|
28
26
|
<br />
|
|
29
27
|
|
|
30
|
-
|
|
28
|
+
## TODO
|
|
31
29
|
|
|
32
30
|
- [ ] 폴더블 폰에서 접힘/펼침 상태 변경으로 인해 액티비티가 재시작되었을 때, `Dimensions.get('window')`가 이전 값을 반환하고 onChange가 호출되지 않는 문제
|
|
33
31
|
|
package/build/index.d.ts
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
import { useTheme, OverlayProvider, ThemeProvider } from './model';
|
|
2
|
-
import { ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup } from './ui';
|
|
3
2
|
import ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';
|
|
3
|
+
import ZSContainer from './ui/ZSContainer';
|
|
4
|
+
import ZSPressable from './ui/ZSPressable';
|
|
5
|
+
import ZSText from './ui/ZSText';
|
|
6
|
+
import ThrottleButton from './ui/ThrottleButton';
|
|
7
|
+
import ZSTextField from './ui/ZSTextField';
|
|
8
|
+
import ZSRadioGroup from './ui/ZSRadioGroup';
|
|
9
|
+
import ZSBottomCta from './ui/ZSBottomCta';
|
|
10
|
+
import ZSView from './ui/ZSView';
|
|
11
|
+
import AnimatedWrapper from './ui/atoms/AnimatedWrapper';
|
|
12
|
+
import TextAtom from './ui/atoms/TextAtom';
|
|
4
13
|
import { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlayProvider, useOverlay, PopOverButton, PopOverMenu } from './overlay';
|
|
5
|
-
export { useTheme, OverlayProvider, ThemeProvider, ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ErrorComponent, AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlayProvider, useOverlay, PopOverButton, PopOverMenu, };
|
|
14
|
+
export { useTheme, OverlayProvider, ThemeProvider, ZSBottomCta, ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ErrorComponent, AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlayProvider, useOverlay, PopOverButton, PopOverMenu, };
|
|
6
15
|
import type { ThemeProviderProps, ThemeProps, Palette } from "./model/useThemeProvider";
|
|
7
16
|
import { ZSTextProps } from "./ui/ZSText";
|
|
8
17
|
import { BoxStyle } from "./ui/ZSTextField";
|
package/build/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACd,MAAM,SAAS,CAAA;AAEhB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EACd,MAAM,SAAS,CAAA;AAEhB,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,eAAe,MAAM,4BAA4B,CAAC;AACzD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,EACZ,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,EAEb,WAAW,EACX,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc,EAEd,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,GACZ,CAAC;AAIF,OAAO,KAAK,EACV,kBAAkB,EAClB,UAAU,EACV,OAAO,EACR,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,kBAAkB,EACnB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,eAAe,EACf,eAAe,EACf,UAAU,EACV,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,WAAW,EACX,WAAW,EACX,cAAc,EACf,CAAC"}
|
package/build/index.js
CHANGED
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
import { useTheme, OverlayProvider, ThemeProvider, } from './model';
|
|
2
|
-
import { ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, } from './ui';
|
|
3
2
|
import ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';
|
|
3
|
+
import ZSContainer from './ui/ZSContainer';
|
|
4
|
+
import ZSPressable from './ui/ZSPressable';
|
|
5
|
+
import ZSText from './ui/ZSText';
|
|
6
|
+
import ThrottleButton from './ui/ThrottleButton';
|
|
7
|
+
import ZSTextField from './ui/ZSTextField';
|
|
8
|
+
import ZSRadioGroup from './ui/ZSRadioGroup';
|
|
9
|
+
import ZSBottomCta from './ui/ZSBottomCta';
|
|
10
|
+
import ZSView from './ui/ZSView';
|
|
11
|
+
import AnimatedWrapper from './ui/atoms/AnimatedWrapper';
|
|
12
|
+
import TextAtom from './ui/atoms/TextAtom';
|
|
4
13
|
import { AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlayProvider, useOverlay, PopOverButton, PopOverMenu, } from './overlay';
|
|
5
14
|
export { useTheme, OverlayProvider, ThemeProvider,
|
|
6
15
|
// ---
|
|
7
|
-
ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ErrorComponent,
|
|
16
|
+
ZSBottomCta, ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ErrorComponent,
|
|
8
17
|
// ---
|
|
9
18
|
AlertOverlay, BottomSheetOverlay, SnackbarNotify, useOverlayProvider, useOverlay, PopOverButton, PopOverMenu, };
|
|
10
19
|
//# sourceMappingURL=index.js.map
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,GACd,MAAM,SAAS,CAAA;AAEhB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa,GACd,MAAM,SAAS,CAAA;AAEhB,OAAO,cAAc,MAAM,oCAAoC,CAAC;AAChE,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,eAAe,MAAM,4BAA4B,CAAC;AACzD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,WAAW,CAAC;AAEnB,OAAO,EACL,QAAQ,EACR,eAAe,EACf,aAAa;AACb,MAAM;AACN,WAAW,EACX,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,cAAc;AACd,MAAM;AACN,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,aAAa,EACb,WAAW,GACZ,CAAC","sourcesContent":["import {\n useTheme,\n OverlayProvider,\n ThemeProvider,\n} from './model'\n\nimport ErrorComponent from './ui/ZSTextField/ui/ErrorComponent';\nimport ZSContainer from './ui/ZSContainer';\nimport ZSPressable from './ui/ZSPressable';\nimport ZSText from './ui/ZSText';\nimport ThrottleButton from './ui/ThrottleButton';\nimport ZSTextField from './ui/ZSTextField';\nimport ZSRadioGroup from './ui/ZSRadioGroup';\nimport ZSBottomCta from './ui/ZSBottomCta';\nimport ZSView from './ui/ZSView';\nimport AnimatedWrapper from './ui/atoms/AnimatedWrapper';\nimport TextAtom from './ui/atoms/TextAtom';\n\nimport {\n AlertOverlay,\n BottomSheetOverlay,\n SnackbarNotify,\n useOverlayProvider,\n useOverlay,\n PopOverButton,\n PopOverMenu,\n} from './overlay';\n\nexport {\n useTheme,\n OverlayProvider,\n ThemeProvider,\n // ---\n ZSBottomCta,\n ZSView,\n AnimatedWrapper,\n TextAtom,\n ZSContainer,\n ZSPressable,\n ZSText,\n ThrottleButton,\n ZSTextField,\n ZSRadioGroup,\n ErrorComponent,\n // ---\n AlertOverlay,\n BottomSheetOverlay,\n SnackbarNotify,\n useOverlayProvider,\n useOverlay,\n PopOverButton,\n PopOverMenu,\n};\n\n// ------------------------------------------------------\n\nimport type {\n ThemeProviderProps,\n ThemeProps,\n Palette,\n} from \"./model/useThemeProvider\";\nimport { ZSTextProps } from \"./ui/ZSText\";\nimport { BoxStyle } from \"./ui/ZSTextField\";\nimport {\n ColorPalette,\n ColorPaletteExtend,\n ThemeTextType,\n ThemeBorderType,\n ThemeBackground,\n MainColors,\n Theme,\n TypographyVariants,\n ThemeFonts,\n TypoNumber,\n TypographyVariantsProps,\n TypoStyle,\n TypoOptions,\n TypoSubStyle,\n TypoColorOptions\n} from \"./theme/types\";\nimport {\n SnackItem,\n ShowAlertProps,\n ShowSnackBarProps,\n ShowBottomSheetProps,\n PopOverMenuProps,\n CustomSnackbarProps,\n OverlayProviderProps,\n AlertAction,\n AlertActions,\n SnackType,\n HideOption,\n BottomSheetOptions\n} from \"./model/types\";\nimport {\n RadioOption,\n ShadowLevel,\n ShadowStyle,\n} from \"./ui/types\";\nimport { ZSContainerRef } from \"./ui/ZSContainer\";\n\nexport type {\n ThemeProviderProps,\n ThemeProps,\n Palette,\n ZSTextProps,\n BoxStyle,\n ColorPalette,\n ColorPaletteExtend,\n ThemeTextType,\n ThemeBorderType,\n ThemeBackground,\n MainColors,\n Theme,\n TypographyVariants,\n ThemeFonts,\n TypoNumber,\n TypographyVariantsProps,\n TypoStyle,\n TypoOptions,\n TypoSubStyle,\n TypoColorOptions,\n SnackItem,\n ShowAlertProps,\n ShowSnackBarProps,\n ShowBottomSheetProps,\n PopOverMenuProps,\n CustomSnackbarProps,\n OverlayProviderProps,\n AlertAction,\n AlertActions,\n SnackType,\n HideOption,\n BottomSheetOptions,\n RadioOption,\n ShadowLevel,\n ShadowStyle,\n ZSContainerRef\n};\n"]}
|
|
@@ -3,10 +3,10 @@ import { StyleSheet, TouchableOpacity } from 'react-native';
|
|
|
3
3
|
import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
|
|
4
4
|
import { useAlert } from '../../model/useOverlay';
|
|
5
5
|
import { useTheme } from '../../model/useThemeProvider';
|
|
6
|
-
import { ZSText } from '../../ui';
|
|
7
6
|
import ModalBackground from '../ui/ModalBackground';
|
|
8
7
|
import ViewAtom from '../../ui/atoms/ViewAtom';
|
|
9
8
|
import { MAX_OVERLAY_WIDTH, Z_INDEX_VALUE } from '../../model/utils';
|
|
9
|
+
import ZSText from '../../ui/ZSText';
|
|
10
10
|
function AlertOverlay({ actions, title, informative, isBackgroundTouchClose, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle, }) {
|
|
11
11
|
const { alertVisible, setAlertVisible } = useAlert();
|
|
12
12
|
const { palette: { background, primary: primaryColor, modalBgColor }, dimensions: { width: windowWidth } } = useTheme();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { StyleSheet, TouchableOpacity } from 'react-native';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { AlertActions, ShowAlertProps } from '../../model/types';\nimport { useAlert } from '../../model/useOverlay';\nimport { useTheme } from '../../model/useThemeProvider';\nimport { ThemeBackground } from '../../theme';\nimport ModalBackground from '../ui/ModalBackground';\nimport ViewAtom from '../../ui/atoms/ViewAtom';\nimport { MAX_OVERLAY_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\nimport ZSText from '../../ui/ZSText';\n\nfunction AlertOverlay({\n actions,\n title,\n informative,\n isBackgroundTouchClose,\n titleStyle,\n informativeStyle,\n secondaryButtonStyle,\n primaryButtonStyle,\n secondaryButtonTextStyle,\n primaryButtonTextStyle,\n singleButtonTextStyle,\n}: ShowAlertProps) {\n const { alertVisible, setAlertVisible } = useAlert();\n const { palette: { background, primary: primaryColor, modalBgColor }, dimensions: { width: windowWidth } } = useTheme();\n const styles = useMemo(() => createStyles({ background }), [background]);\n const modalWidth = windowWidth - 60;\n\n const handleButtonPress = useCallback((onPressFunction?: () => void) => () => {\n if (onPressFunction) onPressFunction();\n setAlertVisible(false);\n }, [setAlertVisible]);\n\n const content = useMemo(() => {\n const { primary, secondary } = actions || {} as AlertActions;\n\n return (\n <Animated.View\n entering={FadeInDown.duration(300)}\n exiting={FadeOutDown.duration(100)}\n style={[styles.contentContainer, { width: modalWidth }]}\n >\n {title && (\n <ZSText typo='subTitle.1' style={[styles.title, titleStyle]}>{title}</ZSText>\n )}\n {informative && (\n <ZSText typo='body.2' style={[styles.informative, informativeStyle]}>{informative}</ZSText>\n )}\n {actions && (\n <ViewAtom style={styles.buttonContainer}>\n {secondary ? (\n <>\n <TouchableOpacity\n style={[\n styles.button,\n { backgroundColor: background.neutral, marginRight: 8 },\n secondaryButtonStyle\n ]}\n onPress={handleButtonPress(secondary?.onPress)}\n >\n <ZSText typo='label.2' style={[secondaryButtonTextStyle]}>{secondary.label}</ZSText>\n </TouchableOpacity>\n\n <TouchableOpacity\n style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n onPress={handleButtonPress(primary?.onPress)}\n >\n <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n </TouchableOpacity>\n </>\n ) : (\n <TouchableOpacity\n style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n onPress={handleButtonPress(primary?.onPress)}\n >\n <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n </TouchableOpacity>\n )}\n </ViewAtom>\n )}\n </Animated.View>\n );\n }, [title, informative, actions, handleButtonPress, titleStyle, informativeStyle, secondaryButtonStyle, primaryButtonStyle, secondaryButtonTextStyle, primaryButtonTextStyle, singleButtonTextStyle]);\n\n return (\n !alertVisible ? null :\n <ModalBackground\n zIndex={Z_INDEX_VALUE.ALERT}\n key={alertVisible ? 'visibleao' : 'hiddenao'}\n modalBgColor={modalBgColor}\n onPress={() => { if (isBackgroundTouchClose) setAlertVisible(false); }}\n >\n {content}\n </ModalBackground>\n )\n}\n\nexport default AlertOverlay;\n\nconst createStyles = ({ background }: { background: ThemeBackground; }) =>\n StyleSheet.create({\n title: {\n marginBottom: 8,\n width: '100%',\n paddingHorizontal: 4\n },\n informative: {\n marginTop: 8,\n width: '100%',\n paddingHorizontal: 4\n },\n buttonContainer: {\n flexDirection: 'row',\n width: '100%',\n marginTop: 24,\n alignItems: 'center',\n justifyContent: 'flex-end',\n },\n button: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n paddingVertical: 14,\n borderRadius: 12,\n },\n avoidingView: {\n flex: 1,\n justifyContent: 'center'\n },\n contentContainer: {\n alignItems: 'center',\n backgroundColor: background.base,\n borderRadius: 22,\n paddingBottom: 18,\n paddingTop: 24,\n paddingHorizontal: 20,\n maxWidth: MAX_OVERLAY_WIDTH,\n },\n });\n\n"]}
|
|
@@ -3,9 +3,9 @@ import { StatusBar, StyleSheet } from 'react-native';
|
|
|
3
3
|
import { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';
|
|
4
4
|
import Animated, { FadeOut, useAnimatedStyle, withTiming, withDelay, useSharedValue } from 'react-native-reanimated';
|
|
5
5
|
import { useModality } from '../../model/useOverlay';
|
|
6
|
-
import { ZSView } from '../../ui';
|
|
7
6
|
import { useTheme } from '../../model';
|
|
8
7
|
import { Z_INDEX_VALUE } from '../../model/utils';
|
|
8
|
+
import ZSView from '../../ui/ZSView';
|
|
9
9
|
function Modality({ modalityComponent, }) {
|
|
10
10
|
const { palette, dimensions: { height: windowHeight } } = useTheme();
|
|
11
11
|
const [localVisible, setLocalVisible] = useState(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACzF,OAAO,QAAQ,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrH,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { StatusBar, StyleSheet } from 'react-native';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport Animated, { FadeOut, useAnimatedStyle, withTiming, withDelay, useSharedValue } from 'react-native-reanimated';\nimport { useModality } from '../../model/useOverlay';\nimport { useTheme } from '../../model';\nimport { Z_INDEX_VALUE } from '../../model/utils';\nimport ZSView from '../../ui/ZSView';\n\nfunction Modality({\n modalityComponent,\n}: {\n modalityComponent?: React.ReactNode;\n}) {\n const { palette, dimensions: { height: windowHeight } } = useTheme();\n const [localVisible, setLocalVisible] = useState(false);\n const { modalityVisible } = useModality();\n const insets = useSafeAreaInsets();\n const backScale = useSharedValue(1);\n const backTranslateY = useSharedValue(0);\n const backBorderRadius = useSharedValue(0);\n const mainTranslateY = useSharedValue(windowHeight);\n const backgroundOpacity = useSharedValue(1);\n const overrideMargin = 10;\n const mainScreenMargin = insets.top;\n const mainScrrenPadding = (initialWindowMetrics?.insets.bottom || insets.bottom);\n\n // 애니메이션 트리거\n useEffect(() => {\n if (modalityVisible) {\n // 모달이 열리는 애니메이션\n setLocalVisible(true);\n backScale.value = withDelay(100, withTiming(0.92, { duration: 200 }));\n backTranslateY.value = withDelay(300, withTiming(insets.top, { duration: 200 }));\n backBorderRadius.value = withDelay(100, withTiming(12, { duration: 200 }));\n mainTranslateY.value = withDelay(200, withTiming(overrideMargin + insets.top, { duration: 200 }));\n backgroundOpacity.value = withTiming(1, { duration: 500 });\n } else {\n // 모달이 닫히는 애니메이션 (역순)\n backScale.value = withTiming(1, { duration: 100 });\n backTranslateY.value = withTiming(0, { duration: 100 });\n backBorderRadius.value = withTiming(0, { duration: 100 });\n mainTranslateY.value = withTiming(windowHeight, { duration: 200 });\n backgroundOpacity.value = withTiming(0, { duration: 300 });\n setTimeout(() => {\n setLocalVisible(false);\n }, 500);\n }\n }, [modalityVisible]);\n\n // 부모 스크린\n const backScreenAnimatedStyle = useAnimatedStyle(() => {\n return {\n transform: [\n { scaleX: backScale.value },\n { translateY: backTranslateY.value }\n ],\n borderTopLeftRadius: backBorderRadius.value,\n borderTopRightRadius: backBorderRadius.value,\n };\n });\n\n // 아래에서 등장하는 Modality 화면\n const mainScreenAnimatedStyle = useAnimatedStyle(() => {\n return {\n transform: [\n { translateY: mainTranslateY.value }\n ]\n };\n });\n\n // 배경 불투명도 스타일\n const backgroundAnimatedStyle = useAnimatedStyle(() => {\n return {\n opacity: backgroundOpacity.value\n };\n });\n\n return (\n !localVisible ? null :\n <Animated.View\n key={localVisible ? 'visiblemd' : 'hiddenmd'}\n style={[\n styles.animatedBackground,\n { backgroundColor: palette.background.neutral },\n backgroundAnimatedStyle\n ]}\n >\n <StatusBar backgroundColor={modalityVisible ? palette.background.neutral : palette.background.base} />\n\n <Animated.View\n exiting={FadeOut.duration(300)}\n style={[\n styles.backScreen,\n { backgroundColor: palette.background.layer2, width: '100%', height: windowHeight },\n backScreenAnimatedStyle\n ]}\n />\n\n <Animated.View\n style={[\n {\n height: windowHeight - mainScreenMargin,\n paddingBottom: mainScrrenPadding,\n backgroundColor: palette.background.base,\n width: '100%'\n },\n styles.mainScreen,\n mainScreenAnimatedStyle\n ]}\n >\n <ZSView style={[styles.contents, { width: '100%' }]}>\n {modalityComponent}\n </ZSView>\n </Animated.View>\n </Animated.View>\n );\n}\n\nconst styles = StyleSheet.create({\n contents: {\n flex: 1,\n paddingTop: 10,\n zIndex: Z_INDEX_VALUE.MODAL4,\n },\n animatedBackground: {\n ...StyleSheet.absoluteFillObject,\n zIndex: Z_INDEX_VALUE.MODAL1,\n },\n backScreen: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n zIndex: Z_INDEX_VALUE.MODAL2,\n },\n mainScreen: {\n position: 'absolute',\n borderTopLeftRadius: 16,\n borderTopRightRadius: 16,\n zIndex: Z_INDEX_VALUE.MODAL3,\n overflow: 'hidden',\n },\n});\n\nexport default Modality;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useRef, useCallback } from 'react';
|
|
2
2
|
import { View, StyleSheet } from 'react-native';
|
|
3
3
|
import { useOverlay } from '../../model/useOverlay';
|
|
4
|
-
import
|
|
4
|
+
import ZSPressable from '../../ui/ZSPressable';
|
|
5
5
|
const PopOverButton = ({ width, height, backgroundColor = 'transparent', popOverMenuComponent, children, ...props }) => {
|
|
6
6
|
const buttonRef = useRef(null);
|
|
7
7
|
const { showPopOverMenu } = useOverlay();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopOverButton.js","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAa,UAAU,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,
|
|
1
|
+
{"version":3,"file":"PopOverButton.js","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAa,UAAU,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAS/C,MAAM,aAAa,GAAiC,CAAC,EACnD,KAAK,EACL,MAAM,EACN,eAAe,GAAG,aAAa,EAC/B,oBAAoB,EACpB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,MAAM,CAAO,IAAI,CAAC,CAAC;IACrC,MAAM,EAAE,eAAe,EAAE,GAAG,UAAU,EAAE,CAAC;IAEzC,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;YACjF,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC/C,MAAM,GAAG,GAAG,KAAK,GAAG,aAAa,CAAC;gBAClC,MAAM,GAAG,GAAG,KAAK,GAAG,cAAc,CAAC;gBAEnC,eAAe,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC,CAAC;YACzE,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAE5C,OAAO,CACL,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC7E;MAAA,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC,CAC3D,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,WAAW,CAAC,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,UAAU,EAAE,YAAY;KACzB;IACD,MAAM,EAAE;QACN,cAAc,EAAE,QAAQ;KACzB;CACF,CAAC,CAAC;AAEH,eAAe,aAAa,CAAC","sourcesContent":["import React, { useRef, useCallback } from 'react';\nimport { View, ViewProps, StyleSheet } from 'react-native';\nimport { useOverlay } from '../../model/useOverlay';\nimport ZSPressable from '../../ui/ZSPressable';\n\ninterface PopOverButtonProps extends ViewProps {\n width: number;\n height: number;\n backgroundColor?: string;\n popOverMenuComponent: React.ReactNode;\n}\n\nconst PopOverButton: React.FC<PopOverButtonProps> = ({\n width,\n height,\n backgroundColor = 'transparent',\n popOverMenuComponent,\n children,\n ...props\n}) => {\n const buttonRef = useRef<View>(null);\n const { showPopOverMenu } = useOverlay();\n\n const handlePress = useCallback(() => {\n buttonRef.current?.measure((fx, fy, measuredWidth, measuredHeight, pageX, pageY) => {\n if (pageX !== undefined && pageY !== undefined) {\n const rbX = pageX + measuredWidth;\n const rbY = pageY + measuredHeight;\n\n showPopOverMenu({ px: rbX, py: rbY, component: popOverMenuComponent });\n }\n });\n }, [showPopOverMenu, popOverMenuComponent]);\n\n return (\n <ZSPressable isAnimation={false} onPress={handlePress} style={styles.pressable}>\n <View\n ref={buttonRef}\n style={[styles.button, { width, height, backgroundColor }]}\n {...props}\n >\n {children}\n </View>\n </ZSPressable>\n );\n};\n\nconst styles = StyleSheet.create({\n pressable: {\n alignItems: 'flex-start',\n },\n button: {\n justifyContent: 'center',\n },\n});\n\nexport default PopOverButton;\n"]}
|
|
@@ -2,8 +2,8 @@ import React, { useEffect, useCallback } from "react";
|
|
|
2
2
|
import { StyleSheet, TouchableOpacity } from "react-native";
|
|
3
3
|
import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
|
|
4
4
|
import ViewAtom from "../../../ui/atoms/ViewAtom";
|
|
5
|
-
import { ZSText } from "../../../ui";
|
|
6
5
|
import { useTheme } from "../../../model/useThemeProvider";
|
|
6
|
+
import ZSText from "../../../ui/ZSText";
|
|
7
7
|
const Snackbar = ({ customSnackbar, snackItem, hideSnackBar, }) => {
|
|
8
8
|
const { type, message, snackbarDuration } = snackItem;
|
|
9
9
|
const { palette } = useTheme();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAExE,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,MAAM,QAAQ,GAAG,CAAC,EAChB,cAAc,EACd,SAAS,EACT,YAAY,GAKb,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,SAAS,CAAC;IACtD,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,UAAU,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;QACjE,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAChC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,SAAS,CAAC,CAEnB;MAAA,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAC1B,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,OAAO,CAAC,CAAC,aAAa,CAAC,CAEvB;QAAA,CAAC,cAAc,CAAC,CAAC,CAAC,CAChB,cAAc,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAC3D,CAAC,CAAC,CAAC,CACF,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC;gBACL,MAAM,CAAC,QAAQ;gBACf,EAAE,eAAe,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,EAAE;aAC/F,CAAC,CAEF;YAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACvC;cAAA,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAC3B;YAAA,EAAE,QAAQ,CACZ;UAAA,EAAE,QAAQ,CAAC,CACZ,CACH;MAAA,EAAE,gBAAgB,CACpB;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,YAAY,EAAE,EAAE;QAChB,KAAK,EAAE,MAAM;KACd;IACD,eAAe,EAAE;QACf,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,CAAC;KACb;IACD,QAAQ,EAAE;QACR,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,MAAM;KACd;IACD,gBAAgB,EAAE;QAChB,IAAI,EAAE,CAAC;QACP,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,EAAE;KACf;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import React, { ReactNode, useEffect, useCallback } from \"react\";\nimport { StyleSheet, TouchableOpacity } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp } from \"react-native-reanimated\";\nimport { CustomSnackbarProps, SnackItem } from \"../../../model/types\";\nimport ViewAtom from \"../../../ui/atoms/ViewAtom\";\nimport { useTheme } from \"../../../model/useThemeProvider\";\nimport ZSText from \"../../../ui/ZSText\";\n\nconst Snackbar = ({\n customSnackbar,\n snackItem,\n hideSnackBar,\n}: {\n customSnackbar?: (props: CustomSnackbarProps) => ReactNode;\n snackItem: SnackItem;\n hideSnackBar: (index: number) => void;\n}) => {\n const { type, message, snackbarDuration } = snackItem;\n const { palette } = useTheme();\n\n const closeSnackbar = useCallback(() => {\n hideSnackBar(snackItem.index);\n }, [hideSnackBar, snackItem.index]);\n\n useEffect(() => {\n const closeTimeout = setTimeout(closeSnackbar, snackbarDuration);\n return () => clearTimeout(closeTimeout);\n }, []);\n\n return (\n <Animated.View\n style={[styles.snackbarWrapper]}\n entering={FadeInUp}\n exiting={FadeOutUp}\n >\n <TouchableOpacity\n style={[styles.container]}\n activeOpacity={1}\n onPress={closeSnackbar}\n >\n {customSnackbar ? (\n customSnackbar({ snackType: type, snackMessage: message })\n ) : (\n <ViewAtom\n style={[\n styles.snackBar,\n { backgroundColor: type === \"error\" ? palette.background.danger : palette.background.success },\n ]}\n >\n <ViewAtom style={styles.messageContainer}>\n <ZSText>{message}</ZSText>\n </ViewAtom>\n </ViewAtom>\n )}\n </TouchableOpacity>\n </Animated.View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n borderRadius: 16,\n width: \"100%\",\n },\n snackbarWrapper: {\n width: \"96%\",\n marginTop: 8,\n },\n snackBar: {\n borderRadius: 16,\n paddingHorizontal: 10,\n paddingVertical: 18,\n flexDirection: \"row\",\n alignItems: \"center\",\n width: \"100%\",\n },\n messageContainer: {\n flex: 1,\n flexDirection: \"column\",\n marginLeft: 10,\n },\n});\n\nexport default Snackbar;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBottomCta/index.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,WAAW,CAAC,EACnB,MAAM,EACN,MAAU,GACX,EAAE,KAAK,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSBottomCta/index.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,WAAW,CAAC,EACnB,MAAM,EACN,MAAU,GACX,EAAE,KAAK,+BA6BP;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -9,10 +9,12 @@ function ZSBottomCta({ render, offset = 0, }) {
|
|
|
9
9
|
const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
|
|
10
10
|
const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
|
|
11
11
|
const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {
|
|
12
|
-
setBottomValue(
|
|
12
|
+
setBottomValue(event.endCoordinates.height);
|
|
13
13
|
setIsKeyboardVisible(true);
|
|
14
14
|
});
|
|
15
15
|
const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {
|
|
16
|
+
setBottomValue(0);
|
|
17
|
+
setIsKeyboardVisible(false);
|
|
16
18
|
});
|
|
17
19
|
return () => {
|
|
18
20
|
keyboardShowSubscription.remove();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBottomCta/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOlD,SAAS,WAAW,CAAC,EACnB,MAAM,EACN,MAAM,GAAG,CAAC,GACJ;IACN,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,CAAC;QACjF,MAAM,SAAS,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,CAAC;QAEjF,MAAM,wBAAwB,GAAG,QAAQ,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACzE,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSBottomCta/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,QAAQ,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOlD,SAAS,WAAW,CAAC,EACnB,MAAM,EACN,MAAM,GAAG,CAAC,GACJ;IACN,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,CAAC;QACjF,MAAM,SAAS,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,CAAC;QAEjF,MAAM,wBAAwB,GAAG,QAAQ,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;YACzE,cAAc,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;YAC3C,oBAAoB,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;QAEH,MAAM,wBAAwB,GAAG,QAAQ,CAAC,WAAW,CAAC,SAAS,EAAE,GAAG,EAAE;YACpE,cAAc,CAAC,CAAC,CAAC,CAAC;YAClB,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,wBAAwB,CAAC,MAAM,EAAE,CAAC;YAClC,wBAAwB,CAAC,MAAM,EAAE,CAAC;QACpC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,WAAW,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAC/I;MAAA,CAAC,MAAM,EAAE,CACX;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC;AAED,eAAe,WAAW,CAAC;AAE3B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,aAAa,CAAC,UAAU;QAChC,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { Keyboard, Platform, StyleSheet } from \"react-native\";\nimport Animated, { FadeInDown, FadeOutDown } from \"react-native-reanimated\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\ninterface Props {\n render: () => React.ReactNode;\n offset?: number;\n}\n\nfunction ZSBottomCta({\n render,\n offset = 0,\n}: Props) {\n const [bottomValue, setBottomValue] = useState(0);\n const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);\n\n useEffect(() => {\n const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\n const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\n\n const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {\n setBottomValue(event.endCoordinates.height)\n setIsKeyboardVisible(true);\n });\n\n const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\n setBottomValue(0);\n setIsKeyboardVisible(false);\n });\n\n return () => {\n keyboardShowSubscription.remove();\n keyboardHideSubscription.remove();\n };\n }, []);\n\n return (\n <Animated.View entering={FadeInDown} exiting={FadeOutDown} style={[styles.container, { bottom: bottomValue + (isKeyboardVisible ? offset : 0) }]}>\n {render()}\n </Animated.View>\n );\n}\n\nexport default ZSBottomCta;\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n zIndex: Z_INDEX_VALUE.BOTTOM_CTA,\n width: '100%',\n },\n});"]}
|
|
@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react';
|
|
|
2
2
|
import { ViewProps, ScrollView, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
3
3
|
export type ZSContainerProps = ViewProps & {
|
|
4
4
|
backgroundColor?: string;
|
|
5
|
-
isLoader?: boolean;
|
|
6
5
|
statusBarColor?: string;
|
|
7
6
|
barStyle?: 'light-content' | 'dark-content';
|
|
8
7
|
edges?: Array<'top' | 'right' | 'bottom' | 'left'>;
|
|
@@ -11,8 +10,6 @@ export type ZSContainerProps = ViewProps & {
|
|
|
11
10
|
bottomComponent?: ReactNode;
|
|
12
11
|
rightComponent?: ReactNode;
|
|
13
12
|
showsVerticalScrollIndicator?: boolean;
|
|
14
|
-
loadingComponent?: React.ReactNode;
|
|
15
|
-
automaticallyAdjustKeyboardInsets?: boolean;
|
|
16
13
|
keyboardScrollExtraOffset?: number;
|
|
17
14
|
translucent?: boolean;
|
|
18
15
|
onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
|
|
@@ -21,7 +18,6 @@ export type ZSContainerProps = ViewProps & {
|
|
|
21
18
|
export type ZSContainerRef = ScrollView;
|
|
22
19
|
declare const ZSContainer: React.ForwardRefExoticComponent<ViewProps & {
|
|
23
20
|
backgroundColor?: string;
|
|
24
|
-
isLoader?: boolean;
|
|
25
21
|
statusBarColor?: string;
|
|
26
22
|
barStyle?: "light-content" | "dark-content";
|
|
27
23
|
edges?: Array<"top" | "right" | "bottom" | "left">;
|
|
@@ -30,8 +26,6 @@ declare const ZSContainer: React.ForwardRefExoticComponent<ViewProps & {
|
|
|
30
26
|
bottomComponent?: ReactNode;
|
|
31
27
|
rightComponent?: ReactNode;
|
|
32
28
|
showsVerticalScrollIndicator?: boolean;
|
|
33
|
-
loadingComponent?: React.ReactNode;
|
|
34
|
-
automaticallyAdjustKeyboardInsets?: boolean;
|
|
35
29
|
keyboardScrollExtraOffset?: number;
|
|
36
30
|
translucent?: boolean;
|
|
37
31
|
onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
|
|
@@ -40,19 +34,13 @@ declare const ZSContainer: React.ForwardRefExoticComponent<ViewProps & {
|
|
|
40
34
|
export declare const styles: {
|
|
41
35
|
flex1: {
|
|
42
36
|
flex: number;
|
|
37
|
+
width: "100%";
|
|
43
38
|
};
|
|
44
39
|
scrollContainerStyle: {
|
|
45
40
|
flexGrow: number;
|
|
46
41
|
alignItems: "center";
|
|
47
|
-
};
|
|
48
|
-
splitContainer: {
|
|
49
|
-
flex: number;
|
|
50
|
-
flexDirection: "row";
|
|
51
42
|
width: "100%";
|
|
52
43
|
};
|
|
53
|
-
splitView: {
|
|
54
|
-
minHeight: "100%";
|
|
55
|
-
};
|
|
56
44
|
};
|
|
57
45
|
export default ZSContainer;
|
|
58
46
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -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,
|
|
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,EAAyB,UAAU,EAAE,oBAAoB,EAAE,iBAAiB,EAA4B,MAAM,cAAc,CAAC;AAI/I,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpE,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,QAAA,MAAM,WAAW;sBAjBG,MAAM;qBACP,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;gCACV,MAAM;kBACpB,OAAO;eACV,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI;0BAC7C,MAAM;oCAuH5B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;CAGjB,CAAC;AAEH,eAAe,WAAW,CAAC"}
|
|
@@ -1,43 +1,36 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import { StatusBar, StyleSheet,
|
|
1
|
+
import React, { useEffect, useImperativeHandle, forwardRef, useRef, useState } from 'react';
|
|
2
|
+
import { StatusBar, StyleSheet, ScrollView, Keyboard, View, Platform } from 'react-native';
|
|
3
3
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
4
4
|
import { useTheme } from '../../model/useThemeProvider';
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
const { palette, splitBreakpoint, splitRatio, dimensions: { height: windowHeight, width: windowWidth }, isSplitView } = useTheme();
|
|
8
|
-
const [isDelayed, setIsDelayed] = useState(true);
|
|
9
|
-
const [keyboardHeight, setKeyboardHeight] = useState(0);
|
|
5
|
+
const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, statusBarColor, barStyle, edges = ['top', 'bottom'], scrollViewDisabled = false, topComponent, bottomComponent, rightComponent, showsVerticalScrollIndicator = true, keyboardScrollExtraOffset = 30, translucent, scrollEventThrottle = 16, ...props }, forwardedRef) {
|
|
6
|
+
const { palette, dimensions: { height: windowHeight } } = useTheme();
|
|
10
7
|
const positionRef = useRef(0);
|
|
11
8
|
const scrollViewRef = useRef(null);
|
|
12
9
|
const lastTouchY = useRef(0);
|
|
13
|
-
const
|
|
10
|
+
const [keyboardHeight, setKeyboardHeight] = useState(0);
|
|
14
11
|
useImperativeHandle(forwardedRef, () => scrollViewRef.current, []);
|
|
15
|
-
useEffect(() => {
|
|
16
|
-
const timer = setTimeout(() => {
|
|
17
|
-
setIsDelayed(false);
|
|
18
|
-
}, 200);
|
|
19
|
-
return () => clearTimeout(timer);
|
|
20
|
-
}, []);
|
|
21
12
|
useEffect(() => {
|
|
22
13
|
const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
|
|
23
14
|
const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
|
|
24
15
|
const keyboardShowSubscription = Keyboard.addListener(showEvent, (e) => {
|
|
25
16
|
setKeyboardHeight(e.endCoordinates.height);
|
|
26
|
-
if (scrollViewRef.current
|
|
17
|
+
if (scrollViewRef.current) {
|
|
27
18
|
const screenHeight = windowHeight;
|
|
28
19
|
const keyboardHeight = e.endCoordinates.height;
|
|
29
20
|
const safeAreaBottom = 0;
|
|
30
21
|
const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;
|
|
31
|
-
// 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산
|
|
32
22
|
const currentScrollPosition = positionRef.current || 0;
|
|
33
23
|
const touchPosition = lastTouchY.current || 0;
|
|
24
|
+
// touchPosition이 키보드 높이보다 아래인 경우
|
|
25
|
+
// const isTouchPositionBelowKeyboard = touchPosition > availableScreenHeight;
|
|
26
|
+
// 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산
|
|
34
27
|
const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;
|
|
35
28
|
setTimeout(() => {
|
|
36
29
|
scrollViewRef.current?.scrollTo({
|
|
37
30
|
y: currentScrollPosition + scrollOffset,
|
|
38
31
|
animated: true,
|
|
39
32
|
});
|
|
40
|
-
},
|
|
33
|
+
}, 100);
|
|
41
34
|
}
|
|
42
35
|
});
|
|
43
36
|
const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {
|
|
@@ -53,55 +46,28 @@ const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, isLoader
|
|
|
53
46
|
const handleScroll = (event) => {
|
|
54
47
|
if (props.onScroll)
|
|
55
48
|
props.onScroll(event);
|
|
56
|
-
|
|
57
|
-
positionRef.current = event.nativeEvent.contentOffset.y;
|
|
49
|
+
positionRef.current = event.nativeEvent.contentOffset.y;
|
|
58
50
|
};
|
|
59
51
|
const handleTouch = (evt) => {
|
|
60
|
-
|
|
61
|
-
lastTouchY.current = evt.nativeEvent.pageY;
|
|
62
|
-
};
|
|
63
|
-
const renderContent = () => {
|
|
64
|
-
if (isLoader)
|
|
65
|
-
return loadingComponent;
|
|
66
|
-
const leftWidth = (splitEnabled ? `${splitRatio * 100}%` : '100%');
|
|
67
|
-
const rightWidth = `${(1 - splitRatio) * 100}%`;
|
|
68
|
-
return (<View style={styles.splitContainer}>
|
|
69
|
-
|
|
70
|
-
{/* 메인 컴포넌트 */}
|
|
71
|
-
<VariantView style={props.style} children={props.children} scrollViewRef={scrollViewRef} variantWidth={leftWidth} showsVerticalScrollIndicator={showsVerticalScrollIndicator} automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets} scrollViewDisabled={scrollViewDisabled} scrollEventThrottle={scrollEventThrottle} handleScroll={handleScroll} handleTouch={handleTouch} keyboardHeight={keyboardHeight}/>
|
|
72
|
-
|
|
73
|
-
{/* 폴드/태블릿 화면 오른쪽 컴포넌트 */}
|
|
74
|
-
{rightComponent && splitEnabled && (<VariantView style={styles.splitView} children={rightComponent} variantWidth={rightWidth} showsVerticalScrollIndicator={showsVerticalScrollIndicator} automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets} scrollViewDisabled={false} scrollEventThrottle={scrollEventThrottle}/>)}
|
|
75
|
-
</View>);
|
|
52
|
+
lastTouchY.current = evt.nativeEvent.pageY;
|
|
76
53
|
};
|
|
77
|
-
return (<SafeAreaView style={[
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
54
|
+
return (<SafeAreaView style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1]} edges={edges}>
|
|
55
|
+
<View style={styles.flex1}>
|
|
56
|
+
{topComponent && topComponent}
|
|
57
|
+
<ScrollView ref={scrollViewRef} style={styles.flex1} contentContainerStyle={[styles.scrollContainerStyle, { paddingBottom: Platform.OS === 'ios' ? keyboardHeight || 0 : 0 }]} bounces={false} overScrollMode="never" showsVerticalScrollIndicator={showsVerticalScrollIndicator} keyboardShouldPersistTaps="handled" automaticallyAdjustKeyboardInsets={false} onScroll={handleScroll} onTouchStart={handleTouch} scrollEventThrottle={scrollEventThrottle}>
|
|
58
|
+
<View style={[styles.flex1, props.style]}>
|
|
59
|
+
{props.children}
|
|
60
|
+
</View>
|
|
61
|
+
</ScrollView>
|
|
62
|
+
{bottomComponent && bottomComponent}
|
|
63
|
+
</View>
|
|
87
64
|
|
|
88
65
|
{(barStyle || statusBarColor || translucent) && (<StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base} translucent={translucent}/>)}
|
|
89
66
|
</SafeAreaView>);
|
|
90
67
|
});
|
|
91
68
|
export const styles = StyleSheet.create({
|
|
92
|
-
flex1: { flex: 1 },
|
|
93
|
-
scrollContainerStyle: {
|
|
94
|
-
flexGrow: 1,
|
|
95
|
-
alignItems: 'center',
|
|
96
|
-
},
|
|
97
|
-
splitContainer: {
|
|
98
|
-
flex: 1,
|
|
99
|
-
flexDirection: 'row',
|
|
100
|
-
width: '100%',
|
|
101
|
-
},
|
|
102
|
-
splitView: {
|
|
103
|
-
minHeight: '100%',
|
|
104
|
-
},
|
|
69
|
+
flex1: { flex: 1, width: '100%' },
|
|
70
|
+
scrollContainerStyle: { flexGrow: 1, alignItems: 'center', width: '100%' },
|
|
105
71
|
});
|
|
106
72
|
export default ZSContainer;
|
|
107
73
|
//# sourceMappingURL=index.js.map
|
|
@@ -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, StatusBar, StyleSheet, ActivityIndicator, ScrollView, NativeSyntheticEvent, NativeScrollEvent, Keyboard, View, DimensionValue, Platform } from 'react-native';\r\nimport { SafeAreaView } from 'react-native-safe-area-context';\r\nimport { useTheme } from '../../model/useThemeProvider';\r\nimport VariantView from './ui/VariantView';\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 automaticallyAdjustKeyboardInsets?: boolean;\r\n keyboardScrollExtraOffset?: number;\r\n translucent?: boolean;\r\n onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\r\n scrollEventThrottle?: 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 showsVerticalScrollIndicator = true,\r\n loadingComponent = <ActivityIndicator />,\r\n automaticallyAdjustKeyboardInsets = true,\r\n keyboardScrollExtraOffset,\r\n translucent,\r\n scrollEventThrottle = 100,\r\n ...props\r\n },\r\n forwardedRef\r\n) {\r\n const { palette, splitBreakpoint, splitRatio, dimensions: { height: windowHeight, width: windowWidth }, isSplitView } = useTheme();\r\n const [isDelayed, setIsDelayed] = useState(true);\r\n const [keyboardHeight, setKeyboardHeight] = useState(0);\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 splitEnabled = !!(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\r\n useEffect(() => {\r\n const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\r\n const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\r\n\r\n const keyboardShowSubscription = Keyboard.addListener(showEvent, (e) => {\r\n setKeyboardHeight(e.endCoordinates.height);\r\n if (scrollViewRef.current && keyboardScrollExtraOffset) {\r\n const screenHeight = windowHeight;\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 const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;\r\n\r\n setTimeout(() => {\r\n scrollViewRef.current?.scrollTo({\r\n y: currentScrollPosition + scrollOffset,\r\n animated: true,\r\n });\r\n }, 150);\r\n }\r\n });\r\n\r\n const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\r\n setKeyboardHeight(0);\r\n });\r\n\r\n return () => {\r\n positionRef.current = null;\r\n lastTouchY.current = null;\r\n keyboardShowSubscription.remove();\r\n keyboardHideSubscription.remove();\r\n };\r\n }, [keyboardScrollExtraOffset]);\r\n\r\n const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\r\n if (props.onScroll) props.onScroll(event);\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 = (splitEnabled ? `${splitRatio * 100}%` : '100%') as DimensionValue;\r\n const rightWidth = `${(1 - splitRatio) * 100}%` as DimensionValue;\r\n\r\n return (\r\n <View style={styles.splitContainer}>\r\n\r\n {/* 메인 컴포넌트 */}\r\n <VariantView\r\n style={props.style}\r\n children={props.children}\r\n scrollViewRef={scrollViewRef}\r\n variantWidth={leftWidth}\r\n showsVerticalScrollIndicator={showsVerticalScrollIndicator}\r\n automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets}\r\n scrollViewDisabled={scrollViewDisabled}\r\n scrollEventThrottle={scrollEventThrottle}\r\n handleScroll={handleScroll}\r\n handleTouch={handleTouch}\r\n keyboardHeight={keyboardHeight}\r\n />\r\n\r\n {/* 폴드/태블릿 화면 오른쪽 컴포넌트 */}\r\n {rightComponent && splitEnabled && (\r\n <VariantView\r\n style={styles.splitView}\r\n children={rightComponent}\r\n variantWidth={rightWidth}\r\n showsVerticalScrollIndicator={showsVerticalScrollIndicator}\r\n automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets}\r\n scrollViewDisabled={false}\r\n scrollEventThrottle={scrollEventThrottle}\r\n />\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 { width: '100%' },\r\n ]}\r\n edges={edges}\r\n >\r\n {!isDelayed && (\r\n <View\r\n style={[styles.flex1, { width: '100%' }]}\r\n >\r\n {topComponent && topComponent}\r\n {renderContent()}\r\n {!isLoader && bottomComponent && bottomComponent}\r\n </View>\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\nexport const styles = StyleSheet.create({\r\n flex1: { flex: 1 },\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, useEffect, useImperativeHandle, forwardRef, useRef, useState } from 'react';\r\nimport { ViewProps, StatusBar, StyleSheet, ScrollView, NativeSyntheticEvent, NativeScrollEvent, Keyboard, View, Platform } from 'react-native';\r\nimport { SafeAreaView } from 'react-native-safe-area-context';\r\nimport { useTheme } from '../../model/useThemeProvider';\r\n\r\nexport type ZSContainerProps = ViewProps & {\r\n backgroundColor?: string;\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 keyboardScrollExtraOffset?: number;\r\n translucent?: boolean;\r\n onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\r\n scrollEventThrottle?: 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 statusBarColor,\r\n barStyle,\r\n edges = ['top', 'bottom'],\r\n scrollViewDisabled = false,\r\n topComponent,\r\n bottomComponent,\r\n rightComponent,\r\n showsVerticalScrollIndicator = true,\r\n keyboardScrollExtraOffset = 30,\r\n translucent,\r\n scrollEventThrottle = 16,\r\n ...props\r\n },\r\n forwardedRef\r\n) {\r\n const { palette, dimensions: { height: windowHeight } } = useTheme();\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 [keyboardHeight, setKeyboardHeight] = useState<number | null>(0);\r\n\r\n useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, []);\r\n\r\n useEffect(() => {\r\n const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\r\n const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\r\n\r\n const keyboardShowSubscription = Keyboard.addListener(showEvent, (e) => {\r\n setKeyboardHeight(e.endCoordinates.height);\r\n if (scrollViewRef.current) {\r\n const screenHeight = windowHeight;\r\n const keyboardHeight = e.endCoordinates.height;\r\n const safeAreaBottom = 0;\r\n const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;\r\n const currentScrollPosition = positionRef.current || 0;\r\n const touchPosition = lastTouchY.current || 0;\r\n\r\n // touchPosition이 키보드 높이보다 아래인 경우\r\n // const isTouchPositionBelowKeyboard = touchPosition > availableScreenHeight;\r\n\r\n // 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산\r\n const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;\r\n\r\n setTimeout(() => {\r\n scrollViewRef.current?.scrollTo({\r\n y: currentScrollPosition + scrollOffset,\r\n animated: true,\r\n });\r\n }, 100);\r\n }\r\n });\r\n\r\n const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\r\n setKeyboardHeight(0);\r\n });\r\n\r\n return () => {\r\n positionRef.current = null;\r\n lastTouchY.current = null;\r\n keyboardShowSubscription.remove();\r\n keyboardHideSubscription.remove();\r\n };\r\n }, [keyboardScrollExtraOffset]);\r\n\r\n const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {\r\n if (props.onScroll) props.onScroll(event);\r\n positionRef.current = event.nativeEvent.contentOffset.y;\r\n };\r\n\r\n const handleTouch = (evt: any) => {\r\n lastTouchY.current = evt.nativeEvent.pageY;\r\n };\r\n\r\n return (\r\n <SafeAreaView\r\n style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1]}\r\n edges={edges}\r\n >\r\n <View style={styles.flex1}>\r\n {topComponent && topComponent}\r\n <ScrollView\r\n ref={scrollViewRef}\r\n style={styles.flex1}\r\n contentContainerStyle={[styles.scrollContainerStyle, { paddingBottom: Platform.OS === 'ios' ? keyboardHeight || 0 : 0 }]}\r\n bounces={false}\r\n overScrollMode=\"never\"\r\n showsVerticalScrollIndicator={showsVerticalScrollIndicator}\r\n keyboardShouldPersistTaps=\"handled\"\r\n automaticallyAdjustKeyboardInsets={false}\r\n onScroll={handleScroll}\r\n onTouchStart={handleTouch}\r\n scrollEventThrottle={scrollEventThrottle}\r\n >\r\n <View style={[styles.flex1, props.style]}>\r\n {props.children}\r\n </View>\r\n </ScrollView>\r\n {bottomComponent && bottomComponent}\r\n </View>\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\nexport const styles = StyleSheet.create({\r\n flex1: { flex: 1, width: '100%' },\r\n scrollContainerStyle: { flexGrow: 1, alignItems: 'center', width: '100%' },\r\n});\r\n\r\nexport default ZSContainer;\r\n"]}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import { styles } from '..';
|
|
2
1
|
import { ScrollView, View } from 'react-native';
|
|
3
2
|
export default function VariantView({ children, scrollViewDisabled, style, scrollViewRef, variantWidth, showsVerticalScrollIndicator, automaticallyAdjustKeyboardInsets, handleScroll, handleTouch, scrollEventThrottle, keyboardHeight }) {
|
|
4
3
|
return (scrollViewDisabled ? (<View style={[style, { width: variantWidth }]}>
|
|
5
4
|
{children}
|
|
6
|
-
</View>) : (<ScrollView ref={scrollViewRef} style={{ width: variantWidth }}
|
|
7
|
-
|
|
5
|
+
</View>) : (<ScrollView ref={scrollViewRef} style={{ width: variantWidth }}
|
|
6
|
+
// contentContainerStyle={[styles.scrollContainerStyle, { paddingBottom: keyboardHeight || 0 }]}
|
|
7
|
+
bounces={false} overScrollMode="never" showsVerticalScrollIndicator={showsVerticalScrollIndicator} keyboardShouldPersistTaps="handled" automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets} onScroll={handleScroll} onTouchStart={handleTouch} scrollEventThrottle={scrollEventThrottle}>
|
|
8
|
+
{/* <View style={[styles.splitView, style, { width: '100%' }]}>
|
|
8
9
|
{children}
|
|
9
|
-
</View>
|
|
10
|
+
</View> */}
|
|
10
11
|
</ScrollView>));
|
|
11
12
|
}
|
|
12
13
|
//# sourceMappingURL=VariantView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VariantView.js","sourceRoot":"","sources":["../../../../src/ui/ZSContainer/ui/VariantView.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"VariantView.js","sourceRoot":"","sources":["../../../../src/ui/ZSContainer/ui/VariantView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAA2C,IAAI,EAAwC,MAAM,cAAc,CAAC;AAgB/H,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,4BAA4B,EAAE,iCAAiC,EAAE,YAAY,EAAE,WAAW,EAAE,mBAAmB,EAAE,cAAc,EAAoB;IACzP,OAAO,CACL,kBAAkB,CAAC,CAAC,CAAC,CACnB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC,CAC5C;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,CAAC,UAAU,CACT,GAAG,CAAC,CAAC,aAAa,CAAC,CACnB,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;IAC/B,gGAAgG;IAChG,OAAO,CAAC,CAAC,KAAK,CAAC,CACf,cAAc,CAAC,OAAO,CACtB,4BAA4B,CAAC,CAAC,4BAA4B,CAAC,CAC3D,yBAAyB,CAAC,SAAS,CACnC,iCAAiC,CAAC,CAAC,iCAAiC,CAAC,CACrE,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,YAAY,CAAC,CAAC,WAAW,CAAC,CAC1B,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,CAEzC;QAAA,CAAC;;kBAES,CACZ;MAAA,EAAE,UAAU,CAAC,CACd,CACF,CAAA;AACH,CAAC","sourcesContent":["import { styles } from '..';\nimport { ScrollView, NativeSyntheticEvent, NativeScrollEvent, View, DimensionValue, StyleProp, ViewStyle } from 'react-native';\n\ninterface VariantViewProps {\n children: React.ReactNode;\n scrollViewDisabled?: boolean;\n style: StyleProp<ViewStyle>;\n scrollViewRef?: React.RefObject<ScrollView>;\n variantWidth?: DimensionValue;\n showsVerticalScrollIndicator?: boolean;\n automaticallyAdjustKeyboardInsets?: boolean;\n handleScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n handleTouch?: (event: any) => void;\n scrollEventThrottle?: number;\n keyboardHeight?: number;\n}\n\nexport default function VariantView({ children, scrollViewDisabled, style, scrollViewRef, variantWidth, showsVerticalScrollIndicator, automaticallyAdjustKeyboardInsets, handleScroll, handleTouch, scrollEventThrottle, keyboardHeight }: VariantViewProps) {\n return (\n scrollViewDisabled ? (\n <View style={[style, { width: variantWidth }]}>\n {children}\n </View>\n ) : (\n <ScrollView\n ref={scrollViewRef}\n style={{ width: variantWidth }}\n // contentContainerStyle={[styles.scrollContainerStyle, { paddingBottom: keyboardHeight || 0 }]}\n bounces={false}\n overScrollMode=\"never\"\n showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n keyboardShouldPersistTaps=\"handled\"\n automaticallyAdjustKeyboardInsets={automaticallyAdjustKeyboardInsets}\n onScroll={handleScroll}\n onTouchStart={handleTouch}\n scrollEventThrottle={scrollEventThrottle}\n >\n {/* <View style={[styles.splitView, style, { width: '100%' }]}>\n {children}\n </View> */}\n </ScrollView>\n )\n )\n}"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@0610studio/zs-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "EXPO ZS-UI",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
],
|
|
14
14
|
"scripts": {
|
|
15
15
|
"start:android": "cd example && yarn install && npx expo run:android",
|
|
16
|
-
"start:ios": "cd example && yarn install && npx expo run:ios",
|
|
16
|
+
"start:ios": "cd example && yarn install && npx expo run:ios --device",
|
|
17
17
|
"build": "expo-module build",
|
|
18
18
|
"prepare": "expo-module prepare",
|
|
19
19
|
"---------------------------------------------------------------------------": "",
|
package/build/ui/index.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import ZSView from './ZSView';
|
|
2
|
-
import AnimatedWrapper from './atoms/AnimatedWrapper';
|
|
3
|
-
import TextAtom from './atoms/TextAtom';
|
|
4
|
-
import ZSContainer from './ZSContainer';
|
|
5
|
-
import ZSPressable from './ZSPressable';
|
|
6
|
-
import ZSText from './ZSText';
|
|
7
|
-
import ThrottleButton from './ThrottleButton';
|
|
8
|
-
import ZSTextField from './ZSTextField';
|
|
9
|
-
import ZSRadioGroup from './ZSRadioGroup';
|
|
10
|
-
import ZSBottomCta from './ZSBottomCta';
|
|
11
|
-
import * as types from './types';
|
|
12
|
-
export { ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomCta, types };
|
|
13
|
-
//# sourceMappingURL=index.d.ts.map
|
package/build/ui/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,eAAe,MAAM,yBAAyB,CAAC;AACtD,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,WAAW,EACX,KAAK,EACN,CAAC"}
|
package/build/ui/index.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import ZSView from './ZSView';
|
|
2
|
-
import AnimatedWrapper from './atoms/AnimatedWrapper';
|
|
3
|
-
import TextAtom from './atoms/TextAtom';
|
|
4
|
-
import ZSContainer from './ZSContainer';
|
|
5
|
-
import ZSPressable from './ZSPressable';
|
|
6
|
-
import ZSText from './ZSText';
|
|
7
|
-
import ThrottleButton from './ThrottleButton';
|
|
8
|
-
import ZSTextField from './ZSTextField';
|
|
9
|
-
import ZSRadioGroup from './ZSRadioGroup';
|
|
10
|
-
import ZSBottomCta from './ZSBottomCta';
|
|
11
|
-
import * as types from './types';
|
|
12
|
-
export { ZSView, AnimatedWrapper, TextAtom, ZSContainer, ZSPressable, ZSText, ThrottleButton, ZSTextField, ZSRadioGroup, ZSBottomCta, types };
|
|
13
|
-
//# sourceMappingURL=index.js.map
|
package/build/ui/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,eAAe,MAAM,yBAAyB,CAAC;AACtD,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAEjC,OAAO,EACL,MAAM,EACN,eAAe,EACf,QAAQ,EACR,WAAW,EACX,WAAW,EACX,MAAM,EACN,cAAc,EACd,WAAW,EACX,YAAY,EACZ,WAAW,EACX,KAAK,EACN,CAAC","sourcesContent":["import ZSView from './ZSView';\nimport AnimatedWrapper from './atoms/AnimatedWrapper';\nimport TextAtom from './atoms/TextAtom';\nimport ZSContainer from './ZSContainer';\nimport ZSPressable from './ZSPressable';\nimport ZSText from './ZSText';\nimport ThrottleButton from './ThrottleButton';\nimport ZSTextField from './ZSTextField';\nimport ZSRadioGroup from './ZSRadioGroup';\nimport ZSBottomCta from './ZSBottomCta';\nimport * as types from './types';\n\nexport {\n ZSView,\n AnimatedWrapper,\n TextAtom,\n ZSContainer,\n ZSPressable,\n ZSText,\n ThrottleButton,\n ZSTextField,\n ZSRadioGroup,\n ZSBottomCta,\n types\n};"]}
|