@cainiaofe/cn-ui-charts/es/lowcode/cn-statistic-card/statisticcard-view.js

菜鸟图表组件

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["bgColor", "key"];
var _this = this;
import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import { CnStatisticCard as UICnStatisticCard } from "../../components/cn-statistic-card";
import { CnList, CnBox } from '@alife/cn-ui';
import { dataOriginDataEasy } from "../../common/util/const";
import { calculateTextExprValue, executeFunction, getLowCodeCoreUtil, getRealData, isArrayNotEmpty, isDesignMode, makeChartRequestConfig, setDataToDs } from "../../common/util/util";
import isPlainObject from 'lodash/isPlainObject';
import { makeRequest } from "../../common/util/request";
import { Loading } from "../cn-column-chart/components/loading";
import { EmptyData } from "../cn-column-chart/components/empty-data";
import useFilterSearchListener from "../cn-column-chart/hooks/useFilterSearchListener";
import useStopLoop from "../cn-column-chart/hooks/useStopLoop";
import { __statisticCard_activeKey__, __statisticCard_currentItem__ } from "../../common/util/expr-const";
import { CnFilterDefaultValueFinished, CnFilterOnSearch, emitEvent } from "../../common/util/event";
var CnStatisticCard = /*#__PURE__*/forwardRef(function (props, ref) {
  var _ref = props || {},
    dataFrom = _ref.dataFrom,
    _context = _ref._context,
    filterConfig = _ref.filterConfig,
    dataOrigin = _ref.dataOrigin,
    dataSource = _ref.dataSource,
    normalStyle = _ref.normalStyle,
    activeKey = _ref.activeKey,
    _dataSourceName = _ref._dataSourceName,
    _dataSource = _ref._dataSource,
    events = _ref.events,
    extra = _ref.extra;
  var _ref2 = dataFrom || {},
    requestConfig = _ref2.requestConfig;
  var _ref3 = normalStyle || {},
    customTooltip = _ref3.customTooltip,
    cardType = _ref3.cardType,
    layout = _ref3.layout,
    bgColor = _ref3.bgColor,
    mode = _ref3.mode,
    col = _ref3.col,
    size = _ref3.size;
  var isDesign = isDesignMode(props);
  var _useState = useState(false),
    forceUpdate = _useState[0],
    setForceUpdate = _useState[1];
  // 首次请求
  var _useState2 = useState(0),
    requestCount = _useState2[0],
    setRequestCount = _useState2[1];
  var _useState3 = useState(function () {
      if (dataOrigin !== 'request') {
        var temp;
        if (activeKey) {
          temp = calculateTextExprValue(activeKey, {
            state: _context === null || _context === void 0 ? void 0 : _context.state,
            recordDataSource: {}
          });
        }
        if (mode === 'single') {
          var _temp;
          return (_temp = temp) === null || _temp === void 0 ? void 0 : _temp[0];
        }
        return temp;
      }
    }),
    tempActiveKeys = _useState3[0],
    setTempActiveKeys = _useState3[1];
  var handleDataSource = function handleDataSource() {
    var result = [];
    if (typeof dataSource === 'function') {
      var ds = calculateTextExprValue(dataSource, {
        state: _context === null || _context === void 0 ? void 0 : _context.state,
        recordDataSource: {}
      });
      if (isArrayNotEmpty(ds)) {
        result = ds;
      }
    } else if (isArrayNotEmpty(dataSource)) {
      var _dataSource$forEach;
      dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$forEach = dataSource.forEach) === null || _dataSource$forEach === void 0 ? void 0 : _dataSource$forEach.call(dataSource, function (item) {
        var _ref4 = item || {},
          bgColor = _ref4.bgColor,
          key = _ref4.key,
          rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
        var temp = {
          statistic: _extends({}, rest),
          key: key
        };
        if (bgColor) {
          temp.bgColor = bgColor;
        }
        result.push(temp);
      });
    }
    return result;
  };
  var _useState4 = useState(function () {
      if (dataOrigin === 'static') {
        var tempData = handleDataSource();
        setTimeout(function () {
          emitEvent(CnFilterDefaultValueFinished, {
            componentProps: props,
            formValues: tempData
          });
        });
        return tempData;
      }
      return [];
    }),
    listData = _useState4[0],
    setListData = _useState4[1];
  var _useState5 = useState(function () {
      if (dataOrigin !== 'request') {
        if (mode === 'multiple') {
          return listData === null || listData === void 0 ? void 0 : listData.filter(function (item) {
            return tempActiveKeys === null || tempActiveKeys === void 0 ? void 0 : tempActiveKeys.includes(item === null || item === void 0 ? void 0 : item.key);
          });
        } else if (mode === 'single') {
          return listData.find(function (item) {
            return (item === null || item === void 0 ? void 0 : item.key) === tempActiveKeys;
          });
        }
      }
    }),
    tempActiveItems = _useState5[0],
    setTempActiveItems = _useState5[1];
  var setDataSource = function setDataSource(data) {
    if (data) {
      setDataToDs({
        _context: _context,
        _dataSource: _dataSource,
        _dataSourceName: _dataSourceName,
        data: data
      });
    }
  };
  useEffect(function () {
    var _setDataSource;
    setDataSource((_setDataSource = {}, _setDataSource[__statisticCard_activeKey__] = tempActiveKeys, _setDataSource[__statisticCard_currentItem__] = tempActiveItems, _setDataSource));
  }, []);
  useImperativeHandle(ref, function () {
    return {
      reRender: function reRender() {
        if (dataOrigin === 'static') {
          setListData(handleDataSource());
        }
        setForceUpdate(Date.now());
      }
    };
  });
  useEffect(function () {
    if (dataOrigin === 'static' && isDesign) {
      setLoading(false);
      setListData(handleDataSource());
    }
  }, [dataSource, dataOrigin]);
  var _useState6 = useState(function () {
      if (dataOrigin === 'static') {
        return false;
      }
    }),
    loading = _useState6[0],
    setLoading = _useState6[1];
  var _ref5 = requestConfig || {},
    serviceType = _ref5.serviceType,
    guid = _ref5.guid,
    fieldList = _ref5.fieldList;
  var _ref6 = filterConfig || {},
    _bindFilter = _ref6._bindFilter;
  var sendRequest = function sendRequest(config) {
    if (requestConfig && requestConfig.serviceType) {
      var realRequestConfig = makeChartRequestConfig({
        requestConfig: requestConfig,
        _context: _context,
        filterConfig: filterConfig,
        isDesign: isDesign
      });
      var _ref7 = config || {},
        needLoading = _ref7.needLoading;
      if (needLoading !== false) {
        setLoading(true);
      }
      makeRequest === null || makeRequest === void 0 ? void 0 : makeRequest(realRequestConfig).then(function (res) {
        var _getLowCodeCoreUtil;
        var data = getRealData(realRequestConfig, res, _context);
        var remoteList = [];
        if (serviceType === dataOriginDataEasy) {
          var _ref8 = data || {},
            value = _ref8.value,
            _activeKey = _ref8.activeKey;
          if (isArrayNotEmpty(value) && isPlainObject(value[0])) {
            var tempData = value[0];
            if (isArrayNotEmpty(fieldList)) {
              fieldList.forEach(function (item) {
                var fieldName = item.fieldName;
                if (fieldName && tempData[fieldName] !== undefined) {
                  remoteList.push({
                    statistic: {
                      title: fieldName,
                      value: tempData[fieldName]
                    }
                  });
                }
              });
              setListData(remoteList);
            }
          }
        } else {
          remoteList = data === null || data === void 0 ? void 0 : data.value;
          if (typeof customTooltip === 'function') {
            var _remoteList;
            (_remoteList = remoteList) === null || _remoteList === void 0 ? void 0 : _remoteList.forEach(function (item) {
              if (item !== null && item !== void 0 && item.statistic) {
                var tempTip = executeFunction(customTooltip, item, _context === null || _context === void 0 ? void 0 : _context.state);
                if (tempTip) {
                  item.statistic.tip = tempTip;
                }
              }
            });
          }
          setListData(remoteList || []);
        }
        var remoteActiveKey = data === null || data === void 0 ? void 0 : data.activeKey;
        if (remoteActiveKey !== undefined) {
          var _setDataSource2;
          var remoteActiveItem;
          if (mode === 'multiple') {
            var _remoteList2;
            remoteActiveItem = (_remoteList2 = remoteList) === null || _remoteList2 === void 0 ? void 0 : _remoteList2.filter(function (item) {
              return remoteActiveKey === null || remoteActiveKey === void 0 ? void 0 : remoteActiveKey.includes(item === null || item === void 0 ? void 0 : item.key);
            });
          } else if (mode === 'single') {
            remoteActiveItem = remoteList.find(function (item) {
              return (item === null || item === void 0 ? void 0 : item.key) === remoteActiveKey;
            });
          }
          setDataSource((_setDataSource2 = {}, _setDataSource2[__statisticCard_activeKey__] = remoteActiveKey, _setDataSource2[__statisticCard_currentItem__] = remoteActiveItem, _setDataSource2));
          setTempActiveKeys(remoteActiveKey);
        }
        setLoading(false);
        (_getLowCodeCoreUtil = getLowCodeCoreUtil('util.executeEventWithoutJS')) === null || _getLowCodeCoreUtil === void 0 ? void 0 : _getLowCodeCoreUtil({
          eventType: 'onStatisticCardRequestFinish',
          events: events,
          _context: _context,
          position: getLowCodeCoreUtil('enumMap.ButtonPosition.statisticCardEvent'),
          recordDataSource: {}
        });
        if (requestCount === 0) {
          emitEvent(CnFilterDefaultValueFinished, {
            componentProps: props,
            formValues: remoteList
          });
        }
        setRequestCount(requestCount + 1);
      }, function () {
        var _getLowCodeCoreUtil2;
        setLoading(false);
        (_getLowCodeCoreUtil2 = getLowCodeCoreUtil('util.executeEventWithoutJS')) === null || _getLowCodeCoreUtil2 === void 0 ? void 0 : _getLowCodeCoreUtil2({
          eventType: 'onStatisticCardRequestFinish',
          events: events,
          _context: _context,
          position: getLowCodeCoreUtil('enumMap.ButtonPosition.statisticCardEvent'),
          recordDataSource: {}
        });
        setRequestCount(requestCount + 1);
      });
    }
  };
  var setActiveKey = function setActiveKey(tempKey, item) {
    var _setDataSource3, _getLowCodeCoreUtil3;
    var newKeys;
    var newItems;
    if (mode === 'multiple') {
      if (tempActiveKeys !== null && tempActiveKeys !== void 0 && tempActiveKeys.includes(tempKey)) {
        newKeys = tempActiveKeys.filter(function (item) {
          return item !== tempKey;
        });
        newItems = tempActiveItems.filter(function (item) {
          return (item === null || item === void 0 ? void 0 : item.key) !== tempKey;
        });
      } else {
        newKeys = [].concat(tempActiveKeys, [tempKey]);
        newItems = [].concat(tempActiveItems, [item]);
      }
    } else if (mode === 'single') {
      if (tempKey && tempActiveKeys === tempKey) {
        newKeys = undefined;
        newItems = undefined;
      } else {
        newKeys = tempKey;
        newItems = item;
      }
    }
    setDataSource((_setDataSource3 = {}, _setDataSource3[__statisticCard_activeKey__] = newKeys, _setDataSource3[__statisticCard_currentItem__] = newItems, _setDataSource3));
    setTempActiveKeys(newKeys);
    (_getLowCodeCoreUtil3 = getLowCodeCoreUtil('util.executeEventWithoutJS')) === null || _getLowCodeCoreUtil3 === void 0 ? void 0 : _getLowCodeCoreUtil3({
      eventType: 'onStatisticCardClick',
      events: events,
      _context: _context,
      position: getLowCodeCoreUtil('enumMap.ButtonPosition.statisticCardEvent'),
      recordDataSource: {}
    });
    emitEvent(CnFilterOnSearch, {
      componentProps: props,
      payload: {}
    });
  };
  useFilterSearchListener({
    _bindFilter: _bindFilter,
    sendRequest: sendRequest,
    _context: _context
  });
  useStopLoop({
    _nodeId: props === null || props === void 0 ? void 0 : props._nodeId
  });
  var listProps = {};
  var listItemStyle = {
    height: '100%'
  };
  var statisticCardProps = {
    bgColor: bgColor
  };
  if (cardType === 'noBorder') {
    statisticCardProps.noBorder = true;
    statisticCardProps.noPadding = true;
  }
  if (layout === 'flex') {
    if (typeof col === 'number') {
      listItemStyle.padding = '0 8px 8px 0';
      listProps.horizontalConfig = {
        flex: true,
        flexWrap: true,
        flexColSpan: 24 / col
      };
    } else {
      listItemStyle.padding = '0 8px 8px 0';
      listProps.horizontalConfig = {
        flex: true,
        flexWrap: true
      };
    }
  } else if (typeof layout === 'number') {
    listItemStyle.padding = '0 8px 8px 0';
    listProps.horizontalConfig = {
      flex: true,
      flexWrap: true,
      flexColSpan: 24 / layout
    };
  } else if (layout === 'grid') {
    if (size) {
      listProps.horizontalConfig = {
        size: size
      };
    }
  }
  if (loading === false && CnList) {
    if (isDesign && !isArrayNotEmpty(listData)) {
      return /*#__PURE__*/React.createElement(EmptyData, {
        emptyImg: 'https://img.alicdn.com/imgextra/i4/O1CN01LpzZuD1lq3HX0GbCk_!!6000000004869-55-tps-502-261.svg'
      });
    }
    return /*#__PURE__*/React.createElement(CnList, _extends({}, listProps, {
      className: 'l2-cn-list-wrap',
      dataSource: listData,
      renderItem: function renderItem(item, index) {
        var _getLowCodeCoreUtil4;
        var _ref9 = item || {},
          key = _ref9.key;
        var isActive;
        if (mode === 'multiple') {
          isActive = key && (tempActiveKeys === null || tempActiveKeys === void 0 ? void 0 : tempActiveKeys.includes(key));
        } else if (mode === 'single') {
          isActive = key && tempActiveKeys === key;
        }
        if (mode === 'single' || mode === 'multiple') {
          statisticCardProps.onClick = setActiveKey.bind(_this, key, item);
        }
        var extraDom = (_getLowCodeCoreUtil4 = getLowCodeCoreUtil('util.makeButtons')) === null || _getLowCodeCoreUtil4 === void 0 ? void 0 : _getLowCodeCoreUtil4({
          buttons: extra === null || extra === void 0 ? void 0 : extra.map(function (item) {
            return _extends({}, item, {
              size: 'small',
              position: getLowCodeCoreUtil('enumMap.ButtonPosition.statisticCardRightButton'),
              children: item === null || item === void 0 ? void 0 : item.children
            });
          }),
          _context: _context,
          state: _context === null || _context === void 0 ? void 0 : _context.state,
          recordDataSource: item,
          extraParamList: {
            recordDataSource: item
          }
        });
        if (isArrayNotEmpty(extraDom)) {
          statisticCardProps.action = /*#__PURE__*/React.createElement(CnBox, {
            spacing: 8,
            direction: "row"
          }, extraDom);
        }
        return /*#__PURE__*/React.createElement(CnList.Item, {
          style: listItemStyle,
          key: index
        }, /*#__PURE__*/React.createElement(UICnStatisticCard, _extends({
          active: isActive
        }, item, statisticCardProps, {
          style: {
            width: '100%',
            height: '100%'
          }
        })));
      }
    }));
  }
  if (isDesign && loading === undefined) {
    return /*#__PURE__*/React.createElement(CnList, _extends({}, listProps, {
      dataSource: [{
        statistic: {
          title: '示例数据',
          value: 0
        }
      }],
      renderItem: function renderItem(item, index) {
        return /*#__PURE__*/React.createElement(CnList.Item, {
          style: {
            listItemStyle: listItemStyle
          },
          className: 'l2-cn-list-item',
          key: index
        }, /*#__PURE__*/React.createElement(UICnStatisticCard, _extends({}, statisticCardProps, {
          style: {
            width: '100%'
          }
        }, item)));
      }
    }));
  }
  if (loading === true) {
    return /*#__PURE__*/React.createElement(Loading, null);
  }
  return null;
});
CnStatisticCard.displayName = 'CnStatisticCard';
export default CnStatisticCard;
export { CnStatisticCard };