75 lines
1.7 KiB
JavaScript
75 lines
1.7 KiB
JavaScript
|
import { createElement, useState, useEffect, useRef } from '@wordpress/element'
|
||
|
|
import _ from 'underscore'
|
||
|
|
import { __ } from 'ct-i18n'
|
||
|
|
|
||
|
|
// TODO: maybe extend to also support validating min max values + also non
|
||
|
|
// numeric values
|
||
|
|
const InputWithValidCssExpression = ({
|
||
|
|
value,
|
||
|
|
placeholder = __('Default', 'blocksy'),
|
||
|
|
onChange,
|
||
|
|
|
||
|
|
propertyToCheckAgainst = 'margin',
|
||
|
|
|
||
|
|
// TODO: drop this flag when all options are refactored like spacing.
|
||
|
|
// This component should always propagate empty values.
|
||
|
|
shouldPropagateEmptyValue = false,
|
||
|
|
|
||
|
|
inputProps = {},
|
||
|
|
...restProps
|
||
|
|
}) => {
|
||
|
|
const inputRef = useRef()
|
||
|
|
const [localValue, setLocalValue] = useState('__DEFAULT__')
|
||
|
|
|
||
|
|
const { ref, actualInputProps = {} } = inputProps
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const needToFocusOn = localValue.indexOf('()')
|
||
|
|
|
||
|
|
if (needToFocusOn > -1) {
|
||
|
|
inputRef.current.setSelectionRange(
|
||
|
|
needToFocusOn + 1,
|
||
|
|
needToFocusOn + 1
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}, [localValue])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<input
|
||
|
|
value={localValue === '__DEFAULT__' ? value : localValue}
|
||
|
|
type="text"
|
||
|
|
placeholder={placeholder}
|
||
|
|
onChange={({ target: { value } }) => {
|
||
|
|
if (value === '' && shouldPropagateEmptyValue) {
|
||
|
|
setLocalValue('__DEFAULT__')
|
||
|
|
onChange('')
|
||
|
|
}
|
||
|
|
|
||
|
|
setLocalValue(value)
|
||
|
|
|
||
|
|
if (
|
||
|
|
CSS.supports(propertyToCheckAgainst, value) &&
|
||
|
|
value.toString().length -
|
||
|
|
value.toString().replaceAll('(', '').length ===
|
||
|
|
value.toString().length -
|
||
|
|
value.toString().replaceAll(')', '').length
|
||
|
|
) {
|
||
|
|
onChange(value)
|
||
|
|
setLocalValue('__DEFAULT__')
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
ref={(el) => {
|
||
|
|
inputRef.current = el
|
||
|
|
|
||
|
|
if (ref && typeof ref === 'function') {
|
||
|
|
ref(el)
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
{...actualInputProps}
|
||
|
|
{...restProps}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default InputWithValidCssExpression
|