How to use updateForwardRef method in Playwright Internal

1import React, { Component, createRef } from 'react';
2import PropTypes from 'prop-types';
3import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
4import { KeyFilter } from '../keyfilter/KeyFilter';
5import { tip } from '../tooltip/Tooltip';
6
7class InputTextComponent extends Component {
8
9    static defaultProps = {
10        keyfilter: null,
11        validateOnly: false,
12        tooltip: null,
13        tooltipOptions: null,
14        onInput: null,
15        onKeyPress: null,
16        forwardRef: null
17    };
18
19    static propTypes = {
20        keyfilter: PropTypes.any,
21        validateOnly: PropTypes.bool,
22        tooltip: PropTypes.string,
23        tooltipOptions: PropTypes.object,
24        onInput: PropTypes.func,
25        onKeyPress: PropTypes.func,
26        forwardRef: PropTypes.any
27    };
28
29    constructor(props) {
30        super(props);
31        this.onInput = this.onInput.bind(this);
32        this.onKeyPress = this.onKeyPress.bind(this);
33
34        this.elementRef = createRef(this.props.forwardRef);
35    }
36
37    isFilled() {
38        return (this.props.value != null && this.props.value.toString().length > 0) ||
39            (this.props.defaultValue != null && this.props.defaultValue.toString().length > 0) ||
40            (this.elementRef && this.elementRef.current && this.elementRef.current.value != null && this.elementRef.current.value.toString().length > 0);
41    }
42
43    onKeyPress(event) {
44        if (this.props.onKeyPress) {
45            this.props.onKeyPress(event);
46        }
47
48        if (this.props.keyfilter) {
49            KeyFilter.onKeyPress(event, this.props.keyfilter, this.props.validateOnly)
50        }
51    }
52
53    onInput(event) {
54        let validatePattern = true;
55        if (this.props.keyfilter && this.props.validateOnly) {
56            validatePattern = KeyFilter.validate(event, this.props.keyfilter);
57        }
58
59        if (this.props.onInput) {
60            this.props.onInput(event, validatePattern);
61        }
62
63        if (!this.props.onChange) {
64            if (event.target.value.length > 0)
65                DomHandler.addClass(event.target, 'p-filled');
66            else
67                DomHandler.removeClass(event.target, 'p-filled');
68        }
69    }
70
71    updateForwardRef() {
72        let ref = this.props.forwardRef;
73
74        if (ref) {
75            if (typeof ref === 'function') {
76                ref(this.elementRef.current);
77            }
78            else {
79                ref.current = this.elementRef.current;
80            }
81        }
82    }
83
84    componentDidMount() {
85        this.updateForwardRef();
86
87        if (this.props.tooltip) {
88            this.renderTooltip();
89        }
90    }
91
92    componentDidUpdate(prevProps) {
93        if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
94            if (this.tooltip)
95                this.tooltip.update({ content: this.props.tooltip, ...(this.props.tooltipOptions || {}) });
96            else
97                this.renderTooltip();
98        }
99    }
100
101    componentWillUnmount() {
102        if (this.tooltip) {
103            this.tooltip.destroy();
104            this.tooltip = null;
105        }
106    }
107
108    renderTooltip() {
109        this.tooltip = tip({
110            target: this.elementRef.current,
111            content: this.props.tooltip,
112            options: this.props.tooltipOptions
113        });
114    }
115
116    render() {
117        const className = classNames('p-inputtext p-component', {
118            'p-disabled': this.props.disabled,
119            'p-filled': this.isFilled()
120        }, this.props.className);
121
122        let inputProps = ObjectUtils.findDiffKeys(this.props, InputTextComponent.defaultProps);
123
124        return <input ref={this.elementRef} {...inputProps} className={className} onInput={this.onInput} onKeyPress={this.onKeyPress} />;
125    }
126}
127
128export const InputText = React.forwardRef((props, ref) => <InputTextComponent forwardRef={ref} {...props} />);
129

Source: InputText.js

import React, { Component, createRef } from 'react';
import PropTypes from 'prop-types';
import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
import { KeyFilter } from '../keyfilter/KeyFilter';
import { tip } from '../tooltip/Tooltip';

class InputTextComponent extends Component {

