36e4357bb1
Output schema is now separated in two sections: - object, that gather all informations on the selectable object - fields, that display object fields in a record context, or simply the available fields from the previous steps The dropdown variable has now a new mode: - if objectNameSingularToSelect is defined, it goes into an object mode. Only objects of the right type will be shown - if not set, it will use the already existing mode, to select a field When an object is selected, it actually set the id of the object https://github.com/user-attachments/assets/1c95f8fd-10f0-4c1c-aeb7-c7d847e89536
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { JSX } from 'react';
|
|
|
|
type HorizontalSeparatorProps = {
|
|
visible?: boolean;
|
|
text?: string;
|
|
noMargin?: boolean;
|
|
color?: string;
|
|
};
|
|
const StyledSeparator = styled.div<HorizontalSeparatorProps>`
|
|
background-color: ${({ theme, color }) => color ?? theme.border.color.medium};
|
|
height: ${({ visible }) => (visible ? '1px' : 0)};
|
|
margin-bottom: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
|
|
margin-top: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledSeparatorContainer = styled.div<{ noMargin: boolean }>`
|
|
align-items: center;
|
|
display: flex;
|
|
margin-bottom: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
|
|
margin-top: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledLine = styled.div<HorizontalSeparatorProps>`
|
|
background-color: ${({ theme }) => theme.border.color.medium};
|
|
height: ${({ visible }) => (visible ? '1px' : 0)};
|
|
flex-grow: 1;
|
|
`;
|
|
|
|
const StyledText = styled.span`
|
|
color: ${({ theme }) => theme.font.color.light};
|
|
margin: 0 ${({ theme }) => theme.spacing(2)};
|
|
white-space: nowrap;
|
|
`;
|
|
|
|
export const HorizontalSeparator = ({
|
|
visible = true,
|
|
text = '',
|
|
noMargin = false,
|
|
color,
|
|
}: HorizontalSeparatorProps): JSX.Element => (
|
|
<>
|
|
{text ? (
|
|
<StyledSeparatorContainer noMargin={noMargin}>
|
|
<StyledLine visible={visible} />
|
|
{text && <StyledText>{text}</StyledText>}
|
|
<StyledLine visible={visible} />
|
|
</StyledSeparatorContainer>
|
|
) : (
|
|
<StyledSeparator visible={visible} noMargin={noMargin} color={color} />
|
|
)}
|
|
</>
|
|
);
|