incomplete <Select> implementation

apparently styling <option> without fallbacking to ul/li
doesn't seem to be supported, even when in `multiple` mode
This commit is contained in:
Sérgio Ramos 2016-10-31 17:25:58 +00:00
parent 0b332cbeb6
commit 372fd02151
7 changed files with 157 additions and 26 deletions

View File

@ -39,7 +39,7 @@ nmodule.exports = ReactDOM.renderToString(
```js
const React = require('react');
const Radio = require('ui/radio');
const Input = require('ui/input');
module.exports = () => {
return (

View File

@ -9,8 +9,7 @@
--inset-box-shadow: ~boxes.insetShaddow;
}
.input-group {
& .input {
.input {
background: var(--background-color);
border: 1px solid var(--border-color);
box-shadow: var(--inset-box-shadow);
@ -28,7 +27,6 @@
}
}
& .label {
.label {
color: #464646;
}
}

View File

@ -1,11 +1,58 @@
// const classNames = require('classnames');
const classNames = require('classnames');
const React = require('react');
// const styles = require('./style.css');
const styles = require('./style.css');
const Select = () => {
return (<div />);
const Select = ({
autoFocus,
children,
className,
disabled,
form,
id,
label,
multiple,
name,
required,
selected
}) => {
const cn = classNames(
className,
styles['select-group']
);
return (
<div className={cn}>
<label className={styles.label} htmlFor={id}>{label}</label>
<select
autoFocus={autoFocus}
className={styles.select}
disabled={disabled}
form={form}
id={id}
label={label}
multiple={multiple}
name={name}
required={required}
selected={selected}
>
{children}
</select>
</div>
);
};
Select.propTypes = {};
Select.propTypes = {
autoFocus: React.PropTypes.bool,
children: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
form: React.PropTypes.string,
id: React.PropTypes.string,
label: React.PropTypes.string,
multiple: React.PropTypes.bool,
name: React.PropTypes.string,
required: React.PropTypes.bool,
selected: React.PropTypes.bool
};
module.exports = Select;

View File

@ -1 +1,60 @@
# Select
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Select = require('./index.js');
nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column xs={12}>
<Select label='example select'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Select>
</Column>
</Row>
<Row>
<Column xs={12}>
<Select multiple label='example multiple select'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Select>
</Column>
</Row>
</Base>
);
```
## usage
```js
const React = require('react');
const Select = require('ui/select');
module.exports = () => {
return (
<Select multiple label='example select'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Select>
);
}
```

View File

@ -0,0 +1,25 @@
.select {
composes: input from '../input/style.css';
&[multiple] {
padding-left: 0;
padding-right: 0;
& :global option {
padding-left: 15px;
padding-right: 15px;
width: 100%;
}
/* this doesn't seem to work, research further
&:-internal-list-box :global option:checked,
& :global option:checked {
background-color: white;
}
*/
}
}
.label {
composes: label from '../input/style.css';
}

View File

@ -12,6 +12,7 @@ module.exports = {
Input: require('./components/input/readme.md'),
Radio: require('./components/radio/readme.md'),
'Radio Group': require('./components/radio-group/readme.md'),
Select: require('./components/select/readme.md'),
Column: require('./components/column/readme.md'),
Button: require('./components/button/readme.md'),
'Range Slider': require('./components/range-slider/readme.md'),

View File

@ -13,5 +13,6 @@ module.exports = {
'Range Slider': require('./components/range-slider/'),
Radio: require('./components/radio'),
RadioGroup: require('./components/radio-group'),
Select: require('./components/select'),
Widget: require('./components/widget')
};