jrangel/local-content-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes to lcp-button and icon uploader

Browse Source
This commit is contained in:
Jeremy Rangel
2024-12-29 22:52:17 -08:00
parent 372d5aa2c1
commit 0d59719440
8 changed files with 13490 additions and 13212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
includes/blocks/lcp-button/components/DimensionValueControl.js
View File

@ -1,47 +1,44 @@
import { __ } from '@wordpress/i18n';
import { BaseControl, NumberControl, SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
import { BaseControl, __experimentalNumberControl as NumberControl, SelectControl, __experimentalHStack as HStack } from '@wordpress/components';
/**
* Control component with a number input and a select dropdown for units (px, rem, em, % etc.).
*/
export function NumberWithUnitControl() {
export function DimensionValueControl() {
// Example options for select control (CSS units)
const unitOptions = [
{ label: __('px'), value: 'px' },
{ label: __('rem'), value: 'rem' },
{ label: __('em'), value: 'em' },
{ label: __('%'), value: '%' },
{ label: __('vh'), value: 'vh' },
{ label: __('em'), value: 'em' },
{ label: __('rem'), value: 'rem' },
{ label: __('vw'), value: 'vw' },
{ label: __('pt'), value: 'pt' },
{ label: __('cm'), value: 'cm' },
{ label: __('mm'), value: 'mm' },
{ label: __('vh'), value: 'vh' }
];
// State to manage the number and unit values
const [value, setValue] = React.useState(10);
const [unit, setUnit] = React.useState('px');
return (
<BaseControl label={__('Padding with Unit')}>
<BaseControl className="lcp-dimension-value-control" // Custom class for styling parent
>
<div style={{ position: 'relative', padding: '5px', border:'1px solid red'}}>
<HStack>
{/* Number input control */}
<NumberControl
value={value}
onChange={(newValue) => setValue(newValue)}
className="lcp-number-control" // Custom class for styling parent
value={10} // Placeholder value
onChange={() => {}} // No-op for onChange
min={0}
step={1}
label={__('Value')}
/>
/>
{/* Select dropdown control for units */}
<SelectControl
value={unit}
className="lcp-select-control" // Custom class for styling parent
style={{ marginBottom: '0' }} // Applying in-line style for margin value={'px'} // Placeholder value
options={unitOptions}
onChange={(newUnit) => setUnit(newUnit)}
label={__('Unit')}
onChange={() => {}} // No-op for onChange
/>
</HStack>
</div>
</BaseControl>
);
}