78 lines
1.7 KiB
JavaScript
78 lines
1.7 KiB
JavaScript
import { createElement, Component, Fragment } from '@wordpress/element'
|
|
import classnames from 'classnames'
|
|
export { maybePromoteScalarValueIntoResponsive } from 'customizer-sync-helpers/dist/promote-into-responsive'
|
|
import { getOptionFor } from '../../options/GenericOptionType'
|
|
|
|
/**
|
|
* true
|
|
* false
|
|
* skip
|
|
*/
|
|
export const isOptionEnabledFor = (currentDevice, responsiveDescriptor) =>
|
|
({
|
|
desktop: true,
|
|
tablet: true,
|
|
mobile: true,
|
|
|
|
...(typeof responsiveDescriptor === 'boolean'
|
|
? {}
|
|
: responsiveDescriptor || {}),
|
|
}[currentDevice])
|
|
|
|
export const isOptionResponsiveFor = (option, args = {}) => {
|
|
let { ignoreHidden = false } = args
|
|
|
|
let OptionComponent = getOptionFor(option)
|
|
|
|
if (OptionComponent.hiddenResponsive) {
|
|
if (!ignoreHidden) {
|
|
return true
|
|
}
|
|
}
|
|
|
|
return !!option.responsive
|
|
}
|
|
|
|
export const getValueForDevice = ({ value, option, device }) => {
|
|
const devices = ['desktop', 'tablet', 'mobile']
|
|
|
|
if (
|
|
device === 'tablet' &&
|
|
isOptionEnabledFor(device, option.responsive) === 'skip'
|
|
) {
|
|
return value.mobile
|
|
}
|
|
|
|
return value[device]
|
|
}
|
|
|
|
const ResponsiveControls = ({ device, setDevice, responsiveDescriptor }) => (
|
|
<div className="ct-control-options">
|
|
<ul className="ct-responsive-controls ct-devices">
|
|
{['desktop', 'tablet', 'mobile']
|
|
.filter(
|
|
(d) =>
|
|
isOptionEnabledFor(d, responsiveDescriptor) !== 'skip'
|
|
)
|
|
.map((d) => (
|
|
<li
|
|
onClick={() => setDevice(d)}
|
|
className={classnames(
|
|
{
|
|
active: d === device,
|
|
'ct-disabled': !isOptionEnabledFor(
|
|
d,
|
|
responsiveDescriptor
|
|
),
|
|
},
|
|
`ct-${d}`
|
|
)}
|
|
key={d}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
|
|
export default ResponsiveControls
|