#762 Delete button for checkbox

src/assets/css/inputs.css

@@ -547,6 +547,14 @@ input:checked + .input-slider:before {
     font-size:18px;
 }
 
+.input-icon-checkbox {
+    top: -1px;
+    position: relative;
+    margin-left:.2rem;
+    color: $brand-font-color-weak;
+    cursor: pointer;
+}
+
 .input-icon-sm {
     font-size:10px;
     margin-right: 3px;

src/components/widget/Checkbox.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+
+class Checkbox extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    handleClear = () => {
+        const {handlePatch, widgetField, id} = this.props;
+        handlePatch(widgetField, '', id);
+    }
+
+    render() {
+        const {
+            widgetData, disabled, fullScreen, tabIndex, handlePatch,
+            widgetField, id, filterWidget
+        } = this.props;
+
+        return (
+            <div>
+                <label
+                    className={
+                        'input-checkbox ' +
+                        (widgetData[0].readonly || disabled ?
+                            'input-disabled ' : '')
+                    }
+                    tabIndex={fullScreen ? -1 : tabIndex}
+                    ref={c => this.rawWidget = c}
+                    onKeyDown={e => {
+                        if(e.key === ' '){
+                            e.preventDefault();
+                            this.rawWidget && this.rawWidget.click();
+                        }
+                    }}
+                >
+                    <input
+                        ref={c => this.rawWidget = c}
+                        type="checkbox"
+                        checked={widgetData[0].value}
+                        disabled={widgetData[0].readonly || disabled}
+                        onChange={(e) => handlePatch(
+                            widgetField, e.target.checked, id
+                        )}
+                        tabIndex="-1"
+                    />
+                    <div className="input-checkbox-tick" />
+                </label>
+                {(filterWidget && !disabled && !widgetData[0].readonly) ? 
+                    <span className="input-icon-checkbox input-icon-lg">
+                        <i
+                            onClick={this.handleClear}
+                            className="meta-icon-close-alt"
+                        />
+                    </span> : ''
+                }
+            </div>
+        );
+    }
+}
+
+export default Checkbox;

src/components/widget/RawWidget.js

@@ -7,6 +7,7 @@ import Lookup from './Lookup/Lookup';
 import DatetimeRange from './DatetimeRange';
 import List from './List/List';
 import ActionButton from './ActionButton';
+import Checkbox from './Checkbox';
 import Image from './Image';
 import DevicesWidget from './Devices/DevicesWidget';
 
@@ -483,33 +484,11 @@ class RawWidget extends Component {
                 )
             case 'YesNo':
                 return (
-                    <label
-                        className={
-                            'input-checkbox ' +
-                            (widgetData[0].readonly || disabled ?
-                                'input-disabled ' : '')
-                        }
-                        tabIndex={fullScreen ? -1 : tabIndex}
-                        ref={c => this.rawWidget = c}
-                        onKeyDown={e => {
-                            if(e.key === ' '){
-                                e.preventDefault();
-                                this.rawWidget && this.rawWidget.click();
-                            }
-                        }}
-                    >
-                        <input
-                            ref={c => this.rawWidget = c}
-                            type="checkbox"
-                            checked={widgetData[0].value}
-                            disabled={widgetData[0].readonly || disabled}
-                            onChange={(e) => this.handlePatch(
-                                widgetField, e.target.checked, id
-                            )}
-                            tabIndex="-1"
-                        />
-                        <div className="input-checkbox-tick" />
-                    </label>
+                    <Checkbox
+                        {...{widgetData, disabled, fullScreen, tabIndex, 
+                            widgetField, id, filterWidget}}
+                        handlePatch={this.handlePatch}
+                    />
                 )
             case 'Switch':
                 return (