@flatbiz/antd/dist/tag-list-Z6yWz3Id.js

/*! @flatjs/forge MIT @flatbiz/antd */

import { b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { useMemo, Fragment } from 'react';
import { Tag, Popover } from 'antd';
import { toArray, isUndefinedOrNull, valueIsEqual } from '@flatbiz/utils';
import { jsx, jsxs } from 'react/jsx-runtime';

/**
 * 在列表数据dataList中通过value匹配数据，以Tag形式展示
 * ```
 *  1. forceMatch: 是否强制匹配（默认值false）
 *     - false: 匹配不到显示value值，
 *     - true：匹配不到不显示
 *  2. value 与 dataList中label、value任一相等，都可匹配
 *
 *  用法1：
 *  <TagListRender
 *    dataList=[{ label: '启用', value: 1 }]
 *    colorMap={{ 1:'red', 2: 'blue'}}
 *    value={1} />
 *  =>
 *  <Tag color={'red'}>启用</Tag>
 *
 *  用法2
 *  <TagListRender
 *    dataList=[{ label: '启用', value: 1. color: 'red' }]
 *    value="启用" />
 *  =>
 *  <Tag color={'red'}>启用</Tag>
 * ```
 */
var _TagListRender = function TagListRender(props) {
  var valueList = toArray(props.value);
  var maxShowCount = props.maxShowCount || 0;
  var tagList = useMemo(function () {
    if (isUndefinedOrNull(props.value)) {
      return [];
    }
    return valueList.map(function (value) {
      var _props$dataList;
      var target = (_props$dataList = props.dataList) === null || _props$dataList === void 0 ? void 0 : _props$dataList.find(function (item) {
        return valueIsEqual(item.value, value) || item.label === value;
      });
      if (target) {
        var _props$colorMap;
        return {
          label: target.label || target.value,
          color: ((_props$colorMap = props.colorMap) === null || _props$colorMap === void 0 ? void 0 : _props$colorMap[String(target.value)]) || target.color,
          value: value
        };
      }
      if (props.forceMatch) {
        return undefined;
      }
      return {
        label: "".concat(value),
        color: undefined,
        value: value
      };
    }).filter(Boolean);
  }, [props.colorMap, props.dataList, props.forceMatch, props.value, valueList]);
  if (tagList.length === 0) {
    return /*#__PURE__*/jsx(Fragment, {
      children: props.value
    });
  }
  var newTagList = tagList.slice(0, maxShowCount || tagList.length);
  var popoverTagList = newTagList.length < tagList.length ? props.foldShowAllTag ? tagList : tagList.slice(maxShowCount, tagList.length) : [];
  return /*#__PURE__*/jsxs(Fragment, {
    children: [newTagList.map(function (item, index) {
      return /*#__PURE__*/jsx(Tag, {
        color: item.color,
        style: index === newTagList.length - 1 ? {
          margin: '0'
        } : {
          marginRight: 5
        },
        children: item.label
      }, index);
    }), popoverTagList.length > 0 ? /*#__PURE__*/jsx(Popover, {
      content: /*#__PURE__*/jsx(_TagListRender, _objectSpread2(_objectSpread2({}, props), {}, {
        value: popoverTagList.map(function (item) {
          return item.value;
        }),
        dataList: popoverTagList,
        maxShowCount: undefined
      })),
      children: /*#__PURE__*/jsx(Tag, {
        color: "blue",
        style: {
          marginLeft: 5,
          cursor: 'pointer'
        },
        children: "..."
      })
    }) : null]
  });
};
_TagListRender.defaultProps = {
  forceMatch: false
};

export { _TagListRender as _ };
//# sourceMappingURL=tag-list-Z6yWz3Id.js.map