refactor: rename Wrapper

Author: xieliuduo

frontend/src/app/pages/DashBoardPage/components/Widgets/IframeWidget/IframeWidgetCore.tsx

@@ -71,7 +71,7 @@ export const IframeWidgetCore: React.FC<{}> = memo(() => {
   );
 
   return (
-    <Wrap>
+    <Wrapper>
       {editing && setter}
       <iframe
         title=" "
@@ -80,10 +80,10 @@ export const IframeWidgetCore: React.FC<{}> = memo(() => {
         allow="autoplay"
         style={{ width: '100%', height: '100%' }}
       ></iframe>
-    </Wrap>
+    </Wrapper>
   );
 });
-const Wrap = styled.div`
+const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;

frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/ImageWidgetCore.tsx

@@ -55,10 +55,10 @@ export const ImageWidgetCore: React.FC<{}> = () => {
       <Empty description="" />
     );
   }, [editing, onChange, t, widgetBgImage]);
-  return <Wrap>{renderImage}</Wrap>;
+  return <Wrapper>{renderImage}</Wrapper>;
 };
 
-const Wrap = styled.div`
+const Wrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;

frontend/src/app/pages/DashBoardPage/components/Widgets/QueryBtnWidget/QueryBtnWidgetCore.tsx

@@ -36,13 +36,13 @@ export const QueryBtnWidgetCore: React.FC<{}> = memo(() => {
   const { name, nameConfig, background } = widget.config;
 
   return (
-    <Wrap {...nameConfig} background={background.color} onClick={onQuery}>
+    <Wrapper {...nameConfig} background={background.color} onClick={onQuery}>
       <span>{name}</span>
-    </Wrap>
+    </Wrapper>
   );
 });
 
-const Wrap = styled.div<FontConfig & { background: string }>`
+const Wrapper = styled.div<FontConfig & { background: string }>`
   display: flex;
   flex: 1;
   align-items: center;

frontend/src/app/pages/DashBoardPage/components/Widgets/ResetBtnWidget/ResetBtnWidgetCore.tsx

@@ -35,13 +35,13 @@ export const ResetBtnWidgetCore: React.FC<{}> = () => {
   const { name, nameConfig, background } = widget.config;
 
   return (
-    <Wrap {...nameConfig} background={background.color} onClick={onQuery}>
+    <Wrapper {...nameConfig} background={background.color} onClick={onQuery}>
       <span>{name}</span>
-    </Wrap>
+    </Wrapper>
   );
 };
 
-const Wrap = styled.div<FontConfig & { background: string }>`
+const Wrapper = styled.div<FontConfig & { background: string }>`
   display: flex;
   flex: 1;
   align-items: center;

frontend/src/app/pages/DashBoardPage/components/Widgets/TimerWidget/TimerWidgetCore.tsx

@@ -158,14 +158,14 @@ export const TimerWidgetCore: React.FC = memo(() => {
   }, [timerConfig]);
 
   return (
-    <Wrap {...timerConfig}>
+    <Wrapper {...timerConfig}>
       {editing && setter}
       <div className="time-text">{currentTime}</div>
-    </Wrap>
+    </Wrapper>
   );
 });
 
-const Wrap = styled.div<TimerConfig>`
+const Wrapper = styled.div<TimerConfig>`
   display: flex;
   /* flex-direction: column; */
   width: 100%;

frontend/src/app/pages/DashBoardPage/pages/Board/AutoDashboard/AutoBoardCore.tsx

@@ -88,7 +88,7 @@ export const AutoBoardCore: React.FC<{ boardId: string }> = memo(
       });
     }, [boardId, editing, sortedLayoutWidgets]);
     return (
-      <Wrap>
+      <Wrapper>
         <StyledContainer bg={background}>
           <div className="grid-wrap" ref={gridWrapRef}>
             <div className="widget-row-height" ref={ref}>
@@ -115,12 +115,12 @@ export const AutoBoardCore: React.FC<{ boardId: string }> = memo(
             </div>
           )}
         </StyledContainer>
-      </Wrap>
+      </Wrapper>
     );
   },
 );
 
-const Wrap = styled.div`
+const Wrapper = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;

frontend/src/app/pages/DashBoardPage/pages/Board/FreeDashboard/FreeBoardCore.tsx

@@ -87,7 +87,7 @@ export const FreeBoardCore: React.FC<FreeBoardCoreProps> = memo(
     const { gridRef } = useBoardWidthHeight();
 
     return (
-      <Wrap>
+      <Wrapper>
         <div className="container" ref={gridRef}>
           <div
             className="grid-background"
@@ -114,12 +114,12 @@ export const FreeBoardCore: React.FC<FreeBoardCoreProps> = memo(
             />
           )}
         </div>
-      </Wrap>
+      </Wrapper>
     );
   },
 );
 
-const Wrap = styled.div`
+const Wrapper = styled.div`
   display: flex;
   flex: 1;
   overflow-y: hidden;

frontend/src/app/pages/DashBoardPage/pages/Board/FreeDashboard/WidgetOfFree.tsx

@@ -27,14 +27,14 @@ export const WidgetOfFree: React.FC<{}> = memo(() => {
   const widgetStyle = getFreeWidgetStyle(widget);
 
   return (
-    <Wrap style={widgetStyle}>
+    <Wrapper style={widgetStyle}>
       <WidgetMapper boardType="free" boardEditing={false} />
-    </Wrap>
+    </Wrapper>
   );
 });
 
 export default WidgetOfFree;
-const Wrap = styled.div`
+const Wrapper = styled.div`
   & > span:last-child {
     z-index: 999999;
   }

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/AutoEditor/AutoBoardEditor.tsx

@@ -145,7 +145,7 @@ export const AutoBoardEditor: React.FC<{}> = memo(() => {
    * https://www.npmjs.com/package/react-grid-layout
    */
   return (
-    <Wrap className={deviceClassName}>
+    <Wrapper className={deviceClassName}>
       {deviceType === DeviceType.Mobile && (
         <DeviceList updateCurWH={updateCurWH} />
       )}
@@ -183,11 +183,11 @@ export const AutoBoardEditor: React.FC<{}> = memo(() => {
           </div>
         )}
       </StyledContainer>
-    </Wrap>
+    </Wrapper>
   );
 });
 
-const Wrap = styled.div<{}>`
+const Wrapper = styled.div<{}>`
   display: flex;
   flex: 1;
   flex-direction: column;

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/BoardToolRights.tsx

@@ -21,11 +21,11 @@ import styled from 'styled-components/macro';
 import { ShortcutKeys } from './ShortcutKeys';
 export const BoardToolRights: React.FC<{}> = memo(() => {
   return (
-    <Wrap>
+    <Wrapper>
       <Space>
         <ShortcutKeys />
       </Space>
-    </Wrap>
+    </Wrapper>
   );
 });
-const Wrap = styled.div``;
+const Wrapper = styled.div``;