2
0

SentTabCopy.tsx 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. import { Dropdown, Tooltip, notification } from "antd";
  2. import {
  3. CopyOutlined,
  4. ShoppingCartOutlined,
  5. CheckOutlined,
  6. DownOutlined,
  7. } from "@ant-design/icons";
  8. import { useEffect, useState } from "react";
  9. import type { IWbw } from "../Wbw/WbwWord"
  10. import store from "../../../store";
  11. import { modeChange } from "../../../reducers/cart-mode";
  12. import { useAppSelector } from "../../../hooks";
  13. import { mode as _mode } from "../../../reducers/cart-mode";
  14. import { addToCart } from "./SentCart";
  15. interface IWidget {
  16. text?: string;
  17. wbwData?: IWbw[];
  18. }
  19. const SentTabCopyWidget = ({ text, wbwData }: IWidget) => {
  20. const [mode, setMode] = useState("copy");
  21. const [success, setSuccess] = useState(false);
  22. const currMode = useAppSelector(_mode);
  23. useEffect(() => {
  24. const modeSetting = localStorage.getItem("cart/mode");
  25. if (modeSetting === "cart") {
  26. setMode("cart");
  27. }
  28. }, []);
  29. useEffect(() => {
  30. localStorage.setItem("cart/mode", mode);
  31. }, [mode]);
  32. useEffect(() => {
  33. if (currMode) {
  34. setMode(currMode);
  35. }
  36. }, [currMode]);
  37. const copy = (mode: string) => {
  38. if (text) {
  39. if (mode === "copy") {
  40. navigator.clipboard.writeText(text).then(() => {
  41. setSuccess(true);
  42. setTimeout(() => setSuccess(false), 3000);
  43. });
  44. } else {
  45. const paliText = wbwData
  46. ?.filter((value) => value.type?.value !== ".ctl.")
  47. .map((item) => item.word.value)
  48. .join(" ");
  49. addToCart([{ id: text, text: paliText ? paliText : "" }]);
  50. notification.success({
  51. message: "句子已经添加到Cart",
  52. });
  53. setSuccess(true);
  54. setTimeout(() => setSuccess(false), 3000);
  55. }
  56. }
  57. };
  58. return (
  59. <Dropdown.Button
  60. size="small"
  61. type="link"
  62. icon={<DownOutlined />}
  63. menu={{
  64. items: [
  65. {
  66. label: "copy",
  67. key: "copy",
  68. icon: <CopyOutlined />,
  69. },
  70. {
  71. label: "add to cart",
  72. key: "cart",
  73. icon: <ShoppingCartOutlined />,
  74. },
  75. ],
  76. onClick: (e) => {
  77. setMode(e.key);
  78. store.dispatch(modeChange(e.key));
  79. copy(e.key);
  80. },
  81. }}
  82. onClick={() => copy(mode)}
  83. >
  84. <Tooltip title={(success ? "已经" : "") + `${mode}`}>
  85. {success ? (
  86. <CheckOutlined />
  87. ) : mode === "copy" ? (
  88. <CopyOutlined />
  89. ) : (
  90. <ShoppingCartOutlined />
  91. )}
  92. </Tooltip>
  93. </Dropdown.Button>
  94. );
  95. };
  96. export default SentTabCopyWidget;