diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c7ac10d..f426a137 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,23 @@ ### [@coreui/react](https://coreui.io/) changelog -##### `v2.5.1` +##### `v2.5.2` +- fix(Switch): does not provide any keyboard accessibility - thanks @roastery-zz close #44 +- fix(Switch): checked props and state out of sync - thanks @gravitymedianet @jinixx +- fix(Switch): uncontrolled mode with defaultChecked + +###### dependencies update +- update `core-js` to `^2.6.9` +- update `react-perfect-scrollbar` to `^1.5.3` +- update `reactstrap` to `^8.0.1" +- update `babel-eslint` to `^10.0.2` +- update `enzyme` to `^3.10.0` +- update `enzyme-adapter-react-16` to `^1.14.0` +- update `eslint-plugin-import` to `^2.18.2` +- update `eslint-plugin-react` to `^7.14.3` +- update `react-router-dom` to `^5.0.1` +- update `webpack-dev-server` to `^3.7.2` +##### `v2.5.1` - fix(SidebarNav): add missing `class` and `attributes` to navDropdown item - fix(HeaderDropdown): add missing Dropdown.propTypes - refactor(demo): AppHeaderDropdown remove style right auto diff --git a/package.json b/package.json index f723f247..fe959892 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "2.5.1", + "version": "2.5.2", "description": "CoreUI React Bootstrap 4 components", "license": "MIT", "author": { @@ -37,30 +37,30 @@ "dependencies": { "@coreui/icons": "0.3.0", "classnames": "^2.2.6", - "core-js": "^2.6.8", + "core-js": "^2.6.9", "prop-types": "^15.7.2", "react-onclickout": "^2.0.8", - "react-perfect-scrollbar": "^1.5.2", - "reactstrap": "^7.1.0" + "react-perfect-scrollbar": "^1.5.3", + "reactstrap": "^8.0.1" }, "peerDependencies": { - "@coreui/coreui": "^2.1.9", + "@coreui/coreui": "^2.1.12", "react": "^16.8.6", - "react-router-dom": "^5.0.0" + "react-router-dom": "^5.0.1" }, "devDependencies": { - "babel-eslint": "^10.0.1", - "enzyme": "^3.9.0", - "enzyme-adapter-react-16": "^1.13.1", + "babel-eslint": "^10.0.2", + "enzyme": "^3.10.0", + "enzyme-adapter-react-16": "^1.14.0", "eslint": "^5.16.0", - "eslint-plugin-import": "^2.17.2", - "eslint-plugin-react": "^7.13.0", + "eslint-plugin-import": "^2.18.2", + "eslint-plugin-react": "^7.14.3", "nwb": "^0.23.0", "react": "^16.8.6", "react-dom": "^16.8.6", - "react-router-dom": "^5.0.0", + "react-router-dom": "^5.0.1", "sinon": "^5.1.1", - "webpack-dev-server": "^3.4.1" + "webpack-dev-server": "^3.7.2" }, "repository": { "type": "git", diff --git a/src/Switch.js b/src/Switch.js index a24f6e67..75125d68 100644 --- a/src/Switch.js +++ b/src/Switch.js @@ -33,9 +33,9 @@ const defaultProps = { outline: false, size: '', checked: false, - defaultChecked: false, - disabled: false, - required: false, + defaultChecked: undefined, + disabled: undefined, + required: undefined, type: 'checkbox', variant: '', dataOn: 'On', @@ -45,35 +45,54 @@ const defaultProps = { class AppSwitch extends Component { constructor(props) { super(props); - this.onChange = this.onChange.bind(this); + this.handleChange = this.handleChange.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); + this.handleKeyUp = this.handleKeyUp.bind(this); this.state = { + uncontrolled: !!this.props.defaultChecked, checked: this.props.defaultChecked || this.props.checked, selected: [] }; } - onChange(event) { - const target = event.target; + toggleState(check) { this.setState({ - checked: target.checked, + checked: check }) + } + + handleChange(event) { + const target = event.target; + this.toggleState(target.checked) if (this.props.onChange) { this.props.onChange(event); } } - componentDidUpdate(prevProps) { - if (this.props.checked !== prevProps.checked) { - this.setState({ - checked: this.props.checked - }) + handleKeyDown(event) { + if (event.key === ' ') { + event.preventDefault(); + } + } + + handleKeyUp(event) { + if (event.key === 'Enter' || event.key === ' ') { + this.toggleState(!this.state.checked); + } + } + + componentDidUpdate(prevProps, prevState) { + if (!this.state.uncontrolled && (this.props.checked !== prevState.checked)) { + this.toggleState(this.props.checked) } } render() { const { className, disabled, color, name, label, outline, size, required, type, value, dataOn, dataOff, variant, ...attributes } = this.props; + const tabindex = attributes.tabIndex + delete attributes.tabIndex delete attributes.checked delete attributes.defaultChecked delete attributes.onChange @@ -98,8 +117,19 @@ class AppSwitch extends Component { ); return ( -