    static defaultProps = {
        keyfilter: null,
        validateOnly: false,
        tooltip: null,
        tooltipOptions: null,
        onInput: null,
        onKeyPress: null,
        forwardRef: null
    };

    static propTypes = {
        keyfilter: PropTypes.any,
        validateOnly: PropTypes.bool,
        tooltip: PropTypes.string,
        tooltipOptions: PropTypes.object,
        onInput: PropTypes.func,
        onKeyPress: PropTypes.func,
        forwardRef: PropTypes.any
    };

    constructor(props) {
        super(props);
        this.onInput = this.onInput.bind(this);
        this.onKeyPress = this.onKeyPress.bind(this);

        this.elementRef = createRef(this.props.forwardRef);
    }

    isFilled() {
        return (this.props.value != null && this.props.value.toString().length > 0) ||
            (this.props.defaultValue != null && this.props.defaultValue.toString().length > 0) ||
            (this.elementRef && this.elementRef.current && this.elementRef.current.value != null && this.elementRef.current.value.toString().length > 0);
    }

    onKeyPress(event) {
        if (this.props.onKeyPress) {
            this.props.onKeyPress(event);
        }

        if (this.props.keyfilter) {
            KeyFilter.onKeyPress(event, this.props.keyfilter, this.props.validateOnly)
        }
    }

    onInput(event) {
        let validatePattern = true;
        if (this.props.keyfilter && this.props.validateOnly) {
            validatePattern = KeyFilter.validate(event, this.props.keyfilter);
        }

        if (this.props.onInput) {
            this.props.onInput(event, validatePattern);
        }

        if (!this.props.onChange) {
            if (event.target.value.length > 0)
                DomHandler.addClass(event.target, 'p-filled');
            else
                DomHandler.removeClass(event.target, 'p-filled');
        }
    }

    updateForwardRef() {
        let ref = this.props.forwardRef;

        if (ref) {
            if (typeof ref === 'function') {
                ref(this.elementRef.current);
            }
            else {
                ref.current = this.elementRef.current;
            }
        }
    }

    componentDidMount() {
        this.updateForwardRef();

        if (this.props.tooltip) {
            this.renderTooltip();
        }
    }

    componentDidUpdate(prevProps) {
        if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
            if (this.tooltip)
                this.tooltip.update({ content: this.props.tooltip, ...(this.props.tooltipOptions || {}) });
            else
                this.renderTooltip();
        }
    }

    componentWillUnmount() {
        if (this.tooltip) {
            this.tooltip.destroy();
            this.tooltip = null;
        }
    }

    renderTooltip() {
        this.tooltip = tip({
            target: this.elementRef.current,
            content: this.props.tooltip,
            options: this.props.tooltipOptions
        });
    }

    render() {
        const className = classNames('p-inputtext p-component', {
            'p-disabled': this.props.disabled,
            'p-filled': this.isFilled()
        }, this.props.className);

        let inputProps = ObjectUtils.findDiffKeys(this.props, InputTextComponent.defaultProps);

        return <input ref={this.elementRef} {...inputProps} className={className} onInput={this.onInput} onKeyPress={this.onKeyPress} />;
    }
}

export const InputText = React.forwardRef((props, ref) => <InputTextComponent forwardRef={ref} {...props} />);

