@ant-design/x/lib/think/Think.js

Craft AI-driven interfaces effortlessly

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _icons = require("@ant-design/icons");
var _motion = _interopRequireDefault(require("@rc-component/motion"));
var _useMergedState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMergedState"));
var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
var _clsx = require("clsx");
var _react = _interopRequireDefault(require("react"));
var _useProxyImperativeHandle = _interopRequireDefault(require("../_util/hooks/use-proxy-imperative-handle"));
var _useXComponentConfig = _interopRequireDefault(require("../_util/hooks/use-x-component-config"));
var _motion2 = _interopRequireDefault(require("../_util/motion"));
var _xProvider = require("../x-provider");
var _think = _interopRequireDefault(require("./icons/think"));
var _style = _interopRequireDefault(require("./style"));
const StatusIcon = ({
  loading,
  icon
}) => {
  if (loading) {
    return loading === true ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) : loading;
  }
  return icon || /*#__PURE__*/_react.default.createElement(_think.default, null);
};
const Think = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    prefixCls: customizePrefixCls,
    style,
    styles = {},
    className,
    rootClassName,
    classNames = {},
    children,
    title,
    icon,
    loading,
    defaultExpanded = true,
    expanded,
    onExpand,
    blink,
    ...restProps
  } = props;

  // ============================ Prefix ============================

  const {
    direction,
    getPrefixCls
  } = (0, _xProvider.useXProviderContext)();
  const prefixCls = getPrefixCls('think', customizePrefixCls);
  const [hashId, cssVarCls] = (0, _style.default)(prefixCls);

  // ======================= Component Config =======================

  const contextConfig = (0, _useXComponentConfig.default)('think');
  const domProps = (0, _pickAttrs.default)(restProps, {
    attr: true,
    aria: true,
    data: true
  });

  // ============================= Refs =============================
  const thinkRef = _react.default.useRef(null);
  (0, _useProxyImperativeHandle.default)(ref, () => {
    return {
      nativeElement: thinkRef.current
    };
  });
  const mergedCls = (0, _clsx.clsx)(prefixCls, contextConfig.className, className, rootClassName, classNames.root, hashId, cssVarCls, {
    [`${prefixCls}-rtl`]: direction === 'rtl'
  });

  // ============================  Collapsible ============================

  const [isExpand, setIsExpand] = (0, _useMergedState.default)(defaultExpanded, {
    value: expanded,
    onChange: onExpand
  });
  const collapseMotion = {
    ...(0, _motion2.default)(),
    motionAppear: false,
    leavedClassName: `${prefixCls}-content-hidden`
  };

  // ============================ Render ============================
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    ref: thinkRef
  }, domProps, {
    className: mergedCls,
    style: {
      ...contextConfig.style,
      ...contextConfig.styles.root,
      ...style,
      ...styles.root
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.clsx)(`${prefixCls}-status-wrapper`, classNames.status),
    onClick: () => setIsExpand(!isExpand),
    style: styles.status
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: `${prefixCls}-status-icon`
  }, /*#__PURE__*/_react.default.createElement(StatusIcon, {
    loading: loading,
    icon: icon
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.clsx)(`${prefixCls}-status-text`, {
      [`${prefixCls}-motion-blink`]: blink
    })
  }, title), /*#__PURE__*/_react.default.createElement(_icons.RightOutlined, {
    className: `${prefixCls}-status-down-icon`,
    rotate: isExpand ? 90 : 0
  })), /*#__PURE__*/_react.default.createElement(_motion.default, (0, _extends2.default)({}, collapseMotion, {
    visible: isExpand
  }), ({
    className: motionClassName,
    style
  }, motionRef) => /*#__PURE__*/_react.default.createElement("div", {
    className: motionClassName || '',
    ref: motionRef,
    style: style
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.clsx)(`${prefixCls}-content`, classNames.content),
    style: styles.content
  }, children))));
});
if (process.env.NODE_ENV !== 'production') {
  Think.displayName = 'Think';
}
var _default = exports.default = Think;