refactor: adjust structures and items to add composites, support getTypes API

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'],
+});

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

@@ -119,4 +119,7 @@ export const IconBadge: ComponentType<IconBadgeProps> = (props) => {
   );
 };
 
-registerItem('icon-badge', { component: IconBadge });
+registerItem('icon-badge', {
+  component: IconBadge,
+  composites: ['icon', 'label'],
+});

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

@@ -222,4 +222,7 @@ export const IndexedCard: ComponentType<IndexedCardProps> = (props) => {
   );
 };
 
-registerItem('indexed-card', { component: IndexedCard });
+registerItem('indexed-card', {
+  component: IndexedCard,
+  composites: ['label', 'desc'],
+});

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

@@ -103,4 +103,7 @@ export const LCornerCard: ComponentType<LCornerCardProps> = (props) => {
   );
 };
 
-registerItem('l-corner-card', { component: LCornerCard });
+registerItem('l-corner-card', {
+  component: LCornerCard,
+  composites: ['icon', 'label', 'desc'],
+});

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

@@ -163,4 +163,7 @@ export const LetterCard: ComponentType<LetterCardProps> = (props) => {
   );
 };
 
-registerItem('letter-card', { component: LetterCard });
+registerItem('letter-card', {
+  component: LetterCard,
+  composites: ['label'],
+});

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

@@ -132,4 +132,7 @@ export const PillBadge: ComponentType<PillBadgeProps> = (props) => {
   );
 };
 
-registerItem('pill-badge', { component: PillBadge });
+registerItem('pill-badge', {
+  component: PillBadge,
+  composites: ['label', 'desc'],
+});

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

@@ -37,4 +37,7 @@ export const LabelText: ComponentType<LabelTextProps> = (props) => {
   );
 };
 
-registerItem('plain-text', { component: LabelText });
+registerItem('plain-text', {
+  component: LabelText,
+  composites: ['label'],
+});

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

@@ -195,4 +195,7 @@ export const ProgressCard: ComponentType<ProgressCardProps> = (props) => {
   );
 };
 
-registerItem('progress-card', { component: ProgressCard });
+registerItem('progress-card', {
+  component: ProgressCard,
+  composites: ['icon', 'label', 'value', 'desc'],
+});

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

@@ -183,4 +183,7 @@ function calculateTriangleSegment(
   return { points, topWidth, bottomWidth };
 }
 
-registerItem('pyramid', { component: Pyramid });
+registerItem('pyramid', {
+  component: Pyramid,
+  composites: ['icon', 'label', 'desc'],
+});

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

@@ -276,4 +276,7 @@ export const QuarterCircular: ComponentType<QuarterCircularProps> = (props) => {
   );
 };
 
-registerItem('quarter-circular', { component: QuarterCircular });
+registerItem('quarter-circular', {
+  component: QuarterCircular,
+  composites: ['icon', 'label', 'desc'],
+});

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

@@ -190,4 +190,7 @@ export const QuarterSimpleCard: ComponentType<QuarterSimpleCardProps> = (
   );
 };
 
-registerItem('quarter-simple-card', { component: QuarterSimpleCard });
+registerItem('quarter-simple-card', {
+  component: QuarterSimpleCard,
+  composites: ['icon', 'label', 'desc'],
+});

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

@@ -160,4 +160,7 @@ export const RibbonCard: ComponentType<RibbonCardProps> = (props) => {
   );
 };
 
-registerItem('ribbon-card', { component: RibbonCard });
+registerItem('ribbon-card', {
+  component: RibbonCard,
+  composites: ['icon', 'label', 'value', 'desc'],
+});

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

@@ -73,4 +73,7 @@ export const RoundedRectNode: ComponentType<RoundedRectNodeProps> = (props) => {
   );
 };
 
-registerItem('rounded-rect-node', { component: RoundedRectNode });
+registerItem('rounded-rect-node', {
+  component: RoundedRectNode,
+  composites: ['label'],
+});

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

