Server IP : 172.67.158.161 / Your IP : 18.217.105.174 Web Server : LiteSpeed System : Linux business53.web-hosting.com 4.18.0-553.lve.el8.x86_64 #1 SMP Mon May 27 15:27:34 UTC 2024 x86_64 User : giankuin ( 1871) PHP Version : 7.4.33 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /proc/thread-self/root/home/giankuin/sieuthiweb.com.vn/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/context/ |
Upload File : |
/** * 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 */ 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. */ 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> ); }; ContainerWidthContextProvider.propTypes = { children: PropTypes.node, };