frontend/src/modules/ListView/components/ListViewControls/ViewDropdown.tsx - master - softailor/gridient

frontend/src/modules/ListView/components/ListViewControls/ViewDropdown.tsx
86 строк2 KB
Jenkins
Auto add
18 фев 2026, 10:19
18 фев 2026, 10:191e6c4f8
import React, { FC, useState } from "react";

import { SettingOutlined } from "@ant-design/icons";
import { Button, Divider, Dropdown, MenuProps, theme } from "antd";

import { useListViewContext } from "../ListViewContext";

export const ViewDropdown: FC = () => {
  const { useToken } = theme;
  const { token } = useToken();

  const { currentView, setCurrentView, views, setVisibleViewSettings } = useListViewContext();

  const [open, setOpen] = useState(false);

  const viewItems: MenuProps["items"] = [
    ...(views?.map((item) => ({
      key: item.id.toString(),
      label: item.title,
    })) ?? []),
  ];

  const changeView = (key: string) => {
    const selectedView = views?.find((filter) => filter.id === Number(key));
    if (selectedView) {
      setCurrentView(selectedView);
    }
  };

  const contentStyle: React.CSSProperties = {
    backgroundColor: token.colorBgElevated,
    borderRadius: token.borderRadiusLG,
    boxShadow: token.boxShadowSecondary,
  };

  const menuStyle: React.CSSProperties = {
    boxShadow: "none",
  };

  return (
    <Dropdown
      open={open}
      onOpenChange={setOpen}
      menu={{
        items: viewItems,
        selectable: true,
        defaultSelectedKeys: [viewItems[0] ? (viewItems[0].key as string) : "0"],
        onClick: (item) => changeView(item.key),
      }}
      popupRender={(menu) => (
        <div style={contentStyle}>
          {React.cloneElement(
            menu as React.ReactElement<{
              style: React.CSSProperties;
            }>,
            { style: menuStyle },
          )}
          <Divider style={{ margin: 0 }} />
          <div style={{ display: "flex", padding: 4 }}>
            <div
              style={{
                flex: "1",
                height: "32px",
                display: "flex",
                columnGap: "8px",
                padding: "0 8px",
                alignItems: "center",
                cursor: "pointer",
              }}
              onClick={() => {
                setVisibleViewSettings(true);
                setOpen(false);
              }}
            >
              <SettingOutlined />
              Настроить
            </div>
          </div>
        </div>
      )}
      trigger={["click"]}
    >
      <Button>Представление: {currentView?.title}</Button>
    </Dropdown>
  );
};