antd/lib/border-beam/BorderBeam.js

An enterprise-class UI design language and React components implementation

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _cssinjs = require("@ant-design/cssinjs");
var _util = require("@rc-component/util");
var _clsx = require("clsx");
var _is = require("../_util/is");
var _warning = require("../_util/warning");
var _context = require("../config-provider/context");
var _genStyleUtils = require("../theme/util/genStyleUtils");
var _BorderBeamEffect = _interopRequireDefault(require("./BorderBeamEffect"));
var _useBorderSize = _interopRequireDefault(require("./hooks/useBorderSize"));
var _useChildDom = _interopRequireDefault(require("./hooks/useChildDom"));
var _style = _interopRequireDefault(require("./style"));
var _util2 = require("./util");
const getInset = width => {
  return (0, _is.isString)(width) ? `calc(-1 * ${width})` : `-${width}px`;
};
const BorderBeam = props => {
  const {
    prefixCls: customizePrefixCls,
    className,
    style,
    children,
    color,
    count,
    duration,
    items,
    lineWidth,
    outset,
    size
  } = props;
  const {
    className: contextClassName,
    style: contextStyle,
    getPrefixCls
  } = (0, _context.useComponentConfig)('borderBeam');
  // ============================ Prefix ============================
  const prefixCls = getPrefixCls('border-beam', customizePrefixCls);
  const [hashId, cssVarCls] = (0, _style.default)(prefixCls);
  const [varName] = (0, _genStyleUtils.genCssVar)(getPrefixCls(), 'border-beam');
  // ============================= Host =============================
  const [childNode, childDomNode] = (0, _useChildDom.default)(children);
  const borderWidth = (0, _useBorderSize.default)(childDomNode);
  const beamGradient = (0, _react.useMemo)(() => (0, _util2.getBorderBeamGradient)(color), [color]);
  const mergedCount = items?.length ?? ((0, _is.isNumber)(count) && Number.isFinite(count) && count >= 1 ? Math.floor(count) : 1);
  const hasValidDuration = (0, _is.isNumber)(duration) && duration > 0;
  const mergedDuration = hasValidDuration ? duration : _util2.DEFAULT_BORDER_BEAM_DURATION;
  // ============================ Warning ============================
  if (process.env.NODE_ENV !== 'production') {
    const warning = (0, _warning.devUseWarning)('BorderBeam');
    process.env.NODE_ENV !== "production" ? warning(!(0, _util.isNonNullable)(items) || !(0, _util.isNonNullable)(count), 'usage', '`count` is ignored when `items` is provided.') : void 0;
  }
  // ============================ Border ============================
  const insetOffset = (0, _react.useMemo)(() => {
    return (0, _util.isNonNullable)(outset) ? getInset(outset) : borderWidth.map(getInset).join(' ');
  }, [borderWidth, outset]);
  const beamClassName = (0, _clsx.clsx)(contextClassName, className, hashId, cssVarCls);
  // ============================ Render ============================
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childNode, Array.from({
    length: mergedCount
  }, (_, index) => {
    const item = items?.[index] ?? {};
    const beamPhase = index / mergedCount;
    const beamKey = `${mergedCount}-${beamPhase}`;
    const itemBeamGradient = item.color ? (0, _util2.getBorderBeamGradient)(item.color) : beamGradient;
    const itemLineWidth = item.lineWidth ?? lineWidth;
    const itemSize = item.size ?? size;
    const itemInsetOffset = (0, _util.isNonNullable)(item.outset) ? getInset(item.outset) : insetOffset;
    return /*#__PURE__*/_react.default.createElement(_BorderBeamEffect.default, {
      key: beamKey,
      prefixCls: prefixCls,
      hostDom: childDomNode,
      className: beamClassName,
      style: {
        ...contextStyle,
        ...style,
        ...(itemBeamGradient && {
          [varName('beam-gradient')]: itemBeamGradient
        }),
        ...(hasValidDuration && {
          [varName('duration')]: `${duration}s`
        }),
        ...((0, _util.isNonNullable)(itemLineWidth) && {
          [varName('line-width')]: (0, _cssinjs.unit)(itemLineWidth)
        }),
        ...((0, _util.isNonNullable)(itemSize) && {
          [varName('size')]: (0, _cssinjs.unit)(itemSize)
        }),
        ...(beamPhase > 0 && {
          [varName('delay')]: `${-mergedDuration * beamPhase}s`
        }),
        [varName('inset-offset')]: itemInsetOffset
      }
    });
  }));
};
if (process.env.NODE_ENV !== 'production') {
  BorderBeam.displayName = 'BorderBeam';
}
var _default = exports.default = BorderBeam;