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 ChakraUIHStack from './components/chakra-ui/HStack';
|
||||
import ChakraUIVStack from './components/chakra-ui/VStack';
|
||||
import ChakraUIImage from './components/chakra-ui/Image';
|
||||
/* --- lab --- */
|
||||
import LabEditor from './components/lab/Editor';
|
||||
// traits
|
||||
@ -140,6 +141,7 @@ registry.registerComponent(ChakraUICheckboxGroup);
|
||||
registry.registerComponent(ChakraUIStack);
|
||||
registry.registerComponent(ChakraUIHStack);
|
||||
registry.registerComponent(ChakraUIVStack);
|
||||
registry.registerComponent(ChakraUIImage);
|
||||
registry.registerComponent(LabEditor);
|
||||
registry.registerComponent(CoreRouter);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user