UNPKG

9.83 kBSource Map (JSON)View Raw
1{"version":3,"sources":["CheckboxAndroid.tsx"],"names":["React","Animated","View","StyleSheet","color","MaterialCommunityIcon","TouchableRipple","withTheme","ANIMATION_DURATION","CheckboxAndroid","status","theme","disabled","onPress","testID","rest","current","scaleAnim","useRef","Value","isFirstRendering","animation","scale","useEffect","checked","sequence","timing","toValue","duration","useNativeDriver","start","indeterminate","checkedColor","colors","accent","uncheckedColor","text","alpha","dark","rgb","string","rippleColor","checkboxColor","fade","borderWidth","interpolate","inputRange","outputRange","icon","styles","container","transform","absoluteFill","fillContainer","fill","borderColor","displayName","create","borderRadius","width","height","padding","alignItems","justifyContent","CheckboxAndroidWithTheme"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Animated, View, StyleSheet } from 'react-native';\nimport color from 'color';\nimport MaterialCommunityIcon from '../MaterialCommunityIcon';\nimport TouchableRipple from '../TouchableRipple/TouchableRipple';\nimport { withTheme } from '../../core/theming';\nimport type { $RemoveChildren } from '../../types';\n\ntype Props = $RemoveChildren<typeof TouchableRipple> & {\n /**\n * Status of checkbox.\n */\n status: 'checked' | 'unchecked' | 'indeterminate';\n /**\n * Whether checkbox is disabled.\n */\n disabled?: boolean;\n /**\n * Function to execute on press.\n */\n onPress?: () => void;\n /**\n * Custom color for unchecked checkbox.\n */\n uncheckedColor?: string;\n /**\n * Custom color for checkbox.\n */\n color?: string;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n /**\n * testID to be used on tests.\n */\n testID?: string;\n};\n\n// From https://material.io/design/motion/speed.html#duration\nconst ANIMATION_DURATION = 100;\n\n/**\n * Checkboxes allow the selection of multiple options from a set.\n * This component follows platform guidelines for Android, but can be used\n * on any platform.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img src=\"screenshots/checkbox-enabled.android.png\" />\n * <figcaption>Enabled</figcaption>\n * </figure>\n * <figure>\n * <img src=\"screenshots/checkbox-disabled.android.png\" />\n * <figcaption>Disabled</figcaption>\n * </figure>\n * </div>\n */\nconst CheckboxAndroid = ({\n status,\n theme,\n disabled,\n onPress,\n testID,\n ...rest\n}: Props) => {\n const { current: scaleAnim } = React.useRef<Animated.Value>(\n new Animated.Value(1)\n );\n const isFirstRendering = React.useRef<boolean>(true);\n\n const {\n animation: { scale },\n } = theme;\n\n React.useEffect(() => {\n // Do not run animation on very first rendering\n if (isFirstRendering.current) {\n isFirstRendering.current = false;\n return;\n }\n\n const checked = status === 'checked';\n\n Animated.sequence([\n Animated.timing(scaleAnim, {\n toValue: 0.85,\n duration: checked ? ANIMATION_DURATION * scale : 0,\n useNativeDriver: false,\n }),\n Animated.timing(scaleAnim, {\n toValue: 1,\n duration: checked\n ? ANIMATION_DURATION * scale\n : ANIMATION_DURATION * scale * 1.75,\n useNativeDriver: false,\n }),\n ]).start();\n }, [status, scaleAnim, scale]);\n\n const checked = status === 'checked';\n const indeterminate = status === 'indeterminate';\n const checkedColor = rest.color || theme.colors.accent;\n const uncheckedColor =\n rest.uncheckedColor ||\n color(theme.colors.text)\n .alpha(theme.dark ? 0.7 : 0.54)\n .rgb()\n .string();\n\n let rippleColor, checkboxColor;\n\n if (disabled) {\n rippleColor = color(theme.colors.text).alpha(0.16).rgb().string();\n checkboxColor = theme.colors.disabled;\n } else {\n rippleColor = color(checkedColor).fade(0.32).rgb().string();\n checkboxColor = checked ? checkedColor : uncheckedColor;\n }\n\n const borderWidth = scaleAnim.interpolate({\n inputRange: [0.8, 1],\n outputRange: [7, 0],\n });\n\n const icon = indeterminate\n ? 'minus-box'\n : checked\n ? 'checkbox-marked'\n : 'checkbox-blank-outline';\n\n return (\n <TouchableRipple\n {...rest}\n borderless\n rippleColor={rippleColor}\n onPress={onPress}\n disabled={disabled}\n // @ts-expect-error We keep old a11y props for backwards compat with old RN versions\n accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}\n accessibilityComponentType=\"button\"\n accessibilityRole=\"checkbox\"\n accessibilityState={{ disabled, checked }}\n accessibilityLiveRegion=\"polite\"\n style={styles.container}\n testID={testID}\n >\n <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>\n <MaterialCommunityIcon\n allowFontScaling={false}\n name={icon}\n size={24}\n color={checkboxColor}\n direction=\"ltr\"\n />\n <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>\n <Animated.View\n style={[\n styles.fill,\n { borderColor: checkboxColor },\n { borderWidth },\n ]}\n />\n </View>\n </Animated.View>\n </TouchableRipple>\n );\n};\n\nCheckboxAndroid.displayName = 'Checkbox.Android';\n\nconst styles = StyleSheet.create({\n container: {\n borderRadius: 18,\n width: 36,\n height: 36,\n padding: 6,\n },\n fillContainer: {\n alignItems: 'center',\n justifyContent: 'center',\n },\n fill: {\n height: 14,\n width: 14,\n },\n});\n\nexport default withTheme(CheckboxAndroid);\n\n// @component-docs ignore-next-line\nconst CheckboxAndroidWithTheme = withTheme(CheckboxAndroid);\n// @component-docs ignore-next-line\nexport { CheckboxAndroidWithTheme as CheckboxAndroid };\n"]}
\No newline at end of file