mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 14:10:04 +02:00
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:
parent
0b332cbeb6
commit
372fd02151
@ -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 (
|
||||
|
@ -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);
|
||||
@ -26,9 +25,8 @@
|
||||
border-color: var(--border-selected-color);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .label {
|
||||
color: #464646;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #464646;
|
||||
}
|
@ -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;
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
@ -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';
|
||||
}
|
@ -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'),
|
||||
|
@ -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')
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user