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

implement chakra checkbox #5

Browse Source
This commit is contained in:
chenenpei 2021-08-05 11:16:22 +08:00
parent 165ef8590e
commit 0b8bdbb9aa
3 changed files with 241 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
packages/runtime/example/checkbox/index.html Normal file
View File

@ -0,0 +1,77 @@
<!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: checkbox component</title>
</head>
<body>
<div id="root"></div>
<script type="module">
import renderApp from "../../src/main.tsx";
renderApp({
version: "example/v1",
metadata: {
name: "checkbox",
description: "checkbox",
},
spec: {
components: [
{
id: "root",
type: "chakra_ui/v1/root",
properties: {},
traits: [],
},
{
id: "checkbox_1",
type: "chakra_ui/v1/checkbox",
properties: {
text: {
raw: "Checkbox",
format: "plain",
},
defaultIsChecked: true,
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "root",
slot: "root",
},
},
},
],
},
{
id: "checkbox_2",
type: "chakra_ui/v1/checkbox",
properties: {
text: {
raw: "Checkbox-disabled",
format: "plain",
},
defaultIsChecked: true,
isDisabled: true,
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "root",
slot: "root",
},
},
},
],
},
],
},
});
</script>
</body>
</html>

161
packages/runtime/src/components/chakra-ui/Checkbox.tsx Normal file
View File

@ -0,0 +1,161 @@
import React, { useState, useEffect } from "react";
import { createComponent } from "@meta-ui/core";
import { Static, Type } from "@sinclair/typebox";
import { Checkbox as BaseCheckbox } from "@chakra-ui/react";
import { ComponentImplementation } from "../../registry";
import { useExpression } from "../../store";
import Text, { TextProps, TextPropertySchema } from "../_internal/Text";
const DefaultIsCheckedSchema = Type.Optional(Type.Boolean());
const IsDisabledSchema = Type.Optional(Type.Boolean());
const ColorSchemePropertySchema = Type.Optional(
Type.KeyOf(
Type.Object({
whiteAlpha: Type.String(),
blackAlpha: Type.String(),
gray: Type.String(),
red: Type.String(),
orange: Type.String(),
yellow: Type.String(),
green: Type.String(),
teal: Type.String(),
blue: Type.String(),
cyan: Type.String(),
purple: Type.String(),
pink: Type.String(),
linkedin: Type.String(),
facebook: Type.String(),
messenger: Type.String(),
whatsapp: Type.String(),
twitter: Type.String(),
telegram: Type.String(),
})
)
);
const SizePropertySchema = Type.KeyOf(
Type.Object({
sm: Type.String(),
md: Type.String(),
lg: Type.String(),
})
);
const IsInvalidSchema = Type.Optional(Type.Boolean());
const SpacingSchema = Type.Optional(Type.String());
const IsCheckedSchema = Type.Optional(Type.Boolean());
const IsIndeterminateSchema = Type.Optional(Type.Boolean());
const ValueSchema = Type.Optional(Type.Union([Type.String(), Type.Number()]));
const Checkbox: ComponentImplementation<{
text: TextProps["value"];
defaultIsChecked?: Static<typeof DefaultIsCheckedSchema>;
isDisabled?: Static<typeof IsDisabledSchema>;
colorScheme?: Static<typeof ColorSchemePropertySchema>;
size?: Static<typeof SizePropertySchema>;
isInValid?: Static<typeof IsInvalidSchema>;
spacing?: Static<typeof SpacingSchema>;
isChecked?: Static<typeof IsCheckedSchema>;
isIndeterminate?: Static<typeof IsIndeterminateSchema>;
value?: Static<typeof ValueSchema>;
}> = ({
text,
defaultIsChecked,
isDisabled,
colorScheme,
size,
isInValid,
spacing,
isChecked,
isIndeterminate,
value,
mergeState,
}) => {
const raw = useExpression(text.raw);
const [checked, setChecked] = useState(defaultIsChecked);
useEffect(() => {
mergeState({ value: raw });
}, [raw]);
useEffect(() => {
mergeState({ value: checked });
}, [checked]);
return (
<BaseCheckbox
{...{
colorScheme,
size,
}}
defaultChecked={defaultIsChecked}
isDisabled={isDisabled}
isInvalid={isInValid}
spacing={spacing}
isChecked={isChecked}
isIndeterminate={isIndeterminate}
value={value}
onChange={(e) => {
setChecked(e.target.checked);
}}
>
<Text value={{ ...text, raw }} />
</BaseCheckbox>
);
};
export default {
...createComponent({
version: "chakra_ui/v1",
metadata: {
name: "checkbox",
description: "chakra-ui checkbox",
},
spec: {
properties: [
{
name: "text",
...TextPropertySchema,
},
{
name: "defaultIsChecked",
...DefaultIsCheckedSchema,
},
{
name: "isDisabled",
...IsDisabledSchema,
},
{
name: "colorScheme",
...ColorSchemePropertySchema,
},
{
name: "size",
...SizePropertySchema,
},
{
name: "isInValid",
...IsInvalidSchema,
},
{
name: "spacing",
...SpacingSchema,
},
{
name: "isChecked",
...IsCheckedSchema,
},
{
name: "isIndeterminate",
...IsIndeterminateSchema,
},
{
name: "value",
...ValueSchema,
},
],
acceptTraits: [],
state: {},
methods: [],
},
}),
impl: Checkbox,
};

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

@ -16,6 +16,8 @@ import ChakraUIInput from "./components/chakra-ui/Input";
import ChakraUIBox from "./components/chakra-ui/Box";
import ChakraUIKbd from "./components/chakra-ui/Kbd";
import ChakraUINumberInput from "./components/chakra-ui/NumberInput";
import ChakraUICheckbox from "./components/chakra-ui/Checkbox";
// traits
import CoreState from "./traits/core/state";
import CoreEvent from "./traits/core/event";
@ -114,6 +116,7 @@ registry.registerComponent(ChakraUIInput);
registry.registerComponent(ChakraUIBox);
registry.registerComponent(ChakraUIKbd);
registry.registerComponent(ChakraUINumberInput);
registry.registerComponent(ChakraUICheckbox);
registry.registerTrait(CoreState);
registry.registerTrait(CoreEvent);