diff --git a/src/framework/ui/common/mapping.json b/src/framework/ui/common/mapping.json index b3bd0b7ac..e6335b9f3 100644 --- a/src/framework/ui/common/mapping.json +++ b/src/framework/ui/common/mapping.json @@ -2082,19 +2082,34 @@ "borderWidth": { "type": "number" }, + "borderColor": { + "type": "string" + }, + "backgroundColor": { + "type": "string" + }, "offsetValue": { "type": "number" }, - "tintBackgroundColor": { - "type": "string" + "thumbWidth": { + "type": "number" }, - "borderColor": { - "type": "string" + "thumbHeight": { + "type": "number" + }, + "thumbBorderRadius": { + "type": "number" }, "thumbBackgroundColor": { "type": "string" }, - "highlightBackgroundColor": { + "iconWidth": { + "type": "number" + }, + "iconHeight": { + "type": "number" + }, + "iconTintColor": { "type": "string" }, "highlightWidth": { @@ -2105,6 +2120,9 @@ }, "highlightBorderRadius": { "type": "number" + }, + "highlightBackgroundColor": { + "type": "string" } }, "appearances": { @@ -2131,6 +2149,9 @@ } }, "size": { + "tiny": { + "default": false + }, "small": { "default": false }, @@ -2139,6 +2160,9 @@ }, "large": { "default": false + }, + "giant": { + "default": false } } }, @@ -2163,69 +2187,163 @@ "appearances": { "default": { "mapping": { - "offsetValue": 20, - "thumbBackgroundColor": "#ffffff", - "highlightBackgroundColor": "transparent", + "borderColor": "color-basic-500", + "backgroundColor": "color-basic-300", + "thumbBackgroundColor": "color-white", + "highlightBackgroundColor": "opacity-transparent", "state": { "active": { - "highlightBackgroundColor": "#e5e7ea" + "borderColor": "color-basic-600", + "highlightBackgroundColor": "color-basic-200" }, "disabled": { - "borderColor": "gray-dark", - "tintBackgroundColor": "gray-light" + "borderColor": "color-basic-500", + "backgroundColor": "color-basic-300" + }, + "checked.disabled": { + "borderColor": "color-basic-400", + "iconTintColor": "color-basic-400" } } }, "variantGroups": { "status": { "primary": { - "tintBackgroundColor": "#d9e4ff", - "borderColor": "blue-primary" + "iconTintColor": "color-primary-500", + "state": { + "checked": { + "borderColor": "color-primary-500", + "backgroundColor": "color-primary-500" + }, + "checked.active": { + "borderColor": "color-primary-600" + } + } }, "success": { - "tintBackgroundColor": "#b3ffd6", - "borderColor": "#00e096" + "iconTintColor": "color-success-500", + "state": { + "checked": { + "borderColor": "color-success-500", + "backgroundColor": "color-success-500" + }, + "checked.active": { + "borderColor": "color-success-600" + } + } }, "info": { - "tintBackgroundColor": "#c7e2ff", - "borderColor": "#0095ff" + "iconTintColor": "color-info-500", + "state": { + "checked": { + "borderColor": "color-info-500", + "backgroundColor": "color-info-500" + }, + "checked.active": { + "borderColor": "color-info-600" + } + } }, "warning": { - "tintBackgroundColor": "#fff1c2", - "borderColor": "#ffaa00" + "iconTintColor": "color-warning-500", + "state": { + "checked": { + "borderColor": "color-warning-500", + "backgroundColor": "color-warning-500" + }, + "checked.active": { + "borderColor": "color-warning-600" + } + } }, "danger": { - "tintBackgroundColor": "#FFD6D9", - "borderColor": "pink-primary" + "iconTintColor": "color-danger-500", + "state": { + "checked": { + "borderColor": "color-danger-500", + "backgroundColor": "color-danger-500" + }, + "checked.active": { + "borderColor": "color-danger-600" + } + } } }, "size": { + "tiny": { + "width": 32, + "height": 20, + "borderRadius": 10, + "borderWidth": 1.5, + "thumbWidth": 18, + "thumbHeight": 18, + "thumbBorderRadius": 9, + "iconWidth": 9, + "iconHeight": 9, + "highlightWidth": 44, + "highlightHeight": 32, + "highlightBorderRadius": 16, + "offsetValue": 12 + }, "small": { "width": 38, - "height": 22, - "borderRadius": 11, - "borderWidth": 0.5, - "highlightWidth": 48, - "highlightHeight": 32, - "highlightBorderRadius": 16 + "height": 24, + "borderRadius": 12, + "borderWidth": 1.5, + "thumbWidth": 22, + "thumbHeight": 22, + "thumbBorderRadius": 11, + "iconWidth": 11, + "iconHeight": 11, + "highlightWidth": 50, + "highlightHeight": 36, + "highlightBorderRadius": 18, + "offsetValue": 16 }, "medium": { "width": 52, "height": 32, "borderRadius": 16, "borderWidth": 1.5, - "highlightWidth": 62, - "highlightHeight": 42, - "highlightBorderRadius": 21 + "thumbWidth": 30, + "thumbHeight": 30, + "thumbBorderRadius": 15, + "iconWidth": 15, + "iconHeight": 15, + "highlightWidth": 64, + "highlightHeight": 44, + "highlightBorderRadius": 22, + "offsetValue": 20 }, "large": { - "width": 72, - "height": 42, - "borderRadius": 21, + "width": 64, + "height": 40, + "borderRadius": 20, "borderWidth": 2, - "highlightWidth": 82, + "thumbWidth": 36, + "thumbHeight": 36, + "thumbBorderRadius": 18, + "iconWidth": 18, + "iconHeight": 18, + "highlightWidth": 76, "highlightHeight": 52, - "highlightBorderRadius": 26 + "highlightBorderRadius": 26, + "offsetValue": 24 + }, + "giant": { + "width": 76, + "height": 48, + "borderRadius": 24, + "borderWidth": 2, + "thumbWidth": 44, + "thumbHeight": 44, + "thumbBorderRadius": 22, + "iconWidth": 22, + "iconHeight": 22, + "highlightWidth": 88, + "highlightHeight": 60, + "highlightBorderRadius": 30, + "offsetValue": 28 } } } diff --git a/src/framework/ui/toggle/toggle.component.tsx b/src/framework/ui/toggle/toggle.component.tsx index 6329c0818..b62bbee9d 100644 --- a/src/framework/ui/toggle/toggle.component.tsx +++ b/src/framework/ui/toggle/toggle.component.tsx @@ -10,6 +10,7 @@ import { GestureResponderEvent, PanResponderGestureState, TouchableOpacity, + PanResponderCallbacks, } from 'react-native'; import { StyledComponentProps, @@ -19,281 +20,270 @@ import { import { CheckMark } from '../drawable/checkmark/checkmark.component'; interface ToggleComponentProps { + checked?: boolean; disabled?: boolean; - onValueChange?: (value: boolean) => void; - value?: boolean; - appearance?: string; status?: string; size?: string; + onChange?: (checked: boolean) => void; } export type Props = ToggleComponentProps & StyledComponentProps & ViewProps; -export class Toggle extends React.Component { +export class Toggle extends React.Component implements PanResponderCallbacks { - static defaultProps = { - disabled: false, - value: false, - }; - - thumbAnimation: Animated.Value; - switchAnimation: Animated.Value; - ellipseAnimation: Animated.Value; - switchAnimationActive: boolean; - panResponder: PanResponderInstance; + private panResponder: PanResponderInstance; + private thumbWidthAnimation: Animated.Value; + private thumbTranslateAnimation: Animated.Value; + private ellipseScaleAnimation: Animated.Value; + private thumbTranslateAnimationActive: boolean; constructor(props: Props) { super(props); - const thumbSize: number = props.themedStyle.height - (props.themedStyle.borderWidth * 2); - this.thumbAnimation = new Animated.Value(thumbSize); - this.switchAnimation = new Animated.Value(0); - this.ellipseAnimation = new Animated.Value(props.value ? 0.01 : 1.0); - this.switchAnimationActive = false; - - this.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: this.onStartShouldSetPanResponder, - onStartShouldSetPanResponderCapture: this.onStartShouldSetPanResponderCapture, - onMoveShouldSetPanResponder: this.onMoveShouldSetPanResponder, - onMoveShouldSetPanResponderCapture: this.onMoveShouldSetPanResponderCapture, - onPanResponderTerminationRequest: this.onPanResponderTerminationRequest, - onPanResponderGrant: () => this.onPanResponderGrant(thumbSize), - onPanResponderMove: this.onPanResponderMove, - onPanResponderRelease: (evt: GestureResponderEvent, gestureState: PanResponderGestureState) => - this.onPanResponderRelease(evt, gestureState, thumbSize), - }); - } + const { checked, themedStyle } = props; - private onPressIn: () => void = (): void => { - this.props.dispatch([Interaction.ACTIVE]); - }; - - private onPressOut: () => void = (): void => { - this.props.dispatch([]); - }; + this.thumbWidthAnimation = new Animated.Value(themedStyle.thumbWidth); + this.thumbTranslateAnimation = new Animated.Value(0); + this.ellipseScaleAnimation = new Animated.Value(checked ? 0.01 : 1.0); + this.thumbTranslateAnimationActive = false; - private onValueChange = (): void => { - if (this.props.onValueChange) { - this.props.onValueChange(!this.props.value); - } - }; + this.panResponder = PanResponder.create(this); + } - private onStartShouldSetPanResponder: () => boolean = (): boolean => { + public onStartShouldSetPanResponder = (): boolean => { return true; }; - private onStartShouldSetPanResponderCapture: () => boolean = (): boolean => { + public onStartShouldSetPanResponderCapture = (): boolean => { return true; }; - private onMoveShouldSetPanResponder: () => boolean = (): boolean => { + public onMoveShouldSetPanResponder = (): boolean => { return true; }; - private onMoveShouldSetPanResponderCapture: () => boolean = (): boolean => { + public onMoveShouldSetPanResponderCapture = (): boolean => { return true; }; - private onPanResponderTerminationRequest: () => boolean = (): boolean => { + public onPanResponderTerminationRequest = (): boolean => { return false; }; - private onPanResponderGrant: (size: number) => void = (thumbSize: number): void => { - this.onPressIn(); - if (this.props.disabled) { + public onPanResponderGrant = () => { + const { checked, disabled, themedStyle } = this.props; + + if (disabled) { return; } - if (this.switchAnimationActive) { - this.switchAnimationActive = false; + + this.onPressIn(); + + if (this.thumbTranslateAnimationActive) { + this.thumbTranslateAnimationActive = false; this.stopAnimations(); return; } - this.animateThumb(thumbSize * 1.2); - this.animateEllipse(this.props.value ? 1 : 0.01); + + this.animateThumbWidth(themedStyle.thumbWidth * 1.2); + this.animateEllipseScale(checked ? 1 : 0.01); }; - private onPanResponderMove: () => boolean = (): boolean => { + public onPanResponderMove: () => boolean = (): boolean => { return true; }; - private onPanResponderRelease = (evt: GestureResponderEvent, - gestureState: PanResponderGestureState, - thumbSize: number): void => { + public onPanResponderRelease = (e: GestureResponderEvent, gestureState: PanResponderGestureState) => { + const { checked, disabled, themedStyle } = this.props; - if (!this.props.disabled) { - const propValue = this.props.value; - if ((!propValue && gestureState.dx > -5) || (propValue && gestureState.dx < 5)) { - this.toggle(this.onValueChange, thumbSize); + if (!disabled) { + if ((!checked && gestureState.dx > -5) || (checked && gestureState.dx < 5)) { + this.toggle(this.onPress); } else { - this.animateEllipse(propValue ? 0.01 : 1); + this.animateEllipseScale(checked ? 0.01 : 1); } } - this.animateThumb(thumbSize); + + this.animateThumbWidth(themedStyle.thumbWidth); this.onPressOut(); }; + private onPressIn = () => { + this.props.dispatch([Interaction.ACTIVE]); + }; + + private onPressOut = () => { + this.props.dispatch([]); + }; + + private onPress = () => { + if (this.props.onChange) { + this.props.onChange(!this.props.checked); + } + }; + private getComponentStyle = (style: StyleType): StyleType => { - const thumbComponentSize: number = style.height - (style.borderWidth * 2); + const { checked, disabled } = this.props; + + const { + highlightWidth, + highlightHeight, + highlightBorderRadius, + highlightBackgroundColor, + thumbWidth, + thumbHeight, + thumbBorderRadius, + thumbBackgroundColor, + iconWidth, + iconHeight, + iconTintColor, + offsetValue, + backgroundColor, + borderColor, + ...containerParameters + } = style; + + const interpolatedBackgroundColor: Animated.AnimatedDiffClamp = this.getInterpolatedColor( + backgroundColor, + borderColor, + ); + + const interpolatedIconColor: Animated.AnimatedDiffClamp = this.getInterpolatedColor( + thumbBackgroundColor, + iconTintColor, + ); + + const thumbScale: Animated.AnimatedDiffClamp = this.animateThumbScale(offsetValue); return { + container: { + ...styles.container, + }, componentContainer: { - // FIXME: until the params parser will be implemented - ...style, + borderColor: borderColor, + backgroundColor: interpolatedBackgroundColor, + ...containerParameters, + ...styles.componentContainer, }, - componentDisabledBox: { - width: style.width, - height: this.props.disabled ? style.height : 0, - backgroundColor: style.tintBackgroundColor, - borderRadius: style.width / 2, + highlight: { + width: highlightWidth, + height: highlightHeight, + borderRadius: highlightBorderRadius, + backgroundColor: highlightBackgroundColor, + ...styles.highlight, }, - componentEllipse: { - width: style.width - (style.borderWidth * 2), - height: style.height - (style.borderWidth * 2), + ellipse: { + width: containerParameters.width - (containerParameters.borderWidth * 2), + height: containerParameters.height - (containerParameters.borderWidth * 2), borderRadius: (style.height - (style.borderWidth * 2)) / 2, + backgroundColor: interpolatedBackgroundColor, + transform: [{ scale: checked ? thumbScale : this.ellipseScaleAnimation }], + ...styles.ellipse, }, - componentThumb: { - height: thumbComponentSize, - width: thumbComponentSize, - borderWidth: style.borderWidth, - borderRadius: thumbComponentSize / 2, - marginHorizontal: 1.5, + thumb: { + alignSelf: checked ? 'flex-end' : 'flex-start', + width: this.thumbWidthAnimation, + height: thumbHeight, + borderRadius: thumbBorderRadius, + backgroundColor: thumbBackgroundColor, + elevation: disabled ? 0 : 5, + transform: [{ translateX: this.thumbTranslateAnimation }], + ...styles.thumb, }, - highlight: { - backgroundColor: style.highlightColor, - width: style.highlightWidth, - height: style.highlightHeight, - borderRadius: style.highlightBorderRadius, - }, - switchOffsetValue: style.offsetValue, - thumbComponentSize: thumbComponentSize, - colors: { - onTint: style.borderColor, - thumb: style.thumbBackgroundColor, - tint: style.tintBackgroundColor, - }, - checkMark: { - width: thumbComponentSize / 2, - height: thumbComponentSize / 2, + icon: { + width: style.iconWidth, + height: style.iconHeight, + backgroundColor: interpolatedIconColor, }, }; }; - private animateSwitch = (value: boolean, callback: () => void = () => null): void => { - this.switchAnimationActive = true; - Animated.timing( - this.switchAnimation, - { - toValue: value ? 20 : -20, - duration: 200, - easing: Easing.bezier(0.65, 0.12, 0.09, 1.26), - }, - ).start(() => { - this.switchAnimationActive = false; + private animateThumbTranslate = (value: number, callback: () => void = () => null) => { + this.thumbTranslateAnimationActive = true; + + Animated.timing(this.thumbTranslateAnimation, { + toValue: value, + duration: 150, + easing: Easing.linear, + }).start(() => { + this.thumbTranslateAnimationActive = false; callback(); }); }; - private animateThumb = (value: number, callback: () => void = () => null): void => { - Animated.timing(this.thumbAnimation, { + private animateThumbWidth = (value: number, callback: () => void = () => null) => { + Animated.timing(this.thumbWidthAnimation, { toValue: value, duration: 150, easing: Easing.linear, }).start(callback); }; - private animateEllipse: (value: number) => void = (value: number): void => { - Animated.timing(this.ellipseAnimation, { + private animateEllipseScale = (value: number, callback: () => void = () => null) => { + Animated.timing(this.ellipseScaleAnimation, { toValue: value, duration: 200, easing: Easing.linear, - }).start(); + }).start(callback); }; - private stopAnimations(): void { - const value: number = this.props.value ? 0.01 : 1; - Animated.timing(this.switchAnimation, { toValue: value }).stop(); - Animated.timing(this.ellipseAnimation, { toValue: value }).stop(); - Animated.timing(this.thumbAnimation, { toValue: value }).stop(); - this.ellipseAnimation.setValue(value); - } + private animateThumbScale = (value: number): Animated.AnimatedDiffClamp => { + return this.thumbTranslateAnimation.interpolate({ + inputRange: [-value, 0], + outputRange: [1, 0.01], + }); + }; + + private stopAnimations = () => { + const value: number = this.props.checked ? 0.01 : 1; + + this.thumbTranslateAnimation.stopAnimation(); + this.ellipseScaleAnimation.stopAnimation(); + this.thumbWidthAnimation.stopAnimation(); + + this.ellipseScaleAnimation.setValue(value); + }; + + private toggle = (callback = (nextValue: boolean) => null) => { + const { checked, themedStyle } = this.props; - private toggle = (callback = (value: boolean) => null, thumbSize: number): void => { - const toValue = !this.props.value; - this.animateSwitch(toValue, () => { - this.switchAnimation.setValue(0); - callback(toValue); + const value: number = checked ? -themedStyle.offsetValue : themedStyle.offsetValue; + + this.animateThumbTranslate(value, () => { + this.thumbTranslateAnimation.setValue(0); + callback(!checked); }); - this.animateThumb(thumbSize); + + this.animateThumbWidth(this.props.themedStyle.thumbWidth); }; - private getInterpolatedColor = (offsetValue: number, - outputColorStart: string, - outputColorEnd: string): Animated.AnimatedDiffClamp => { + private getInterpolatedColor = (startColor: string, endColor: string): Animated.AnimatedDiffClamp => { + const { checked, themedStyle } = this.props; - return this.switchAnimation.interpolate({ - inputRange: this.props.value ? [-offsetValue, 0] : [0, offsetValue], - outputRange: [ - outputColorStart, - outputColorEnd, - ], + return this.thumbTranslateAnimation.interpolate({ + inputRange: checked ? [-themedStyle.offsetValue, 0] : [0, themedStyle.offsetValue], + outputRange: [startColor, endColor], }); }; public render(): React.ReactElement { - const { style, themedStyle, disabled, value } = this.props; + const { style, themedStyle, disabled, checked, ...restProps } = this.props; const componentStyle: StyleType = this.getComponentStyle(themedStyle); - const interpolatedTintColor: Animated.AnimatedDiffClamp = this.getInterpolatedColor( - componentStyle.switchOffsetValue, - componentStyle.colors.tint, - componentStyle.colors.onTint, - ); - const interpolatedCheckColor: Animated.AnimatedDiffClamp = this.getInterpolatedColor( - componentStyle.switchOffsetValue, - componentStyle.colors.thumb, - componentStyle.colors.onTint, - ); - const returnScale: Animated.AnimatedDiffClamp = this.switchAnimation.interpolate({ - inputRange: [-componentStyle.switchOffsetValue, 0], - outputRange: [1, 0.01], - }); return ( - - {} + + + onPress={this.onPress}> - - + + @@ -305,26 +295,22 @@ export class Toggle extends React.Component { } const styles = StyleSheet.create({ - wrapper: { + container: { alignItems: 'center', justifyContent: 'center', }, - container: { - overflow: 'hidden', + componentContainer: { justifyContent: 'center', alignSelf: 'center', - }, - disableBox: { - position: 'absolute', - alignSelf: 'center', + overflow: 'hidden', }, ellipse: { - position: 'absolute', alignSelf: 'center', + position: 'absolute', }, highlight: { - position: 'absolute', alignSelf: 'center', + position: 'absolute', }, thumb: { justifyContent: 'center', diff --git a/src/framework/ui/toggle/toggle.spec.tsx b/src/framework/ui/toggle/toggle.spec.tsx index 3ace43140..669c97336 100644 --- a/src/framework/ui/toggle/toggle.spec.tsx +++ b/src/framework/ui/toggle/toggle.spec.tsx @@ -48,7 +48,7 @@ describe('@toggle: matches snapshot', () => { }); it('checked', () => { - const component: RenderAPI = renderComponent({ value: true }); + const component: RenderAPI = renderComponent({ checked: true }); const { output } = shallow(component.getByType(ToggleComponent)); expect(output).toMatchSnapshot(); @@ -63,7 +63,7 @@ describe('@toggle: matches snapshot', () => { it('checked disabled', () => { const component: RenderAPI = renderComponent({ - value: true, + checked: true, disabled: true, }); const { output } = shallow(component.getByType(ToggleComponent)); @@ -93,7 +93,7 @@ describe('@toggle: matches snapshot', () => { }); it('active checked', async () => { - const component: RenderAPI = renderComponent({ value: true }); + const component: RenderAPI = renderComponent({ checked: true }); fireEvent(component.getByType(TouchableOpacity), 'pressIn'); const active: ReactTestInstance = await waitForElement(() => { @@ -116,10 +116,10 @@ describe('@toggle: matches snapshot', () => { describe('@toggle: component checks', () => { - it('emits onValueChange', () => { + it('emits onChange', () => { const onChange = jest.fn(); - const component: RenderAPI = renderComponent({ onValueChange: onChange }); + const component: RenderAPI = renderComponent({ onChange: onChange }); fireEvent.press(component.getByType(TouchableOpacity)); @@ -127,35 +127,35 @@ describe('@toggle: component checks', () => { }); it('checking of value direct', () => { - let value: boolean = false; + let checked: boolean = false; const onChangeValue = (changed: boolean) => { - value = changed; + checked = changed; }; const component: RenderAPI = renderComponent({ - value: value, - onValueChange: onChangeValue, + checked: checked, + onChange: onChangeValue, }); fireEvent.press(component.getByType(TouchableOpacity)); - expect(value).toBe(true); + expect(checked).toBe(true); }); it('checking of value reverse', () => { - let value: boolean = true; + let checked: boolean = true; const onChangeValue = (changed: boolean) => { - value = changed; + checked = changed; }; const component: RenderAPI = renderComponent({ - value: value, - onValueChange: onChangeValue, + checked: checked, + onChange: onChangeValue, }); fireEvent.press(component.getByType(TouchableOpacity)); - expect(value).toBe(false); + expect(checked).toBe(false); }); }); diff --git a/src/framework/ui/toggle/toggle.spec.tsx.snap b/src/framework/ui/toggle/toggle.spec.tsx.snap index 8cebf29b9..0be0a8c9a 100644 --- a/src/framework/ui/toggle/toggle.spec.tsx.snap +++ b/src/framework/ui/toggle/toggle.spec.tsx.snap @@ -3,7 +3,6 @@ exports[`@toggle: matches snapshot active 1`] = ` @@ -274,7 +219,6 @@ exports[`@toggle: matches snapshot active 1`] = ` exports[`@toggle: matches snapshot active checked 1`] = ` @@ -545,7 +435,6 @@ exports[`@toggle: matches snapshot active checked 1`] = ` exports[`@toggle: matches snapshot active checked: checked 1`] = ` @@ -816,7 +651,6 @@ exports[`@toggle: matches snapshot active checked: checked 1`] = ` exports[`@toggle: matches snapshot active: default 1`] = ` @@ -1087,7 +867,6 @@ exports[`@toggle: matches snapshot active: default 1`] = ` exports[`@toggle: matches snapshot checked 1`] = ` @@ -1358,7 +1083,6 @@ exports[`@toggle: matches snapshot checked 1`] = ` exports[`@toggle: matches snapshot checked disabled 1`] = ` @@ -1629,7 +1299,6 @@ exports[`@toggle: matches snapshot checked disabled 1`] = ` exports[`@toggle: matches snapshot default 1`] = ` @@ -1900,7 +1515,6 @@ exports[`@toggle: matches snapshot default 1`] = ` exports[`@toggle: matches snapshot disabled 1`] = ` diff --git a/src/playground/src/ui/screen/toggle.component.tsx b/src/playground/src/ui/screen/toggle.component.tsx index c5c4adba3..c6c8b48ba 100644 --- a/src/playground/src/ui/screen/toggle.component.tsx +++ b/src/playground/src/ui/screen/toggle.component.tsx @@ -35,24 +35,24 @@ class ToggleScreen extends React.Component { toggleErrorChecked: false, }; - private onToggle1Change = (value: boolean) => { - this.setState({ toggle1Checked: value }); + private onToggle1Change = (checked: boolean) => { + this.setState({ toggle1Checked: checked }); }; - private onToggle2Change = (value: boolean) => { - this.setState({ toggle2Checked: value }); + private onToggle2Change = (checked: boolean) => { + this.setState({ toggle2Checked: checked }); }; - private onToggle3Change = (value: boolean) => { - this.setState({ toggle3Checked: value }); + private onToggle3Change = (checked: boolean) => { + this.setState({ toggle3Checked: checked }); }; - private onToggle4Change = (value: boolean) => { - this.setState({ toggle4Checked: value }); + private onToggle4Change = (checked: boolean) => { + this.setState({ toggle4Checked: checked }); }; - private onToggleErrorChange = (value: boolean) => { - this.setState({ toggleErrorChecked: value }); + private onToggleErrorChange = (checked: boolean) => { + this.setState({ toggleErrorChecked: checked }); }; public render(): React.ReactNode { @@ -62,26 +62,26 @@ class ToggleScreen extends React.Component { Primary @@ -89,25 +89,25 @@ class ToggleScreen extends React.Component { Danger @@ -116,25 +116,25 @@ class ToggleScreen extends React.Component { Success @@ -143,25 +143,25 @@ class ToggleScreen extends React.Component { Warning @@ -170,25 +170,25 @@ class ToggleScreen extends React.Component { Info @@ -197,18 +197,18 @@ class ToggleScreen extends React.Component { Size