mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +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'),
|
||||
Column: require('./components/column/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')
|
||||
};
|
||||
|
@ -1,6 +1,7 @@
|
||||
module.exports = {
|
||||
Base: require('./components/base'),
|
||||
Button: require('./components/button'),
|
||||
Checkbox: require('./components/checkbox'),
|
||||
Column: require('./components/column'),
|
||||
Container: require('./components/container'),
|
||||
Row: require('./components/row'),
|
||||
|
Loading…
Reference in New Issue
Block a user