From 4581d2a7f73a68c04bdeaf9ebe0ea78ec36bdb94 Mon Sep 17 00:00:00 2001 From: tanbowensg Date: Thu, 24 Feb 2022 10:00:19 +0800 Subject: [PATCH] Merge pull request #34 from webzard-io/yz-patch refine layout component --- packages/arco-lib/index.html | 5 + packages/arco-lib/package.json | 2 +- packages/arco-lib/src/components/Layout.tsx | 268 +++++++------------- packages/arco-lib/src/lib.ts | 14 +- packages/arco-lib/src/main.tsx | 5 +- packages/arco-lib/tools/typegen.js | 7 - 6 files changed, 106 insertions(+), 195 deletions(-) diff --git a/packages/arco-lib/index.html b/packages/arco-lib/index.html index 7d53b130..b6d5a38c 100644 --- a/packages/arco-lib/index.html +++ b/packages/arco-lib/index.html @@ -5,6 +5,11 @@ SunmaoUI Arco Editor +
diff --git a/packages/arco-lib/package.json b/packages/arco-lib/package.json index 9b2de873..2a3c9103 100644 --- a/packages/arco-lib/package.json +++ b/packages/arco-lib/package.json @@ -33,7 +33,6 @@ "@arco-design/web-react": "^2.29.0", "@emotion/css": "^11.5.0", "@sinclair/typebox": "^0.21.2", - "@sunmao-ui/chakra-ui-lib": "^0.2.0", "@sunmao-ui/core": "^0.4.0", "@sunmao-ui/runtime": "^0.4.0", "eslint-plugin-react-hooks": "^4.3.0", @@ -44,6 +43,7 @@ }, "devDependencies": { "@sunmao-ui/editor": "^0.4.0", + "@sunmao-ui/chakra-ui-lib": "^0.2.0", "@types/lodash": "^4.14.170", "@types/lodash-es": "^4.17.5", "@types/react": "^17.0.0", diff --git a/packages/arco-lib/src/components/Layout.tsx b/packages/arco-lib/src/components/Layout.tsx index 3ddb7ff8..70fee8b3 100644 --- a/packages/arco-lib/src/components/Layout.tsx +++ b/packages/arco-lib/src/components/Layout.tsx @@ -1,33 +1,11 @@ import { Layout as BaseLayout } from "@arco-design/web-react"; -import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime"; +import { implementRuntimeComponent } from "@sunmao-ui/runtime"; import { css } from "@emotion/css"; -import { Type, Static } from "@sinclair/typebox"; +import { Type } from "@sinclair/typebox"; import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper"; -import { - HeaderPropsSchema as BaseHeaderPropsSchema, - FooterPropsSchema as BaseFooterPropsSchema, - ContentPropsSchema as BaseContentPropsSchema, - SiderPropsSchema as BaseSiderPropsSchema, - LayoutPropsSchema as BaseLayoutPropsSchema, -} from "../generated/types/Layout"; -const LayoutPropsSchema = Type.Object(BaseLayoutPropsSchema); const LayoutStateSchema = Type.Object({}); -const LayoutImpl: ComponentImpl> = (props) => { - const { elementRef, slotsElements, customStyle } = props; - const cProps = getComponentProps(props); - return ( - - {slotsElements.content} - - ); -}; - export const Layout = implementRuntimeComponent({ version: "arco/v1", metadata: { @@ -40,163 +18,99 @@ export const Layout = implementRuntimeComponent({ }, }, spec: { - properties: LayoutPropsSchema, + properties: Type.Object({ + showSideBar: Type.Boolean({ + title: "Show Sidebar", + category: "Basic", + }), + siderbarCollapsible: Type.Boolean({ + title: "Sidebar Collapsible", + category: "Basic", + }), + siderbarDefaultCollapsed: Type.Boolean({ + title: "Sidebar Default Collapsed", + category: "Basic", + }), + showFooter: Type.Boolean({ + title: "Show Footer Area", + category: "Basic", + }), + }), state: LayoutStateSchema, methods: {}, - slots: ["content"], - styleSlots: ["content"], + slots: ["header", "content", "sidebar", "footer"], + styleSlots: ["layout", "header", "content", "sidebar", "footer"], events: [], }, -})(LayoutImpl as typeof LayoutImpl & undefined); - -const HeaderPropsSchema = Type.Object(BaseHeaderPropsSchema); -const HeaderStateSchema = Type.Object({}); - -const HeaderImpl: ComponentImpl> = (props) => { - const { slotsElements, customStyle } = props; - const cProps = getComponentProps(props); +})((props) => { + const { elementRef, slotsElements, customStyle } = props; + const { + showSideBar, + showFooter, + siderbarCollapsible, + siderbarDefaultCollapsed, + } = getComponentProps(props); + const baseProps = { + ref: elementRef, + style: { + height: "400px", + }, + className: css` + height: 400px; + ${customStyle?.layout || ""} + `, + }; + const headerProps = { + className: css` + height: 64px; + background-color: rgb(var(--gray-8)); + ${customStyle?.header || ""} + `, + }; + const contentProps = { + className: css` + background-color: rgb(var(--gray-1)); + ${customStyle?.content || ""} + `, + }; + const siderProps = { + className: css` + && { + background: rgb(var(--gray-5)); + ${customStyle?.sidebar || ""} + } + `, + collapsible: siderbarCollapsible, + defaultCollapsed: siderbarDefaultCollapsed, + }; + const footerProps = { + className: css` + height: 64px; + background-color: rgb(var(--gray-8)); + ${customStyle?.footer || ""} + `, + }; return ( - - {slotsElements.content} - + + + {slotsElements.header} + + + {showSideBar && ( + + {slotsElements.sidebar} + + )} + + {slotsElements.content} + + + {showFooter && ( + + {slotsElements.footer} + + )} + ); -}; - -export const Header = implementRuntimeComponent({ - version: "arco/v1", - metadata: { - ...FALLBACK_METADATA, - name: "header", - displayName: "Header", - exampleProperties: {}, - annotations: { - category: "Layout", - }, - }, - spec: { - properties: HeaderPropsSchema, - state: HeaderStateSchema, - methods: {}, - slots: ["content"], - styleSlots: ["content"], - events: [], - }, -})(HeaderImpl as typeof HeaderImpl & undefined); - -const FooterPropsSchema = Type.Object(BaseFooterPropsSchema); -const FooterStateSchema = Type.Object({}); - -const FooterImpl: ComponentImpl> = (props) => { - const { slotsElements, customStyle } = props; - const cProps = getComponentProps(props); - - return ( - - {slotsElements.content} - - ); -}; - -export const Footer = implementRuntimeComponent({ - version: "arco/v1", - metadata: { - ...FALLBACK_METADATA, - name: "footer", - displayName: "Footer", - exampleProperties: {}, - annotations: { - category: "Layout", - }, - }, - spec: { - properties: FooterPropsSchema, - state: FooterStateSchema, - methods: {}, - slots: ["content"], - styleSlots: ["content"], - events: [], - }, -})(FooterImpl as typeof FooterImpl & undefined); - -const ContentPropsSchema = Type.Object(BaseContentPropsSchema); -const ContentStateSchema = Type.Object({}); - -const ContentImpl: ComponentImpl> = ( - props -) => { - const { slotsElements, customStyle } = props; - const cProps = getComponentProps(props); - - return ( - - {slotsElements.content} - - ); -}; - - -export const Content = implementRuntimeComponent({ - version: "arco/v1", - metadata: { - ...FALLBACK_METADATA, - name: "content", - displayName: "Content", - exampleProperties: {}, - annotations: { - category: "Layout", - }, - }, - spec: { - properties: ContentPropsSchema, - state: ContentStateSchema, - methods: {}, - slots: ["content"], - styleSlots: ["content"], - events: [], - }, -})(ContentImpl as typeof ContentImpl & undefined); - -const SiderPropsSchema = Type.Object(BaseSiderPropsSchema); -const SiderStateSchema = Type.Object({}); - -const SiderImpl: ComponentImpl> = (props) => { - const { slotsElements, customStyle } = props; - const cProps = getComponentProps(props); - - return ( - - {slotsElements.content} - - ); -}; - -const sideExampleProperties: Static = { - breakpoint: "xl", - collapsed: false, - collapsible: false, - reverseArrow: false, - theme: "dark", - collapsedWidth: 48, -}; - -export const Sider = implementRuntimeComponent({ - version: "arco/v1", - metadata: { - ...FALLBACK_METADATA, - name: "sider", - displayName: "Sider", - exampleProperties: sideExampleProperties, - annotations: { - category: "Layout", - }, - }, - spec: { - properties: SiderPropsSchema, - state: SiderStateSchema, - methods: {}, - slots: ["content"], - styleSlots: ["content"], - events: [], - }, -})(SiderImpl); +}); diff --git a/packages/arco-lib/src/lib.ts b/packages/arco-lib/src/lib.ts index 1511d2d4..59aba6db 100644 --- a/packages/arco-lib/src/lib.ts +++ b/packages/arco-lib/src/lib.ts @@ -1,7 +1,7 @@ import "@arco-design/web-react/dist/css/arco.css"; import { Registry, SunmaoLib } from "@sunmao-ui/runtime"; import { Button } from "./components/Button"; -import { Header, Content, Footer, Sider, Layout } from "./components/Layout"; +import { Layout } from "./components/Layout"; import { Image } from "./components/Image"; import { Select } from "./components/Select"; import { Menu } from "./components/Menu"; @@ -22,13 +22,13 @@ import { Skeleton } from "./components/Skeleton"; import { Timeline } from "./components/Timeline"; import { Tree } from "./components/Tree"; import { TreeSelect } from "./components/TreeSelect"; -import { Checkbox } from './components/Checkbox'; +import { Checkbox } from "./components/Checkbox"; import { Modal } from "./components/Modal"; -import { Radio } from './components/Radio'; +import { Radio } from "./components/Radio"; import { Table } from "./components/Table"; import { Pagination } from "./components/Pagination"; import { Steps } from "./components/Steps"; -import { Alert } from './components/Alert'; +import { Alert } from "./components/Alert"; import { Link } from "./components/Link"; import { Switch } from "./components/Switch"; import { PasswordInput } from "./components/PasswordInput"; @@ -46,10 +46,6 @@ export const components: Component[] = [ TreeSelect, Modal, Button, - Header, - Content, - Footer, - Sider, Layout, Image, Select, @@ -76,7 +72,7 @@ export const components: Component[] = [ Link, Switch, PasswordInput, - TextArea + TextArea, ]; export const traits: Trait[] = []; export const modules: Module[] = []; diff --git a/packages/arco-lib/src/main.tsx b/packages/arco-lib/src/main.tsx index b824ff61..12e0e425 100644 --- a/packages/arco-lib/src/main.tsx +++ b/packages/arco-lib/src/main.tsx @@ -3,8 +3,11 @@ import { initSunmaoUIEditor } from "@sunmao-ui/editor"; import { sunmaoChakraUILib } from "@sunmao-ui/chakra-ui-lib"; import { ArcoDesignLib } from "."; import { StrictMode } from "react"; +import "@sunmao-ui/editor/dist/esm/index.css"; -const { Editor } = initSunmaoUIEditor({ libs: [ArcoDesignLib, sunmaoChakraUILib] }); +const { Editor } = initSunmaoUIEditor({ + libs: [ArcoDesignLib, sunmaoChakraUILib], +}); ReactDom.render( diff --git a/packages/arco-lib/tools/typegen.js b/packages/arco-lib/tools/typegen.js index f93bd169..9f4fc3af 100644 --- a/packages/arco-lib/tools/typegen.js +++ b/packages/arco-lib/tools/typegen.js @@ -117,13 +117,6 @@ ${Object.keys(props) { component: "Button", }, - { - component: "Layout", - propsNames: ["HeaderProps", "FooterProps", "ContentProps", "SiderProps"], - omit(name) { - return name.startsWith("aria-"); - }, - }, { component: "Image", },