2
0

SentMenu.tsx 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. import { useIntl } from "react-intl";
  2. import { Badge, Button, Dropdown, Space } from "antd";
  3. import { MoreOutlined, CheckOutlined } from "@ant-design/icons";
  4. import type { MenuProps } from "antd";
  5. import RelatedPara from "../../corpus/RelatedPara";
  6. import type { ArticleMode } from "../../article/Article"
  7. interface IWidget {
  8. book?: number;
  9. para?: number;
  10. loading?: boolean;
  11. mode?: ArticleMode;
  12. onMagicDict?: Function;
  13. onMenuClick?: Function;
  14. }
  15. const SentMenuWidget = ({
  16. book,
  17. para,
  18. mode,
  19. loading = false,
  20. onMagicDict,
  21. onMenuClick,
  22. }: IWidget) => {
  23. const intl = useIntl();
  24. const items: MenuProps["items"] = [
  25. {
  26. key: "show-commentary",
  27. label: <RelatedPara book={book} para={para} />,
  28. },
  29. {
  30. key: "show-nissaya",
  31. label: "Nissaya",
  32. },
  33. {
  34. key: "copy-id",
  35. label: intl.formatMessage({ id: "buttons.copy.id" }),
  36. },
  37. {
  38. key: "copy-link",
  39. label: intl.formatMessage({ id: "buttons.copy.link" }),
  40. },
  41. {
  42. key: "affix",
  43. label: "总在最顶端开/关",
  44. },
  45. {
  46. type: "divider",
  47. },
  48. {
  49. key: "origin",
  50. label: "原文模式",
  51. children: [
  52. {
  53. key: "origin-auto",
  54. label: "自动",
  55. icon: (
  56. <CheckOutlined
  57. style={{ visibility: mode === undefined ? "visible" : "hidden" }}
  58. />
  59. ),
  60. },
  61. {
  62. key: "origin-edit",
  63. label: "翻译",
  64. icon: (
  65. <CheckOutlined
  66. style={{ visibility: mode === "edit" ? "visible" : "hidden" }}
  67. />
  68. ),
  69. },
  70. {
  71. key: "origin-wbw",
  72. label: "逐词",
  73. icon: (
  74. <CheckOutlined
  75. style={{ visibility: mode === "wbw" ? "visible" : "hidden" }}
  76. />
  77. ),
  78. },
  79. ],
  80. },
  81. {
  82. key: "compact",
  83. label: (
  84. <Space>
  85. {intl.formatMessage({ id: "buttons.compact" })}
  86. <Badge count="Beta" showZero color="#faad14" />
  87. </Space>
  88. ),
  89. },
  90. {
  91. key: "normal",
  92. label: "正常",
  93. },
  94. ];
  95. const onClick: MenuProps["onClick"] = ({ key }) => {
  96. console.log(`Click on item ${key}`);
  97. if (typeof onMenuClick !== "undefined") {
  98. onMenuClick(key);
  99. }
  100. switch (key) {
  101. case "magic-dict-current":
  102. if (typeof onMagicDict !== "undefined") {
  103. onMagicDict("current");
  104. }
  105. break;
  106. default:
  107. break;
  108. }
  109. };
  110. return (
  111. <Dropdown menu={{ items, onClick }} placement="topRight">
  112. <Button
  113. loading={loading}
  114. onClick={(e) => e.preventDefault()}
  115. icon={<MoreOutlined />}
  116. size="small"
  117. type="primary"
  118. />
  119. </Dropdown>
  120. );
  121. };
  122. export default SentMenuWidget;