backup

Author: codebdy

src/App.test.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+
 import App from './App';
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+
+
 });

src/example/ExampleInner.tsx

@@ -0,0 +1,35 @@
+import { memo, useState } from "react"
+import styled from "styled-components"
+import { Button, Space } from "antd"
+import { ShellContainer } from "./ShellContainer"
+import { WorkflowEditor } from "../workflow-editor/WorkflowEditor"
+
+const Toolbar = styled.div`
+  height: 80px;
+  border-bottom: solid 1px ${props => props.theme.token?.colorBorder};
+  display: flex;
+  align-items: center;
+  padding: 8px;
+`
+
+export const ExampleInner = memo((
+  props: {
+    toggleTheme: () => void
+  }
+) => {
+  const { toggleTheme } = props
+  const [inputValue, setInputValue] = useState<any>()
+
+
+  return (
+
+    <ShellContainer>
+      <Toolbar>
+        <Space>
+          <Button onClick={toggleTheme}>主题切换</Button>
+        </Space>
+      </Toolbar>
+      <WorkflowEditor />
+    </ShellContainer>
+  )
+})

src/example/ShellContainer.tsx

@@ -11,7 +11,6 @@ const Container = styled.div`
   background-color: ${props => props.theme.token?.colorBgBase};
 `
 
-
 export const ShellContainer = memo((
   props: {
     children?: React.ReactNode

src/example/index.tsx

@@ -1,9 +1,21 @@
-import { memo, useState } from "react"
+import { ConfigProvider, theme } from "antd"
+import { memo, useCallback, useState } from "react"
+import { ExampleInner } from "./ExampleInner"
 
 export const Example = memo(() => {
   const [themeMode, setThemeMode] = useState<"dark" | "light">("light")
+
+  const handleToggleTheme = useCallback(() => {
+    setThemeMode(mode => mode === "light" ? "dark" : "light")
+  }, [])
+  
   return (
-    <>haha
-    </>
+    <ConfigProvider
+      theme={{
+        algorithm: themeMode === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm
+      }}
+    >
+      <ExampleInner toggleTheme={handleToggleTheme} />
+    </ConfigProvider>
   )
 })

src/workflow-editor/WorkflowEditor/index.tsx

@@ -0,0 +1,7 @@
+import { memo } from "react"
+
+export const WorkflowEditor = memo(() => {
+  return (
+    <></>
+  )
+})