UNPKG

5.83 kBSource Map (JSON)View Raw
1{"version":3,"sources":["Switch.tsx"],"names":["React","grey400","grey800","grey50","white","black","NativeModules","Platform","Switch","NativeSwitch","setColor","withTheme","version","PlatformConstants","reactNativeVersion","undefined","value","disabled","onValueChange","color","theme","rest","checkedColor","colors","accent","onTintColor","OS","dark","alpha","rgb","string","thumbTintColor","props","major","minor","activeTrackColor","thumbColor","activeThumbColor","trackColor","true","false"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,OAAT,EAAkBC,OAAlB,EAA2BC,MAA3B,EAAmCC,KAAnC,EAA0CC,KAA1C,QAAuD,kBAAvD;AACA,SACEC,aADF,EAEEC,QAFF,EAIEC,MAAM,IAAIC,YAJZ,QAMO,cANP;AAOA,OAAOC,QAAP,MAAqB,OAArB;AACA,SAASC,SAAT,QAA0B,iBAA1B;AAEA,MAAMC,OAAO,GAAGN,aAAa,CAACO,iBAAd,GACZP,aAAa,CAACO,iBAAd,CAAgCC,kBADpB,GAEZC,SAFJ;;AA4BA;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;AACA;AACA;AACA;AACA,MAAMP,MAAM,GAAG,QAOF;AAAA,MAPG;AACdQ,IAAAA,KADc;AAEdC,IAAAA,QAFc;AAGdC,IAAAA,aAHc;AAIdC,IAAAA,KAJc;AAKdC,IAAAA,KALc;AAMd,OAAGC;AANW,GAOH;AACX,QAAMC,YAAY,GAAGH,KAAK,IAAIC,KAAK,CAACG,MAAN,CAAaC,MAA3C;AAEA,QAAMC,WAAW,GACflB,QAAQ,CAACmB,EAAT,KAAgB,KAAhB,GACIJ,YADJ,GAEIL,QAAQ,GACRG,KAAK,CAACO,IAAN,GACEjB,QAAQ,CAACN,KAAD,CAAR,CAAgBwB,KAAhB,CAAsB,GAAtB,EAA2BC,GAA3B,GAAiCC,MAAjC,EADF,GAEEpB,QAAQ,CAACL,KAAD,CAAR,CAAgBuB,KAAhB,CAAsB,IAAtB,EAA4BC,GAA5B,GAAkCC,MAAlC,EAHM,GAIRpB,QAAQ,CAACY,YAAD,CAAR,CAAuBM,KAAvB,CAA6B,GAA7B,EAAkCC,GAAlC,GAAwCC,MAAxC,EAPN;AASA,QAAMC,cAAc,GAClBxB,QAAQ,CAACmB,EAAT,KAAgB,KAAhB,GACIX,SADJ,GAEIE,QAAQ,GACRG,KAAK,CAACO,IAAN,GACEzB,OADF,GAEED,OAHM,GAIRe,KAAK,GACLM,YADK,GAELF,KAAK,CAACO,IAAN,GACA1B,OADA,GAEAE,MAXN;AAaA,QAAM6B,KAAK,GACTpB,OAAO,IAAIA,OAAO,CAACqB,KAAR,KAAkB,CAA7B,IAAkCrB,OAAO,CAACsB,KAAR,IAAiB,EAAnD,GACI;AACET,IAAAA,WADF;AAEEM,IAAAA;AAFF,GADJ,GAKIxB,QAAQ,CAACmB,EAAT,KAAgB,KAAhB,GACA;AACES,IAAAA,gBAAgB,EAAEV,WADpB;AAEEW,IAAAA,UAAU,EAAEL,cAFd;AAGEM,IAAAA,gBAAgB,EAAEf;AAHpB,GADA,GAMA;AACEc,IAAAA,UAAU,EAAEL,cADd;AAEEO,IAAAA,UAAU,EAAE;AACVC,MAAAA,IAAI,EAAEd,WADI;AAEVe,MAAAA,KAAK,EAAE;AAFG;AAFd,GAZN;AAoBA,sBACE,oBAAC,YAAD;AACE,IAAA,KAAK,EAAExB,KADT;AAEE,IAAA,QAAQ,EAAEC,QAFZ;AAGE,IAAA,aAAa,EAAEA,QAAQ,GAAGF,SAAH,GAAeG;AAHxC,KAIMc,KAJN,EAKMX,IALN,EADF;AASD,CA7DD;;AA+DA,eAAeV,SAAS,CAACH,MAAD,CAAxB","sourcesContent":["import * as React from 'react';\nimport { grey400, grey800, grey50, white, black } from '../styles/colors';\nimport {\n NativeModules,\n Platform,\n StyleProp,\n Switch as NativeSwitch,\n ViewStyle,\n} from 'react-native';\nimport setColor from 'color';\nimport { withTheme } from '../core/theming';\n\nconst version = NativeModules.PlatformConstants\n ? NativeModules.PlatformConstants.reactNativeVersion\n : undefined;\n\ntype Props = React.ComponentPropsWithRef<typeof NativeSwitch> & {\n /**\n * Disable toggling the switch.\n */\n disabled?: boolean;\n /**\n * Value of the switch, true means 'on', false means 'off'.\n */\n value?: boolean;\n /**\n * Custom color for switch.\n */\n color?: string;\n /**\n * Callback called with the new value when it changes.\n */\n onValueChange?: Function;\n style?: StyleProp<ViewStyle>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n};\n\n/**\n * Switch is a visual toggle between two mutually exclusive states — on and off.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img src=\"screenshots/switch-enabled.android.png\" />\n * <figcaption>Android (enabled)</figcaption>\n * </figure>\n * <figure>\n * <img src=\"screenshots/switch-disabled.android.png\" />\n * <figcaption>Android (disabled)</figcaption>\n * </figure>\n * <figure>\n * <img src=\"screenshots/switch-enabled.ios.png\" />\n * <figcaption>iOS (enabled)</figcaption>\n * </figure>\n * <figure>\n * <img src=\"screenshots/switch-disabled.ios.png\" />\n * <figcaption>iOS (disabled)</figcaption>\n * </figure>\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Switch } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [isSwitchOn, setIsSwitchOn] = React.useState(false);\n *\n * const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);\n *\n * return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;\n * };\n *\n * export default MyComponent;\n * ```\n */\nconst Switch = ({\n value,\n disabled,\n onValueChange,\n color,\n theme,\n ...rest\n}: Props) => {\n const checkedColor = color || theme.colors.accent;\n\n const onTintColor =\n Platform.OS === 'ios'\n ? checkedColor\n : disabled\n ? theme.dark\n ? setColor(white).alpha(0.1).rgb().string()\n : setColor(black).alpha(0.12).rgb().string()\n : setColor(checkedColor).alpha(0.5).rgb().string();\n\n const thumbTintColor =\n Platform.OS === 'ios'\n ? undefined\n : disabled\n ? theme.dark\n ? grey800\n : grey400\n : value\n ? checkedColor\n : theme.dark\n ? grey400\n : grey50;\n\n const props =\n version && version.major === 0 && version.minor <= 56\n ? {\n onTintColor,\n thumbTintColor,\n }\n : Platform.OS === 'web'\n ? {\n activeTrackColor: onTintColor,\n thumbColor: thumbTintColor,\n activeThumbColor: checkedColor,\n }\n : {\n thumbColor: thumbTintColor,\n trackColor: {\n true: onTintColor,\n false: '',\n },\n };\n\n return (\n <NativeSwitch\n value={value}\n disabled={disabled}\n onValueChange={disabled ? undefined : onValueChange}\n {...props}\n {...rest}\n />\n );\n};\n\nexport default withTheme(Switch);\n"]}
\No newline at end of file