yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-27 15:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add required field sign in CM edit view

Browse Source 
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-10-29 08:43:51 +02:00
parent 467a2e2999
commit 23d2be6b7c
11 changed files with 47 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js
View File

@ -11,13 +11,13 @@ import styled from 'styled-components';
import { pxToRem } from '@strapi/helper-plugin';
import { Box } from '@strapi/design-system/Box';
import { Flex } from '@strapi/design-system/Flex';
import { Typography } from '@strapi/design-system/Text';
import { Text, Typography } from '@strapi/design-system/Text';
const StyledBox = styled(Box)`
border-radius: ${pxToRem(26)};
`;
const DzLabel = ({ label, labelAction, name, numberOfComponents }) => {
const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) => {
const { formatMessage } = useIntl();
const intlLabel = formatMessage({ id: label || name, defaultMessage: label || name });
@ -29,6 +29,7 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents }) => {
<Typography fontSize={0} lineHeight={0} textColor="neutral600" fontWeight="bold">
{intlLabel}&nbsp;({numberOfComponents})
</Typography>
{required && <Text textColor="danger600">*</Text>}
{labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
</Flex>
</StyledBox>
@ -40,6 +41,7 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents }) => {
DzLabel.defaultProps = {
label: '',
labelAction: undefined,
required: false,
};
DzLabel.propTypes = {
@ -47,6 +49,7 @@ DzLabel.propTypes = {
labelAction: PropTypes.element,
name: PropTypes.string.isRequired,
numberOfComponents: PropTypes.number.isRequired,
required: PropTypes.bool,
};
export default DzLabel;

2
packages/core/admin/admin/src/content-manager/components/DynamicZone/index.js
View File

@ -175,6 +175,7 @@ const DynamicZone = ({
labelAction={labelAction}
name={name}
numberOfComponents={dynamicDisplayedComponentsLength}
required={fieldSchema.required || false}
/>
{dynamicDisplayedComponents.map((componentUid, index) => {
const showDownIcon =
@ -240,6 +241,7 @@ DynamicZone.propTypes = {
components: PropTypes.array.isRequired,
max: PropTypes.number,
min: PropTypes.number,
required: PropTypes.bool,
}),
formErrors: PropTypes.object.isRequired,
isCreatingEntry: PropTypes.bool.isRequired,

13
packages/core/admin/admin/src/content-manager/components/FieldComponent/Label.js
View File

@ -12,7 +12,15 @@ const LabelAction = styled(Box)`
}
`;
const Label = ({ intlLabel, id, labelAction, name, numberOfEntries, showNumberOfEntries }) => {
const Label = ({
intlLabel,
id,
labelAction,
name,
numberOfEntries,
showNumberOfEntries,
required,
}) => {
const { formatMessage } = useIntl();
const label = intlLabel?.id ? formatMessage(intlLabel) : name;
@ -22,6 +30,7 @@ const Label = ({ intlLabel, id, labelAction, name, numberOfEntries, showNumberOf
<Text textColor="neutral800" htmlFor={id || name} small bold as="label">
{label}
{showNumberOfEntries && <>&nbsp;({numberOfEntries})</>}
{required && <Text textColor="danger600">*</Text>}
</Text>
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
</Flex>
@ -33,6 +42,7 @@ Label.defaultProps = {
id: undefined,
labelAction: undefined,
numberOfEntries: 0,
required: false,
showNumberOfEntries: false,
};
@ -46,6 +56,7 @@ Label.propTypes = {
labelAction: PropTypes.element,
name: PropTypes.string.isRequired,
numberOfEntries: PropTypes.number,
required: PropTypes.bool,
showNumberOfEntries: PropTypes.bool,
};

4
packages/core/admin/admin/src/content-manager/components/FieldComponent/index.js
View File

@ -38,6 +38,7 @@ const FieldComponent = ({
isReadOnly,
componentValue,
removeComponentFromField,
required,
}) => {
const { formatMessage } = useIntl();
const componentValueLength = size(componentValue);
@ -67,6 +68,7 @@ const FieldComponent = ({
name={name}
numberOfEntries={componentValueLength}
showNumberOfEntries={isRepeatable}
required={required}
/>
)}
@ -128,6 +130,7 @@ FieldComponent.defaultProps = {
labelAction: undefined,
max: Infinity,
min: -Infinity,
required: false,
};
FieldComponent.propTypes = {
@ -151,6 +154,7 @@ FieldComponent.propTypes = {
min: PropTypes.number,
name: PropTypes.string.isRequired,
removeComponentFromField: PropTypes.func.isRequired,
required: PropTypes.bool,
};
const Memoized = memo(FieldComponent, isEqual);

5
packages/core/admin/admin/src/content-manager/components/Inputs/ComingSoonInput.js
View File

@ -9,7 +9,7 @@ import { useIntl } from 'react-intl';
import { TextInput } from '@strapi/design-system/TextInput';
import PropTypes from 'prop-types';
const CominSoonInput = ({ description, intlLabel, labelAction, error, name }) => {
const CominSoonInput = ({ description, intlLabel, labelAction, error, name, required }) => {
const { formatMessage } = useIntl();
const label = intlLabel.id
? formatMessage(
@ -38,6 +38,7 @@ const CominSoonInput = ({ description, intlLabel, labelAction, error, name }) =>
name={name}
onChange={() => {}}
placeholder="Coming soon"
required={required}
type="text"
value=""
/>
@ -48,6 +49,7 @@ CominSoonInput.defaultProps = {
description: null,
error: '',
labelAction: undefined,
required: false,
};
CominSoonInput.propTypes = {
@ -64,6 +66,7 @@ CominSoonInput.propTypes = {
}).isRequired,
labelAction: PropTypes.element,
name: PropTypes.string.isRequired,
required: PropTypes.bool,
};
export default CominSoonInput;

4
packages/core/admin/admin/src/content-manager/components/Inputs/index.js
View File

@ -34,7 +34,6 @@ function Inputs({
keys,
labelAction,
metadatas,
onChange,
readableFields,
shouldNotRunValidations,
@ -183,12 +182,12 @@ function Inputs({
labelAction={labelAction}
error={errorId}
name={keys}
required={isRequired}
/>
);
}
if (type === 'relation') {
// return 'RELATION';
return (
<SelectWrapper
{...metadatas}
@ -243,6 +242,7 @@ function Inputs({
onChange={onChange}
options={options}
placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
required={fieldSchema.required || false}
step={step}
type={inputType}
// validations={validations}

1
packages/core/admin/admin/src/content-manager/components/Inputs/utils/VALIDATIONS_TO_OMIT.js
View File

@ -7,6 +7,7 @@ const validationsToOmit = [
'plugin',
'enum',
'regex',
'pluginOptions',
];
export default validationsToOmit;

1
packages/core/admin/admin/src/content-manager/components/NonRepeatableComponent/index.js
View File

@ -52,6 +52,7 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
max={fieldSchema.max}
min={fieldSchema.min}
name={keys}
required={fieldSchema.required || false}
/>
</GridItem>
);

1
packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js
View File

@ -224,6 +224,7 @@ const DraggedItem = ({
name={keys}
max={fieldSchema.max}
min={fieldSchema.min}
required={fieldSchema.required}
/>
</GridItem>
);

2
packages/core/admin/admin/src/content-manager/pages/EditView/index.js
View File

@ -188,6 +188,7 @@ const EditView = ({
max,
min,
repeatable = false,
required = false,
} = fieldSchema;
return (
@ -203,6 +204,7 @@ const EditView = ({
max={max}
min={min}
name={name}
required={required}
/>
</GridItem>
);

13
packages/core/helper-plugin/lib/src/components/GenericInput/index.js
View File

@ -32,6 +32,7 @@ const GenericInput = ({
onChange,
options,
placeholder,
required,
step,
type,
value,
@ -54,6 +55,7 @@ const GenericInput = ({
name={name}
onChange={onChange}
options={options}
required={required}
placeholder={placeholder}
type={type}
value={value}
@ -105,6 +107,7 @@ const GenericInput = ({
onChange={e => {
onChange({ target: { name, value: e.target.checked } });
}}
required={required}
/>
);
}
@ -119,6 +122,7 @@ const GenericInput = ({
onValueChange={value => {
onChange({ target: { name, value } });
}}
required={required}
value={Boolean(value)}
>
{label}
@ -143,6 +147,7 @@ const GenericInput = ({
}}
onClear={() => onChange({ target: { name, value: '', type } })}
placeholder={formattedPlaceholder}
required={required}
selectedDate={value ? new Date(value) : null}
selectedDateLabel={formattedDate => `Date picker, current is ${formattedDate}`}
/>
@ -162,6 +167,7 @@ const GenericInput = ({
onChange({ target: { name, value, type } });
}}
placeholder={formattedPlaceholder}
required={required}
step={step}
value={value || undefined}
/>
@ -182,6 +188,7 @@ const GenericInput = ({
name={name}
onChange={onChange}
placeholder={formattedPlaceholder}
required={required}
type={type}
value={value || ''}
/>
@ -219,6 +226,7 @@ const GenericInput = ({
name={name}
onChange={onChange}
placeholder={formattedPlaceholder}
required={required}
type={showPassword ? 'text' : 'password'}
value={value || ''}
/>
@ -238,6 +246,7 @@ const GenericInput = ({
onChange({ target: { name, value: value === '' ? null : value, type: 'select' } });
}}
placeholder={formattedPlaceholder}
required={required}
value={value || ''}
>
{options.map(({ metadatas: { intlLabel, disabled, hidden }, key, value }) => {
@ -261,6 +270,7 @@ const GenericInput = ({
hint={hint}
name={name}
onChange={onChange}
required={required}
placeholder={formattedPlaceholder}
type={type}
value={value || ''}
@ -297,6 +307,7 @@ const GenericInput = ({
onChange({ target: { name, value: null, type } });
}}
placeholder={formattedPlaceholder}
required={required}
step={step}
value={time}
/>
@ -320,6 +331,7 @@ GenericInput.defaultProps = {
error: '',
labelAction: undefined,
placeholder: null,
required: false,
options: [],
step: 1,
value: '',
@ -362,6 +374,7 @@ GenericInput.propTypes = {
defaultMessage: PropTypes.string.isRequired,
values: PropTypes.object,
}),
required: PropTypes.bool,
step: PropTypes.number,
type: PropTypes.string.isRequired,
value: PropTypes.any,