How to use updateForwardRef method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

InputText.js

Source: InputText.js Github

copy
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
Full Screen

Button.js

Source: Button.js Github

copy
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
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)