Make it update state
Signed-off-by: Egor Savkin <es@m-labs.hk>
parent
b8a293f34a
commit
aad1386002
|
|
@ -7,6 +7,9 @@
|
|||
"": {
|
||||
"name": "m-labs-zola",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"json-logic-js": "^2.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.22.6",
|
||||
"@babel/core": "^7.22.8",
|
||||
|
|
@ -3540,6 +3543,11 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/json-logic-js": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/json-logic-js/-/json-logic-js-2.0.2.tgz",
|
||||
"integrity": "sha512-ZBtBdMJieqQcH7IX/LaBsr5pX+Y5JIW+EhejtM3Ffg2jdN9Iwf+Ht6TbHnvAZ/YtwyuhPaCBlnvzrwVeWdvGDQ=="
|
||||
},
|
||||
"node_modules/json-parse-even-better-errors": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
|
||||
|
|
|
|||
|
|
@ -718,7 +718,16 @@ class ProductCartItem extends React.PureComponent {
|
|||
style={{'display': (model.showOverlayRemove && options) ? 'flex' : 'none'}}
|
||||
className="overlayVariant">
|
||||
|
||||
{ProcessOptions({options: options, data: options_data, target: options_data})}
|
||||
<ProcessOptions
|
||||
options={options}
|
||||
data={options_data}
|
||||
key={"processed_options" + index}
|
||||
id={"processed_options" + index}
|
||||
target={((outvar, value) => {
|
||||
options_data[outvar] = value;
|
||||
this.setState(options_data);
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
) : null }
|
||||
|
||||
|
|
@ -877,6 +886,7 @@ class Cart extends React.PureComponent {
|
|||
isMobile={isMobile}
|
||||
hovered={item.id === itemHovered}
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
index={index}
|
||||
data={itemData}
|
||||
shouldTooltipWarningClassInverted={shouldTooltipWarningClassInverted && index > 10}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,92 @@
|
|||
'use strict';
|
||||
|
||||
import React, {useState} from "react";
|
||||
import React, {Component} from "react";
|
||||
import jsonLogic from 'json-logic-js';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import {v4 as uuidv4} from 'uuid';
|
||||
|
||||
// https://stackoverflow.com/a/70511311
|
||||
const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
|
||||
|
||||
function Radio(target, {title, variants, outvar}) {
|
||||
console.log(target)
|
||||
function handleClick(variant) {
|
||||
console.log(variant)
|
||||
target[outvar] = variant;
|
||||
//this.setState()
|
||||
class Radio extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// Initialize the state object with the initial values from the props
|
||||
this.state = {
|
||||
target: props.target,
|
||||
outvar: props.outvar,
|
||||
variants: props.variants,
|
||||
variant: props.variants[0],
|
||||
id: props.id
|
||||
};
|
||||
|
||||
// Bind the event handler to this
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
this.state.target(this.state.outvar, this.state.variant);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="shop-radio" key={uuidv4()}>
|
||||
{title}
|
||||
{variants.map((variant, _) => (
|
||||
<div className="form-check" key={outvar + variant}>
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="radio"
|
||||
name={outvar}
|
||||
id={outvar + variant}
|
||||
checked={target[outvar] === variant}
|
||||
onClick={() => handleClick(variant)}
|
||||
onChange={() => handleClick(variant)}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor={outvar + variant}>
|
||||
{variant}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
handleClick(variant) {
|
||||
console.log(variant);
|
||||
// Update the state object with the new value for outvar
|
||||
this.setState({
|
||||
...this.state,
|
||||
variant: variant
|
||||
});
|
||||
this.state.target(this.state.outvar, variant);
|
||||
}
|
||||
|
||||
render() {
|
||||
let key = this.state.id + this.state.outvar;
|
||||
return (
|
||||
<div className="shop-radio" key={this.state.id}>
|
||||
{this.props.title}
|
||||
{this.props.variants.map((variant, _) => (
|
||||
<div className="form-check" key={key + variant}>
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="radio"
|
||||
name={key}
|
||||
id={key + variant}
|
||||
checked={this.state.variant === variant}
|
||||
onClick={() => this.handleClick(variant)}
|
||||
onChange={() => this.handleClick(variant)}
|
||||
/>
|
||||
<label className="form-check-label" htmlFor={key + variant}>
|
||||
{variant}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function MissingComponent(...args) {
|
||||
console.error("Missing component with args:", args)
|
||||
return <label style={{background: "red"}}>MISSING</label>
|
||||
function RadioWrapper(target, id, {title, variants, outvar}) {
|
||||
return <Radio target={target} title={title} variants={variants} outvar={outvar} key={id} id={id}/>;
|
||||
}
|
||||
|
||||
|
||||
function MissingComponent(type, id) {
|
||||
//console.error("Missing component with type:", type)
|
||||
return <div key={type + id} style={{background: "red"}}>MISSING</div>
|
||||
}
|
||||
|
||||
const componentsList = {
|
||||
"Radio": Radio,
|
||||
"Radio": RadioWrapper,
|
||||
"Default": MissingComponent,
|
||||
};
|
||||
|
||||
|
||||
export default function ProcessOptions({options, data, target}) {
|
||||
export default function ProcessOptions({options, data, target, id}) {
|
||||
let options_t = trueTypeOf(options);
|
||||
|
||||
if (options_t === "array") {
|
||||
return Array.from(
|
||||
options.map((option_item, _) => ProcessOptions({options: option_item, data: data, target: target}))
|
||||
options.map((option_item, i) => ProcessOptions({
|
||||
options: option_item,
|
||||
data: data,
|
||||
target: target,
|
||||
id: id + i
|
||||
}))
|
||||
);
|
||||
} else if (options_t === "object") {
|
||||
if (
|
||||
|
|
@ -62,12 +94,12 @@ export default function ProcessOptions({options, data, target}) {
|
|||
trueTypeOf(options.args) === "object"
|
||||
) {
|
||||
if (options.type in componentsList) {
|
||||
return componentsList[options.type](target, options.args);
|
||||
}else {
|
||||
return componentsList["Default"](target, options.args);
|
||||
return componentsList[options.type](target, id + options.type, options.args);
|
||||
} else {
|
||||
return componentsList["Default"](options.type, id + "missing");
|
||||
}
|
||||
} else {
|
||||
return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target});
|
||||
return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target, id: id});
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue