yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-05 19:42:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

added dnd

Browse Source
This commit is contained in:
ronronscelestes 2021-10-29 16:36:46 +02:00
parent 173de9a25b
commit ffd8ec4f3b
5 changed files with 143 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/DragHandleWrapper.js
View File

@ -1,8 +0,0 @@
import styled from 'styled-components';
import { IconButton } from '@strapi/design-system/IconButton';
const DragHandleWrapper = styled(IconButton)`
cursor: move;
`;
export default DragHandleWrapper;

25
packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/IconButtonCustoms.js Normal file
View File

@ -0,0 +1,25 @@
import styled from 'styled-components';
import { IconButton } from '@strapi/design-system/IconButton';
export const CustomIconButton = styled(IconButton)`
background-color: transparent;
svg {
path {
fill: ${({ theme, expanded }) =>
expanded ? theme.colors.primary600 : theme.colors.neutral600};
}
}
&:hover {
svg {
path {
fill: ${({ theme }) => theme.colors.primary600};
}
}
}
`;
export const DragHandleWrapper = styled(CustomIconButton)`
cursor: move;
`;

12
packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DraggedItem/Preview.js
View File

@ -1,20 +1,14 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { Flex } from '@strapi/design-system/Flex';
const StyledBox = styled(Box)` const StyledBox = styled(Box)`
border: 1px dashed ${({ theme }) => theme.colors.primary500}; outline: 1px dashed ${({ theme }) => theme.colors.primary500};
outline-offset: -1px;
`; `;
const Preview = () => { const Preview = () => {
return ( return <StyledBox padding={6} background="primary100" />;
<StyledBox padding={8} background="primary100">
<Box>
<Flex />
</Box>
</StyledBox>
);
}; };
export default Preview; export default Preview;

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

