mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-21 03:15:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #16 from webzard-io/runtime

Browse Source 
impl #5 add chakra UI tabs component
This commit is contained in:
yz-yu 2021-07-26 15:08:46 +08:00 committed by GitHub
commit 3ceb82150d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 126 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/src/component.ts
View File

@ -1,4 +1,4 @@
import { JSONSchema4 } from "json-schema";
import { JSONSchema7 } from "json-schema";
import { parseVersion } from "./version";
import { Metadata } from "./metadata";
import { MethodSchema } from "./method";
@ -14,9 +14,9 @@ export type Component = {
};
type ComponentSpec = {
properties: Array<JSONSchema4 & { name: string }>;
properties: Array<JSONSchema7 & { name: string }>;
acceptTraits: TraitSchema[];
state: JSONSchema4;
state: JSONSchema7;
methods: MethodSchema[];
};

4
packages/core/src/method.ts
View File

@ -1,6 +1,6 @@
import { JSONSchema4 } from "json-schema";
import { JSONSchema7 } from "json-schema";
export type MethodSchema = {
name: string;
parameters?: JSONSchema4;
parameters?: JSONSchema7;
};

6
packages/core/src/trait.ts
View File

@ -1,4 +1,4 @@
import { JSONSchema4 } from "json-schema";
import { JSONSchema7 } from "json-schema";
import { Metadata } from "./metadata";
import { MethodSchema } from "./method";
import { parseVersion, Version } from "./version";
@ -13,8 +13,8 @@ export type Trait = {
};
type TraitSpec = {
properties: Array<JSONSchema4 & { name: string }>;
state: JSONSchema4;
properties: Array<JSONSchema7 & { name: string }>;
state: JSONSchema7;
methods: MethodSchema[];
};

34
packages/runtime/example/nested-components/index.html Normal file
View File

@ -0,0 +1,34 @@
<!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: nested components</title>
</head>
<body>
<div id="root"></div>
<script type="module">
import renderApp from "../../src/main.tsx";
renderApp({
version: "example/v1",
metadata: {
name: "nested_components",
description: "nested components example",
},
spec: {
components: [
{
id: "tabs",
type: "chakra_ui/v1/tabs",
properties: {
tabNames: ["Tab One", "Tab Two"],
initialSelectedTabIndex: 1,
},
traits: [],
},
],
},
});
</script>
</body>
</html>

82
packages/runtime/src/components/chakra-ui/Tabs.tsx Normal file
View File

@ -0,0 +1,82 @@
import React, { useEffect, useState } from "react";
import { createComponent } from "@meta-ui/core";
import {
Tabs as BaseTabs,
TabList,
Tab,
TabPanels,
TabPanel,
ChakraProvider,
} from "@chakra-ui/react";
import { ComponentImplementation } from "../../registry";
import { Type, Static } from "@sinclair/typebox";
const Tabs: ComponentImplementation<{
tabNames: Static<typeof TabNamesPropertySchema>;
initialSelectedTabIndex?: Static<
typeof InitialSelectedTabIndexPropertySchema
>;
}> = ({ tabNames, mergeState, initialSelectedTabIndex }) => {
const [selectedTabIndex, setSelectedTabIndex] = useState(
initialSelectedTabIndex ?? 0
);
useEffect(() => {
mergeState({ selectedTabIndex });
}, [selectedTabIndex]);
return (
<ChakraProvider>
<BaseTabs
defaultIndex={initialSelectedTabIndex}
onChange={(idx) => setSelectedTabIndex(idx)}
>
<TabList>
{tabNames.map((name, idx) => (
<Tab key={idx}>{name}</Tab>
))}
</TabList>
<TabPanels>
{tabNames.map((name, idx) => (
<TabPanel key={idx}>
<p>{name}</p>
</TabPanel>
))}
</TabPanels>
</BaseTabs>
</ChakraProvider>
);
};
const TabNamesPropertySchema = Type.Array(Type.String());
const InitialSelectedTabIndexPropertySchema = Type.Optional(Type.Number());
const StateSchema = Type.Object({
selectedTabIndex: Type.Number(),
});
export default {
...createComponent({
version: "chakra_ui/v1",
metadata: {
name: "tabs",
description: "chakra-ui tabs",
},
spec: {
properties: [
{
name: "tabNames",
...TabNamesPropertySchema,
},
{
name: "initialSelectedTabIndex",
...InitialSelectedTabIndexPropertySchema,
},
],
acceptTraits: [],
state: StateSchema,
methods: [],
},
}),
impl: Tabs,
};

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

@ -5,6 +5,7 @@ import { setStore } from "./store";
import PlainButton from "./components/plain/Button";
import CoreText from "./components/core/Text";
import ChakraUIButton from "./components/chakra-ui/Button";
import ChakraUITabs from "./components/chakra-ui/Tabs";
// traits
import CoreState from "./traits/core/state";
import CoreEvent from "./traits/core/event";
@ -88,6 +89,7 @@ export const registry = new Registry();
registry.registerComponent(PlainButton);
registry.registerComponent(CoreText);
registry.registerComponent(ChakraUIButton);
registry.registerComponent(ChakraUITabs);
registry.registerTrait(CoreState);
registry.registerTrait(CoreEvent);