@flatbiz/antd/dist/label-value-BawoCisD.js

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

import { hooks } from '@wove/react/hooks';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { b as _objectSpread2, a as _slicedToArray } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { useState, useMemo, isValidElement } from 'react';
import { arrayTotal, isUndefinedOrNull, isNumber } from '@flatbiz/utils';
import { BoxGrid } from './box-grid/index.js';
import { fbaHooks } from './fba-hooks/index.js';
import { T as TextOverflow } from './text-overflow-Bk9MC6Cg.js';
import { T as TextSymbolWrapper } from './symbol-CX0y_DJ4.js';
import { T as TipsWrapper } from './tips-wrapper-Bf9nfZq3.js';
import { jsx, jsxs } from 'react/jsx-runtime';

var getRenderGrid = function getRenderGrid(dataList) {
  var results = [];
  var currentSum = 0;
  var currentArr = [];
  for (var i = 0; i < dataList.length; i++) {
    var item = dataList[i];
    var grid = item.grid;
    var temp = _objectSpread2(_objectSpread2({}, item), {}, {
      grid: grid
    });
    if (currentSum + grid <= 24 && grid > 0) {
      currentSum += grid;
      currentArr.push(temp);
    } else {
      results.push(currentArr);
      currentSum = grid;
      currentArr = [temp];
    }
  }
  if (currentArr.length > 0) {
    results.push(currentArr);
  }
  if (results.length > 0) {
    results = results.map(function (item, index) {
      if (item.length === 1) {
        item[0].grid = 24;
      } else {
        var total = arrayTotal(item, 'grid');
        var lastItem = item[item.length - 1];
        if (total < 24) {
          lastItem.grid = 24 - total + lastItem.grid;
        }
      }
      if (index === results.length - 1) {
        return item.map(function (temp) {
          temp.isLast = true;
          return temp;
        });
      }
      return item;
    });
  }
  var resultsFt = [];
  results.forEach(function (item) {
    resultsFt = resultsFt.concat(item);
  });
  return resultsFt;
};

/**
 * label+value 列表布局
 * ```
 * 1. 可设置超出隐藏、必填标识、设置隐藏、添加说明标签等功能
 * 2. 可自定义设置占用网格列数
 * 3. 内置响应式布局
 * ```
 */
var LabelValueRender = function LabelValueRender(props) {
  var screenType = fbaHooks.useResponsivePoint() || '';
  var _useState = useState(),
    _useState2 = _slicedToArray(_useState, 2),
    breakpoint = _useState2[0],
    setBreakpoint = _useState2[1];
  var column = props.column,
    forceColumn = props.forceColumn,
    labelAlign = props.labelAlign,
    labelWidth = props.labelWidth,
    options = props.options,
    border = props.border,
    bordered = props.bordered,
    width = props.width,
    _props$size = props.size,
    size = _props$size === void 0 ? 'default' : _props$size,
    _props$direction = props.direction,
    direction = _props$direction === void 0 ? 'auto' : _props$direction,
    gutter = props.gutter,
    hiddenValueHover = props.hiddenValueHover;
  var columnNew = column && [1, 2, 3, 4, 6].includes(column) ? column : 4;
  var borderedNew = !isUndefinedOrNull(bordered) ? bordered : border;
  var directionNew = useMemo(function () {
    if (direction === 'horizontal' || direction === 'vertical') return direction;
    if (screenType === 'xs' || breakpoint === 'xs') return 'vertical';
    return 'horizontal';
  }, [breakpoint, direction, screenType]);
  var ellipsis = useMemo(function () {
    if (directionNew === 'vertical') return true;
    return isUndefinedOrNull(props.ellipsis) ? true : props.ellipsis;
  }, [directionNew, props.ellipsis]);
  var labelWidthNew = labelWidth ? isNumber(labelWidth) ? "".concat(labelWidth, "px") : labelWidth : '100px';
  var gridSize = useMemo(function () {
    if (forceColumn) {
      var num = 24 / forceColumn;
      return {
        xs: num,
        sm: num,
        md: num,
        lg: num,
        xl: num,
        xxl: num
      };
    }
    var columnMap = {
      1: {
        xs: 24,
        sm: 24,
        md: 24,
        lg: 24,
        xl: 24,
        xxl: 24
      },
      2: {
        xs: 24,
        sm: 12,
        md: 12,
        lg: 12,
        xl: 12,
        xxl: 12
      },
      3: {
        xs: 24,
        sm: 12,
        md: 12,
        lg: 8,
        xl: 8,
        xxl: 8
      },
      4: {
        xs: 24,
        sm: 12,
        md: 12,
        lg: 6,
        xl: 6,
        xxl: 6
      },
      6: {
        xs: 24,
        sm: 12,
        md: 8,
        lg: 6,
        xl: 4,
        xxl: 4
      }
    };
    return columnMap[columnNew];
  }, [columnNew, forceColumn]);
  var renderList = useMemo(function () {
    if (!breakpoint) return undefined;
    var dataListNew = [];
    options.forEach(function (item) {
      if (!item.hidden) {
        var grid = undefined;
        if (item.span) {
          var itemSpan = item.span > columnNew ? columnNew : item.span;
          grid = itemSpan * (24 / columnNew);
          if (breakpoint === 'xs') {
            grid = 24;
          } else if (breakpoint === 'sm') {
            grid = grid > 12 ? grid : 12;
          }
        }
        dataListNew.push(_objectSpread2(_objectSpread2({}, item), {}, {
          grid: grid ? grid : gridSize[breakpoint]
        }));
      }
    });
    return getRenderGrid(dataListNew.filter(Boolean));
  }, [breakpoint, columnNew, gridSize, options]);
  var showColon = !borderedNew && directionNew !== 'vertical';
  var getFormRowChildren = function getFormRowChildren() {
    return renderList === null || renderList === void 0 ? void 0 : renderList.map(function (item, index) {
      var ellipsisFt = directionNew === 'vertical' ? true : isUndefinedOrNull(item.ellipsis) ? ellipsis : item.ellipsis;
      var labelContent = item.label;
      // let labelContent: ReactElement | string = isValidElement(item.label)
      //   ? item.label
      //   : `${item.label}${colon}`;
      // if (colon) {
      //   labelContent = isValidElement(item.label)
      //     ? item.label
      //     : `${item.label}${colon}`;
      // }

      if (item.tips && ellipsisFt) {
        labelContent = /*#__PURE__*/jsx(TipsWrapper, {
          tipType: "tooltip",
          tooltipProps: {
            title: item.tips
          },
          children: /*#__PURE__*/jsx(TextOverflow, {
            text: labelContent,
            hideTip: item.hideTip
          })
        });
      } else if (item.tips) {
        labelContent = /*#__PURE__*/jsx(TipsWrapper, {
          tipType: "tooltip",
          tooltipProps: {
            title: item.tips
          },
          children: labelContent
        });
      } else if (ellipsisFt) {
        labelContent = /*#__PURE__*/jsx(TextOverflow, {
          text: labelContent,
          hideTip: item.hideTip
        });
      }
      var innerlabelStyle = showColon ? {
        display: 'flex',
        gap: 3
      } : {};
      return /*#__PURE__*/jsxs(BoxGrid.Col, _objectSpread2(_objectSpread2({}, gridSize), {}, {
        span: item.grid,
        className: classNames('label-value-tr', {
          'label-value-last-tr': item.isLast
        }),
        children: [/*#__PURE__*/jsxs("div", {
          className: "label-value-label",
          style: _objectSpread2(_objectSpread2(_objectSpread2({}, innerlabelStyle), props.labelStyle), item.labelStyle),
          children: [item.required ? /*#__PURE__*/jsx("div", {
            style: {
              paddingLeft: 8,
              position: 'relative',
              width: '100%'
            },
            children: /*#__PURE__*/jsx(TextSymbolWrapper, {
              text: labelContent,
              symbolType: "required"
            })
          }) : labelContent, showColon ? /*#__PURE__*/jsx("div", {
            children: ":"
          }) : null]
        }), ! /*#__PURE__*/isValidElement(item.value) && ellipsisFt && !item.valueNoWrapper ? /*#__PURE__*/jsx("div", {
          className: "label-value-value",
          style: _objectSpread2(_objectSpread2({}, props.valueStyle), item.valueStyle),
          children: /*#__PURE__*/jsx(TextOverflow, {
            text: item.value,
            onClick: item.onClick,
            hideTip: item.hideTip
          })
        }) : /*#__PURE__*/jsx("div", {
          className: "label-value-value",
          style: _objectSpread2(_objectSpread2({
            wordBreak: 'break-all'
          }, props.valueStyle), item.valueStyle),
          children: item.onClick ? /*#__PURE__*/jsx("a", {
            onClick: item.onClick,
            children: item.value
          }) : item.value
        })]
      }), index);
    }).filter(Boolean);
  };
  var onBoxBreakpointChange = hooks.useCallbackRef(function (breakpoint) {
    setBreakpoint(breakpoint);
  });
  var innerStyle = useMemo(function () {
    /** 小屏幕不控制宽度 */
    if (['xs', 'sm'].includes(screenType) || !width) {
      return {};
    }
    return {
      width: width
    };
  }, [screenType, width]);
  var align = function () {
    if (labelAlign) return labelAlign;
    if (borderedNew) return 'left';
    if (directionNew === 'horizontal') return 'right';
    return 'left';
  }();
  return /*#__PURE__*/jsx(BoxGrid.Row, {
    style: _objectSpread2(_objectSpread2(_objectSpread2({}, innerStyle), props.style), {}, {
      '--lvr-label-width': directionNew === 'horizontal' ? labelWidthNew : undefined
    }),
    className: classNames('label-value-render', "lvr-".concat(directionNew), "lvr-size-".concat(size), "lvr-label-".concat(align), {
      'lvr-border': borderedNew
    }, {
      'lvr-hidden-hover': hiddenValueHover
    }, props.className),
    gutter: borderedNew ? [0, 0] : gutter || [10, 0],
    onBoxBreakpointChange: onBoxBreakpointChange,
    children: getFormRowChildren()
  });
};

export { LabelValueRender as L };
//# sourceMappingURL=label-value-BawoCisD.js.map