mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2025-02-17 17:40:31 +08:00
Merge pull request #52 from webzard-io/cb/image-comp
Implement the Chakra UI Image in the runtime package.
This commit is contained in:
tanbowensg
GitHub
commit
3e8f26496e
259
packages/runtime/example/image-component/index.html
Normal file
259
packages/runtime/example/image-component/index.html
Normal file
@ -0,0 +1,259 @@
|
|||||||
|
<!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: 'image',
|
||||||
|
description: 'image component example',
|
||||||
|
},
|
||||||
|
spec: {
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
id: 'root',
|
||||||
|
type: 'chakra_ui/v1/root',
|
||||||
|
properties: {},
|
||||||
|
traits: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'test_btn',
|
||||||
|
type: 'chakra_ui/v1/button',
|
||||||
|
properties: {
|
||||||
|
text: {
|
||||||
|
raw: 'Change Radius',
|
||||||
|
format: 'plain',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
traits: [
|
||||||
|
{
|
||||||
|
type: 'core/v1/slot',
|
||||||
|
properties: {
|
||||||
|
container: {
|
||||||
|
id: 'root',
|
||||||
|
slot: 'root',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'core/v1/state',
|
||||||
|
properties: {
|
||||||
|
key: 'count',
|
||||||
|
initialValue: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'core/v1/event',
|
||||||
|
properties: {
|
||||||
|
events: [
|
||||||
|
{
|
||||||
|
event: 'click',
|
||||||
|
componentId: 'test_btn',
|
||||||
|
method: {
|
||||||
|
name: 'setValue',
|
||||||
|
parameters: {
|
||||||
|
key: 'count',
|
||||||
|
value:
|
||||||
|
'{{ test_btn.count > 0 ? 0 : test_btn.count + 1 }}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
wait: {},
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'size_btn',
|
||||||
|
type: 'chakra_ui/v1/button',
|
||||||
|
properties: {
|
||||||
|
text: {
|
||||||
|
raw: 'Change Size',
|
||||||
|
format: 'plain',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
traits: [
|
||||||
|
{
|
||||||
|
type: 'core/v1/slot',
|
||||||
|
properties: {
|
||||||
|
container: {
|
||||||
|
id: 'root',
|
||||||
|
slot: 'root',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'core/v1/state',
|
||||||
|
properties: {
|
||||||
|
key: 'count',
|
||||||
|
initialValue: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'core/v1/event',
|
||||||
|
properties: {
|
||||||
|
events: [
|
||||||
|
{
|
||||||
|
event: 'click',
|
||||||
|
componentId: 'size_btn',
|
||||||
|
method: {
|
||||||
|
name: 'setValue',
|
||||||
|
parameters: {
|
||||||
|
key: 'count',
|
||||||
|
value:
|
||||||
|
'{{ size_btn.count > 0 ? 0 : size_btn.count + 1 }}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
wait: {},
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'err_btn',
|
||||||
|
type: 'chakra_ui/v1/button',
|
||||||
|
properties: {
|
||||||
|
text: {
|
||||||
|
raw: 'Change cross origin',
|
||||||
|
format: 'plain',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
traits: [
|
||||||
|
{
|
||||||
|
type: 'core/v1/slot',
|
||||||
|
properties: {
|
||||||
|
container: {
|
||||||
|
id: 'root',
|
||||||
|
slot: 'root',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'core/v1/state',
|
||||||
|
properties: {
|
||||||
|
key: 'count',
|
||||||
|
initialValue: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'core/v1/event',
|
||||||
|
properties: {
|
||||||
|
events: [
|
||||||
|
{
|
||||||
|
event: 'click',
|
||||||
|
componentId: 'err_btn',
|
||||||
|
method: {
|
||||||
|
name: 'setValue',
|
||||||
|
parameters: {
|
||||||
|
key: 'count',
|
||||||
|
value:
|
||||||
|
'{{ err_btn.count > 0 ? 0 : err_btn.count + 1 }}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
wait: {},
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'image',
|
||||||
|
type: 'chakra_ui/v1/image',
|
||||||
|
properties: {
|
||||||
|
src: '{{ test_btn.count % 2 === 0 ? "https://bit.ly/sage-adebayo" : "https://bit.ly/dan-abramov" }}',
|
||||||
|
alt: 'dan-abramov',
|
||||||
|
boxSize: '{{ size_btn.count % 2 === 0 ? "250px" : "150px"}}',
|
||||||
|
objectFit: 'cover',
|
||||||
|
borderRadius: '{{ test_btn.count % 2 === 0 ? "full" : ""}}',
|
||||||
|
fallbackSrc: 'https://via.placeholder.com/150',
|
||||||
|
crossOrigin:
|
||||||
|
'{{ err_btn.count === 1 ? "anonymous" : undefined}}',
|
||||||
|
},
|
||||||
|
traits: [
|
||||||
|
{
|
||||||
|
type: 'core/v1/slot',
|
||||||
|
properties: {
|
||||||
|
container: {
|
||||||
|
id: 'root',
|
||||||
|
slot: 'root',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'core/v1/event',
|
||||||
|
properties: {
|
||||||
|
events: [
|
||||||
|
{
|
||||||
|
event: 'onLoad',
|
||||||
|
componentId: 'text',
|
||||||
|
method: {
|
||||||
|
name: 'setValue',
|
||||||
|
parameters: { key: 'text', value: 'image loaded' },
|
||||||
|
},
|
||||||
|
wait: {},
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
event: 'onError',
|
||||||
|
componentId: 'text',
|
||||||
|
method: {
|
||||||
|
name: 'setValue',
|
||||||
|
parameters: { key: 'text', value: 'image loadError' },
|
||||||
|
},
|
||||||
|
wait: {},
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'text',
|
||||||
|
type: 'core/v1/text',
|
||||||
|
properties: {
|
||||||
|
value: {
|
||||||
|
raw: '{{ text.text }}',
|
||||||
|
format: 'plain',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
traits: [
|
||||||
|
{
|
||||||
|
type: 'core/v1/state',
|
||||||
|
properties: {
|
||||||
|
key: 'text',
|
||||||
|
initialValue: 'image loading...',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'core/v1/slot',
|
||||||
|
properties: {
|
||||||
|
container: {
|
||||||
|
id: 'root',
|
||||||
|
slot: 'root',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
182
packages/runtime/src/components/chakra-ui/Image.tsx
Normal file
182
packages/runtime/src/components/chakra-ui/Image.tsx
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Image as BaseImage } from '@chakra-ui/react';
|
||||||
|
import { createComponent } from '@meta-ui/core';
|
||||||
|
import { Static, Type } from '@sinclair/typebox';
|
||||||
|
import { ComponentImplementation } from '../../registry';
|
||||||
|
|
||||||
|
const SrcPropertySchema = Type.String();
|
||||||
|
const OptionalStringPropertySchema = Type.Optional(Type.String());
|
||||||
|
const IgnoreFallbackPropertySchema = Type.Optional(Type.Boolean());
|
||||||
|
const HeightSchema = Type.Optional(Type.Union([Type.String(), Type.Number()]));
|
||||||
|
|
||||||
|
const BoxSizePropertySchema = Type.Optional(
|
||||||
|
Type.Union([
|
||||||
|
Type.KeyOf(
|
||||||
|
Type.Object({
|
||||||
|
sm: Type.String(),
|
||||||
|
md: Type.String(),
|
||||||
|
lg: Type.String(),
|
||||||
|
xs: Type.String(),
|
||||||
|
})
|
||||||
|
),
|
||||||
|
Type.String(),
|
||||||
|
])
|
||||||
|
);
|
||||||
|
|
||||||
|
const GlobalCssSchema = Type.KeyOf(
|
||||||
|
Type.Object({
|
||||||
|
'-moz-initial': Type.String(),
|
||||||
|
inherit: Type.String(),
|
||||||
|
initial: Type.String(),
|
||||||
|
revert: Type.String(),
|
||||||
|
unset: Type.String(),
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const ObjectFitSchema = Type.Optional(
|
||||||
|
Type.Union([
|
||||||
|
GlobalCssSchema,
|
||||||
|
Type.KeyOf(
|
||||||
|
Type.Object({
|
||||||
|
contain: Type.String(),
|
||||||
|
cover: Type.String(),
|
||||||
|
fill: Type.String(),
|
||||||
|
none: Type.String(),
|
||||||
|
'scale-down': Type.String(),
|
||||||
|
})
|
||||||
|
),
|
||||||
|
])
|
||||||
|
);
|
||||||
|
|
||||||
|
const BorderRadiusSchema = Type.Optional(
|
||||||
|
Type.Union([
|
||||||
|
GlobalCssSchema,
|
||||||
|
Type.Number(),
|
||||||
|
Type.String(),
|
||||||
|
Type.KeyOf(
|
||||||
|
Type.Object({
|
||||||
|
radii: Type.String(),
|
||||||
|
sm: Type.String(),
|
||||||
|
md: Type.String(),
|
||||||
|
lg: Type.String(),
|
||||||
|
base: Type.String(),
|
||||||
|
xl: Type.String(),
|
||||||
|
'2xl': Type.String(),
|
||||||
|
full: Type.String(),
|
||||||
|
'3xl': Type.String(),
|
||||||
|
})
|
||||||
|
),
|
||||||
|
])
|
||||||
|
);
|
||||||
|
|
||||||
|
const CrossOriginSchema = Type.Optional(
|
||||||
|
Type.KeyOf(
|
||||||
|
Type.Object({
|
||||||
|
anonymous: Type.String(),
|
||||||
|
'use-credentials': Type.String(),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
const Image: ComponentImplementation<{
|
||||||
|
boxSize?: Static<typeof BoxSizePropertySchema>;
|
||||||
|
src: Static<typeof SrcPropertySchema>;
|
||||||
|
fallbackSrc?: Static<typeof OptionalStringPropertySchema>;
|
||||||
|
alt?: Static<typeof OptionalStringPropertySchema>;
|
||||||
|
ignoreFallback?: Static<typeof IgnoreFallbackPropertySchema>;
|
||||||
|
objectFit?: Static<typeof ObjectFitSchema>;
|
||||||
|
borderRadius?: Static<typeof BorderRadiusSchema>;
|
||||||
|
htmlHeight?: Static<typeof HeightSchema>;
|
||||||
|
htmlWidth?: Static<typeof HeightSchema>;
|
||||||
|
crossOrigin?: Static<typeof CrossOriginSchema>;
|
||||||
|
}> = ({
|
||||||
|
boxSize,
|
||||||
|
src,
|
||||||
|
alt,
|
||||||
|
objectFit,
|
||||||
|
borderRadius,
|
||||||
|
fallbackSrc,
|
||||||
|
ignoreFallback,
|
||||||
|
htmlWidth,
|
||||||
|
htmlHeight,
|
||||||
|
crossOrigin,
|
||||||
|
callbackMap,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<BaseImage
|
||||||
|
src={src}
|
||||||
|
alt={alt}
|
||||||
|
objectFit={objectFit}
|
||||||
|
boxSize={boxSize}
|
||||||
|
onLoad={callbackMap?.onLoad}
|
||||||
|
htmlHeight={htmlHeight}
|
||||||
|
htmlWidth={htmlWidth}
|
||||||
|
crossOrigin={crossOrigin}
|
||||||
|
onError={callbackMap?.onError}
|
||||||
|
ignoreFallback={ignoreFallback}
|
||||||
|
borderRadius={borderRadius}
|
||||||
|
fallbackSrc={fallbackSrc}></BaseImage>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const StateSchema = Type.Object({
|
||||||
|
value: Type.String(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
...createComponent({
|
||||||
|
version: 'chakra_ui/v1',
|
||||||
|
metadata: {
|
||||||
|
name: 'image',
|
||||||
|
description: 'chakra_ui image',
|
||||||
|
},
|
||||||
|
spec: {
|
||||||
|
properties: [
|
||||||
|
{
|
||||||
|
name: 'src',
|
||||||
|
...SrcPropertySchema,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'fallbackSrc',
|
||||||
|
...OptionalStringPropertySchema,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'boxSize',
|
||||||
|
...BoxSizePropertySchema,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'objectFit',
|
||||||
|
...ObjectFitSchema,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'borderRadius',
|
||||||
|
...BorderRadiusSchema,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'ignoreFallback',
|
||||||
|
...IgnoreFallbackPropertySchema,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'alt',
|
||||||
|
...OptionalStringPropertySchema,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'htmlHeight',
|
||||||
|
...HeightSchema,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'htmlWidth',
|
||||||
|
...HeightSchema,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'crossOrigin',
|
||||||
|
...CrossOriginSchema,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
acceptTraits: [],
|
||||||
|
state: StateSchema,
|
||||||
|
methods: [{ name: 'onLoad' }],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
impl: Image,
|
||||||
|
};
|
||||||
@ -21,6 +21,7 @@ import ChakraUICheckbox from './components/chakra-ui/Checkbox';
|
|||||||
import ChakraUIStack from './components/chakra-ui/Stack';
|
import ChakraUIStack from './components/chakra-ui/Stack';
|
||||||
import ChakraUIHStack from './components/chakra-ui/HStack';
|
import ChakraUIHStack from './components/chakra-ui/HStack';
|
||||||
import ChakraUIVStack from './components/chakra-ui/VStack';
|
import ChakraUIVStack from './components/chakra-ui/VStack';
|
||||||
|
import ChakraUIImage from './components/chakra-ui/Image';
|
||||||
/* --- lab --- */
|
/* --- lab --- */
|
||||||
import LabEditor from './components/lab/Editor';
|
import LabEditor from './components/lab/Editor';
|
||||||
// traits
|
// traits
|
||||||
@ -140,6 +141,7 @@ registry.registerComponent(ChakraUICheckboxGroup);
|
|||||||
registry.registerComponent(ChakraUIStack);
|
registry.registerComponent(ChakraUIStack);
|
||||||
registry.registerComponent(ChakraUIHStack);
|
registry.registerComponent(ChakraUIHStack);
|
||||||
registry.registerComponent(ChakraUIVStack);
|
registry.registerComponent(ChakraUIVStack);
|
||||||
|
registry.registerComponent(ChakraUIImage);
|
||||||
registry.registerComponent(LabEditor);
|
registry.registerComponent(LabEditor);
|
||||||
registry.registerComponent(CoreRouter);
|
registry.registerComponent(CoreRouter);
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user