mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-02-23 17:49:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #28 from webzard-io/runtime

Browse Source 
keyboard component
This commit is contained in:
yz-yu 2021-08-03 17:42:45 +08:00 committed by GitHub
commit 3177aea766
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 211 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/runtime/example/box/index.html
View File

@ -90,7 +90,7 @@
properties: {
container: {
id: "box_container",
slot: "box_content",
slot: "content",
},
},
},
@ -111,7 +111,7 @@
properties: {
container: {
id: "box_child_1",
slot: "box_content",
slot: "content",
},
},
},
@ -136,7 +136,7 @@
properties: {
container: {
id: "box_container",
slot: "box_content",
slot: "content",
},
},
},
@ -157,7 +157,7 @@
properties: {
container: {
id: "box_child_2",
slot: "box_content",
slot: "content",
},
},
},

135
packages/runtime/example/keyboard/index.html Normal file
View File

@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>meta-ui runtime example: keyboard</title>
</head>
<body>
<div id="root"></div>
<script type="module">
import renderApp from "../../src/main.tsx";
renderApp({
version: "example/v1",
metadata: {
name: "chakra-ui keyboard",
description: "keyboard example",
},
spec: {
components: [
{
id: "root",
type: "chakra_ui/v1/root",
properties: {},
traits: [],
},
{
id: "key_shift",
type: "chakra_ui/v1/kbd",
properties: {
text: {
format: "plain",
raw: "shift",
},
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "root",
slot: "root",
},
},
},
],
},
{
id: "plus",
type: "core/v1/text",
properties: {
value: {
raw: " + ",
format: "plain",
},
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "root",
slot: "root",
},
},
},
],
},
{
id: "key_f",
type: "chakra_ui/v1/kbd",
properties: {
text: {
format: "plain",
raw: "f",
},
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "root",
slot: "root",
},
},
},
],
},
{
id: "forward_text_box",
type: "chakra_ui/v1/box",
properties: {
color: "gray",
display: "inline",
ml: 2,
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "root",
slot: "root",
},
},
},
],
},
{
id: "forward_text",
type: "core/v1/text",
properties: {
value: {
raw: "Port-Forward",
format: "plain",
},
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "forward_text_box",
slot: "content",
},
},
},
],
},
],
},
});
</script>
</body>
</html>

24
packages/runtime/src/App.tsx
View File

@ -21,8 +21,10 @@ const ImplWrapper = React.forwardRef<
{
component: RuntimeApplication["spec"]["components"][0];
slotsMap: SlotsMap | undefined;
targetSlot: { id: string; slot: string } | null;
app: RuntimeApplication;
}
>(({ component: c, slotsMap, ...props }, ref) => {
>(({ component: c, slotsMap, targetSlot, app, ...props }, ref) => {
const Impl = registry.getComponent(
c.parsedType.version,
c.parsedType.name
@ -93,11 +95,23 @@ const ImplWrapper = React.forwardRef<
C = <W>{C}</W>;
}
if (targetSlot) {
const targetC = app.spec.components.find((c) => c.id === targetSlot.id);
if (targetC?.parsedType.name === "grid_layout") {
return (
<div key={c.id} data-meta-ui-id={c.id} ref={ref} {...props}>
{C}
{props.children}
</div>
);
}
}
return (
<div key={c.id} data-meta-ui-id={c.id} ref={ref} {...props}>
<React.Fragment key={c.id}>
{C}
{props.children}
</div>
</React.Fragment>
);
});
@ -173,6 +187,8 @@ export function resolveNestedComponents(app: RuntimeApplication): {
<ImplWrapper
component={c}
slotsMap={componentsMap.get(c.id)}
targetSlot={{ id, slot }}
app={app}
{...props}
ref={ref}
/>
@ -205,6 +221,8 @@ const App: React.FC<{ options: Application }> = ({ options }) => {
key={c.id}
component={c}
slotsMap={componentsMap.get(c.id)}
targetSlot={null}
app={app}
/>
);
})}

2
packages/runtime/src/components/chakra-ui/Box.tsx
View File

@ -289,7 +289,7 @@ const Box: ComponentImplementation<Static<typeof StyleSchema>> = ({
return (
<BaseBox {...styleProps}>
<Slot slotsMap={slotsMap} slot="box_content" />
<Slot slotsMap={slotsMap} slot="content" />
</BaseBox>
);
};

48
packages/runtime/src/components/chakra-ui/Kbd.tsx Normal file
View File

@ -0,0 +1,48 @@
import React, { useEffect } from "react";
import { Kbd as BaseKbd } from "@chakra-ui/react";
import { Type } from "@sinclair/typebox";
import { createComponent } from "@meta-ui/core";
import { ComponentImplementation } from "../../registry";
import Text, { TextProps, TextPropertySchema } from "../_internal/Text";
import { useExpression } from "../../store";
const Kbd: ComponentImplementation<{
text: TextProps["value"];
}> = ({ text, mergeState }) => {
const raw = useExpression(text.raw);
useEffect(() => {
mergeState({ value: raw });
}, [raw]);
return (
<BaseKbd>
<Text value={{ ...text, raw }} />
</BaseKbd>
);
};
const StateSchema = Type.Object({
value: Type.String(),
});
export default {
...createComponent({
version: "chakra_ui/v1",
metadata: {
name: "kbd",
description: "chakra-ui keyboard",
},
spec: {
properties: [
{
name: "text",
...TextPropertySchema,
},
],
acceptTraits: [],
state: StateSchema,
methods: [],
},
}),
impl: Kbd,
};

2
packages/runtime/src/registry.tsx
View File

@ -14,6 +14,7 @@ import ChakraUITabs from "./components/chakra-ui/Tabs";
import ChakraUITable from "./components/chakra-ui/Table";
import ChakraUIInput from "./components/chakra-ui/Input";
import ChakraUIBox from "./components/chakra-ui/Box";
import ChakraUIKbd from "./components/chakra-ui/Kbd";
// traits
import CoreState from "./traits/core/state";
import CoreEvent from "./traits/core/event";
@ -110,6 +111,7 @@ registry.registerComponent(ChakraUITabs);
registry.registerComponent(ChakraUITable);
registry.registerComponent(ChakraUIInput);
registry.registerComponent(ChakraUIBox);
registry.registerComponent(ChakraUIKbd);
registry.registerTrait(CoreState);
registry.registerTrait(CoreEvent);