Ribbon.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. "use client";
  2. import * as React from 'react';
  3. import classNames from 'classnames';
  4. import { isPresetColor } from '../_util/colors';
  5. import { ConfigContext } from '../config-provider';
  6. import useStyle from './style/ribbon';
  7. const Ribbon = props => {
  8. const {
  9. className,
  10. prefixCls: customizePrefixCls,
  11. style,
  12. color,
  13. children,
  14. text,
  15. placement = 'end',
  16. rootClassName
  17. } = props;
  18. const {
  19. getPrefixCls,
  20. direction
  21. } = React.useContext(ConfigContext);
  22. const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
  23. const wrapperCls = `${prefixCls}-wrapper`;
  24. const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, wrapperCls);
  25. const colorInPreset = isPresetColor(color, false);
  26. const ribbonCls = classNames(prefixCls, `${prefixCls}-placement-${placement}`, {
  27. [`${prefixCls}-rtl`]: direction === 'rtl',
  28. [`${prefixCls}-color-${color}`]: colorInPreset
  29. }, className);
  30. const colorStyle = {};
  31. const cornerColorStyle = {};
  32. if (color && !colorInPreset) {
  33. colorStyle.background = color;
  34. cornerColorStyle.color = color;
  35. }
  36. return wrapCSSVar(/*#__PURE__*/React.createElement("div", {
  37. className: classNames(wrapperCls, rootClassName, hashId, cssVarCls)
  38. }, children, /*#__PURE__*/React.createElement("div", {
  39. className: classNames(ribbonCls, hashId),
  40. style: Object.assign(Object.assign({}, colorStyle), style)
  41. }, /*#__PURE__*/React.createElement("span", {
  42. className: `${prefixCls}-text`
  43. }, text), /*#__PURE__*/React.createElement("div", {
  44. className: `${prefixCls}-corner`,
  45. style: cornerColorStyle
  46. }))));
  47. };
  48. if (process.env.NODE_ENV !== 'production') {
  49. Ribbon.displayName = 'Ribbon';
  50. }
  51. export default Ribbon;