From 381e2061f72a0f6bcd60f40640002a2ad91d3059 Mon Sep 17 00:00:00 2001 From: Nikki Wines Date: Mon, 5 Jun 2023 13:49:13 -0400 Subject: [PATCH 01/12] convert checkbox to function component --- src/components/Checkbox.js | 126 +++++++++++++++---------------------- 1 file changed, 52 insertions(+), 74 deletions(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 9e4f5da57dcf..c4323ab01e14 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -47,95 +47,73 @@ const defaultProps = { onMouseDown: undefined, }; -class Checkbox extends React.Component { - constructor(props) { - super(props); - this.state = { - isFocused: false, - }; - - this.onFocus = this.onFocus.bind(this); - this.onBlur = this.onBlur.bind(this); - this.handleSpaceKey = this.handleSpaceKey.bind(this); - this.firePressHandlerOnClick = this.firePressHandlerOnClick.bind(this); - } - - onFocus() { - this.setState({isFocused: true}); - } - - onBlur() { - this.setState({isFocused: false}); - } - - handleSpaceKey(event) { +const Checkbox = (props) => { + const [isFocused, setIsFocused] = useState(false); + + const handleSpaceKey = (event) => { if (event.code !== 'Space') { return; } - this.props.onPress(); - } + props.onPress(); + }; - firePressHandlerOnClick(event) { + const firePressHandlerOnClick = (event) => { // Pressable can be triggered with Enter key and by a click. As this is a checkbox, // We do not want to toggle it, when Enter key is pressed. if (event.type && event.type !== 'click') { return; } - const wasChecked = this.props.isChecked; + const wasChecked = props.isChecked; // If checkbox is checked and focused, make sure it's unfocused when pressed. - if (this.state.isFocused && wasChecked) { - this.onBlur(); + if (isFocused && wasChecked) { + setIsFocused(false); } - this.props.onPress(); - } - - render() { - return ( - - {this.props.children ? ( - this.props.children - ) : ( - - {this.props.isChecked && ( - - )} - - )} - - ); - } + props.onPress(); + }; + + return ( + setIsFocused(true)} + onBlur={() => setIsFocused(false)} + ref={props.forwardedRef} + onPressOut={() => setIsFocused(false)} + style={props.style} + onKeyDown={handleSpaceKey} + accessibilityRole="checkbox" + accessibilityState={{checked: props.isChecked}} + > + {props.children ? ( + props.children + ) : ( + + {props.isChecked && ( + + )} + + )} + + ); } Checkbox.propTypes = propTypes; From 2f7ad8e767710c5744189ddc4d3a6adaf5ad2224 Mon Sep 17 00:00:00 2001 From: Nikki Wines Date: Mon, 5 Jun 2023 13:56:37 -0400 Subject: [PATCH 02/12] prettier style --- src/components/Checkbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index c4323ab01e14..561ce79fe838 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -114,7 +114,7 @@ const Checkbox = (props) => { )} ); -} +}; Checkbox.propTypes = propTypes; Checkbox.defaultProps = defaultProps; From 3d9ad4dd03f7108cc6b32dc300a750d5c042fac3 Mon Sep 17 00:00:00 2001 From: Nikki Wines Date: Mon, 5 Jun 2023 14:46:32 -0400 Subject: [PATCH 03/12] import useState --- src/components/Checkbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 561ce79fe838..16ef91ee86af 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import {View, Pressable} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; From 1be86a8c809f1ae4181b48ed4f177e2e063399ad Mon Sep 17 00:00:00 2001 From: Nikki Wines Date: Mon, 5 Jun 2023 15:35:25 -0400 Subject: [PATCH 04/12] add display name --- src/components/Checkbox.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 16ef91ee86af..b02ba92efc75 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -118,5 +118,6 @@ const Checkbox = (props) => { Checkbox.propTypes = propTypes; Checkbox.defaultProps = defaultProps; +Checkbox.displayName = 'Checkbox'; export default Checkbox; From 7be0d9e8851e3895b8628ff29b990f49857848dc Mon Sep 17 00:00:00 2001 From: Nikki Wines Date: Mon, 12 Jun 2023 10:59:01 -0400 Subject: [PATCH 05/12] use function keyword instead of const --- src/components/Checkbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index b02ba92efc75..1a981adc3c31 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -47,7 +47,7 @@ const defaultProps = { onMouseDown: undefined, }; -const Checkbox = (props) => { +function Checkbox(props) { const [isFocused, setIsFocused] = useState(false); const handleSpaceKey = (event) => { From 7c797a16e87ad10d4b61c34abeae4f4bdb1d433c Mon Sep 17 00:00:00 2001 From: Nikki Wines Date: Wed, 14 Jun 2023 12:30:13 -0400 Subject: [PATCH 06/12] prettier style --- src/components/Checkbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 1a981adc3c31..d7dc509984db 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -114,7 +114,7 @@ function Checkbox(props) { )} ); -}; +} Checkbox.propTypes = propTypes; Checkbox.defaultProps = defaultProps; From 75b09ff33c3bd7f231ce70369c25f838b357be52 Mon Sep 17 00:00:00 2001 From: Nikki Wines Date: Wed, 14 Jun 2023 12:31:32 -0400 Subject: [PATCH 07/12] use function instead of const --- src/components/Checkbox.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index d7dc509984db..d19ef1d8bd0d 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -50,15 +50,15 @@ const defaultProps = { function Checkbox(props) { const [isFocused, setIsFocused] = useState(false); - const handleSpaceKey = (event) => { + function handleSpaceKey(event) { if (event.code !== 'Space') { return; } props.onPress(); - }; + } - const firePressHandlerOnClick = (event) => { + function firePressHandlerOnClick(event) { // Pressable can be triggered with Enter key and by a click. As this is a checkbox, // We do not want to toggle it, when Enter key is pressed. if (event.type && event.type !== 'click') { @@ -73,7 +73,7 @@ function Checkbox(props) { } props.onPress(); - }; + } return ( Date: Wed, 14 Jun 2023 13:06:09 -0400 Subject: [PATCH 08/12] use const for props --- src/components/Checkbox.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index d19ef1d8bd0d..6f041a88f118 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -50,15 +50,15 @@ const defaultProps = { function Checkbox(props) { const [isFocused, setIsFocused] = useState(false); - function handleSpaceKey(event) { + const handleSpaceKey (event) => { if (event.code !== 'Space') { return; } props.onPress(); - } + }; - function firePressHandlerOnClick(event) { + const firePressHandlerOnClick (event) => { // Pressable can be triggered with Enter key and by a click. As this is a checkbox, // We do not want to toggle it, when Enter key is pressed. if (event.type && event.type !== 'click') { @@ -73,7 +73,7 @@ function Checkbox(props) { } props.onPress(); - } + }; return ( Date: Wed, 14 Jun 2023 13:17:56 -0400 Subject: [PATCH 09/12] add missing = --- src/components/Checkbox.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 6f041a88f118..d7dc509984db 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -50,7 +50,7 @@ const defaultProps = { function Checkbox(props) { const [isFocused, setIsFocused] = useState(false); - const handleSpaceKey (event) => { + const handleSpaceKey = (event) => { if (event.code !== 'Space') { return; } @@ -58,7 +58,7 @@ function Checkbox(props) { props.onPress(); }; - const firePressHandlerOnClick (event) => { + const firePressHandlerOnClick = (event) => { // Pressable can be triggered with Enter key and by a click. As this is a checkbox, // We do not want to toggle it, when Enter key is pressed. if (event.type && event.type !== 'click') { From 0ab9e7de82b454636cf6caee93fc58744fc92b36 Mon Sep 17 00:00:00 2001 From: Nikki Wines Date: Wed, 14 Jun 2023 15:29:07 -0400 Subject: [PATCH 10/12] re-add missing dataset logic --- src/components/Checkbox.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index d7dc509984db..28d8ce145945 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -101,6 +101,8 @@ function Checkbox(props) { props.disabled && styles.cursorDisabled, (isFocused || props.isChecked) && styles.borderColorFocus, ]} + // Used as CSS selector to customize focus-visible style + dataSet={{checkbox: true}} > {props.isChecked && ( Date: Wed, 14 Jun 2023 15:35:33 -0400 Subject: [PATCH 11/12] remove outdated isFocused logic --- src/components/Checkbox.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 28d8ce145945..297958761f07 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -48,8 +48,6 @@ const defaultProps = { }; function Checkbox(props) { - const [isFocused, setIsFocused] = useState(false); - const handleSpaceKey = (event) => { if (event.code !== 'Space') { return; @@ -65,13 +63,6 @@ function Checkbox(props) { return; } - const wasChecked = props.isChecked; - - // If checkbox is checked and focused, make sure it's unfocused when pressed. - if (isFocused && wasChecked) { - setIsFocused(false); - } - props.onPress(); }; @@ -80,10 +71,7 @@ function Checkbox(props) { disabled={props.disabled} onPress={firePressHandlerOnClick} onMouseDown={props.onMouseDown} - onFocus={() => setIsFocused(true)} - onBlur={() => setIsFocused(false)} ref={props.forwardedRef} - onPressOut={() => setIsFocused(false)} style={props.style} onKeyDown={handleSpaceKey} accessibilityRole="checkbox" @@ -99,7 +87,7 @@ function Checkbox(props) { props.isChecked && styles.checkedContainer, props.hasError && styles.borderColorDanger, props.disabled && styles.cursorDisabled, - (isFocused || props.isChecked) && styles.borderColorFocus, + props.isChecked && styles.borderColorFocus, ]} // Used as CSS selector to customize focus-visible style dataSet={{checkbox: true}} From ba7f24e3ef7e766aa380e8ee1d70aced72a7a8e5 Mon Sep 17 00:00:00 2001 From: Nikki Wines Date: Wed, 14 Jun 2023 15:36:24 -0400 Subject: [PATCH 12/12] remove unused useState import --- src/components/Checkbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js index 297958761f07..5ce90473bbdd 100644 --- a/src/components/Checkbox.js +++ b/src/components/Checkbox.js @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React from 'react'; import {View, Pressable} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles';