woocommerce/plugins/woocommerce-blocks/assets/js/base/context/providers/container-width-context.js

69 lines
1.8 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import PropTypes from 'prop-types';
import { createContext, useContext } from '@wordpress/element';
import { useContainerQueries } from '@woocommerce/base-hooks';
import classNames from 'classnames';
/**
* @typedef {import('@woocommerce/type-defs/contexts').ContainerWidthContext} ContainerWidthContext
* @typedef {import('react')} React
*/
const ContainerWidthContext = createContext( {
hasContainerWidth: false,
containerClassName: '',
isMobile: false,
isSmall: false,
isMedium: false,
isLarge: false,
} );
/**
* @return {ContainerWidthContext} Returns the container width context value
*/
export const useContainerWidthContext = () => {
return useContext( ContainerWidthContext );
};
/**
* Provides an interface to useContainerQueries so children can see what size is being used by the
* container.
*
* @param {Object} props Incoming props for the component.
* @param {React.ReactChildren} props.children React elements wrapped by the component.
* @param {string} props.className CSS class in use.
*/
export const ContainerWidthContextProvider = ( {
children,
className = '',
} ) => {
const [ resizeListener, containerClassName ] = useContainerQueries();
const contextValue = {
hasContainerWidth: containerClassName !== '',
containerClassName,
isMobile: containerClassName === 'is-mobile',
isSmall: containerClassName === 'is-small',
isMedium: containerClassName === 'is-medium',
isLarge: containerClassName === 'is-large',
};
/**
* @type {ContainerWidthContext}
*/
return (
<ContainerWidthContext.Provider value={ contextValue }>
<div className={ classNames( className, containerClassName ) }>
{ resizeListener }
{ children }
</div>
</ContainerWidthContext.Provider>
Add @woocommerce/eslint-plugin dependency (https://github.com/woocommerce/woocommerce-blocks/pull/3115) * convert eslint config to use @woocommerce/eslint-plugin - removes unnecessary dependencies - adds e2e-tests/specs to eslint ignore (they are automatically generated) - turns off rules that will be handled in subsequent pulls (to avoid a mammoth changeset for review). - NOTE: prettier config needs left in because of a bug with the existing version of `@wordpress/eslint-plugin` pulled in (fixed in https://github.com/WordPress/gutenberg/pull/25068) so I left the file for now. * prettier fixes. * remove obsolete plugin and fixes for eslint update This branch brings an update to eslint which also changes some syntax with plugins. So this commit: - fixes featuer-flag plugin syntax. - removed obsolete dependency-group plugin (which is now in the `@woocommerce/eslint-plugin` configuration. * add to-do comment * fixes for test runs - this also converts our e2e test scripts to use `wp-script test:e2e`, an advantage of this is it will load CHROMIUM on demand for the e2e test run. * fixes for test runs - this also converts our e2e test scripts to use `wp-script test:e2e`, an advantage of this is it will load CHROMIUM on demand for the e2e test run. * include prettier alias as a dependency This has to be done because prettier is installed with storybook and thus the alias setup in `@wordpress/scripts` is over-ridden by the storybook import. * another attempt at e2e-test-fix * add some debugging and temporarily just add one e2e config test for travis * more debugging * try installing full puppeteer and see if fixes * fix package-lock? * setupSettings separately from other fixture loading * add debugging of files * add another console.log (hopefully trigger travis) * split out blockPage creation to it’s own as well * fixed! remove debugging and re-enable travis configs for entire test suite * fix config and rename e2e-tests to e2e - fixes the failing product-search test - tests/e2e-tests was redundant, I changed to `tests/e2e` (this follows a file pattern change made in woocommerce core as well). * add todo for some eslint properties * remove unnecessary early function execution * revert earlier commit and remove duplicate call to createBlockPages
2020-09-07 17:31:10 +00:00
);
};
ContainerWidthContextProvider.propTypes = {
children: PropTypes.node,
};