From 68471e8d8bbbee85753fe7a2c87adb4fcf01e4ae Mon Sep 17 00:00:00 2001 From: Mack Browne Date: Tue, 15 Dec 2020 13:54:16 +0100 Subject: [PATCH] checkbox variant - outline (#1067) * add outline prop to checkbox * Bugfixes, Revisions from Feedback, create DEFAULT_BORDER_RADIUS and DEFAULT_BORDER_WIDTH * change getTintColor to use iconColor Co-authored-by: Mackenzie Browne --- generatedTypes/components/checkbox/index.d.ts | 4 ++ src/components/checkbox/index.tsx | 45 ++++++++++++++----- 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/generatedTypes/components/checkbox/index.d.ts b/generatedTypes/components/checkbox/index.d.ts index 9e5be74f50..5ee5296281 100644 --- a/generatedTypes/components/checkbox/index.d.ts +++ b/generatedTypes/components/checkbox/index.d.ts @@ -17,6 +17,10 @@ export interface CheckboxProps extends TouchableOpacityProps { * The Checkbox color */ color?: string; + /** + * alternative Checkbox outline style + */ + outline?: boolean; /** * The size of the checkbox. affect both width and height */ diff --git a/src/components/checkbox/index.tsx b/src/components/checkbox/index.tsx index 41f7df1a5a..6374366b8c 100644 --- a/src/components/checkbox/index.tsx +++ b/src/components/checkbox/index.tsx @@ -15,6 +15,9 @@ const DEFAULT_COLOR = Colors.blue30; const DEFAULT_ICON_COLOR = Colors.white; const DEFAULT_DISABLED_COLOR = Colors.grey50; +const DEFAULT_BORDER_WIDTH = 2; +const DEFAULT_BORDER_RADIUS = 8; + export interface CheckboxProps extends TouchableOpacityProps { /** * The value of the Checkbox. If true the switch will be turned on. Default value is false. @@ -32,6 +35,10 @@ export interface CheckboxProps extends TouchableOpacityProps { * The Checkbox color */ color?: string; + /** + * alternative Checkbox outline style + */ + outline?: boolean; /** * The size of the checkbox. affect both width and height */ @@ -158,14 +165,24 @@ class Checkbox extends Component { } }; - getColor() { - const {color, disabled} = this.props; - return disabled ? DEFAULT_DISABLED_COLOR : color || DEFAULT_COLOR; - } + getColor = () => (this.props.disabled ? DEFAULT_DISABLED_COLOR : this.props.color || DEFAULT_COLOR); + + getBackgroundColor = () => (this.props.outline ? 'transparent' : this.getColor()); + + getTintColor = () => { + const {outline, disabled, iconColor} = this.props; + if (outline) { + if (disabled) return DEFAULT_DISABLED_COLOR; + else return iconColor || DEFAULT_COLOR; + } else { + if (disabled) return Colors.white; + else return iconColor || Colors.white; + } + }; getBorderStyle() { const borderColor = {borderColor: this.getColor()}; - const borderStyle = [this.styles.container, {borderWidth: 2}, borderColor]; + const borderStyle = [this.styles.container, {borderWidth: DEFAULT_BORDER_WIDTH}, borderColor]; return borderStyle; } @@ -185,14 +202,17 @@ class Checkbox extends Component { > { { } function createStyles(props: CheckboxProps) { - const {color = DEFAULT_COLOR, iconColor = DEFAULT_ICON_COLOR, size = DEFAULT_SIZE, borderRadius} = props; + const { + color = DEFAULT_COLOR, + iconColor = DEFAULT_ICON_COLOR, + size = DEFAULT_SIZE, + borderRadius = DEFAULT_BORDER_RADIUS + } = props; return StyleSheet.create({ container: { width: size, height: size, - borderRadius: borderRadius || 8, + borderRadius: borderRadius, alignItems: 'center', justifyContent: 'center', borderColor: color