@fountain-ui/core 3.0.0-alpha.38 → 3.0.0-alpha.39
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.
|
@@ -138,7 +138,7 @@ function Accordion(props) {
|
|
|
138
138
|
})) : null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
139
139
|
allowFontScaling: false,
|
|
140
140
|
children: title,
|
|
141
|
-
numberOfLines:
|
|
141
|
+
numberOfLines: 3,
|
|
142
142
|
style: titleFontStyle
|
|
143
143
|
})), subTitle && variant === 'solid' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Spacer.default, {
|
|
144
144
|
size: 1.5
|
|
@@ -150,7 +150,7 @@ function Accordion(props) {
|
|
|
150
150
|
}) : subTitle) : null), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
|
|
151
151
|
flex: 1
|
|
152
152
|
}), /*#__PURE__*/_react.default.createElement(_Spacer.default, {
|
|
153
|
-
size:
|
|
153
|
+
size: 4
|
|
154
154
|
}), /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
|
|
155
155
|
style: animatedChevronDownStyles
|
|
156
156
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","useTheme","root","marginBottom","spacing","rightIcon","alignItems","height","justifyContent","width","Accordion","props","title","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","style","styleProp","variant","otherProps","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","useState","shouldInitialExpandedRef","useRef","container","containerStyle","contentStyle","contentFont","contentFontStyle","iconContainer","iconContainerStyle","subTitleFont","subTitleFontStyle","titleStyle","titleFont","titleFontStyle","useVariantStyleMap","rotate","useSharedValue","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","useAnimatedStyle","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","useEffect","withTiming","withDelay","rootStyle","css"],"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 style: styleProp,\n variant = 'solid' as AccordionVariant,\n ...otherProps\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 }), [rotate]);\n\n const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n height: animatedHeight.value,\n overflow: 'hidden',\n } as ViewStyle), [animatedHeight]);\n\n const animatedContentStyle = useAnimatedStyle(() => ({\n opacity: animatedOpacity.value,\n }), [animatedOpacity]);\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 styleProp,\n ]);\n\n return (\n <Column\n style={rootStyle}\n {...otherProps}\n >\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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"}
|
|
1
|
+
{"version":3,"names":["ROTATE_HIDE_DEGREE","ROTATE_SHOW_DEGREE","ANIMATION_CONFIG","duration","INITIAL_EXPANDED_DELAY_MILLIS","CONTENT_OPACITY_DELAY_MILLIS","useStyles","theme","useTheme","root","marginBottom","spacing","rightIcon","alignItems","height","justifyContent","width","Accordion","props","title","subTitle","content","RightIcon","LeftComponent","isInitialExpanded","style","styleProp","variant","otherProps","styles","CONTENT_MARGIN_HEIGHT","isExpanded","setIsExpanded","useState","shouldInitialExpandedRef","useRef","container","containerStyle","contentStyle","contentFont","contentFontStyle","iconContainer","iconContainerStyle","subTitleFont","subTitleFontStyle","titleStyle","titleFont","titleFontStyle","useVariantStyleMap","rotate","useSharedValue","animatedOpacity","animatedHeight","contentHeight","setContentHeight","animatedChevronDownStyles","useAnimatedStyle","transform","value","animatedContentBackgroundStyles","overflow","animatedContentStyle","opacity","onPress","prev","onLayout","event","nativeEvent","layout","current","setTimeout","useEffect","withTiming","withDelay","rootStyle","css"],"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 style: styleProp,\n variant = 'solid' as AccordionVariant,\n ...otherProps\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 }), [rotate]);\n\n const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n height: animatedHeight.value,\n overflow: 'hidden',\n } as ViewStyle), [animatedHeight]);\n\n const animatedContentStyle = useAnimatedStyle(() => ({\n opacity: animatedOpacity.value,\n }), [animatedOpacity]);\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 styleProp,\n ]);\n\n return (\n <Column\n style={rootStyle}\n {...otherProps}\n >\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={3}\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={4}/>\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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"}
|
|
@@ -114,7 +114,7 @@ export default function Accordion(props) {
|
|
|
114
114
|
})) : null, /*#__PURE__*/React.createElement(Text, {
|
|
115
115
|
allowFontScaling: false,
|
|
116
116
|
children: title,
|
|
117
|
-
numberOfLines:
|
|
117
|
+
numberOfLines: 3,
|
|
118
118
|
style: titleFontStyle
|
|
119
119
|
})), subTitle && variant === 'solid' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, {
|
|
120
120
|
size: 1.5
|
|
@@ -126,7 +126,7 @@ export default function Accordion(props) {
|
|
|
126
126
|
}) : subTitle) : null), /*#__PURE__*/React.createElement(Spacer, {
|
|
127
127
|
flex: 1
|
|
128
128
|
}), /*#__PURE__*/React.createElement(Spacer, {
|
|
129
|
-
size:
|
|
129
|
+
size: 4
|
|
130
130
|
}), /*#__PURE__*/React.createElement(Animated.View, {
|
|
131
131
|
style: animatedChevronDownStyles
|
|
132
132
|
}, /*#__PURE__*/React.createElement(View, {
|
|
@@ -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","style","styleProp","variant","otherProps","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 style: styleProp,\n variant = 'solid' as AccordionVariant,\n ...otherProps\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 }), [rotate]);\n\n const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n height: animatedHeight.value,\n overflow: 'hidden',\n } as ViewStyle), [animatedHeight]);\n\n const animatedContentStyle = useAnimatedStyle(() => ({\n opacity: animatedOpacity.value,\n }), [animatedOpacity]);\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 styleProp,\n ]);\n\n return (\n <Column\n style={rootStyle}\n {...otherProps}\n >\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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"}
|
|
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","style","styleProp","variant","otherProps","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 style: styleProp,\n variant = 'solid' as AccordionVariant,\n ...otherProps\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 }), [rotate]);\n\n const animatedContentBackgroundStyles = useAnimatedStyle(() => ({\n height: animatedHeight.value,\n overflow: 'hidden',\n } as ViewStyle), [animatedHeight]);\n\n const animatedContentStyle = useAnimatedStyle(() => ({\n opacity: animatedOpacity.value,\n }), [animatedOpacity]);\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 styleProp,\n ]);\n\n return (\n <Column\n style={rootStyle}\n {...otherProps}\n >\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={3}\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={4}/>\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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"}
|
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.39",
|
|
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": "88da40e52167b78d5126e8675b536d609c9dc523"
|
|
71
71
|
}
|
|
@@ -141,7 +141,7 @@ export default function Accordion(props: AccordionProps) {
|
|
|
141
141
|
<Text
|
|
142
142
|
allowFontScaling={false}
|
|
143
143
|
children={title}
|
|
144
|
-
numberOfLines={
|
|
144
|
+
numberOfLines={3}
|
|
145
145
|
style={titleFontStyle}
|
|
146
146
|
/>
|
|
147
147
|
</Row>
|
|
@@ -164,7 +164,7 @@ export default function Accordion(props: AccordionProps) {
|
|
|
164
164
|
|
|
165
165
|
<Spacer flex={1}/>
|
|
166
166
|
|
|
167
|
-
<Spacer size={
|
|
167
|
+
<Spacer size={4}/>
|
|
168
168
|
|
|
169
169
|
<Animated.View style={animatedChevronDownStyles}>
|
|
170
170
|
<View style={styles.rightIcon}>
|