Skip to content

chore(FormSelect): convert examples to TypeScript #7489

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
Jun 13, 2022
Merged

chore(FormSelect): convert examples to TypeScript #7489

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
296 changes: 5 additions & 291 deletions packages/react-core/src/components/FormSelect/examples/FormSelect.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,310 +9,24 @@ ouia: true
## Examples

### Basic
```js
import React from 'react';
import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';

class FormSelectInput extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'mrs'
};
this.onChange = (value, event) => {
this.setState({ value });
};
this.options = [
{ value: 'please choose', label: 'Select one', disabled: true },
{ value: 'mr', label: 'Mr', disabled: false },
{ value: 'miss', label: 'Miss', disabled: false },
{ value: 'mrs', label: 'Mrs', disabled: false },
{ value: 'ms', label: 'Ms', disabled: false },
{ value: 'dr', label: 'Dr', disabled: false },
{ value: 'other', label: 'Other', disabled: false }
];
}

render() {
return (
<FormSelect value={this.state.value} onChange={this.onChange} aria-label="FormSelect Input">
{this.options.map((option, index) => (
<FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
))}
</FormSelect>
);
}
}
```

### Invalid
```js
import React from 'react';
import { FormSelect, FormSelectOption, FormSelectOptionGroup, ValidatedOptions } from '@patternfly/react-core';

class FormSelectInputInvalid extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
validated: ValidatedOptions.default
};
this.isEmpty = () => this.state.value !== '';
this.onChange = (value, event) => {
const validated = this.isEmpty() && ValidatedOptions.error
this.setState({ value, validated });
};
this.options = [
{ value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
{ value: '1', label: 'One', disabled: false, isPlaceholder: false },
{ value: '2', label: 'Two', disabled: false, isPlaceholder: false },
{ value: '3', label: 'Three', disabled: false, isPlaceholder: false }
];
}

render() {
const { value, validated } = this.state;

return (
<FormSelect
validated={validated}
value={value}
onChange={this.onChange}
aria-label="FormSelect Input"
>
{this.options.map((option, index) => (
<FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} isPlaceholder={option.isPlaceholder} />
))}
</FormSelect>
);
}
}
```ts file='./FormSelectBasic.tsx'
```

### Validated
```js
import React from 'react';
import { Form, FormGroup, FormSelect, FormSelectOption, FormSelectOptionGroup, ValidatedOptions } from '@patternfly/react-core';

class FormSelectInputInvalid extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
invalidText: 'You must choose something',
validated: ValidatedOptions.default
};

this.simulateNetworkCall = callback => {
setTimeout(callback, 2000);
};

this.onChange = (value, event) => {
this.setState(
{ value, validated: ValidatedOptions.default, helperText: 'Validating...' },
this.simulateNetworkCall(() => {
if (value === '3') {
this.setState({ validated: ValidatedOptions.success, helperText: 'You chose wisely' });
} else if (value === '') {
this.setState({ validated: ValidatedOptions.warning, helperText: 'You must select a value' });
} else {
this.setState({ validated: ValidatedOptions.error, invalidText: 'You must chose Three (thought that was obvious)' });
}
})
);
};

this.options = [
{ value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
{ value: '1', label: 'One', disabled: false, isPlaceholder: false },
{ value: '2', label: 'Two', disabled: false, isPlaceholder: false },
{ value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
];
}

render() {
const { value, validated, helperText, invalidText } = this.state;
return (
<Form>
<FormGroup
label="Selection:"
type="string"
helperText={helperText}
helperTextInvalid={invalidText}
fieldId="selection"
validated={validated}
>
<FormSelect
id="selection"
validated={validated}
value={value}
onChange={this.onChange}
aria-label="FormSelect Input"
>
{this.options.map((option, index) => (
<FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} isPlaceholder={option.isPlaceholder} />
))}
</FormSelect>
</FormGroup>
</Form>
);
}
}
```ts file='./FormSelectValidated.tsx'
```

### Disabled
```js
import React from 'react';
import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';

class FormSelectInputDisabled extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'mrs'
};
this.onChange = (value, event) => {
this.setState({ value });
};
this.options = [
{ value: 'please choose', label: 'Select one', disabled: true },
{ value: 'mr', label: 'Mr', disabled: false },
{ value: 'miss', label: 'Miss', disabled: false },
{ value: 'mrs', label: 'Mrs', disabled: false },
{ value: 'ms', label: 'Ms', disabled: false },
{ value: 'dr', label: 'Dr', disabled: false },
{ value: 'other', label: 'Other', disabled: false }
];
}

render() {
return (
<FormSelect value={this.state.value} onChange={this.onChange} isDisabled aria-label="FormSelect Input">
{this.options.map((option, index) => (
<FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
))}
</FormSelect>
);
}
}
```ts file='./FormSelectDisabled.tsx'
```

### Grouped
```js
import React from 'react';
import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';

