Add switchline compact design

Signed-off-by: Egor Savkin <es@m-labs.hk>

static/js/shop.jsx

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

static/js/shop_components.jsx

@@ -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}/>;
 }
 
+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) {
     //console.error("Missing component with type:", type)
@@ -153,6 +216,7 @@ const componentsList = {
     "Radio": RadioWrapper,
     "Switch": SwitchWrapper,
     "Line": LineWrapper,
+    "SwitchLine": SwitchLineWrapper,
     "Default": UnimplementedComponent,
 };