How to use the @wordpress/components.withFocusOutside function in @wordpress/components

To help you get started, we’ve selected a few @wordpress/components examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / types / wordpress__components / wordpress__components-tests.tsx View on Github external
render() {
                return <div>{this.props.foo}</div>;
            }
        },
    );
    ;

    class PredefinedComponentClass extends Component&lt;{ bar: number }&gt; {
        handleFocusOutside() {
            console.log('Hello World!');
        }
        render() {
            return <div>{this.props.bar}</div>;
        }
    }
    const EnhancedComponentPredefinedClass = C.withFocusOutside(PredefinedComponentClass);
    ;
})();
github DefinitelyTyped / DefinitelyTyped / types / wordpress__components / wordpress__components-tests.tsx View on Github external
(() =&gt; {
    const EnhancedComponentClassExpression = C.withFocusOutside(
        class extends Component&lt;{ foo: string }&gt; {
            handleFocusOutside() {
                console.log('Hello World!');
            }
            render() {
                return <div>{this.props.foo}</div>;
            }
        },
    );
    ;

    class PredefinedComponentClass extends Component&lt;{ bar: number }&gt; {
        handleFocusOutside() {
            console.log('Hello World!');
        }
        render() {
github Automattic / newspack-plugin / assets / components / src / select-control / index.js View on Github external
import { Component } from '@wordpress/element';

/**
 * WordPress transitional dependency: using a locally modified copy, until `@wordpress/components` updates the the SelectControl
 * and implements the `disabled` attribute of its options.
 *      PR 15976: https://github.com/WordPress/gutenberg/pull/15976
 */
import BaseComponent from './wordpress-components-select-control-modified.js';

/**
 * Internal dependencies
 */
import murielClassnames from '../../../shared/js/muriel-classnames';
import './style.scss';

const SelectControl = withFocusOutside(
	class extends Component {
		/**
		 * Constructor.
		 */
		constructor( props ) {
			super( props );
			this.state = {
				isFocused: false,
			};
		}

		/**
		 * A `withFocusOutside` HOC's default handler.
		 */
		handleFocusOutside() {
			this.setState( { isFocused: false } );
github Automattic / wp-calypso / packages / calypso-ui / src / text-control / index.js View on Github external
this.getClassName( disabled, isEmpty, isActive )
		);

		return (
			 this.handleOnClick( onClick ) }
				onFocus={ () =&gt; this.handleOnFocus( onFocus ) }
				{ ...otherProps }
			/&gt;
		);
	}
}

export default withFocusOutside( TextControl );