@fountain-ui/core 3.0.0-alpha.48 → 3.0.0-alpha.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/commonjs/Dialog/Dialog.js +1 -0
- package/build/commonjs/Dialog/Dialog.js.map +1 -1
- package/build/commonjs/Modal/Modal.js +28 -19
- package/build/commonjs/Modal/Modal.js.map +1 -1
- package/build/commonjs/Modal/ModalProps.js.map +1 -1
- package/build/commonjs/Toolbar/BackButton/BackButton.js +2 -2
- package/build/commonjs/Toolbar/BackButton/BackButton.js.map +1 -1
- package/build/module/Dialog/Dialog.js +1 -0
- package/build/module/Dialog/Dialog.js.map +1 -1
- package/build/module/Modal/Modal.js +29 -20
- package/build/module/Modal/Modal.js.map +1 -1
- package/build/module/Modal/ModalProps.js.map +1 -1
- package/build/module/Toolbar/BackButton/BackButton.js +2 -2
- package/build/module/Toolbar/BackButton/BackButton.js.map +1 -1
- package/build/typescript/Modal/ModalProps.d.ts +8 -0
- package/package.json +2 -2
- package/src/Dialog/Dialog.tsx +1 -0
- package/src/Modal/Modal.tsx +11 -3
- package/src/Modal/ModalProps.ts +9 -0
- package/src/Toolbar/BackButton/BackButton.tsx +4 -6
|
@@ -118,6 +118,7 @@ function Dialog(props) {
|
|
|
118
118
|
const paperStyle = (0, _styles.css)([styles.paper, styleProp]);
|
|
119
119
|
return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
|
|
120
120
|
animationStyle: styles.container,
|
|
121
|
+
avoidKeyboard: size !== 'full',
|
|
121
122
|
closeAnimation: closeAnimation,
|
|
122
123
|
hideBackdrop: hideBackdrop || animationType === _Modal.ANIMATION_TYPE.FADE,
|
|
123
124
|
initialOpacity: initialOpacity,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["TOP_ELEMENT_HIDDEN_OFFSET","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","useDialogStyle","height","screenHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","topElementHeightWithoutOffset","Math","max","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","css","paper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport ShadowView from '../ShadowView';\nimport type DialogProps from './DialogProps';\nimport { DialogProvider } from './DialogContext';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n const {\n animationType = ANIMATION_TYPE.SLIDE,\n children,\n hideBackdrop,\n onClose,\n style: styleProp,\n size = 'medium',\n visible,\n topElement,\n ...otherProps\n } = props;\n\n const styles = useDialogStyle(size);\n\n const { height: screenHeight } = useWindowDimensions();\n\n const [topElementHeight, setTopElementHeight] = useState(0);\n const handleTopElementLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setTopElementHeight(height);\n };\n\n const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n if (topElementHeight === 0) {\n return [];\n }\n\n const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n\n return [{\n toValue: (topElementHeightWithoutOffset) / 2,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [topElementHeight]);\n\n const closeAnimation = useMemo<AnimationUnit[]>(() => {\n if (animationType === ANIMATION_TYPE.FADE) {\n return [{\n toValue: 0,\n type: ANIMATION_TYPE.FADE,\n }];\n } else if (animationType === ANIMATION_TYPE.SLIDE) {\n return [\n {\n toValue: screenHeight,\n type: ANIMATION_TYPE.SLIDE,\n },\n {\n duration: 150,\n toValue: 0,\n type: ANIMATION_TYPE.FADE,\n },\n ];\n }\n\n return [{\n duration: 150,\n toValue: screenHeight,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [animationType, screenHeight]);\n\n const openAnimation = useMemo<AnimationUnit[]>(() => {\n if (animationType === ANIMATION_TYPE.FADE) {\n return [{\n toValue: 1,\n type: ANIMATION_TYPE.FADE,\n }];\n } else if (animationType === ANIMATION_TYPE.SLIDE) {\n return [\n {\n toValue: 0,\n type: ANIMATION_TYPE.SLIDE,\n },\n {\n delay: 50,\n duration: 150,\n toValue: 1,\n type: ANIMATION_TYPE.FADE,\n },\n ];\n }\n\n return [{\n toValue: 0,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [animationType]);\n\n const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;\n\n const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n const paperStyle = css([\n styles.paper,\n styleProp,\n ]);\n\n return (\n <Modal\n animationStyle={styles.container}\n closeAnimation={closeAnimation}\n hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n initialOpacity={initialOpacity}\n initialTranslateY={initialTranslateY}\n onClose={onClose}\n openAnimation={openAnimation}\n offsetAnimation={offsetAnimation}\n visible={visible}\n style={styles.root}\n {...otherProps}\n >\n <DialogProvider value={{ size }}>\n {topElement ? (\n <Column style={styles.topElementContainer}>\n <Column\n style={styles.topElementContent}\n onLayout={handleTopElementLayout}\n >\n {topElement}\n </Column>\n </Column>\n ) : null}\n\n <ShadowView\n variant={600}\n style={paperStyle}\n >\n {children}\n </ShadowView>\n </DialogProvider>\n </Modal>\n );\n}\n"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["TOP_ELEMENT_HIDDEN_OFFSET","Dialog","props","animationType","ANIMATION_TYPE","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","useDialogStyle","height","screenHeight","useWindowDimensions","topElementHeight","setTopElementHeight","useState","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","useMemo","topElementHeightWithoutOffset","Math","max","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","css","paper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport ShadowView from '../ShadowView';\nimport type DialogProps from './DialogProps';\nimport { DialogProvider } from './DialogContext';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n const {\n animationType = ANIMATION_TYPE.SLIDE,\n children,\n hideBackdrop,\n onClose,\n style: styleProp,\n size = 'medium',\n visible,\n topElement,\n ...otherProps\n } = props;\n\n const styles = useDialogStyle(size);\n\n const { height: screenHeight } = useWindowDimensions();\n\n const [topElementHeight, setTopElementHeight] = useState(0);\n const handleTopElementLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setTopElementHeight(height);\n };\n\n const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n if (topElementHeight === 0) {\n return [];\n }\n\n const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n\n return [{\n toValue: (topElementHeightWithoutOffset) / 2,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [topElementHeight]);\n\n const closeAnimation = useMemo<AnimationUnit[]>(() => {\n if (animationType === ANIMATION_TYPE.FADE) {\n return [{\n toValue: 0,\n type: ANIMATION_TYPE.FADE,\n }];\n } else if (animationType === ANIMATION_TYPE.SLIDE) {\n return [\n {\n toValue: screenHeight,\n type: ANIMATION_TYPE.SLIDE,\n },\n {\n duration: 150,\n toValue: 0,\n type: ANIMATION_TYPE.FADE,\n },\n ];\n }\n\n return [{\n duration: 150,\n toValue: screenHeight,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [animationType, screenHeight]);\n\n const openAnimation = useMemo<AnimationUnit[]>(() => {\n if (animationType === ANIMATION_TYPE.FADE) {\n return [{\n toValue: 1,\n type: ANIMATION_TYPE.FADE,\n }];\n } else if (animationType === ANIMATION_TYPE.SLIDE) {\n return [\n {\n toValue: 0,\n type: ANIMATION_TYPE.SLIDE,\n },\n {\n delay: 50,\n duration: 150,\n toValue: 1,\n type: ANIMATION_TYPE.FADE,\n },\n ];\n }\n\n return [{\n toValue: 0,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [animationType]);\n\n const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;\n\n const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n const paperStyle = css([\n styles.paper,\n styleProp,\n ]);\n\n return (\n <Modal\n animationStyle={styles.container}\n avoidKeyboard={size !== 'full'}\n closeAnimation={closeAnimation}\n hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n initialOpacity={initialOpacity}\n initialTranslateY={initialTranslateY}\n onClose={onClose}\n openAnimation={openAnimation}\n offsetAnimation={offsetAnimation}\n visible={visible}\n style={styles.root}\n {...otherProps}\n >\n <DialogProvider value={{ size }}>\n {topElement ? (\n <Column style={styles.topElementContainer}>\n <Column\n style={styles.topElementContent}\n onLayout={handleTopElementLayout}\n >\n {topElement}\n </Column>\n </Column>\n ) : null}\n\n <ShadowView\n variant={600}\n style={paperStyle}\n >\n {children}\n </ShadowView>\n </DialogProvider>\n </Modal>\n );\n}\n"],"mappings":"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"}
|
|
@@ -33,6 +33,7 @@ exports.createModalCloseEvent = createModalCloseEvent;
|
|
|
33
33
|
function Modal(props) {
|
|
34
34
|
const {
|
|
35
35
|
animationStyle,
|
|
36
|
+
avoidKeyboard = false,
|
|
36
37
|
backdropOpacity = 0.75,
|
|
37
38
|
children,
|
|
38
39
|
closeAnimation,
|
|
@@ -86,25 +87,33 @@ function Modal(props) {
|
|
|
86
87
|
}
|
|
87
88
|
}
|
|
88
89
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
90
|
+
const Container = avoidKeyboard ? _reactNative.KeyboardAvoidingView : _reactNative.View;
|
|
91
|
+
const containerProps = avoidKeyboard ? {
|
|
92
|
+
behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : undefined
|
|
93
|
+
} : {};
|
|
94
|
+
return (
|
|
95
|
+
/*#__PURE__*/
|
|
96
|
+
// @ts-expect-error
|
|
97
|
+
_react.default.createElement(Container, _extends({}, containerProps, {
|
|
98
|
+
style: (0, _styles.css)([_styles.StyleSheet.absoluteFill, elevationStyle, style])
|
|
99
|
+
}, otherProps), !hideBackdrop && visible ? /*#__PURE__*/_react.default.createElement(_SimpleBackdrop.default, {
|
|
100
|
+
onPress: handleBackdropPress,
|
|
101
|
+
opacity: backdropOpacity
|
|
102
|
+
}) : null, !disableAnimation ? /*#__PURE__*/_react.default.createElement(_AnimatedContainer.default, {
|
|
103
|
+
children: children,
|
|
104
|
+
closeAnimation: closeAnimation,
|
|
105
|
+
initialOpacity: initialOpacity,
|
|
106
|
+
initialTranslateY: initialTranslateY,
|
|
107
|
+
onEnter: onEnter,
|
|
108
|
+
onEntered: onEntered,
|
|
109
|
+
onExit: onExit,
|
|
110
|
+
onExited: onExited,
|
|
111
|
+
openAnimation: openAnimation,
|
|
112
|
+
offsetAnimation: offsetAnimation,
|
|
113
|
+
style: animationStyle,
|
|
114
|
+
visible: visible
|
|
115
|
+
}) : children)
|
|
116
|
+
);
|
|
108
117
|
}
|
|
109
118
|
|
|
110
119
|
;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","offsetAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","React","useState","elevationStyle","useElevationStyle","css","StyleSheet","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n metadata: {\n reason: ModalCloseReasonType\n };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n metadata: {\n reason,\n },\n});\n\nexport default function Modal(props: ModalProps) {\n const {\n animationStyle,\n backdropOpacity = 0.75,\n children,\n closeAnimation,\n disableAnimation = false,\n hideBackdrop = false,\n initialOpacity,\n initialTranslateY,\n onClose,\n onEnter: onEnterProp,\n onEntered: onEnteredProp,\n onExit: onExitProp,\n onExited: onExitedProp,\n openAnimation,\n offsetAnimation,\n style,\n visible,\n ...otherProps\n } = props;\n\n const handleBackdropPress = () => {\n if (onClose) {\n onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n }\n };\n\n const [exited, setExited] = React.useState(true);\n\n const elevationStyle = useElevationStyle(6);\n\n const onEnter = () => {\n setExited(false);\n onEnterProp?.();\n };\n\n const onEntered = () => {\n onEnteredProp?.();\n };\n\n const onExit = () => {\n onExitProp?.();\n };\n\n const onExited = () => {\n setExited(true);\n onExitedProp?.();\n };\n\n if (!visible) {\n if (disableAnimation || exited) {\n return null;\n }\n }\n\n return (\n <
|
|
1
|
+
{"version":3,"names":["createModalCloseEvent","reason","metadata","Modal","props","animationStyle","avoidKeyboard","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","offsetAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","React","useState","elevationStyle","useElevationStyle","Container","KeyboardAvoidingView","View","containerProps","behavior","Platform","OS","undefined","css","StyleSheet","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { KeyboardAvoidingView, Platform, View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n metadata: {\n reason: ModalCloseReasonType\n };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n metadata: {\n reason,\n },\n});\n\nexport default function Modal(props: ModalProps) {\n const {\n animationStyle,\n avoidKeyboard = false,\n backdropOpacity = 0.75,\n children,\n closeAnimation,\n disableAnimation = false,\n hideBackdrop = false,\n initialOpacity,\n initialTranslateY,\n onClose,\n onEnter: onEnterProp,\n onEntered: onEnteredProp,\n onExit: onExitProp,\n onExited: onExitedProp,\n openAnimation,\n offsetAnimation,\n style,\n visible,\n ...otherProps\n } = props;\n\n const handleBackdropPress = () => {\n if (onClose) {\n onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n }\n };\n\n const [exited, setExited] = React.useState(true);\n\n const elevationStyle = useElevationStyle(6);\n\n const onEnter = () => {\n setExited(false);\n onEnterProp?.();\n };\n\n const onEntered = () => {\n onEnteredProp?.();\n };\n\n const onExit = () => {\n onExitProp?.();\n };\n\n const onExited = () => {\n setExited(true);\n onExitedProp?.();\n };\n\n if (!visible) {\n if (disableAnimation || exited) {\n return null;\n }\n }\n\n const Container = avoidKeyboard ? KeyboardAvoidingView : View;\n const containerProps = avoidKeyboard ? {\n behavior: Platform.OS === 'ios' ? 'padding' : undefined,\n } : {};\n\n return (\n // @ts-expect-error\n <Container\n {...containerProps}\n style={css([\n StyleSheet.absoluteFill,\n elevationStyle,\n style,\n ])}\n {...otherProps}\n >\n {(!hideBackdrop && visible) ? (\n <SimpleBackdrop\n onPress={handleBackdropPress}\n opacity={backdropOpacity}\n />\n ) : null}\n\n {!disableAnimation ? (\n <AnimatedContainer\n children={children}\n closeAnimation={closeAnimation}\n initialOpacity={initialOpacity}\n initialTranslateY={initialTranslateY}\n onEnter={onEnter}\n onEntered={onEntered}\n onExit={onExit}\n onExited={onExited}\n openAnimation={openAnimation}\n offsetAnimation={offsetAnimation}\n style={animationStyle}\n visible={visible}\n />\n ) : children}\n </Container>\n );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAUO,MAAMA,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;;;;AAMQ,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,aAAa,GAAG,KAFd;IAGFC,eAAe,GAAG,IAHhB;IAIFC,QAJE;IAKFC,cALE;IAMFC,gBAAgB,GAAG,KANjB;IAOFC,YAAY,GAAG,KAPb;IAQFC,cARE;IASFC,iBATE;IAUFC,OAVE;IAWFC,OAAO,EAAEC,WAXP;IAYFC,SAAS,EAAEC,aAZT;IAaFC,MAAM,EAAEC,UAbN;IAcFC,QAAQ,EAAEC,YAdR;IAeFC,aAfE;IAgBFC,eAhBE;IAiBFC,KAjBE;IAkBFC,OAlBE;IAmBF,GAAGC;EAnBD,IAoBFvB,KApBJ;;EAsBA,MAAMwB,mBAAmB,GAAG,MAAM;IAC9B,IAAId,OAAJ,EAAa;MACTA,OAAO,CAACd,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAAC6B,MAAD,EAASC,SAAT,IAAsBC,cAAA,CAAMC,QAAN,CAAe,IAAf,CAA5B;;EAEA,MAAMC,cAAc,GAAG,IAAAC,wBAAA,EAAkB,CAAlB,CAAvB;;EAEA,MAAMnB,OAAO,GAAG,MAAM;IAClBe,SAAS,CAAC,KAAD,CAAT;IACAd,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;EACd,CAHD;;EAKA,MAAMC,SAAS,GAAG,MAAM;IACpBC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;EAChB,CAFD;;EAIA,MAAMC,MAAM,GAAG,MAAM;IACjBC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;EACb,CAFD;;EAIA,MAAMC,QAAQ,GAAG,MAAM;IACnBS,SAAS,CAAC,IAAD,CAAT;IACAR,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY;EACf,CAHD;;EAKA,IAAI,CAACI,OAAL,EAAc;IACV,IAAIhB,gBAAgB,IAAImB,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,MAAMM,SAAS,GAAG7B,aAAa,GAAG8B,iCAAH,GAA0BC,iBAAzD;EACA,MAAMC,cAAc,GAAGhC,aAAa,GAAG;IACnCiC,QAAQ,EAAEC,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB,SAAxB,GAAoCC;EADX,CAAH,GAEhC,EAFJ;EAIA;IAAA;IACI;IACA,6BAAC,SAAD,eACQJ,cADR;MAEI,KAAK,EAAE,IAAAK,WAAA,EAAI,CACPC,kBAAA,CAAWC,YADJ,EAEPZ,cAFO,EAGPR,KAHO,CAAJ;IAFX,GAOQE,UAPR,GASM,CAAChB,YAAD,IAAiBe,OAAlB,gBACG,6BAAC,uBAAD;MACI,OAAO,EAAEE,mBADb;MAEI,OAAO,EAAErB;IAFb,EADH,GAKG,IAdR,EAgBK,CAACG,gBAAD,gBACG,6BAAC,0BAAD;MACI,QAAQ,EAAEF,QADd;MAEI,cAAc,EAAEC,cAFpB;MAGI,cAAc,EAAEG,cAHpB;MAII,iBAAiB,EAAEC,iBAJvB;MAKI,OAAO,EAAEE,OALb;MAMI,SAAS,EAAEE,SANf;MAOI,MAAM,EAAEE,MAPZ;MAQI,QAAQ,EAAEE,QARd;MASI,aAAa,EAAEE,aATnB;MAUI,eAAe,EAAEC,eAVrB;MAWI,KAAK,EAAEnB,cAXX;MAYI,OAAO,EAAEqB;IAZb,EADH,GAeGlB,QA/BR;EAFJ;AAoCH;;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n SLIDE = 'slide',\n FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n /**\n * Type of animation used when the dialog opens and closes.\n */\n type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n /**\n * Style object provided to animation component.\n */\n animationStyle?: ComponentProps['style'];\n\n /**\n * Opacity for backdrop.\n * @default 0.5\n */\n backdropOpacity?: number;\n\n /**\n * A single child content element.\n */\n children: React.ReactElement;\n\n /**\n * If `true`, the animation is disabled.\n * @default false\n */\n disableAnimation?: boolean;\n\n /**\n * Animation used when the modal closes.\n */\n closeAnimation?: AnimationUnit[] | undefined;\n\n /**\n * If `true`, the backdrop is not rendered.\n * @default false\n */\n hideBackdrop?: boolean;\n\n /**\n * Set the initial value of opacity for animating.\n */\n initialOpacity?: number | undefined;\n\n /**\n * Set the initial value of transition y for animating.\n */\n initialTranslateY?: number | undefined;\n\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose?: (event?: ModalCloseEvent) => void;\n\n /**\n * Callback fired when the enter animation will start.\n */\n onEnter?: () => void | undefined;\n\n /**\n * Callback fired when the enter animation is completed.\n */\n onEntered?: () => void | undefined;\n\n /**\n * Callback fired when the exit animation will start.\n */\n onExit?: () => void | undefined;\n\n /**\n * Callback fired when the exit animation is completed.\n */\n onExited?: () => void | undefined;\n\n /**\n * Animation used when the modal opens.\n */\n openAnimation?: AnimationUnit[] | undefined;\n\n /**\n * Additional offset animation applied when the modal opens.\n */\n offsetAnimation?: AnimationUnit[] | undefined;\n\n /**\n * If `true`, the modal is visible.\n */\n visible: boolean;\n}> {}\n"],"mappings":";;;;;;IAMkBA,c;;;WAAAA,c;EAAAA,c;EAAAA,c;GAAAA,c,8BAAAA,c"}
|
|
1
|
+
{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n SLIDE = 'slide',\n FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n /**\n * Type of animation used when the dialog opens and closes.\n */\n type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n /**\n * Style object provided to animation component.\n */\n animationStyle?: ComponentProps['style'];\n\n /**\n * Opacity for backdrop.\n * @default 0.5\n */\n backdropOpacity?: number;\n\n /**\n * A single child content element.\n */\n children: React.ReactElement;\n\n /**\n * If `true`, the modal wraps its content in a `KeyboardAvoidingView` so\n * that on iOS the visible area shrinks when the software keyboard appears.\n * Intended for centered modals; leave `false` for bottom-anchored or\n * full-screen overlays that manage their own keyboard handling.\n * @default false\n */\n avoidKeyboard?: boolean;\n\n /**\n * If `true`, the animation is disabled.\n * @default false\n */\n disableAnimation?: boolean;\n\n /**\n * Animation used when the modal closes.\n */\n closeAnimation?: AnimationUnit[] | undefined;\n\n /**\n * If `true`, the backdrop is not rendered.\n * @default false\n */\n hideBackdrop?: boolean;\n\n /**\n * Set the initial value of opacity for animating.\n */\n initialOpacity?: number | undefined;\n\n /**\n * Set the initial value of transition y for animating.\n */\n initialTranslateY?: number | undefined;\n\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose?: (event?: ModalCloseEvent) => void;\n\n /**\n * Callback fired when the enter animation will start.\n */\n onEnter?: () => void | undefined;\n\n /**\n * Callback fired when the enter animation is completed.\n */\n onEntered?: () => void | undefined;\n\n /**\n * Callback fired when the exit animation will start.\n */\n onExit?: () => void | undefined;\n\n /**\n * Callback fired when the exit animation is completed.\n */\n onExited?: () => void | undefined;\n\n /**\n * Animation used when the modal opens.\n */\n openAnimation?: AnimationUnit[] | undefined;\n\n /**\n * Additional offset animation applied when the modal opens.\n */\n offsetAnimation?: AnimationUnit[] | undefined;\n\n /**\n * If `true`, the modal is visible.\n */\n visible: boolean;\n}> {}\n"],"mappings":";;;;;;IAMkBA,c;;;WAAAA,c;EAAAA,c;EAAAA,c;GAAAA,c,8BAAAA,c"}
|
|
@@ -39,9 +39,9 @@ function BackButton(props) {
|
|
|
39
39
|
const rootStyle = (0, _styles.css)([styles.root, styleProp]);
|
|
40
40
|
return /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
|
|
41
41
|
style: rootStyle
|
|
42
|
-
}, otherProps), /*#__PURE__*/_react.default.createElement(
|
|
42
|
+
}, otherProps), /*#__PURE__*/_react.default.createElement(_internal.AppBarChevronLeft, {
|
|
43
43
|
height: 24,
|
|
44
44
|
width: 24
|
|
45
|
-
}))
|
|
45
|
+
}));
|
|
46
46
|
}
|
|
47
47
|
//# sourceMappingURL=BackButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styles","StyleSheet","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle","css"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport IconButton from '../../IconButton';\nimport { AppBarChevronLeft } from '../../internal';\nimport type BackButtonProps from './BackButtonProps';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n root: {\n height: 40,\n left: 4,\n paddingLeft: 5,\n paddingRight: 11,\n paddingVertical: 8,\n position: 'absolute',\n width: 40,\n },\n});\n\nexport default function BackButton(props: BackButtonProps) {\n const {\n style: styleProp,\n ...otherProps\n } = props;\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n return (\n <IconButton\n style={rootStyle}\n {...otherProps}\n >\n <
|
|
1
|
+
{"version":3,"names":["styles","StyleSheet","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle","css"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport IconButton from '../../IconButton';\nimport { AppBarChevronLeft } from '../../internal';\nimport type BackButtonProps from './BackButtonProps';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n root: {\n height: 40,\n left: 4,\n paddingLeft: 5,\n paddingRight: 11,\n paddingVertical: 8,\n position: 'absolute',\n width: 40,\n },\n});\n\nexport default function BackButton(props: BackButtonProps) {\n const {\n style: styleProp,\n ...otherProps\n } = props;\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n return (\n <IconButton\n style={rootStyle}\n {...otherProps}\n >\n <AppBarChevronLeft\n height={24}\n width={24}\n />\n </IconButton>\n );\n}\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,MAAM,GAAGC,uBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,CAFJ;IAGFC,WAAW,EAAE,CAHX;IAIFC,YAAY,EAAE,EAJZ;IAKFC,eAAe,EAAE,CALf;IAMFC,QAAQ,EAAE,UANR;IAOFC,KAAK,EAAE;EAPL;AADuB,CAAlB,CAAf;;AAYe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAG,IAAAC,WAAA,EAAI,CAClBjB,MAAM,CAACG,IADW,EAElBW,SAFkB,CAAJ,CAAlB;EAKA,oBACI,6BAAC,mBAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,6BAAC,2BAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EAJJ,CADJ;AAWH"}
|
|
@@ -96,6 +96,7 @@ export default function Dialog(props) {
|
|
|
96
96
|
const paperStyle = css([styles.paper, styleProp]);
|
|
97
97
|
return /*#__PURE__*/React.createElement(Modal, _extends({
|
|
98
98
|
animationStyle: styles.container,
|
|
99
|
+
avoidKeyboard: size !== 'full',
|
|
99
100
|
closeAnimation: closeAnimation,
|
|
100
101
|
hideBackdrop: hideBackdrop || animationType === ANIMATION_TYPE.FADE,
|
|
101
102
|
initialOpacity: initialOpacity,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useMemo","useState","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","ShadowView","DialogProvider","useDialogStyle","TOP_ELEMENT_HIDDEN_OFFSET","Dialog","props","animationType","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","height","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","topElementHeightWithoutOffset","Math","max","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","paper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport ShadowView from '../ShadowView';\nimport type DialogProps from './DialogProps';\nimport { DialogProvider } from './DialogContext';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n const {\n animationType = ANIMATION_TYPE.SLIDE,\n children,\n hideBackdrop,\n onClose,\n style: styleProp,\n size = 'medium',\n visible,\n topElement,\n ...otherProps\n } = props;\n\n const styles = useDialogStyle(size);\n\n const { height: screenHeight } = useWindowDimensions();\n\n const [topElementHeight, setTopElementHeight] = useState(0);\n const handleTopElementLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setTopElementHeight(height);\n };\n\n const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n if (topElementHeight === 0) {\n return [];\n }\n\n const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n\n return [{\n toValue: (topElementHeightWithoutOffset) / 2,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [topElementHeight]);\n\n const closeAnimation = useMemo<AnimationUnit[]>(() => {\n if (animationType === ANIMATION_TYPE.FADE) {\n return [{\n toValue: 0,\n type: ANIMATION_TYPE.FADE,\n }];\n } else if (animationType === ANIMATION_TYPE.SLIDE) {\n return [\n {\n toValue: screenHeight,\n type: ANIMATION_TYPE.SLIDE,\n },\n {\n duration: 150,\n toValue: 0,\n type: ANIMATION_TYPE.FADE,\n },\n ];\n }\n\n return [{\n duration: 150,\n toValue: screenHeight,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [animationType, screenHeight]);\n\n const openAnimation = useMemo<AnimationUnit[]>(() => {\n if (animationType === ANIMATION_TYPE.FADE) {\n return [{\n toValue: 1,\n type: ANIMATION_TYPE.FADE,\n }];\n } else if (animationType === ANIMATION_TYPE.SLIDE) {\n return [\n {\n toValue: 0,\n type: ANIMATION_TYPE.SLIDE,\n },\n {\n delay: 50,\n duration: 150,\n toValue: 1,\n type: ANIMATION_TYPE.FADE,\n },\n ];\n }\n\n return [{\n toValue: 0,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [animationType]);\n\n const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;\n\n const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n const paperStyle = css([\n styles.paper,\n styleProp,\n ]);\n\n return (\n <Modal\n animationStyle={styles.container}\n closeAnimation={closeAnimation}\n hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n initialOpacity={initialOpacity}\n initialTranslateY={initialTranslateY}\n onClose={onClose}\n openAnimation={openAnimation}\n offsetAnimation={offsetAnimation}\n visible={visible}\n style={styles.root}\n {...otherProps}\n >\n <DialogProvider value={{ size }}>\n {topElement ? (\n <Column style={styles.topElementContainer}>\n <Column\n style={styles.topElementContent}\n onLayout={handleTopElementLayout}\n >\n {topElement}\n </Column>\n </Column>\n ) : null}\n\n <ShadowView\n variant={600}\n style={paperStyle}\n >\n {children}\n </ShadowView>\n </DialogProvider>\n </Modal>\n );\n}\n"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["React","useMemo","useState","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","ShadowView","DialogProvider","useDialogStyle","TOP_ELEMENT_HIDDEN_OFFSET","Dialog","props","animationType","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","height","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","topElementHeightWithoutOffset","Math","max","toValue","type","closeAnimation","FADE","duration","openAnimation","delay","initialOpacity","undefined","initialTranslateY","paperStyle","paper","container","root","topElementContainer","topElementContent"],"sources":["Dialog.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { LayoutChangeEvent, useWindowDimensions } from 'react-native';\nimport { css } from '@fountain-ui/styles';\nimport Column from '../Column';\nimport Modal, { ANIMATION_TYPE, AnimationUnit } from '../Modal';\nimport ShadowView from '../ShadowView';\nimport type DialogProps from './DialogProps';\nimport { DialogProvider } from './DialogContext';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_HIDDEN_OFFSET = 20;\n\nexport default function Dialog(props: DialogProps) {\n const {\n animationType = ANIMATION_TYPE.SLIDE,\n children,\n hideBackdrop,\n onClose,\n style: styleProp,\n size = 'medium',\n visible,\n topElement,\n ...otherProps\n } = props;\n\n const styles = useDialogStyle(size);\n\n const { height: screenHeight } = useWindowDimensions();\n\n const [topElementHeight, setTopElementHeight] = useState(0);\n const handleTopElementLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n setTopElementHeight(height);\n };\n\n const offsetAnimation = useMemo<AnimationUnit[]>(() => {\n if (topElementHeight === 0) {\n return [];\n }\n\n const topElementHeightWithoutOffset = Math.max(0, topElementHeight - TOP_ELEMENT_HIDDEN_OFFSET);\n\n return [{\n toValue: (topElementHeightWithoutOffset) / 2,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [topElementHeight]);\n\n const closeAnimation = useMemo<AnimationUnit[]>(() => {\n if (animationType === ANIMATION_TYPE.FADE) {\n return [{\n toValue: 0,\n type: ANIMATION_TYPE.FADE,\n }];\n } else if (animationType === ANIMATION_TYPE.SLIDE) {\n return [\n {\n toValue: screenHeight,\n type: ANIMATION_TYPE.SLIDE,\n },\n {\n duration: 150,\n toValue: 0,\n type: ANIMATION_TYPE.FADE,\n },\n ];\n }\n\n return [{\n duration: 150,\n toValue: screenHeight,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [animationType, screenHeight]);\n\n const openAnimation = useMemo<AnimationUnit[]>(() => {\n if (animationType === ANIMATION_TYPE.FADE) {\n return [{\n toValue: 1,\n type: ANIMATION_TYPE.FADE,\n }];\n } else if (animationType === ANIMATION_TYPE.SLIDE) {\n return [\n {\n toValue: 0,\n type: ANIMATION_TYPE.SLIDE,\n },\n {\n delay: 50,\n duration: 150,\n toValue: 1,\n type: ANIMATION_TYPE.FADE,\n },\n ];\n }\n\n return [{\n toValue: 0,\n type: ANIMATION_TYPE.SLIDE,\n }];\n }, [animationType]);\n\n const initialOpacity = animationType === ANIMATION_TYPE.SLIDE ? 1 : undefined;\n\n const initialTranslateY = animationType === ANIMATION_TYPE.FADE ? 0 : undefined;\n\n const paperStyle = css([\n styles.paper,\n styleProp,\n ]);\n\n return (\n <Modal\n animationStyle={styles.container}\n avoidKeyboard={size !== 'full'}\n closeAnimation={closeAnimation}\n hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}\n initialOpacity={initialOpacity}\n initialTranslateY={initialTranslateY}\n onClose={onClose}\n openAnimation={openAnimation}\n offsetAnimation={offsetAnimation}\n visible={visible}\n style={styles.root}\n {...otherProps}\n >\n <DialogProvider value={{ size }}>\n {topElement ? (\n <Column style={styles.topElementContainer}>\n <Column\n style={styles.topElementContent}\n onLayout={handleTopElementLayout}\n >\n {topElement}\n </Column>\n </Column>\n ) : null}\n\n <ShadowView\n variant={600}\n style={paperStyle}\n >\n {children}\n </ShadowView>\n </DialogProvider>\n </Modal>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import { View } from 'react-native';
|
|
4
|
+
import { KeyboardAvoidingView, Platform, View } from 'react-native';
|
|
5
5
|
import { css, StyleSheet } from '../styles';
|
|
6
6
|
import { useElevationStyle } from '../hooks';
|
|
7
7
|
import AnimatedContainer from './AnimatedContainer';
|
|
@@ -14,6 +14,7 @@ export const createModalCloseEvent = reason => ({
|
|
|
14
14
|
export default function Modal(props) {
|
|
15
15
|
const {
|
|
16
16
|
animationStyle,
|
|
17
|
+
avoidKeyboard = false,
|
|
17
18
|
backdropOpacity = 0.75,
|
|
18
19
|
children,
|
|
19
20
|
closeAnimation,
|
|
@@ -66,25 +67,33 @@ export default function Modal(props) {
|
|
|
66
67
|
}
|
|
67
68
|
}
|
|
68
69
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
70
|
+
const Container = avoidKeyboard ? KeyboardAvoidingView : View;
|
|
71
|
+
const containerProps = avoidKeyboard ? {
|
|
72
|
+
behavior: Platform.OS === 'ios' ? 'padding' : undefined
|
|
73
|
+
} : {};
|
|
74
|
+
return (
|
|
75
|
+
/*#__PURE__*/
|
|
76
|
+
// @ts-expect-error
|
|
77
|
+
React.createElement(Container, _extends({}, containerProps, {
|
|
78
|
+
style: css([StyleSheet.absoluteFill, elevationStyle, style])
|
|
79
|
+
}, otherProps), !hideBackdrop && visible ? /*#__PURE__*/React.createElement(SimpleBackdrop, {
|
|
80
|
+
onPress: handleBackdropPress,
|
|
81
|
+
opacity: backdropOpacity
|
|
82
|
+
}) : null, !disableAnimation ? /*#__PURE__*/React.createElement(AnimatedContainer, {
|
|
83
|
+
children: children,
|
|
84
|
+
closeAnimation: closeAnimation,
|
|
85
|
+
initialOpacity: initialOpacity,
|
|
86
|
+
initialTranslateY: initialTranslateY,
|
|
87
|
+
onEnter: onEnter,
|
|
88
|
+
onEntered: onEntered,
|
|
89
|
+
onExit: onExit,
|
|
90
|
+
onExited: onExited,
|
|
91
|
+
openAnimation: openAnimation,
|
|
92
|
+
offsetAnimation: offsetAnimation,
|
|
93
|
+
style: animationStyle,
|
|
94
|
+
visible: visible
|
|
95
|
+
}) : children)
|
|
96
|
+
);
|
|
88
97
|
}
|
|
89
98
|
;
|
|
90
99
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","css","StyleSheet","useElevationStyle","AnimatedContainer","SimpleBackdrop","createModalCloseEvent","reason","metadata","Modal","props","animationStyle","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","offsetAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","useState","elevationStyle","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n metadata: {\n reason: ModalCloseReasonType\n };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n metadata: {\n reason,\n },\n});\n\nexport default function Modal(props: ModalProps) {\n const {\n animationStyle,\n backdropOpacity = 0.75,\n children,\n closeAnimation,\n disableAnimation = false,\n hideBackdrop = false,\n initialOpacity,\n initialTranslateY,\n onClose,\n onEnter: onEnterProp,\n onEntered: onEnteredProp,\n onExit: onExitProp,\n onExited: onExitedProp,\n openAnimation,\n offsetAnimation,\n style,\n visible,\n ...otherProps\n } = props;\n\n const handleBackdropPress = () => {\n if (onClose) {\n onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n }\n };\n\n const [exited, setExited] = React.useState(true);\n\n const elevationStyle = useElevationStyle(6);\n\n const onEnter = () => {\n setExited(false);\n onEnterProp?.();\n };\n\n const onEntered = () => {\n onEnteredProp?.();\n };\n\n const onExit = () => {\n onExitProp?.();\n };\n\n const onExited = () => {\n setExited(true);\n onExitedProp?.();\n };\n\n if (!visible) {\n if (disableAnimation || exited) {\n return null;\n }\n }\n\n return (\n <
|
|
1
|
+
{"version":3,"names":["React","KeyboardAvoidingView","Platform","View","css","StyleSheet","useElevationStyle","AnimatedContainer","SimpleBackdrop","createModalCloseEvent","reason","metadata","Modal","props","animationStyle","avoidKeyboard","backdropOpacity","children","closeAnimation","disableAnimation","hideBackdrop","initialOpacity","initialTranslateY","onClose","onEnter","onEnterProp","onEntered","onEnteredProp","onExit","onExitProp","onExited","onExitedProp","openAnimation","offsetAnimation","style","visible","otherProps","handleBackdropPress","exited","setExited","useState","elevationStyle","Container","containerProps","behavior","OS","undefined","absoluteFill"],"sources":["Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { KeyboardAvoidingView, Platform, View } from 'react-native';\nimport { css, StyleSheet } from '../styles';\nimport { useElevationStyle } from '../hooks';\nimport type ModalProps from './ModalProps';\nimport AnimatedContainer from './AnimatedContainer';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nexport type ModalCloseReasonType = 'OUTSIDE_PRESS' | 'HARDWARE_BACK_PRESS' | 'CLOSE_BUTTON_PRESS' | 'UNKNOWN';\n\nexport interface ModalCloseEvent {\n metadata: {\n reason: ModalCloseReasonType\n };\n}\n\nexport const createModalCloseEvent = (reason: ModalCloseReasonType) => ({\n metadata: {\n reason,\n },\n});\n\nexport default function Modal(props: ModalProps) {\n const {\n animationStyle,\n avoidKeyboard = false,\n backdropOpacity = 0.75,\n children,\n closeAnimation,\n disableAnimation = false,\n hideBackdrop = false,\n initialOpacity,\n initialTranslateY,\n onClose,\n onEnter: onEnterProp,\n onEntered: onEnteredProp,\n onExit: onExitProp,\n onExited: onExitedProp,\n openAnimation,\n offsetAnimation,\n style,\n visible,\n ...otherProps\n } = props;\n\n const handleBackdropPress = () => {\n if (onClose) {\n onClose(createModalCloseEvent('OUTSIDE_PRESS'));\n }\n };\n\n const [exited, setExited] = React.useState(true);\n\n const elevationStyle = useElevationStyle(6);\n\n const onEnter = () => {\n setExited(false);\n onEnterProp?.();\n };\n\n const onEntered = () => {\n onEnteredProp?.();\n };\n\n const onExit = () => {\n onExitProp?.();\n };\n\n const onExited = () => {\n setExited(true);\n onExitedProp?.();\n };\n\n if (!visible) {\n if (disableAnimation || exited) {\n return null;\n }\n }\n\n const Container = avoidKeyboard ? KeyboardAvoidingView : View;\n const containerProps = avoidKeyboard ? {\n behavior: Platform.OS === 'ios' ? 'padding' : undefined,\n } : {};\n\n return (\n // @ts-expect-error\n <Container\n {...containerProps}\n style={css([\n StyleSheet.absoluteFill,\n elevationStyle,\n style,\n ])}\n {...otherProps}\n >\n {(!hideBackdrop && visible) ? (\n <SimpleBackdrop\n onPress={handleBackdropPress}\n opacity={backdropOpacity}\n />\n ) : null}\n\n {!disableAnimation ? (\n <AnimatedContainer\n children={children}\n closeAnimation={closeAnimation}\n initialOpacity={initialOpacity}\n initialTranslateY={initialTranslateY}\n onEnter={onEnter}\n onEntered={onEntered}\n onExit={onExit}\n onExited={onExited}\n openAnimation={openAnimation}\n offsetAnimation={offsetAnimation}\n style={animationStyle}\n visible={visible}\n />\n ) : children}\n </Container>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,oBAAT,EAA+BC,QAA/B,EAAyCC,IAAzC,QAAqD,cAArD;AACA,SAASC,GAAT,EAAcC,UAAd,QAAgC,WAAhC;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,OAAOC,iBAAP,MAA8B,qBAA9B;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AAUA,OAAO,MAAMC,qBAAqB,GAAIC,MAAD,KAAmC;EACpEC,QAAQ,EAAE;IACND;EADM;AAD0D,CAAnC,CAA9B;AAMP,eAAe,SAASE,KAAT,CAAeC,KAAf,EAAkC;EAC7C,MAAM;IACFC,cADE;IAEFC,aAAa,GAAG,KAFd;IAGFC,eAAe,GAAG,IAHhB;IAIFC,QAJE;IAKFC,cALE;IAMFC,gBAAgB,GAAG,KANjB;IAOFC,YAAY,GAAG,KAPb;IAQFC,cARE;IASFC,iBATE;IAUFC,OAVE;IAWFC,OAAO,EAAEC,WAXP;IAYFC,SAAS,EAAEC,aAZT;IAaFC,MAAM,EAAEC,UAbN;IAcFC,QAAQ,EAAEC,YAdR;IAeFC,aAfE;IAgBFC,eAhBE;IAiBFC,KAjBE;IAkBFC,OAlBE;IAmBF,GAAGC;EAnBD,IAoBFvB,KApBJ;;EAsBA,MAAMwB,mBAAmB,GAAG,MAAM;IAC9B,IAAId,OAAJ,EAAa;MACTA,OAAO,CAACd,qBAAqB,CAAC,eAAD,CAAtB,CAAP;IACH;EACJ,CAJD;;EAMA,MAAM,CAAC6B,MAAD,EAASC,SAAT,IAAsBvC,KAAK,CAACwC,QAAN,CAAe,IAAf,CAA5B;EAEA,MAAMC,cAAc,GAAGnC,iBAAiB,CAAC,CAAD,CAAxC;;EAEA,MAAMkB,OAAO,GAAG,MAAM;IAClBe,SAAS,CAAC,KAAD,CAAT;IACAd,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;EACd,CAHD;;EAKA,MAAMC,SAAS,GAAG,MAAM;IACpBC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa;EAChB,CAFD;;EAIA,MAAMC,MAAM,GAAG,MAAM;IACjBC,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;EACb,CAFD;;EAIA,MAAMC,QAAQ,GAAG,MAAM;IACnBS,SAAS,CAAC,IAAD,CAAT;IACAR,YAAY,SAAZ,IAAAA,YAAY,WAAZ,YAAAA,YAAY;EACf,CAHD;;EAKA,IAAI,CAACI,OAAL,EAAc;IACV,IAAIhB,gBAAgB,IAAImB,MAAxB,EAAgC;MAC5B,OAAO,IAAP;IACH;EACJ;;EAED,MAAMI,SAAS,GAAG3B,aAAa,GAAGd,oBAAH,GAA0BE,IAAzD;EACA,MAAMwC,cAAc,GAAG5B,aAAa,GAAG;IACnC6B,QAAQ,EAAE1C,QAAQ,CAAC2C,EAAT,KAAgB,KAAhB,GAAwB,SAAxB,GAAoCC;EADX,CAAH,GAEhC,EAFJ;EAIA;IAAA;IACI;IACA,oBAAC,SAAD,eACQH,cADR;MAEI,KAAK,EAAEvC,GAAG,CAAC,CACPC,UAAU,CAAC0C,YADJ,EAEPN,cAFO,EAGPP,KAHO,CAAD;IAFd,GAOQE,UAPR,GASM,CAAChB,YAAD,IAAiBe,OAAlB,gBACG,oBAAC,cAAD;MACI,OAAO,EAAEE,mBADb;MAEI,OAAO,EAAErB;IAFb,EADH,GAKG,IAdR,EAgBK,CAACG,gBAAD,gBACG,oBAAC,iBAAD;MACI,QAAQ,EAAEF,QADd;MAEI,cAAc,EAAEC,cAFpB;MAGI,cAAc,EAAEG,cAHpB;MAII,iBAAiB,EAAEC,iBAJvB;MAKI,OAAO,EAAEE,OALb;MAMI,SAAS,EAAEE,SANf;MAOI,MAAM,EAAEE,MAPZ;MAQI,QAAQ,EAAEE,QARd;MASI,aAAa,EAAEE,aATnB;MAUI,eAAe,EAAEC,eAVrB;MAWI,KAAK,EAAEnB,cAXX;MAYI,OAAO,EAAEqB;IAZb,EADH,GAeGlB,QA/BR;EAFJ;AAoCH;AAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n SLIDE = 'slide',\n FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n /**\n * Type of animation used when the dialog opens and closes.\n */\n type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n /**\n * Style object provided to animation component.\n */\n animationStyle?: ComponentProps['style'];\n\n /**\n * Opacity for backdrop.\n * @default 0.5\n */\n backdropOpacity?: number;\n\n /**\n * A single child content element.\n */\n children: React.ReactElement;\n\n /**\n * If `true`, the animation is disabled.\n * @default false\n */\n disableAnimation?: boolean;\n\n /**\n * Animation used when the modal closes.\n */\n closeAnimation?: AnimationUnit[] | undefined;\n\n /**\n * If `true`, the backdrop is not rendered.\n * @default false\n */\n hideBackdrop?: boolean;\n\n /**\n * Set the initial value of opacity for animating.\n */\n initialOpacity?: number | undefined;\n\n /**\n * Set the initial value of transition y for animating.\n */\n initialTranslateY?: number | undefined;\n\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose?: (event?: ModalCloseEvent) => void;\n\n /**\n * Callback fired when the enter animation will start.\n */\n onEnter?: () => void | undefined;\n\n /**\n * Callback fired when the enter animation is completed.\n */\n onEntered?: () => void | undefined;\n\n /**\n * Callback fired when the exit animation will start.\n */\n onExit?: () => void | undefined;\n\n /**\n * Callback fired when the exit animation is completed.\n */\n onExited?: () => void | undefined;\n\n /**\n * Animation used when the modal opens.\n */\n openAnimation?: AnimationUnit[] | undefined;\n\n /**\n * Additional offset animation applied when the modal opens.\n */\n offsetAnimation?: AnimationUnit[] | undefined;\n\n /**\n * If `true`, the modal is visible.\n */\n visible: boolean;\n}> {}\n"],"mappings":"AAMA,WAAkBA,cAAlB;;WAAkBA,c;EAAAA,c;EAAAA,c;GAAAA,c,KAAAA,c"}
|
|
1
|
+
{"version":3,"names":["ANIMATION_TYPE"],"sources":["ModalProps.ts"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { Animated } from 'react-native';\nimport type { ComponentProps, OverridableComponentProps } from '../types';\nimport { ModalCloseEvent } from './Modal';\n\nexport const enum ANIMATION_TYPE {\n SLIDE = 'slide',\n FADE = 'fade',\n}\n\nexport type AnimationUnit = Omit<Animated.TimingAnimationConfig, 'useNativeDriver'> & {\n /**\n * Type of animation used when the dialog opens and closes.\n */\n type: ANIMATION_TYPE;\n}\n\nexport default interface ModalProps extends OverridableComponentProps<ViewProps, {\n /**\n * Style object provided to animation component.\n */\n animationStyle?: ComponentProps['style'];\n\n /**\n * Opacity for backdrop.\n * @default 0.5\n */\n backdropOpacity?: number;\n\n /**\n * A single child content element.\n */\n children: React.ReactElement;\n\n /**\n * If `true`, the modal wraps its content in a `KeyboardAvoidingView` so\n * that on iOS the visible area shrinks when the software keyboard appears.\n * Intended for centered modals; leave `false` for bottom-anchored or\n * full-screen overlays that manage their own keyboard handling.\n * @default false\n */\n avoidKeyboard?: boolean;\n\n /**\n * If `true`, the animation is disabled.\n * @default false\n */\n disableAnimation?: boolean;\n\n /**\n * Animation used when the modal closes.\n */\n closeAnimation?: AnimationUnit[] | undefined;\n\n /**\n * If `true`, the backdrop is not rendered.\n * @default false\n */\n hideBackdrop?: boolean;\n\n /**\n * Set the initial value of opacity for animating.\n */\n initialOpacity?: number | undefined;\n\n /**\n * Set the initial value of transition y for animating.\n */\n initialTranslateY?: number | undefined;\n\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose?: (event?: ModalCloseEvent) => void;\n\n /**\n * Callback fired when the enter animation will start.\n */\n onEnter?: () => void | undefined;\n\n /**\n * Callback fired when the enter animation is completed.\n */\n onEntered?: () => void | undefined;\n\n /**\n * Callback fired when the exit animation will start.\n */\n onExit?: () => void | undefined;\n\n /**\n * Callback fired when the exit animation is completed.\n */\n onExited?: () => void | undefined;\n\n /**\n * Animation used when the modal opens.\n */\n openAnimation?: AnimationUnit[] | undefined;\n\n /**\n * Additional offset animation applied when the modal opens.\n */\n offsetAnimation?: AnimationUnit[] | undefined;\n\n /**\n * If `true`, the modal is visible.\n */\n visible: boolean;\n}> {}\n"],"mappings":"AAMA,WAAkBA,cAAlB;;WAAkBA,c;EAAAA,c;EAAAA,c;GAAAA,c,KAAAA,c"}
|
|
@@ -24,9 +24,9 @@ export default function BackButton(props) {
|
|
|
24
24
|
const rootStyle = css([styles.root, styleProp]);
|
|
25
25
|
return /*#__PURE__*/React.createElement(IconButton, _extends({
|
|
26
26
|
style: rootStyle
|
|
27
|
-
}, otherProps), /*#__PURE__*/React.createElement(
|
|
27
|
+
}, otherProps), /*#__PURE__*/React.createElement(AppBarChevronLeft, {
|
|
28
28
|
height: 24,
|
|
29
29
|
width: 24
|
|
30
|
-
}))
|
|
30
|
+
}));
|
|
31
31
|
}
|
|
32
32
|
//# sourceMappingURL=BackButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","IconButton","AppBarChevronLeft","css","styles","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport IconButton from '../../IconButton';\nimport { AppBarChevronLeft } from '../../internal';\nimport type BackButtonProps from './BackButtonProps';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n root: {\n height: 40,\n left: 4,\n paddingLeft: 5,\n paddingRight: 11,\n paddingVertical: 8,\n position: 'absolute',\n width: 40,\n },\n});\n\nexport default function BackButton(props: BackButtonProps) {\n const {\n style: styleProp,\n ...otherProps\n } = props;\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n return (\n <IconButton\n style={rootStyle}\n {...otherProps}\n >\n <
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","IconButton","AppBarChevronLeft","css","styles","create","root","height","left","paddingLeft","paddingRight","paddingVertical","position","width","BackButton","props","style","styleProp","otherProps","rootStyle"],"sources":["BackButton.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport IconButton from '../../IconButton';\nimport { AppBarChevronLeft } from '../../internal';\nimport type BackButtonProps from './BackButtonProps';\nimport { css } from '@fountain-ui/styles';\n\nconst styles = StyleSheet.create({\n root: {\n height: 40,\n left: 4,\n paddingLeft: 5,\n paddingRight: 11,\n paddingVertical: 8,\n position: 'absolute',\n width: 40,\n },\n});\n\nexport default function BackButton(props: BackButtonProps) {\n const {\n style: styleProp,\n ...otherProps\n } = props;\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n return (\n <IconButton\n style={rootStyle}\n {...otherProps}\n >\n <AppBarChevronLeft\n height={24}\n width={24}\n />\n </IconButton>\n );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,SAASC,iBAAT,QAAkC,gBAAlC;AAEA,SAASC,GAAT,QAAoB,qBAApB;AAEA,MAAMC,MAAM,GAAGJ,UAAU,CAACK,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,MAAM,EAAE,EADN;IAEFC,IAAI,EAAE,CAFJ;IAGFC,WAAW,EAAE,CAHX;IAIFC,YAAY,EAAE,EAJZ;IAKFC,eAAe,EAAE,CALf;IAMFC,QAAQ,EAAE,UANR;IAOFC,KAAK,EAAE;EAPL;AADuB,CAAlB,CAAf;AAYA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,KAAK,EAAEC,SADL;IAEF,GAAGC;EAFD,IAGFH,KAHJ;EAKA,MAAMI,SAAS,GAAGhB,GAAG,CAAC,CAClBC,MAAM,CAACE,IADW,EAElBW,SAFkB,CAAD,CAArB;EAKA,oBACI,oBAAC,UAAD;IACI,KAAK,EAAEE;EADX,GAEQD,UAFR,gBAII,oBAAC,iBAAD;IACI,MAAM,EAAE,EADZ;IAEI,KAAK,EAAE;EAFX,EAJJ,CADJ;AAWH"}
|
|
@@ -27,6 +27,14 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
|
|
|
27
27
|
* A single child content element.
|
|
28
28
|
*/
|
|
29
29
|
children: React.ReactElement;
|
|
30
|
+
/**
|
|
31
|
+
* If `true`, the modal wraps its content in a `KeyboardAvoidingView` so
|
|
32
|
+
* that on iOS the visible area shrinks when the software keyboard appears.
|
|
33
|
+
* Intended for centered modals; leave `false` for bottom-anchored or
|
|
34
|
+
* full-screen overlays that manage their own keyboard handling.
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
avoidKeyboard?: boolean;
|
|
30
38
|
/**
|
|
31
39
|
* If `true`, the animation is disabled.
|
|
32
40
|
* @default false
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.49",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "d105ea0485b7e7db4db0b229e615a9022af753d9"
|
|
71
71
|
}
|
package/src/Dialog/Dialog.tsx
CHANGED
|
@@ -112,6 +112,7 @@ export default function Dialog(props: DialogProps) {
|
|
|
112
112
|
return (
|
|
113
113
|
<Modal
|
|
114
114
|
animationStyle={styles.container}
|
|
115
|
+
avoidKeyboard={size !== 'full'}
|
|
115
116
|
closeAnimation={closeAnimation}
|
|
116
117
|
hideBackdrop={hideBackdrop || animationType === ANIMATION_TYPE.FADE}
|
|
117
118
|
initialOpacity={initialOpacity}
|
package/src/Modal/Modal.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
2
|
+
import { KeyboardAvoidingView, Platform, View } from 'react-native';
|
|
3
3
|
import { css, StyleSheet } from '../styles';
|
|
4
4
|
import { useElevationStyle } from '../hooks';
|
|
5
5
|
import type ModalProps from './ModalProps';
|
|
@@ -23,6 +23,7 @@ export const createModalCloseEvent = (reason: ModalCloseReasonType) => ({
|
|
|
23
23
|
export default function Modal(props: ModalProps) {
|
|
24
24
|
const {
|
|
25
25
|
animationStyle,
|
|
26
|
+
avoidKeyboard = false,
|
|
26
27
|
backdropOpacity = 0.75,
|
|
27
28
|
children,
|
|
28
29
|
closeAnimation,
|
|
@@ -76,8 +77,15 @@ export default function Modal(props: ModalProps) {
|
|
|
76
77
|
}
|
|
77
78
|
}
|
|
78
79
|
|
|
80
|
+
const Container = avoidKeyboard ? KeyboardAvoidingView : View;
|
|
81
|
+
const containerProps = avoidKeyboard ? {
|
|
82
|
+
behavior: Platform.OS === 'ios' ? 'padding' : undefined,
|
|
83
|
+
} : {};
|
|
84
|
+
|
|
79
85
|
return (
|
|
80
|
-
|
|
86
|
+
// @ts-expect-error
|
|
87
|
+
<Container
|
|
88
|
+
{...containerProps}
|
|
81
89
|
style={css([
|
|
82
90
|
StyleSheet.absoluteFill,
|
|
83
91
|
elevationStyle,
|
|
@@ -108,6 +116,6 @@ export default function Modal(props: ModalProps) {
|
|
|
108
116
|
visible={visible}
|
|
109
117
|
/>
|
|
110
118
|
) : children}
|
|
111
|
-
</
|
|
119
|
+
</Container>
|
|
112
120
|
);
|
|
113
121
|
};
|
package/src/Modal/ModalProps.ts
CHANGED
|
@@ -33,6 +33,15 @@ export default interface ModalProps extends OverridableComponentProps<ViewProps,
|
|
|
33
33
|
*/
|
|
34
34
|
children: React.ReactElement;
|
|
35
35
|
|
|
36
|
+
/**
|
|
37
|
+
* If `true`, the modal wraps its content in a `KeyboardAvoidingView` so
|
|
38
|
+
* that on iOS the visible area shrinks when the software keyboard appears.
|
|
39
|
+
* Intended for centered modals; leave `false` for bottom-anchored or
|
|
40
|
+
* full-screen overlays that manage their own keyboard handling.
|
|
41
|
+
* @default false
|
|
42
|
+
*/
|
|
43
|
+
avoidKeyboard?: boolean;
|
|
44
|
+
|
|
36
45
|
/**
|
|
37
46
|
* If `true`, the animation is disabled.
|
|
38
47
|
* @default false
|
|
@@ -33,12 +33,10 @@ export default function BackButton(props: BackButtonProps) {
|
|
|
33
33
|
style={rootStyle}
|
|
34
34
|
{...otherProps}
|
|
35
35
|
>
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
/>
|
|
41
|
-
</React.Fragment>
|
|
36
|
+
<AppBarChevronLeft
|
|
37
|
+
height={24}
|
|
38
|
+
width={24}
|
|
39
|
+
/>
|
|
42
40
|
</IconButton>
|
|
43
41
|
);
|
|
44
42
|
}
|