pastilhas
5ce1a2928e
The DataTable's pagination carries the only interpolated strings in this area
('Showing page {{current}} of {{total}}', '{{size}} / page'). No plural forms:
nothing here is a count-varying noun, so inventing one would only add a key
nobody uses.
DataTable.test.tsx now renders inside an I18nProvider with the real en-GB
catalog, so it still asserts the English a user sees rather than a dot-path.
Left/right utilities became logical (ms-/me-/ps-/pe-/start-) per D3.
58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import { Select as ShadSelect, SelectContent, SelectGroup } from '@/components/ui/select';
|
|
import { SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { cn } from 'helpers/cn';
|
|
import { useTranslation } from '@/components/locales';
|
|
|
|
export const Select = (props: SelectProps) => {
|
|
const { t } = useTranslation();
|
|
const { options, value, onChange, onValueChange, label } = props;
|
|
const { name = '', className, placeholder = t('select.placeholder'), update } = props;
|
|
|
|
if (!options) return null;
|
|
|
|
const onLocalValueChange = (newValue: string) => {
|
|
onChange && onChange({ target: { name, value: newValue } });
|
|
onValueChange && onValueChange(newValue);
|
|
update && update((state: any) => ({ ...state, [name]: newValue }));
|
|
};
|
|
|
|
// Convert value to string for Radix compatibility, undefined for no selection
|
|
const selectValue = value != null ? String(value) : undefined;
|
|
|
|
return (
|
|
<ShadSelect {...props} value={selectValue} onValueChange={onLocalValueChange}>
|
|
<SelectTrigger className={cn('h-11', className)}>
|
|
<SelectValue placeholder={placeholder} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
{label && <SelectLabel>{label}</SelectLabel>}
|
|
{options.map((option) => {
|
|
const theOption = typeof option === 'string' ? { value: option } : option;
|
|
const itemValue = String(theOption.value ?? option);
|
|
const itemLabel = String((theOption as SelectOption).label ?? option);
|
|
if (typeof option === 'object' && option.hidden) return null;
|
|
return (
|
|
<SelectItem key={itemValue} value={itemValue}>
|
|
{itemLabel}
|
|
</SelectItem>
|
|
);
|
|
})}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</ShadSelect>
|
|
);
|
|
};
|
|
|
|
type SelectProps = {
|
|
options: SelectOption[] | string[];
|
|
value?: string | null;
|
|
onChange?: (ev: { target: { name: string; value: string } }) => void;
|
|
onValueChange?: (value: string) => void;
|
|
label?: string;
|
|
name?: string;
|
|
className?: string;
|
|
placeholder?: string;
|
|
update?: React.Dispatch<React.SetStateAction<any>>;
|
|
};
|