70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { validateMetadataLabel } from '@/metadata/utils/validateMetadataLabel';
|
|
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
|
import { IconPicker } from '@/ui/input/components/IconPicker';
|
|
import { TextArea } from '@/ui/input/components/TextArea';
|
|
import { TextInput } from '@/ui/input/components/TextInput';
|
|
import { Section } from '@/ui/layout/section/components/Section';
|
|
|
|
type SettingsObjectFieldFormSectionProps = {
|
|
disabled?: boolean;
|
|
name?: string;
|
|
description?: string;
|
|
iconKey?: string;
|
|
onChange?: (
|
|
formValues: Partial<{
|
|
icon: string;
|
|
label: string;
|
|
description: string;
|
|
}>,
|
|
) => void;
|
|
};
|
|
|
|
const StyledInputsContainer = styled.div`
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
|
width: 100%;
|
|
`;
|
|
|
|
export const SettingsObjectFieldFormSection = ({
|
|
disabled,
|
|
name = '',
|
|
description = '',
|
|
iconKey = 'IconUsers',
|
|
onChange,
|
|
}: SettingsObjectFieldFormSectionProps) => (
|
|
<Section>
|
|
<H2Title
|
|
title="Name and description"
|
|
description="The name and description of this field"
|
|
/>
|
|
<StyledInputsContainer>
|
|
<IconPicker
|
|
selectedIconKey={iconKey}
|
|
onChange={(value) => onChange?.({ icon: value.iconKey })}
|
|
variant="primary"
|
|
/>
|
|
<TextInput
|
|
placeholder="Employees"
|
|
value={name}
|
|
onChange={(value) => {
|
|
if (!value || validateMetadataLabel(value)) {
|
|
onChange?.({ label: value });
|
|
}
|
|
}}
|
|
disabled={disabled}
|
|
fullWidth
|
|
/>
|
|
</StyledInputsContainer>
|
|
<TextArea
|
|
placeholder="Write a description"
|
|
minRows={4}
|
|
value={description}
|
|
onChange={(value) => onChange?.({ description: value })}
|
|
disabled={disabled}
|
|
/>
|
|
</Section>
|
|
);
|