Merge pull request #40 from MrXujiang/yehuozhiliwork

style: optimize left pannel

src/components/BasicShop/BasicComponents/Footer/index.tsx

@@ -2,7 +2,6 @@ import React, { memo } from 'react';
 import { IFooterConfig } from './schema';
 const Footer = memo((props: IFooterConfig) => {
   const { bgColor, text, color, align, fontSize, height } = props;
-  console.log(props);
   return (
     <>
       {props.isTpl && (

src/components/BasicShop/BasicComponents/WhiteTpl/index.tsx

@@ -9,7 +9,6 @@ interface IProps extends IWhiteTplConfig {
 
 const WhiteTpl = memo((props: IProps) => {
   const { bgColor, text, fontSize, color, height, isTpl } = props;
-  console.log('data', bgColor, text, fontSize, color, height);
   return (
     <div
       className={styles.whiteTpl}

src/global.css

@@ -41,4 +41,27 @@ body {
 
 .react-grid-item{
   overflow: hidden;
+}
+
+.ant-tabs-nav 
+,.ant-tabs-nav-list{
+  width: 40px!important;
+  min-width: 40px!important;
+}
+.ant-tabs-left{
+  height: 100%;
+}
+
+.ant-tabs-left > .ant-tabs-nav .ant-tabs-tab{
+  padding:20px 0px !important;
+ 
+}
+.ant-tabs-tab{
+  margin:auto!important;
+}
+.ant-tabs-tab   div{
+  display: inline-block;
+}
+.ant-tabs-content-holder{
+  overflow: auto;
 }

src/layouts/index.tsx

@@ -84,7 +84,6 @@ export default function Layout({ children }: IRouteComponentProps) {
   );
 
   const [state, setState] = useState<dooringContextType>('h5');
-  debugger;
   return (
     <dooringContext.Provider
       value={{

src/pages/editor/Container.tsx

@@ -6,6 +6,8 @@ import {
   PlayCircleOutlined,
   HighlightOutlined,
   ReloadOutlined,
+  DoubleRightOutlined,
+  DoubleLeftOutlined,
 } from '@ant-design/icons';
 import TextLoop from 'react-text-loop';
 import { connect } from 'dva';
@@ -49,6 +51,12 @@ const Container = (props: {
   const pointData = pstate ? pstate.pointData : [];
   const cpointData = cstate ? cstate.pointData : [];
 
+  const changeCollapse = useMemo(() => {
+    return (c: boolean) => {
+      setCollapsed(c);
+    };
+  }, []);
+
   const context = useContext(dooringContext);
   const curPoint = useMemo(() => {
     if (context.theme === 'h5') {
@@ -62,7 +70,6 @@ const Container = (props: {
     if (context.theme === 'h5') {
       return schema1;
     } else {
-      console.log(schema2);
       return schema2;
     }
   }, [context.theme]);
@@ -98,24 +105,21 @@ const Container = (props: {
     setScale(1);
   };
 
-  const toggleCollapsed = (checked: boolean) => {
-    console.log(checked);
-    setCollapsed(checked);
-  };
-
   const CpIcon = {
     base: <HighlightOutlined />,
     media: <PlayCircleOutlined />,
     visible: <PieChartOutlined />,
   };
 
-  const generateHeader = (type: componentsType, text: string) => {
+  const generateHeader = useMemo(() => {
-    return (
+    return (type: componentsType, text: string) => {
-      <div>
+      return (
-        {CpIcon[type]} {text}
+        <div>
-      </div>
+          {CpIcon[type]} {text}
-    );
+        </div>
-  };
+      );
+    };
+  }, [CpIcon]);
 
   const handleSliderChange = (v: number) => {
     setScale(prev => (v >= 150 ? 1.5 : v / 100));
@@ -198,7 +202,7 @@ const Container = (props: {
       arr.push(v.type);
     });
     return arr;
-  }, []);
+  }, [graphTpl, mediaTpl, template]);
 
   const [dragstate, setDragState] = useState({ x: 0, y: 0 });
   const [render] = useGetBall(setDragState, {
@@ -207,8 +211,6 @@ const Container = (props: {
     intervalDelay: 5,
   });
 
-  const [display] = useAnimation(collapsed, 500);
-
   const renderRight = useMemo(() => {
     if (context.theme === 'h5') {
       return (
@@ -263,6 +265,64 @@ const Container = (props: {
     }
   }, [context.theme, cpointData.length, curPoint, handleDel, handleFormSave, pointData.length]);
 
+  const tabRender = useMemo(() => {
+    if (collapsed) {
+      return (
+        <>
+          <TabPane tab={generateHeader('base', '')} key="1"></TabPane>
+          <TabPane tab={generateHeader('media', '')} key="2"></TabPane>
+          <TabPane tab={generateHeader('visible', '')} key="3"></TabPane>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <TabPane tab={generateHeader('base', '')} key="1">
+            <div className={styles.ctitle}>基础组件</div>
+            {template.map((value, i) => {
+              return (
+                <TargetBox item={value} key={i} canvasId={canvasId}>
+                  <DynamicEngine
+                    {...value}
+                    config={schema[value.type as keyof typeof schema].config}
+                    componentsType="base"
+                    isTpl={true}
+                  />
+                </TargetBox>
+              );
+            })}
+          </TabPane>
+          <TabPane tab={generateHeader('media', '')} key="2">
+            <div className={styles.ctitle}>媒体组件</div>
+            {mediaTpl.map((value, i) => (
+              <TargetBox item={value} key={i} canvasId={canvasId}>
+                <DynamicEngine
+                  {...value}
+                  config={schema[value.type as keyof typeof schema].config}
+                  componentsType="media"
+                  isTpl={true}
+                />
+              </TargetBox>
+            ))}
+          </TabPane>
+          <TabPane tab={generateHeader('visible', '')} key="3">
+            <div className={styles.ctitle}>可视化组件</div>
+            {graphTpl.map((value, i) => (
+              <TargetBox item={value} key={i} canvasId={canvasId}>
+                <DynamicEngine
+                  {...value}
+                  config={schema[value.type as keyof typeof schema].config}
+                  componentsType={'visible' as componentsType}
+                  isTpl={true}
+                />
+              </TargetBox>
+            ))}
+          </TabPane>
+        </>
+      );
+    }
+  }, [canvasId, collapsed, generateHeader, graphTpl, mediaTpl, schema, template]);
+
   return (
     <div className={styles.editorWrap}>
       <HeaderComponent
@@ -271,72 +331,42 @@ const Container = (props: {
         pointData={context.theme === 'h5' ? pointData : cpointData}
         clearData={clearData}
         location={props.location}
-        toggleCollapsed={toggleCollapsed}
       />
       <div className={styles.container}>
         <div
           className={styles.list}
           style={{
-            transform: collapsed ? 'translate(0,0)' : 'translate(-100%,0)',
             transition: 'all ease-in-out 0.5s',
-            display: display ? 'none' : 'block',
+            position: 'fixed',
+            width: collapsed ? '50px' : '350px',
+            zIndex: 200,
+            boxShadow: 'none',
           }}
         >
-          <div className={styles.searchBar}>
-            <Alert
-              banner
-              message={
-                <TextLoop mask>
-                  <div>Dooring升级啦！</div>
-                  <div>已有1000+人使用</div>
-                  <div>持续迭代中...</div>
-                </TextLoop>
-              }
-            />
-          </div>
           <div className={styles.componentList}>
-            <Tabs defaultActiveKey="1">
+            <Tabs
-              <TabPane tab={generateHeader('base', '基础组件')} key="1">
+              onTabClick={() => changeCollapse(false)}
-                {template.map((value, i) => {
+              defaultActiveKey="1"
-                  return (
+              tabPosition={'left'}
-                    <TargetBox item={value} key={i} canvasId={canvasId}>
+            >
-                      <DynamicEngine
+              {tabRender}
-                        {...value}
-                        config={schema[value.type as keyof typeof schema].config}
-                        componentsType="base"
-                        isTpl={true}
-                      />
-                    </TargetBox>
-                  );
-                })}
-              </TabPane>
-              <TabPane tab={generateHeader('media', '媒体组件')} key="2">
-                {mediaTpl.map((value, i) => (
-                  <TargetBox item={value} key={i} canvasId={canvasId}>
-                    <DynamicEngine
-                      {...value}
-                      config={schema[value.type as keyof typeof schema].config}
-                      componentsType="media"
-                      isTpl={true}
-                    />
-                  </TargetBox>
-                ))}
-              </TabPane>
-              <TabPane tab={generateHeader('visible', '可视化组件')} key="3">
-                {graphTpl.map((value, i) => (
-                  <TargetBox item={value} key={i} canvasId={canvasId}>
-                    <DynamicEngine
-                      {...value}
-                      config={schema[value.type as keyof typeof schema].config}
-                      componentsType={'visible' as componentsType}
-                      isTpl={true}
-                    />
-                  </TargetBox>
-                ))}
-              </TabPane>
             </Tabs>
           </div>
+          <div
+            className={styles.collapsed}
+            style={{ position: 'absolute', bottom: '80px', left: '25px' }}
+            onClick={() => changeCollapse(!collapsed)}
+          >
+            {collapsed ? <DoubleRightOutlined /> : <DoubleLeftOutlined />}
+          </div>
         </div>
+        <div
+          style={{
+            width: collapsed ? '50px' : '350px',
+            transition: 'all ease-in-out 0.5s',
+          }}
+        ></div>
+
         <div className={styles.tickMark} id="calibration">
           <div className={styles.tickMarkTop}>
             <Calibration direction="up" id="calibrationUp" multiple={scaleNum} />

src/pages/editor/SourceBox.tsx

@@ -58,7 +58,6 @@ const SourceBox = memo((props: SourceBoxProps) => {
           },
         });
       } else {
-        console.log(item.x);
         dispatch({
           type: 'editorPcModal/addPointData',
           payload: {

src/pages/editor/components/Header/index.less

@@ -1,6 +1,6 @@
 .header {
   position: relative;
-  z-index: 10;
+  z-index: 201;
   padding-left: 30px;
   padding-right: 30px;
   display: flex;
@@ -32,6 +32,6 @@
   }
   .btnArea {
     width: 320px;
-    text-align: right;
+    text-align: left;
   }
 }

src/pages/editor/components/Header/index.tsx

@@ -29,11 +29,10 @@ interface HeaderComponentProps {
   clearData: any;
   undohandler: any;
   redohandler: any;
-  toggleCollapsed: any;
 }
 
 const HeaderComponent = memo((props: HeaderComponentProps) => {
-  const { pointData, location, clearData, undohandler, redohandler, toggleCollapsed } = props;
+  const { pointData, location, clearData, undohandler, redohandler } = props;
   const iptRef = useRef<Input>(null);
 
   const toPreview = () => {
@@ -137,7 +136,6 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
           <ArrowLeftOutlined />
         </div>
         <div className={styles.logo}>Dooring</div>
-        <Switch defaultChecked onChange={toggleCollapsed} style={{ marginLeft: '100px' }} />
       </div>
       <div className={styles.controlArea}>
         <Button type="primary" style={{ marginRight: '9px' }} onClick={useTemplate}>

src/pages/editor/index.less

@@ -25,11 +25,24 @@
     .list {
       width: 350px;
       height: 100%;
-      padding: 10px 16px 16px;
+      padding: 10px;
       box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
       display: inline-block;
       background-color: #fff;
-      overflow: auto;
+      & > div:nth-child(1) {
+        height: 100%;
+      }
+      .ctitle {
+        font-weight: bold;
+        line-height: 50px;
+        font-family: PingFangSC-Medium, PingFang SC;
+      }
+      .collapsed {
+        cursor: pointer;
+        &:hover {
+          color: #06c;
+        }
+      }
       .searchBar {
         margin-bottom: 20px;
       }

src/utils/tool.ts

@@ -85,6 +85,7 @@ export function useAnimation(state: boolean, delay: number) {
 export function unParams(params = '?a=1&b=2&c=3') {
   let obj: any = {};
   params &&
+    // eslint-disable-next-line no-useless-escape
     params.replace(/((\w*)=([\.a-z0-9A-Z]*)?)?/g, (m, a, b, c): any => {
       if (b || c) obj[b] = c;
     });