class FormSelectInputGrouped extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '2'
};
this.onChange = (value, event) => {
this.setState({ value });
};
this.groups = [
{
groupLabel: 'Group1',
disabled: false,
options: [
{ value: '1', label: 'The first option', disabled: false },
{ value: '2', label: 'Second option is selected by default', disabled: false }
]
},
{
groupLabel: 'Group2',
disabled: false,
options: [
{ value: '3', label: 'The third option', disabled: false },
{ value: '4', label: 'The fourth option', disabled: false }
]
},
{
groupLabel: 'Group3',
disabled: true,
options: [
{ value: '5', label: 'The fifth option', disabled: false },
{ value: '6', label: 'The sixth option', disabled: false }
]
}
];
this.getOptionLbl = option => option.label;
this.getOptionVal = option => option.value;
this.getOptionsGroupLbl = group => group && group.groupLabel;
this.getGroupOptions = group => group && group.options;
}

render() {
return (
<FormSelect value={this.state.value} onChange={this.onChange} aria-label="FormSelect Input">
{this.groups.map((group, index) => (
<FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
{group.options.map((option, i) => (
<FormSelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />
))}
</FormSelectOptionGroup>
))}
</FormSelect>
);
}
}
```ts file='./FormSelectGrouped.tsx'
```

### Icon sprite variant

**Note:** The dropdown toggle icon is applied as a background image to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.

```js isBeta
import React from 'react';
import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';

class FormSelectIconSpriteInput extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
validated: ValidatedOptions.default
};

this.onChange = (value, event) => {
if (value === '3') {
this.setState({ value, validated: ValidatedOptions.success, helperText: 'You chose wisely' });
} else if (value === '') {
this.setState({ value, validated: ValidatedOptions.warning, helperText: 'You must select a value' });
} else {
this.setState({
value,
validated: ValidatedOptions.error,
invalidText: 'You must chose Three (thought that was obvious)'
});
}
};

this.options = [
{ value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
{ value: '1', label: 'One', disabled: false, isPlaceholder: false },
{ value: '2', label: 'Two', disabled: false, isPlaceholder: false },
{ value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
];
}

render() {
const { value, validated, helperText, invalidText } = this.state;

return (
<FormSelect
validated={validated}
isIconSprite
value={value}
onChange={this.onChange}
aria-label="FormSelect Input"
>
{this.options.map((option, index) => (
<FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
))}
</FormSelect>
);
}
}
```ts file='./FormSelectIconSpriteVariant.tsx' isBeta
```
28 changes: 28 additions & 0 deletions packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import { FormSelect, FormSelectOption } from '@patternfly/react-core';

export const FormSelectBasic: React.FunctionComponent = () => {
const [formSelectValue, setFormSelectValue] = React.useState('mrs');

const onChange = (value: string) => {
setFormSelectValue(value);
};

const options = [
{ value: 'please choose', label: 'Select one', disabled: true },
{ value: 'mr', label: 'Mr', disabled: false },
{ value: 'miss', label: 'Miss', disabled: false },
{ value: 'mrs', label: 'Mrs', disabled: false },
{ value: 'ms', label: 'Ms', disabled: false },
{ value: 'dr', label: 'Dr', disabled: false },
{ value: 'other', label: 'Other', disabled: false }
];

return (
<FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input">
{options.map((option, index) => (
<FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
))}
</FormSelect>
);
};
28 changes: 28 additions & 0 deletions packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import { FormSelect, FormSelectOption } from '@patternfly/react-core';

export const FormSelectDisabled: React.FunctionComponent = () => {
const [formSelectValue, setFormSelectValue] = React.useState('mrs');

const onChange = (value: string) => {
setFormSelectValue(value);
};

const options = [
{ value: 'please choose', label: 'Select one', disabled: true },
{ value: 'mr', label: 'Mr', disabled: false },
{ value: 'miss', label: 'Miss', disabled: false },
{ value: 'mrs', label: 'Mrs', disabled: false },
{ value: 'ms', label: 'Ms', disabled: false },
{ value: 'dr', label: 'Dr', disabled: false },
{ value: 'other', label: 'Other', disabled: false }
];

return (
<FormSelect value={formSelectValue} onChange={onChange} isDisabled aria-label="FormSelect Input">
{options.map((option, index) => (
<FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
))}
</FormSelect>
);
};
Loading