@@ -24,16 +24,9 @@ export const SimpleHorizontalArrow: ComponentType<
   SimpleHorizontalArrowProps
 > = (props) => {
   const [
-    {
-      indexes,
-      datum,
-      width = 140,
-      themeColors,
-      flipped,
-      positionV = indexes[0] % 2 === (flipped ? 0 : 1) ? 'normal' : 'flipped',
-    },
+    { indexes, datum, width = 140, themeColors, positionV = 'normal' },
     restProps,
-  ] = getItemProps(props, ['width', 'flipped']);
+  ] = getItemProps(props, ['width']);
 
   const textAlignVertical = positionV === 'normal' ? 'bottom' : 'top';
   const label = (
@@ -147,4 +140,7 @@ const HorizontalArrow = (
   );
 };
 
-registerItem('simple-horizontal-arrow', { component: SimpleHorizontalArrow });
+registerItem('simple-horizontal-arrow', {
+  component: SimpleHorizontalArrow,
+  composites: ['label', 'desc'],
+});

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

@@ -71,4 +71,7 @@ export const SimpleIllusItem: ComponentType<SimpleIllusItemProps> = (props) => {
   );
 };
 
-registerItem('simple-illus', { component: SimpleIllusItem });
+registerItem('simple-illus', {
+  component: SimpleIllusItem,
+  composites: ['illus', 'label', 'desc'],
+});

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

@@ -213,4 +213,7 @@ export const SimpleItem: ComponentType<SimpleItemProps> = (props) => {
   }
 };
 
-registerItem('simple', { component: SimpleItem });
+registerItem('simple', {
+  component: SimpleItem,
+  composites: ['icon', 'label', 'desc'],
+});

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

@@ -22,10 +22,10 @@ export interface SimpleVerticalArrowProps extends BaseItemProps {
 export const SimpleVerticalArrow: ComponentType<SimpleVerticalArrowProps> = (
   props,
 ) => {
-  const [{ indexes, datum, height = 140, themeColors, flipped }, restProps] =
-    getItemProps(props, ['height', 'flipped']);
-
-  const positionH = indexes[0] % 2 === (flipped ? 0 : 1) ? 'normal' : 'flipped';
+  const [
+    { indexes, datum, height = 140, themeColors, positionH = 'normal' },
+    restProps,
+  ] = getItemProps(props, ['height']);
 
   const textAlignHorizontal = positionH === 'normal' ? 'right' : 'left';
   const label = (
@@ -140,4 +140,7 @@ const VerticalArrow = (
   );
 };
 
-registerItem('simple-vertical-arrow', { component: SimpleVerticalArrow });
+registerItem('simple-vertical-arrow', {
+  component: SimpleVerticalArrow,
+  composites: ['label', 'desc'],
+});

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

@@ -138,4 +138,7 @@ export const UnderlineText: ComponentType<UnderlineTextProps> = (props) => {
   );
 };
 
-registerItem('underline-text', { component: UnderlineText });
+registerItem('underline-text', {
+  component: UnderlineText,
+  composites: ['label', 'desc'],
+});

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

@@ -25,10 +25,10 @@ export interface VerticalIconArrowProps extends BaseItemProps {
 export const VerticalIconArrow: ComponentType<VerticalIconArrowProps> = (
   props,
 ) => {
-  const [{ indexes, datum, height = 140, themeColors, flipped }, restProps] =
-    getItemProps(props, ['height', 'flipped']);
-
-  const positionH = indexes[0] % 2 === (flipped ? 0 : 1) ? 'normal' : 'flipped';
+  const [
+    { indexes, datum, height = 140, themeColors, positionH = 'normal' },
+    restProps,
+  ] = getItemProps(props, ['height']);
 
   const textAlignHorizontal = positionH === 'normal' ? 'right' : 'left';
   const label = (
@@ -184,7 +184,7 @@ const DotLine = (props: {
   width?: number;
   height?: number;
   fill: string;
-  positionH?: 'normal' | 'flipped';
+  positionH?: 'normal' | 'center' | 'flipped';
 }) => {
   const {
     x = 0,
@@ -219,4 +219,7 @@ const DotLine = (props: {
   );
 };
 
-registerItem('vertical-icon-arrow', { component: VerticalIconArrow });
+registerItem('vertical-icon-arrow', {
+  component: VerticalIconArrow,
+  composites: ['icon', 'label', 'desc'],
+});