mirror of
https://github.com/strapi/strapi.git
synced 2025-12-27 15:13:21 +00:00
Init components
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette
parent
f338217f9d
commit
10a7503dd7
@ -0,0 +1,50 @@
|
||||
{
|
||||
"kind": "collectionType",
|
||||
"collectionName": "temps",
|
||||
"info": {
|
||||
"singularName": "temp",
|
||||
"pluralName": "temps",
|
||||
"displayName": "temp",
|
||||
"name": "temp",
|
||||
"description": ""
|
||||
},
|
||||
"options": {
|
||||
"draftAndPublish": true
|
||||
},
|
||||
"pluginOptions": {
|
||||
"i18n": {
|
||||
"localized": true
|
||||
}
|
||||
},
|
||||
"attributes": {
|
||||
"name": {
|
||||
"type": "string",
|
||||
"pluginOptions": {
|
||||
"i18n": {
|
||||
"localized": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"temp": {
|
||||
"type": "component",
|
||||
"repeatable": false,
|
||||
"component": "default.temp",
|
||||
"pluginOptions": {
|
||||
"i18n": {
|
||||
"localized": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"temp_req": {
|
||||
"type": "component",
|
||||
"repeatable": false,
|
||||
"component": "default.temp",
|
||||
"required": true,
|
||||
"pluginOptions": {
|
||||
"i18n": {
|
||||
"localized": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
15
examples/getstarted/src/api/temp/controllers/temp.js
Normal file
15
examples/getstarted/src/api/temp/controllers/temp.js
Normal file
@ -0,0 +1,15 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* A set of functions called "actions" for `temp`
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
// exampleAction: async (ctx, next) => {
|
||||
// try {
|
||||
// ctx.body = 'ok';
|
||||
// } catch (err) {
|
||||
// ctx.body = err;
|
||||
// }
|
||||
// }
|
||||
};
|
||||
44
examples/getstarted/src/api/temp/routes/temp.js
Normal file
44
examples/getstarted/src/api/temp/routes/temp.js
Normal file
@ -0,0 +1,44 @@
|
||||
module.exports = {
|
||||
routes: [
|
||||
{
|
||||
method: 'GET',
|
||||
path: '/temps',
|
||||
handler: 'temp.find',
|
||||
config: {
|
||||
policies: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
method: 'GET',
|
||||
path: '/temps/:id',
|
||||
handler: 'temp.findOne',
|
||||
config: {
|
||||
policies: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
method: 'POST',
|
||||
path: '/temps',
|
||||
handler: 'temp.create',
|
||||
config: {
|
||||
policies: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
method: 'PUT',
|
||||
path: '/temps/:id',
|
||||
handler: 'temp.update',
|
||||
config: {
|
||||
policies: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
method: 'DELETE',
|
||||
path: '/temps/:id',
|
||||
handler: 'temp.delete',
|
||||
config: {
|
||||
policies: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
13
examples/getstarted/src/components/default/temp.json
Normal file
13
examples/getstarted/src/components/default/temp.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"collectionName": "components_default_temps",
|
||||
"info": {
|
||||
"name": "temp",
|
||||
"icon": "adjust"
|
||||
},
|
||||
"options": {},
|
||||
"attributes": {
|
||||
"name": {
|
||||
"type": "string"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable import/no-cycle */
|
||||
import React, { memo } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { size } from 'lodash';
|
||||
import size from 'lodash/size';
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import isEqual from 'react-fast-compare';
|
||||
@ -21,12 +21,12 @@ const FieldComponent = ({
|
||||
componentFriendlyName,
|
||||
componentUid,
|
||||
icon,
|
||||
intlLabel,
|
||||
isCreatingEntry,
|
||||
isFromDynamicZone,
|
||||
isRepeatable,
|
||||
isNested,
|
||||
label,
|
||||
labelIcon,
|
||||
labelAction,
|
||||
max,
|
||||
min,
|
||||
name,
|
||||
@ -37,92 +37,82 @@ const FieldComponent = ({
|
||||
componentValue,
|
||||
removeComponentFromField,
|
||||
}) => {
|
||||
const { formatMessage } = useIntl();
|
||||
// const { formatMessage } = useIntl();
|
||||
const componentValueLength = size(componentValue);
|
||||
const isInitialized = componentValue !== null || isFromDynamicZone;
|
||||
const showResetComponent =
|
||||
!isRepeatable && isInitialized && !isFromDynamicZone && hasChildrenAllowedFields;
|
||||
|
||||
const formattedLabelIcon = labelIcon
|
||||
? { icon: labelIcon.icon, title: formatMessage(labelIcon.title) }
|
||||
: null;
|
||||
|
||||
if (!hasChildrenAllowedFields && isCreatingEntry) {
|
||||
return (
|
||||
<div className="col-12">
|
||||
<NotAllowedInput label={label} labelIcon={formattedLabelIcon} />
|
||||
</div>
|
||||
);
|
||||
return <NotAllowedInput labelAction={labelAction} intlLabel={intlLabel} name={name} />;
|
||||
}
|
||||
|
||||
if (!hasChildrenAllowedFields && !isCreatingEntry && !hasChildrenReadableFields) {
|
||||
return (
|
||||
<div className="col-12">
|
||||
<NotAllowedInput label={label} labelIcon={formattedLabelIcon} />
|
||||
</div>
|
||||
);
|
||||
return <NotAllowedInput labelAction={labelAction} intlLabel={intlLabel} name={name} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Wrapper className="col-12" isFromDynamicZone={isFromDynamicZone}>
|
||||
{isFromDynamicZone && (
|
||||
<ComponentIcon title={componentFriendlyName}>
|
||||
<div className="component_name">
|
||||
<div className="component_icon">
|
||||
<FontAwesomeIcon icon={icon} title={componentFriendlyName} />
|
||||
</div>
|
||||
<p>{componentFriendlyName}</p>
|
||||
</div>
|
||||
</ComponentIcon>
|
||||
)}
|
||||
<Label>
|
||||
<span>
|
||||
{label}
|
||||
{isRepeatable && `(${componentValueLength})`}
|
||||
</span>
|
||||
{formattedLabelIcon && (
|
||||
<LabelIconWrapper title={formattedLabelIcon.title}>
|
||||
{formattedLabelIcon.icon}
|
||||
</LabelIconWrapper>
|
||||
)}
|
||||
</Label>
|
||||
{showResetComponent && (
|
||||
<Reset
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
removeComponentFromField(name, componentUid);
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id={getTrad('components.reset-entry')} />
|
||||
<div />
|
||||
</Reset>
|
||||
)}
|
||||
{!isRepeatable && !isInitialized && (
|
||||
<ComponentInitializer componentUid={componentUid} name={name} isReadOnly={isReadOnly} />
|
||||
)}
|
||||
return <div>TODO</div>;
|
||||
|
||||
{!isRepeatable && isInitialized && (
|
||||
<NonRepeatableComponent
|
||||
componentUid={componentUid}
|
||||
isFromDynamicZone={isFromDynamicZone}
|
||||
name={name}
|
||||
/>
|
||||
)}
|
||||
{isRepeatable && (
|
||||
<RepeatableComponent
|
||||
componentValue={componentValue}
|
||||
componentValueLength={componentValueLength}
|
||||
componentUid={componentUid}
|
||||
isNested={isNested}
|
||||
isReadOnly={isReadOnly}
|
||||
max={max}
|
||||
min={min}
|
||||
name={name}
|
||||
/>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
// return (
|
||||
// <Wrapper className="col-12" isFromDynamicZone={isFromDynamicZone}>
|
||||
// {isFromDynamicZone && (
|
||||
// <ComponentIcon title={componentFriendlyName}>
|
||||
// <div className="component_name">
|
||||
// <div className="component_icon">
|
||||
// <FontAwesomeIcon icon={icon} title={componentFriendlyName} />
|
||||
// </div>
|
||||
// <p>{componentFriendlyName}</p>
|
||||
// </div>
|
||||
// </ComponentIcon>
|
||||
// )}
|
||||
// <Label>
|
||||
// <span>
|
||||
// {label}
|
||||
// {isRepeatable && `(${componentValueLength})`}
|
||||
// </span>
|
||||
// {formattedLabelIcon && (
|
||||
// <LabelIconWrapper title={formattedLabelIcon.title}>
|
||||
// {formattedLabelIcon.icon}
|
||||
// </LabelIconWrapper>
|
||||
// )}
|
||||
// </Label>
|
||||
// {showResetComponent && (
|
||||
// <Reset
|
||||
// onClick={e => {
|
||||
// e.preventDefault();
|
||||
// e.stopPropagation();
|
||||
// removeComponentFromField(name, componentUid);
|
||||
// }}
|
||||
// >
|
||||
// <FormattedMessage id={getTrad('components.reset-entry')} />
|
||||
// <div />
|
||||
// </Reset>
|
||||
// )}
|
||||
// {!isRepeatable && !isInitialized && (
|
||||
// <ComponentInitializer componentUid={componentUid} name={name} isReadOnly={isReadOnly} />
|
||||
// )}
|
||||
|
||||
// {!isRepeatable && isInitialized && (
|
||||
// <NonRepeatableComponent
|
||||
// componentUid={componentUid}
|
||||
// isFromDynamicZone={isFromDynamicZone}
|
||||
// name={name}
|
||||
// />
|
||||
// )}
|
||||
// {isRepeatable && (
|
||||
// <RepeatableComponent
|
||||
// componentValue={componentValue}
|
||||
// componentValueLength={componentValueLength}
|
||||
// componentUid={componentUid}
|
||||
// isNested={isNested}
|
||||
// isReadOnly={isReadOnly}
|
||||
// max={max}
|
||||
// min={min}
|
||||
// name={name}
|
||||
// />
|
||||
// )}
|
||||
// </Wrapper>
|
||||
// );
|
||||
};
|
||||
|
||||
FieldComponent.defaultProps = {
|
||||
@ -135,7 +125,7 @@ FieldComponent.defaultProps = {
|
||||
isReadOnly: false,
|
||||
isRepeatable: false,
|
||||
isNested: false,
|
||||
labelIcon: null,
|
||||
labelAction: undefined,
|
||||
max: Infinity,
|
||||
min: -Infinity,
|
||||
};
|
||||
@ -152,14 +142,12 @@ FieldComponent.propTypes = {
|
||||
isReadOnly: PropTypes.bool,
|
||||
isRepeatable: PropTypes.bool,
|
||||
isNested: PropTypes.bool,
|
||||
label: PropTypes.string.isRequired,
|
||||
labelIcon: PropTypes.shape({
|
||||
icon: PropTypes.node.isRequired,
|
||||
title: PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
defaultMessage: PropTypes.string.isRequired,
|
||||
}),
|
||||
}),
|
||||
intlLabel: PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
defaultMessage: PropTypes.string.isRequired,
|
||||
values: PropTypes.object,
|
||||
}).isRequired,
|
||||
labelAction: PropTypes.element,
|
||||
max: PropTypes.number,
|
||||
min: PropTypes.number,
|
||||
name: PropTypes.string.isRequired,
|
||||
|
||||
@ -20,7 +20,7 @@ import permissions from '../../../permissions';
|
||||
// import Container from '../../components/Container';
|
||||
// import DynamicZone from '../../components/DynamicZone';
|
||||
// import FormWrapper from '../../components/FormWrapper';
|
||||
// import FieldComponent from '../../components/FieldComponent';
|
||||
import FieldComponent from '../../components/FieldComponent';
|
||||
import Inputs from '../../components/Inputs';
|
||||
// import SelectWrapper from '../../components/SelectWrapper';
|
||||
import CollectionTypeFormWrapper from '../../components/CollectionTypeFormWrapper';
|
||||
@ -155,6 +155,34 @@ const EditView = ({
|
||||
<Grid gap={4} key={gridIndex}>
|
||||
{grid.map(
|
||||
({ fieldSchema, labelAction, metadatas, name, size }) => {
|
||||
const isComponent = fieldSchema.type === 'component';
|
||||
|
||||
if (isComponent) {
|
||||
const {
|
||||
component,
|
||||
max,
|
||||
min,
|
||||
repeatable = false,
|
||||
} = fieldSchema;
|
||||
|
||||
return (
|
||||
<GridItem col={size} s={12} xs={12} key={component}>
|
||||
<FieldComponent
|
||||
componentUid={component}
|
||||
labelAction={labelAction}
|
||||
isRepeatable={repeatable}
|
||||
intlLabel={{
|
||||
id: metadatas.label,
|
||||
defaultMessage: metadatas.label,
|
||||
}}
|
||||
max={max}
|
||||
min={min}
|
||||
name={name}
|
||||
/>
|
||||
</GridItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<GridItem col={size} key={name} s={12} xs={12}>
|
||||
<Inputs
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user