mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2024-11-21 03:15:49 +08:00
Merge pull request #34 from webzard-io/yz-patch
refine layout component
This commit is contained in:
tanbowensg
Bowen Tan
parent
ee47da58fd
commit
4581d2a7f7
@ -5,6 +5,11 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SunmaoUI Arco Editor</title>
|
||||
<style>
|
||||
#root {
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style='height: 100vh'></div>
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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<Static<typeof LayoutPropsSchema>> = (props) => {
|
||||
const { elementRef, slotsElements, customStyle } = props;
|
||||
const cProps = getComponentProps(props);
|
||||
return (
|
||||
<BaseLayout
|
||||
ref={elementRef}
|
||||
className={css(customStyle?.content)}
|
||||
{...cProps}
|
||||
>
|
||||
{slotsElements.content}
|
||||
</BaseLayout>
|
||||
);
|
||||
};
|
||||
|
||||
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<Static<typeof HeaderPropsSchema>> = (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 (
|
||||
<BaseLayout.Header className={css(customStyle?.content)} {...cProps}>
|
||||
{slotsElements.content}
|
||||
</BaseLayout.Header>
|
||||
<BaseLayout {...baseProps}>
|
||||
<BaseLayout.Header {...headerProps}>
|
||||
{slotsElements.header}
|
||||
</BaseLayout.Header>
|
||||
<BaseLayout>
|
||||
{showSideBar && (
|
||||
<BaseLayout.Sider {...siderProps}>
|
||||
{slotsElements.sidebar}
|
||||
</BaseLayout.Sider>
|
||||
)}
|
||||
<BaseLayout.Content {...contentProps}>
|
||||
{slotsElements.content}
|
||||
</BaseLayout.Content>
|
||||
</BaseLayout>
|
||||
{showFooter && (
|
||||
<BaseLayout.Footer {...footerProps}>
|
||||
{slotsElements.footer}
|
||||
</BaseLayout.Footer>
|
||||
)}
|
||||
</BaseLayout>
|
||||
);
|
||||
};
|
||||
|
||||
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<Static<typeof FooterPropsSchema>> = (props) => {
|
||||
const { slotsElements, customStyle } = props;
|
||||
const cProps = getComponentProps(props);
|
||||
|
||||
return (
|
||||
<BaseLayout.Footer className={css(customStyle?.content)} {...cProps}>
|
||||
{slotsElements.content}
|
||||
</BaseLayout.Footer>
|
||||
);
|
||||
};
|
||||
|
||||
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<Static<typeof ContentPropsSchema>> = (
|
||||
props
|
||||
) => {
|
||||
const { slotsElements, customStyle } = props;
|
||||
const cProps = getComponentProps(props);
|
||||
|
||||
return (
|
||||
<BaseLayout.Content className={css(customStyle?.content)} {...cProps}>
|
||||
{slotsElements.content}
|
||||
</BaseLayout.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<Static<typeof SiderPropsSchema>> = (props) => {
|
||||
const { slotsElements, customStyle } = props;
|
||||
const cProps = getComponentProps(props);
|
||||
|
||||
return (
|
||||
<BaseLayout.Sider className={css(customStyle?.content)} {...cProps}>
|
||||
{slotsElements.content}
|
||||
</BaseLayout.Sider>
|
||||
);
|
||||
};
|
||||
|
||||
const sideExampleProperties: Static<typeof SiderPropsSchema> = {
|
||||
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);
|
||||
});
|
||||
|
||||
@ -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[] = [];
|
||||
|
||||
@ -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(
|
||||
<StrictMode>
|
||||
|
||||
@ -117,13 +117,6 @@ ${Object.keys(props)
|
||||
{
|
||||
component: "Button",
|
||||
},
|
||||
{
|
||||
component: "Layout",
|
||||
propsNames: ["HeaderProps", "FooterProps", "ContentProps", "SiderProps"],
|
||||
omit(name) {
|
||||
return name.startsWith("aria-");
|
||||
},
|
||||
},
|
||||
{
|
||||
component: "Image",
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user