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 #26 from jessie975/ysj/input

Browse Source 
add initial chakra input component
This commit is contained in:
yz-yu 2021-07-30 14:02:09 +08:00 committed by GitHub
commit a06fdc753a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 222 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
packages/runtime/example/input-components/index.html Normal file
View File

@ -0,0 +1,73 @@
<!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: input component</title>
</head>
<body>
<div id="root"></div>
<script type="module">
import renderApp from "../../src/main.tsx";
renderApp({
version: "example/v1",
metadata: {
name: "input_component",
description: "input component example",
},
spec: {
components: [
{
id: "root",
type: "chakra_ui/v1/root",
properties: {},
traits: [],
},
{
id: "input",
type: "chakra_ui/v1/input",
properties: {
variant: "filled",
placeholder: "This a example",
size: "lg",
colorScheme: "pink",
focusBorderColor: "pink.500",
isDisabled: false,
isRequired: true,
left: {
type: 'addon',
children: 'https://',
},
right: {
type: 'element',
children: '.com',
color: 'red',
fontSize: '16px'
}
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "root",
slot: "root",
},
},
},
{
type: "core/v1/state",
properties: {
key: "value",
initialValue: "",
},
}
],
}
],
},
});
</script>
</body>
</html>

147
packages/runtime/src/components/chakra-ui/Input.tsx Normal file
View File

@ -0,0 +1,147 @@
import React, { useEffect, useRef } from "react";
import { Input as BaseInput, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement } from "@chakra-ui/react";
import { createComponent } from "@meta-ui/core";
import { Static, Type } from "@sinclair/typebox";
import { ComponentImplementation } from "../../registry";
const VariantPropertySchema = Type.KeyOf(
Type.Object({
outline: Type.String(),
unstyled: Type.String(),
filled: Type.String(),
flushed: Type.String()
})
);
const PlaceholderPropertySchema = Type.Optional(Type.String());
const SizePropertySchema = Type.KeyOf(
Type.Object({
sm: Type.String(),
md: Type.String(),
lg: Type.String(),
xs: Type.String()
})
);
const FocusBorderColorPropertySchema = Type.Optional(Type.String());
const IsDisabledPropertySchema = Type.Optional(Type.Boolean());
const IsRequiredPropertySchema = Type.Optional(Type.Boolean());
const AppendElementPropertySchema = Type.Union([
Type.Object({
type: Type.KeyOf(Type.Object({ addon: Type.String() })),
children: Type.Optional(Type.String()) // TODO: ReactNode
}),
Type.Object({
type: Type.KeyOf(Type.Object({ element: Type.String() })),
children: Type.Optional(Type.String()), // TODO: ReactNode
fontSize: Type.Optional(Type.String()),
color: Type.Optional(Type.String()),
})
])
const Input: ComponentImplementation<{
variant?: Static<typeof VariantPropertySchema>;
placeholder?: Static<typeof PlaceholderPropertySchema>;
size?: Static<typeof SizePropertySchema>;
focusBorderColor?: Static<typeof FocusBorderColorPropertySchema>;
isDisabled?: Static<typeof IsDisabledPropertySchema>;
isRequired?: Static<typeof IsRequiredPropertySchema>;
left?: Static<typeof AppendElementPropertySchema>;
right?: Static<typeof AppendElementPropertySchema>;
}> = ({
variant,
placeholder,
size,
focusBorderColor,
isDisabled,
isRequired,
left,
right,
mergeState
}) => {
const [value, setValue] = React.useState(""); // TODO: number input and pin input
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => setValue(event.target.value);
useEffect(() => {
mergeState({ value });
}, [value]);
return (
<InputGroup size={size}>
{left ? left.type === "addon"
? <InputLeftAddon children={left.children} />
: <InputLeftElement children={left.children} fontSize={left.fontSize} color={left.color} />
: <></>
}
<BaseInput
variant={variant}
placeholder={placeholder}
focusBorderColor={focusBorderColor}
isDisabled={isDisabled}
isRequired={isRequired}
onChange={onChange}
/>
{right ? right.type === "addon"
? <InputRightAddon children={right.children} />
: <InputRightElement children={right.children} fontSize={right.fontSize} color={right.color} />
: <></>}
</InputGroup>
);
}
const StateSchema = Type.Object({
value: Type.String(),
});
export default {
...createComponent({
version: "chakra_ui/v1",
metadata: {
name: "input",
description: "chakra_ui input",
},
spec: {
properties: [
{
name: 'variant',
...VariantPropertySchema
},
{
name: 'placeholder',
...PlaceholderPropertySchema
},
{
name: 'size',
...SizePropertySchema
},
{
name: 'focusBorderColor',
...FocusBorderColorPropertySchema
},
{
name: 'isDisabled',
...IsDisabledPropertySchema
},
{
name: 'isRequired',
...IsRequiredPropertySchema
},
{
name: 'left',
...AppendElementPropertySchema
},
{
name: 'right',
...AppendElementPropertySchema
}
],
acceptTraits: [],
state: StateSchema,
methods: [],
}
}),
impl: Input,
}

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

@ -11,6 +11,7 @@ import ChakraUIRoot from "./components/chakra-ui/Root";
import ChakraUIButton from "./components/chakra-ui/Button";
import ChakraUITabs from "./components/chakra-ui/Tabs";
import ChakraUITable from "./components/chakra-ui/Table";
import ChakraUIInput from "./components/chakra-ui/Input";
// traits
import CoreState from "./traits/core/state";
import CoreEvent from "./traits/core/event";
@ -104,6 +105,7 @@ registry.registerComponent(ChakraUIRoot);
registry.registerComponent(ChakraUIButton);
registry.registerComponent(ChakraUITabs);
registry.registerComponent(ChakraUITable);
registry.registerComponent(ChakraUIInput);
registry.registerTrait(CoreState);
registry.registerTrait(CoreEvent);