mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
initial implementation of checkbox ui component
This commit is contained in:
parent
c182bc2e76
commit
88df5fce34
44
ui/src/components/checkbox/index.js
Normal file
44
ui/src/components/checkbox/index.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
const classNames = require('classnames');
|
||||||
|
const React = require('react');
|
||||||
|
const styles = require('./style.css');
|
||||||
|
|
||||||
|
const Checkbox = ({
|
||||||
|
checked = false,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
disabled = false,
|
||||||
|
onChange,
|
||||||
|
style
|
||||||
|
}) => {
|
||||||
|
const cn = classNames(
|
||||||
|
className,
|
||||||
|
styles.checkbox,
|
||||||
|
checked ? styles.checked : '',
|
||||||
|
disabled ? styles.disabled : ''
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<label className={styles.label}>
|
||||||
|
<input
|
||||||
|
className={cn}
|
||||||
|
style={style}
|
||||||
|
checked={checked}
|
||||||
|
onChange={onChange}
|
||||||
|
disabled={disabled}
|
||||||
|
type='checkbox'
|
||||||
|
/>
|
||||||
|
<span>{children}</span>
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Checkbox.propTypes = {
|
||||||
|
children: React.PropTypes.node,
|
||||||
|
className: React.PropTypes.string,
|
||||||
|
checked: React.PropTypes.bool,
|
||||||
|
disabled: React.PropTypes.bool,
|
||||||
|
onChange: React.PropTypes.func,
|
||||||
|
style: React.PropTypes.object
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Checkbox;
|
42
ui/src/components/checkbox/readme.md
Normal file
42
ui/src/components/checkbox/readme.md
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
# `<Checkbox>`
|
||||||
|
|
||||||
|
## 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 Checkbox = require('./index.js');
|
||||||
|
const styles = require('./style.css');
|
||||||
|
|
||||||
|
nmodule.exports = ReactDOM.renderToString(
|
||||||
|
<Base>
|
||||||
|
<Container>
|
||||||
|
<Row>
|
||||||
|
<Column>
|
||||||
|
<Checkbox checked>
|
||||||
|
Checkbox checked
|
||||||
|
</Checkbox>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Column>
|
||||||
|
<Checkbox>
|
||||||
|
Checkbox unchecked
|
||||||
|
</Checkbox>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Column>
|
||||||
|
<Checkbox disabled>
|
||||||
|
Checkbox disabled
|
||||||
|
</Checkbox>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
</Base>
|
||||||
|
);
|
||||||
|
```
|
8
ui/src/components/checkbox/style.css
Normal file
8
ui/src/components/checkbox/style.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
input[type='checkbox'] {
|
||||||
|
&.checkbox {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #646464;
|
||||||
|
}
|
@ -10,7 +10,8 @@ module.exports = {
|
|||||||
Row: require('./components/row/readme.md'),
|
Row: require('./components/row/readme.md'),
|
||||||
Column: require('./components/column/readme.md'),
|
Column: require('./components/column/readme.md'),
|
||||||
Button: require('./components/button/readme.md'),
|
Button: require('./components/button/readme.md'),
|
||||||
Toggle: require('./components/toggle/readme.md')
|
Toggle: require('./components/toggle/readme.md'),
|
||||||
|
Checkbox: require('./components/checkbox/readme.md')
|
||||||
},
|
},
|
||||||
FAQ: require('./faq.md')
|
FAQ: require('./faq.md')
|
||||||
};
|
};
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
Base: require('./components/base'),
|
Base: require('./components/base'),
|
||||||
Button: require('./components/button'),
|
Button: require('./components/button'),
|
||||||
|
Checkbox: require('./components/checkbox'),
|
||||||
Column: require('./components/column'),
|
Column: require('./components/column'),
|
||||||
Container: require('./components/container'),
|
Container: require('./components/container'),
|
||||||
Row: require('./components/row'),
|
Row: require('./components/row'),
|
||||||
|
Loading…
Reference in New Issue
Block a user