From 0b8bdbb9aa669ab34a797555b9ae1f7d6ba1cab4 Mon Sep 17 00:00:00 2001 From: chenenpei Date: Thu, 5 Aug 2021 11:16:22 +0800 Subject: [PATCH] implement chakra checkbox #5 --- packages/runtime/example/checkbox/index.html | 77 +++++++++ .../src/components/chakra-ui/Checkbox.tsx | 161 ++++++++++++++++++ packages/runtime/src/registry.tsx | 3 + 3 files changed, 241 insertions(+) create mode 100644 packages/runtime/example/checkbox/index.html create mode 100644 packages/runtime/src/components/chakra-ui/Checkbox.tsx diff --git a/packages/runtime/example/checkbox/index.html b/packages/runtime/example/checkbox/index.html new file mode 100644 index 00000000..5f4a01b0 --- /dev/null +++ b/packages/runtime/example/checkbox/index.html @@ -0,0 +1,77 @@ + + + + + + meta-ui runtime example: checkbox component + + +
+ + + diff --git a/packages/runtime/src/components/chakra-ui/Checkbox.tsx b/packages/runtime/src/components/chakra-ui/Checkbox.tsx new file mode 100644 index 00000000..c3dc521d --- /dev/null +++ b/packages/runtime/src/components/chakra-ui/Checkbox.tsx @@ -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; + isDisabled?: Static; + colorScheme?: Static; + size?: Static; + isInValid?: Static; + spacing?: Static; + isChecked?: Static; + isIndeterminate?: Static; + value?: Static; +}> = ({ + 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 ( + { + setChecked(e.target.checked); + }} + > + + + ); +}; + +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, +}; diff --git a/packages/runtime/src/registry.tsx b/packages/runtime/src/registry.tsx index 8f71bf1e..3ead0d76 100644 --- a/packages/runtime/src/registry.tsx +++ b/packages/runtime/src/registry.tsx @@ -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);