import * as React from 'react';
import {
Component, ComponentMeta, ComponentProps, PComponent, PropertyTree, SizeObject,
} from 'inductiveautomation/perspective-client';
import { Card } from 'example/react-modules';
export const COMPONENT_TYPE = 'example.custom.Card';
export interface CardProps {
title?: React.ReactNode;
size?: 'default' | 'small';
extra?: React.ReactNode;
hoverable?: boolean;
style?: React.CSSProperties;
variant?: 'vertical' | 'horizontal';
image?: React.ReactNode;
subtitle?: React.ReactNode;
metaEnabled?: boolean;
metaAvatar?: React.ReactNode;
metaTitle?: React.ReactNode;
metaDescription?: React.ReactNode;
metaStyle?: React.CSSProperties;
children?: React.ReactNode;
}
export class CardComponent extends Component<ComponentProps, any> {
render() {
const {
props: {
title, size, extra, hoverable, style, variant, image, subtitle,
metaEnabled, metaAvatar, metaTitle, metaDescription, metaStyle
},
emit, children
} = this.props;
return (
<Card
title={title}
size={size}
extra={extra}
hoverable={hoverable}
style={style}
styles={{ body: { display: 'flex', flexDirection: 'column', flexGrow: 1, padding: '12px' } }}
variant={variant}
image={image}
subtitle={subtitle}
>
{metaEnabled && (
<AntCard.Meta
avatar={metaAvatar}
title={metaTitle}
description={metaDescription}
style={metaStyle}
/>
)}
{/* The native drop zone for Flex Containers and Embedded Views */}
<divclassName="card-content-fallback"
style={{
minHeight: '100px',
width: '100%',
position: 'relative',
flexGrow: 1,
zIndex: 10,
pointerEvents: 'auto'
}}
>
{children}
);
}
}
export class CardMeta implements ComponentMeta {
getComponentType(): string { return COMPONENT_TYPE; }
getViewComponent(): PComponent { return CardComponent; }
getDefaultSize(): SizeObject { return { width: 350, height: 300 }; }
isContainer = true; // Marks it as a Client Container
getPropsReducer(tree: PropertyTree): CardProps {
return {
title: tree.read('title', undefined),
size: tree.readString('size', 'default') as any,
extra: tree.read('extra', undefined),
hoverable: tree.readBoolean('hoverable', false),
style: tree.readObject('style', {}),
variant: tree.readString('variant', 'vertical') as any,
image: tree.read('image', undefined),
subtitle: tree.read('subtitle', undefined),
metaEnabled: tree.readBoolean('metaEnabled', false),
metaAvatar: tree.read('metaAvatar', undefined),
metaTitle: tree.read('metaTitle', undefined),
metaDescription: tree.read('metaDescription', undefined),
metaStyle: tree.readObject('metaStyle', {})
};
}
} this is react tsx code but it's not working.