From 56763dfa7f2fe08ecc39cb7c98710f217dab9544 Mon Sep 17 00:00:00 2001 From: Shengjie Yang Date: Tue, 3 Aug 2021 22:56:20 +0800 Subject: [PATCH] impl number input component --- .../example/input-components/index.html | 7 - .../example/input-components/numberInput.html | 66 ++++++++ .../src/components/chakra-ui/Input.tsx | 2 +- .../src/components/chakra-ui/NumberInput.tsx | 148 ++++++++++++++++++ packages/runtime/src/registry.tsx | 2 + 5 files changed, 217 insertions(+), 8 deletions(-) create mode 100644 packages/runtime/example/input-components/numberInput.html create mode 100644 packages/runtime/src/components/chakra-ui/NumberInput.tsx diff --git a/packages/runtime/example/input-components/index.html b/packages/runtime/example/input-components/index.html index dd75228d..c29ebe2a 100644 --- a/packages/runtime/example/input-components/index.html +++ b/packages/runtime/example/input-components/index.html @@ -55,13 +55,6 @@ slot: "root", }, }, - }, - { - type: "core/v1/state", - properties: { - key: "value", - initialValue: "", - }, } ], } diff --git a/packages/runtime/example/input-components/numberInput.html b/packages/runtime/example/input-components/numberInput.html new file mode 100644 index 00000000..0e50a5e1 --- /dev/null +++ b/packages/runtime/example/input-components/numberInput.html @@ -0,0 +1,66 @@ + + + + + + meta-ui runtime example: number input component + + +
+ + + diff --git a/packages/runtime/src/components/chakra-ui/Input.tsx b/packages/runtime/src/components/chakra-ui/Input.tsx index ec67dcfc..8550810e 100644 --- a/packages/runtime/src/components/chakra-ui/Input.tsx +++ b/packages/runtime/src/components/chakra-ui/Input.tsx @@ -62,7 +62,7 @@ const Input: ComponentImplementation<{ right, mergeState }) => { - const [value, setValue] = React.useState(""); // TODO: number input and pin input + const [value, setValue] = React.useState(""); // TODO: pin input const onChange = (event: React.ChangeEvent) => setValue(event.target.value); useEffect(() => { diff --git a/packages/runtime/src/components/chakra-ui/NumberInput.tsx b/packages/runtime/src/components/chakra-ui/NumberInput.tsx new file mode 100644 index 00000000..9c0473de --- /dev/null +++ b/packages/runtime/src/components/chakra-ui/NumberInput.tsx @@ -0,0 +1,148 @@ +import React, { useState, useEffect } from "react"; +import { + NumberInput as BaseNumberInput, + NumberInputField, + NumberInputStepper, + NumberIncrementStepper, + NumberDecrementStepper, +} from "@chakra-ui/react"; +import { createComponent } from "@meta-ui/core"; +import { Static, Type } from "@sinclair/typebox"; +import { ComponentImplementation } from "../../registry"; + +const DefaultValuePropertySchema = Type.Optional(Type.Number()); +const MinPropertySchema = Type.Optional(Type.Number()); +const MaxPropertySchema = Type.Optional(Type.Number()); +const StepPropertySchema = Type.Optional(Type.Number()); +const PrecisionPropertySchema = Type.Optional(Type.Number()); +const ClampValueOnBlurPropertySchema = Type.Optional(Type.Boolean()); +const AllowMouseWheelPropertySchema = Type.Optional(Type.Boolean()); + +const SizePropertySchema = Type.KeyOf( + Type.Object({ + sm: Type.String(), + md: Type.String(), + lg: Type.String(), + xs: Type.String() + }) +); + +const CustomerStepStylePropertySchema = Type.Object({ + bg: Type.Optional(Type.String()), + children: Type.Optional(Type.String()), + _active: Type.Object(Type.Object({ bg: Type.String() })), +}) + +const NumberInput: ComponentImplementation<{ + defaultValue?: Static + min?: Static + max?: Static + step?: Static + precision?: Static + clampValueOnBlur?: Static + allowMouseWheel?: Static + size?: Static + customerIncrement?: Static + customerDecrement?: Static +}> = ({ + defaultValue = 0, + min, + max, + step, + precision, + clampValueOnBlur = true, + allowMouseWheel = false, + size, + customerIncrement, + customerDecrement, + mergeState +}) => { + const [value, setValue] = useState(defaultValue) + const onChange = (valueAsString: string, valueAsNumber: number) => setValue(valueAsNumber); + + useEffect(() => { + mergeState({ value }); + }, [value]); + + return ( + + + + + + + + ); + } + +const StateSchema = Type.Object({ + value: Type.Number(), +}); + +export default { + ...createComponent({ + version: "chakra_ui/v1", + metadata: { + name: "number_input", + description: "chakra_ui number input", + }, + spec: { + properties: [ + { + name: 'defaultValue', + ...DefaultValuePropertySchema + }, + { + name: 'min', + ...MinPropertySchema + }, + { + name: 'max', + ...MaxPropertySchema + }, + { + name: 'step', + ...StepPropertySchema + }, + { + name: 'precision', + ...PrecisionPropertySchema + }, + { + name: 'clampValueOnBlur', + ...ClampValueOnBlurPropertySchema + }, + { + name: 'allowMouseWheel', + ...AllowMouseWheelPropertySchema + }, + { + name: 'size', + ...SizePropertySchema + }, + { + name: 'customerIncrement', + ...CustomerStepStylePropertySchema + }, + { + name: 'customerDecrement', + ...CustomerStepStylePropertySchema + }, + ], + acceptTraits: [], + state: StateSchema, + methods: [], + } + }), + impl: NumberInput, +} \ No newline at end of file diff --git a/packages/runtime/src/registry.tsx b/packages/runtime/src/registry.tsx index 1bd9848a..8f71bf1e 100644 --- a/packages/runtime/src/registry.tsx +++ b/packages/runtime/src/registry.tsx @@ -15,6 +15,7 @@ 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"; +import ChakraUINumberInput from "./components/chakra-ui/NumberInput"; // traits import CoreState from "./traits/core/state"; import CoreEvent from "./traits/core/event"; @@ -112,6 +113,7 @@ registry.registerComponent(ChakraUITable); registry.registerComponent(ChakraUIInput); registry.registerComponent(ChakraUIBox); registry.registerComponent(ChakraUIKbd); +registry.registerComponent(ChakraUINumberInput); registry.registerTrait(CoreState); registry.registerTrait(CoreEvent);