Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

Commit abaa146

Browse files
author
Matt Goo
committed
feat(select): add option component (#826)
1 parent 7adc12a commit abaa146

File tree

5 files changed

+186
-67
lines changed

5 files changed

+186
-67
lines changed

package-lock.json

Lines changed: 88 additions & 65 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
"@material/notched-outline": "^1.1.1",
8383
"@material/radio": "^1.1.0",
8484
"@material/ripple": "^1.0.0",
85-
"@material/select": "^0.40.1",
85+
"@material/select": "^1.1.1",
8686
"@material/snackbar": "^1.0.0",
8787
"@material/switch": "^1.0.0",
8888
"@material/tab": "^1.0.0",

packages/select/Option.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// The MIT License
2+
//
3+
// Copyright (c) 2019 Google, Inc.
4+
//
5+
// Permission is hereby granted, free of charge, to any person obtaining a copy
6+
// of this software and associated documentation files (the "Software"), to deal
7+
// in the Software without restriction, including without limitation the rights
8+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
// copies of the Software, and to permit persons to whom the Software is
10+
// furnished to do so, subject to the following conditions:
11+
//
12+
// The above copyright notice and this permission notice shall be included in
13+
// all copies or substantial portions of the Software.
14+
//
15+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
// THE SOFTWARE.
22+
23+
import * as React from 'react';
24+
import {MenuListItem, MenuListItemProps} from '@material/react-menu'; // eslint-disable-line no-unused-vars
25+
26+
export type OptionProps<T extends HTMLElement = HTMLElement>
27+
= BaseOptionProps & (T extends HTMLOptionElement ? React.HTMLProps<HTMLOptionElement> : MenuListItemProps<T>);
28+
29+
interface BaseOptionProps {
30+
enhanced?: boolean;
31+
}
32+
33+
class Option<T extends HTMLElement = HTMLElement> extends React.Component<OptionProps<T>, {}> {
34+
static defaultProps = {
35+
enhanced: false,
36+
};
37+
38+
render() {
39+
const {
40+
value,
41+
enhanced,
42+
children,
43+
...otherProps
44+
} = this.props;
45+
46+
if (enhanced) {
47+
return (
48+
<MenuListItem
49+
data-value={value}
50+
{...otherProps}
51+
>
52+
{children}
53+
</MenuListItem>
54+
);
55+
}
56+
return (
57+
<option
58+
value={value}
59+
{...otherProps}
60+
>
61+
{children}
62+
</option>
63+
);
64+
}
65+
}
66+
67+
export default Option;

packages/select/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@
1818
"dependencies": {
1919
"@material/react-floating-label": "^0.11.0",
2020
"@material/react-line-ripple": "^0.11.0",
21+
"@material/react-menu": "^0.0.0",
2122
"@material/react-notched-outline": "^0.11.0",
22-
"@material/select": "^0.40.1",
23+
"@material/select": "^1.1.1",
2324
"classnames": "^2.2.6",
2425
"react": "^16.4.2"
2526
},

test/unit/select/Option.test.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from 'react';
2+
import {assert} from 'chai';
3+
import {shallow, mount} from 'enzyme';
4+
import Option from '../../../packages/select/Option';
5+
import {MenuListItem} from '../../../packages/menu/index';
6+
7+
suite('Select Options');
8+
9+
test('renders an option tag if not enhanced', () => {
10+
const wrapper = shallow(<Option />);
11+
assert.equal(wrapper.find('option').length, 1);
12+
});
13+
14+
test('renders an MenuListItem if enhanced', () => {
15+
const wrapper = shallow(<Option enhanced />);
16+
assert.equal(wrapper.find(MenuListItem).length, 1);
17+
});
18+
19+
test('renders an a value attribute if not enhanced', () => {
20+
const wrapper = mount(<Option value='test' />);
21+
assert.equal(wrapper.find('option').getDOMNode().getAttribute('value'), 'test');
22+
});
23+
24+
test('renders an a data-value attribute if enhanced', () => {
25+
const wrapper = mount(<Option enhanced data-value='test' />);
26+
assert.equal(wrapper.find(MenuListItem).getDOMNode().getAttribute('data-value'), 'test');
27+
});
28+

0 commit comments

Comments
 (0)