@ant-design/x/es/actions/ActionsFeedback.js

Craft AI-driven interfaces effortlessly

import _extends from "@babel/runtime/helpers/esm/extends";
import { DislikeFilled, DislikeOutlined, LikeFilled, LikeOutlined } from '@ant-design/icons';
import pickAttrs from '@rc-component/util/lib/pickAttrs';
import { Tooltip } from 'antd';
import { clsx } from 'clsx';
import React from 'react';
import { useLocale } from "../locale";
import enUS from "../locale/en_US";
import { useXProviderContext } from "../x-provider";
import useStyle from "./style";
var FEEDBACK_VALUE = /*#__PURE__*/function (FEEDBACK_VALUE) {
  FEEDBACK_VALUE["like"] = "like";
  FEEDBACK_VALUE["dislike"] = "dislike";
  FEEDBACK_VALUE["default"] = "default";
  return FEEDBACK_VALUE;
}(FEEDBACK_VALUE || {});
const ActionsFeedback = props => {
  const {
    value = 'default',
    onChange,
    className,
    style,
    classNames = {},
    styles = {},
    prefixCls: customizePrefixCls,
    rootClassName,
    ...otherHtmlProps
  } = props;
  const domProps = pickAttrs(otherHtmlProps, {
    attr: true,
    aria: true,
    data: true
  });
  const [contextLocale] = useLocale('Actions', enUS.Actions);

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

  const {
    direction,
    getPrefixCls
  } = useXProviderContext();
  const prefixCls = getPrefixCls('actions', customizePrefixCls);
  const [hashId, cssVarCls] = useStyle(prefixCls);
  const feedbackCls = `${prefixCls}-feedback`;

  // ============================ Classname ============================
  const mergedCls = clsx(prefixCls, feedbackCls, hashId, cssVarCls, rootClassName, classNames.root, `${prefixCls}-list`, className, {
    [`${feedbackCls}-rtl`]: direction === 'rtl'
  });
  const onFeedBacKClick = () => onChange?.(value === FEEDBACK_VALUE.dislike ? FEEDBACK_VALUE.default : FEEDBACK_VALUE.dislike);
  return /*#__PURE__*/React.createElement("div", _extends({}, domProps, {
    className: mergedCls,
    style: {
      ...style,
      ...styles.root
    }
  }), [FEEDBACK_VALUE.default, FEEDBACK_VALUE.like].includes(value) && /*#__PURE__*/React.createElement(Tooltip, {
    key: `like_${value}`,
    title: contextLocale.feedbackLike
  }, /*#__PURE__*/React.createElement("span", {
    onClick: () => onChange?.(value === FEEDBACK_VALUE.like ? FEEDBACK_VALUE.default : FEEDBACK_VALUE.like),
    style: {
      ...styles.like,
      ...(value === 'like' ? styles.liked : {})
    },
    className: clsx(`${feedbackCls}-item`, `${prefixCls}-item`, `${feedbackCls}-item-like`, classNames.like, {
      [`${classNames.liked}`]: classNames.liked && value === 'like',
      [`${feedbackCls}-item-like-active`]: value === 'like'
    })
  }, value === FEEDBACK_VALUE.like ? /*#__PURE__*/React.createElement(LikeFilled, null) : /*#__PURE__*/React.createElement(LikeOutlined, null))), [FEEDBACK_VALUE.default, FEEDBACK_VALUE.dislike].includes(value) && /*#__PURE__*/React.createElement(Tooltip, {
    key: `dislike_${value}`,
    title: contextLocale.feedbackDislike
  }, /*#__PURE__*/React.createElement("span", {
    onClick: onFeedBacKClick,
    style: {
      ...styles.dislike,
      ...(value === 'dislike' ? styles.disliked : {})
    },
    className: clsx(`${feedbackCls}-item`, `${prefixCls}-item`, `${feedbackCls}-item-dislike`, classNames.dislike, {
      [`${classNames.disliked}`]: classNames.disliked && value === 'dislike',
      [`${feedbackCls}-item-dislike-active`]: value === 'dislike'
    })
  }, value === FEEDBACK_VALUE.dislike ? /*#__PURE__*/React.createElement(DislikeFilled, null) : /*#__PURE__*/React.createElement(DislikeOutlined, null))));
};
export default ActionsFeedback;