Fixed #1738 - Rename 'readonly' property with 'readOnly' on all compo…

…nents
primefaces · Dec 26, 2020 · cd4c54b · cd4c54b
1 parent cdd47c1
commit cd4c54b
Show file tree

Hide file tree

Showing 31 changed files with 91 additions and 97 deletions.
diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
@@ -22,7 +22,7 @@ interface AutoCompleteProps {
     panelClassName?: string;
     panelStyle?: object;
     placeholder?: string;
-    readonly?: boolean;
+    readOnly?: boolean;
     disabled?: boolean;
     maxlength?: number;
     size?: number;

diff --git a/src/components/autocomplete/AutoComplete.js b/src/components/autocomplete/AutoComplete.js
@@ -35,7 +35,7 @@ export class AutoComplete extends Component {
         panelClassName: null,
         panelStyle: null,
         placeholder: null,
-        readonly: false,
+        readOnly: false,
         disabled: false,
         maxlength: null,
         size: null,
@@ -84,7 +84,7 @@ export class AutoComplete extends Component {
         panelClassName: PropTypes.string,
         panelStyle: PropTypes.object,
         placeholder: PropTypes.string,
-        readonly: PropTypes.bool,
+        readOnly: PropTypes.bool,
         disabled: PropTypes.bool,
         maxlength: PropTypes.number,
         size: PropTypes.number,
@@ -614,7 +614,7 @@ export class AutoComplete extends Component {
             <InputText ref={(el) => this.inputEl = ReactDOM.findDOMNode(el)} id={this.props.inputId} type={this.props.type} name={this.props.name}
                         defaultValue={this.formatValue(this.props.value)} role="searchbox" aria-autocomplete="list" aria-controls={this.listId}
                         aria-labelledby={this.props.ariaLabelledBy} className={inputClassName} style={this.props.inputStyle} autoComplete="off"
-                        readOnly={this.props.readonly} disabled={this.props.disabled} placeholder={this.props.placeholder} size={this.props.size}
+                        readOnly={this.props.readOnly} disabled={this.props.disabled} placeholder={this.props.placeholder} size={this.props.size}
                         maxLength={this.props.maxlength} tabIndex={this.props.tabIndex}
                         onBlur={this.onInputBlur} onFocus={this.onInputFocus} onChange={this.onInputChange}
                         onMouseDown={this.props.onMouseDown} onKeyUp={this.props.onKeyUp} onKeyDown={this.onInputKeyDown}

diff --git a/src/components/colorpicker/ColorPicker.js b/src/components/colorpicker/ColorPicker.js
@@ -594,7 +594,7 @@ export class ColorPicker extends Component {
             let inputProps = ObjectUtils.findDiffKeys(this.props, ColorPicker.defaultProps);
 
             return (
-                <input ref={(el) => this.input = el} type="text" className={inputClassName} readOnly="readonly" id={this.props.inputId} tabIndex={this.props.tabIndex} disabled={this.props.disabled}
+                <input ref={(el) => this.input = el} type="text" className={inputClassName} readOnly id={this.props.inputId} tabIndex={this.props.tabIndex} disabled={this.props.disabled}
                     onClick={this.onInputClick} onKeyDown={this.onInputKeydown} {...inputProps}/>
             );
         }

diff --git a/src/components/inputmask/InputMask.d.ts b/src/components/inputmask/InputMask.d.ts
@@ -16,7 +16,7 @@ interface InputMaskProps {
     maxlength?: number;
     tabIndex?: number;
     disabled?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     name?: string;
     required?: boolean;
     tooltip?: any;

diff --git a/src/components/inputmask/InputMask.js b/src/components/inputmask/InputMask.js
@@ -23,7 +23,7 @@ export class InputMask extends Component {
         maxlength: null,
         tabIndex: null,
         disabled: false,
-        readonly: false,
+        readOnly: false,
         name: null,
         required: false,
         tooltip: null,
@@ -50,7 +50,7 @@ export class InputMask extends Component {
         maxlength: PropTypes.number,
         tabIndex: PropTypes.number,
         disabled: PropTypes.bool,
-        readonly: PropTypes.bool,
+        readOnly: PropTypes.bool,
         name: PropTypes.string,
         required: PropTypes.bool,
         tooltip: PropTypes.string,
@@ -227,7 +227,7 @@ export class InputMask extends Component {
     }
 
     onKeyDown(e) {
-        if (this.props.readonly) {
+        if (this.props.readOnly) {
             return;
         }
 
@@ -267,7 +267,7 @@ export class InputMask extends Component {
     }
 
     onKeyPress(e) {
-        if (this.props.readonly) {
+        if (this.props.readOnly) {
             return;
         }
 
@@ -391,7 +391,7 @@ export class InputMask extends Component {
     }
 
     onFocus(e) {
-        if (this.props.readonly) {
+        if (this.props.readOnly) {
             return;
         }
 
@@ -430,7 +430,7 @@ export class InputMask extends Component {
     }
 
     handleInputChange(e) {
-        if (this.props.readonly) {
+        if (this.props.readOnly) {
             return;
         }
 
@@ -605,7 +605,7 @@ export class InputMask extends Component {
         let inputMaskClassName = classNames('p-inputmask', this.props.className);
         return (
             <InputText id={this.props.id} ref={(el) => this.input = ReactDOM.findDOMNode(el)} type={this.props.type} name={this.props.name} style={this.props.style} className={inputMaskClassName} placeholder={this.props.placeholder}
-                size={this.props.size} maxLength={this.props.maxlength} tabIndex={this.props.tabIndex} disabled={this.props.disabled} readOnly={this.props.readonly}
+                size={this.props.size} maxLength={this.props.maxlength} tabIndex={this.props.tabIndex} disabled={this.props.disabled} readOnly={this.props.readOnly}
                 onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown} onKeyPress={this.onKeyPress}
                 onInput={this.onInput} onPaste={this.handleInputChange} required={this.props.required} aria-labelledby={this.props.ariaLabelledBy} />
         );

diff --git a/src/components/inputnumber/InputNumber.d.ts b/src/components/inputnumber/InputNumber.d.ts
@@ -32,7 +32,7 @@ interface InputNumberProps {
     pattern?: string;
     inputMode?: string;
     placeholder?: string;
-    readonly?: boolean;
+    readOnly?: boolean;
     size?: number;
     style?: object;
     className?: string;

diff --git a/src/components/inputnumber/InputNumber.js b/src/components/inputnumber/InputNumber.js
@@ -39,7 +39,7 @@ export class InputNumber extends Component {
         pattern: null,
         inputMode: null,
         placeholder: null,
-        readonly: false,
+        readOnly: false,
         size: null,
         style: null,
         className: null,
@@ -87,7 +87,7 @@ export class InputNumber extends Component {
         pattern: PropTypes.string,
         inputMode: PropTypes.string,
         placeholder: PropTypes.string,
-        readonly: PropTypes.bool,
+        readOnly: PropTypes.bool,
         size: PropTypes.number,
         style: PropTypes.object,
         className: PropTypes.string,
@@ -942,7 +942,7 @@ export class InputNumber extends Component {
             <InputText ref={(el) => this.inputEl = ReactDOM.findDOMNode(el)} id={this.props.inputId} style={this.props.inputStyle} role="spinbutton"
                        className={className} defaultValue={valueToRender} type={this.props.type} size={this.props.size} tabIndex={this.props.tabIndex} inputMode={this.getInputMode()}
                        maxLength={this.props.maxlength} disabled={this.props.disabled} required={this.props.required} pattern={this.props.pattern}
-                       placeholder={this.props.placeholder} readOnly={this.props.readonly} name={this.props.name}
+                       placeholder={this.props.placeholder} readOnly={this.props.readOnly} name={this.props.name}
                        onKeyDown={this.onInputKeyDown} onKeyPress={this.onInputKeyPress} onInput={this.onInput} onClick={this.onInputClick}
                        onBlur={this.onInputBlur} onFocus={this.onInputFocus} onPaste={this.onPaste} min={this.props.min} max={this.props.max}
                        aria-valuemin={this.props.min} aria-valuemax={this.props.max} aria-valuenow={this.props.value} aria-labelledby={this.props.ariaLabelledBy} />

diff --git a/src/components/knob/Knob.d.ts b/src/components/knob/Knob.d.ts
@@ -7,7 +7,7 @@ interface KnobProps {
     value?: any;
     size?: number;
     disabled?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     showValue?: boolean;
     step?: number;
     min?: number;

diff --git a/src/components/knob/Knob.js b/src/components/knob/Knob.js
@@ -12,7 +12,7 @@ export class Knob extends Component {
         value: null,
         size: 100,
         disabled: false,
-        readonly: false,
+        readOnly: false,
         showValue: true,
         step: 1,
         min: 0,
@@ -33,7 +33,7 @@ export class Knob extends Component {
         value: PropTypes.any,
         size: PropTypes.number,
         disabled: PropTypes.bool,
-        readonly: PropTypes.bool,
+        readOnly: PropTypes.bool,
         showValue: PropTypes.bool,
         step: PropTypes.number,
         min: PropTypes.number,
@@ -101,13 +101,13 @@ export class Knob extends Component {
     }
 
     onClick(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             this.updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
         }
     }
 
     onMouseDown(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             this.windowMouseMoveListener = this.onMouseMove;
             this.windowMouseUpListener = this.onMouseUp;
             window.addEventListener('mousemove', this.windowMouseMoveListener);
@@ -117,7 +117,7 @@ export class Knob extends Component {
     }
 
     onMouseUp(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             window.removeEventListener('mousemove', this.windowMouseMoveListener);
             window.removeEventListener('mouseup', this.windowMouseUpListener);
             this.windowMouseMoveListener = null;
@@ -127,7 +127,7 @@ export class Knob extends Component {
     }
 
     onTouchStart(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             this.windowTouchMoveListener = this.onTouchMove;
             this.windowTouchEndListener = this.onTouchEnd;
             window.addEventListener('touchmove', this.windowTouchMoveListener, {passive: false, cancelable: false});
@@ -136,7 +136,7 @@ export class Knob extends Component {
     }
 
     onTouchEnd(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             window.removeEventListener('touchmove', this.windowTouchMoveListener);
             window.removeEventListener('touchend', this.windowTouchEndListener);
             this.windowTouchMoveListener = null;
@@ -145,14 +145,14 @@ export class Knob extends Component {
     }
 
     onMouseMove(event) {
-        if (!this.props.disabled && !this.props.readonly) {
+        if (!this.props.disabled && !this.props.readOnly) {
             this.updateValue(event.offsetX, event.offsetY);
             event.preventDefault();
         }
     }
 
     onTouchMove(event) {
-        if (!this.props.disabled && !this.props.readonly && event.touches.length === 1) {
+        if (!this.props.disabled && !this.props.readOnly && event.touches.length === 1) {
             const rect = this.element.getBoundingClientRect();
             const touch = event.targetTouches.item(0);
             const offsetX = touch.clientX - rect.left;

diff --git a/src/components/rating/Rating.d.ts b/src/components/rating/Rating.d.ts
@@ -5,7 +5,7 @@ interface RatingProps {
     id?: string;
     value?: number;
     disabled?: boolean;
-    readonly?: boolean;
+    readOnly?: boolean;
     stars?: number;
     cancel?: boolean;
     style?: object;

diff --git a/src/components/rating/Rating.js b/src/components/rating/Rating.js
@@ -9,7 +9,7 @@ export class Rating extends Component {
         id: null,
         value: null,
         disabled: false,
-        readonly: false,
+        readOnly: false,
         stars: 5,
         cancel: true,
         style: null,
@@ -23,7 +23,7 @@ export class Rating extends Component {
         id: PropTypes.string,
         value: PropTypes.number,
         disabled: PropTypes.bool,
-        readonly: PropTypes.bool,
+        readOnly: PropTypes.bool,
         stars: PropTypes.number,
         cancel: PropTypes.bool,
         style: PropTypes.object,
@@ -41,7 +41,7 @@ export class Rating extends Component {
     }
 
     rate(event, i) {
-        if (!this.props.readonly && !this.props.disabled && this.props.onChange) {
+        if (!this.props.readOnly && !this.props.disabled && this.props.onChange) {
             this.props.onChange({
                 originalEvent: event,
                 value: i,
@@ -59,7 +59,7 @@ export class Rating extends Component {
     }
 
     clear(event) {
-        if (!this.props.readonly && !this.props.disabled && this.props.onChange) {
+        if (!this.props.readOnly && !this.props.disabled && this.props.onChange) {
             this.props.onChange({
                 originalEvent: event,
                 value: null,
@@ -97,7 +97,7 @@ export class Rating extends Component {
     }
 
     getFocusIndex() {
-        return (this.props.disabled || this.props.readonly) ? null : '0';
+        return (this.props.disabled || this.props.readOnly) ? null : '0';
     }
 
     componentDidMount() {
@@ -163,7 +163,7 @@ export class Rating extends Component {
     render() {
         let className = classNames('p-rating', {
             'p-disabled': this.props.disabled,
-            'p-rating-readonly': this.props.readonly
+            'p-rating-readonly': this.props.readOnly
         }, this.props.className);
         let cancelIcon = this.renderCancelIcon();
         let stars = this.renderStars();

diff --git a/src/components/steps/Steps.js b/src/components/steps/Steps.js
@@ -92,7 +92,7 @@ export class Steps extends Component {
     }
 
     render() {
-        const className = classNames('p-steps p-component', this.props.className, {'p-readonly': this.props.readonly});
+        const className = classNames('p-steps p-component', this.props.className, {'p-readonly': this.props.readOnly});
         const items = this.renderItems();
 
         return (

diff --git a/src/showcase/autocomplete/AutoCompleteDoc.js b/src/showcase/autocomplete/AutoCompleteDoc.js
@@ -460,7 +460,7 @@ itemTemplate(item) {
                                         <td>Hint text for the input field.</td>
                                     </tr>
                                     <tr>
-                                        <td>readonly</td>
+                                        <td>readOnly</td>
                                         <td>boolean</td>
                                         <td>false</td>
                                         <td>When present, it specifies that the input cannot be typed.</td>

diff --git a/src/showcase/datascroller/DataScrollerDemo.js b/src/showcase/datascroller/DataScrollerDemo.js
@@ -31,7 +31,7 @@ export class DataScrollerDemo extends Component {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">

diff --git a/src/showcase/datascroller/DataScrollerDoc.js b/src/showcase/datascroller/DataScrollerDoc.js
@@ -44,7 +44,7 @@ export class DataScrollerDemo extends Component {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -94,7 +94,7 @@ const DataScrollerDemo = () => {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -142,7 +142,7 @@ const DataScrollerDemo = () => {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">

diff --git a/src/showcase/datascroller/DataScrollerInlineDemo.js b/src/showcase/datascroller/DataScrollerInlineDemo.js
@@ -32,7 +32,7 @@ export class DataScrollerInlineDemo extends Component {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -106,7 +106,7 @@ export class DataScrollerInlineDemo extends Component {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -155,7 +155,7 @@ const DataScrollerInlineDemo = () => {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">
@@ -202,7 +202,7 @@ const DataScrollerInlineDemo = () => {
                 <div className="product-detail">
                     <div className="product-name">{data.name}</div>
                     <div className="product-description">{data.description}</div>
-                    <Rating value={data.rating} readonly cancel={false}></Rating>
+                    <Rating value={data.rating} readOnly cancel={false}></Rating>
                     <i className="pi pi-tag product-category-icon"></i><span className="product-category">{data.category}</span>
                 </div>
                 <div className="product-action">