yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-02 10:55:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean files

Browse Source 
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-09-24 12:58:27 +02:00
parent 72ebabd4ef
commit 3ef2ee513a
14 changed files with 158 additions and 425 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
examples/getstarted/src/api/temp/content-types/temp/schema.json
View File

@ -11,36 +11,20 @@
"options": {
"draftAndPublish": true
},
"pluginOptions": {
"i18n": {
"localized": true
}
},
"pluginOptions": {},
"attributes": {
"name": {
"type": "string",
"pluginOptions": {
"i18n": {
"localized": false
}
}
"pluginOptions": {}
},
"temp": {
"type": "component",
"repeatable": true,
"component": "default.temp",
"pluginOptions": {
"i18n": {
"localized": true
}
}
"pluginOptions": {}
},
"dz": {
"pluginOptions": {
"i18n": {
"localized": true
}
},
"pluginOptions": {},
"type": "dynamiczone",
"components": [
"basic.simple",

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

@ -40,7 +40,7 @@ const ComponentInitializer = ({ isReadOnly, onClick }) => {
paddingBottom={9}
>
<Stack size={2}>
<Row justifyContent="center">
<Row justifyContent="center" style={{ cursor: isReadOnly ? 'not-allowed' : 'inherit' }}>
<IconButton disabled={isReadOnly} onClick={onClick}>
<AddIcon />
</IconButton>

42
packages/core/admin/admin/src/content-manager/components/DragLayer/index.js
View File

@ -4,9 +4,9 @@ import LayoutDndProvider from '../LayoutDndProvider';
import ItemTypes from '../../utils/ItemTypes';
import RepeatableComponentPreview from '../RepeatableComponent/DragPreview';
import RelationItem from '../SelectMany/Relation';
import { Li } from '../SelectMany/components';
import DraggedField from '../DraggedField';
// import RelationItem from '../SelectMany/Relation';
// import { Li } from '../SelectMany/components';
// import DraggedField from '../DraggedField';
const layerStyles = {
position: 'fixed',
@ -47,26 +47,26 @@ const CustomDragLayer = () => {
function renderItem() {
switch (itemType) {
case ItemTypes.FIELD:
return <DraggedField name={item.id} selectedItem={item.name} />;
// case ItemTypes.FIELD:
// return <DraggedField name={item.id} selectedItem={item.name} />;
case ItemTypes.COMPONENT:
return <RepeatableComponentPreview displayedValue={item.displayedValue} />;
case ItemTypes.RELATION:
return (
<Li>
<RelationItem
data={item.data}
displayNavigationLink={false}
mainField={item.mainField}
isDisabled={false}
isDragging
hasDraftAndPublish={item.hasDraftAndPublish}
/>
</Li>
);
case ItemTypes.EDIT_FIELD:
case ItemTypes.EDIT_RELATION:
return <DraggedField name={item.name} size={12} selectedItem={item.name} />;
// case ItemTypes.RELATION:
// return (
// <Li>
// <RelationItem
// data={item.data}
// displayNavigationLink={false}
// mainField={item.mainField}
// isDisabled={false}
// isDragging
// hasDraftAndPublish={item.hasDraftAndPublish}
// />
// </Li>
// );
// case ItemTypes.EDIT_FIELD:
// case ItemTypes.EDIT_RELATION:
// return <DraggedField name={item.name} size={12} selectedItem={item.name} />;
default:
return null;
}

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

@ -31,6 +31,7 @@ const StyledButton = styled(BaseButton)`
padding: ${({ theme }) => theme.spaces[3]};
border: 0;
box-shadow: ${({ theme }) => theme.shadows.filterShadow};
svg {
height: ${({ theme }) => theme.spaces[6]};
width: ${({ theme }) => theme.spaces[6]};
@ -72,7 +73,7 @@ const BoxFullHeight = styled(Box)`
height: 100%;
`;
const AddComponentButton = ({ isOpen, label, name, onClick }) => {
const AddComponentButton = ({ isDisabled, isOpen, label, name, onClick }) => {
const { formatMessage } = useIntl();
const addLabel = formatMessage(
{
@ -85,8 +86,12 @@ const AddComponentButton = ({ isOpen, label, name, onClick }) => {
return (
<Row justifyContent="center">
<Box paddingTop={6} paddingBottom={6}>
<StyledButton type="button" onClick={onClick}>
<Box
paddingTop={6}
paddingBottom={6}
style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}
>
<StyledButton type="button" onClick={onClick} disabled={isDisabled}>
<Row>
<BoxFullHeight aria-hidden paddingRight={2}>
<StyledAddIcon $isopen={isOpen} />
@ -107,6 +112,7 @@ AddComponentButton.defaultProps = {
AddComponentButton.propTypes = {
label: PropTypes.string,
isDisabled: PropTypes.bool.isRequired,
isOpen: PropTypes.bool.isRequired,
name: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,

3
packages/core/admin/admin/src/content-manager/components/DynamicZone/components/AddComponentButton/tests/__snapshots__/index.test.js.snap
View File

@ -161,6 +161,7 @@ exports[`<AddComponentButton /> displays the name of the dz when the label is em
>
<div
class="c1"
style="cursor: pointer;"
>
<button
aria-disabled="false"
@ -389,6 +390,7 @@ exports[`<AddComponentButton /> renders and matches the snapshot 1`] = `
>
<div
class="c1"
style="cursor: pointer;"
>
<button
aria-disabled="false"
@ -617,6 +619,7 @@ exports[`<AddComponentButton /> renders and matches the snapshot when the isOpen
>
<div
class="c1"
style="cursor: pointer;"
>
<button
aria-disabled="false"

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

@ -93,7 +93,6 @@ const Component = ({
<FocusTrap onEscape={() => onToggle(index)}>
<FieldComponent
componentUid={componentUid}
componentFriendlyName={friendlyName}
icon={icon}
name={`${name}.${index}`}
isFromDynamicZone

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

@ -206,21 +206,19 @@ const DynamicZone = ({
})}
</>
)}
{isFieldAllowed && (
<>
<AddComponentButton
label={metadatas.label}
isOpen={isOpen}
name={name}
onClick={handleClickOpenPicker}
/>
<ComponentPicker
isOpen={isOpen}
components={dynamicZoneAvailableComponents}
onClickAddComponent={handleAddComponent}
/>
</>
)}
<AddComponentButton
isDisabled={!isFieldAllowed}
label={metadatas.label}
isOpen={isOpen}
name={name}
onClick={handleClickOpenPicker}
/>
<ComponentPicker
isOpen={isOpen}
components={dynamicZoneAvailableComponents}
onClickAddComponent={handleAddComponent}
/>
</Box>
);

44
packages/core/admin/admin/src/content-manager/components/FieldComponent/ComponentIcon.js
View File

@ -1,44 +0,0 @@
import styled from 'styled-components';
const ComponentIcon = styled.div`
position: absolute;
top: -16px;
left: 10px;
display: flex;
> .component_name {
overflow: hidden;
position: relative;
width: auto;
height: 31px;
padding: 0 11px 0 39px;
color: #007eff;
font-size: 13px;
font-weight: 600;
line-height: 26px;
border-radius: 31px;
border: 2px solid white;
background-color: #e6f0fb;
.component_icon {
z-index: 1;
display: flex;
position: absolute;
top: -1px;
left: -1px;
width: 29px;
height: 29px;
border-radius: 31px;
border: 1px solid white;
background-color: #e6f0fb;
svg {
margin: auto;
color: #007eff;
font-size: 11px;
}
}
}
`;
export default ComponentIcon;

18
packages/core/admin/admin/src/content-manager/components/FieldComponent/Wrapper.js
View File

@ -1,18 +0,0 @@
import styled from 'styled-components';
/* eslint-disable indent */
const Wrapper = styled.div`
position: relative;
${({ isFromDynamicZone }) => {
if (isFromDynamicZone) {
return `
background-color: #fff;
`;
}
return '';
}}
`;
export default Wrapper;

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

@ -10,22 +10,17 @@ import { Box } from '@strapi/parts/Box';
import { IconButton } from '@strapi/parts/IconButton';
import { Row } from '@strapi/parts/Row';
import { Stack } from '@strapi/parts/Stack';
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { getTrad } from '../../utils';
import ComponentInitializer from '../ComponentInitializer';
import NonRepeatableComponent from '../NonRepeatableComponent';
import RepeatableComponent from '../RepeatableComponent';
import connect from './utils/connect';
import select from './utils/select';
// import ComponentIcon from './ComponentIcon';
import Label from './Label';
// import Wrapper from './Wrapper';
const FieldComponent = ({
addNonRepeatableComponentToField,
// componentFriendlyName,
componentUid,
// icon,
// TODO add error state
// formErrors,
intlLabel,
@ -117,75 +112,12 @@ const FieldComponent = ({
</Stack>
</Box>
);
// 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}&nbsp;
// {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 = {
componentValue: null,
// componentFriendlyName: null,
hasChildrenAllowedFields: false,
hasChildrenReadableFields: false,
// icon: 'smile',
intlLabel: undefined,
isFromDynamicZone: false,
isReadOnly: false,
@ -198,12 +130,10 @@ FieldComponent.defaultProps = {
FieldComponent.propTypes = {
addNonRepeatableComponentToField: PropTypes.func.isRequired,
// componentFriendlyName: PropTypes.string,
componentUid: PropTypes.string.isRequired,
componentValue: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
hasChildrenAllowedFields: PropTypes.bool,
hasChildrenReadableFields: PropTypes.bool,
// icon: PropTypes.string,
isCreatingEntry: PropTypes.bool.isRequired,
isFromDynamicZone: PropTypes.bool,
isReadOnly: PropTypes.bool,

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

@ -10,12 +10,7 @@ import { useContentTypeLayout } from '../../hooks';
import FieldComponent from '../FieldComponent';
import Inputs from '../Inputs';
const NonRepeatableComponent = ({
componentUid,
// TODO
// isFromDynamicZone,
name,
}) => {
const NonRepeatableComponent = ({ componentUid, name }) => {
const { getComponentLayout } = useContentTypeLayout();
const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
componentUid,
@ -70,58 +65,10 @@ const NonRepeatableComponent = ({
</Stack>
</Box>
);
// return (
// <NonRepeatableWrapper isFromDynamicZone={isFromDynamicZone}>
// {fields.map((fieldRow, key) => {
// return (
// <div className="row" key={key}>
// {fieldRow.map(({ name: fieldName, size, metadatas, fieldSchema, queryInfos }) => {
// const isComponent = fieldSchema.type === 'component';
// const keys = `${name}.${fieldName}`;
// if (isComponent) {
// const compoUid = fieldSchema.component;
// return (
// <FieldComponent
// key={fieldName}
// componentUid={compoUid}
// isRepeatable={fieldSchema.repeatable}
// label={metadatas.label}
// max={fieldSchema.max}
// min={fieldSchema.min}
// name={keys}
// />
// );
// }
// return (
// <div key={fieldName} className={`col-${size}`}>
// <Inputs
// keys={keys}
// fieldSchema={fieldSchema}
// metadatas={metadatas}
// componentUid={componentUid}
// queryInfos={queryInfos}
// />
// </div>
// );
// })}
// </div>
// );
// })}
// </NonRepeatableWrapper>
// );
};
NonRepeatableComponent.defaultProps = {
// isFromDynamicZone: false,
};
NonRepeatableComponent.propTypes = {
componentUid: PropTypes.string.isRequired,
// isFromDynamicZone: PropTypes.bool,
name: PropTypes.string.isRequired,
};

73
packages/core/admin/admin/src/content-manager/components/NonRepeatableWrapper/index.js
View File

@ -1,73 +0,0 @@
import styled from 'styled-components';
const hoverStyle = `
border: 1px solid #aed4fb;
background-color: #e6f0fb;
> button {
:before,
:after {
background-color: #007eff;
}
background-color: #aed4fb;
}
> p {
color: #007eff;
}
`;
/* eslint-disable indent */
const NonRepeatableWrapper = styled.div`
margin: 0 !important;
padding: 0 20px !important;
${({ isEmpty, isFromDynamicZone, isReadOnly }) => {
if (isEmpty) {
return `
position: relative;
height: 108px;
margin-bottom: 25px !important;
background-color: #fafafb;
text-align: center;
cursor: ${isReadOnly ? 'not-allowed' : 'pointer'};
border-radius: 2px;
> button {
position: absolute;
top: 30px;
left: calc(50% - 18px);
height: 36px;
width: 36px;
line-height: 38px;
border-radius: 50%;
background-color: #f3f4f4;
cursor: ${isReadOnly ? 'not-allowed !important' : 'pointer'};
}
border: 1px solid transparent;
&:hover {
${isReadOnly ? '' : hoverStyle};
}
`;
}
if (isFromDynamicZone) {
return `
background-color: #fff;
padding: 0 10px !important;
`;
}
return `
padding-top: 25px !important;
background-color: #f7f8f8;
margin-bottom: 18px !important;
`;
}}
`;
NonRepeatableWrapper.defaultProps = {
isReadOnly: false,
};
export default NonRepeatableWrapper;

210
packages/core/admin/admin/src/content-manager/components/RepeatableComponent/Banner.js
View File

@ -1,114 +1,114 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { forwardRef } from 'react';
import { FormattedMessage } from 'react-intl';
import PropTypes from 'prop-types';
import { Carret, Grab } from '@buffetjs/icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { getTrad } from '../../utils';
import PreviewCarret from '../PreviewCarret';
// import BannerWrapper from './BannerWrapper';
// /* eslint-disable jsx-a11y/click-events-have-key-events */
// import React, { forwardRef } from 'react';
// import { FormattedMessage } from 'react-intl';
// import PropTypes from 'prop-types';
// import { Carret, Grab } from '@buffetjs/icons';
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// import { getTrad } from '../../utils';
// import PreviewCarret from '../PreviewCarret';
// // import BannerWrapper from './BannerWrapper';
const BannerWrapper = () => null;
// const BannerWrapper = () => null;
/* eslint-disable jsx-a11y/no-static-element-interactions */
// /* eslint-disable jsx-a11y/no-static-element-interactions */
const Banner = forwardRef(
(
{
displayedValue,
doesPreviousFieldContainErrorsAndIsOpen,
hasErrors,
hasMinError,
isFirst,
isReadOnly,
isDragging,
isOpen,
onClickToggle,
onClickRemove,
style,
},
refs
) => {
const display = isDragging ? 'none' : '';
// const Banner = forwardRef(
// (
// {
// displayedValue,
// doesPreviousFieldContainErrorsAndIsOpen,
// hasErrors,
// hasMinError,
// isFirst,
// isReadOnly,
// isDragging,
// isOpen,
// onClickToggle,
// onClickRemove,
// style,
// },
// refs
// ) => {
// const display = isDragging ? 'none' : '';
return (
<BannerWrapper
doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
type="button"
hasMinError={hasMinError}
hasErrors={hasErrors}
isFirst={isFirst}
isOpen={isOpen}
isReadOnly={isReadOnly}
onClick={onClickToggle}
ref={refs ? refs.dropRef : null}
style={style}
>
{isDragging && <PreviewCarret isComponent />}
<>
<div className="img-wrapper" style={{ display }}>
<Carret />
</div>
// return (
// <BannerWrapper
// doesPreviousFieldContainErrorsAndIsOpen={doesPreviousFieldContainErrorsAndIsOpen}
// type="button"
// hasMinError={hasMinError}
// hasErrors={hasErrors}
// isFirst={isFirst}
// isOpen={isOpen}
// isReadOnly={isReadOnly}
// onClick={onClickToggle}
// ref={refs ? refs.dropRef : null}
// style={style}
// >
// {isDragging && <PreviewCarret isComponent />}
// <>
// <div className="img-wrapper" style={{ display }}>
// <Carret />
// </div>
<FormattedMessage id={getTrad('containers.Edit.pluginHeader.title.new')}>
{msg => {
// The displayed value may be "falsey" when the main field is a number or boolean
return <div style={{ display }}>{displayedValue ?? msg}</div>;
}}
</FormattedMessage>
<div className="cta-wrapper" style={{ display }}>
{!isReadOnly && (
<>
<div
className="trash-icon"
style={{ marginRight: 10, padding: '0 5px' }}
onClick={e => {
e.preventDefault();
e.stopPropagation();
onClickRemove();
}}
>
<FontAwesomeIcon icon="trash-alt" />
</div>
<div className="grab" ref={refs ? refs.dragRef : null}>
<Grab />
</div>
</>
)}
</div>
</>
</BannerWrapper>
);
}
);
// <FormattedMessage id={getTrad('containers.Edit.pluginHeader.title.new')}>
// {msg => {
// // The displayed value may be "falsey" when the main field is a number or boolean
// return <div style={{ display }}>{displayedValue ?? msg}</div>;
// }}
// </FormattedMessage>
// <div className="cta-wrapper" style={{ display }}>
// {!isReadOnly && (
// <>
// <div
// className="trash-icon"
// style={{ marginRight: 10, padding: '0 5px' }}
// onClick={e => {
// e.preventDefault();
// e.stopPropagation();
// onClickRemove();
// }}
// >
// <FontAwesomeIcon icon="trash-alt" />
// </div>
// <div className="grab" ref={refs ? refs.dragRef : null}>
// <Grab />
// </div>
// </>
// )}
// </div>
// </>
// </BannerWrapper>
// );
// }
// );
Banner.defaultProps = {
displayedValue: null,
doesPreviousFieldContainErrorsAndIsOpen: false,
hasErrors: false,
hasMinError: false,
isDragging: false,
isFirst: false,
isOpen: false,
onClickRemove: () => {},
onClickToggle: () => {},
style: {},
};
// Banner.defaultProps = {
// displayedValue: null,
// doesPreviousFieldContainErrorsAndIsOpen: false,
// hasErrors: false,
// hasMinError: false,
// isDragging: false,
// isFirst: false,
// isOpen: false,
// onClickRemove: () => {},
// onClickToggle: () => {},
// style: {},
// };
Banner.propTypes = {
displayedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
doesPreviousFieldContainErrorsAndIsOpen: PropTypes.bool,
hasErrors: PropTypes.bool,
hasMinError: PropTypes.bool,
isDragging: PropTypes.bool,
isFirst: PropTypes.bool,
isOpen: PropTypes.bool,
isReadOnly: PropTypes.bool.isRequired,
onClickToggle: PropTypes.func,
onClickRemove: PropTypes.func,
style: PropTypes.object,
};
// Banner.propTypes = {
// displayedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
// doesPreviousFieldContainErrorsAndIsOpen: PropTypes.bool,
// hasErrors: PropTypes.bool,
// hasMinError: PropTypes.bool,
// isDragging: PropTypes.bool,
// isFirst: PropTypes.bool,
// isOpen: PropTypes.bool,
// isReadOnly: PropTypes.bool.isRequired,
// onClickToggle: PropTypes.func,
// onClickRemove: PropTypes.func,
// style: PropTypes.object,
// };
Banner.displayName = 'Banner';
// Banner.displayName = 'Banner';
export default Banner;
// export default Banner;

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

@ -30,6 +30,7 @@ import { connect, select } from './utils';
const DraggedItem = ({
componentFieldName,
// FIXME: errors
// doesPreviousFieldContainErrorsAndIsOpen,
// hasErrors,
// hasMinError,