File "range.js"
Full Path: /home/romayxjt/public_html/wp-content/themes/kadence/inc/customizer/react/src/common/range.js
File size: 1.94 KB
MIME-type: text/plain
Charset: utf-8
const {
RangeControl,
} = wp.components;
const {
useInstanceId,
} = wp.compose;
/**
* Build the Measure controls
* @returns {object} Measure settings.
*/
export default function KadenceRange( {
label,
onChange,
value = '',
className = '',
step = 1,
max = 100,
min = 0,
beforeIcon = '',
help = '',
} ) {
const onChangInput = ( event ) => {
if ( event.target.value === '' ) {
onChange( undefined );
return;
}
const newValue = Number( event.target.value );
if ( newValue === '' ) {
onChange( undefined );
return;
}
if ( min < -0.1 ) {
if ( newValue > max ) {
onChange( max );
} else if ( newValue < min && newValue !== '-' ) {
onChange( min );
} else {
onChange( newValue );
}
} else {
if ( newValue > max ) {
onChange( max );
} else if ( newValue < -0.1 ) {
onChange( min );
} else {
onChange( newValue );
}
}
};
const id = useInstanceId( KadenceRange, 'inspector-kadence-range' );
return [
onChange && (
<div className={ `components-base-control kadence-range-control${ className ? ' ' + className : '' }` }>
{ label && (
<label htmlFor={ id } className="components-base-control__label">{ label }</label>
) }
<div className={ 'kadence-range-control-inner' }>
<RangeControl
className={ 'kadence-range-control-range' }
beforeIcon={ beforeIcon }
value={ value }
onChange={ ( newVal ) => onChange( newVal ) }
min={ min }
max={ max }
step={ step }
help={ help }
withInputField={ false }
/>
<div className="components-base-control kt-range-number-input">
<div className="components-base-control__field">
<input
value={ value }
onChange={ onChangInput }
min={ min }
max={ max }
id={ id }
step={ step }
type="number"
className="components-text-control__input"
/>
</div>
</div>
</div>
</div>
),
];
}