| 1 | {"version":3,"sources":["ToggleButton.tsx"],"names":["React","StyleSheet","withTheme","color","IconButton","ToggleButtonGroupContext","black","white","ToggleButton","icon","size","theme","accessibilityLabel","disabled","style","value","status","onPress","rest","borderRadius","roundness","context","backgroundColor","checked","dark","e","onValueChange","selected","styles","content","borderColor","alpha","rgb","string","create","width","height","margin","ToggleButtonWithTheme"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SACEC,UADF,QAKO,cALP;AAMA,SAASC,SAAT,QAA0B,oBAA1B;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,SAASC,wBAAT,QAAyC,qBAAzC;AACA,SAASC,KAAT,EAAgBC,KAAhB,QAA6B,qBAA7B;;AA2CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAAY,GAAG,QAWR;AAAA,MAXS;AACpBC,IAAAA,IADoB;AAEpBC,IAAAA,IAFoB;AAGpBC,IAAAA,KAHoB;AAIpBC,IAAAA,kBAJoB;AAKpBC,IAAAA,QALoB;AAMpBC,IAAAA,KANoB;AAOpBC,IAAAA,KAPoB;AAQpBC,IAAAA,MARoB;AASpBC,IAAAA,OAToB;AAUpB,OAAGC;AAViB,GAWT;AACX,QAAMC,YAAY,GAAGR,KAAK,CAACS,SAA3B;AAEA,sBACE,oBAAC,wBAAD,CAA0B,QAA1B,QACIC,OAAD,IAAuE;AACtE,QAAIC,eAAJ;AAEA,UAAMC,OAAuB,GAC1BF,OAAO,IAAIA,OAAO,CAACN,KAAR,KAAkBA,KAA9B,IAAwCC,MAAM,KAAK,SADrD;;AAGA,QAAIO,OAAJ,EAAa;AACXD,MAAAA,eAAe,GAAGX,KAAK,CAACa,IAAN,GACd,0BADc,GAEd,oBAFJ;AAGD,KAJD,MAIO;AACLF,MAAAA,eAAe,GAAG,aAAlB;AACD;;AAED,wBACE,oBAAC,UAAD;AACE,MAAA,UAAU,EAAE,KADd;AAEE,MAAA,IAAI,EAAEb,IAFR;AAGE,MAAA,OAAO,EAAGgB,CAAD,IAAwC;AAC/C,YAAIR,OAAJ,EAAa;AACXA,UAAAA,OAAO,CAACQ,CAAD,CAAP;AACD;;AAED,YAAIJ,OAAJ,EAAa;AACXA,UAAAA,OAAO,CAACK,aAAR,CAAsB,CAACH,OAAD,GAAWR,KAAX,GAAmB,IAAzC;AACD;AACF,OAXH;AAYE,MAAA,IAAI,EAAEL,IAZR;AAaE,MAAA,kBAAkB,EAAEE,kBAbtB;AAcE,MAAA,kBAAkB,EAAE;AAAEC,QAAAA,QAAF;AAAYc,QAAAA,QAAQ,EAAEJ;AAAtB,OAdtB;AAeE,MAAA,QAAQ,EAAEV,QAfZ;AAgBE,MAAA,KAAK,EAAE,CACLe,MAAM,CAACC,OADF,EAEL;AACEP,QAAAA,eADF;AAEEH,QAAAA,YAFF;AAGEW,QAAAA,WAAW,EAAE3B,KAAK,CAACQ,KAAK,CAACa,IAAN,GAAajB,KAAb,GAAqBD,KAAtB,CAAL,CACVyB,KADU,CACJ,IADI,EAEVC,GAFU,GAGVC,MAHU;AAHf,OAFK,EAULnB,KAVK;AAhBT,OA4BMI,IA5BN,EADF;AAgCD,GA/CH,CADF;AAmDD,CAjED;;AAmEA,MAAMU,MAAM,GAAG3B,UAAU,CAACiC,MAAX,CAAkB;AAC/BL,EAAAA,OAAO,EAAE;AACPM,IAAAA,KAAK,EAAE,EADA;AAEPC,IAAAA,MAAM,EAAE,EAFD;AAGPC,IAAAA,MAAM,EAAE;AAHD;AADsB,CAAlB,CAAf;AAQA,eAAenC,SAAS,CAACM,YAAD,CAAxB,C,CAEA;;AACA,MAAM8B,qBAAqB,GAAGpC,SAAS,CAACM,YAAD,CAAvC,C,CACA;;AACA,SAAS8B,qBAAqB,IAAI9B,YAAlC","sourcesContent":["import * as React from 'react';\nimport {\n StyleSheet,\n StyleProp,\n ViewStyle,\n GestureResponderEvent,\n} from 'react-native';\nimport { withTheme } from '../../core/theming';\nimport color from 'color';\nimport IconButton from '../IconButton';\nimport { ToggleButtonGroupContext } from './ToggleButtonGroup';\nimport { black, white } from '../../styles/colors';\nimport type { IconSource } from '../Icon';\n\ntype Props = {\n /**\n * Icon to display for the `ToggleButton`.\n */\n icon: IconSource;\n /**\n * Size of the icon.\n */\n size?: number;\n /**\n * Custom text color for button.\n */\n color?: string;\n /**\n * Whether the button is disabled.\n */\n disabled?: boolean;\n /**\n * Accessibility label for the `ToggleButton`. This is read by the screen reader when the user taps the button.\n */\n accessibilityLabel?: string;\n /**\n * Function to execute on press.\n */\n onPress?: (value?: GestureResponderEvent | string) => void;\n /**\n * Value of button.\n */\n value?: string;\n /**\n * Status of button.\n */\n status?: 'checked' | 'unchecked';\n style?: StyleProp<ViewStyle>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\n/**\n * Toggle buttons can be used to group related options. To emphasize groups of related toggle buttons,\n * a group should share a common container.\n *\n * <div class=\"screenshots\">\n * <img class=\"medium\" src=\"screenshots/toggle-button.png\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { ToggleButton } from 'react-native-paper';\n *\n * const ToggleButtonExample = () => {\n * const [status, setStatus] = React.useState('checked');\n *\n * const onButtonToggle = value => {\n * setStatus(status === 'checked' ? 'unchecked' : 'checked');\n * };\n *\n * return (\n * <ToggleButton\n * icon=\"bluetooth\"\n * value=\"bluetooth\"\n * status={status}\n * onPress={onButtonToggle}\n * />\n * );\n * };\n *\n * export default ToggleButtonExample;\n *\n * ```\n */\nconst ToggleButton = ({\n icon,\n size,\n theme,\n accessibilityLabel,\n disabled,\n style,\n value,\n status,\n onPress,\n ...rest\n}: Props) => {\n const borderRadius = theme.roundness;\n\n return (\n <ToggleButtonGroupContext.Consumer>\n {(context: { value: string | null; onValueChange: Function } | null) => {\n let backgroundColor;\n\n const checked: boolean | null =\n (context && context.value === value) || status === 'checked';\n\n if (checked) {\n backgroundColor = theme.dark\n ? 'rgba(255, 255, 255, .12)'\n : 'rgba(0, 0, 0, .08)';\n } else {\n backgroundColor = 'transparent';\n }\n\n return (\n <IconButton\n borderless={false}\n icon={icon}\n onPress={(e?: GestureResponderEvent | string) => {\n if (onPress) {\n onPress(e);\n }\n\n if (context) {\n context.onValueChange(!checked ? value : null);\n }\n }}\n size={size}\n accessibilityLabel={accessibilityLabel}\n accessibilityState={{ disabled, selected: checked }}\n disabled={disabled}\n style={[\n styles.content,\n {\n backgroundColor,\n borderRadius,\n borderColor: color(theme.dark ? white : black)\n .alpha(0.29)\n .rgb()\n .string(),\n },\n style,\n ]}\n {...rest}\n />\n );\n }}\n </ToggleButtonGroupContext.Consumer>\n );\n};\n\nconst styles = StyleSheet.create({\n content: {\n width: 42,\n height: 42,\n margin: 0,\n },\n});\n\nexport default withTheme(ToggleButton);\n\n// @component-docs ignore-next-line\nconst ToggleButtonWithTheme = withTheme(ToggleButton);\n// @component-docs ignore-next-line\nexport { ToggleButtonWithTheme as ToggleButton };\n"]} |