schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-27 10:35:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix for checkboxes within non-clickable label

Browse source
This commit is contained in:
orangemug 2020-06-10 19:20:42 +01:00
parent b83c9a1ad9
commit 06bccfab10
2 changed files with 20 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/Block.jsx
View file

@ -51,35 +51,34 @@ export default class Block extends React.Component {
const nativeEvent = event.nativeEvent; const nativeEvent = event.nativeEvent;
const contains = this._blockEl.contains(el); const contains = this._blockEl.contains(el);
if (event.nativeEvent.target.nodeName !== "INPUT" && contains) { if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault();
} }
event.preventDefault();
} }
render() { render() {
const errors = [].concat(this.props.error || []); const errors = [].concat(this.props.error || []);
return <div style={this.props.style} return <label style={this.props.style}
data-wd-key={this.props["data-wd-key"]} data-wd-key={this.props["data-wd-key"]}
className={classnames({ className={classnames({
"maputnik-input-block": true, "maputnik-input-block": true,
"maputnik-input-block--wide": this.props.wideMode, "maputnik-input-block--wide": this.props.wideMode,
"maputnik-action-block": this.props.action "maputnik-action-block": this.props.action
})} })}
onClick={this.onLabelClick}
> >
<label onClick={this.onLabelClick}> <div className="maputnik-input-block-label">
<div className="maputnik-input-block-label"> {this.props.label}
{this.props.label} </div>
</div> <div className="maputnik-input-block-action">
<div className="maputnik-input-block-action"> {this.props.action}
{this.props.action} </div>
</div> <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
<div className="maputnik-input-block-content" ref={el => this._blockEl = el}> {this.props.children}
{this.props.children} </div>
</div> </label>
</label>
</div>
} }
} }

7
src/components/InputCheckbox.jsx
View file

@ -12,13 +12,18 @@ export default class InputCheckbox extends React.Component {
value: false, value: false,
} }
onChange = () => {
this.props.onChange(!this.props.value);
}
render() { render() {
return <div className="maputnik-checkbox-wrapper"> return <div className="maputnik-checkbox-wrapper">
<input <input
className="maputnik-checkbox" className="maputnik-checkbox"
type="checkbox" type="checkbox"
style={this.props.style} style={this.props.style}
onChange={e => this.props.onChange(!this.props.value)} onChange={this.onChange}
onClick={this.onChange}
checked={this.props.value} checked={this.props.value}
/> />
<div className="maputnik-checkbox-box"> <div className="maputnik-checkbox-box">