@cainiaofe/cn-ui-lowcode/src/lowcode/cn-statistic-card-pro-alc/view.js

## 在线文档

import React from 'react';
import {
  handleFormatChildren,
  isArrayNotEmpty,
  isDesignMode,
  mergeHandleProps,
} from '@/common/util/util';
import './view.scss';
import isPlainObject from 'lodash/isPlainObject';
import { useData } from '@/common/hook/useData';
import {
  _buttonConfig,
  _buttonPosition,
  _context as _contextConst, _dialogRef, _state,
} from '@/common/util/biz-component-prop-name';
import { CnStatisticCardProContext } from '@/lowcode/cn-statistic-card-pro-alc/context';

const CnStatisticCardPro = (props) => {
  const {
    _context,
    children,
    dataFrom,
  } = props;

  const isDesign = isDesignMode(props)

  const { data = [] } = useData({
    dataFrom,
    _context,
    isDesign,
    designMockData: [{ label: '编辑态的mock数据', value: '0' }],
  });
  const realData = data?.value;

  if(isDesign) {
    return <div className="cn-statistic-card-pro">{children}</div>
  }else if(isArrayNotEmpty(realData)){

      return <div className="cn-statistic-card-pro">
        {realData.map((item,index)=>{
          return <CnStatisticCardProContext.Provider value={{item,index}} key={index}>
            {React.Children.map(children, (item2) => {
              return React.cloneElement(item2, {
              });
            })}
          </CnStatisticCardProContext.Provider>
        })}
      </div>;
    }
  return null;
};
CnStatisticCardPro.displayName = 'CnStatisticCardPro';

const CnStatisticLeftSide = (props) => {
  const {
    _context,
    children,
  } = props;

  return <div className="cn-statistic-card-pro-left-side">
    {children}
  </div>;
};
CnStatisticLeftSide.displayName = 'CnStatisticLeftSide';

const CnStatisticContent = (props) => {
  const {
    _context,
    children,
  } = props;

  return <div className="cn-statistic-card-pro-content">
    {children}
  </div>;
};
CnStatisticContent.displayName = 'CnStatisticContent';

const CnStatisticHeader = (props) => {
  const {
    _context,
    children,
  } = props;

  return <div className="cn-statistic-card-pro-header">
    {children}
  </div>;
};
CnStatisticHeader.displayName = 'CnStatisticHeader';


const CnStatisticTitle = (props) => {
  const {
    _context,
    children,
  } = props;

  return <div className="cn-statistic-card-pro-">
    {handleFormatChildren(children, {
      ...React.useContext(CnStatisticCardProContext),
      state: _context?.state,
    })}
  </div>;
};
CnStatisticTitle.displayName = 'CnStatisticTitle';

const CnStatisticAction = (props) => {
  const {
    _context,
    children,
  } = props;

  return <div className="cn-statistic-card-pro-">
    {children}
  </div>;
};
CnStatisticAction.displayName = 'CnStatisticAction';

const CnStatisticValue = (props) => {
  const {
    _context,
    children,
  } = props;

  return <div className="cn-statistic-card-pro-">
    {children}
  </div>;
};
CnStatisticValue.displayName = 'CnStatisticValue';
export default [CnStatisticCardPro,CnStatisticLeftSide, CnStatisticContent, CnStatisticHeader,CnStatisticTitle,CnStatisticAction,CnStatisticValue];

export { CnStatisticCardPro,CnStatisticLeftSide,CnStatisticContent,CnStatisticHeader,CnStatisticTitle,CnStatisticAction,CnStatisticValue };