index.js
1 year ago
useAuthors.js
3 years ago
useBlockStyles.js
1 year ago
useDebounceState.js
4 years ago
useDeviceAttributes.js
2 years ago
useDeviceType.js
1 year ago
useInnerBlocksCount.js
4 years ago
useQueryReducer.js
1 year ago
useRecordsReducer.js
3 years ago
useSelectedBlockElements.js
2 years ago
useStyleIndicator.js
2 years ago
useTaxonomies.js
1 year ago
useTaxonomyRecords.js
3 years ago
useDeviceAttributes.js
90 lines
| 1 | import { useDeviceType } from './index'; |
| 2 | import { useMemo } from '@wordpress/element'; |
| 3 | import isObject from 'lodash/isObject'; |
| 4 | |
| 5 | /** |
| 6 | * Given an object of attributes will split by device. |
| 7 | * |
| 8 | * @param {Object} attributes The block attributes. |
| 9 | * |
| 10 | * @return {{tablet: {}, desktop: {}, mobile: {}}} The device attributes. |
| 11 | */ |
| 12 | export function splitAttributes( attributes ) { |
| 13 | return Object |
| 14 | .entries( attributes ) |
| 15 | .reduce( ( deviceKeys, [ key, value ] ) => { |
| 16 | if ( key.includes( 'Tablet' ) ) { |
| 17 | deviceKeys.tablet[ key.replace( 'Tablet', '' ) ] = value; |
| 18 | } else if ( key.includes( 'Mobile' ) ) { |
| 19 | deviceKeys.mobile[ key.replace( 'Mobile', '' ) ] = value; |
| 20 | } |
| 21 | |
| 22 | if ( isObject( value ) ) { |
| 23 | const valueDeviceKeys = splitAttributes( value ); |
| 24 | |
| 25 | deviceKeys.desktop[ key ] = valueDeviceKeys.desktop; |
| 26 | deviceKeys.tablet[ key ] = valueDeviceKeys.tablet; |
| 27 | deviceKeys.mobile[ key ] = valueDeviceKeys.mobile; |
| 28 | } else { |
| 29 | deviceKeys.desktop[ key ] = value; |
| 30 | } |
| 31 | |
| 32 | return deviceKeys; |
| 33 | }, { desktop: {}, tablet: {}, mobile: {} } ); |
| 34 | } |
| 35 | |
| 36 | /** |
| 37 | * Given an object of attributes it will add the device suffix. |
| 38 | * |
| 39 | * @param {Object} attrs The device attributes. |
| 40 | * @param {string} device The device name, capitalized. |
| 41 | * |
| 42 | * @return {Object} The block attributes. |
| 43 | */ |
| 44 | export function addDeviceToAttributes( attrs, device = 'Tablet' ) { |
| 45 | return Object.entries( attrs ).reduce( ( result, [ key, value ] ) => { |
| 46 | if ( isObject( value ) ) { |
| 47 | result[ key ] = addDeviceToAttributes( value, device ); |
| 48 | } else { |
| 49 | result[ key + device ] = value; |
| 50 | } |
| 51 | |
| 52 | return result; |
| 53 | }, {} ); |
| 54 | } |
| 55 | |
| 56 | /** |
| 57 | * Hook to handle device attributes and setAttributes. |
| 58 | * |
| 59 | * @param {Object} attributes The block attributes. |
| 60 | * @param {Function} setAttributes The block setAttributes function. |
| 61 | * |
| 62 | * @return {Array} The device attributes and set function. |
| 63 | */ |
| 64 | export default function useDeviceAttributes( attributes, setAttributes ) { |
| 65 | const [ device ] = useDeviceType(); |
| 66 | const deviceName = 'Desktop' !== device |
| 67 | ? device |
| 68 | : ''; |
| 69 | |
| 70 | const deviceAttributes = useMemo( () => ( |
| 71 | splitAttributes( attributes ) |
| 72 | ), [ JSON.stringify( attributes ) ] ); |
| 73 | |
| 74 | const setDeviceAttributes = useMemo( () => ( attrs = {}, objName = '' ) => { |
| 75 | if ( objName ) { |
| 76 | setAttributes( { |
| 77 | [ objName ]: addDeviceToAttributes( attrs, deviceName ), |
| 78 | } ); |
| 79 | |
| 80 | return; |
| 81 | } |
| 82 | |
| 83 | setAttributes( addDeviceToAttributes( attrs, deviceName ) ); |
| 84 | }, [ deviceName, setAttributes, JSON.stringify( attributes ) ] ); |
| 85 | |
| 86 | const activeDevice = device.toLowerCase(); |
| 87 | |
| 88 | return [ deviceAttributes[ activeDevice ], setDeviceAttributes ]; |
| 89 | } |
| 90 |