@ant-design/x/es/prompts/index.js

Craft AI-driven interfaces effortlessly

import _extends from "@babel/runtime/helpers/esm/extends";
import CSSMotion from '@rc-component/motion';
import { composeRef } from '@rc-component/util/lib/ref';
import { Typography } from 'antd';
import { clsx } from 'clsx';
import React from 'react';
import useProxyImperativeHandle from "../_util/hooks/use-proxy-imperative-handle";
import useXComponentConfig from "../_util/hooks/use-x-component-config";
import { useXProviderContext } from "../x-provider";
import useStyle from "./style";
const ForwardPrompts = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    prefixCls: customizePrefixCls,
    title,
    className,
    items,
    onItemClick,
    vertical,
    wrap,
    rootClassName,
    styles = {},
    classNames = {},
    style,
    fadeIn,
    fadeInLeft,
    ...htmlProps
  } = props;

  // ============================ PrefixCls ============================
  const {
    getPrefixCls,
    direction
  } = useXProviderContext();
  const prefixCls = getPrefixCls('prompts', customizePrefixCls);

  // ===================== Component Config =========================
  const contextConfig = useXComponentConfig('prompts');

  // ============================ Style ============================
  const [hashId, cssVarCls] = useStyle(prefixCls);
  const mergedCls = clsx(prefixCls, contextConfig.className, className, rootClassName, classNames.root, hashId, cssVarCls, {
    [`${prefixCls}-rtl`]: direction === 'rtl'
  });
  const mergedListCls = clsx(`${prefixCls}-list`, contextConfig.classNames.list, classNames.list, {
    [`${prefixCls}-list-wrap`]: wrap
  }, {
    [`${prefixCls}-list-vertical`]: vertical
  });

  // ============================= Refs =============================
  const containerRef = React.useRef(null);
  useProxyImperativeHandle(ref, () => {
    return {
      nativeElement: containerRef.current
    };
  });

  // ============================= Motion =============================
  const rootPrefixCls = getPrefixCls();
  const motionName = fadeInLeft || fadeIn ? `${rootPrefixCls}-x-fade${fadeInLeft ? '-left' : ''}` : '';

  // ============================ Render ============================
  return /*#__PURE__*/React.createElement(CSSMotion, {
    motionName: motionName
  }, ({
    className: motionClassName
  }, ref) => {
    return /*#__PURE__*/React.createElement("div", _extends({}, htmlProps, {
      ref: composeRef(containerRef, ref),
      className: clsx(mergedCls, motionClassName),
      style: {
        ...style,
        ...contextConfig.style,
        ...styles.root
      }
    }), title && /*#__PURE__*/React.createElement(Typography.Title, {
      level: 5,
      className: clsx(`${prefixCls}-title`, contextConfig.classNames.title, classNames.title),
      style: {
        ...contextConfig.styles.title,
        ...styles.title
      }
    }, title), /*#__PURE__*/React.createElement("div", {
      className: mergedListCls,
      style: {
        ...contextConfig.styles.list,
        ...styles.list
      }
    }, items?.map((info, index) => {
      const isNest = info.children && info.children.length > 0;
      return /*#__PURE__*/React.createElement("div", {
        key: info.key || `key_${index}`,
        style: {
          ...contextConfig.styles.item,
          ...styles.item
        },
        className: clsx(`${prefixCls}-item`, contextConfig.classNames.item, classNames.item, {
          [`${prefixCls}-item-disabled`]: info.disabled,
          [`${prefixCls}-item-has-nest`]: isNest
        }),
        onClick: () => {
          if (!isNest && !info.disabled && onItemClick) {
            onItemClick({
              data: info
            });
          }
        }
      }, info.icon && /*#__PURE__*/React.createElement("div", {
        className: `${prefixCls}-icon`
      }, info.icon), /*#__PURE__*/React.createElement("div", {
        className: clsx(`${prefixCls}-content`, contextConfig.classNames.itemContent, classNames.itemContent),
        style: {
          ...contextConfig.styles.itemContent,
          ...styles.itemContent
        }
      }, info.label && /*#__PURE__*/React.createElement("h6", {
        className: `${prefixCls}-label`
      }, info.label), info.description && /*#__PURE__*/React.createElement("p", {
        className: `${prefixCls}-desc`
      }, info.description), isNest && /*#__PURE__*/React.createElement(Prompts, {
        className: `${prefixCls}-nested`,
        items: info.children,
        vertical: true,
        onItemClick: onItemClick,
        classNames: {
          list: classNames.subList,
          item: classNames.subItem
        },
        styles: {
          list: styles.subList,
          item: styles.subItem
        }
      })));
    })));
  });
});
const Prompts = ForwardPrompts;
if (process.env.NODE_ENV !== 'production') {
  Prompts.displayName = 'Prompts';
}
export default Prompts;