@dvrd/dvr-controls 1.0.60 → 1.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/checkbox/checkbox.tsx

@@ -16,7 +16,7 @@ interface Props {
     onCheck: MouseEventHandler;
     onMouseEnter: MouseEventHandler;
     onMouseLeave: MouseEventHandler;
-    checked: boolean;
+    checked: boolean | 'partial';
     disabled: boolean;
     isHovered: boolean;
     label?: string;
@@ -117,6 +117,7 @@ export default function DvrdCheckbox(props: Props) {
         let checkName: IconName = 'check';
         if(typeof checkIcon === 'string') checkName = checkIcon as IconName;
         else if (asRadio) checkName = 'circle';
+        else if (checked === 'partial') checkName = 'minus';
         return <AwesomeIcon name={checkName} className={checkClassName} style={checkStyle}/>;
     }
 

package/src/js/checkbox/checkboxController.tsx

@@ -10,7 +10,7 @@ interface Props {
     onCheck: Function;
     onMouseEnter?: MouseEventHandler;
     onMouseLeave?: MouseEventHandler;
-    checked: boolean;
+    checked: boolean | 'partial';
     disabled?: boolean;
     label?: string;
     labelPosition?: 'left' | 'right';
@@ -42,13 +42,14 @@ export default function CheckboxController(props: Props) {
 
     function _onCheck(evt: React.MouseEvent<Element, Event>) {
         if (disabled) return;
+        const trueValues = [false, 'partial'];
+        const value = unControlled ? trueValues.includes(internalValue) : trueValues.includes(checked);
         if (unControlled) {
             evt.stopPropagation();
             evt.persist();
-            const nextInternal = !internalValue;
-            setInternalValue(nextInternal);
-            onCheck(nextInternal, evt);
-        } else onCheck(!checked, evt);
+            setInternalValue(value);
+            onCheck(value, evt);
+        } else onCheck(value, evt);
     }
 
     function onMouseEnter(evt: React.MouseEvent) {
@@ -107,109 +108,4 @@ export default function CheckboxController(props: Props) {
                       baseColor={baseColor} contrastColor={contrastColor} useDarkestColor={useDarkestColor ?? true}
                       asRadio={asRadio}/>
     )
-}
-
-// interface CheckboxState {
-//     isHovered: boolean;
-//     internalValue: boolean;
-// }
-//
-// class _CheckboxController extends React.Component<Props, CheckboxState> {
-//     static contextType = ControlContext;
-//
-//     static defaultProps = {
-//         disabled: false,
-//         label: '',
-//         labelPosition: 'right',
-//         containerClass: '',
-//         labelClass: '',
-//         checkboxClass: '',
-//         checkClass: '',
-//         errorClass: '',
-//         checkIcon: null,
-//         error: null,
-//         unControlled: false,
-//         useDarkestColor: true,
-//     };
-//
-//     private getContainer = (): HTMLElement | null => {
-//         return document.getElementById(this.id);
-//     };
-//
-//     private getRipple = (): HTMLElement | null => {
-//         const container = this.getContainer();
-//         if (container === null) return null;
-//         return container.querySelector('div.ripple');
-//     };
-//
-//     private id: string = generateComponentId(this.props.id);
-//
-//     state = {isHovered: false, internalValue: this.props.checked};
-//
-//     onCheck = (evt: React.MouseEvent<Element, Event>) => {
-//         const {checked, onCheck, disabled, unControlled} = this.props;
-//         if (disabled) return;
-//         if (unControlled) {
-//             evt.stopPropagation();
-//             evt.persist();
-//             this.setState({internalValue: !this.state.internalValue}, () => {
-//                 onCheck(this.state.internalValue, evt);
-//             });
-//         } else onCheck(!checked, evt);
-//         this.addRipple();
-//     };
-//
-//     onMouseEnter = () => {
-//         if (this.props.disabled) return;
-//         this.setState({isHovered: true});
-//     };
-//
-//     onMouseLeave = () => {
-//         if (this.props.disabled) return;
-//         this.setState({isHovered: false});
-//     };
-//
-//     addRipple = () => {
-//         const container = this.getContainer();
-//         if (container !== null) {
-//             const ripple = this.getRipple();
-//             if (ripple !== null) {
-//                 if (container.classList.contains('rippling'))
-//                     container.classList.remove('rippling');
-//                 ripple.addEventListener('transitionend', this.removeRipple);
-//                 container.classList.add('rippling');
-//             }
-//         }
-//     };
-//
-//     removeRipple = () => {
-//         const ripple = this.getRipple();
-//         const container = this.getContainer();
-//         if (ripple !== null && container !== null) {
-//             ripple.removeEventListener('transitionend', this.removeRipple);
-//             container.classList.remove('rippling');
-//         }
-//     };
-//
-//     componentDidUpdate = (prevProps: Props, prevState: CheckboxState) => {
-//         if (prevState.internalValue !== this.state.internalValue && this.state.internalValue) this.addRipple();
-//         else if (prevProps.checked !== this.props.checked && this.props.checked) this.addRipple();
-//     };
-//
-//     componentWillUnmount = () => {
-//         this.removeRipple();
-//     };
-//
-//     render = () => {
-//         const {
-//             checked, disabled, label, labelPosition, containerClass, labelClass, checkboxClass, checkClass, checkIcon,
-//             error, errorClass, unControlled, title, baseColor, contrastColor, useDarkestColor,
-//         } = this.props, {isHovered, internalValue} = this.state, isChecked = unControlled ? internalValue : checked;
-//         return <Checkbox onCheck={this.onCheck} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
-//                          checked={isChecked} disabled={disabled} isHovered={isHovered} label={label}
-//                          labelPosition={labelPosition} containerClass={containerClass} labelClass={labelClass}
-//                          checkboxClass={checkboxClass} checkClass={checkClass} id={this.id} checkIcon={checkIcon}
-//                          error={error} errorClass={errorClass} title={title} baseColor={baseColor}
-//                          contrastColor={contrastColor} useDarkestColor={useDarkestColor}/>
-//     }
-// }
+}