M-Labs
/
web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Add options for the cards #93

Merged
sb10q merged 42 commits from esavkin/web2019:85-variants into master 2023-11-28 15:32:34 +08:00
Conversation 24 Commits 42 Files Changed 9 +50 -22
2 changed files with 50 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4d5dd505ae - Show all commits

21
static/js/shop.jsx
View File

@ -711,11 +711,22 @@ class ProductCartItem extends React.PureComponent {
data={options_data} data={options_data}
key={"processed_options" + index} key={"processed_options" + index}
id={"processed_options" + index} id={"processed_options" + index}
target={((outvar, value) => { target={{
console.log(outvar, value); construct: ((outvar, value) => {
options_data[outvar] = value; //console.log("construct", outvar, value, options_data);
this.setState(options_data); options_data[outvar] = value;
})} this.setState(options_data);
}),
update: ((outvar, value) => {
//console.log("update", outvar, value, options_data);
if (outvar in options_data) options_data[outvar] = value;
this.setState(options_data);
}),
unmount: ((outvar) => {
//console.log("delete", outvar);
delete options_data[outvar];
})
}}
/> />
</div> </div>
) : null } ) : null }

51
static/js/shop_components.jsx
View File

@ -16,7 +16,11 @@ class Radio extends Component {
// Bind the event handler to this // Bind the event handler to this
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);
this.props.target(this.props.outvar, this.state.variant); this.props.target.construct(this.props.outvar, this.state.variant);
}
componentWillUnmount() {
this.props.target.unmount(this.props.outvar);
} }
handleClick(variant) { handleClick(variant) {
@ -25,7 +29,7 @@ class Radio extends Component {
...this.state, ...this.state,
variant: variant variant: variant
}); });
this.props.target(this.props.outvar, variant); this.props.target.update(this.props.outvar, variant);
} }
render() { render() {
@ -63,12 +67,16 @@ class Switch extends Component {
super(props); super(props);
// Initialize the state object with the initial values from the props // Initialize the state object with the initial values from the props
this.state = { this.state = {
checked: props.outvar in props.data ? props.data[props.outvar] : !!(props.fallback) checked: props.outvar in props.data ? props.data[props.outvar] : !!(props.fallback)
}; };
// Bind the event handler to this // Bind the event handler to this
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);
this.props.target(this.props.outvar, this.state.checked); this.props.target.construct(this.props.outvar, this.state.checked);
}
componentWillUnmount() {
this.props.target.unmount(this.props.outvar);
} }
handleClick() { handleClick() {
@ -77,7 +85,7 @@ class Switch extends Component {
this.setState({ this.setState({
checked: new_checked checked: new_checked
}); });
this.props.target(this.props.outvar, new_checked); this.props.target.update(this.props.outvar, new_checked);
} }
render() { render() {
@ -113,11 +121,15 @@ class Line extends Component {
super(props); super(props);
// Initialize the state object with the initial values from the props // Initialize the state object with the initial values from the props
this.state = { this.state = {
text: props.outvar in props.data ? props.data[props.outvar] : (props.fallback ? props.fallback : "") text: props.outvar in props.data ? props.data[props.outvar] : (props.fallback ? props.fallback : "")
}; };
// Bind the event handler to this // Bind the event handler to this
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);
this.props.target(this.props.outvar, this.state.text); this.props.target.construct(this.props.outvar, this.state.text);
}
componentWillUnmount() {
this.props.target.unmount(this.props.outvar);
} }
handleClick(element) { handleClick(element) {
@ -125,7 +137,7 @@ class Line extends Component {
this.setState({ this.setState({
text: text text: text
}); });
this.props.target(this.props.outvar, text); this.props.target.update(this.props.outvar, text);
} }
render() { render() {
@ -133,7 +145,8 @@ class Line extends Component {
return ( return (
<div className="shop-switch" key={this.props.id}> <div className="shop-switch" key={this.props.id}>
<label htmlFor={key} className="form-label">{this.props.title}: </label> <label htmlFor={key} className="form-label">{this.props.title}: </label>
<input type="email" className="form-control" id={key} onChange={this.handleClick} value={this.state.text} /> <input type="email" className="form-control" id={key} onChange={this.handleClick}
value={this.state.text}/>
</div> </div>
); );
} }
@ -148,13 +161,17 @@ class SwitchLine extends Component {
super(props); super(props);
// Initialize the state object with the initial values from the props // Initialize the state object with the initial values from the props
this.state = { this.state = {
text: props.outvar in props.data ? props.data[props.outvar].text : (props.fallback ? props.fallback.text : ""), 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) checked: props.outvar in props.data ? props.data[props.outvar].checked : (props.fallback ? props.fallback.checked : false)
}; };
// Bind the event handler to this // Bind the event handler to this
this.handleText = this.handleText.bind(this); this.handleText = this.handleText.bind(this);
this.handleCheck = this.handleCheck.bind(this); this.handleCheck = this.handleCheck.bind(this);
this.props.target(this.props.outvar, this.state); this.props.target.construct(this.props.outvar, this.state);
}
componentWillUnmount() {
this.props.target.unmount(this.props.outvar);
} }
handleText(element) { handleText(element) {
@ -163,7 +180,7 @@ class SwitchLine extends Component {
text: element.target.value text: element.target.value
} }
this.setState(new_state); this.setState(new_state);
this.props.target(this.props.outvar, new_state); this.props.target.update(this.props.outvar, new_state);
} }
handleCheck() { handleCheck() {
@ -173,7 +190,7 @@ class SwitchLine extends Component {
checked: !this.state.checked checked: !this.state.checked
} }
this.setState(new_state); this.setState(new_state);
this.props.target(this.props.outvar, new_state); this.props.target.update(this.props.outvar, new_state);
} }
render() { render() {
@ -186,16 +203,17 @@ class SwitchLine extends Component {
className="form-check-input" className="form-check-input"
type="checkbox" type="checkbox"
role="switch" role="switch"
id={key+"switch"} id={key + "switch"}
checked={this.state.checked} checked={this.state.checked}
onClick={this.handleCheck} onClick={this.handleCheck}
onChange={this.handleCheck} onChange={this.handleCheck}
/> />
<label className="form-check-label" htmlFor={key+"switch"}> <label className="form-check-label" htmlFor={key + "switch"}>
{this.props.title} {this.props.title}
</label> </label>
</div> </div>
<input type="email" className="form-control" id={key+"line"} onChange={this.handleText} value={this.state.text} disabled={!this.state.checked}/> <input type="email" className="form-control" id={key + "line"} onChange={this.handleText}
value={this.state.text} disabled={!this.state.checked}/>
</div> </div>
); );
} }
@ -206,7 +224,6 @@ function SwitchLineWrapper(target, id, data, {title, fallback, outvar}) {
} }
function UnimplementedComponent(type, id) { function UnimplementedComponent(type, id) {
//console.error("Missing component with type:", type) //console.error("Missing component with type:", type)
return <div key={type + id} style={{background: "red"}}>UNIMPLEMENTED</div> return <div key={type + id} style={{background: "red"}}>UNIMPLEMENTED</div>