Refactor #1920 - For TriStateCheckbox

primefaces · Mar 30, 2021 · 38e7df5 · 38e7df5
1 parent f27f0e5
commit 38e7df5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/components/tristatecheckbox/TriStateCheckbox.d.ts b/src/components/tristatecheckbox/TriStateCheckbox.d.ts
@@ -3,6 +3,7 @@ import TooltipOptions from '../tooltip/TooltipOptions';
 
 interface TriStateCheckboxProps {
     id?: string;
+    inputRef?: any;
     inputId?: string;
     value?: boolean | null;
     name?: string;

diff --git a/src/components/tristatecheckbox/TriStateCheckbox.js b/src/components/tristatecheckbox/TriStateCheckbox.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component, createRef } from 'react';
 import PropTypes from 'prop-types';
 import { classNames } from '../utils/ClassNames';
 import { tip } from '../tooltip/Tooltip';
@@ -7,6 +7,7 @@ export class TriStateCheckbox extends Component {
 
     static defaultProps = {
         id: null,
+        inputRef: null,
         inputId: null,
         value: null,
         name: null,
@@ -21,6 +22,7 @@ export class TriStateCheckbox extends Component {
 
     static propTypes = {
         id: PropTypes.string,
+        inputRef: PropTypes.any,
         inputId: PropTypes.string,
         value: PropTypes.bool,
         name: PropTypes.string,
@@ -43,12 +45,14 @@ export class TriStateCheckbox extends Component {
         this.onClick = this.onClick.bind(this);
         this.onFocus = this.onFocus.bind(this);
         this.onBlur = this.onBlur.bind(this);
+
+        this.inputRef = createRef(this.props.inputRef);
     }
 
     onClick(event) {
         if (!this.props.disabled) {
             this.toggle(event);
-            this.inputEL.focus();
+            this.inputRef.current.focus();
         }
     }
 
@@ -84,7 +88,22 @@ export class TriStateCheckbox extends Component {
         this.setState({ focused: false });
     }
 
+    updateInputRef() {
+        let ref = this.props.inputRef;
+
+        if (ref) {
+            if (typeof ref === 'function') {
+                ref(this.inputRef.current);
+            }
+            else {
+                ref.current = this.inputRef.current;
+            }
+        }
+    }
+
     componentDidMount() {
+        this.updateInputRef();
+
         if (this.props.tooltip && !this.props.disabled) {
             this.renderTooltip();
         }
@@ -129,8 +148,8 @@ export class TriStateCheckbox extends Component {
         return (
             <div ref={el => this.element = el} id={this.props.id} className={containerClass} style={this.props.style} onClick={this.onClick}>
                 <div className="p-hidden-accessible">
-                    <input ref={(el) => this.inputEL = el} type="checkbox" aria-labelledby={this.props.ariaLabelledBy} id={this.props.inputId} name={this.props.name}
-                           onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled} />
+                    <input ref={this.inputRef} type="checkbox" aria-labelledby={this.props.ariaLabelledBy} id={this.props.inputId} name={this.props.name}
+                           onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled} defaultChecked={this.props.value} />
                 </div>
                 <div className={boxClass} ref={el => this.box = el} role="checkbox" aria-checked={this.props.value === true}>
                     <span className={iconClass}></span>