{hasOriginalRatio && (
- {
if (value !== 'original') {
onChange('original')
}
}}>
{__('Original', 'blocksy')}
)}
- {
if (
value.indexOf('/') === -1 ||
value === 'original'
) {
onChange(
option.value === 'original'
? '1/1'
: option.value
)
}
}}>
{__('Predefined', 'blocksy')}
- {
if (
value.indexOf('/') !== -1 ||
value === 'original'
) {
let [first, second] = (
value === 'original'
? option.value === 'original'
? '1/1'
: option.value
: value
).split('/')
onChange(`${first}:${second}`)
}
}}>
{__('Custom', 'blocksy')}
{currentTab === 'predefined' && (
{[
'1/1',
...(isReversed
? reversed_ratios
: normal_ratios),
].map((ratio) => (
- {
if (ratio === '1/1') {
setIsReversed(false)
}
onChange(ratio)
}}>
{ratio}
))}
)}
{currentTab === 'custom' && (
{
onChange(
`${val}:${value.split(':')[1]}`
)
}}
/>
:
{
onChange(
`${value.split(':')[0]}:${val}`
)
}}
/>
',
''
),
}}
/>
)}
{currentTab === 'original' && (
{__(
'Displays the image using the aspect ratio in which they were uploaded.',
'blocksy'
)}
)}
{option['inner-options'] && (
{
onChangeFor(key, val)
}}
options={option['inner-options']}
value={values}
/>
)}
)
if (view === 'inline') {
return inlineRatioView
}
return (
{
if (!isPicking) {
return
}
setAnimationState({
isTransitioning: false,
isPicking: false,
})
}}
wrapperProps={{
onClick: (e) => {
e.preventDefault()
setAnimationState({
isTransitioning: true,
isPicking: !isPicking,
})
},
}}>
{value.indexOf(':') > -1 && (
{__('Custom', 'blocksy')}
)}
{value.indexOf('/') > -1 && (
{__('Predefined', 'blocksy')}
)}
{value === 'original'
? __('Original Ratio', 'blocksy')
: value.replace('/', ':')}
{preview_width_key && (
{values[preview_width_key]}
)}
{
setAnimationState({
isTransitioning: true,
isPicking,
})
}}
stopTransitioning={() =>
setAnimationState({
isPicking,
isTransitioning: false,
})
}
renderContent={() => inlineRatioView}
/>
)
}
Ratio.ControlEnd = () => (
e.stopPropagation()}
onMouseUp={(e) => e.stopPropagation()}
/>
)
export default Ratio