refactor: adjust structures and items to add composites, support getTypes API (#4)

* refactor(infographic): items registration add values

* refactor(infographic): list column grid row structure support zigzag

* refactor(infographic): structure registration add composites

* refactor(infographic): add api to get types

Author: Aarebecca

packages/infographic/src/designs/items/BadgeCard.tsx

@@ -136,4 +136,7 @@ export const BadgeCard: ComponentType<BadgeCardProps> = (props) => {
   );
 };
 
-registerItem('badge-card', { component: BadgeCard });
+registerItem('badge-card', {
+  component: BadgeCard,
+  composites: ['icon', 'label', 'value', 'desc'],
+});

packages/infographic/src/designs/items/BulletText.tsx

@@ -75,4 +75,7 @@ export const BulletText: ComponentType<BulletTextProps> = (props) => {
   );
 };
 
-registerItem('bullet-text', { component: BulletText });
+registerItem('bullet-text', {
+  component: BulletText,
+  composites: ['label'],
+});

packages/infographic/src/designs/items/CandyCardLite.tsx

@@ -82,4 +82,7 @@ export const CandyCardLite: ComponentType<CandyCardLiteProps> = (props) => {
   );
 };
 
-registerItem('candy-card-lite', { component: CandyCardLite });
+registerItem('candy-card-lite', {
+  component: CandyCardLite,
+  composites: ['icon', 'label', 'desc'],
+});

packages/infographic/src/designs/items/ChartColumn.tsx

@@ -125,4 +125,7 @@ export const ChartColumn: ComponentType<ChartColumnProps> = (props) => {
   );
 };
 
-registerItem('chart-column', { component: ChartColumn });
+registerItem('chart-column', {
+  component: ChartColumn,
+  composites: ['label', 'value'],
+});

packages/infographic/src/designs/items/CircleNode.tsx

@@ -93,7 +93,10 @@ export const CircleNode: ComponentType<CircleNodeProps> = (props) => {
   );
 };
 
-registerItem('circle-node', { component: CircleNode });
+registerItem('circle-node', {
+  component: CircleNode,
+  composites: ['label'],
+});
 
 function fadeWithWhite(
   color: tinycolor.Instance,

packages/infographic/src/designs/items/CircularProgress.tsx

@@ -100,4 +100,7 @@ export const CircularProgress: ComponentType<CircularProgressProps> = (
   );
 };
 
-registerItem('circular-progress', { component: CircularProgress });
+registerItem('circular-progress', {
+  component: CircularProgress,
+  composites: ['label', 'value'],
+});

packages/infographic/src/designs/items/CompactCard.tsx

@@ -124,4 +124,7 @@ export const CompactCard: ComponentType<CompactCardProps> = (props) => {
   );
 };
 
-registerItem('compact-card', { component: CompactCard });
+registerItem('compact-card', {
+  component: CompactCard,
+  composites: ['icon', 'label', 'value', 'desc'],
+});

packages/infographic/src/designs/items/DoneList.tsx

@@ -63,4 +63,7 @@ export const DoneList: ComponentType<DoneListProps> = (props) => {
   );
 };
 
-registerItem('done-list', { component: DoneList });
+registerItem('done-list', {
+  component: DoneList,
+  composites: ['desc'],
+});

packages/infographic/src/designs/items/HorizontalIconArrow.tsx

@@ -18,17 +18,15 @@ import type { BaseItemProps } from './types';
 
 export interface HorizontalIconArrowProps extends BaseItemProps {
   width?: number;
-  /** 翻转方向 */
-  flipped?: boolean;
 }
 
 export const HorizontalIconArrow: ComponentType<HorizontalIconArrowProps> = (
   props,
 ) => {
-  const [{ indexes, datum, width = 140, themeColors, flipped }, restProps] =
-    getItemProps(props, ['width', 'flipped']);
-
-  const positionV = indexes[0] % 2 === (flipped ? 0 : 1) ? 'normal' : 'flipped';
+  const [
+    { indexes, datum, width = 140, themeColors, positionV = 'normal' },
+    restProps,
+  ] = getItemProps(props, ['width']);
 
   const textAlignVertical = positionV === 'normal' ? 'bottom' : 'top';
   const label = (
@@ -183,7 +181,7 @@ const DotLine = (props: {
   width?: number;
   height?: number;
   fill: string;
-  positionV?: 'normal' | 'flipped';
+  positionV?: 'normal' | 'center' | 'flipped';
 }) => {
   const {
     x = 0,
@@ -218,4 +216,7 @@ const DotLine = (props: {
   );
 };
 
-registerItem('horizontal-icon-arrow', { component: HorizontalIconArrow });
+registerItem('horizontal-icon-arrow', {
+  component: HorizontalIconArrow,
+  composites: ['icon', 'label', 'desc'],
+});

packages/infographic/src/designs/items/HorizontalIconLine.tsx

@@ -146,4 +146,7 @@ export const HorizontalIconLine: ComponentType<HorizontalIconLineProps> = (
   );
 };
 
-registerItem('horizontal-icon-line', { component: HorizontalIconLine });
+registerItem('horizontal-icon-line', {
+  component: HorizontalIconLine,
+  composites: ['icon', 'label', 'desc'],
+});