Clean files

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -206,9 +206,9 @@ const DynamicZone = ({
})} })}
</> </>
)} )}
{isFieldAllowed && (
<>
<AddComponentButton <AddComponentButton
isDisabled={!isFieldAllowed}
label={metadatas.label} label={metadatas.label}
isOpen={isOpen} isOpen={isOpen}
name={name} name={name}
@ -219,8 +219,6 @@ const DynamicZone = ({
components={dynamicZoneAvailableComponents} components={dynamicZoneAvailableComponents}
onClickAddComponent={handleAddComponent} onClickAddComponent={handleAddComponent}
/> />
</>
)}
</Box> </Box>
); );

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;

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;

View File

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

View File

@ -10,12 +10,7 @@ import { useContentTypeLayout } from '../../hooks';
import FieldComponent from '../FieldComponent'; import FieldComponent from '../FieldComponent';
import Inputs from '../Inputs'; import Inputs from '../Inputs';
const NonRepeatableComponent = ({ const NonRepeatableComponent = ({ componentUid, name }) => {
componentUid,
// TODO
// isFromDynamicZone,
name,
}) => {
const { getComponentLayout } = useContentTypeLayout(); const { getComponentLayout } = useContentTypeLayout();
const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [ const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
componentUid, componentUid,
@ -70,58 +65,10 @@ const NonRepeatableComponent = ({
</Stack> </Stack>
</Box> </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 = { NonRepeatableComponent.propTypes = {
componentUid: PropTypes.string.isRequired, componentUid: PropTypes.string.isRequired,
// isFromDynamicZone: PropTypes.bool,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
}; };

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;

View File

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

View File

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