diff options
Diffstat (limited to 'app/components/switch')
-rw-r--r-- | app/components/switch/switch.props.ts | 2 | ||||
-rw-r--r-- | app/components/switch/switch.story.tsx | 53 | ||||
-rw-r--r-- | app/components/switch/switch.tsx | 25 |
3 files changed, 47 insertions, 33 deletions
diff --git a/app/components/switch/switch.props.ts b/app/components/switch/switch.props.ts index 8235457..2549a95 100644 --- a/app/components/switch/switch.props.ts +++ b/app/components/switch/switch.props.ts @@ -1,4 +1,4 @@ -import { StyleProp, ViewStyle } from "react-native" +import { StyleProp, ViewStyle } from 'react-native' export interface SwitchProps { /** diff --git a/app/components/switch/switch.story.tsx b/app/components/switch/switch.story.tsx index 998d1df..bbd29ee 100644 --- a/app/components/switch/switch.story.tsx +++ b/app/components/switch/switch.story.tsx @@ -1,19 +1,19 @@ /* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-color-literals */ -import * as React from "react" -import { View, ViewStyle } from "react-native" -import { storiesOf } from "@storybook/react-native" -import { StoryScreen, Story, UseCase } from "../../../storybook/views" -import { Toggle } from "react-powerplug" -import { Switch } from "./switch" +import * as React from 'react' +import { View, ViewStyle } from 'react-native' +import { storiesOf } from '@storybook/react-native' +import { StoryScreen, Story, UseCase } from '../../../storybook/views' +import { Toggle } from 'react-powerplug' +import { Switch } from './switch' declare let module -const styleArray: ViewStyle[] = [{ borderColor: "#686868" }] +const styleArray: ViewStyle[] = [{ borderColor: '#686868' }] const trackOffStyle: ViewStyle[] = [ - { backgroundColor: "#686868" }, + { backgroundColor: '#686868' }, { height: 80, borderRadius: 0, @@ -21,8 +21,8 @@ const trackOffStyle: ViewStyle[] = [ ] const trackOnStyle: ViewStyle[] = [ { - backgroundColor: "#b1008e", - borderColor: "#686868", + backgroundColor: '#b1008e', + borderColor: '#686868', }, { height: 80, @@ -31,8 +31,8 @@ const trackOnStyle: ViewStyle[] = [ ] const thumbOffStyle: ViewStyle[] = [ { - backgroundColor: "#b1008e", - borderColor: "#686868", + backgroundColor: '#b1008e', + borderColor: '#686868', }, { height: 80, @@ -40,19 +40,22 @@ const thumbOffStyle: ViewStyle[] = [ }, ] const thumbOnStyle: ViewStyle[] = [ - { backgroundColor: "#f0c" }, + { backgroundColor: '#f0c' }, { height: 80, borderRadius: 0, - borderColor: "#686868", + borderColor: '#686868', }, ] -storiesOf("Switch", module) +storiesOf('Switch', module) .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add("Behaviour", () => ( + .add('Behaviour', () => ( <Story> - <UseCase text="The Toggle Switch" usage="Use the switch to represent on/off states."> + <UseCase + text="The Toggle Switch" + usage="Use the switch to represent on/off states." + > <Toggle initial={false}> {({ on, toggle }) => <Switch value={on} onToggle={toggle} />} </Toggle> @@ -65,17 +68,23 @@ storiesOf("Switch", module) </UseCase> </Story> )) - .add("Styling", () => ( + .add('Styling', () => ( <Story> <UseCase text="Custom Styling" usage="Promise me this won't happen."> <Toggle initial={false}> {({ on, toggle }) => ( <View> <Switch - trackOnStyle={{ backgroundColor: "green", borderColor: "black" }} - trackOffStyle={{ backgroundColor: "red", borderColor: "maroon" }} - thumbOnStyle={{ backgroundColor: "cyan" }} - thumbOffStyle={{ backgroundColor: "pink" }} + trackOnStyle={{ + backgroundColor: 'green', + borderColor: 'black', + }} + trackOffStyle={{ + backgroundColor: 'red', + borderColor: 'maroon', + }} + thumbOnStyle={{ backgroundColor: 'cyan' }} + thumbOffStyle={{ backgroundColor: 'pink' }} value={on} onToggle={toggle} /> diff --git a/app/components/switch/switch.tsx b/app/components/switch/switch.tsx index 0813747..bad81fc 100644 --- a/app/components/switch/switch.tsx +++ b/app/components/switch/switch.tsx @@ -1,7 +1,12 @@ -import React from "react" -import { ViewStyle, Animated, Easing, TouchableWithoutFeedback } from "react-native" -import { color } from "../../theme" -import { SwitchProps } from "./switch.props" +import React from 'react' +import { + ViewStyle, + Animated, + Easing, + TouchableWithoutFeedback, +} from 'react-native' +import { color } from '../../theme' +import { SwitchProps } from './switch.props' // dimensions const THUMB_SIZE = 30 @@ -15,7 +20,7 @@ const BORDER_RADIUS = (THUMB_SIZE * 3) / 4 const ON_COLOR = color.primary const OFF_COLOR = color.palette.offWhite const BORDER_ON_COLOR = ON_COLOR -const BORDER_OFF_COLOR = "rgba(0, 0, 0, 0.1)" +const BORDER_OFF_COLOR = 'rgba(0, 0, 0, 0.1)' // animation const DURATION = 250 @@ -31,7 +36,7 @@ const TRACK = { // the thumb always has these props const THUMB: ViewStyle = { - position: "absolute", + position: 'absolute', width: THUMB_SIZE, height: THUMB_SIZE, borderColor: BORDER_OFF_COLOR, @@ -71,10 +76,10 @@ export function Switch(props: SwitchProps) { } }, [props.value]) - const handlePress = React.useMemo(() => () => props.onToggle && props.onToggle(!props.value), [ - props.onToggle, - props.value, - ]) + const handlePress = React.useMemo( + () => () => props.onToggle && props.onToggle(!props.value), + [props.onToggle, props.value], + ) if (!timer) { return null |