2021-02-20 17:07:10 +01:00
|
|
|
import React, { useCallback } from 'react';
|
|
|
|
import { PressableProps, Pressable, PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
|
2021-02-19 18:53:08 +01:00
|
|
|
|
|
|
|
export interface PressableOpacityProps extends PressableProps {
|
|
|
|
/**
|
|
|
|
* The opacity to use when `disabled={true}`
|
|
|
|
*
|
|
|
|
* @default 1
|
|
|
|
*/
|
|
|
|
disabledOpacity?: number;
|
|
|
|
/**
|
|
|
|
* The opacity to animate to when the user presses the button
|
|
|
|
*
|
|
|
|
* @default 0.2
|
|
|
|
*/
|
|
|
|
activeOpacity?: number;
|
|
|
|
}
|
|
|
|
|
2021-02-20 17:07:10 +01:00
|
|
|
export type StyleType = (state: PressableStateCallbackType) => StyleProp<ViewStyle>;
|
2021-02-19 18:53:08 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* A Pressable component that lowers opacity when in pressed state. Uses the JS Pressability API.
|
|
|
|
*/
|
|
|
|
export const PressableOpacity = ({
|
|
|
|
style,
|
|
|
|
disabled = false,
|
|
|
|
disabledOpacity = 1,
|
|
|
|
activeOpacity = 0.2,
|
|
|
|
...passThroughProps
|
|
|
|
}: PressableOpacityProps): React.ReactElement => {
|
|
|
|
const getOpacity = useCallback(
|
|
|
|
(pressed: boolean) => {
|
|
|
|
if (disabled) {
|
|
|
|
return disabledOpacity;
|
|
|
|
} else {
|
|
|
|
if (pressed) return activeOpacity;
|
|
|
|
else return 1;
|
|
|
|
}
|
|
|
|
},
|
2021-02-20 17:07:10 +01:00
|
|
|
[activeOpacity, disabled, disabledOpacity],
|
2021-02-19 18:53:08 +01:00
|
|
|
);
|
2021-02-20 17:07:10 +01:00
|
|
|
const _style = useCallback<StyleType>(({ pressed }) => [style as ViewStyle, { opacity: getOpacity(pressed) }], [getOpacity, style]);
|
2021-02-19 18:53:08 +01:00
|
|
|
|
|
|
|
return <Pressable style={_style} disabled={disabled} {...passThroughProps} />;
|
|
|
|
};
|
|
|
|
|
|
|
|
// Fallback implementation using TouchableOpacity:
|
|
|
|
// export default function PressableOpacity(props: TouchableOpacityProps & { children?: React.ReactNode }): React.ReactElement {
|
|
|
|
// return <TouchableOpacity delayPressIn={0} {...props} />;
|
|
|
|
// }
|