Skip to content

chore(Checkbox): convert examples to TypeScript/functional components #7036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 1 commit into from
Mar 16, 2022
Merged

chore(Checkbox): convert examples to TypeScript/functional components #7036

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 11 additions & 115 deletions packages/react-core/src/components/Checkbox/examples/Checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,142 +8,38 @@ propComponents: ['Checkbox']
import './checkbox.css';

## Examples

### Controlled
```js
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

class ControlledCheckbox extends React.Component {
constructor(props) {
super(props);
this.state = {
check1: false,
check2: false,
check3: false,
check4: false
};
this.handleChange = (checked, event) => {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({ [name]: value });
};
}

componentDidUpdate(_prevProps, prevState) {
if (prevState.check1 !== this.state.check1 && this.state.check1 !== null) {
this.setState({
check2: this.state.check1,
check3: this.state.check1,
})
}

if (prevState.check2 !== this.state.check2 || prevState.check3 !== this.state.check3) {
this.setState({
check1: (this.state.check2 && this.state.check3) || (this.state.check2 || this.state.check3 ? null : false)
})
}
}

render() {
return (
<React.Fragment>
<Checkbox
label="Parent CheckBox"
isChecked={this.state.check1}
onChange={this.handleChange}
aria-label="controlled checkbox example"
id="check-1"
name="check1"
/>
<Checkbox
className="nested"
label="Child CheckBox 1"
isChecked={this.state.check2}
onChange={this.handleChange}
aria-label="controlled checkbox example"
id="check-2"
name="check2"
/>
<Checkbox
className="nested"
label="Child CheckBox 2"
isChecked={this.state.check3}
onChange={this.handleChange}
aria-label="controlled checkbox example"
id="check-3"
name="check3"
/>
<Checkbox
label="Controlled CheckBox"
isChecked={this.state.check4}
onChange={this.handleChange}
aria-label="controlled checkbox example"
id="check-4"
name="check4"
/>
</React.Fragment>
);
}
}

```ts file='./CheckboxControlled.tsx'
```

### Uncontrolled
```js
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

<React.Fragment>
<Checkbox label="Uncontrolled CheckBox" aria-label="uncontrolled checkbox example" id="check-5" />
<Checkbox label="Uncontrolled CheckBox" aria-label="uncontrolled checkbox example" id="check-6" />
</React.Fragment>

```ts file='./CheckboxUncontrolled.tsx'
```

### Disabled
```js
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

<React.Fragment>
<Checkbox
id="check-7"
label="Disabled CheckBox"
aria-label="disabled checked checkbox example"
defaultChecked
isDisabled
/>{' '}
<Checkbox id="check-8" label="Disabled CheckBox" aria-label="disabled checkbox example" isDisabled />
</React.Fragment>

```ts file='./CheckboxDisabled.tsx'
```

### Checkbox with description
```js
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

<Checkbox id="check-9" label="Checkbox with description" aria-label="Checkbox with description example" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."/>
```ts file='./CheckboxWithDescription.tsx'
```

### Checkbox with body
```js
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

<Checkbox id="check-10" label="Checkbox with body" aria-label="Checkbox with body example" body="This is where custom content goes."/>
```ts file='./CheckboxWithBody.tsx'
```

### Checkbox with description and body
```js
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

<Checkbox id="check-11" label="Checkbox with description and body" aria-label="Checkbox with body example" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP." body="This is where custom content goes."/>
```ts file='./CheckboxWithDescriptionBody.tsx'
```

### Standalone input
```js
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

<Checkbox id="check-standalone-input" name="check-standalone-input" aria-label="Standalone input"/>
```ts file='./CheckboxStandaloneInput.tsx'
```
78 changes: 78 additions & 0 deletions packages/react-core/src/components/Checkbox/examples/CheckboxControlled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

export const CheckboxControlled: React.FunctionComponent = () => {
const [isChecked1, setIsChecked1] = React.useState<boolean>(false);
const [isChecked2, setIsChecked2] = React.useState<boolean>(false);
const [isChecked3, setIsChecked3] = React.useState<boolean>(false);
const [isChecked4, setIsChecked4] = React.useState<boolean>(false);

const handleChange = (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {
const target = event.currentTarget;
const name = target.name;

switch (name) {
case 'check1':
setIsChecked1(checked);
break;
case 'check2':
setIsChecked2(checked);
break;
case 'check3':
setIsChecked3(checked);
break;
case 'check4':
setIsChecked4(checked);
break;
default:
// eslint-disable-next-line no-console
console.log(name);
}
};

React.useEffect(() => {
if (isChecked1 !== null) {
setIsChecked2(isChecked1);
setIsChecked3(isChecked1);
}
}, [isChecked1]);

React.useEffect(() => {
setIsChecked1((isChecked2 && isChecked3) || (isChecked2 || isChecked3 ? null : false));
}, [isChecked2, isChecked3]);

return (
<React.Fragment>
<Checkbox
label="Parent CheckBox"
isChecked={isChecked1}
onChange={handleChange}
id="controlled-check-1"
name="check1"
/>
<Checkbox
className="nested"
label="Child CheckBox 1"
isChecked={isChecked2}
onChange={handleChange}
id="controlled-check-2"
name="check2"
/>
<Checkbox
className="nested"
label="Child CheckBox 2"
isChecked={isChecked3}
onChange={handleChange}
id="controlled-check-3"
name="check3"
/>
<Checkbox
label="Controlled CheckBox"
isChecked={isChecked4}
onChange={handleChange}
id="controlled-check-4"
name="check4"
/>
</React.Fragment>
);
};
9 changes: 9 additions & 0 deletions packages/react-core/src/components/Checkbox/examples/CheckboxDisabled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

export const CheckboxDisabled: React.FunctionComponent = () => (
<React.Fragment>
<Checkbox id="disabled-check-1" label="Disabled CheckBox 1" defaultChecked isDisabled />
<Checkbox id="disabled-check-2" label="Disabled CheckBox 2" isDisabled />
</React.Fragment>
);
6 changes: 6 additions & 0 deletions packages/react-core/src/components/Checkbox/examples/CheckboxStandaloneInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

export const CheckboxStandaloneInput: React.FunctionComponent = () => (
<Checkbox id="standalone-check" name="standlone-check" aria-label="Standalone input" />
);
9 changes: 9 additions & 0 deletions packages/react-core/src/components/Checkbox/examples/CheckboxUncontrolled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

export const CheckboxUncontrolled: React.FunctionComponent = () => (
<React.Fragment>
<Checkbox label="Uncontrolled CheckBox 1" id="uncontrolled-check-1" />
<Checkbox label="Uncontrolled CheckBox 2" id="uncontrolled-check-2" />
</React.Fragment>
);
6 changes: 6 additions & 0 deletions packages/react-core/src/components/Checkbox/examples/CheckboxWithBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

export const CheckboxWithBody: React.FunctionComponent = () => (
<Checkbox id="body-check-1" label="Checkbox with body" body="This is where custom content goes." />
);
10 changes: 10 additions & 0 deletions packages/react-core/src/components/Checkbox/examples/CheckboxWithDescription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

export const CheckboxWithDescription: React.FunctionComponent = () => (
<Checkbox
id="description-check-1"
label="Checkbox with description"
description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
/>
);
11 changes: 11 additions & 0 deletions packages/react-core/src/components/Checkbox/examples/CheckboxWithDescriptionBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';
import { Checkbox } from '@patternfly/react-core';

export const CheckboxWithDescriptionBody: React.FunctionComponent = () => (
<Checkbox
id="description-body-check"
label="Checkbox with description and body"
description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
body="This is where custom content goes."
/>
);