1import React, { Component, createRef } from 'react';
2import PropTypes from 'prop-types';
3import { ObjectUtils, classNames, IconUtils } from '../utils/Utils';
4import { tip } from '../tooltip/Tooltip';
5import { Ripple } from '../ripple/Ripple';
6
7export class ButtonComponent extends Component {
8
9    static defaultProps = {
10        label: null,
11        icon: null,
12        iconPos: 'left',
13        badge: null,
14        badgeClassName: null,
15        tooltip: null,
16        tooltipOptions: null,
17        forwardRef: null,
18        disabled: false,
19        loading: false,
20        loadingIcon: 'pi pi-spinner pi-spin'
21    }
22
23    static propTypes = {
24        label: PropTypes.string,
25        icon: PropTypes.any,
26        iconPos: PropTypes.string,
27        badge: PropTypes.string,
28        badgeClassName: PropTypes.string,
29        tooltip: PropTypes.string,
30        tooltipOptions: PropTypes.object,
31        forwardRef: PropTypes.any,
32        disabled: PropTypes.bool,
33        loading: PropTypes.bool,
34        loadingIcon: PropTypes.any
35    };
36
37    constructor(props) {
38        super(props);
39
40        this.elementRef = createRef(this.props.forwardRef);
41    }
42
43    updateForwardRef() {
44        let ref = this.props.forwardRef;
45
46        if (ref) {
47            if (typeof ref === 'function') {
48                ref(this.elementRef.current);
49            }
50            else {
51                ref.current = this.elementRef.current;
52            }
53        }
54    }
55
56    isDisabled() {
57        return this.props.disabled || this.props.loading;
58    }
59
60    componentDidMount() {
61        this.updateForwardRef();
62
63        if (this.props.tooltip) {
64            this.renderTooltip();
65        }
66    }
67
68    componentDidUpdate(prevProps) {
69        if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
70            if (this.tooltip)
71                this.tooltip.update({ content: this.props.tooltip, ...(this.props.tooltipOptions || {}) });
72            else
73                this.renderTooltip();
74        }
75    }
76
77    componentWillUnmount() {
78        if (this.tooltip) {
79            this.tooltip.destroy();
80            this.tooltip = null;
81        }
82    }
83
84    renderTooltip() {
85        this.tooltip = tip({
86            target: this.elementRef.current,
87            content: this.props.tooltip,
88            options: this.props.tooltipOptions
89        });
90    }
91
92    renderIcon() {
93        let icon = this.props.loading ? this.props.loadingIcon : this.props.icon;
94        let className = classNames('p-button-icon p-c', {
95            'p-button-loading-icon': this.props.loading,
96            'p-button-icon-left': this.props.iconPos === 'left' && this.props.label,
97            'p-button-icon-right': this.props.iconPos === 'right' && this.props.label,
98            'p-button-icon-top': this.props.iconPos === 'top' && this.props.label,
99            'p-button-icon-bottom': this.props.iconPos === 'bottom' && this.props.label,
100        });
101        return IconUtils.getJSXIcon(icon, { className }, { props: this.props });
102    }
103
104    renderLabel() {
105        if (this.props.label) {
106            return <span className="p-button-label p-c">{this.props.label}</span>;
107        }
108
109        return !this.props.children && !this.props.label && <span className="p-button-label p-c" dangerouslySetInnerHTML={{ __html: "&nbsp;" }}></span>
110    }
111
112    renderBadge() {
113        if (this.props.badge) {
114            const badgeClassName = classNames('p-badge', this.props.badgeClassName);
115
116            return <span className={badgeClassName}>{this.props.badge}</span>
117        }
118
119        return null;
120    }
121
122    render() {
123        let disabled = this.isDisabled();
124        let className = classNames('p-button p-component', this.props.className, {
125            'p-button-icon-only': (this.props.icon || (this.props.loading && this.props.loadingIcon)) && !this.props.label,
126            'p-button-vertical': (this.props.iconPos === 'top' || this.props.iconPos === 'bottom') && this.props.label,
127            'p-disabled': disabled,
128            'p-button-loading': this.props.loading,
129            'p-button-loading-label-only': this.props.loading && !this.props.icon && this.props.label,
130            [`p-button-loading-${this.props.iconPos}`]: this.props.loading && this.props.loadingIcon && this.props.label
131        });
132        let icon = this.renderIcon();
133        let label = this.renderLabel();
134        let badge = this.renderBadge();
135
136        let buttonProps = ObjectUtils.findDiffKeys(this.props, ButtonComponent.defaultProps);
137
138        return (
139            <button ref={this.elementRef} {...buttonProps} className={className} disabled={disabled}>
140                {icon}
141                {label}
142                {this.props.children}
143                {badge}
144                <Ripple />
145            </button>
146        );
147    }
148}
149
150export const Button = React.forwardRef((props, ref) => <ButtonComponent forwardRef={ref} {...props} />);
151

Source: Button.js

import React, { Component, createRef } from 'react';
import PropTypes from 'prop-types';
import { ObjectUtils, classNames, IconUtils } from '../utils/Utils';
import { tip } from '../tooltip/Tooltip';
import { Ripple } from '../ripple/Ripple';

export class ButtonComponent extends Component {

