Add switchline compact design

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-08-18 16:21:56 +08:00
parent ff8a6d54bc
commit ac87fede4b
2 changed files with 65 additions and 0 deletions

View File

@ -712,6 +712,7 @@ class ProductCartItem extends React.PureComponent {
key={"processed_options" + index} key={"processed_options" + index}
id={"processed_options" + index} id={"processed_options" + index}
target={((outvar, value) => { target={((outvar, value) => {
console.log(outvar, value);
options_data[outvar] = value; options_data[outvar] = value;
this.setState(options_data); this.setState(options_data);
})} })}

View File

@ -143,6 +143,69 @@ function LineWrapper(target, id, data, {title, fallback, outvar}) {
return <Line target={target} title={title} fallback={fallback} outvar={outvar} key={id} id={id} data={data}/>; return <Line target={target} title={title} fallback={fallback} outvar={outvar} key={id} id={id} data={data}/>;
} }
class SwitchLine extends Component {
constructor(props) {
super(props);
// Initialize the state object with the initial values from the props
this.state = {
text: props.outvar in props.data ? props.data[props.outvar].text : (props.fallback ? props.fallback.text : ""),
checked: props.outvar in props.data ? props.data[props.outvar].checked : (props.fallback ? props.fallback.checked : false)
};
// Bind the event handler to this
this.handleText = this.handleText.bind(this);
this.handleCheck = this.handleCheck.bind(this);
this.props.target(this.props.outvar, this.state);
}
handleText(element) {
let new_state = {
...this.state,
text: element.target.value
}
this.setState(new_state);
this.props.target(this.props.outvar, new_state);
}
handleCheck() {
// Update the state object with the new value for outvar
let new_state = {
text: !this.state.checked ? this.state.text : "",
checked: !this.state.checked
}
this.setState(new_state);
this.props.target(this.props.outvar, new_state);
}
render() {
let key = this.props.id + this.props.outvar;
return (
<div className="shop-switch-line" key={this.props.id}>
<div className="form-check form-switch" key={key}>
<input
className="form-check-input"
type="checkbox"
role="switch"
id={key+"switch"}
checked={this.state.checked}
onClick={this.handleCheck}
onChange={this.handleCheck}
/>
<label className="form-check-label" htmlFor={key+"switch"}>
{this.props.title}
</label>
</div>
<input type="email" className="form-control" id={key+"line"} onChange={this.handleText} value={this.state.text} disabled={!this.state.checked}/>
</div>
);
}
}
function SwitchLineWrapper(target, id, data, {title, fallback, outvar}) {
return <SwitchLine target={target} title={title} fallback={fallback} outvar={outvar} key={id} id={id} data={data}/>;
}
function UnimplementedComponent(type, id) { function UnimplementedComponent(type, id) {
//console.error("Missing component with type:", type) //console.error("Missing component with type:", type)
@ -153,6 +216,7 @@ const componentsList = {
"Radio": RadioWrapper, "Radio": RadioWrapper,
"Switch": SwitchWrapper, "Switch": SwitchWrapper,
"Line": LineWrapper, "Line": LineWrapper,
"SwitchLine": SwitchLineWrapper,
"Default": UnimplementedComponent, "Default": UnimplementedComponent,
}; };