@fountain-ui/core 2.0.0-beta.66 → 2.0.0-beta.68
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/Button/Button.js +4 -1
- package/build/commonjs/Button/Button.js.map +1 -1
- package/build/commonjs/ButtonBase/ButtonBase.js +3 -1
- package/build/commonjs/ButtonBase/ButtonBase.js.map +1 -1
- package/build/commonjs/ButtonBase/ButtonBaseProps.js.map +1 -1
- package/build/commonjs/Typography/Typography.js +6 -2
- package/build/commonjs/Typography/Typography.js.map +1 -1
- package/build/commonjs/Typography/TypographyProps.js.map +1 -1
- package/build/module/Button/Button.js +4 -1
- package/build/module/Button/Button.js.map +1 -1
- package/build/module/ButtonBase/ButtonBase.js +3 -1
- package/build/module/ButtonBase/ButtonBase.js.map +1 -1
- package/build/module/ButtonBase/ButtonBaseProps.js.map +1 -1
- package/build/module/Typography/Typography.js +6 -2
- package/build/module/Typography/Typography.js.map +1 -1
- package/build/module/Typography/TypographyProps.js.map +1 -1
- package/build/typescript/ButtonBase/ButtonBaseProps.d.ts +4 -0
- package/build/typescript/Typography/TypographyProps.d.ts +8 -0
- package/package.json +2 -2
- package/src/Button/Button.tsx +6 -0
- package/src/ButtonBase/ButtonBase.tsx +4 -1
- package/src/ButtonBase/ButtonBaseProps.ts +5 -0
- package/src/Typography/Typography.tsx +4 -0
- package/src/Typography/TypographyProps.ts +11 -0
|
@@ -53,6 +53,7 @@ function Button(props) {
|
|
|
53
53
|
fullWidth = false,
|
|
54
54
|
href,
|
|
55
55
|
onPress,
|
|
56
|
+
pressEffect,
|
|
56
57
|
size = 'medium',
|
|
57
58
|
startIcon: startIconProp,
|
|
58
59
|
style: styleProp,
|
|
@@ -109,6 +110,7 @@ function Button(props) {
|
|
|
109
110
|
const textStyle = (0, _styles.css)([fontStyle, textMarginStyle, {
|
|
110
111
|
textAlign: 'center'
|
|
111
112
|
}]);
|
|
113
|
+
const modifiedPressEffect = variant !== 'text' && !pressEffect ? 'scale' : pressEffect;
|
|
112
114
|
|
|
113
115
|
const handlePress = async () => {
|
|
114
116
|
if (disabled) {
|
|
@@ -130,7 +132,8 @@ function Button(props) {
|
|
|
130
132
|
return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, _extends({
|
|
131
133
|
disabled: disabled,
|
|
132
134
|
onPress: handlePress,
|
|
133
|
-
style: buttonBaseStyle
|
|
135
|
+
style: buttonBaseStyle,
|
|
136
|
+
pressEffect: modifiedPressEffect
|
|
134
137
|
}, otherProps), startIcon, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
135
138
|
children: children,
|
|
136
139
|
style: textStyle
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["iconSizes","small","medium","styles","StyleSheet","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","useTheme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","fill","cloneElementSafely","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundness","buttonBaseStyle","css","undefined","fontStyle","createFontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","handlePress","Linking","canOpenURL","openURL"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n small: 20,\n medium: 24,\n};\n\nconst styles = StyleSheet.create({\n root: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n fullWidth: {\n width: '100%',\n },\n medium: {\n minWidth: 104,\n height: 48,\n },\n small: {\n minWidth: 56,\n height: 32,\n },\n});\n\nexport default function Button(props: ButtonProps) {\n const {\n children,\n clipHorizontalSpacing = false,\n color = 'primary',\n disabled = false,\n endIcon: endIconProp,\n fullWidth = false,\n href,\n onPress,\n size = 'medium',\n startIcon: startIconProp,\n style: styleProp,\n variant = 'contained',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const mainColor = theme.palette[color].main;\n\n const fontColor = variant === 'contained'\n ? theme.palette[color].contrastTextColor\n : theme.palette[color].main;\n\n const variantStyleMap = {\n contained: {\n backgroundColor: mainColor,\n },\n outlined: {\n backgroundColor: 'transparent',\n borderColor: mainColor,\n borderStyle: 'solid',\n borderWidth: 1,\n },\n text: {\n backgroundColor: 'transparent',\n },\n };\n\n const iconProps = {\n width: iconSizes[size],\n height: iconSizes[size],\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);\n const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;\n const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;\n\n const borderRadius = theme.shape.roundness;\n const buttonBaseStyle = css([\n styles.root,\n variantStyleMap[variant],\n size === 'medium' ? styles.medium : styles.small,\n fullWidth ? styles.fullWidth : undefined,\n { borderRadius, color: fontColor },\n (variant === 'text' && clipHorizontalSpacing)\n ? { minWidth: 0 }\n : { paddingLeft, paddingRight },\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n color: fontColor,\n });\n\n const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n const textMarginStyle = startIcon\n ? { marginLeft: textMarginSize }\n : endIcon\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\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 return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={buttonBaseStyle}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n};\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAMA,MAAMA,SAAoB,GAAG;EACzBC,KAAK,EAAE,EADkB;EAEzBC,MAAM,EAAE;AAFiB,CAA7B;;AAKA,MAAMC,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,aAAa,EAAE,KADb;IAEFC,cAAc,EAAE,QAFd;IAGFC,UAAU,EAAE;EAHV,CADuB;EAM7BC,SAAS,EAAE;IACPC,KAAK,EAAE;EADA,CANkB;EAS7BT,MAAM,EAAE;IACJU,QAAQ,EAAE,GADN;IAEJC,MAAM,EAAE;EAFJ,CATqB;EAa7BZ,KAAK,EAAE;IACHW,QAAQ,EAAE,EADP;IAEHC,MAAM,EAAE;EAFL;AAbsB,CAAlB,CAAf;;AAmBe,SAASC,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,QADE;IAEFC,qBAAqB,GAAG,KAFtB;IAGFC,KAAK,GAAG,SAHN;IAIFC,QAAQ,GAAG,KAJT;IAKFC,OAAO,EAAEC,WALP;IAMFX,SAAS,GAAG,KANV;IAOFY,IAPE;IAQFC,OARE;IASFC,IAAI,GAAG,
|
|
1
|
+
{"version":3,"names":["iconSizes","small","medium","styles","StyleSheet","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","useTheme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","fill","cloneElementSafely","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundness","buttonBaseStyle","css","undefined","fontStyle","createFontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","modifiedPressEffect","handlePress","Linking","canOpenURL","openURL"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n small: 20,\n medium: 24,\n};\n\nconst styles = StyleSheet.create({\n root: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n fullWidth: {\n width: '100%',\n },\n medium: {\n minWidth: 104,\n height: 48,\n },\n small: {\n minWidth: 56,\n height: 32,\n },\n});\n\nexport default function Button(props: ButtonProps) {\n const {\n children,\n clipHorizontalSpacing = false,\n color = 'primary',\n disabled = false,\n endIcon: endIconProp,\n fullWidth = false,\n href,\n onPress,\n pressEffect,\n size = 'medium',\n startIcon: startIconProp,\n style: styleProp,\n variant = 'contained',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const mainColor = theme.palette[color].main;\n\n const fontColor = variant === 'contained'\n ? theme.palette[color].contrastTextColor\n : theme.palette[color].main;\n\n const variantStyleMap = {\n contained: {\n backgroundColor: mainColor,\n },\n outlined: {\n backgroundColor: 'transparent',\n borderColor: mainColor,\n borderStyle: 'solid',\n borderWidth: 1,\n },\n text: {\n backgroundColor: 'transparent',\n },\n };\n\n const iconProps = {\n width: iconSizes[size],\n height: iconSizes[size],\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);\n const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;\n const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;\n\n const borderRadius = theme.shape.roundness;\n const buttonBaseStyle = css([\n styles.root,\n variantStyleMap[variant],\n size === 'medium' ? styles.medium : styles.small,\n fullWidth ? styles.fullWidth : undefined,\n { borderRadius, color: fontColor },\n (variant === 'text' && clipHorizontalSpacing)\n ? { minWidth: 0 }\n : { paddingLeft, paddingRight },\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n color: fontColor,\n });\n\n const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n const textMarginStyle = startIcon\n ? { marginLeft: textMarginSize }\n : endIcon\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\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 return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={buttonBaseStyle}\n pressEffect={modifiedPressEffect}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n};\n"],"mappings":"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"}
|
|
@@ -46,6 +46,7 @@ function ButtonBase(props) {
|
|
|
46
46
|
disabled = false,
|
|
47
47
|
disableThrottle = false,
|
|
48
48
|
onPress,
|
|
49
|
+
onPressOut,
|
|
49
50
|
pressEffect = 'opacity',
|
|
50
51
|
pressDelay: pressDelayOrNil,
|
|
51
52
|
style: styleProp,
|
|
@@ -86,8 +87,9 @@ function ButtonBase(props) {
|
|
|
86
87
|
startPressAnimation(true, false);
|
|
87
88
|
}, [startPressAnimation]);
|
|
88
89
|
const handlePressOut = (0, _react.useCallback)(() => {
|
|
90
|
+
onPressOut && onPressOut();
|
|
89
91
|
startPressAnimation(false, false);
|
|
90
|
-
}, [startPressAnimation]);
|
|
92
|
+
}, [startPressAnimation, onPressOut]);
|
|
91
93
|
const animatedStyle = {
|
|
92
94
|
opacity,
|
|
93
95
|
transform: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","SCALE_EFFECT_PRESS_IN_DELAY","OPACITY_EFFECT_PRESS_IN_DELAY","startTimingAnimationWithDefaults","value","toValue","Animated","timing","duration","useNativeDriver","start","ButtonBase","props","children","disabled","disableThrottle","onPress","pressEffect","pressDelay","pressDelayOrNil","style","styleProp","throttleMillis","otherProps","handlePress","useThrottle","periodMillis","callback","opacity","useAnimatedValue","scale","useEffect","setValue","startScaleAnimation","useCallback","pressIn","isHover","startOpacityAnimation","startPressAnimation","handlePressIn","handlePressOut","animatedStyle","transform","defaultPressDelay","hovered","undefined"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport { Animated } from 'react-native';\nimport { useAnimatedValue, useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\ninterface StartPressAnimation {\n (pressIn: boolean, isHover: boolean): void;\n}\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\n// at \"node_modules/react-native/Libraries/Pressability.js\"\n// const DEFAULT_MIN_PRESS_DURATION = 130;\nconst SCALE_EFFECT_PRESS_IN_DELAY = 130;\nconst OPACITY_EFFECT_PRESS_IN_DELAY = 0;\n\ntype TimingAnimationValue = Animated.Value | Animated.ValueXY;\ntype TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];\n\nconst startTimingAnimationWithDefaults = (\n value: TimingAnimationValue,\n toValue: TimingAnimationToValue,\n) => {\n Animated.timing(value, {\n toValue,\n duration: 150,\n useNativeDriver: true,\n }).start();\n};\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n const {\n children,\n disabled = false,\n disableThrottle = false,\n onPress,\n pressEffect = 'opacity',\n pressDelay: pressDelayOrNil,\n style: styleProp,\n throttleMillis = 650,\n ...otherProps\n } = props;\n\n const handlePress = useThrottle({\n periodMillis: disableThrottle ? 0 : throttleMillis,\n callback: onPress,\n });\n\n const opacity = useAnimatedValue(ORIGINAL_OPACITY);\n const scale = useAnimatedValue(ORIGINAL_SCALE);\n\n useEffect(() => {\n opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);\n }, [disabled, pressEffect]);\n\n const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {\n if (!isHover) {\n startTimingAnimationWithDefaults(\n scale,\n pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,\n );\n }\n }, []);\n\n const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {\n if (pressIn) {\n opacity.setValue(ACTIVE_OPACITY);\n } else {\n startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);\n }\n }, []);\n\n const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {\n if (pressEffect === 'scale') {\n startScaleAnimation(pressIn, isHover);\n } else if (pressEffect === 'opacity') {\n startOpacityAnimation(pressIn, isHover);\n }\n }, [pressEffect]);\n\n const handlePressIn = useCallback(() => {\n startPressAnimation(true, false);\n }, [startPressAnimation]);\n\n const handlePressOut = useCallback(() => {\n startPressAnimation(false, false);\n }, [startPressAnimation]);\n\n const animatedStyle = {\n opacity,\n transform: [{ scale }],\n };\n\n const defaultPressDelay = pressEffect === 'scale'\n ? SCALE_EFFECT_PRESS_IN_DELAY\n : OPACITY_EFFECT_PRESS_IN_DELAY;\n const pressDelay = pressDelayOrNil ?? defaultPressDelay;\n\n return (\n <AnimatedPressable\n disabled={disabled}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n style={[\n animatedStyle,\n styleProp,\n ]}\n unstable_pressDelay={pressDelay}\n {...otherProps}\n >\n {typeof children !== 'function' ? (\n ({ hovered }) => {\n if (hovered !== undefined && !disabled) {\n startPressAnimation(hovered, true);\n }\n\n return children;\n }\n ) : children}\n </AnimatedPressable>\n );\n};\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAOO,MAAMA,gBAAgB,GAAG,CAAzB;;AACA,MAAMC,gBAAgB,GAAG,EAAzB;;AACP,MAAMC,cAAc,GAAG,GAAvB;AAEA,MAAMC,cAAc,GAAG,CAAvB;AACA,MAAMC,cAAc,GAAG,GAAvB,C,CAEA;AACA;;AACA,MAAMC,2BAA2B,GAAG,GAApC;AACA,MAAMC,6BAA6B,GAAG,CAAtC;;AAKA,MAAMC,gCAAgC,GAAG,CACrCC,KADqC,EAErCC,OAFqC,KAGpC;EACDC,qBAAA,CAASC,MAAT,CAAgBH,KAAhB,EAAuB;IACnBC,OADmB;IAEnBG,QAAQ,EAAE,GAFS;IAGnBC,eAAe,EAAE;EAHE,CAAvB,EAIGC,KAJH;AAKH,CATD;;AAWe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFC,QAAQ,GAAG,KAFT;IAGFC,eAAe,GAAG,KAHhB;IAIFC,OAJE;IAKFC,WAAW,GAAG,
|
|
1
|
+
{"version":3,"names":["ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","SCALE_EFFECT_PRESS_IN_DELAY","OPACITY_EFFECT_PRESS_IN_DELAY","startTimingAnimationWithDefaults","value","toValue","Animated","timing","duration","useNativeDriver","start","ButtonBase","props","children","disabled","disableThrottle","onPress","onPressOut","pressEffect","pressDelay","pressDelayOrNil","style","styleProp","throttleMillis","otherProps","handlePress","useThrottle","periodMillis","callback","opacity","useAnimatedValue","scale","useEffect","setValue","startScaleAnimation","useCallback","pressIn","isHover","startOpacityAnimation","startPressAnimation","handlePressIn","handlePressOut","animatedStyle","transform","defaultPressDelay","hovered","undefined"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport { Animated } from 'react-native';\nimport { useAnimatedValue, useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\ninterface StartPressAnimation {\n (pressIn: boolean, isHover: boolean): void;\n}\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\n// at \"node_modules/react-native/Libraries/Pressability.js\"\n// const DEFAULT_MIN_PRESS_DURATION = 130;\nconst SCALE_EFFECT_PRESS_IN_DELAY = 130;\nconst OPACITY_EFFECT_PRESS_IN_DELAY = 0;\n\ntype TimingAnimationValue = Animated.Value | Animated.ValueXY;\ntype TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];\n\nconst startTimingAnimationWithDefaults = (\n value: TimingAnimationValue,\n toValue: TimingAnimationToValue,\n) => {\n Animated.timing(value, {\n toValue,\n duration: 150,\n useNativeDriver: true,\n }).start();\n};\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n const {\n children,\n disabled = false,\n disableThrottle = false,\n onPress,\n onPressOut,\n pressEffect = 'opacity',\n pressDelay: pressDelayOrNil,\n style: styleProp,\n throttleMillis = 650,\n ...otherProps\n } = props;\n\n const handlePress = useThrottle({\n periodMillis: disableThrottle ? 0 : throttleMillis,\n callback: onPress,\n });\n\n const opacity = useAnimatedValue(ORIGINAL_OPACITY);\n const scale = useAnimatedValue(ORIGINAL_SCALE);\n\n useEffect(() => {\n opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);\n }, [disabled, pressEffect]);\n\n const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {\n if (!isHover) {\n startTimingAnimationWithDefaults(\n scale,\n pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,\n );\n }\n }, []);\n\n const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {\n if (pressIn) {\n opacity.setValue(ACTIVE_OPACITY);\n } else {\n startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);\n }\n }, []);\n\n const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {\n if (pressEffect === 'scale') {\n startScaleAnimation(pressIn, isHover);\n } else if (pressEffect === 'opacity') {\n startOpacityAnimation(pressIn, isHover);\n }\n }, [pressEffect]);\n\n const handlePressIn = useCallback(() => {\n startPressAnimation(true, false);\n }, [startPressAnimation]);\n\n const handlePressOut = useCallback(() => {\n onPressOut && onPressOut();\n\n startPressAnimation(false, false);\n }, [startPressAnimation, onPressOut]);\n\n const animatedStyle = {\n opacity,\n transform: [{ scale }],\n };\n\n const defaultPressDelay = pressEffect === 'scale'\n ? SCALE_EFFECT_PRESS_IN_DELAY\n : OPACITY_EFFECT_PRESS_IN_DELAY;\n const pressDelay = pressDelayOrNil ?? defaultPressDelay;\n\n return (\n <AnimatedPressable\n disabled={disabled}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n style={[\n animatedStyle,\n styleProp,\n ]}\n unstable_pressDelay={pressDelay}\n {...otherProps}\n >\n {typeof children !== 'function' ? (\n ({ hovered }) => {\n if (hovered !== undefined && !disabled) {\n startPressAnimation(hovered, true);\n }\n\n return children;\n }\n ) : children}\n </AnimatedPressable>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["ButtonBaseProps.ts"],"sourcesContent":["import type { PressableProps } from '../Pressable';\nimport type { OverridableComponentProps } from '../types';\n\nexport type PressEffect = 'opacity' | 'scale' | 'none';\n\nexport default interface ButtonBaseProps extends OverridableComponentProps<PressableProps, {\n /**\n * Content of the ButtonBase.\n */\n children: PressableProps['children'];\n\n /**\n * Whether to prevent interaction with the ButtonBase.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Whether to debounce when button is pressed\n * @default false\n */\n disableThrottle?: boolean;\n\n /**\n * Function to execute on press. If not set, will cause the ButtonBase to be disabled.\n */\n onPress?: () => void;\n\n /**\n * Applied press effect.\n * @default 'opacity'\n */\n pressEffect?: PressEffect;\n\n /**\n * The milliseconds to delay effect.\n */\n pressDelay?: number;\n\n /**\n * The millisecond for debouncing.\n * @default 650\n */\n throttleMillis?: number;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["ButtonBaseProps.ts"],"sourcesContent":["import type { PressableProps } from '../Pressable';\nimport type { OverridableComponentProps } from '../types';\n\nexport type PressEffect = 'opacity' | 'scale' | 'none';\n\nexport default interface ButtonBaseProps extends OverridableComponentProps<PressableProps, {\n /**\n * Content of the ButtonBase.\n */\n children: PressableProps['children'];\n\n /**\n * Whether to prevent interaction with the ButtonBase.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Whether to debounce when button is pressed\n * @default false\n */\n disableThrottle?: boolean;\n\n /**\n * Function to execute on press. If not set, will cause the ButtonBase to be disabled.\n */\n onPress?: () => void;\n\n /**\n * Function to execute on press out.\n */\n onPressOut?: () => void;\n\n /**\n * Applied press effect.\n * @default 'opacity'\n */\n pressEffect?: PressEffect;\n\n /**\n * The milliseconds to delay effect.\n */\n pressDelay?: number;\n\n /**\n * The millisecond for debouncing.\n * @default 650\n */\n throttleMillis?: number;\n}> {}\n"],"mappings":""}
|
|
@@ -99,7 +99,9 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
|
|
|
99
99
|
onPress,
|
|
100
100
|
selectable,
|
|
101
101
|
style,
|
|
102
|
-
variant = 'body1'
|
|
102
|
+
variant = 'body1',
|
|
103
|
+
onLayout,
|
|
104
|
+
onTextLayout
|
|
103
105
|
} = props;
|
|
104
106
|
const theme = (0, _styles.useTheme)();
|
|
105
107
|
const fontStyle = (0, _styles.createFontStyle)(theme, {
|
|
@@ -128,7 +130,9 @@ const Typography = /*#__PURE__*/_react.default.forwardRef(function Typography(pr
|
|
|
128
130
|
numberOfLines: numberOfLines,
|
|
129
131
|
onPress: onPress,
|
|
130
132
|
selectable: selectable,
|
|
131
|
-
style: textStyle
|
|
133
|
+
style: textStyle,
|
|
134
|
+
onLayout: onLayout,
|
|
135
|
+
onTextLayout: onTextLayout
|
|
132
136
|
});
|
|
133
137
|
});
|
|
134
138
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","Platform","OS","undefined","primary","secondary","accent","hint","main","styles","StyleSheet","create","root","flexShrink","maxWidth","Typography","React","forwardRef","props","ref","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","useTheme","fontStyle","createFontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","css","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, TextStyle } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n h1: { accessibilityRole: 'header', 'area-level': 1 },\n h2: { accessibilityRole: 'header', 'area-level': 2 },\n h3: { accessibilityRole: 'header', 'area-level': 3 },\n subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n subtitle2: { accessibilityRole: 'header', 'area-level': 6 },\n body1: { accessibilityRole: 'text' },\n body2: { accessibilityRole: 'text' },\n caption1: { accessibilityRole: 'text' },\n caption2: { accessibilityRole: 'text' },\n flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n const palette = theme.palette.text;\n\n switch (colorProp) {\n case 'inherit':\n return Platform.OS === 'web' ? 'inherit' : undefined;\n case 'textPrimary':\n return palette.primary;\n case 'textSecondary':\n return palette.secondary;\n case 'textAccent':\n return palette.accent;\n case 'textHint':\n return palette.hint;\n }\n\n return theme.palette[colorProp]?.main;\n}\n\nconst styles = StyleSheet.create({\n root: {\n flexShrink: 1,\n ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n const {\n accessibilityRole,\n align = 'inherit',\n ariaLevel,\n disableFontScaling = false,\n children,\n color: colorProp = 'inherit',\n ellipsizeMode = 'tail',\n href,\n numberOfLines,\n onPress,\n selectable,\n style,\n variant = 'body1',\n } = props;\n\n const theme = useTheme();\n\n const fontStyle = createFontStyle(theme, {\n selector: (typography) => typography[variant],\n color: selectColor(theme, colorProp),\n });\n\n // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n const textStyle = css([\n styles.root,\n { textAlign: align === 'inherit' ? 'auto' : align },\n textWrapStyle as TextStyle,\n fontStyle,\n style,\n ]);\n\n const accessibility = accessibilityMap[variant];\n const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n const variantLevel = accessibility?.['area-level'];\n\n return (\n <Text\n ref={ref}\n accessibilityRole={accessibilityRole || variantRole}\n allowFontScaling={!disableFontScaling}\n aria-level={ariaLevel || variantLevel}\n children={children}\n ellipsizeMode={ellipsizeMode}\n // @ts-ignore\n href={href}\n numberOfLines={numberOfLines}\n onPress={onPress}\n selectable={selectable}\n style={textStyle}\n />\n );\n});\n\nexport default React.memo(Typography);\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAGA,MAAMA,gBAAkC,GAAG;EACvCC,EAAE,EAAE;IAAEC,iBAAiB,EAAE,QAArB;IAA+B,cAAc;EAA7C,CADmC;EAEvCC,EAAE,EAAE;IAAED,iBAAiB,EAAE,QAArB;IAA+B,cAAc;EAA7C,CAFmC;EAGvCE,EAAE,EAAE;IAAEF,iBAAiB,EAAE,QAArB;IAA+B,cAAc;EAA7C,CAHmC;EAIvCG,SAAS,EAAE;IAAEH,iBAAiB,EAAE,QAArB;IAA+B,cAAc;EAA7C,CAJ4B;EAKvCI,SAAS,EAAE;IAAEJ,iBAAiB,EAAE,QAArB;IAA+B,cAAc;EAA7C,CAL4B;EAMvCK,KAAK,EAAE;IAAEL,iBAAiB,EAAE;EAArB,CANgC;EAOvCM,KAAK,EAAE;IAAEN,iBAAiB,EAAE;EAArB,CAPgC;EAQvCO,QAAQ,EAAE;IAAEP,iBAAiB,EAAE;EAArB,CAR6B;EASvCQ,QAAQ,EAAE;IAAER,iBAAiB,EAAE;EAArB,CAT6B;EAUvCS,IAAI,EAAE;IAAET,iBAAiB,EAAE;EAArB;AAViC,CAA3C;;AAaA,SAASU,WAAT,CAAqBC,KAArB,EAAmCC,SAAnC,EAAmF;EAAA;;EAC/E,MAAMC,OAAO,GAAGF,KAAK,CAACE,OAAN,CAAcC,IAA9B;;EAEA,QAAQF,SAAR;IACI,KAAK,SAAL;MACI,OAAOG,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB,SAAxB,GAAoCC,SAA3C;;IACJ,KAAK,aAAL;MACI,OAAOJ,OAAO,CAACK,OAAf;;IACJ,KAAK,eAAL;MACI,OAAOL,OAAO,CAACM,SAAf;;IACJ,KAAK,YAAL;MACI,OAAON,OAAO,CAACO,MAAf;;IACJ,KAAK,UAAL;MACI,OAAOP,OAAO,CAACQ,IAAf;EAVR;;EAaA,gCAAOV,KAAK,CAACE,OAAN,CAAcD,SAAd,CAAP,0DAAO,sBAA0BU,IAAjC;AACH;;AAED,MAAMC,MAAM,GAAGC,kBAAA,CAAWC,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,CADV;IAEF,IAAIZ,qBAAA,CAASC,EAAT,KAAgB,KAAhB,GAAwB;MAAEY,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE;AADuB,CAAlB,CAAf;;AAOA,MAAMC,UAAU,gBAAGC,cAAA,CAAMC,UAAN,CAAwC,SAASF,UAAT,CAAoBG,KAApB,EAA2BC,GAA3B,EAAgC;EACvF,MAAM;IACFjC,iBADE;IAEFkC,KAAK,GAAG,SAFN;IAGFC,SAHE;IAIFC,kBAAkB,GAAG,KAJnB;IAKFC,QALE;IAMFC,KAAK,EAAE1B,SAAS,GAAG,SANjB;IAOF2B,aAAa,GAAG,MAPd;IAQFC,IARE;IASFC,aATE;IAUFC,OAVE;IAWFC,UAXE;IAYFC,KAZE;IAaFC,OAAO,GAAG;
|
|
1
|
+
{"version":3,"names":["accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","Platform","OS","undefined","primary","secondary","accent","hint","main","styles","StyleSheet","create","root","flexShrink","maxWidth","Typography","React","forwardRef","props","ref","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","onLayout","onTextLayout","useTheme","fontStyle","createFontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","css","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, TextStyle } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n h1: { accessibilityRole: 'header', 'area-level': 1 },\n h2: { accessibilityRole: 'header', 'area-level': 2 },\n h3: { accessibilityRole: 'header', 'area-level': 3 },\n subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n subtitle2: { accessibilityRole: 'header', 'area-level': 6 },\n body1: { accessibilityRole: 'text' },\n body2: { accessibilityRole: 'text' },\n caption1: { accessibilityRole: 'text' },\n caption2: { accessibilityRole: 'text' },\n flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n const palette = theme.palette.text;\n\n switch (colorProp) {\n case 'inherit':\n return Platform.OS === 'web' ? 'inherit' : undefined;\n case 'textPrimary':\n return palette.primary;\n case 'textSecondary':\n return palette.secondary;\n case 'textAccent':\n return palette.accent;\n case 'textHint':\n return palette.hint;\n }\n\n return theme.palette[colorProp]?.main;\n}\n\nconst styles = StyleSheet.create({\n root: {\n flexShrink: 1,\n ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n const {\n accessibilityRole,\n align = 'inherit',\n ariaLevel,\n disableFontScaling = false,\n children,\n color: colorProp = 'inherit',\n ellipsizeMode = 'tail',\n href,\n numberOfLines,\n onPress,\n selectable,\n style,\n variant = 'body1',\n onLayout,\n onTextLayout,\n } = props;\n\n const theme = useTheme();\n\n const fontStyle = createFontStyle(theme, {\n selector: (typography) => typography[variant],\n color: selectColor(theme, colorProp),\n });\n\n // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n const textStyle = css([\n styles.root,\n { textAlign: align === 'inherit' ? 'auto' : align },\n textWrapStyle as TextStyle,\n fontStyle,\n style,\n ]);\n\n const accessibility = accessibilityMap[variant];\n const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n const variantLevel = accessibility?.['area-level'];\n\n return (\n <Text\n ref={ref}\n accessibilityRole={accessibilityRole || variantRole}\n allowFontScaling={!disableFontScaling}\n aria-level={ariaLevel || variantLevel}\n children={children}\n ellipsizeMode={ellipsizeMode}\n // @ts-ignore\n href={href}\n numberOfLines={numberOfLines}\n onPress={onPress}\n selectable={selectable}\n style={textStyle}\n onLayout={onLayout}\n onTextLayout={onTextLayout}\n />\n );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps } from 'react-native';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n | 'inherit'\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'warning'\n | 'error'\n | 'accent'\n | 'textPrimary'\n | 'textSecondary'\n | 'textAccent'\n | 'textHint';\n\nexport type TypographyVariant =\n | 'h1'\n | 'h2'\n | 'h3'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'caption1'\n | 'caption2'\n | 'flag';\n\nexport interface Accessibility {\n accessibilityRole: AccessibilityProps['accessibilityRole'];\n 'area-level'?: number;\n}\n\nexport interface AccessibilityMap extends Partial<{\n [key: string]: Accessibility;\n}> {}\n\nexport default interface TypographyProps extends ComponentProps<{\n /**\n * Applies HTML tag at web and communicates purpose of component at app\n */\n accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n /**\n * Set the text-align on the component.\n * The value 'justify' is not supported on Android and fallbacks to left.\n * @default 'inherit'\n */\n align?: TypographyAlign;\n\n /**\n * Applies HTML heading level\n */\n ariaLevel?: number;\n\n /**\n * Specifies whether fonts should scale to respect Text Size accessibility settings.\n * @default false\n */\n disableFontScaling?: boolean;\n\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n * @default 'inherit'\n */\n color?: TypographyColor;\n\n /**\n * The text ellipsis mode.\n * @default 'tail'\n */\n ellipsizeMode?: TextProps['ellipsizeMode'];\n\n /**\n * Internal use only. The hyperlink of the text.\n */\n href?: string;\n\n /**\n * Used to truncate the text with an ellipsis after computing the text\n * layout, including line wrapping, such that the total number of lines\n * does not exceed this number.\n */\n numberOfLines?: TextProps['numberOfLines'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n onPress?: TextProps['onPress'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n selectable?: boolean;\n\n /**\n * Applies the theme typography styles.\n * @default 'body1'\n */\n variant?: TypographyVariant;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps } from 'react-native';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n | 'inherit'\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'warning'\n | 'error'\n | 'accent'\n | 'textPrimary'\n | 'textSecondary'\n | 'textAccent'\n | 'textHint';\n\nexport type TypographyVariant =\n | 'h1'\n | 'h2'\n | 'h3'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'caption1'\n | 'caption2'\n | 'flag';\n\nexport interface Accessibility {\n accessibilityRole: AccessibilityProps['accessibilityRole'];\n 'area-level'?: number;\n}\n\nexport interface AccessibilityMap extends Partial<{\n [key: string]: Accessibility;\n}> {}\n\nexport default interface TypographyProps extends ComponentProps<{\n /**\n * Applies HTML tag at web and communicates purpose of component at app\n */\n accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n /**\n * Set the text-align on the component.\n * The value 'justify' is not supported on Android and fallbacks to left.\n * @default 'inherit'\n */\n align?: TypographyAlign;\n\n /**\n * Applies HTML heading level\n */\n ariaLevel?: number;\n\n /**\n * Specifies whether fonts should scale to respect Text Size accessibility settings.\n * @default false\n */\n disableFontScaling?: boolean;\n\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n * @default 'inherit'\n */\n color?: TypographyColor;\n\n /**\n * The text ellipsis mode.\n * @default 'tail'\n */\n ellipsizeMode?: TextProps['ellipsizeMode'];\n\n /**\n * Internal use only. The hyperlink of the text.\n */\n href?: string;\n\n /**\n * Used to truncate the text with an ellipsis after computing the text\n * layout, including line wrapping, such that the total number of lines\n * does not exceed this number.\n */\n numberOfLines?: TextProps['numberOfLines'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n onPress?: TextProps['onPress'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n selectable?: boolean;\n\n /**\n * Applies the theme typography styles.\n * @default 'body1'\n */\n variant?: TypographyVariant;\n\n\n /**\n * Callback that is called when the text layout has been calculated.\n */\n onTextLayout?: TextProps['onTextLayout'];\n\n /**\n * Callback that is called when the layout of the Text component changes.\n */\n onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":""}
|
|
@@ -37,6 +37,7 @@ export default function Button(props) {
|
|
|
37
37
|
fullWidth = false,
|
|
38
38
|
href,
|
|
39
39
|
onPress,
|
|
40
|
+
pressEffect,
|
|
40
41
|
size = 'medium',
|
|
41
42
|
startIcon: startIconProp,
|
|
42
43
|
style: styleProp,
|
|
@@ -93,6 +94,7 @@ export default function Button(props) {
|
|
|
93
94
|
const textStyle = css([fontStyle, textMarginStyle, {
|
|
94
95
|
textAlign: 'center'
|
|
95
96
|
}]);
|
|
97
|
+
const modifiedPressEffect = variant !== 'text' && !pressEffect ? 'scale' : pressEffect;
|
|
96
98
|
|
|
97
99
|
const handlePress = async () => {
|
|
98
100
|
if (disabled) {
|
|
@@ -114,7 +116,8 @@ export default function Button(props) {
|
|
|
114
116
|
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
|
|
115
117
|
disabled: disabled,
|
|
116
118
|
onPress: handlePress,
|
|
117
|
-
style: buttonBaseStyle
|
|
119
|
+
style: buttonBaseStyle,
|
|
120
|
+
pressEffect: modifiedPressEffect
|
|
118
121
|
}, otherProps), startIcon, /*#__PURE__*/React.createElement(Text, {
|
|
119
122
|
children: children,
|
|
120
123
|
style: textStyle
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Linking","Text","ButtonBase","createFontStyle","css","StyleSheet","useTheme","cloneElementSafely","iconSizes","small","medium","styles","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","fill","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundness","buttonBaseStyle","undefined","fontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","handlePress","canOpenURL","openURL"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n small: 20,\n medium: 24,\n};\n\nconst styles = StyleSheet.create({\n root: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n fullWidth: {\n width: '100%',\n },\n medium: {\n minWidth: 104,\n height: 48,\n },\n small: {\n minWidth: 56,\n height: 32,\n },\n});\n\nexport default function Button(props: ButtonProps) {\n const {\n children,\n clipHorizontalSpacing = false,\n color = 'primary',\n disabled = false,\n endIcon: endIconProp,\n fullWidth = false,\n href,\n onPress,\n size = 'medium',\n startIcon: startIconProp,\n style: styleProp,\n variant = 'contained',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const mainColor = theme.palette[color].main;\n\n const fontColor = variant === 'contained'\n ? theme.palette[color].contrastTextColor\n : theme.palette[color].main;\n\n const variantStyleMap = {\n contained: {\n backgroundColor: mainColor,\n },\n outlined: {\n backgroundColor: 'transparent',\n borderColor: mainColor,\n borderStyle: 'solid',\n borderWidth: 1,\n },\n text: {\n backgroundColor: 'transparent',\n },\n };\n\n const iconProps = {\n width: iconSizes[size],\n height: iconSizes[size],\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);\n const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;\n const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;\n\n const borderRadius = theme.shape.roundness;\n const buttonBaseStyle = css([\n styles.root,\n variantStyleMap[variant],\n size === 'medium' ? styles.medium : styles.small,\n fullWidth ? styles.fullWidth : undefined,\n { borderRadius, color: fontColor },\n (variant === 'text' && clipHorizontalSpacing)\n ? { minWidth: 0 }\n : { paddingLeft, paddingRight },\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n color: fontColor,\n });\n\n const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n const textMarginStyle = startIcon\n ? { marginLeft: textMarginSize }\n : endIcon\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\n ]);\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 return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={buttonBaseStyle}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,OAAT,EAAkBC,IAAlB,QAA8B,cAA9B;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,UAA/B,EAA2CC,QAA3C,QAA2D,WAA3D;AACA,SAASC,kBAAT,QAAmC,UAAnC;AAMA,MAAMC,SAAoB,GAAG;EACzBC,KAAK,EAAE,EADkB;EAEzBC,MAAM,EAAE;AAFiB,CAA7B;AAKA,MAAMC,MAAM,GAAGN,UAAU,CAACO,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,aAAa,EAAE,KADb;IAEFC,cAAc,EAAE,QAFd;IAGFC,UAAU,EAAE;EAHV,CADuB;EAM7BC,SAAS,EAAE;IACPC,KAAK,EAAE;EADA,CANkB;EAS7BR,MAAM,EAAE;IACJS,QAAQ,EAAE,GADN;IAEJC,MAAM,EAAE;EAFJ,CATqB;EAa7BX,KAAK,EAAE;IACHU,QAAQ,EAAE,EADP;IAEHC,MAAM,EAAE;EAFL;AAbsB,CAAlB,CAAf;AAmBA,eAAe,SAASC,MAAT,CAAgBC,KAAhB,EAAoC;EAC/C,MAAM;IACFC,QADE;IAEFC,qBAAqB,GAAG,KAFtB;IAGFC,KAAK,GAAG,SAHN;IAIFC,QAAQ,GAAG,KAJT;IAKFC,OAAO,EAAEC,WALP;IAMFX,SAAS,GAAG,KANV;IAOFY,IAPE;IAQFC,OARE;IASFC,IAAI,GAAG,
|
|
1
|
+
{"version":3,"names":["React","Linking","Text","ButtonBase","createFontStyle","css","StyleSheet","useTheme","cloneElementSafely","iconSizes","small","medium","styles","create","root","flexDirection","justifyContent","alignItems","fullWidth","width","minWidth","height","Button","props","children","clipHorizontalSpacing","color","disabled","endIcon","endIconProp","href","onPress","pressEffect","size","startIcon","startIconProp","style","styleProp","variant","otherProps","theme","mainColor","palette","main","fontColor","contrastTextColor","variantStyleMap","contained","backgroundColor","outlined","borderColor","borderStyle","borderWidth","text","iconProps","fill","paddingSize","spacing","paddingLeft","paddingRight","borderRadius","shape","roundness","buttonBaseStyle","undefined","fontStyle","selector","typo","button2","button1","textMarginSize","textMarginStyle","marginLeft","marginRight","textStyle","textAlign","modifiedPressEffect","handlePress","canOpenURL","openURL"],"sources":["Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Linking, Text } from 'react-native';\nimport ButtonBase from '../ButtonBase';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport { cloneElementSafely } from '../utils';\nimport type ButtonProps from './ButtonProps';\nimport type { ButtonSize } from './ButtonProps';\n\ntype IconSizes = { [n in ButtonSize]: number };\n\nconst iconSizes: IconSizes = {\n small: 20,\n medium: 24,\n};\n\nconst styles = StyleSheet.create({\n root: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n },\n fullWidth: {\n width: '100%',\n },\n medium: {\n minWidth: 104,\n height: 48,\n },\n small: {\n minWidth: 56,\n height: 32,\n },\n});\n\nexport default function Button(props: ButtonProps) {\n const {\n children,\n clipHorizontalSpacing = false,\n color = 'primary',\n disabled = false,\n endIcon: endIconProp,\n fullWidth = false,\n href,\n onPress,\n pressEffect,\n size = 'medium',\n startIcon: startIconProp,\n style: styleProp,\n variant = 'contained',\n ...otherProps\n } = props;\n\n const theme = useTheme();\n\n const mainColor = theme.palette[color].main;\n\n const fontColor = variant === 'contained'\n ? theme.palette[color].contrastTextColor\n : theme.palette[color].main;\n\n const variantStyleMap = {\n contained: {\n backgroundColor: mainColor,\n },\n outlined: {\n backgroundColor: 'transparent',\n borderColor: mainColor,\n borderStyle: 'solid',\n borderWidth: 1,\n },\n text: {\n backgroundColor: 'transparent',\n },\n };\n\n const iconProps = {\n width: iconSizes[size],\n height: iconSizes[size],\n fill: fontColor,\n };\n\n const startIcon = cloneElementSafely(startIconProp, iconProps);\n const endIcon = cloneElementSafely(endIconProp, iconProps);\n\n const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);\n const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;\n const paddingRight = endIcon ? paddingSize - theme.spacing(1) : paddingSize;\n\n const borderRadius = theme.shape.roundness;\n const buttonBaseStyle = css([\n styles.root,\n variantStyleMap[variant],\n size === 'medium' ? styles.medium : styles.small,\n fullWidth ? styles.fullWidth : undefined,\n { borderRadius, color: fontColor },\n (variant === 'text' && clipHorizontalSpacing)\n ? { minWidth: 0 }\n : { paddingLeft, paddingRight },\n styleProp,\n ]);\n\n const fontStyle = createFontStyle(theme, {\n selector: (typo) => size === 'small' ? typo.button2 : typo.button1,\n color: fontColor,\n });\n\n const textMarginSize = size === 'small' ? theme.spacing(1) : theme.spacing(2);\n const textMarginStyle = startIcon\n ? { marginLeft: textMarginSize }\n : endIcon\n ? { marginRight: textMarginSize }\n : undefined;\n\n const textStyle = css([\n fontStyle,\n textMarginStyle,\n { textAlign: 'center' },\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 return (\n <ButtonBase\n disabled={disabled}\n onPress={handlePress}\n style={buttonBaseStyle}\n pressEffect={modifiedPressEffect}\n {...otherProps}\n >\n {startIcon}\n\n <Text\n children={children}\n style={textStyle}\n />\n\n {endIcon}\n </ButtonBase>\n );\n};\n"],"mappings":"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"}
|
|
@@ -28,6 +28,7 @@ export default function ButtonBase(props) {
|
|
|
28
28
|
disabled = false,
|
|
29
29
|
disableThrottle = false,
|
|
30
30
|
onPress,
|
|
31
|
+
onPressOut,
|
|
31
32
|
pressEffect = 'opacity',
|
|
32
33
|
pressDelay: pressDelayOrNil,
|
|
33
34
|
style: styleProp,
|
|
@@ -68,8 +69,9 @@ export default function ButtonBase(props) {
|
|
|
68
69
|
startPressAnimation(true, false);
|
|
69
70
|
}, [startPressAnimation]);
|
|
70
71
|
const handlePressOut = useCallback(() => {
|
|
72
|
+
onPressOut && onPressOut();
|
|
71
73
|
startPressAnimation(false, false);
|
|
72
|
-
}, [startPressAnimation]);
|
|
74
|
+
}, [startPressAnimation, onPressOut]);
|
|
73
75
|
const animatedStyle = {
|
|
74
76
|
opacity,
|
|
75
77
|
transform: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useCallback","useEffect","Animated","useAnimatedValue","useThrottle","AnimatedPressable","ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","SCALE_EFFECT_PRESS_IN_DELAY","OPACITY_EFFECT_PRESS_IN_DELAY","startTimingAnimationWithDefaults","value","toValue","timing","duration","useNativeDriver","start","ButtonBase","props","children","disabled","disableThrottle","onPress","pressEffect","pressDelay","pressDelayOrNil","style","styleProp","throttleMillis","otherProps","handlePress","periodMillis","callback","opacity","scale","setValue","startScaleAnimation","pressIn","isHover","startOpacityAnimation","startPressAnimation","handlePressIn","handlePressOut","animatedStyle","transform","defaultPressDelay","hovered","undefined"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport { Animated } from 'react-native';\nimport { useAnimatedValue, useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\ninterface StartPressAnimation {\n (pressIn: boolean, isHover: boolean): void;\n}\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\n// at \"node_modules/react-native/Libraries/Pressability.js\"\n// const DEFAULT_MIN_PRESS_DURATION = 130;\nconst SCALE_EFFECT_PRESS_IN_DELAY = 130;\nconst OPACITY_EFFECT_PRESS_IN_DELAY = 0;\n\ntype TimingAnimationValue = Animated.Value | Animated.ValueXY;\ntype TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];\n\nconst startTimingAnimationWithDefaults = (\n value: TimingAnimationValue,\n toValue: TimingAnimationToValue,\n) => {\n Animated.timing(value, {\n toValue,\n duration: 150,\n useNativeDriver: true,\n }).start();\n};\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n const {\n children,\n disabled = false,\n disableThrottle = false,\n onPress,\n pressEffect = 'opacity',\n pressDelay: pressDelayOrNil,\n style: styleProp,\n throttleMillis = 650,\n ...otherProps\n } = props;\n\n const handlePress = useThrottle({\n periodMillis: disableThrottle ? 0 : throttleMillis,\n callback: onPress,\n });\n\n const opacity = useAnimatedValue(ORIGINAL_OPACITY);\n const scale = useAnimatedValue(ORIGINAL_SCALE);\n\n useEffect(() => {\n opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);\n }, [disabled, pressEffect]);\n\n const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {\n if (!isHover) {\n startTimingAnimationWithDefaults(\n scale,\n pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,\n );\n }\n }, []);\n\n const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {\n if (pressIn) {\n opacity.setValue(ACTIVE_OPACITY);\n } else {\n startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);\n }\n }, []);\n\n const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {\n if (pressEffect === 'scale') {\n startScaleAnimation(pressIn, isHover);\n } else if (pressEffect === 'opacity') {\n startOpacityAnimation(pressIn, isHover);\n }\n }, [pressEffect]);\n\n const handlePressIn = useCallback(() => {\n startPressAnimation(true, false);\n }, [startPressAnimation]);\n\n const handlePressOut = useCallback(() => {\n startPressAnimation(false, false);\n }, [startPressAnimation]);\n\n const animatedStyle = {\n opacity,\n transform: [{ scale }],\n };\n\n const defaultPressDelay = pressEffect === 'scale'\n ? SCALE_EFFECT_PRESS_IN_DELAY\n : OPACITY_EFFECT_PRESS_IN_DELAY;\n const pressDelay = pressDelayOrNil ?? defaultPressDelay;\n\n return (\n <AnimatedPressable\n disabled={disabled}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n style={[\n animatedStyle,\n styleProp,\n ]}\n unstable_pressDelay={pressDelay}\n {...otherProps}\n >\n {typeof children !== 'function' ? (\n ({ hovered }) => {\n if (hovered !== undefined && !disabled) {\n startPressAnimation(hovered, true);\n }\n\n return children;\n }\n ) : children}\n </AnimatedPressable>\n );\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,QAA8C,OAA9C;AACA,SAASC,QAAT,QAAyB,cAAzB;AACA,SAASC,gBAAT,EAA2BC,WAA3B,QAA8C,UAA9C;AACA,SAASC,iBAAT,QAAkC,aAAlC;AAOA,OAAO,MAAMC,gBAAgB,GAAG,CAAzB;AACP,OAAO,MAAMC,gBAAgB,GAAG,EAAzB;AACP,MAAMC,cAAc,GAAG,GAAvB;AAEA,MAAMC,cAAc,GAAG,CAAvB;AACA,MAAMC,cAAc,GAAG,GAAvB,C,CAEA;AACA;;AACA,MAAMC,2BAA2B,GAAG,GAApC;AACA,MAAMC,6BAA6B,GAAG,CAAtC;;AAKA,MAAMC,gCAAgC,GAAG,CACrCC,KADqC,EAErCC,OAFqC,KAGpC;EACDb,QAAQ,CAACc,MAAT,CAAgBF,KAAhB,EAAuB;IACnBC,OADmB;IAEnBE,QAAQ,EAAE,GAFS;IAGnBC,eAAe,EAAE;EAHE,CAAvB,EAIGC,KAJH;AAKH,CATD;;AAWA,eAAe,SAASC,UAAT,CAAoBC,KAApB,EAA4C;EACvD,MAAM;IACFC,QADE;IAEFC,QAAQ,GAAG,KAFT;IAGFC,eAAe,GAAG,KAHhB;IAIFC,OAJE;IAKFC,WAAW,GAAG,
|
|
1
|
+
{"version":3,"names":["React","useCallback","useEffect","Animated","useAnimatedValue","useThrottle","AnimatedPressable","ORIGINAL_OPACITY","DISABLED_OPACITY","ACTIVE_OPACITY","ORIGINAL_SCALE","MINIFIED_SCALE","SCALE_EFFECT_PRESS_IN_DELAY","OPACITY_EFFECT_PRESS_IN_DELAY","startTimingAnimationWithDefaults","value","toValue","timing","duration","useNativeDriver","start","ButtonBase","props","children","disabled","disableThrottle","onPress","onPressOut","pressEffect","pressDelay","pressDelayOrNil","style","styleProp","throttleMillis","otherProps","handlePress","periodMillis","callback","opacity","scale","setValue","startScaleAnimation","pressIn","isHover","startOpacityAnimation","startPressAnimation","handlePressIn","handlePressOut","animatedStyle","transform","defaultPressDelay","hovered","undefined"],"sources":["ButtonBase.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport { Animated } from 'react-native';\nimport { useAnimatedValue, useThrottle } from '../hooks';\nimport { AnimatedPressable } from '../animated';\nimport type ButtonBaseProps from './ButtonBaseProps';\n\ninterface StartPressAnimation {\n (pressIn: boolean, isHover: boolean): void;\n}\n\nexport const ORIGINAL_OPACITY = 1;\nexport const DISABLED_OPACITY = .3;\nconst ACTIVE_OPACITY = .65;\n\nconst ORIGINAL_SCALE = 1;\nconst MINIFIED_SCALE = .96;\n\n// at \"node_modules/react-native/Libraries/Pressability.js\"\n// const DEFAULT_MIN_PRESS_DURATION = 130;\nconst SCALE_EFFECT_PRESS_IN_DELAY = 130;\nconst OPACITY_EFFECT_PRESS_IN_DELAY = 0;\n\ntype TimingAnimationValue = Animated.Value | Animated.ValueXY;\ntype TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];\n\nconst startTimingAnimationWithDefaults = (\n value: TimingAnimationValue,\n toValue: TimingAnimationToValue,\n) => {\n Animated.timing(value, {\n toValue,\n duration: 150,\n useNativeDriver: true,\n }).start();\n};\n\nexport default function ButtonBase(props: ButtonBaseProps) {\n const {\n children,\n disabled = false,\n disableThrottle = false,\n onPress,\n onPressOut,\n pressEffect = 'opacity',\n pressDelay: pressDelayOrNil,\n style: styleProp,\n throttleMillis = 650,\n ...otherProps\n } = props;\n\n const handlePress = useThrottle({\n periodMillis: disableThrottle ? 0 : throttleMillis,\n callback: onPress,\n });\n\n const opacity = useAnimatedValue(ORIGINAL_OPACITY);\n const scale = useAnimatedValue(ORIGINAL_SCALE);\n\n useEffect(() => {\n opacity.setValue(disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY);\n }, [disabled, pressEffect]);\n\n const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {\n if (!isHover) {\n startTimingAnimationWithDefaults(\n scale,\n pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,\n );\n }\n }, []);\n\n const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {\n if (pressIn) {\n opacity.setValue(ACTIVE_OPACITY);\n } else {\n startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);\n }\n }, []);\n\n const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {\n if (pressEffect === 'scale') {\n startScaleAnimation(pressIn, isHover);\n } else if (pressEffect === 'opacity') {\n startOpacityAnimation(pressIn, isHover);\n }\n }, [pressEffect]);\n\n const handlePressIn = useCallback(() => {\n startPressAnimation(true, false);\n }, [startPressAnimation]);\n\n const handlePressOut = useCallback(() => {\n onPressOut && onPressOut();\n\n startPressAnimation(false, false);\n }, [startPressAnimation, onPressOut]);\n\n const animatedStyle = {\n opacity,\n transform: [{ scale }],\n };\n\n const defaultPressDelay = pressEffect === 'scale'\n ? SCALE_EFFECT_PRESS_IN_DELAY\n : OPACITY_EFFECT_PRESS_IN_DELAY;\n const pressDelay = pressDelayOrNil ?? defaultPressDelay;\n\n return (\n <AnimatedPressable\n disabled={disabled}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n style={[\n animatedStyle,\n styleProp,\n ]}\n unstable_pressDelay={pressDelay}\n {...otherProps}\n >\n {typeof children !== 'function' ? (\n ({ hovered }) => {\n if (hovered !== undefined && !disabled) {\n startPressAnimation(hovered, true);\n }\n\n return children;\n }\n ) : children}\n </AnimatedPressable>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["ButtonBaseProps.ts"],"sourcesContent":["import type { PressableProps } from '../Pressable';\nimport type { OverridableComponentProps } from '../types';\n\nexport type PressEffect = 'opacity' | 'scale' | 'none';\n\nexport default interface ButtonBaseProps extends OverridableComponentProps<PressableProps, {\n /**\n * Content of the ButtonBase.\n */\n children: PressableProps['children'];\n\n /**\n * Whether to prevent interaction with the ButtonBase.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Whether to debounce when button is pressed\n * @default false\n */\n disableThrottle?: boolean;\n\n /**\n * Function to execute on press. If not set, will cause the ButtonBase to be disabled.\n */\n onPress?: () => void;\n\n /**\n * Applied press effect.\n * @default 'opacity'\n */\n pressEffect?: PressEffect;\n\n /**\n * The milliseconds to delay effect.\n */\n pressDelay?: number;\n\n /**\n * The millisecond for debouncing.\n * @default 650\n */\n throttleMillis?: number;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["ButtonBaseProps.ts"],"sourcesContent":["import type { PressableProps } from '../Pressable';\nimport type { OverridableComponentProps } from '../types';\n\nexport type PressEffect = 'opacity' | 'scale' | 'none';\n\nexport default interface ButtonBaseProps extends OverridableComponentProps<PressableProps, {\n /**\n * Content of the ButtonBase.\n */\n children: PressableProps['children'];\n\n /**\n * Whether to prevent interaction with the ButtonBase.\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Whether to debounce when button is pressed\n * @default false\n */\n disableThrottle?: boolean;\n\n /**\n * Function to execute on press. If not set, will cause the ButtonBase to be disabled.\n */\n onPress?: () => void;\n\n /**\n * Function to execute on press out.\n */\n onPressOut?: () => void;\n\n /**\n * Applied press effect.\n * @default 'opacity'\n */\n pressEffect?: PressEffect;\n\n /**\n * The milliseconds to delay effect.\n */\n pressDelay?: number;\n\n /**\n * The millisecond for debouncing.\n * @default 650\n */\n throttleMillis?: number;\n}> {}\n"],"mappings":""}
|
|
@@ -86,7 +86,9 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(props, ref)
|
|
|
86
86
|
onPress,
|
|
87
87
|
selectable,
|
|
88
88
|
style,
|
|
89
|
-
variant = 'body1'
|
|
89
|
+
variant = 'body1',
|
|
90
|
+
onLayout,
|
|
91
|
+
onTextLayout
|
|
90
92
|
} = props;
|
|
91
93
|
const theme = useTheme();
|
|
92
94
|
const fontStyle = createFontStyle(theme, {
|
|
@@ -115,7 +117,9 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(props, ref)
|
|
|
115
117
|
numberOfLines: numberOfLines,
|
|
116
118
|
onPress: onPress,
|
|
117
119
|
selectable: selectable,
|
|
118
|
-
style: textStyle
|
|
120
|
+
style: textStyle,
|
|
121
|
+
onLayout: onLayout,
|
|
122
|
+
onTextLayout: onTextLayout
|
|
119
123
|
});
|
|
120
124
|
});
|
|
121
125
|
export default /*#__PURE__*/React.memo(Typography);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","Text","createFontStyle","css","StyleSheet","useTheme","accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","OS","undefined","primary","secondary","accent","hint","main","styles","create","root","flexShrink","maxWidth","Typography","forwardRef","props","ref","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","fontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, TextStyle } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n h1: { accessibilityRole: 'header', 'area-level': 1 },\n h2: { accessibilityRole: 'header', 'area-level': 2 },\n h3: { accessibilityRole: 'header', 'area-level': 3 },\n subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n subtitle2: { accessibilityRole: 'header', 'area-level': 6 },\n body1: { accessibilityRole: 'text' },\n body2: { accessibilityRole: 'text' },\n caption1: { accessibilityRole: 'text' },\n caption2: { accessibilityRole: 'text' },\n flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n const palette = theme.palette.text;\n\n switch (colorProp) {\n case 'inherit':\n return Platform.OS === 'web' ? 'inherit' : undefined;\n case 'textPrimary':\n return palette.primary;\n case 'textSecondary':\n return palette.secondary;\n case 'textAccent':\n return palette.accent;\n case 'textHint':\n return palette.hint;\n }\n\n return theme.palette[colorProp]?.main;\n}\n\nconst styles = StyleSheet.create({\n root: {\n flexShrink: 1,\n ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n const {\n accessibilityRole,\n align = 'inherit',\n ariaLevel,\n disableFontScaling = false,\n children,\n color: colorProp = 'inherit',\n ellipsizeMode = 'tail',\n href,\n numberOfLines,\n onPress,\n selectable,\n style,\n variant = 'body1',\n } = props;\n\n const theme = useTheme();\n\n const fontStyle = createFontStyle(theme, {\n selector: (typography) => typography[variant],\n color: selectColor(theme, colorProp),\n });\n\n // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n const textStyle = css([\n styles.root,\n { textAlign: align === 'inherit' ? 'auto' : align },\n textWrapStyle as TextStyle,\n fontStyle,\n style,\n ]);\n\n const accessibility = accessibilityMap[variant];\n const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n const variantLevel = accessibility?.['area-level'];\n\n return (\n <Text\n ref={ref}\n accessibilityRole={accessibilityRole || variantRole}\n allowFontScaling={!disableFontScaling}\n aria-level={ariaLevel || variantLevel}\n children={children}\n ellipsizeMode={ellipsizeMode}\n // @ts-ignore\n href={href}\n numberOfLines={numberOfLines}\n onPress={onPress}\n selectable={selectable}\n style={textStyle}\n />\n );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,QAAT,EAAmBC,IAAnB,QAA0C,cAA1C;AAEA,SAASC,eAAT,EAA0BC,GAA1B,EAA+BC,UAA/B,EAA2CC,QAA3C,QAA2D,WAA3D;AAGA,MAAMC,gBAAkC,GAAG;EACvCC,EAAE,EAAE;IAAEC,iBAAiB,EAAE,QAArB;IAA+B,cAAc;EAA7C,CADmC;EAEvCC,EAAE,EAAE;IAAED,iBAAiB,EAAE,QAArB;IAA+B,cAAc;EAA7C,CAFmC;EAGvCE,EAAE,EAAE;IAAEF,iBAAiB,EAAE,QAArB;IAA+B,cAAc;EAA7C,CAHmC;EAIvCG,SAAS,EAAE;IAAEH,iBAAiB,EAAE,QAArB;IAA+B,cAAc;EAA7C,CAJ4B;EAKvCI,SAAS,EAAE;IAAEJ,iBAAiB,EAAE,QAArB;IAA+B,cAAc;EAA7C,CAL4B;EAMvCK,KAAK,EAAE;IAAEL,iBAAiB,EAAE;EAArB,CANgC;EAOvCM,KAAK,EAAE;IAAEN,iBAAiB,EAAE;EAArB,CAPgC;EAQvCO,QAAQ,EAAE;IAAEP,iBAAiB,EAAE;EAArB,CAR6B;EASvCQ,QAAQ,EAAE;IAAER,iBAAiB,EAAE;EAArB,CAT6B;EAUvCS,IAAI,EAAE;IAAET,iBAAiB,EAAE;EAArB;AAViC,CAA3C;;AAaA,SAASU,WAAT,CAAqBC,KAArB,EAAmCC,SAAnC,EAAmF;EAAA;;EAC/E,MAAMC,OAAO,GAAGF,KAAK,CAACE,OAAN,CAAcC,IAA9B;;EAEA,QAAQF,SAAR;IACI,KAAK,SAAL;MACI,OAAOpB,QAAQ,CAACuB,EAAT,KAAgB,KAAhB,GAAwB,SAAxB,GAAoCC,SAA3C;;IACJ,KAAK,aAAL;MACI,OAAOH,OAAO,CAACI,OAAf;;IACJ,KAAK,eAAL;MACI,OAAOJ,OAAO,CAACK,SAAf;;IACJ,KAAK,YAAL;MACI,OAAOL,OAAO,CAACM,MAAf;;IACJ,KAAK,UAAL;MACI,OAAON,OAAO,CAACO,IAAf;EAVR;;EAaA,gCAAOT,KAAK,CAACE,OAAN,CAAcD,SAAd,CAAP,0DAAO,sBAA0BS,IAAjC;AACH;;AAED,MAAMC,MAAM,GAAG1B,UAAU,CAAC2B,MAAX,CAAkB;EAC7BC,IAAI,EAAE;IACFC,UAAU,EAAE,CADV;IAEF,IAAIjC,QAAQ,CAACuB,EAAT,KAAgB,KAAhB,GAAwB;MAAEW,QAAQ,EAAE;IAAZ,CAAxB,GAA+C,EAAnD;EAFE;AADuB,CAAlB,CAAf;AAOA,MAAMC,UAAU,gBAAGpC,KAAK,CAACqC,UAAN,CAAwC,SAASD,UAAT,CAAoBE,KAApB,EAA2BC,GAA3B,EAAgC;EACvF,MAAM;IACF9B,iBADE;IAEF+B,KAAK,GAAG,SAFN;IAGFC,SAHE;IAIFC,kBAAkB,GAAG,KAJnB;IAKFC,QALE;IAMFC,KAAK,EAAEvB,SAAS,GAAG,SANjB;IAOFwB,aAAa,GAAG,MAPd;IAQFC,IARE;IASFC,aATE;IAUFC,OAVE;IAWFC,UAXE;IAYFC,KAZE;IAaFC,OAAO,GAAG;
|
|
1
|
+
{"version":3,"names":["React","Platform","Text","createFontStyle","css","StyleSheet","useTheme","accessibilityMap","h1","accessibilityRole","h2","h3","subtitle1","subtitle2","body1","body2","caption1","caption2","flag","selectColor","theme","colorProp","palette","text","OS","undefined","primary","secondary","accent","hint","main","styles","create","root","flexShrink","maxWidth","Typography","forwardRef","props","ref","align","ariaLevel","disableFontScaling","children","color","ellipsizeMode","href","numberOfLines","onPress","selectable","style","variant","onLayout","onTextLayout","fontStyle","selector","typography","textWrapStyle","wordWrap","textStyle","textAlign","accessibility","variantRole","variantLevel","memo"],"sources":["Typography.tsx"],"sourcesContent":["import React from 'react';\nimport { Platform, Text, TextStyle } from 'react-native';\nimport type { Theme } from '@fountain-ui/styles';\nimport { createFontStyle, css, StyleSheet, useTheme } from '../styles';\nimport TypographyProps, { AccessibilityMap, TypographyColor } from './TypographyProps';\n\nconst accessibilityMap: AccessibilityMap = {\n h1: { accessibilityRole: 'header', 'area-level': 1 },\n h2: { accessibilityRole: 'header', 'area-level': 2 },\n h3: { accessibilityRole: 'header', 'area-level': 3 },\n subtitle1: { accessibilityRole: 'header', 'area-level': 6 },\n subtitle2: { accessibilityRole: 'header', 'area-level': 6 },\n body1: { accessibilityRole: 'text' },\n body2: { accessibilityRole: 'text' },\n caption1: { accessibilityRole: 'text' },\n caption2: { accessibilityRole: 'text' },\n flag: { accessibilityRole: 'text' },\n};\n\nfunction selectColor(theme: Theme, colorProp: TypographyColor): string | undefined {\n const palette = theme.palette.text;\n\n switch (colorProp) {\n case 'inherit':\n return Platform.OS === 'web' ? 'inherit' : undefined;\n case 'textPrimary':\n return palette.primary;\n case 'textSecondary':\n return palette.secondary;\n case 'textAccent':\n return palette.accent;\n case 'textHint':\n return palette.hint;\n }\n\n return theme.palette[colorProp]?.main;\n}\n\nconst styles = StyleSheet.create({\n root: {\n flexShrink: 1,\n ...(Platform.OS === 'web' ? { maxWidth: '100%' } : {}),\n },\n});\n\nconst Typography = React.forwardRef<Text, TypographyProps>(function Typography(props, ref) {\n const {\n accessibilityRole,\n align = 'inherit',\n ariaLevel,\n disableFontScaling = false,\n children,\n color: colorProp = 'inherit',\n ellipsizeMode = 'tail',\n href,\n numberOfLines,\n onPress,\n selectable,\n style,\n variant = 'body1',\n onLayout,\n onTextLayout,\n } = props;\n\n const theme = useTheme();\n\n const fontStyle = createFontStyle(theme, {\n selector: (typography) => typography[variant],\n color: selectColor(theme, colorProp),\n });\n\n // To prevent white-space: pre, word-wrap:break-word style conflicting issue at safari browser.\n const textWrapStyle = numberOfLines && numberOfLines > 0 && Platform.OS === 'web' ? { wordWrap: 'normal' } : {};\n\n const textStyle = css([\n styles.root,\n { textAlign: align === 'inherit' ? 'auto' : align },\n textWrapStyle as TextStyle,\n fontStyle,\n style,\n ]);\n\n const accessibility = accessibilityMap[variant];\n const variantRole = href !== undefined ? 'link' : accessibility?.accessibilityRole;\n const variantLevel = accessibility?.['area-level'];\n\n return (\n <Text\n ref={ref}\n accessibilityRole={accessibilityRole || variantRole}\n allowFontScaling={!disableFontScaling}\n aria-level={ariaLevel || variantLevel}\n children={children}\n ellipsizeMode={ellipsizeMode}\n // @ts-ignore\n href={href}\n numberOfLines={numberOfLines}\n onPress={onPress}\n selectable={selectable}\n style={textStyle}\n onLayout={onLayout}\n onTextLayout={onTextLayout}\n />\n );\n});\n\nexport default React.memo(Typography);\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps } from 'react-native';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n | 'inherit'\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'warning'\n | 'error'\n | 'accent'\n | 'textPrimary'\n | 'textSecondary'\n | 'textAccent'\n | 'textHint';\n\nexport type TypographyVariant =\n | 'h1'\n | 'h2'\n | 'h3'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'caption1'\n | 'caption2'\n | 'flag';\n\nexport interface Accessibility {\n accessibilityRole: AccessibilityProps['accessibilityRole'];\n 'area-level'?: number;\n}\n\nexport interface AccessibilityMap extends Partial<{\n [key: string]: Accessibility;\n}> {}\n\nexport default interface TypographyProps extends ComponentProps<{\n /**\n * Applies HTML tag at web and communicates purpose of component at app\n */\n accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n /**\n * Set the text-align on the component.\n * The value 'justify' is not supported on Android and fallbacks to left.\n * @default 'inherit'\n */\n align?: TypographyAlign;\n\n /**\n * Applies HTML heading level\n */\n ariaLevel?: number;\n\n /**\n * Specifies whether fonts should scale to respect Text Size accessibility settings.\n * @default false\n */\n disableFontScaling?: boolean;\n\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n * @default 'inherit'\n */\n color?: TypographyColor;\n\n /**\n * The text ellipsis mode.\n * @default 'tail'\n */\n ellipsizeMode?: TextProps['ellipsizeMode'];\n\n /**\n * Internal use only. The hyperlink of the text.\n */\n href?: string;\n\n /**\n * Used to truncate the text with an ellipsis after computing the text\n * layout, including line wrapping, such that the total number of lines\n * does not exceed this number.\n */\n numberOfLines?: TextProps['numberOfLines'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n onPress?: TextProps['onPress'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n selectable?: boolean;\n\n /**\n * Applies the theme typography styles.\n * @default 'body1'\n */\n variant?: TypographyVariant;\n}> {}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["TypographyProps.ts"],"sourcesContent":["import React from 'react';\nimport type { AccessibilityProps, TextProps } from 'react-native';\nimport type { ComponentProps } from '../types';\n\nexport type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n | 'inherit'\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'warning'\n | 'error'\n | 'accent'\n | 'textPrimary'\n | 'textSecondary'\n | 'textAccent'\n | 'textHint';\n\nexport type TypographyVariant =\n | 'h1'\n | 'h2'\n | 'h3'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'caption1'\n | 'caption2'\n | 'flag';\n\nexport interface Accessibility {\n accessibilityRole: AccessibilityProps['accessibilityRole'];\n 'area-level'?: number;\n}\n\nexport interface AccessibilityMap extends Partial<{\n [key: string]: Accessibility;\n}> {}\n\nexport default interface TypographyProps extends ComponentProps<{\n /**\n * Applies HTML tag at web and communicates purpose of component at app\n */\n accessibilityRole?: AccessibilityProps['accessibilityRole'];\n\n /**\n * Set the text-align on the component.\n * The value 'justify' is not supported on Android and fallbacks to left.\n * @default 'inherit'\n */\n align?: TypographyAlign;\n\n /**\n * Applies HTML heading level\n */\n ariaLevel?: number;\n\n /**\n * Specifies whether fonts should scale to respect Text Size accessibility settings.\n * @default false\n */\n disableFontScaling?: boolean;\n\n /**\n * The content of the component.\n */\n children?: React.ReactNode;\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n * @default 'inherit'\n */\n color?: TypographyColor;\n\n /**\n * The text ellipsis mode.\n * @default 'tail'\n */\n ellipsizeMode?: TextProps['ellipsizeMode'];\n\n /**\n * Internal use only. The hyperlink of the text.\n */\n href?: string;\n\n /**\n * Used to truncate the text with an ellipsis after computing the text\n * layout, including line wrapping, such that the total number of lines\n * does not exceed this number.\n */\n numberOfLines?: TextProps['numberOfLines'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n onPress?: TextProps['onPress'];\n\n /**\n * Lets the user select text, to use the native copy and paste functionality.\n */\n selectable?: boolean;\n\n /**\n * Applies the theme typography styles.\n * @default 'body1'\n */\n variant?: TypographyVariant;\n\n\n /**\n * Callback that is called when the text layout has been calculated.\n */\n onTextLayout?: TextProps['onTextLayout'];\n\n /**\n * Callback that is called when the layout of the Text component changes.\n */\n onLayout?: TextProps['onLayout'];\n}> {}\n"],"mappings":""}
|
|
@@ -20,6 +20,10 @@ export default interface ButtonBaseProps extends OverridableComponentProps<Press
|
|
|
20
20
|
* Function to execute on press. If not set, will cause the ButtonBase to be disabled.
|
|
21
21
|
*/
|
|
22
22
|
onPress?: () => void;
|
|
23
|
+
/**
|
|
24
|
+
* Function to execute on press out.
|
|
25
|
+
*/
|
|
26
|
+
onPressOut?: () => void;
|
|
23
27
|
/**
|
|
24
28
|
* Applied press effect.
|
|
25
29
|
* @default 'opacity'
|
|
@@ -69,5 +69,13 @@ export default interface TypographyProps extends ComponentProps<{
|
|
|
69
69
|
* @default 'body1'
|
|
70
70
|
*/
|
|
71
71
|
variant?: TypographyVariant;
|
|
72
|
+
/**
|
|
73
|
+
* Callback that is called when the text layout has been calculated.
|
|
74
|
+
*/
|
|
75
|
+
onTextLayout?: TextProps['onTextLayout'];
|
|
76
|
+
/**
|
|
77
|
+
* Callback that is called when the layout of the Text component changes.
|
|
78
|
+
*/
|
|
79
|
+
onLayout?: TextProps['onLayout'];
|
|
72
80
|
}> {
|
|
73
81
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fountain-ui/core",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.68",
|
|
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": "aa2719b1aabbc0e44002c1a5e4cd3eb935253473"
|
|
71
71
|
}
|
package/src/Button/Button.tsx
CHANGED
|
@@ -42,6 +42,7 @@ export default function Button(props: ButtonProps) {
|
|
|
42
42
|
fullWidth = false,
|
|
43
43
|
href,
|
|
44
44
|
onPress,
|
|
45
|
+
pressEffect,
|
|
45
46
|
size = 'medium',
|
|
46
47
|
startIcon: startIconProp,
|
|
47
48
|
style: styleProp,
|
|
@@ -116,6 +117,10 @@ export default function Button(props: ButtonProps) {
|
|
|
116
117
|
{ textAlign: 'center' },
|
|
117
118
|
]);
|
|
118
119
|
|
|
120
|
+
const modifiedPressEffect = variant !== 'text' && !pressEffect
|
|
121
|
+
? 'scale'
|
|
122
|
+
: pressEffect;
|
|
123
|
+
|
|
119
124
|
const handlePress = async () => {
|
|
120
125
|
if (disabled) {
|
|
121
126
|
return;
|
|
@@ -136,6 +141,7 @@ export default function Button(props: ButtonProps) {
|
|
|
136
141
|
disabled={disabled}
|
|
137
142
|
onPress={handlePress}
|
|
138
143
|
style={buttonBaseStyle}
|
|
144
|
+
pressEffect={modifiedPressEffect}
|
|
139
145
|
{...otherProps}
|
|
140
146
|
>
|
|
141
147
|
{startIcon}
|
|
@@ -40,6 +40,7 @@ export default function ButtonBase(props: ButtonBaseProps) {
|
|
|
40
40
|
disabled = false,
|
|
41
41
|
disableThrottle = false,
|
|
42
42
|
onPress,
|
|
43
|
+
onPressOut,
|
|
43
44
|
pressEffect = 'opacity',
|
|
44
45
|
pressDelay: pressDelayOrNil,
|
|
45
46
|
style: styleProp,
|
|
@@ -89,8 +90,10 @@ export default function ButtonBase(props: ButtonBaseProps) {
|
|
|
89
90
|
}, [startPressAnimation]);
|
|
90
91
|
|
|
91
92
|
const handlePressOut = useCallback(() => {
|
|
93
|
+
onPressOut && onPressOut();
|
|
94
|
+
|
|
92
95
|
startPressAnimation(false, false);
|
|
93
|
-
}, [startPressAnimation]);
|
|
96
|
+
}, [startPressAnimation, onPressOut]);
|
|
94
97
|
|
|
95
98
|
const animatedStyle = {
|
|
96
99
|
opacity,
|
|
@@ -26,6 +26,11 @@ export default interface ButtonBaseProps extends OverridableComponentProps<Press
|
|
|
26
26
|
*/
|
|
27
27
|
onPress?: () => void;
|
|
28
28
|
|
|
29
|
+
/**
|
|
30
|
+
* Function to execute on press out.
|
|
31
|
+
*/
|
|
32
|
+
onPressOut?: () => void;
|
|
33
|
+
|
|
29
34
|
/**
|
|
30
35
|
* Applied press effect.
|
|
31
36
|
* @default 'opacity'
|
|
@@ -58,6 +58,8 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
|
|
|
58
58
|
selectable,
|
|
59
59
|
style,
|
|
60
60
|
variant = 'body1',
|
|
61
|
+
onLayout,
|
|
62
|
+
onTextLayout,
|
|
61
63
|
} = props;
|
|
62
64
|
|
|
63
65
|
const theme = useTheme();
|
|
@@ -96,6 +98,8 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
|
|
|
96
98
|
onPress={onPress}
|
|
97
99
|
selectable={selectable}
|
|
98
100
|
style={textStyle}
|
|
101
|
+
onLayout={onLayout}
|
|
102
|
+
onTextLayout={onTextLayout}
|
|
99
103
|
/>
|
|
100
104
|
);
|
|
101
105
|
});
|
|
@@ -106,4 +106,15 @@ export default interface TypographyProps extends ComponentProps<{
|
|
|
106
106
|
* @default 'body1'
|
|
107
107
|
*/
|
|
108
108
|
variant?: TypographyVariant;
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* Callback that is called when the text layout has been calculated.
|
|
113
|
+
*/
|
|
114
|
+
onTextLayout?: TextProps['onTextLayout'];
|
|
115
|
+
|
|
116
|
+
/**
|
|
117
|
+
* Callback that is called when the layout of the Text component changes.
|
|
118
|
+
*/
|
|
119
|
+
onLayout?: TextProps['onLayout'];
|
|
109
120
|
}> {}
|