@ -5,9 +5,7 @@ import { useDrag, useDrop } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend'; import { getEmptyImage } from 'react-dnd-html5-backend';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import toString from 'lodash/toString'; import toString from 'lodash/toString';
import styled from 'styled-components';
import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion'; import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
import { IconButton } from '@strapi/design-system/IconButton';
import { Grid, GridItem } from '@strapi/design-system/Grid'; import { Grid, GridItem } from '@strapi/design-system/Grid';
import { Stack } from '@strapi/design-system/Stack'; import { Stack } from '@strapi/design-system/Stack';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
@ -18,30 +16,9 @@ import getTrad from '../../../utils/getTrad';
import Inputs from '../../Inputs'; import Inputs from '../../Inputs';
import FieldComponent from '../../FieldComponent'; import FieldComponent from '../../FieldComponent';
import Preview from './Preview'; import Preview from './Preview';
import { CustomIconButton, DragHandleWrapper } from './IconButtonCustoms';
import { connect, select } from './utils'; import { connect, select } from './utils';
// FIXME
// Temporary workaround to remove the overflow until we migrate the react-select for the relations
// to the DS one
const CustomIconButton = styled(IconButton)`
background-color: transparent;
svg {
path {
fill: ${({ theme, expanded }) => expanded ? theme.colors.primary600 : theme.colors.neutral600}
}
}
&:hover {
svg {
path {
fill: ${({ theme }) => theme.colors.primary600}
}
}
}
`;
/* eslint-disable react/no-array-index-key */ /* eslint-disable react/no-array-index-key */
// Issues: // Issues:
@ -165,48 +142,45 @@ const DraggedItem = ({
}; };
return ( return (
<Box data-strapi-acc> <Box ref={refs ? refs.dropRef : null} data-strapi-is-dragging={isDragging}>
{isDragging && <Preview />} {isDragging && <Preview />}
{!isDragging && {!isDragging && (
<Accordion <Accordion expanded={isOpen} toggle={onClickToggle} id={componentFieldName} size="S">
expanded={isOpen}
toggle={onClickToggle}
id={componentFieldName}
size="S"
>
<AccordionToggle <AccordionToggle
action={ action={
isReadOnly ? null : isReadOnly ? null : (
<Stack horizontal size={0}> <Stack horizontal size={0}>
<CustomIconButton <CustomIconButton
expanded={isOpen} expanded={isOpen}
noBorder noBorder
onClick={() => { onClick={() => {
removeRepeatableField(componentFieldName); removeRepeatableField(componentFieldName);
toggleCollapses(); toggleCollapses();
}} }}
label={formatMessage({ label={formatMessage({
id: getTrad('containers.Edit.delete'), id: getTrad('containers.Edit.delete'),
defaultMessage: 'Delete', defaultMessage: 'Delete',
})} })}
icon={<Trash />} icon={<Trash />}
/> />
<CustomIconButton <DragHandleWrapper
expanded={isOpen} expanded={isOpen}
noBorder icon={<Drag />}
label={formatMessage({ label={formatMessage({
id: getTrad('components.DragHandle-label'), id: getTrad('components.DragHandle-label'),
defaultMessage: 'Drag', defaultMessage: 'Drag',
})} })}
icon={<Drag />} noBorder
/> ref={refs.dragRef}
</Stack> />
</Stack>
)
} }
title={toString(displayedValue)} title={toString(displayedValue)}
togglePosition="left" togglePosition="left"
/> />
<AccordionContent> <AccordionContent>
<Stack background='neutral100' padding={6} size={6}> <Stack background="neutral100" padding={6} size={6}>
{fields.map((fieldRow, key) => { {fields.map((fieldRow, key) => {
return ( return (
<Grid gap={4} key={key}> <Grid gap={4} key={key}>
@ -253,88 +227,89 @@ const DraggedItem = ({
})} })}
</Stack> </Stack>
</AccordionContent> </AccordionContent>
</Accordion>} </Accordion>
)}
</Box> </Box>
// <StyledBox ref={refs ? refs.dropRef : null}> // <StyledBox ref={refs ? refs.dropRef : null}>
// {isDragging && <Preview />} // {isDragging && <Preview />}
// {!isDragging && ( // {!isDragging && (
// <Accordion expanded={isOpen} toggle={onClickToggle} id={componentFieldName}> // <Accordion expanded={isOpen} toggle={onClickToggle} id={componentFieldName}>
// <AccordionToggle // <AccordionToggle
// action={ // action={
// isReadOnly ? null : ( // isReadOnly ? null : (
// <Flex> // <Flex>
// <IconButton // <IconButton
// icon={<Trash />} // icon={<Trash />}
// /> // />
// <Box paddingLeft={2}> // <Box paddingLeft={2}>
// <DragHandleWrapper // <DragHandleWrapper
// ref={refs.dragRef} // ref={refs.dragRef}
// icon={<Drag />} // icon={<Drag />}
// /> // />
// </Box> // </Box>
// </Flex> // </Flex>
// ) // )
// } // }
// /> // />
// <AccordionContent> // <AccordionContent>
// <Box // <Box
// background="neutral100" // background="neutral100"
// paddingLeft={6} // paddingLeft={6}
// paddingRight={6} // paddingRight={6}
// paddingTop={6} // paddingTop={6}
// paddingBottom={6} // paddingBottom={6}
// > // >
// <Stack size={6}> // <Stack size={6}>
// {fields.map((fieldRow, key) => { // {fields.map((fieldRow, key) => {
// return ( // return (
// <Grid gap={4} key={key}> // <Grid gap={4} key={key}>
// {fieldRow.map(({ name, fieldSchema, metadatas, queryInfos, size }) => { // {fieldRow.map(({ name, fieldSchema, metadatas, queryInfos, size }) => {
// const isComponent = fieldSchema.type === 'component'; // const isComponent = fieldSchema.type === 'component';
// const keys = `${componentFieldName}.${name}`; // const keys = `${componentFieldName}.${name}`;
// if (isComponent) { // if (isComponent) {
// const componentUid = fieldSchema.component; // const componentUid = fieldSchema.component;
// return ( // return (
// <GridItem col={size} s={12} xs={12} key={name}> // <GridItem col={size} s={12} xs={12} key={name}>
// <FieldComponent // <FieldComponent
// componentUid={componentUid} // componentUid={componentUid}
// intlLabel={{ // intlLabel={{
// id: metadatas.label, // id: metadatas.label,
// defaultMessage: metadatas.label, // defaultMessage: metadatas.label,
// }} // }}
// isRepeatable={fieldSchema.repeatable} // isRepeatable={fieldSchema.repeatable}
// isNested // isNested
// name={keys} // name={keys}
// max={fieldSchema.max} // max={fieldSchema.max}
// min={fieldSchema.min} // min={fieldSchema.min}
// required={fieldSchema.required} // required={fieldSchema.required}
// /> // />
// </GridItem> // </GridItem>
// ); // );
// } // }
// return ( // return (
// <GridItem key={keys} col={size} s={12} xs={12}> // <GridItem key={keys} col={size} s={12} xs={12}>
// <Inputs // <Inputs
// fieldSchema={fieldSchema} // fieldSchema={fieldSchema}
// keys={keys} // keys={keys}
// metadatas={metadatas} // metadatas={metadatas}
// // onBlur={hasErrors ? checkFormErrors : null} // // onBlur={hasErrors ? checkFormErrors : null}
// queryInfos={queryInfos} // queryInfos={queryInfos}
// /> // />
// </GridItem> // </GridItem>
// ); // );
// })} // })}
// </Grid> // </Grid>
// ); // );
// })} // })}
// </Stack> // </Stack>
// </Box> // </Box>
// </AccordionContent> // </AccordionContent>
// </Accordion> // </Accordion>
// )} // )}
// </StyledBox> // </StyledBox>
); );
}; };

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

@ -1,6 +1,6 @@
import React, { memo, useCallback, useMemo, useState } from 'react'; import React, { memo, useCallback, useMemo, useState } from 'react';
/* eslint-disable import/no-cycle */ /* eslint-disable import/no-cycle */
// import { useDrop } from 'react-dnd'; import { useDrop } from 'react-dnd';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import styled from 'styled-components'; import styled from 'styled-components';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -15,7 +15,7 @@ import Plus from '@strapi/icons/Plus';
// import { ErrorMessage } from '@buffetjs/styles'; // import { ErrorMessage } from '@buffetjs/styles';
import { getMaxTempKey, getTrad } from '../../utils'; import { getMaxTempKey, getTrad } from '../../utils';
import { useContentTypeLayout } from '../../hooks'; import { useContentTypeLayout } from '../../hooks';
// import ItemTypes from '../../utils/ItemTypes'; import ItemTypes from '../../utils/ItemTypes';
import ComponentInitializer from '../ComponentInitializer'; import ComponentInitializer from '../ComponentInitializer';
import connect from './utils/connect'; import connect from './utils/connect';
import select from './utils/select'; import select from './utils/select';
@ -49,7 +49,7 @@ const RepeatableComponent = ({
const toggleNotification = useNotification(); const toggleNotification = useNotification();
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const [collapseToOpen, setCollapseToOpen] = useState(''); const [collapseToOpen, setCollapseToOpen] = useState('');
// const [, drop] = useDrop({ accept: ItemTypes.COMPONENT }); const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
const { getComponentLayout } = useContentTypeLayout(); const { getComponentLayout } = useContentTypeLayout();
const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [ const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
componentUid, componentUid,
@ -112,11 +112,7 @@ const RepeatableComponent = ({
} }
return ( return (
<Box <Box hasRadius background="neutral0" shadow="tableShadow" ref={drop}>
hasRadius
background='neutral0'
shadow='tableShadow'
>
<AccordionGroupCustom <AccordionGroupCustom
footer={ footer={
<Flex justifyContent="center" height="48px" background="neutral0" hasRadius> <Flex justifyContent="center" height="48px" background="neutral0" hasRadius>