Fixing HTML attributes for single select and multi select, and
adding disabled option
This commit is contained in:
Alex Windett 2016-10-28 16:01:23 +01:00
parent b933eff47b
commit aa3c940674
3 changed files with 72 additions and 11 deletions

View File

@ -3,11 +3,14 @@ const React = require('react');
const styles = require('./style.css'); const styles = require('./style.css');
const Widget = ({ const Widget = ({
checked = false,
children, children,
selectable = 'single',
name,
className, className,
style disabled = false,
name,
selectable = 'single',
style,
value = name
}) => { }) => {
const cn = classNames( const cn = classNames(
@ -18,11 +21,15 @@ const Widget = ({
const type = selectable === 'single' ? 'radio' : 'checkbox'; const type = selectable === 'single' ? 'radio' : 'checkbox';
return ( return (
<label className={cn} htmlFor={name}> <label className={cn} htmlFor={value}>
<input <input
checked={checked}
className={styles.input} className={styles.input}
disabled={disabled}
id={value}
name={name} name={name}
type={type} type={type}
value={value}
/> />
<div className={styles.content}> <div className={styles.content}>
{children} {children}
@ -32,11 +39,14 @@ const Widget = ({
}; };
Widget.propTypes = { Widget.propTypes = {
checked: React.PropTypes.bool,
children: React.PropTypes.object, children: React.PropTypes.object,
className: React.PropTypes.string, className: React.PropTypes.string,
disabled: React.PropTypes.bool,
name: React.PropTypes.string, name: React.PropTypes.string,
selectable: React.PropTypes.string, selectable: React.PropTypes.string,
style: React.PropTypes.object style: React.PropTypes.object,
value: React.PropTypes.string
}; };
module.exports = Widget; module.exports = Widget;

View File

@ -17,14 +17,14 @@ nmodule.exports = ReactDOM.renderToString(
<h2>Single Option Select</h2> <h2>Single Option Select</h2>
<Row> <Row>
<Column xs={2}> <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" /> <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> <p>Some text</p>
</Widget> </Widget>
</Column> </Column>
<Column xs={2}> <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" /> <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> <p>Some text</p>
</Widget> </Widget>
@ -34,14 +34,31 @@ nmodule.exports = ReactDOM.renderToString(
<h2>Multi Option Select</h2> <h2>Multi Option Select</h2>
<Row> <Row>
<Column xs={2}> <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" /> <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> <p>Some text</p>
</Widget> </Widget>
</Column> </Column>
<Column xs={2}> <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" /> <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> <p>Some text</p>
</Widget> </Widget>
@ -57,14 +74,39 @@ nmodule.exports = ReactDOM.renderToString(
const React = require('react'); const React = require('react');
const Widget = require('ui/widget'); const Widget = require('ui/widget');
// For Single Select
module.exports = () => { module.exports = () => {
return ( return (
<Widget selectable="single" name='flag1'> <Widget selectable="single" name='flag' value="flag_1">
<img src="someimage.png" /> <img src="someimage.png" />
<p>Some text</p> <p>Some text</p>
</Widget> </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" /> <img src="someimage.png" />
<p>Some text</p> <p>Some text</p>
</Widget> </Widget>

View File

@ -1,4 +1,5 @@
.content { .content {
cursor: pointer;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d8d8d8; border: 1px solid #d8d8d8;
padding: remCalc(36); padding: remCalc(36);
@ -16,4 +17,12 @@
border: 1px solid #2532bb; border: 1px solid #2532bb;
} }
} }
&:disabled {
& ~ .content {
cursor: not-allowed;
filter: grayscale(80%);
opacity: 0.4;
}
}
} }