Widget
Fixing HTML attributes for single select and multi select, and adding disabled option
This commit is contained in:
parent
b933eff47b
commit
aa3c940674
@ -3,11 +3,14 @@ const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const Widget = ({
|
||||
checked = false,
|
||||
children,
|
||||
selectable = 'single',
|
||||
name,
|
||||
className,
|
||||
style
|
||||
disabled = false,
|
||||
name,
|
||||
selectable = 'single',
|
||||
style,
|
||||
value = name
|
||||
}) => {
|
||||
|
||||
const cn = classNames(
|
||||
@ -18,11 +21,15 @@ const Widget = ({
|
||||
const type = selectable === 'single' ? 'radio' : 'checkbox';
|
||||
|
||||
return (
|
||||
<label className={cn} htmlFor={name}>
|
||||
<label className={cn} htmlFor={value}>
|
||||
<input
|
||||
checked={checked}
|
||||
className={styles.input}
|
||||
disabled={disabled}
|
||||
id={value}
|
||||
name={name}
|
||||
type={type}
|
||||
value={value}
|
||||
/>
|
||||
<div className={styles.content}>
|
||||
{children}
|
||||
@ -32,11 +39,14 @@ const Widget = ({
|
||||
};
|
||||
|
||||
Widget.propTypes = {
|
||||
checked: React.PropTypes.bool,
|
||||
children: React.PropTypes.object,
|
||||
className: React.PropTypes.string,
|
||||
disabled: React.PropTypes.bool,
|
||||
name: React.PropTypes.string,
|
||||
selectable: React.PropTypes.string,
|
||||
style: React.PropTypes.object
|
||||
style: React.PropTypes.object,
|
||||
value: React.PropTypes.string
|
||||
};
|
||||
|
||||
module.exports = Widget;
|
||||
|
@ -17,14 +17,14 @@ nmodule.exports = ReactDOM.renderToString(
|
||||
<h2>Single Option Select</h2>
|
||||
<Row>
|
||||
<Column xs={2}>
|
||||
<Widget selectable="single" name='flag1'>
|
||||
<Widget checked selectable="single" name='flag' value='flag_1'>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
</Column>
|
||||
|
||||
<Column xs={2}>
|
||||
<Widget selectable="single" name='flag2'>
|
||||
<Widget selectable="single" name='flag' value='flag_2'>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
@ -34,14 +34,31 @@ nmodule.exports = ReactDOM.renderToString(
|
||||
<h2>Multi Option Select</h2>
|
||||
<Row>
|
||||
<Column xs={2}>
|
||||
<Widget selectable="multiple" name='flag1'>
|
||||
<Widget checked selectable="multiple" name='flag_3'>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
</Column>
|
||||
|
||||
<Column xs={2}>
|
||||
<Widget selectable="multiple" name='flag2'>
|
||||
<Widget checked selectable="multiple" name='flag_4'>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
</Column>
|
||||
|
||||
<Column xs={2}>
|
||||
<Widget selectable="multiple" name='flag_5'>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<h2>Disabled</h2>
|
||||
<Row>
|
||||
<Column xs={2}>
|
||||
<Widget selectable="multiple" name='flag_5' disabled>
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Union_flag_1606_(Kings_Colors).svg/2000px-Union_flag_1606_(Kings_Colors).svg.png" />
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
@ -57,14 +74,39 @@ nmodule.exports = ReactDOM.renderToString(
|
||||
const React = require('react');
|
||||
const Widget = require('ui/widget');
|
||||
|
||||
// For Single Select
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Widget selectable="single" name='flag1'>
|
||||
<Widget selectable="single" name='flag' value="flag_1">
|
||||
<img src="someimage.png" />
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
|
||||
<Widget selectable="multiple" name='flag2'>
|
||||
<Widget selectable="multiple" name='flag' value="flag_2">
|
||||
<img src="someimage.png" />
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
);
|
||||
}
|
||||
|
||||
// For Multiple Selection
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Widget selectable="single" name='flag_3'>
|
||||
<img src="someimage.png" />
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
|
||||
<Widget selectable="multiple" name='flag_4'>
|
||||
<img src="someimage.png" />
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
);
|
||||
|
||||
// Disabled
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Widget disabled selectable="single" name='flag_5'>
|
||||
<img src="someimage.png" />
|
||||
<p>Some text</p>
|
||||
</Widget>
|
||||
|
@ -1,4 +1,5 @@
|
||||
.content {
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d8d8d8;
|
||||
padding: remCalc(36);
|
||||
@ -16,4 +17,12 @@
|
||||
border: 1px solid #2532bb;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
& ~ .content {
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(80%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user