yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-03 19:36:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dnd preview

Browse Source 
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette 2021-09-23 13:54:39 +02:00
parent 02570c9060
commit 7b2ab717bf
2 changed files with 81 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,8 +3,7 @@ import { useDragLayer } from 'react-dnd';
import LayoutDndProvider from '../LayoutDndProvider';
import ItemTypes from '../../utils/ItemTypes';
import ComponentBanner from '../RepeatableComponent/Banner';
import RepeatableComponentPreview from '../RepeatableComponent/DragPreview';
import RelationItem from '../SelectMany/Relation';
import { Li } from '../SelectMany/components';
import DraggedField from '../DraggedField';
@ -51,18 +50,7 @@ const CustomDragLayer = () => {
case ItemTypes.FIELD:
return <DraggedField name={item.id} selectedItem={item.name} />;
case ItemTypes.COMPONENT:
return (
<ComponentBanner
{...item}
isOpen
isReadOnly={false}
style={{
width: '40vw',
border: '1px solid #AED4FB',
borderRadius: 2,
}}
/>
);
return <RepeatableComponentPreview displayedValue={item.displayedValue} />;
case ItemTypes.RELATION:
return (
<Li>

79
packages/core/admin/admin/src/content-manager/components/RepeatableComponent/DragPreview.js Normal file
View File

@ -0,0 +1,79 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Box } from '@strapi/parts/Box';
import { Row } from '@strapi/parts/Row';
import { Text } from '@strapi/parts/Text';
import { IconButton } from '@strapi/parts/IconButton';
import DeleteIcon from '@strapi/icons/DeleteIcon';
import DragHandle from '@strapi/icons/Drag';
import DropdownIcon from '@strapi/icons/FilterDropdown';
const DropdownIconWrapper = styled(Box)`
height: ${32 / 16}rem;
width: ${32 / 16}rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
svg {
height: ${6 / 16}rem;
width: ${11 / 16}rem;
> path {
fill: ${({ theme }) => theme.colors.primary600};
}
}
`;
const ToggleButton = styled.button`
border: none;
background: transparent;
display: block;
width: 100%;
text-align: unset;
padding: 0;
`;
const DragPreview = ({ displayedValue }) => {
return (
<Box
paddingLeft={3}
paddingRight={3}
paddingTop={3}
paddingBottom={3}
hasRadius
background="primary100"
style={{ width: '20vw' }}
>
<Row justifyContent="space-between">
<ToggleButton type="button">
<Row>
<DropdownIconWrapper background="primary200">
<DropdownIcon />
</DropdownIconWrapper>
<Box paddingLeft={6}>
<Text textColor="primary700" style={{ width: '9vw' }} ellipsis>
{displayedValue}
</Text>
</Box>
</Row>
</ToggleButton>
<Box paddingLeft={3}>
<Row>
<IconButton icon={<DeleteIcon />} />
<Box paddingLeft={2}>
<IconButton icon={<DragHandle />} />
</Box>
</Row>
</Box>
</Row>
</Box>
);
};
DragPreview.propTypes = {
displayedValue: PropTypes.string.isRequired,
};
export default DragPreview;