    static defaultProps = {
        label: null,
        icon: null,
        iconPos: 'left',
        badge: null,
        badgeClassName: null,
        tooltip: null,
        tooltipOptions: null,
        forwardRef: null,
        disabled: false,
        loading: false,
        loadingIcon: 'pi pi-spinner pi-spin'
    }

    static propTypes = {
        label: PropTypes.string,
        icon: PropTypes.any,
        iconPos: PropTypes.string,
        badge: PropTypes.string,
        badgeClassName: PropTypes.string,
        tooltip: PropTypes.string,
        tooltipOptions: PropTypes.object,
        forwardRef: PropTypes.any,
        disabled: PropTypes.bool,
        loading: PropTypes.bool,
        loadingIcon: PropTypes.any
    };

    constructor(props) {
        super(props);

        this.elementRef = createRef(this.props.forwardRef);
    }

    updateForwardRef() {
        let ref = this.props.forwardRef;

        if (ref) {
            if (typeof ref === 'function') {
                ref(this.elementRef.current);
            }
            else {
                ref.current = this.elementRef.current;
            }
        }
    }

    isDisabled() {
        return this.props.disabled || this.props.loading;
    }

    componentDidMount() {
        this.updateForwardRef();

        if (this.props.tooltip) {
            this.renderTooltip();
        }
    }

    componentDidUpdate(prevProps) {
        if (prevProps.tooltip !== this.props.tooltip || prevProps.tooltipOptions !== this.props.tooltipOptions) {
            if (this.tooltip)
                this.tooltip.update({ content: this.props.tooltip, ...(this.props.tooltipOptions || {}) });
            else
                this.renderTooltip();
        }
    }

    componentWillUnmount() {
        if (this.tooltip) {
            this.tooltip.destroy();
            this.tooltip = null;
        }
    }

    renderTooltip() {
        this.tooltip = tip({
            target: this.elementRef.current,
            content: this.props.tooltip,
            options: this.props.tooltipOptions
        });
    }

    renderIcon() {
        let icon = this.props.loading ? this.props.loadingIcon : this.props.icon;
        let className = classNames('p-button-icon p-c', {
            'p-button-loading-icon': this.props.loading,
            'p-button-icon-left': this.props.iconPos === 'left' && this.props.label,
            'p-button-icon-right': this.props.iconPos === 'right' && this.props.label,
            'p-button-icon-top': this.props.iconPos === 'top' && this.props.label,
            'p-button-icon-bottom': this.props.iconPos === 'bottom' && this.props.label,
        });
        return IconUtils.getJSXIcon(icon, { className }, { props: this.props });
    }

    renderLabel() {
        if (this.props.label) {
            return <span className="p-button-label p-c">{this.props.label}</span>;
        }

        return !this.props.children && !this.props.label && <span className="p-button-label p-c" dangerouslySetInnerHTML={{ __html: "&nbsp;" }}></span>
    }

    renderBadge() {
        if (this.props.badge) {
            const badgeClassName = classNames('p-badge', this.props.badgeClassName);

            return <span className={badgeClassName}>{this.props.badge}</span>
        }

        return null;
    }

    render() {
        let disabled = this.isDisabled();
        let className = classNames('p-button p-component', this.props.className, {
            'p-button-icon-only': (this.props.icon || (this.props.loading && this.props.loadingIcon)) && !this.props.label,
            'p-button-vertical': (this.props.iconPos === 'top' || this.props.iconPos === 'bottom') && this.props.label,
            'p-disabled': disabled,
            'p-button-loading': this.props.loading,
            'p-button-loading-label-only': this.props.loading && !this.props.icon && this.props.label,
            [`p-button-loading-${this.props.iconPos}`]: this.props.loading && this.props.loadingIcon && this.props.label
        });
        let icon = this.renderIcon();
        let label = this.renderLabel();
        let badge = this.renderBadge();

        let buttonProps = ObjectUtils.findDiffKeys(this.props, ButtonComponent.defaultProps);

        return (
            <button ref={this.elementRef} {...buttonProps} className={className} disabled={disabled}>
                {icon}
                {label}
                {this.props.children}
                {badge}
                <Ripple />
            </button>
        );
    }
}

export const Button = React.forwardRef((props, ref) => <ButtonComponent forwardRef={ref} {...props} />);