/
BlocksInput.tsx
65 lines (56 loc) 路 1.89 KB
/
BlocksInput.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import * as React from 'react';
import { Box, Flex, Typography } from '@strapi/design-system';
import { type MessageDescriptor, useIntl } from 'react-intl';
import styled from 'styled-components';
import { Hint, HintProps } from '../Hint';
import { BlocksEditor } from './BlocksEditor';
const LabelAction = styled(Box)`
svg path {
fill: ${({ theme }) => theme.colors.neutral500};
}
`;
interface BlocksInputProps
extends React.ComponentPropsWithoutRef<typeof BlocksEditor>,
Pick<HintProps, 'hint'> {
intlLabel: MessageDescriptor;
attribute: { type: string; [key: string]: unknown };
description?: MessageDescriptor;
labelAction?: React.ReactNode;
required?: boolean;
}
const BlocksInput = React.forwardRef<{ focus: () => void }, BlocksInputProps>(
(
{ intlLabel, labelAction, name, required = false, error = '', hint, ...editorProps },
forwardedRef
) => {
const { formatMessage } = useIntl();
const label = intlLabel.id ? formatMessage(intlLabel) : name;
return (
<>
<Flex direction="column" alignItems="stretch" gap={1}>
<Flex gap={1}>
<Typography variant="pi" fontWeight="bold" textColor="neutral800">
{label}
{required && (
<Typography textColor="danger600" lineHeight="0px">
*
</Typography>
)}
</Typography>
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
</Flex>
<BlocksEditor name={name} error={error} ref={forwardedRef} {...editorProps} />
<Hint hint={hint} name={name} error={error} />
</Flex>
{error && (
<Box paddingTop={1}>
<Typography variant="pi" textColor="danger600" data-strapi-field-error>
{error}
</Typography>
</Box>
)}
</>
);
}
);
export { BlocksInput };