84 lines
2.2 KiB
TypeScript
Executable File
84 lines
2.2 KiB
TypeScript
Executable File
import {RadioGroup} from '@common/ui/forms/radio-group/radio-group';
|
|
import {Radio} from '@common/ui/forms/radio-group/radio';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {MessageDescriptor} from '@common/i18n/message-descriptor';
|
|
import {message} from '@common/i18n/message';
|
|
|
|
import {BgSelectorTabProps} from '@common/background-selector/bg-selector-tab-props';
|
|
import {BackgroundSelectorConfig} from '@common/background-selector/background-selector-config';
|
|
|
|
const BackgroundPositions: Record<
|
|
'cover' | 'contain' | 'repeat',
|
|
{
|
|
label: MessageDescriptor;
|
|
bgConfig: Partial<BackgroundSelectorConfig>;
|
|
}
|
|
> = {
|
|
cover: {
|
|
label: message('Stretch to fit'),
|
|
bgConfig: {
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundSize: 'cover',
|
|
},
|
|
},
|
|
contain: {
|
|
label: message('Fit image'),
|
|
bgConfig: {
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundSize: 'contain',
|
|
backgroundPosition: 'center top',
|
|
},
|
|
},
|
|
repeat: {
|
|
label: message('Repeat image'),
|
|
bgConfig: {
|
|
backgroundRepeat: 'repeat',
|
|
backgroundSize: undefined,
|
|
backgroundPosition: 'left top',
|
|
},
|
|
},
|
|
};
|
|
|
|
export function SimpleBackgroundPositionSelector({
|
|
value: imageBgValue,
|
|
onChange,
|
|
}: BgSelectorTabProps<BackgroundSelectorConfig>) {
|
|
const selectedPosition = positionKeyFromValue(imageBgValue);
|
|
return (
|
|
<div className="mt-20 border-t pt-14">
|
|
<RadioGroup size="sm" disabled={!imageBgValue}>
|
|
{Object.entries(BackgroundPositions).map(([key, position]) => (
|
|
<Radio
|
|
key={key}
|
|
name="background-position"
|
|
value={key}
|
|
checked={key === selectedPosition}
|
|
onChange={e => {
|
|
if (imageBgValue) {
|
|
onChange?.({
|
|
...imageBgValue,
|
|
...position.bgConfig,
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
<Trans {...position.label} />
|
|
</Radio>
|
|
))}
|
|
</RadioGroup>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function positionKeyFromValue(
|
|
value?: BackgroundSelectorConfig,
|
|
): keyof typeof BackgroundPositions {
|
|
if (value?.backgroundSize === 'cover') {
|
|
return 'cover';
|
|
} else if (value?.backgroundSize === 'contain') {
|
|
return 'contain';
|
|
} else {
|
|
return 'repeat';
|
|
}
|
|
}
|