118 lines
2.5 KiB
JavaScript
118 lines
2.5 KiB
JavaScript
import {
|
|
useState,
|
|
useEffect,
|
|
useCallback,
|
|
createContext,
|
|
createElement,
|
|
useContext,
|
|
} from '@wordpress/element'
|
|
|
|
export const DeviceManagerStateContext = createContext()
|
|
export const DeviceManagerActionsContext = createContext()
|
|
|
|
export const useDeviceManagerState = () => {
|
|
const context = useContext(DeviceManagerStateContext)
|
|
|
|
return context || { currentView: 'desktop' }
|
|
}
|
|
|
|
export const useDeviceManagerActions = () => {
|
|
const context = useContext(DeviceManagerActionsContext)
|
|
return context || {}
|
|
}
|
|
|
|
export const getCurrentDevice = (select = null) => {
|
|
if (wp.customize && wp.customize.previewedDevice) {
|
|
return wp.customize.previewedDevice()
|
|
}
|
|
|
|
let maybeSelect = select
|
|
|
|
if (wp.data && wp.data.select) {
|
|
maybeSelect = wp.data.select
|
|
}
|
|
|
|
let device = 'desktop'
|
|
|
|
if (maybeSelect) {
|
|
if (
|
|
maybeSelect('core/editor') &&
|
|
maybeSelect('core/editor').getDeviceType
|
|
) {
|
|
device = maybeSelect('core/editor').getDeviceType().toLowerCase()
|
|
} else {
|
|
if (
|
|
maybeSelect('core/edit-post') &&
|
|
maybeSelect(
|
|
'core/edit-post'
|
|
).__experimentalGetPreviewDeviceType()
|
|
) {
|
|
device = maybeSelect('core/edit-post')
|
|
.__experimentalGetPreviewDeviceType()
|
|
.toLowerCase()
|
|
}
|
|
}
|
|
}
|
|
|
|
return device
|
|
}
|
|
|
|
export const useDeviceManager = (args = {}) => {
|
|
const { withTablet = true } = args
|
|
|
|
const [currentView, setCurrentView] = useState(
|
|
wp.customize && wp.customize.previewedDevice
|
|
? wp.customize.previewedDevice()
|
|
: 'desktop'
|
|
)
|
|
|
|
const listener = () => {
|
|
setCurrentView(
|
|
wp.customize && wp.customize.previewedDevice
|
|
? wp.customize.previewedDevice()
|
|
: 'desktop'
|
|
)
|
|
}
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
if (wp.customize && wp.customize.previewedDevice) {
|
|
wp.customize.previewedDevice.bind(listener)
|
|
}
|
|
}, 1000)
|
|
|
|
return () => {
|
|
if (wp.customize && wp.customize.previewedDevice) {
|
|
wp.customize.previewedDevice.unbind(listener)
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
return [
|
|
withTablet
|
|
? currentView
|
|
: currentView === 'tablet'
|
|
? 'mobile'
|
|
: currentView,
|
|
(device) => {
|
|
setCurrentView(device)
|
|
|
|
if (wp.customize && wp.customize.previewedDevice) {
|
|
wp.customize.previewedDevice.set(device)
|
|
}
|
|
},
|
|
]
|
|
}
|
|
|
|
export const DeviceManagerProvider = ({ children }) => {
|
|
const [currentView, setDevice] = useDeviceManager()
|
|
|
|
return (
|
|
<DeviceManagerStateContext.Provider value={{ currentView }}>
|
|
<DeviceManagerActionsContext.Provider value={{ setDevice }}>
|
|
{children}
|
|
</DeviceManagerActionsContext.Provider>
|
|
</DeviceManagerStateContext.Provider>
|
|
)
|
|
}
|