Merge pull request #1067 from xieliuduo/dev-namelist

feat:LayerList in left
running-elephant · Mar 22, 2022 · 0ecc1c7 · 0ecc1c7
2 parents a1dc0b2 + c94f2d7
commit 0ecc1c7
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 36 deletions.
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/AutoEditor/index.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/AutoEditor/index.tsx
@@ -37,6 +37,7 @@ import { BoardActionContext } from 'app/pages/DashBoardPage/components/BoardProv
 import React, { useContext } from 'react';
 import styled from 'styled-components/macro';
 import { BoardToolBar } from '../components/BoardToolBar/BoardToolBar';
+import { LayerList } from '../components/LayerList/LayerList';
 import SlideSetting from '../components/SlideSetting/SlideSetting';
 import { AutoBoardEditor } from './AutoBoardEditor';
 const AutoEditor: React.FC<{}> = () => {
@@ -45,6 +46,7 @@ const AutoEditor: React.FC<{}> = () => {
     <Wrapper onClick={onClearActiveWidgets}>
       <BoardToolBar />
       <Editor>
+        <LayerList />
         <AutoBoardEditor />
         <SlideSetting />
       </Editor>

diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/FreeEditor/index.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/FreeEditor/index.tsx
@@ -21,6 +21,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components/macro';
 import { BoardToolBar } from '../components/BoardToolBar/BoardToolBar';
+import { LayerList } from '../components/LayerList/LayerList';
 import SlideSetting from '../components/SlideSetting/SlideSetting';
 import { editDashBoardInfoActions, editWidgetInfoActions } from '../slice';
 import { FreeEditorWrapper } from './FreeEditorWrapper';
@@ -38,6 +39,7 @@ const FreeEditor: React.FC = () => {
       <Wrapper>
         <BoardToolBar />
         <Editor>
+          <LayerList />
           <FreeEditorWrapper />
           <SlideSetting />
         </Editor>

diff --git a/...lideSetting/WidgetList/WidgetNameList.tsx → ...Editor/components/LayerList/LayerList.tsx b/...lideSetting/WidgetList/WidgetNameList.tsx → ...Editor/components/LayerList/LayerList.tsx
@@ -16,32 +16,21 @@
  * limitations under the License.
  */
 import { WidgetAllProvider } from 'app/pages/DashBoardPage/components/WidgetProvider/WidgetAllProvider';
-import { WidgetType } from 'app/pages/DashBoardPage/pages/Board/slice/types';
 import produce from 'immer';
-import React, { useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
-import { editBoardStackActions, editWidgetInfoActions } from '../../../slice';
-import { updateWidgetConf } from '../../../slice/childSlice/stackSlice';
+import { WidgetType } from '../../../Board/slice/types';
+import { editBoardStackActions, editWidgetInfoActions } from '../../slice';
+import { updateWidgetConf } from '../../slice/childSlice/stackSlice';
 import {
   selectAllWidgetInfoMap,
   selectSortAllWidgets,
-} from '../../../slice/selectors';
+} from '../../slice/selectors';
 import NameItem from './NameItem';
 
-export interface IProps {}
-const withDnd: React.FC<IProps> = props => {
-  return (
-    <DndProvider backend={HTML5Backend}>
-      <WidgetNameList />
-    </DndProvider>
-  );
-};
-
-export default withDnd;
-
 export type NameCard = {
   index: number;
   name: string;
@@ -50,7 +39,7 @@ export type NameCard = {
   editing: boolean;
   selected: boolean;
 };
-export const WidgetNameList: React.FC<IProps> = () => {
+export const LayerList: React.FC<{}> = memo(() => {
   const dispatch = useDispatch();
   const allWidgetsInfo = useSelector(selectAllWidgetInfoMap);
   const sortLayoutWidgets = useSelector(selectSortAllWidgets);
@@ -109,7 +98,6 @@ export const WidgetNameList: React.FC<IProps> = () => {
   const clearSelectedWidgets = () => {
     dispatch(editWidgetInfoActions.clearSelectedWidgets());
   };
-  //
 
   const nameList = cards
     .sort((a, b) => b.index - a.index)
@@ -127,12 +115,35 @@ export const WidgetNameList: React.FC<IProps> = () => {
       </WidgetAllProvider>
     ));
   return (
-    <NamesWrap onClick={clearSelectedWidgets}>
-      <div>{nameList}</div>
-    </NamesWrap>
+    <DndProvider backend={HTML5Backend}>
+      <Wrap onClick={clearSelectedWidgets}>
+        <h3 className="title">组件</h3>
+        <div className="nameList">{nameList}</div>
+        <div className="bottom"></div>
+      </Wrap>
+    </DndProvider>
   );
-};
-const NamesWrap = styled.div`
-  width: 100%;
-  height: 400px;
+});
+const Wrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 190px;
+  min-width: 190px;
+  overflow-y: auto;
+  background-color: ${p => p.theme.componentBackground};
+  box-shadow: ${p => p.theme.shadowSider};
+
+  & .title {
+    padding: 5px;
+    text-align: center;
+  }
+  & .nameList {
+    min-height: 0;
+    padding: 0 10px;
+    overflow-y: auto;
+  }
+  & .bottom {
+    padding: 5px;
+    text-align: center;
+  }
 `;
diff --git a/...ents/SlideSetting/WidgetList/NameItem.tsx → ...dEditor/components/LayerList/NameItem.tsx b/...ents/SlideSetting/WidgetList/NameItem.tsx → ...dEditor/components/LayerList/NameItem.tsx
@@ -28,8 +28,8 @@ import { DropTargetMonitor, useDrag, useDrop } from 'react-dnd';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components/macro';
 import { PRIMARY } from 'styles/StyleConstants';
-import { editWidgetInfoActions } from '../../../slice';
-import { NameCard } from './WidgetNameList';
+import { editWidgetInfoActions } from '../../slice';
+import { NameCard } from './LayerList';
 
 export interface NameItemProps {
   index: number;
@@ -171,7 +171,10 @@ const NameItem: React.FC<NameItemProps> = ({
         data-handler-id={handlerId}
         style={{ opacity }}
       >
-        {card.name || 'untitled-widget'}
+        <span className="name" title={card.name || 'untitled-widget'}>
+          {card.name || 'untitled-widget'}
+        </span>
+
         <WidgetActionDropdown widget={widget} />
       </div>
     </ItemWrap>
@@ -190,6 +193,12 @@ const ItemWrap = styled.div<{ selected: boolean }>`
     white-space: nowrap;
     cursor: move;
     background-color: ${p => p.theme.componentBackground};
+
+    .name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
   .selected-Item {
     background-color: ${p => p.theme.emphasisBackground};

diff --git a/...app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/NameSet.tsx b/...app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/NameSet.tsx
@@ -51,7 +51,7 @@ export const NameSet: FC<{
 
   return (
     <>
-      <Form.Item label={t('title')} preserve name="name">
+      <Form.Item preserve name="name">
         <Input className="datart-ant-input" placeholder="fill a name" />
       </Form.Item>
       <Form.Item valuePropName="checked" name={['nameConfig', 'show']}>

diff --git a/...d/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/WidgetSetting.tsx b/...d/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/WidgetSetting.tsx
@@ -40,7 +40,6 @@ import BorderSet from './SettingItem/BorderSet';
 import NameSet from './SettingItem/NameSet';
 import PaddingSet from './SettingItem/PaddingSet';
 import { Group, SettingPanel } from './SettingPanel';
-import { WidgetNameList } from './WidgetList/WidgetNameList';
 
 const { Panel } = Collapse;
 export const WidgetSetting: FC = memo(() => {
@@ -117,7 +116,7 @@ export const WidgetSetting: FC = memo(() => {
         preserve
       >
         <Collapse
-          defaultActiveKey={['widgetList']}
+          defaultActiveKey={['name', 'background']}
           className="datart-config-panel"
           ghost
         >
@@ -174,11 +173,6 @@ export const WidgetSetting: FC = memo(() => {
               <AutoUpdateSet />
             </Group>
           </Panel>
-          <Panel header={t('widgetList')} key="widgetList">
-            <Group>
-              <WidgetNameList />
-            </Group>
-          </Panel>
         </Collapse>
       </Form>
     </SettingPanel>