@fountain-ui/core 3.0.0-alpha.14 → 3.0.0-alpha.15
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/Accordion/Accordion.js +3 -3
- package/build/commonjs/Accordion/Accordion.js.map +1 -1
- package/build/commonjs/Accordion/useVariantStyleMap.js +6 -2
- package/build/commonjs/Accordion/useVariantStyleMap.js.map +1 -1
- package/build/commonjs/BottomSheetTitle/BottomSheetTitle.js +1 -0
- package/build/commonjs/BottomSheetTitle/BottomSheetTitle.js.map +1 -1
- package/build/commonjs/BottomSheetTitle/BottomSheetTitleProps.js.map +1 -1
- package/build/commonjs/Button/Button.js +11 -9
- package/build/commonjs/Button/Button.js.map +1 -1
- package/build/commonjs/Dialog/Dialog.js +8 -4
- package/build/commonjs/Dialog/Dialog.js.map +1 -1
- package/build/commonjs/Dialog/FullDialogCloseButton.js +55 -0
- package/build/commonjs/Dialog/FullDialogCloseButton.js.map +1 -0
- package/build/commonjs/Dialog/useDialogStyle.js +13 -3
- package/build/commonjs/Dialog/useDialogStyle.js.map +1 -1
- package/build/commonjs/ImageCore/ImageCoreNative.js +1 -1
- package/build/commonjs/ImageCore/ImageCoreNative.js.map +1 -1
- package/build/module/Accordion/Accordion.js +3 -3
- package/build/module/Accordion/Accordion.js.map +1 -1
- package/build/module/Accordion/useVariantStyleMap.js +6 -2
- package/build/module/Accordion/useVariantStyleMap.js.map +1 -1
- package/build/module/BottomSheetTitle/BottomSheetTitle.js +1 -0
- package/build/module/BottomSheetTitle/BottomSheetTitle.js.map +1 -1
- package/build/module/BottomSheetTitle/BottomSheetTitleProps.js.map +1 -1
- package/build/module/Button/Button.js +11 -9
- package/build/module/Button/Button.js.map +1 -1
- package/build/module/Dialog/Dialog.js +7 -3
- package/build/module/Dialog/Dialog.js.map +1 -1
- package/build/module/Dialog/FullDialogCloseButton.js +42 -0
- package/build/module/Dialog/FullDialogCloseButton.js.map +1 -0
- package/build/module/Dialog/useDialogStyle.js +12 -3
- package/build/module/Dialog/useDialogStyle.js.map +1 -1
- package/build/module/ImageCore/ImageCoreNative.js +1 -1
- package/build/module/ImageCore/ImageCoreNative.js.map +1 -1
- package/build/typescript/BottomSheetTitle/BottomSheetTitleProps.d.ts +1 -0
- package/build/typescript/Dialog/Dialog.d.ts +6 -1
- package/build/typescript/Dialog/FullDialogCloseButton.d.ts +10 -0
- package/package.json +4 -4
- package/src/Accordion/Accordion.tsx +7 -7
- package/src/Accordion/useVariantStyleMap.ts +4 -0
- package/src/BottomSheetTitle/BottomSheetTitle.tsx +1 -0
- package/src/BottomSheetTitle/BottomSheetTitleProps.ts +1 -0
- package/src/Button/Button.tsx +9 -8
- package/src/Dialog/Dialog.tsx +6 -1
- package/src/Dialog/FullDialogCloseButton.tsx +63 -0
- package/src/Dialog/useDialogStyle.ts +12 -2
- package/src/ImageCore/ImageCoreNative.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useRef","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withDelay","withTiming","css","useTheme","ChevronDown","ButtonBase","Column","Row","Spacer","useVariantStyleMap","ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","root","marginBottom","spacing","rightIcon","alignItems","height","justifyContent","width","Accordion","props","title","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","variant","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","shouldInitialExpandedRef","container","containerStyle","contentStyle","contentFont","contentFontStyle","iconContainer","iconContainerStyle","subTitleFont","subTitleFontStyle","titleStyle","titleFont","titleFontStyle","rotate","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","rootStyle"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, Text, View, ViewStyle } from 'react-native';\nimport Animated, {\n useAnimatedStyle,\n useSharedValue,\n withDelay,\n withTiming,\n WithTimingConfig,\n} from 'react-native-reanimated';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport type AccordionProps from './AccordionProps';\nimport type { AccordionVariant } from './AccordionProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype AccordionStyles = NamedStylesStringUnion<'root' | 'rightIcon'>;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 200 };\nconst INITIAL_EXPANDED_DELAY_MILLIS = 100;\nconst CONTENT_OPACITY_DELAY_MILLIS = 200;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n const theme = useTheme();\n\n return {\n root: { marginBottom: theme.spacing(3) },\n rightIcon: {\n alignItems: 'center',\n height: 32,\n justifyContent: 'center',\n width: 32,\n },\n };\n};\n\nexport default function Accordion(props: AccordionProps) {\n const {\n title,\n subTitle,\n content,\n RightIcon,\n LeftComponent,\n isInitialExpanded = false,\n variant = 'solid' as AccordionVariant,\n } = props;\n\n const styles = useStyles();\n const theme = useTheme();\n const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n const [isExpanded, setIsExpanded] = useState<boolean>(false);\n const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n const {\n container: containerStyle,\n content: contentStyle,\n contentFont: contentFontStyle,\n iconContainer: iconContainerStyle,\n subTitleFont: subTitleFontStyle,\n title: titleStyle,\n titleFont: titleFontStyle,\n } = useVariantStyleMap(variant);\n\n const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n const animatedOpacity = useSharedValue(0);\n\n const animatedHeight = useSharedValue(0);\n const [contentHeight, setContentHeight] = useState(0);\n\n const animatedChevronDownStyles = useAnimatedStyle(() => ({\n transform: [{ rotate: `${rotate.value}deg` }],\n }), []);\n\n const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n height: animatedHeight.value,\n overflow: 'hidden',\n } as ViewStyle), []);\n\n const animatedContentStyle = useAnimatedStyle(() => ({\n opacity: animatedOpacity.value,\n }), []);\n\n const onPress = () => {\n setIsExpanded(prev => !prev);\n };\n\n const onLayout = (event: LayoutChangeEvent) => {\n const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n setContentHeight(height);\n\n if (shouldInitialExpandedRef.current) {\n shouldInitialExpandedRef.current = false;\n setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);\n }\n };\n\n useEffect(() => {\n rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n\n animatedOpacity.value = isExpanded\n ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))\n : withTiming(0, ANIMATION_CONFIG);\n }, [isExpanded, contentHeight]);\n\n const rootStyle = css([\n styles.root,\n containerStyle,\n ]);\n\n return (\n <Column style={rootStyle}>\n <ButtonBase onPress={onPress}>\n <Row style={titleStyle}>\n <Column flexShrink={1}>\n <Row alignItems={'center'}>\n {LeftComponent ? (\n <React.Fragment>\n <View style={iconContainerStyle}>\n {LeftComponent}\n </View>\n\n <Spacer size={1.5}/>\n </React.Fragment>\n ) : null}\n\n <Text\n allowFontScaling={false}\n children={title}\n numberOfLines={1}\n style={titleFontStyle}\n />\n </Row>\n\n {subTitle && variant === 'solid' ?\n typeof subTitle === 'string' ? (\n <React.Fragment>\n <Spacer size={1.5}/>\n\n <Text\n allowFontScaling={false}\n children={subTitle}\n numberOfLines={1}\n style={subTitleFontStyle}\n />\n </React.Fragment>\n ) : (subTitle)\n : null}\n </Column>\n\n <Spacer flex={1}/>\n\n <Spacer size={3}/>\n\n <Animated.View style={animatedChevronDownStyles}>\n <View style={styles.rightIcon}>\n {RightIcon ? RightIcon : (\n <ChevronDown\n width={16}\n height={16}\n color={'base'}\n />\n )}\n </View>\n </Animated.View>\n </Row>\n </ButtonBase>\n\n <Animated.View style={animatedContentBackgroundStyles}>\n <View\n onLayout={onLayout}\n style={contentStyle}\n >\n <Animated.View style={animatedContentStyle}>\n {typeof content === 'string' ? (\n <Text\n allowFontScaling={false}\n children={content}\n style={contentFontStyle}\n />\n ) : (content)}\n </Animated.View>\n </View>\n </Animated.View>\n </Column>\n );\n}\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,SAA4BC,IAA5B,EAAkCC,IAAlC,QAAyD,cAAzD;AACA,OAAOC,QAAP,IACIC,gBADJ,EAEIC,cAFJ,EAGIC,SAHJ,EAIIC,UAJJ,QAMO,yBANP;AAOA,SAASC,GAAT,QAAuD,qBAAvD;AACA,SAASC,QAAT,QAAyB,WAAzB;AACA,SAASC,WAAT,QAA4B,mBAA5B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,OAAOC,MAAP,MAAmB,WAAnB;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;AAIA,MAAMC,kBAAkB,GAAG,CAA3B;AACA,MAAMC,kBAAkB,GAAG,GAA3B;AACA,MAAMC,gBAA4C,GAAG;EAAEC,QAAQ,EAAE;AAAZ,CAArD;AACA,MAAMC,6BAA6B,GAAG,GAAtC;AACA,MAAMC,4BAA4B,GAAG,GAArC;;AAEA,MAAMC,SAAqC,GAAG,YAA6B;EACvE,MAAMC,KAAK,GAAGd,QAAQ,EAAtB;EAEA,OAAO;IACHe,IAAI,EAAE;MAAEC,YAAY,EAAEF,KAAK,CAACG,OAAN,CAAc,CAAd;IAAhB,CADH;IAEHC,SAAS,EAAE;MACPC,UAAU,EAAE,QADL;MAEPC,MAAM,EAAE,EAFD;MAGPC,cAAc,EAAE,QAHT;MAIPC,KAAK,EAAE;IAJA;EAFR,CAAP;AASH,CAZD;;AAcA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,KADE;IAEFC,QAFE;IAGFC,OAHE;IAIFC,SAJE;IAKFC,aALE;IAMFC,iBAAiB,GAAG,KANlB;IAOFC,OAAO,GAAG;EAPR,IAQFP,KARJ;EAUA,MAAMQ,MAAM,GAAGnB,SAAS,EAAxB;EACA,MAAMC,KAAK,GAAGd,QAAQ,EAAtB;EACA,MAAMiC,qBAAqB,GAAGnB,KAAK,CAACG,OAAN,CAAc,CAAd,CAA9B;EAEA,MAAM,CAACiB,UAAD,EAAaC,aAAb,IAA8B5C,QAAQ,CAAU,KAAV,CAA5C;EACA,MAAM6C,wBAAwB,GAAG9C,MAAM,CAAUwC,iBAAV,CAAvC;EAEA,MAAM;IACFO,SAAS,EAAEC,cADT;IAEFX,OAAO,EAAEY,YAFP;IAGFC,WAAW,EAAEC,gBAHX;IAIFC,aAAa,EAAEC,kBAJb;IAKFC,YAAY,EAAEC,iBALZ;IAMFpB,KAAK,EAAEqB,UANL;IAOFC,SAAS,EAAEC;EAPT,IAQF1C,kBAAkB,CAACyB,OAAD,CARtB;EAUA,MAAMkB,MAAM,GAAGrD,cAAc,CAACW,kBAAD,CAA7B;EACA,MAAM2C,eAAe,GAAGtD,cAAc,CAAC,CAAD,CAAtC;EAEA,MAAMuD,cAAc,GAAGvD,cAAc,CAAC,CAAD,CAArC;EACA,MAAM,CAACwD,aAAD,EAAgBC,gBAAhB,IAAoC9D,QAAQ,CAAC,CAAD,CAAlD;EAEA,MAAM+D,yBAAyB,GAAG3D,gBAAgB,CAAC,OAAO;IACtD4D,SAAS,EAAE,CAAC;MAAEN,MAAM,EAAG,GAAEA,MAAM,CAACO,KAAM;IAA1B,CAAD;EAD2C,CAAP,CAAD,EAE9C,EAF8C,CAAlD;EAIA,MAAMC,+BAA+B,GAAG9D,gBAAgB,CAAC,OAAO;IAC5DyB,MAAM,EAAE+B,cAAc,CAACK,KADqC;IAE5DE,QAAQ,EAAE;EAFkD,CAAP,CAAD,EAGvC,EAHuC,CAAxD;EAKA,MAAMC,oBAAoB,GAAGhE,gBAAgB,CAAC,OAAO;IACjDiE,OAAO,EAAEV,eAAe,CAACM;EADwB,CAAP,CAAD,EAEzC,EAFyC,CAA7C;;EAIA,MAAMK,OAAO,GAAG,MAAM;IAClB1B,aAAa,CAAC2B,IAAI,IAAI,CAACA,IAAV,CAAb;EACH,CAFD;;EAIA,MAAMC,QAAQ,GAAIC,KAAD,IAA8B;IAC3C,MAAM5C,MAAM,GAAG4C,KAAK,CAACC,WAAN,CAAkBC,MAAlB,CAAyB9C,MAAzB,GAAkCa,qBAAjD;IACAoB,gBAAgB,CAACjC,MAAD,CAAhB;;IAEA,IAAIgB,wBAAwB,CAAC+B,OAA7B,EAAsC;MAClC/B,wBAAwB,CAAC+B,OAAzB,GAAmC,KAAnC;MACAC,UAAU,CAAC,MAAMjC,aAAa,CAAC,IAAD,CAApB,EAA4BxB,6BAA5B,CAAV;IACH;EACJ,CARD;;EAUAtB,SAAS,CAAC,MAAM;IACZ4D,MAAM,CAACO,KAAP,GAAe1D,UAAU,CAACoC,UAAU,GAAG1B,kBAAH,GAAwBD,kBAAnC,EAAuDE,gBAAvD,CAAzB;IAEA0C,cAAc,CAACK,KAAf,GAAuB1D,UAAU,CAACoC,UAAU,GAAGkB,aAAH,GAAmB,CAA9B,EAAiC3C,gBAAjC,CAAjC;IAEAyC,eAAe,CAACM,KAAhB,GAAwBtB,UAAU,GAC5BrC,SAAS,CAACe,4BAAD,EAA+Bd,UAAU,CAAC,CAAD,EAAIW,gBAAJ,CAAzC,CADmB,GAE5BX,UAAU,CAAC,CAAD,EAAIW,gBAAJ,CAFhB;EAGH,CARQ,EAQN,CAACyB,UAAD,EAAakB,aAAb,CARM,CAAT;EAUA,MAAMiB,SAAS,GAAGtE,GAAG,CAAC,CAClBiC,MAAM,CAACjB,IADW,EAElBuB,cAFkB,CAAD,CAArB;EAKA,oBACI,oBAAC,MAAD;IAAQ,KAAK,EAAE+B;EAAf,gBACI,oBAAC,UAAD;IAAY,OAAO,EAAER;EAArB,gBACI,oBAAC,GAAD;IAAK,KAAK,EAAEf;EAAZ,gBACI,oBAAC,MAAD;IAAQ,UAAU,EAAE;EAApB,gBACI,oBAAC,GAAD;IAAK,UAAU,EAAE;EAAjB,GACKjB,aAAa,gBACV,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,IAAD;IAAM,KAAK,EAAEc;EAAb,GACKd,aADL,CADJ,eAKI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EALJ,CADU,GAQV,IATR,eAWI,oBAAC,IAAD;IACI,gBAAgB,EAAE,KADtB;IAEI,QAAQ,EAAEJ,KAFd;IAGI,aAAa,EAAE,CAHnB;IAII,KAAK,EAAEuB;EAJX,EAXJ,CADJ,EAoBKtB,QAAQ,IAAIK,OAAO,KAAK,OAAxB,GACG,OAAOL,QAAP,KAAoB,QAApB,gBACI,oBAAC,KAAD,CAAO,QAAP,qBACI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EADJ,eAGI,oBAAC,IAAD;IACI,gBAAgB,EAAE,KADtB;IAEI,QAAQ,EAAEA,QAFd;IAGI,aAAa,EAAE,CAHnB;IAII,KAAK,EAAEmB;EAJX,EAHJ,CADJ,GAWKnB,QAZR,GAaK,IAjCV,CADJ,eAqCI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EArCJ,eAuCI,oBAAC,MAAD;IAAQ,IAAI,EAAE;EAAd,EAvCJ,eAyCI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE4B;EAAtB,gBACI,oBAAC,IAAD;IAAM,KAAK,EAAEtB,MAAM,CAACd;EAApB,GACKU,SAAS,GAAGA,SAAH,gBACN,oBAAC,WAAD;IACI,KAAK,EAAE,EADX;IAEI,MAAM,EAAE,EAFZ;IAGI,KAAK,EAAE;EAHX,EAFR,CADJ,CAzCJ,CADJ,CADJ,eAyDI,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAE6B;EAAtB,gBACI,oBAAC,IAAD;IACI,QAAQ,EAAEM,QADd;IAEI,KAAK,EAAExB;EAFX,gBAII,oBAAC,QAAD,CAAU,IAAV;IAAe,KAAK,EAAEoB;EAAtB,GACK,OAAOhC,OAAP,KAAmB,QAAnB,gBACG,oBAAC,IAAD;IACI,gBAAgB,EAAE,KADtB;IAEI,QAAQ,EAAEA,OAFd;IAGI,KAAK,EAAEc;EAHX,EADH,GAMId,OAPT,CAJJ,CADJ,CAzDJ,CADJ;AA4EH"}
|
|
1
|
+
{"version":3,"names":["React","useEffect","useRef","useState","Text","View","Animated","useAnimatedStyle","useSharedValue","withDelay","withTiming","css","useTheme","ChevronDown","ButtonBase","Column","Row","Spacer","useVariantStyleMap","ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","root","marginBottom","spacing","rightIcon","alignItems","height","justifyContent","width","Accordion","props","title","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","variant","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","shouldInitialExpandedRef","container","containerStyle","contentStyle","contentFont","contentFontStyle","iconContainer","iconContainerStyle","subTitleFont","subTitleFontStyle","titleStyle","titleFont","titleFontStyle","rotate","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","rootStyle"],"sources":["Accordion.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { LayoutChangeEvent, Text, View, ViewStyle } from 'react-native';\nimport Animated, {\n useAnimatedStyle,\n useSharedValue,\n withDelay,\n withTiming,\n WithTimingConfig,\n} from 'react-native-reanimated';\nimport { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport { ChevronDown } from '../internal/icons';\nimport ButtonBase from '../ButtonBase';\nimport Column from '../Column';\nimport Row from '../Row';\nimport Spacer from '../Spacer';\nimport type AccordionProps from './AccordionProps';\nimport type { AccordionVariant } from './AccordionProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype AccordionStyles = NamedStylesStringUnion<'root' | 'rightIcon'>;\n\nconst ROTATE_HIDE_DEGREE = 0;\nconst ROTATE_SHOW_DEGREE = 180;\nconst ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 200 };\nconst INITIAL_EXPANDED_DELAY_MILLIS = 100;\nconst CONTENT_OPACITY_DELAY_MILLIS = 200;\n\nconst useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {\n const theme = useTheme();\n\n return {\n root: { marginBottom: theme.spacing(3) },\n rightIcon: {\n alignItems: 'center',\n height: 32,\n justifyContent: 'center',\n width: 32,\n },\n };\n};\n\nexport default function Accordion(props: AccordionProps) {\n const {\n title,\n subTitle,\n content,\n RightIcon,\n LeftComponent,\n isInitialExpanded = false,\n variant = 'solid' as AccordionVariant,\n } = props;\n\n const styles = useStyles();\n const theme = useTheme();\n const CONTENT_MARGIN_HEIGHT = theme.spacing(2);\n\n const [isExpanded, setIsExpanded] = useState<boolean>(false);\n const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);\n\n const {\n container: containerStyle,\n content: contentStyle,\n contentFont: contentFontStyle,\n iconContainer: iconContainerStyle,\n subTitleFont: subTitleFontStyle,\n title: titleStyle,\n titleFont: titleFontStyle,\n } = useVariantStyleMap(variant);\n\n const rotate = useSharedValue(ROTATE_HIDE_DEGREE);\n const animatedOpacity = useSharedValue(0);\n\n const animatedHeight = useSharedValue(0);\n const [contentHeight, setContentHeight] = useState(0);\n\n const animatedChevronDownStyles = useAnimatedStyle(() => ({\n transform: [{ rotate: `${rotate.value}deg` }],\n }), []);\n\n const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n height: animatedHeight.value,\n overflow: 'hidden',\n } as ViewStyle), []);\n\n const animatedContentStyle = useAnimatedStyle(() => ({\n opacity: animatedOpacity.value,\n }), []);\n\n const onPress = () => {\n setIsExpanded(prev => !prev);\n };\n\n const onLayout = (event: LayoutChangeEvent) => {\n const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;\n setContentHeight(height);\n\n if (shouldInitialExpandedRef.current) {\n shouldInitialExpandedRef.current = false;\n setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);\n }\n };\n\n useEffect(() => {\n rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);\n\n animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);\n\n animatedOpacity.value = isExpanded\n ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))\n : withTiming(0, ANIMATION_CONFIG);\n }, [isExpanded, contentHeight]);\n\n const rootStyle = css([\n styles.root,\n containerStyle,\n ]);\n\n return (\n <Column style={rootStyle}>\n <ButtonBase onPress={onPress}>\n <Row style={titleStyle}>\n <Column flexShrink={1}>\n <Row alignItems={'center'}>\n {LeftComponent ? (\n <React.Fragment>\n <View style={iconContainerStyle}>\n {LeftComponent}\n </View>\n\n <Spacer size={1.5}/>\n </React.Fragment>\n ) : null}\n\n <Text\n allowFontScaling={false}\n children={title}\n numberOfLines={1}\n style={titleFontStyle}\n />\n </Row>\n\n {subTitle && variant === 'solid' ? (\n <React.Fragment>\n <Spacer size={1.5}/>\n\n {typeof subTitle === 'string' ? (\n <Text\n allowFontScaling={false}\n children={subTitle}\n numberOfLines={1}\n style={subTitleFontStyle}\n />\n ) : (subTitle)}\n </React.Fragment>\n ) : null}\n </Column>\n\n <Spacer flex={1}/>\n\n <Spacer size={3}/>\n\n <Animated.View style={animatedChevronDownStyles}>\n <View style={styles.rightIcon}>\n {RightIcon ? RightIcon : (\n <ChevronDown\n width={16}\n height={16}\n color={'base'}\n />\n )}\n </View>\n </Animated.View>\n </Row>\n </ButtonBase>\n\n <Animated.View style={animatedContentBackgroundStyles}>\n <View\n onLayout={onLayout}\n style={contentStyle}\n >\n <Animated.View style={animatedContentStyle}>\n {typeof content === 'string' ? (\n <Text\n allowFontScaling={false}\n children={content}\n style={contentFontStyle}\n />\n ) : (content)}\n </Animated.View>\n </View>\n </Animated.View>\n </Column>\n );\n}\n"],"mappings":"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"}
|
|
@@ -15,10 +15,12 @@ export default function useVariantStyleMap(variant) {
|
|
|
15
15
|
content: {
|
|
16
16
|
borderTopColor: theme.palette.border.weak,
|
|
17
17
|
borderTopWidth: 0.5,
|
|
18
|
+
left: 0,
|
|
18
19
|
marginHorizontal: theme.spacing(4),
|
|
19
20
|
paddingBottom: theme.spacing(5),
|
|
20
21
|
paddingTop: theme.spacing(4),
|
|
21
|
-
position: 'absolute'
|
|
22
|
+
position: 'absolute',
|
|
23
|
+
right: 0
|
|
22
24
|
},
|
|
23
25
|
contentFont: createFontStyle(theme, {
|
|
24
26
|
selector: typography => typography.body3.regular,
|
|
@@ -55,10 +57,12 @@ export default function useVariantStyleMap(variant) {
|
|
|
55
57
|
content: {
|
|
56
58
|
borderTopColor: theme.palette.border.weak,
|
|
57
59
|
borderTopWidth: 0.5,
|
|
60
|
+
left: 0,
|
|
58
61
|
marginHorizontal: theme.spacing(4),
|
|
59
62
|
paddingBottom: theme.spacing(4),
|
|
60
63
|
paddingTop: theme.spacing(3),
|
|
61
|
-
position: 'absolute'
|
|
64
|
+
position: 'absolute',
|
|
65
|
+
right: 0
|
|
62
66
|
},
|
|
63
67
|
contentFont: createFontStyle(theme, {
|
|
64
68
|
selector: typography => typography.caption2.regular,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","theme","container","backgroundColor","palette","surface","supportive","borderRadius","shape","radius","md","content","borderTopColor","border","weak","borderTopWidth","marginHorizontal","spacing","paddingBottom","paddingTop","position","contentFont","selector","typography","body3","regular","color","text","base","subTitleFont","caption1","title","alignItems","paddingLeft","paddingRight","paddingVertical","titleFont","_","fontSize","lineHeight","fontFamily","letterSpacing","strong","borderColor","borderWidth","caption2","iconContainer","caption1short","semiBold","borderBottomColor","borderBottomWidth"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { AccordionVariant } from './AccordionProps';\n\ninterface VariantStyle {\n container: FountainUiStyle;\n content: FountainUiStyle;\n contentFont: TextStyle;\n iconContainer?: FountainUiStyle;\n subTitleFont?: TextStyle;\n title: FountainUiStyle;\n titleFont: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: AccordionVariant): VariantStyle {\n const theme = useTheme();\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'solid':\n return {\n container: {\n backgroundColor: theme.palette.surface.supportive,\n borderRadius: theme.shape.radius.md,\n },\n content: {\n borderTopColor: theme.palette.border.weak,\n borderTopWidth: 0.5,\n marginHorizontal: theme.spacing(4),\n paddingBottom: theme.spacing(5),\n paddingTop: theme.spacing(4),\n position: 'absolute',\n },\n contentFont: createFontStyle(theme, {\n selector: (typography) => typography.body3.regular,\n color: theme.palette.text.base,\n }),\n subTitleFont: createFontStyle(theme, {\n selector: (typography) => typography.caption1.regular,\n color: theme.palette.text.base,\n }),\n title: {\n alignItems: 'center',\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(2),\n paddingVertical: theme.spacing(4),\n },\n titleFont: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 20.8,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n };\n case 'line':\n return {\n container: {\n borderColor: theme.palette.border.weak,\n borderRadius: theme.shape.radius.md,\n borderWidth: 1,\n },\n content: {\n borderTopColor: theme.palette.border.weak,\n borderTopWidth: 0.5,\n marginHorizontal: theme.spacing(4),\n paddingBottom: theme.spacing(4),\n paddingTop: theme.spacing(3),\n position: 'absolute',\n },\n contentFont: createFontStyle(theme, {\n selector: (typography) => typography.caption2.regular,\n color: theme.palette.text.base,\n }),\n iconContainer: {\n paddingTop: 1,\n },\n title: {\n alignItems: 'center',\n paddingBottom: theme.spacing(1),\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(2),\n paddingTop: theme.spacing(0.75),\n },\n titleFont: createFontStyle(theme, {\n selector: (typography) => typography.caption1short.semiBold,\n color: theme.palette.text.base,\n }),\n };\n case 'underline':\n return {\n container: {\n borderBottomColor: theme.palette.border.weak,\n borderBottomWidth: 1,\n },\n content: {\n borderTopColor: theme.palette.border.weak,\n borderTopWidth: 0.5,\n paddingBottom: theme.spacing(5),\n paddingLeft: theme.spacing(0.5),\n paddingRight: theme.spacing(2),\n paddingTop: theme.spacing(4),\n },\n contentFont: createFontStyle(theme, {\n selector: (typography) => typography.body3.regular,\n color: theme.palette.text.base,\n }),\n title: {\n alignItems: 'center',\n paddingLeft: theme.spacing(0.5),\n paddingVertical: theme.spacing(2),\n },\n titleFont: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 20.8,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n };\n }\n }, [theme, variant]);\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["useMemo","typographyOf","createFontStyle","useTheme","useVariantStyleMap","variant","theme","container","backgroundColor","palette","surface","supportive","borderRadius","shape","radius","md","content","borderTopColor","border","weak","borderTopWidth","left","marginHorizontal","spacing","paddingBottom","paddingTop","position","right","contentFont","selector","typography","body3","regular","color","text","base","subTitleFont","caption1","title","alignItems","paddingLeft","paddingRight","paddingVertical","titleFont","_","fontSize","lineHeight","fontFamily","letterSpacing","strong","borderColor","borderWidth","caption2","iconContainer","caption1short","semiBold","borderBottomColor","borderBottomWidth"],"sources":["useVariantStyleMap.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport type { TextStyle } from 'react-native';\nimport type { FountainUiStyle } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport type { AccordionVariant } from './AccordionProps';\n\ninterface VariantStyle {\n container: FountainUiStyle;\n content: FountainUiStyle;\n contentFont: TextStyle;\n iconContainer?: FountainUiStyle;\n subTitleFont?: TextStyle;\n title: FountainUiStyle;\n titleFont: TextStyle;\n}\n\nexport default function useVariantStyleMap(variant: AccordionVariant): VariantStyle {\n const theme = useTheme();\n\n return useMemo(() => {\n switch (variant) {\n default:\n case 'solid':\n return {\n container: {\n backgroundColor: theme.palette.surface.supportive,\n borderRadius: theme.shape.radius.md,\n },\n content: {\n borderTopColor: theme.palette.border.weak,\n borderTopWidth: 0.5,\n left: 0,\n marginHorizontal: theme.spacing(4),\n paddingBottom: theme.spacing(5),\n paddingTop: theme.spacing(4),\n position: 'absolute',\n right: 0,\n },\n contentFont: createFontStyle(theme, {\n selector: (typography) => typography.body3.regular,\n color: theme.palette.text.base,\n }),\n subTitleFont: createFontStyle(theme, {\n selector: (typography) => typography.caption1.regular,\n color: theme.palette.text.base,\n }),\n title: {\n alignItems: 'center',\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(2),\n paddingVertical: theme.spacing(4),\n },\n titleFont: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 20.8,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n };\n case 'line':\n return {\n container: {\n borderColor: theme.palette.border.weak,\n borderRadius: theme.shape.radius.md,\n borderWidth: 1,\n },\n content: {\n borderTopColor: theme.palette.border.weak,\n borderTopWidth: 0.5,\n left: 0,\n marginHorizontal: theme.spacing(4),\n paddingBottom: theme.spacing(4),\n paddingTop: theme.spacing(3),\n position: 'absolute',\n right: 0,\n },\n contentFont: createFontStyle(theme, {\n selector: (typography) => typography.caption2.regular,\n color: theme.palette.text.base,\n }),\n iconContainer: {\n paddingTop: 1,\n },\n title: {\n alignItems: 'center',\n paddingBottom: theme.spacing(1),\n paddingLeft: theme.spacing(4),\n paddingRight: theme.spacing(2),\n paddingTop: theme.spacing(0.75),\n },\n titleFont: createFontStyle(theme, {\n selector: (typography) => typography.caption1short.semiBold,\n color: theme.palette.text.base,\n }),\n };\n case 'underline':\n return {\n container: {\n borderBottomColor: theme.palette.border.weak,\n borderBottomWidth: 1,\n },\n content: {\n borderTopColor: theme.palette.border.weak,\n borderTopWidth: 0.5,\n paddingBottom: theme.spacing(5),\n paddingLeft: theme.spacing(0.5),\n paddingRight: theme.spacing(2),\n paddingTop: theme.spacing(4),\n },\n contentFont: createFontStyle(theme, {\n selector: (typography) => typography.body3.regular,\n color: theme.palette.text.base,\n }),\n title: {\n alignItems: 'center',\n paddingLeft: theme.spacing(0.5),\n paddingVertical: theme.spacing(2),\n },\n titleFont: createFontStyle(theme, {\n selector: (_) => typographyOf({\n fontSize: 16,\n lineHeight: 20.8,\n fontFamily: 'PretendardStd-SemiBold',\n letterSpacing: 0,\n }),\n color: theme.palette.text.strong,\n }),\n };\n }\n }, [theme, variant]);\n}\n"],"mappings":"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"}
|
|
@@ -51,6 +51,7 @@ export default function BottomSheetTitle(props) {
|
|
|
51
51
|
}), actionButtonProps ? /*#__PURE__*/React.createElement(Button, {
|
|
52
52
|
children: actionButtonProps.title,
|
|
53
53
|
color: 'accent',
|
|
54
|
+
disabled: actionButtonProps.disabled ?? false,
|
|
54
55
|
disableMinWidth: true,
|
|
55
56
|
onPress: actionButtonProps.onPress,
|
|
56
57
|
size: 'large',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Text","Button","Row","createFontStyle","css","useTheme","useStyles","theme","root","alignItems","gap","spacing","justifyContent","marginBottom","paddingHorizontal","title","paddingBottom","paddingTop","actionButton","BottomSheetTitle","props","actionButtonProps","children","style","styleProp","otherProps","styles","rootStyle","titleFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle","onPress"],"sources":["BottomSheetTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Button from '../Button/Button';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type BottomSheetTitleProps from './BottomSheetTitleProps';\n\ntype BottomSheetTitleStyles = NamedStylesStringUnion<'root' | 'title' | 'actionButton'>;\n\nconst useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTitleStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n gap: theme.spacing(8),\n justifyContent: 'space-between',\n marginBottom: theme.spacing(4),\n paddingHorizontal: theme.spacing(6),\n },\n title: {\n paddingBottom: theme.spacing(1.25),\n paddingTop: theme.spacing(1),\n },\n actionButton: {\n paddingBottom: theme.spacing(1.75),\n paddingHorizontal: 0,\n paddingTop: theme.spacing(1.25),\n },\n };\n};\n\nexport default function BottomSheetTitle(props: BottomSheetTitleProps) {\n const {\n actionButtonProps,\n children,\n style: styleProp,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const styles = useStyles();\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typography) => typography.header3.semiBold,\n color: theme.palette.text.strong,\n });\n\n const titleStyle = css([\n styles.title,\n titleFontStyle,\n ]);\n\n return (\n <Row\n style={rootStyle}\n {...otherProps}\n >\n <Text\n children={children}\n style={titleStyle}\n />\n\n {actionButtonProps ? (\n <Button\n children={actionButtonProps.title}\n color={'accent'}\n disableMinWidth={true}\n onPress={actionButtonProps.onPress}\n size={'large'}\n style={styles.actionButton}\n variant={'text'}\n />\n ) : null}\n </Row>\n );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;;AAKA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,GAAG,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CAFH;MAGFC,cAAc,EAAE,eAHd;MAIFC,YAAY,EAAEN,KAAK,CAACI,OAAN,CAAc,CAAd,CAJZ;MAKFG,iBAAiB,EAAEP,KAAK,CAACI,OAAN,CAAc,CAAd;IALjB,CADH;IAQHI,KAAK,EAAE;MACHC,aAAa,EAAET,KAAK,CAACI,OAAN,CAAc,IAAd,CADZ;MAEHM,UAAU,EAAEV,KAAK,CAACI,OAAN,CAAc,CAAd;IAFT,CARJ;IAYHO,YAAY,EAAE;MACVF,aAAa,EAAET,KAAK,CAACI,OAAN,CAAc,IAAd,CADL;MAEVG,iBAAiB,EAAE,CAFT;MAGVG,UAAU,EAAEV,KAAK,CAACI,OAAN,CAAc,IAAd;IAHF;EAZX,CAAP;AAkBH,CArBD;;AAuBA,eAAe,SAASQ,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,iBADE;IAEFC,QAFE;IAGFC,KAAK,EAAEC,SAHL;IAIF,GAAGC;EAJD,IAKFL,KALJ;EAOA,MAAMb,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMqB,MAAM,GAAGpB,SAAS,EAAxB;EAEA,MAAMqB,SAAS,GAAGvB,GAAG,CAAC,CAClBsB,MAAM,CAAClB,IADW,EAElBgB,SAFkB,CAAD,CAArB;EAKA,MAAMI,cAAc,GAAGzB,eAAe,CAACI,KAAD,EAAQ;IAC1CsB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAE1B,KAAK,CAAC2B,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAR,CAAtC;EAKA,MAAMC,UAAU,GAAGjC,GAAG,CAAC,CACnBsB,MAAM,CAACX,KADY,EAEnBa,cAFmB,CAAD,CAAtB;EAKA,oBACI,oBAAC,GAAD;IACI,KAAK,EAAED;EADX,GAEQF,UAFR,gBAII,oBAAC,IAAD;IACI,QAAQ,EAAEH,QADd;IAEI,KAAK,EAAEe;EAFX,EAJJ,EASKhB,iBAAiB,gBACd,oBAAC,MAAD;IACI,QAAQ,EAAEA,iBAAiB,CAACN,KADhC;IAEI,KAAK,EAAE,QAFX;IAGI,eAAe,EAAE,
|
|
1
|
+
{"version":3,"names":["React","Text","Button","Row","createFontStyle","css","useTheme","useStyles","theme","root","alignItems","gap","spacing","justifyContent","marginBottom","paddingHorizontal","title","paddingBottom","paddingTop","actionButton","BottomSheetTitle","props","actionButtonProps","children","style","styleProp","otherProps","styles","rootStyle","titleFontStyle","selector","typography","header3","semiBold","color","palette","text","strong","titleStyle","disabled","onPress"],"sources":["BottomSheetTitle.tsx"],"sourcesContent":["import React from 'react';\nimport { Text } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport Button from '../Button/Button';\nimport Row from '../Row';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport type BottomSheetTitleProps from './BottomSheetTitleProps';\n\ntype BottomSheetTitleStyles = NamedStylesStringUnion<'root' | 'title' | 'actionButton'>;\n\nconst useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTitleStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n gap: theme.spacing(8),\n justifyContent: 'space-between',\n marginBottom: theme.spacing(4),\n paddingHorizontal: theme.spacing(6),\n },\n title: {\n paddingBottom: theme.spacing(1.25),\n paddingTop: theme.spacing(1),\n },\n actionButton: {\n paddingBottom: theme.spacing(1.75),\n paddingHorizontal: 0,\n paddingTop: theme.spacing(1.25),\n },\n };\n};\n\nexport default function BottomSheetTitle(props: BottomSheetTitleProps) {\n const {\n actionButtonProps,\n children,\n style: styleProp,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const styles = useStyles();\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n const titleFontStyle = createFontStyle(theme, {\n selector: (typography) => typography.header3.semiBold,\n color: theme.palette.text.strong,\n });\n\n const titleStyle = css([\n styles.title,\n titleFontStyle,\n ]);\n\n return (\n <Row\n style={rootStyle}\n {...otherProps}\n >\n <Text\n children={children}\n style={titleStyle}\n />\n\n {actionButtonProps ? (\n <Button\n children={actionButtonProps.title}\n color={'accent'}\n disabled={actionButtonProps.disabled ?? false}\n disableMinWidth={true}\n onPress={actionButtonProps.onPress}\n size={'large'}\n style={styles.actionButton}\n variant={'text'}\n />\n ) : null}\n </Row>\n );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,OAAOC,GAAP,MAAgB,QAAhB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;;AAKA,MAAMC,SAA4C,GAAG,YAAoC;EACrF,MAAMC,KAAK,GAAGF,QAAQ,EAAtB;EAEA,OAAO;IACHG,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,GAAG,EAAEH,KAAK,CAACI,OAAN,CAAc,CAAd,CAFH;MAGFC,cAAc,EAAE,eAHd;MAIFC,YAAY,EAAEN,KAAK,CAACI,OAAN,CAAc,CAAd,CAJZ;MAKFG,iBAAiB,EAAEP,KAAK,CAACI,OAAN,CAAc,CAAd;IALjB,CADH;IAQHI,KAAK,EAAE;MACHC,aAAa,EAAET,KAAK,CAACI,OAAN,CAAc,IAAd,CADZ;MAEHM,UAAU,EAAEV,KAAK,CAACI,OAAN,CAAc,CAAd;IAFT,CARJ;IAYHO,YAAY,EAAE;MACVF,aAAa,EAAET,KAAK,CAACI,OAAN,CAAc,IAAd,CADL;MAEVG,iBAAiB,EAAE,CAFT;MAGVG,UAAU,EAAEV,KAAK,CAACI,OAAN,CAAc,IAAd;IAHF;EAZX,CAAP;AAkBH,CArBD;;AAuBA,eAAe,SAASQ,gBAAT,CAA0BC,KAA1B,EAAwD;EACnE,MAAM;IACFC,iBADE;IAEFC,QAFE;IAGFC,KAAK,EAAEC,SAHL;IAIF,GAAGC;EAJD,IAKFL,KALJ;EAOA,MAAMb,KAAK,GAAGF,QAAQ,EAAtB;EAEA,MAAMqB,MAAM,GAAGpB,SAAS,EAAxB;EAEA,MAAMqB,SAAS,GAAGvB,GAAG,CAAC,CAClBsB,MAAM,CAAClB,IADW,EAElBgB,SAFkB,CAAD,CAArB;EAKA,MAAMI,cAAc,GAAGzB,eAAe,CAACI,KAAD,EAAQ;IAC1CsB,QAAQ,EAAGC,UAAD,IAAgBA,UAAU,CAACC,OAAX,CAAmBC,QADH;IAE1CC,KAAK,EAAE1B,KAAK,CAAC2B,OAAN,CAAcC,IAAd,CAAmBC;EAFgB,CAAR,CAAtC;EAKA,MAAMC,UAAU,GAAGjC,GAAG,CAAC,CACnBsB,MAAM,CAACX,KADY,EAEnBa,cAFmB,CAAD,CAAtB;EAKA,oBACI,oBAAC,GAAD;IACI,KAAK,EAAED;EADX,GAEQF,UAFR,gBAII,oBAAC,IAAD;IACI,QAAQ,EAAEH,QADd;IAEI,KAAK,EAAEe;EAFX,EAJJ,EASKhB,iBAAiB,gBACd,oBAAC,MAAD;IACI,QAAQ,EAAEA,iBAAiB,CAACN,KADhC;IAEI,KAAK,EAAE,QAFX;IAGI,QAAQ,EAAEM,iBAAiB,CAACiB,QAAlB,IAA8B,KAH5C;IAII,eAAe,EAAE,IAJrB;IAKI,OAAO,EAAEjB,iBAAiB,CAACkB,OAL/B;IAMI,IAAI,EAAE,OANV;IAOI,KAAK,EAAEb,MAAM,CAACR,YAPlB;IAQI,OAAO,EAAE;EARb,EADc,GAWd,IApBR,CADJ;AAwBH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["BottomSheetTitleProps.ts"],"sourcesContent":["import type { OverridableComponentProps } from '../types';\nimport type { RowProps } from '../Row';\n\ntype ActionButtonProps = {\n title: string;\n onPress: () => void;\n};\n\nexport default interface BottomSheetTitleProps extends OverridableComponentProps<RowProps, {\n children: string;\n actionButtonProps?: ActionButtonProps;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["BottomSheetTitleProps.ts"],"sourcesContent":["import type { OverridableComponentProps } from '../types';\nimport type { RowProps } from '../Row';\n\ntype ActionButtonProps = {\n disabled?: boolean | undefined;\n title: string;\n onPress: () => void;\n};\n\nexport default interface BottomSheetTitleProps extends OverridableComponentProps<RowProps, {\n children: string;\n actionButtonProps?: ActionButtonProps;\n}> {}\n"],"mappings":""}
|
|
@@ -23,21 +23,21 @@ const useStyles = function () {
|
|
|
23
23
|
width: '100%'
|
|
24
24
|
},
|
|
25
25
|
large: {
|
|
26
|
-
gap:
|
|
26
|
+
gap: 8,
|
|
27
27
|
minWidth: 104,
|
|
28
|
-
paddingHorizontal:
|
|
29
|
-
paddingVertical:
|
|
28
|
+
paddingHorizontal: 24,
|
|
29
|
+
paddingVertical: 14
|
|
30
30
|
},
|
|
31
31
|
medium: {
|
|
32
|
-
gap:
|
|
32
|
+
gap: 6,
|
|
33
33
|
minWidth: 88,
|
|
34
|
-
paddingHorizontal:
|
|
35
|
-
paddingVertical:
|
|
34
|
+
paddingHorizontal: 16,
|
|
35
|
+
paddingVertical: 11
|
|
36
36
|
},
|
|
37
37
|
small: {
|
|
38
38
|
minWidth: 64,
|
|
39
|
-
paddingHorizontal:
|
|
40
|
-
paddingVertical:
|
|
39
|
+
paddingHorizontal: 10,
|
|
40
|
+
paddingVertical: 8
|
|
41
41
|
},
|
|
42
42
|
loadingSpinner: {
|
|
43
43
|
position: 'absolute'
|
|
@@ -115,7 +115,9 @@ export default function Button(props) {
|
|
|
115
115
|
const endIcon = endIconProp ? /*#__PURE__*/React.createElement(View, {
|
|
116
116
|
style: styles.iconContainer
|
|
117
117
|
}, cloneElementSafely(endIconProp, iconProps)) : null;
|
|
118
|
-
const buttonBaseStyle = css([styles.root, containerStyle, styles[size],
|
|
118
|
+
const buttonBaseStyle = css([styles.root, containerStyle, styles[size], (variant === 'capsuleSolid' || variant === 'capsuleOutlined') && size === 'small' ? {
|
|
119
|
+
paddingHorizontal: 12
|
|
120
|
+
} : undefined, fullWidth ? styles.fullWidth : undefined, disableMinWidth ? {
|
|
119
121
|
minWidth: 0
|
|
120
122
|
} : undefined, disablePadding ? {
|
|
121
123
|
paddingHorizontal: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Linking","Text","View","typographyOf","ButtonBase","LoadingSpinner","createFontStyle","css","useTheme","cloneElementSafely","useVariantStyleMap","useStyles","theme","root","alignItems","borderRadius","shape","radius","sm","flexDirection","justifyContent","minHeight","fullWidth","width","large","gap","spacing","minWidth","paddingHorizontal","paddingVertical","medium","small","loadingSpinner","position","iconContainer","paddingTop","fontStyleMap","fontSize","lineHeight","fontFamily","letterSpacing","getLoadingSpinnerColor","variant","color","Button","props","children","colorProp","disabled","disabledProp","disableMinWidth","disablePadding","endIcon","endIconProp","href","isLoading","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","otherProps","styles","container","containerStyle","iconColor","labelColor","iconProps","fill","opacity","buttonBaseStyle","undefined","fontStyle","selector","_","textStyle","textAlign","modifiedPressEffect","handlePress","canOpenURL","openURL","loadingSpinnerColor"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text, View } from 'react-native';\nimport type { FontStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport { LoadingSpinner } from '../internal/icons';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonColor, ButtonSize, ButtonVariant } from './ButtonProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype ButtonStyles = NamedStylesStringUnion<'root' | 'fullWidth' | 'large' | 'medium' | 'small' | 'loadingSpinner' | 'iconContainer'>;\n\nconst useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n borderRadius: theme.shape.radius.sm,\n flexDirection: 'row',\n justifyContent: 'center',\n minHeight: 32,\n },\n fullWidth: {\n width: '100%',\n },\n large: {\n gap: theme.spacing(2),\n minWidth: 104,\n paddingHorizontal: theme.spacing(6),\n paddingVertical: theme.spacing(3.5),\n },\n medium: {\n gap: theme.spacing(1.5),\n minWidth: 88,\n paddingHorizontal: theme.spacing(6),\n paddingVertical: theme.spacing(2.75),\n },\n small: {\n minWidth: 64,\n paddingHorizontal: theme.spacing(6),\n paddingVertical: theme.spacing(2),\n },\n loadingSpinner: {\n position: 'absolute',\n },\n iconContainer: {\n paddingTop: 1,\n },\n };\n};\n\nconst fontStyleMap: Record<ButtonSize, FontStyle> = {\n large: typographyOf({\n fontSize: 16,\n lineHeight: 20,\n fontFamily: 'LexendDeca-SemiBold',\n letterSpacing: -0.32,\n }),\n medium: typographyOf({\n fontSize: 15,\n lineHeight: 19.5,\n fontFamily: 'LexendDeca-SemiBold',\n letterSpacing: -0.3,\n }),\n small: typographyOf({\n fontSize: 13,\n lineHeight: 16.9,\n fontFamily: 'LexendDeca-SemiBold',\n letterSpacing: -0.26,\n }),\n};\n\nfunction getLoadingSpinnerColor(variant: ButtonVariant, color: ButtonColor) {\n if (variant === 'solid' || (variant === 'capsuleSolid' && color !== 'secondary')) {\n return 'white';\n }\n return 'gray';\n}\n\nexport default function Button(props: ButtonProps) {\n const {\n children,\n color: colorProp = 'primary' as ButtonColor,\n disabled: disabledProp = false,\n disableMinWidth = false,\n disablePadding = false,\n endIcon: endIconProp,\n fullWidth = false,\n href,\n isLoading = false,\n onPress,\n pressEffect,\n size = 'medium' as ButtonSize,\n startIcon: startIconProp,\n style: styleProp,\n variant = 'solid' as ButtonVariant,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const styles = useStyles();\n\n const disabled = disabledProp || isLoading;\n\n const color = disabledProp ? 'disabled' : colorProp;\n const {\n container: containerStyle,\n iconColor,\n labelColor,\n } = useVariantStyleMap(variant, color);\n\n const iconProps = {\n fill: iconColor,\n opacity: isLoading ? 0 : 1,\n };\n\n const startIcon = startIconProp ? (\n <View style={styles.iconContainer}>\n {cloneElementSafely(startIconProp, iconProps)}\n </View>\n ) : null;\n\n const endIcon = endIconProp ? (\n <View style={styles.iconContainer}>\n {cloneElementSafely(endIconProp, iconProps)}\n </View>\n ) : null;\n\n const buttonBaseStyle = css([\n styles.root,\n containerStyle,\n styles[size],\n fullWidth ? styles.fullWidth : undefined,\n disableMinWidth ? { minWidth: 0 } : undefined,\n disablePadding ? { paddingHorizontal: 0, paddingVertical: 0 } : undefined,\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (_) => fontStyleMap[size],\n color: labelColor,\n });\n\n const textStyle = css([\n fontStyle,\n {\n opacity: isLoading ? 0 : 1,\n textAlign: 'center',\n },\n ]);\n\n const modifiedPressEffect = variant !== 'text' && !pressEffect\n ? 'scale'\n : pressEffect;\n\n const handlePress = async () => {\n if (disabled) {\n return;\n }\n if (onPress) {\n onPress();\n return;\n }\n if (href) {\n if (await Linking.canOpenURL(href)) {\n await Linking.openURL(href);\n }\n }\n };\n\n const loadingSpinnerColor = getLoadingSpinnerColor(variant, color);\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={buttonBaseStyle}\n pressEffect={modifiedPressEffect}\n {...otherProps}\n >\n {startIcon}\n\n <Text style={textStyle}>\n {children}\n </Text>\n\n {endIcon}\n\n {isLoading ? (\n <LoadingSpinner\n color={loadingSpinnerColor}\n size={size}\n style={styles.loadingSpinner}\n />\n ) : null}\n </ButtonBase>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["React","Linking","Text","View","typographyOf","ButtonBase","LoadingSpinner","createFontStyle","css","useTheme","cloneElementSafely","useVariantStyleMap","useStyles","theme","root","alignItems","borderRadius","shape","radius","sm","flexDirection","justifyContent","minHeight","fullWidth","width","large","gap","minWidth","paddingHorizontal","paddingVertical","medium","small","loadingSpinner","position","iconContainer","paddingTop","fontStyleMap","fontSize","lineHeight","fontFamily","letterSpacing","getLoadingSpinnerColor","variant","color","Button","props","children","colorProp","disabled","disabledProp","disableMinWidth","disablePadding","endIcon","endIconProp","href","isLoading","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","otherProps","styles","container","containerStyle","iconColor","labelColor","iconProps","fill","opacity","buttonBaseStyle","undefined","fontStyle","selector","_","textStyle","textAlign","modifiedPressEffect","handlePress","canOpenURL","openURL","loadingSpinnerColor"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text, View } from 'react-native';\nimport type { FontStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { typographyOf } from '@fountain-ui/styles';\nimport ButtonBase from '../ButtonBase/ButtonBase';\nimport { LoadingSpinner } from '../internal/icons';\nimport { createFontStyle, css, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonColor, ButtonSize, ButtonVariant } from './ButtonProps';\nimport useVariantStyleMap from './useVariantStyleMap';\n\ntype ButtonStyles = NamedStylesStringUnion<'root' | 'fullWidth' | 'large' | 'medium' | 'small' | 'loadingSpinner' | 'iconContainer'>;\n\nconst useStyles: UseStyles<ButtonStyles> = function (): ButtonStyles {\n const theme = useTheme();\n\n return {\n root: {\n alignItems: 'center',\n borderRadius: theme.shape.radius.sm,\n flexDirection: 'row',\n justifyContent: 'center',\n minHeight: 32,\n },\n fullWidth: {\n width: '100%',\n },\n large: {\n gap: 8,\n minWidth: 104,\n paddingHorizontal: 24,\n paddingVertical: 14,\n },\n medium: {\n gap: 6,\n minWidth: 88,\n paddingHorizontal: 16,\n paddingVertical: 11,\n },\n small: {\n minWidth: 64,\n paddingHorizontal: 10,\n paddingVertical: 8,\n },\n loadingSpinner: {\n position: 'absolute',\n },\n iconContainer: {\n paddingTop: 1,\n },\n };\n};\n\nconst fontStyleMap: Record<ButtonSize, FontStyle> = {\n large: typographyOf({\n fontSize: 16,\n lineHeight: 20,\n fontFamily: 'LexendDeca-SemiBold',\n letterSpacing: -0.32,\n }),\n medium: typographyOf({\n fontSize: 15,\n lineHeight: 19.5,\n fontFamily: 'LexendDeca-SemiBold',\n letterSpacing: -0.3,\n }),\n small: typographyOf({\n fontSize: 13,\n lineHeight: 16.9,\n fontFamily: 'LexendDeca-SemiBold',\n letterSpacing: -0.26,\n }),\n};\n\nfunction getLoadingSpinnerColor(variant: ButtonVariant, color: ButtonColor) {\n if (variant === 'solid' || (variant === 'capsuleSolid' && color !== 'secondary')) {\n return 'white';\n }\n return 'gray';\n}\n\nexport default function Button(props: ButtonProps) {\n const {\n children,\n color: colorProp = 'primary' as ButtonColor,\n disabled: disabledProp = false,\n disableMinWidth = false,\n disablePadding = false,\n endIcon: endIconProp,\n fullWidth = false,\n href,\n isLoading = false,\n onPress,\n pressEffect,\n size = 'medium' as ButtonSize,\n startIcon: startIconProp,\n style: styleProp,\n variant = 'solid' as ButtonVariant,\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const styles = useStyles();\n\n const disabled = disabledProp || isLoading;\n\n const color = disabledProp ? 'disabled' : colorProp;\n const {\n container: containerStyle,\n iconColor,\n labelColor,\n } = useVariantStyleMap(variant, color);\n\n const iconProps = {\n fill: iconColor,\n opacity: isLoading ? 0 : 1,\n };\n\n const startIcon = startIconProp ? (\n <View style={styles.iconContainer}>\n {cloneElementSafely(startIconProp, iconProps)}\n </View>\n ) : null;\n\n const endIcon = endIconProp ? (\n <View style={styles.iconContainer}>\n {cloneElementSafely(endIconProp, iconProps)}\n </View>\n ) : null;\n\n const buttonBaseStyle = css([\n styles.root,\n containerStyle,\n styles[size],\n (variant === 'capsuleSolid' || variant === 'capsuleOutlined') && size === 'small' ? { paddingHorizontal: 12 } : undefined,\n fullWidth ? styles.fullWidth : undefined,\n disableMinWidth ? { minWidth: 0 } : undefined,\n disablePadding ? { paddingHorizontal: 0, paddingVertical: 0 } : undefined,\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (_) => fontStyleMap[size],\n color: labelColor,\n });\n\n const textStyle = css([\n fontStyle,\n {\n opacity: isLoading ? 0 : 1,\n textAlign: 'center',\n },\n ]);\n\n const modifiedPressEffect = variant !== 'text' && !pressEffect\n ? 'scale'\n : pressEffect;\n\n const handlePress = async () => {\n if (disabled) {\n return;\n }\n if (onPress) {\n onPress();\n return;\n }\n if (href) {\n if (await Linking.canOpenURL(href)) {\n await Linking.openURL(href);\n }\n }\n };\n\n const loadingSpinnerColor = getLoadingSpinnerColor(variant, color);\n\n return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={buttonBaseStyle}\n pressEffect={modifiedPressEffect}\n {...otherProps}\n >\n {startIcon}\n\n <Text style={textStyle}>\n {children}\n </Text>\n\n {endIcon}\n\n {isLoading ? (\n <LoadingSpinner\n color={loadingSpinnerColor}\n size={size}\n style={styles.loadingSpinner}\n />\n ) : null}\n </ButtonBase>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,EAAkBC,IAAlB,EAAwBC,IAAxB,QAAoC,cAApC;AAEA,SAASC,YAAT,QAA6B,qBAA7B;AACA,OAAOC,UAAP,MAAuB,0BAAvB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,QAA/B,QAA+C,WAA/C;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAGA,OAAOC,kBAAP,MAA+B,sBAA/B;;AAIA,MAAMC,SAAkC,GAAG,YAA0B;EACjE,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,UAAU,EAAE,QADV;MAEFC,YAAY,EAAEH,KAAK,CAACI,KAAN,CAAYC,MAAZ,CAAmBC,EAF/B;MAGFC,aAAa,EAAE,KAHb;MAIFC,cAAc,EAAE,QAJd;MAKFC,SAAS,EAAE;IALT,CADH;IAQHC,SAAS,EAAE;MACPC,KAAK,EAAE;IADA,CARR;IAWHC,KAAK,EAAE;MACHC,GAAG,EAAE,CADF;MAEHC,QAAQ,EAAE,GAFP;MAGHC,iBAAiB,EAAE,EAHhB;MAIHC,eAAe,EAAE;IAJd,CAXJ;IAiBHC,MAAM,EAAE;MACJJ,GAAG,EAAE,CADD;MAEJC,QAAQ,EAAE,EAFN;MAGJC,iBAAiB,EAAE,EAHf;MAIJC,eAAe,EAAE;IAJb,CAjBL;IAuBHE,KAAK,EAAE;MACHJ,QAAQ,EAAE,EADP;MAEHC,iBAAiB,EAAE,EAFhB;MAGHC,eAAe,EAAE;IAHd,CAvBJ;IA4BHG,cAAc,EAAE;MACZC,QAAQ,EAAE;IADE,CA5Bb;IA+BHC,aAAa,EAAE;MACXC,UAAU,EAAE;IADD;EA/BZ,CAAP;AAmCH,CAtCD;;AAwCA,MAAMC,YAA2C,GAAG;EAChDX,KAAK,EAAErB,YAAY,CAAC;IAChBiC,QAAQ,EAAE,EADM;IAEhBC,UAAU,EAAE,EAFI;IAGhBC,UAAU,EAAE,qBAHI;IAIhBC,aAAa,EAAE,CAAC;EAJA,CAAD,CAD6B;EAOhDV,MAAM,EAAE1B,YAAY,CAAC;IACjBiC,QAAQ,EAAE,EADO;IAEjBC,UAAU,EAAE,IAFK;IAGjBC,UAAU,EAAE,qBAHK;IAIjBC,aAAa,EAAE,CAAC;EAJC,CAAD,CAP4B;EAahDT,KAAK,EAAE3B,YAAY,CAAC;IAChBiC,QAAQ,EAAE,EADM;IAEhBC,UAAU,EAAE,IAFI;IAGhBC,UAAU,EAAE,qBAHI;IAIhBC,aAAa,EAAE,CAAC;EAJA,CAAD;AAb6B,CAApD;;AAqBA,SAASC,sBAAT,CAAgCC,OAAhC,EAAwDC,KAAxD,EAA4E;EACxE,IAAID,OAAO,KAAK,OAAZ,IAAwBA,OAAO,KAAK,cAAZ,IAA8BC,KAAK,KAAK,WAApE,EAAkF;IAC9E,OAAO,OAAP;EACH;;EACD,OAAO,MAAP;AACH;;AAED,eAAe,SAASC,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,QADE;IAEFH,KAAK,EAAEI,SAAS,GAAG,SAFjB;IAGFC,QAAQ,EAAEC,YAAY,GAAG,KAHvB;IAIFC,eAAe,GAAG,KAJhB;IAKFC,cAAc,GAAG,KALf;IAMFC,OAAO,EAAEC,WANP;IAOF9B,SAAS,GAAG,KAPV;IAQF+B,IARE;IASFC,SAAS,GAAG,KATV;IAUFC,OAVE;IAWFC,WAXE;IAYFC,IAAI,GAAG,QAZL;IAaFC,SAAS,EAAEC,aAbT;IAcFC,KAAK,EAAEC,SAdL;IAeFpB,OAAO,GAAG,OAfR;IAgBF,GAAGqB;EAhBD,IAiBFlB,KAjBJ;EAmBA,MAAMhC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,MAAMuD,MAAM,GAAGpD,SAAS,EAAxB;EAEA,MAAMoC,QAAQ,GAAGC,YAAY,IAAIM,SAAjC;EAEA,MAAMZ,KAAK,GAAGM,YAAY,GAAG,UAAH,GAAgBF,SAA1C;EACA,MAAM;IACFkB,SAAS,EAAEC,cADT;IAEFC,SAFE;IAGFC;EAHE,IAIFzD,kBAAkB,CAAC+B,OAAD,EAAUC,KAAV,CAJtB;EAMA,MAAM0B,SAAS,GAAG;IACdC,IAAI,EAAEH,SADQ;IAEdI,OAAO,EAAEhB,SAAS,GAAG,CAAH,GAAO;EAFX,CAAlB;EAKA,MAAMI,SAAS,GAAGC,aAAa,gBAC3B,oBAAC,IAAD;IAAM,KAAK,EAAEI,MAAM,CAAC9B;EAApB,GACKxB,kBAAkB,CAACkD,aAAD,EAAgBS,SAAhB,CADvB,CAD2B,GAI3B,IAJJ;EAMA,MAAMjB,OAAO,GAAGC,WAAW,gBACvB,oBAAC,IAAD;IAAM,KAAK,EAAEW,MAAM,CAAC9B;EAApB,GACKxB,kBAAkB,CAAC2C,WAAD,EAAcgB,SAAd,CADvB,CADuB,GAIvB,IAJJ;EAMA,MAAMG,eAAe,GAAGhE,GAAG,CAAC,CACxBwD,MAAM,CAAClD,IADiB,EAExBoD,cAFwB,EAGxBF,MAAM,CAACN,IAAD,CAHkB,EAIxB,CAAChB,OAAO,KAAK,cAAZ,IAA8BA,OAAO,KAAK,iBAA3C,KAAiEgB,IAAI,KAAK,OAA1E,GAAoF;IAAE9B,iBAAiB,EAAE;EAArB,CAApF,GAAgH6C,SAJxF,EAKxBlD,SAAS,GAAGyC,MAAM,CAACzC,SAAV,GAAsBkD,SALP,EAMxBvB,eAAe,GAAG;IAAEvB,QAAQ,EAAE;EAAZ,CAAH,GAAqB8C,SANZ,EAOxBtB,cAAc,GAAG;IAAEvB,iBAAiB,EAAE,CAArB;IAAwBC,eAAe,EAAE;EAAzC,CAAH,GAAkD4C,SAPxC,EAQxBX,SARwB,CAAD,CAA3B;EAWA,MAAMY,SAAS,GAAGnE,eAAe,CAACM,KAAD,EAAQ;IACrC8D,QAAQ,EAAGC,CAAD,IAAOxC,YAAY,CAACsB,IAAD,CADQ;IAErCf,KAAK,EAAEyB;EAF8B,CAAR,CAAjC;EAKA,MAAMS,SAAS,GAAGrE,GAAG,CAAC,CAClBkE,SADkB,EAElB;IACIH,OAAO,EAAEhB,SAAS,GAAG,CAAH,GAAO,CAD7B;IAEIuB,SAAS,EAAE;EAFf,CAFkB,CAAD,CAArB;EAQA,MAAMC,mBAAmB,GAAGrC,OAAO,KAAK,MAAZ,IAAsB,CAACe,WAAvB,GACtB,OADsB,GAEtBA,WAFN;;EAIA,MAAMuB,WAAW,GAAG,YAAY;IAC5B,IAAIhC,QAAJ,EAAc;MACV;IACH;;IACD,IAAIQ,OAAJ,EAAa;MACTA,OAAO;MACP;IACH;;IACD,IAAIF,IAAJ,EAAU;MACN,IAAI,MAAMrD,OAAO,CAACgF,UAAR,CAAmB3B,IAAnB,CAAV,EAAoC;QAChC,MAAMrD,OAAO,CAACiF,OAAR,CAAgB5B,IAAhB,CAAN;MACH;IACJ;EACJ,CAbD;;EAeA,MAAM6B,mBAAmB,GAAG1C,sBAAsB,CAACC,OAAD,EAAUC,KAAV,CAAlD;EAEA,oBACI,oBAAC,UAAD;IACI,QAAQ,EAAEK,QADd;IAEI,OAAO,EAAEgC,WAFb;IAGI,KAAK,EAAER,eAHX;IAII,WAAW,EAAEO;EAJjB,GAKQhB,UALR,GAOKJ,SAPL,eASI,oBAAC,IAAD;IAAM,KAAK,EAAEkB;EAAb,GACK/B,QADL,CATJ,EAaKM,OAbL,EAeKG,SAAS,gBACN,oBAAC,cAAD;IACI,KAAK,EAAE4B,mBADX;IAEI,IAAI,EAAEzB,IAFV;IAGI,KAAK,EAAEM,MAAM,CAAChC;EAHlB,EADM,GAMN,IArBR,CADJ;AAyBH;AAAA"}
|
|
@@ -7,9 +7,11 @@ import Column from '../Column';
|
|
|
7
7
|
import Modal, { ANIMATION_TYPE } from '../Modal';
|
|
8
8
|
import ShadowView from '../ShadowView';
|
|
9
9
|
import { DialogProvider } from './DialogContext';
|
|
10
|
+
import FullDialogCloseButton from './FullDialogCloseButton';
|
|
10
11
|
import useDialogStyle from './useDialogStyle';
|
|
11
12
|
const TOP_ELEMENT_OFFSET = 20;
|
|
12
|
-
|
|
13
|
+
|
|
14
|
+
const Dialog = props => {
|
|
13
15
|
const {
|
|
14
16
|
animationType = ANIMATION_TYPE.SLIDE,
|
|
15
17
|
children,
|
|
@@ -117,6 +119,8 @@ export default function Dialog(props) {
|
|
|
117
119
|
variant: 600,
|
|
118
120
|
style: paperStyle
|
|
119
121
|
}, children)));
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
+
};
|
|
123
|
+
|
|
124
|
+
Dialog.FullDialogCloseButton = FullDialogCloseButton;
|
|
125
|
+
export default Dialog;
|
|
122
126
|
//# sourceMappingURL=Dialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useMemo","useState","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","ShadowView","DialogProvider","useDialogStyle","TOP_ELEMENT_OFFSET","Dialog","props","animationType","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","height","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","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_OFFSET = 20;\n\
|
|
1
|
+
{"version":3,"names":["React","useMemo","useState","useWindowDimensions","css","Column","Modal","ANIMATION_TYPE","ShadowView","DialogProvider","FullDialogCloseButton","useDialogStyle","TOP_ELEMENT_OFFSET","Dialog","props","animationType","SLIDE","children","hideBackdrop","onClose","style","styleProp","size","visible","topElement","otherProps","styles","height","screenHeight","topElementHeight","setTopElementHeight","handleTopElementLayout","event","nativeEvent","layout","offsetAnimation","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 FullDialogCloseButton from './FullDialogCloseButton';\nimport useDialogStyle from './useDialogStyle';\n\nconst TOP_ELEMENT_OFFSET = 20;\n\nconst 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 return [{\n toValue: (topElementHeight - TOP_ELEMENT_OFFSET) / 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\nDialog.FullDialogCloseButton = FullDialogCloseButton;\n\nexport default Dialog;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,42 @@
|
|
|
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
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import { css, useTheme } from '../styles';
|
|
6
|
+
import IconButton from '../IconButton';
|
|
7
|
+
import { Close } from '../internal';
|
|
8
|
+
|
|
9
|
+
const useStyles = function () {
|
|
10
|
+
const theme = useTheme();
|
|
11
|
+
return {
|
|
12
|
+
root: {
|
|
13
|
+
paddingBottom: 40,
|
|
14
|
+
paddingTop: 16
|
|
15
|
+
},
|
|
16
|
+
button: {
|
|
17
|
+
alignSelf: 'center',
|
|
18
|
+
backgroundColor: theme.palette.fill.baseAlt,
|
|
19
|
+
borderRadius: theme.shape.radius.full,
|
|
20
|
+
height: 48,
|
|
21
|
+
width: 48
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export default function FullDialogCloseButton(props) {
|
|
27
|
+
const {
|
|
28
|
+
onPress,
|
|
29
|
+
style: styleProp,
|
|
30
|
+
...otherProps
|
|
31
|
+
} = props;
|
|
32
|
+
const styles = useStyles();
|
|
33
|
+
const rootStyle = css([styles.root, styleProp]);
|
|
34
|
+
return /*#__PURE__*/React.createElement(View, _extends({
|
|
35
|
+
style: rootStyle
|
|
36
|
+
}, otherProps), /*#__PURE__*/React.createElement(IconButton, {
|
|
37
|
+
iconSize: 'large',
|
|
38
|
+
onPress: onPress,
|
|
39
|
+
style: styles.button
|
|
40
|
+
}, /*#__PURE__*/React.createElement(Close, null)));
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=FullDialogCloseButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","View","css","useTheme","IconButton","Close","useStyles","theme","root","paddingBottom","paddingTop","button","alignSelf","backgroundColor","palette","fill","baseAlt","borderRadius","shape","radius","full","height","width","FullDialogCloseButton","props","onPress","style","styleProp","otherProps","styles","rootStyle"],"sources":["FullDialogCloseButton.tsx"],"sourcesContent":["import React from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\nimport type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport type { IconButtonProps } from '../IconButton';\nimport { css, useTheme } from '../styles';\nimport type { OverridableComponentProps } from '../types';\nimport IconButton from '../IconButton';\nimport { Close } from '../internal';\n\ntype TabsStyles = NamedStylesStringUnion<'root' | 'button'>;\n\nconst useStyles: UseStyles<TabsStyles> = function (): TabsStyles {\n const theme = useTheme();\n\n return {\n root: {\n paddingBottom: 40,\n paddingTop: 16,\n },\n button: {\n alignSelf: 'center',\n backgroundColor: theme.palette.fill.baseAlt,\n borderRadius: theme.shape.radius.full,\n height: 48,\n width: 48,\n },\n };\n};\n\ninterface FullDialogCloseButtonProps extends OverridableComponentProps<ViewProps, {\n onPress: IconButtonProps['onPress'];\n}> {}\n\nexport default function FullDialogCloseButton(props: FullDialogCloseButtonProps) {\n const {\n onPress,\n style: styleProp,\n ...otherProps\n } = props;\n\n const styles = useStyles();\n\n const rootStyle = css([\n styles.root,\n styleProp,\n ]);\n\n return (\n <View\n style={rootStyle}\n {...otherProps}\n >\n <IconButton\n iconSize={'large'}\n onPress={onPress}\n style={styles.button}\n >\n <Close/>\n </IconButton>\n </View>\n );\n}\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,IAAT,QAAqB,cAArB;AAGA,SAASC,GAAT,EAAcC,QAAd,QAA8B,WAA9B;AAEA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,KAAT,QAAsB,aAAtB;;AAIA,MAAMC,SAAgC,GAAG,YAAwB;EAC7D,MAAMC,KAAK,GAAGJ,QAAQ,EAAtB;EAEA,OAAO;IACHK,IAAI,EAAE;MACFC,aAAa,EAAE,EADb;MAEFC,UAAU,EAAE;IAFV,CADH;IAKHC,MAAM,EAAE;MACJC,SAAS,EAAE,QADP;MAEJC,eAAe,EAAEN,KAAK,CAACO,OAAN,CAAcC,IAAd,CAAmBC,OAFhC;MAGJC,YAAY,EAAEV,KAAK,CAACW,KAAN,CAAYC,MAAZ,CAAmBC,IAH7B;MAIJC,MAAM,EAAE,EAJJ;MAKJC,KAAK,EAAE;IALH;EALL,CAAP;AAaH,CAhBD;;AAsBA,eAAe,SAASC,qBAAT,CAA+BC,KAA/B,EAAkE;EAC7E,MAAM;IACFC,OADE;IAEFC,KAAK,EAAEC,SAFL;IAGF,GAAGC;EAHD,IAIFJ,KAJJ;EAMA,MAAMK,MAAM,GAAGvB,SAAS,EAAxB;EAEA,MAAMwB,SAAS,GAAG5B,GAAG,CAAC,CAClB2B,MAAM,CAACrB,IADW,EAElBmB,SAFkB,CAAD,CAArB;EAKA,oBACI,oBAAC,IAAD;IACI,KAAK,EAAEG;EADX,GAEQF,UAFR,gBAII,oBAAC,UAAD;IACI,QAAQ,EAAE,OADd;IAEI,OAAO,EAAEH,OAFb;IAGI,KAAK,EAAEI,MAAM,CAAClB;EAHlB,gBAKI,oBAAC,KAAD,OALJ,CAJJ,CADJ;AAcH"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
2
|
import { useWindowDimensions } from 'react-native';
|
|
3
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
3
4
|
import { useTheme } from '../styles';
|
|
4
5
|
export default function useDialogStyle(size) {
|
|
5
6
|
const theme = useTheme();
|
|
@@ -7,6 +8,10 @@ export default function useDialogStyle(size) {
|
|
|
7
8
|
height: windowHeight,
|
|
8
9
|
width: windowWidth
|
|
9
10
|
} = useWindowDimensions();
|
|
11
|
+
const {
|
|
12
|
+
bottom: bottomSafeAreaInset,
|
|
13
|
+
top: topSafeAreaInset
|
|
14
|
+
} = useSafeAreaInsets();
|
|
10
15
|
return useMemo(() => {
|
|
11
16
|
var _sizeStyleMap$size;
|
|
12
17
|
|
|
@@ -22,7 +27,10 @@ export default function useDialogStyle(size) {
|
|
|
22
27
|
minHeight: 360,
|
|
23
28
|
width: 512
|
|
24
29
|
},
|
|
25
|
-
full: {
|
|
30
|
+
full: {
|
|
31
|
+
paddingBottom: bottomSafeAreaInset,
|
|
32
|
+
paddingTop: topSafeAreaInset
|
|
33
|
+
}
|
|
26
34
|
};
|
|
27
35
|
const containerPaddingVertical = 24;
|
|
28
36
|
const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;
|
|
@@ -46,7 +54,8 @@ export default function useDialogStyle(size) {
|
|
|
46
54
|
paper: isFullScreen ? {
|
|
47
55
|
backgroundColor: theme.palette.surface.base,
|
|
48
56
|
height: '100%',
|
|
49
|
-
width: '100%'
|
|
57
|
+
width: '100%',
|
|
58
|
+
...sizeStyleMap[size]
|
|
50
59
|
} : {
|
|
51
60
|
backgroundColor: theme.palette.surface.base,
|
|
52
61
|
borderRadius: theme.shape.radius.xl,
|
|
@@ -65,6 +74,6 @@ export default function useDialogStyle(size) {
|
|
|
65
74
|
width: '100%'
|
|
66
75
|
}
|
|
67
76
|
};
|
|
68
|
-
}, [theme, windowHeight, windowWidth, size]);
|
|
77
|
+
}, [theme, windowHeight, windowWidth, size, bottomSafeAreaInset, topSafeAreaInset]);
|
|
69
78
|
}
|
|
70
79
|
//# sourceMappingURL=useDialogStyle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","useWindowDimensions","useTheme","useDialogStyle","size","theme","height","windowHeight","width","windowWidth","sizeStyleMap","small","maxWidth","medium","large","minHeight","full","containerPaddingVertical","dialogMaxHeight","dialogMaxWidth","isFullScreen","root","alignItems","justifyContent","zIndex","dialog","container","paddingHorizontal","breakpoints","values","xs","paddingVertical","paper","backgroundColor","palette","surface","base","borderRadius","shape","radius","xl","maxHeight","overflow","topElementContainer","topElementContent","position"
|
|
1
|
+
{"version":3,"names":["useMemo","useWindowDimensions","useSafeAreaInsets","useTheme","useDialogStyle","size","theme","height","windowHeight","width","windowWidth","bottom","bottomSafeAreaInset","top","topSafeAreaInset","sizeStyleMap","small","maxWidth","medium","large","minHeight","full","paddingBottom","paddingTop","containerPaddingVertical","dialogMaxHeight","dialogMaxWidth","isFullScreen","root","alignItems","justifyContent","zIndex","dialog","container","paddingHorizontal","breakpoints","values","xs","paddingVertical","paper","backgroundColor","palette","surface","base","borderRadius","shape","radius","xl","maxHeight","overflow","topElementContainer","topElementContent","position"],"sources":["useDialogStyle.ts"],"sourcesContent":["import { useMemo } from 'react';\nimport { useWindowDimensions } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport type { FountainUiStyle, NamedStylesStringUnion } from '@fountain-ui/styles';\nimport { useTheme } from '../styles';\nimport type { DialogSize } from './DialogProps';\n\ntype DialogStyleKeys =\n | 'root'\n | 'container'\n | 'paper'\n | 'topElementContainer'\n | 'topElementContent';\n\ntype DialogStyles = NamedStylesStringUnion<DialogStyleKeys>;\n\nexport default function useDialogStyle(size: DialogSize): DialogStyles {\n const theme = useTheme();\n\n const {\n height: windowHeight,\n width: windowWidth,\n } = useWindowDimensions();\n\n const {\n bottom: bottomSafeAreaInset,\n top: topSafeAreaInset,\n } = useSafeAreaInsets();\n\n return useMemo(() => {\n const sizeStyleMap: Record<DialogSize, FountainUiStyle> = {\n small: {\n maxWidth: 260,\n },\n medium: {\n maxWidth: 400,\n },\n large: {\n maxWidth: 512,\n minHeight: 360,\n width: 512,\n },\n full: {\n paddingBottom: bottomSafeAreaInset,\n paddingTop: topSafeAreaInset,\n },\n };\n\n const containerPaddingVertical = 24;\n const dialogMaxHeight = windowHeight - containerPaddingVertical * 2;\n const dialogMaxWidth = sizeStyleMap[size]?.maxWidth;\n\n const isFullScreen = size === 'full';\n\n return {\n root: {\n alignItems: 'center',\n justifyContent: 'center',\n zIndex: theme.zIndex.dialog,\n },\n container: isFullScreen ? {\n height: '100%',\n width: '100%',\n } : {\n alignItems: 'center',\n paddingHorizontal: windowWidth > theme.breakpoints.values.xs ? 24 : 16,\n paddingVertical: containerPaddingVertical,\n width: '100%',\n },\n paper: isFullScreen ? {\n backgroundColor: theme.palette.surface.base,\n height: '100%',\n width: '100%',\n ...sizeStyleMap[size],\n } : {\n backgroundColor: theme.palette.surface.base,\n borderRadius: theme.shape.radius.xl,\n maxHeight: dialogMaxHeight,\n overflow: 'hidden',\n width: '100%',\n ...sizeStyleMap[size],\n },\n topElementContainer: {\n maxWidth: dialogMaxWidth,\n width: '100%',\n },\n topElementContent: {\n position: 'absolute',\n bottom: 0,\n width: '100%',\n },\n };\n }, [theme, windowHeight, windowWidth, size, bottomSafeAreaInset, topSafeAreaInset]);\n}\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB;AACA,SAASC,mBAAT,QAAoC,cAApC;AACA,SAASC,iBAAT,QAAkC,gCAAlC;AAEA,SAASC,QAAT,QAAyB,WAAzB;AAYA,eAAe,SAASC,cAAT,CAAwBC,IAAxB,EAAwD;EACnE,MAAMC,KAAK,GAAGH,QAAQ,EAAtB;EAEA,MAAM;IACFI,MAAM,EAAEC,YADN;IAEFC,KAAK,EAAEC;EAFL,IAGFT,mBAAmB,EAHvB;EAKA,MAAM;IACFU,MAAM,EAAEC,mBADN;IAEFC,GAAG,EAAEC;EAFH,IAGFZ,iBAAiB,EAHrB;EAKA,OAAOF,OAAO,CAAC,MAAM;IAAA;;IACjB,MAAMe,YAAiD,GAAG;MACtDC,KAAK,EAAE;QACHC,QAAQ,EAAE;MADP,CAD+C;MAItDC,MAAM,EAAE;QACJD,QAAQ,EAAE;MADN,CAJ8C;MAOtDE,KAAK,EAAE;QACHF,QAAQ,EAAE,GADP;QAEHG,SAAS,EAAE,GAFR;QAGHX,KAAK,EAAE;MAHJ,CAP+C;MAYtDY,IAAI,EAAE;QACFC,aAAa,EAAEV,mBADb;QAEFW,UAAU,EAAET;MAFV;IAZgD,CAA1D;IAkBA,MAAMU,wBAAwB,GAAG,EAAjC;IACA,MAAMC,eAAe,GAAGjB,YAAY,GAAGgB,wBAAwB,GAAG,CAAlE;IACA,MAAME,cAAc,yBAAGX,YAAY,CAACV,IAAD,CAAf,uDAAG,mBAAoBY,QAA3C;IAEA,MAAMU,YAAY,GAAGtB,IAAI,KAAK,MAA9B;IAEA,OAAO;MACHuB,IAAI,EAAE;QACFC,UAAU,EAAE,QADV;QAEFC,cAAc,EAAE,QAFd;QAGFC,MAAM,EAAEzB,KAAK,CAACyB,MAAN,CAAaC;MAHnB,CADH;MAMHC,SAAS,EAAEN,YAAY,GAAG;QACtBpB,MAAM,EAAE,MADc;QAEtBE,KAAK,EAAE;MAFe,CAAH,GAGnB;QACAoB,UAAU,EAAE,QADZ;QAEAK,iBAAiB,EAAExB,WAAW,GAAGJ,KAAK,CAAC6B,WAAN,CAAkBC,MAAlB,CAAyBC,EAAvC,GAA4C,EAA5C,GAAiD,EAFpE;QAGAC,eAAe,EAAEd,wBAHjB;QAIAf,KAAK,EAAE;MAJP,CATD;MAeH8B,KAAK,EAAEZ,YAAY,GAAG;QAClBa,eAAe,EAAElC,KAAK,CAACmC,OAAN,CAAcC,OAAd,CAAsBC,IADrB;QAElBpC,MAAM,EAAE,MAFU;QAGlBE,KAAK,EAAE,MAHW;QAIlB,GAAGM,YAAY,CAACV,IAAD;MAJG,CAAH,GAKf;QACAmC,eAAe,EAAElC,KAAK,CAACmC,OAAN,CAAcC,OAAd,CAAsBC,IADvC;QAEAC,YAAY,EAAEtC,KAAK,CAACuC,KAAN,CAAYC,MAAZ,CAAmBC,EAFjC;QAGAC,SAAS,EAAEvB,eAHX;QAIAwB,QAAQ,EAAE,QAJV;QAKAxC,KAAK,EAAE,MALP;QAMA,GAAGM,YAAY,CAACV,IAAD;MANf,CApBD;MA4BH6C,mBAAmB,EAAE;QACjBjC,QAAQ,EAAES,cADO;QAEjBjB,KAAK,EAAE;MAFU,CA5BlB;MAgCH0C,iBAAiB,EAAE;QACfC,QAAQ,EAAE,UADK;QAEfzC,MAAM,EAAE,CAFO;QAGfF,KAAK,EAAE;MAHQ;IAhChB,CAAP;EAsCH,CA/Da,EA+DX,CAACH,KAAD,EAAQE,YAAR,EAAsBE,WAAtB,EAAmCL,IAAnC,EAAyCO,mBAAzC,EAA8DE,gBAA9D,CA/DW,CAAd;AAgEH"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useCallback, useContext } from 'react';
|
|
2
2
|
import { Animated } from 'react-native';
|
|
3
|
-
import FastImage from 'react-native-fast-image';
|
|
3
|
+
import FastImage from '@d11/react-native-fast-image';
|
|
4
4
|
import { useAnimatedValue } from '../hooks';
|
|
5
5
|
import { isNotAndroid12 } from '../utils';
|
|
6
6
|
import ImageFileExtensionContext from './ImageFileExtensionContext'; // @ts-ignore
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useContext","Animated","FastImage","useAnimatedValue","isNotAndroid12","ImageFileExtensionContext","AnimatedFastImage","createAnimatedComponent","INITIAL_OPACITY","LOADED_OPACITY","ANIMATION_DURATION","ImageCore","props","cache","height","onError","onLoad","resizeMode","source","width","opacity","acceptHeader","handleLoad","timing","toValue","duration","useNativeDriver","start","uri","headers"],"sources":["ImageCoreNative.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Animated } from 'react-native';\nimport FastImage from 'react-native-fast-image';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport type ImageCoreProps from './ImageCoreProps';\nimport ImageFileExtensionContext from './ImageFileExtensionContext';\n\n// @ts-ignore\nconst AnimatedFastImage = Animated.createAnimatedComponent(FastImage);\n\nconst INITIAL_OPACITY = 0;\nconst LOADED_OPACITY = 1;\n\nconst ANIMATION_DURATION = 200;\n\nexport default function ImageCore(props: ImageCoreProps) {\n const {\n cache,\n height,\n onError,\n onLoad,\n resizeMode,\n source,\n width,\n } = props;\n\n const opacity = useAnimatedValue(INITIAL_OPACITY);\n\n const acceptHeader = useContext(ImageFileExtensionContext);\n\n const handleLoad = useCallback(() => {\n Animated.timing(opacity, {\n toValue: LOADED_OPACITY,\n duration: ANIMATION_DURATION,\n useNativeDriver: isNotAndroid12,\n }).start();\n\n onLoad?.();\n }, [onLoad]);\n\n return (\n <AnimatedFastImage\n onError={onError}\n onLoad={handleLoad}\n resizeMode={resizeMode}\n source={{\n cache,\n uri: source.uri,\n headers: {\n 'Accept': acceptHeader,\n },\n }}\n style={[\n { opacity },\n { width, height },\n ]}\n />\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,UAA7B,QAA+C,OAA/C;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,OAAOC,SAAP,MAAsB,
|
|
1
|
+
{"version":3,"names":["React","useCallback","useContext","Animated","FastImage","useAnimatedValue","isNotAndroid12","ImageFileExtensionContext","AnimatedFastImage","createAnimatedComponent","INITIAL_OPACITY","LOADED_OPACITY","ANIMATION_DURATION","ImageCore","props","cache","height","onError","onLoad","resizeMode","source","width","opacity","acceptHeader","handleLoad","timing","toValue","duration","useNativeDriver","start","uri","headers"],"sources":["ImageCoreNative.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport { Animated } from 'react-native';\nimport FastImage from '@d11/react-native-fast-image';\nimport { useAnimatedValue } from '../hooks';\nimport { isNotAndroid12 } from '../utils';\nimport type ImageCoreProps from './ImageCoreProps';\nimport ImageFileExtensionContext from './ImageFileExtensionContext';\n\n// @ts-ignore\nconst AnimatedFastImage = Animated.createAnimatedComponent(FastImage);\n\nconst INITIAL_OPACITY = 0;\nconst LOADED_OPACITY = 1;\n\nconst ANIMATION_DURATION = 200;\n\nexport default function ImageCore(props: ImageCoreProps) {\n const {\n cache,\n height,\n onError,\n onLoad,\n resizeMode,\n source,\n width,\n } = props;\n\n const opacity = useAnimatedValue(INITIAL_OPACITY);\n\n const acceptHeader = useContext(ImageFileExtensionContext);\n\n const handleLoad = useCallback(() => {\n Animated.timing(opacity, {\n toValue: LOADED_OPACITY,\n duration: ANIMATION_DURATION,\n useNativeDriver: isNotAndroid12,\n }).start();\n\n onLoad?.();\n }, [onLoad]);\n\n return (\n <AnimatedFastImage\n onError={onError}\n onLoad={handleLoad}\n resizeMode={resizeMode}\n source={{\n cache,\n uri: source.uri,\n headers: {\n 'Accept': acceptHeader,\n },\n }}\n style={[\n { opacity },\n { width, height },\n ]}\n />\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,UAA7B,QAA+C,OAA/C;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,OAAOC,SAAP,MAAsB,8BAAtB;AACA,SAASC,gBAAT,QAAiC,UAAjC;AACA,SAASC,cAAT,QAA+B,UAA/B;AAEA,OAAOC,yBAAP,MAAsC,6BAAtC,C,CAEA;;AACA,MAAMC,iBAAiB,GAAGL,QAAQ,CAACM,uBAAT,CAAiCL,SAAjC,CAA1B;AAEA,MAAMM,eAAe,GAAG,CAAxB;AACA,MAAMC,cAAc,GAAG,CAAvB;AAEA,MAAMC,kBAAkB,GAAG,GAA3B;AAEA,eAAe,SAASC,SAAT,CAAmBC,KAAnB,EAA0C;EACrD,MAAM;IACFC,KADE;IAEFC,MAFE;IAGFC,OAHE;IAIFC,MAJE;IAKFC,UALE;IAMFC,MANE;IAOFC;EAPE,IAQFP,KARJ;EAUA,MAAMQ,OAAO,GAAGjB,gBAAgB,CAACK,eAAD,CAAhC;EAEA,MAAMa,YAAY,GAAGrB,UAAU,CAACK,yBAAD,CAA/B;EAEA,MAAMiB,UAAU,GAAGvB,WAAW,CAAC,MAAM;IACjCE,QAAQ,CAACsB,MAAT,CAAgBH,OAAhB,EAAyB;MACrBI,OAAO,EAAEf,cADY;MAErBgB,QAAQ,EAAEf,kBAFW;MAGrBgB,eAAe,EAAEtB;IAHI,CAAzB,EAIGuB,KAJH;IAMAX,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM;EACT,CAR6B,EAQ3B,CAACA,MAAD,CAR2B,CAA9B;EAUA,oBACI,oBAAC,iBAAD;IACI,OAAO,EAAED,OADb;IAEI,MAAM,EAAEO,UAFZ;IAGI,UAAU,EAAEL,UAHhB;IAII,MAAM,EAAE;MACJJ,KADI;MAEJe,GAAG,EAAEV,MAAM,CAACU,GAFR;MAGJC,OAAO,EAAE;QACL,UAAUR;MADL;IAHL,CAJZ;IAWI,KAAK,EAAE,CACH;MAAED;IAAF,CADG,EAEH;MAAED,KAAF;MAASL;IAAT,CAFG;EAXX,EADJ;AAkBH;AAAA"}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type DialogProps from './DialogProps';
|
|
3
|
-
|
|
3
|
+
import FullDialogCloseButton from './FullDialogCloseButton';
|
|
4
|
+
declare const Dialog: {
|
|
5
|
+
(props: DialogProps): JSX.Element;
|
|
6
|
+
FullDialogCloseButton: typeof FullDialogCloseButton;
|
|
7
|
+
};
|
|
8
|
+
export default Dialog;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { ViewProps } from 'react-native';
|
|
3
|
+
import type { IconButtonProps } from '../IconButton';
|
|
4
|
+
import type { OverridableComponentProps } from '../types';
|
|
5
|
+
interface FullDialogCloseButtonProps extends OverridableComponentProps<ViewProps, {
|
|
6
|
+
onPress: IconButtonProps['onPress'];
|
|
7
|
+
}> {
|
|
8
|
+
}
|
|
9
|
+
export default function FullDialogCloseButton(props: FullDialogCloseButtonProps): JSX.Element;
|
|
10
|
+
export {};
|
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.15",
|
|
4
4
|
"author": "Fountain-UI Team",
|
|
5
5
|
"description": "React components that implement Tappytoon's Fountain Design.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,11 +18,11 @@
|
|
|
18
18
|
"@fountain-ui/utils": "^3.0.0-alpha.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
+
"@d11/react-native-fast-image": "^8.11.1",
|
|
21
22
|
"@react-native-community/slider": "^4.1.6",
|
|
22
23
|
"react": "^16.8.0 || ^17.0.0",
|
|
23
24
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
24
25
|
"react-native": "^0.63.0",
|
|
25
|
-
"react-native-fast-image": "8.6.3",
|
|
26
26
|
"react-native-reanimated": "^2.0.0",
|
|
27
27
|
"react-native-safe-area-context": "^4.0.0",
|
|
28
28
|
"react-native-svg": "^13.14.0"
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"react-native": {
|
|
38
38
|
"optional": true
|
|
39
39
|
},
|
|
40
|
-
"react-native-fast-image": {
|
|
40
|
+
"@d11/react-native-fast-image": {
|
|
41
41
|
"optional": true
|
|
42
42
|
}
|
|
43
43
|
},
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"publishConfig": {
|
|
68
68
|
"access": "public"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "f8f3251647c5c4742bfbefff5aeba7fb2a076c55"
|
|
71
71
|
}
|