Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-12-22 00:09:47 +01:00
Code Issues Packages Projects Releases Activity

Make checkboxes changeable with key press

Browse Source
This commit is contained in:
René Pfeuffer
2020-09-01 13:55:53 +02:00
parent 6ba090b82e
commit 36b8f667bf
2 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -44045,6 +44045,7 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
<div
className="control"
onClick={[Function]}
onKeyDown={[Function]}
>
<label
className="checkbox"
@@ -44068,6 +44069,7 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
<div
className="control"
onClick={[Function]}
onKeyDown={[Function]}
>
<label
className="checkbox"
@@ -44091,6 +44093,7 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
<div
className="control"
onClick={[Function]}
onKeyDown={[Function]}
>
<label
className="checkbox"
@@ -44121,6 +44124,7 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
<div
className="control"
onClick={[Function]}
onKeyDown={[Function]}
>
<label
className="checkbox"
@@ -44152,6 +44156,7 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
<div
className="control"
onClick={[Function]}
onKeyDown={[Function]}
>
<label
className="checkbox"
@@ -44183,6 +44188,7 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
<div
className="control"
onClick={[Function]}
onKeyDown={[Function]}
>
<label
className="checkbox"
@@ -47567,6 +47573,7 @@ exports[`Storyshots Modal|Modal With long tooltips 1`] = `
<div
className="control"
onClick={[Function]}
onKeyDown={[Function]}
>
<label
className="checkbox"

9
scm-ui/ui-components/src/forms/Checkbox.tsx
View File

@@ -45,6 +45,13 @@ export default class Checkbox extends React.Component<Props> {
}
};
onKeyDown = (event: React.KeyboardEvent) => {
const SPACE = 32;
if (event.keyCode === SPACE) {
this.onCheckboxChange();
}
};
renderHelp = () => {
const { title, helpText } = this.props;
if (helpText && !title) {
@@ -64,7 +71,7 @@ export default class Checkbox extends React.Component<Props> {
return (
<div className="field">
{this.renderLabelWithHelp()}
<div className="control" onClick={this.onCheckboxChange}>
<div className="control" onClick={this.onCheckboxChange} onKeyDown={this.onKeyDown}>
{/*
we have to ignore the next line,
because jsx label does not the custom disabled attribute