Skip to content

Support for Input hint as node, fix Select to support grouped options #133

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
merged 4 commits into from
Feb 12, 2020
Merged

Support for Input hint as node, fix Select to support grouped options #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
39d2ab8
Support for node in Input hint, Fix for Select to support grouped opt…
Dec 4, 2019
8613e9f
build
Dec 4, 2019
d4dc577
Add grouped options example
vforge Feb 12, 2020
045bf35
Add node example for input
vforge Feb 12, 2020
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
2 changes: 1 addition & 1 deletion docs/build/bundle.ea165cad.js → docs/build/bundle.908fff79.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.ea165cad.js"></script></body></html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.908fff79.js"></script></body></html>
9 changes: 8 additions & 1 deletion source/components/Input/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,19 @@ An empty input:
<Input label="An empty input" />
```

An empty email input with hint:
An empty `email` input with hint:
```js
<Input label="E-mail" type="email" hint="Type your e-mail" />
```

Other available types are: `text` (default), `number`, `email`, `search`, `tel`, `url` and `password`.


An empty email input with hint (node):
```js
<Input label="Text" hint={<strong>STRONG hint</strong>} />
```

A non-empty input:
```js
<Input label="A non-empty input" value="lorem ipsum" />
Expand Down
5 changes: 4 additions & 1 deletion source/components/Input/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ export default class Input extends React.Component {
/** Force focus flag */
forceFocus: PropTypes.bool,
/** Hint to display */
hint: PropTypes.string,
hint: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node,
]),
/** Additional class name for the hint */
hintClassName: PropTypes.string,
/** ID of the element - by default it's generated automatically */
Expand Down
26 changes: 26 additions & 0 deletions source/components/Select/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,32 @@ Basic usage:
/>
```

Grouped options:
```js
<Select
onBlur={(val, label) => console.log('blur', val, label)}
onChange={(val, label) => console.log('change', val, label)}
options={[
{
label: 'group 1',
options: [
Select.createOption(1, 'label1'),
Select.createOption(2, 'label2'),
Select.createOption(3, 'label3'),
],
},
{
label: 'group 2',
options: [
Select.createOption(4, 'label4'),
Select.createOption(5, 'label5'),
Select.createOption(6, 'label6'),
],
},
]}
/>
```

Non-searchable:
```js
<Select
Expand Down
98 changes: 98 additions & 0 deletions source/components/Select/__snapshots__/index.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -717,3 +717,101 @@ exports[`Select renders correctly 8`] = `
/>
</div>
`;

exports[`Select renders with grouped options 1`] = `
<div
className="fandom-select__wrapper"
>
<div
className="css-1pcexqc-container fandom-select"
onKeyDown={[Function]}
>
<div
className="css-bg1rzq-control fandom-select__control"
onMouseDown={[Function]}
onTouchEnd={[Function]}
>
<div
className="css-1hwfws3 fandom-select__value-container fandom-select__value-container--has-value"
>
<div
className="css-dvua67-singleValue fandom-select__single-value"
>
label4
</div>
<div
className="css-1g6gooi"
>
<div
className="fandom-select__input"
style={
Object {
"display": "inline-block",
}
}
>
<input
aria-autocomplete="list"
autoCapitalize="none"
autoComplete="off"
autoCorrect="off"
disabled={false}
id="fandom-select-input"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
spellCheck="false"
style={
Object {
"background": 0,
"border": 0,
"boxSizing": "content-box",
"color": "inherit",
"fontSize": "inherit",
"label": "input",
"opacity": 1,
"outline": 0,
"padding": 0,
"width": "1px",
}
}
tabIndex="0"
type="text"
value=""
/>
<div
style={
Object {
"height": 0,
"left": 0,
"overflow": "scroll",
"position": "absolute",
"top": 0,
"visibility": "hidden",
"whiteSpace": "pre",
}
}
>

</div>
</div>
</div>
</div>
<div
className="css-1wy0on6 fandom-select__indicators"
>
<div
aria-hidden="true"
className="css-16pqwjk-indicatorContainer fandom-select__indicator fandom-select__dropdown-indicator"
onMouseDown={[Function]}
onTouchEnd={[Function]}
>
<div
className="search-dropdown-indicator"
/>
</div>
</div>
</div>
</div>
</div>
`;
21 changes: 18 additions & 3 deletions source/components/Select/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,11 @@ export default class Select extends React.Component {
/** options to display. Use `createOption` exported from this module to create options */
options: PropTypes.arrayOf(PropTypes.shape({
label: PropTypes.string.isRequired,
value: PropTypes.any.isRequired,
options: PropTypes.arrayOf(PropTypes.shape({
label: PropTypes.string.isRequired,
value: PropTypes.any.isRequired,
})),
value: PropTypes.any,
})),
/** Placeholder text used when no value is selected */
placeholder: PropTypes.string,
Expand Down Expand Up @@ -141,8 +145,19 @@ export default class Select extends React.Component {
}
}

getFlatOptions = () => {
const { options } = this.props;

return options.reduce((acc, option) => {
if (option.options) {
return [...acc, ...option.options];
}
return [...acc, option];
}, []);
}

getValueFromProps() {
const { value, options } = this.props;
const { value } = this.props;

if (!value) {
return undefined;
Expand All @@ -154,7 +169,7 @@ export default class Select extends React.Component {
}

valuesWithLabels = valuesWithLabels
.map(v => options.find(o => o.value === v))
.map(v => this.getFlatOptions().find(o => o.value === v))
.filter(Boolean);

if (valuesWithLabels.length === 0) {
Expand Down
27 changes: 27 additions & 0 deletions source/components/Select/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,3 +208,30 @@ test('custom className is at root level', () => {
const wrapper = mount(<Select className="custom-select" />);
expect(wrapper.find('.fandom-select__wrapper.custom-select')).toHaveLength(1);
});

test('Select renders with grouped options', () => {
const component = renderer.create(
<Select
value={4}
options={[
{
label: 'group 1',
options: [
Select.createOption(1, 'label1'),
Select.createOption(2, 'label2'),
Select.createOption(3, 'label3'),
],
},
{
label: 'group 2',
options: [
Select.createOption(4, 'label4'),
Select.createOption(5, 'label5'),
Select.createOption(6, 'label6'),
],
},
]}
/>
);
expect(component.toJSON()).toMatchSnapshot();
});