Show address search on table only on fullscreen mode

dev
Platon Yasev 3 years ago
parent 329a41a50d
commit 54d26bdf85

@ -3,7 +3,11 @@ import { Slider } from "antd";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
const Mark = ({ value }) => { const Mark = ({ value }) => {
return <span className={"text-grey text-xs"}>{value}</span>; return (
<span className={"text-grey text-xs bg-white-background-light"}>
{value}
</span>
);
}; };
const getInitialMarks = (fullRange, value) => { const getInitialMarks = (fullRange, value) => {

@ -4,14 +4,20 @@ import { getRegionNameById } from "../../../Map/Popup/mode-popup/config.js";
import { SearchOutlined } from "@ant-design/icons"; import { SearchOutlined } from "@ant-design/icons";
import { Button, Popover } from "antd"; import { Button, Popover } from "antd";
import { AddressSearch } from "../../../Map/AddressSearch.jsx"; import { AddressSearch } from "../../../Map/AddressSearch.jsx";
import { useTable } from "../../../stores/useTable.js";
export const useColumns = () => { export const useColumns = () => {
const { data: regions } = useGetRegions(); const { data: regions } = useGetRegions();
const {
tableState: { fullScreen },
} = useTable();
console.log(fullScreen);
return useMemo(() => { return useMemo(() => {
return [ return [
{ {
title: ( title: fullScreen ? (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span>Адрес</span> <span>Адрес</span>
<Popover <Popover
@ -24,6 +30,8 @@ export const useColumns = () => {
</Button> </Button>
</Popover> </Popover>
</div> </div>
) : (
"Адрес"
), ),
dataIndex: "address", dataIndex: "address",
key: "address", key: "address",
@ -111,5 +119,5 @@ export const useColumns = () => {
ellipsis: true, ellipsis: true,
}, },
]; ];
}, [regions?.normalized]); }, [regions?.normalized, fullScreen]);
}; };

@ -5,14 +5,18 @@ import { getRegionNameById } from "../../Map/Popup/mode-popup/config.js";
import { Button, Popover } from "antd"; import { Button, Popover } from "antd";
import { AddressSearch } from "../../Map/AddressSearch.jsx"; import { AddressSearch } from "../../Map/AddressSearch.jsx";
import { SearchOutlined } from "@ant-design/icons"; import { SearchOutlined } from "@ant-design/icons";
import { useTable } from "../../stores/useTable.js";
export const useColumns = (fields = []) => { export const useColumns = (fields = []) => {
const { data: regions } = useGetRegions(); const { data: regions } = useGetRegions();
const {
tableState: { fullScreen },
} = useTable();
return useMemo(() => { return useMemo(() => {
return [ return [
{ {
title: ( title: fullScreen ? (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span>Адрес</span> <span>Адрес</span>
<Popover <Popover
@ -25,6 +29,8 @@ export const useColumns = (fields = []) => {
</Button> </Button>
</Popover> </Popover>
</div> </div>
) : (
"Адрес"
), ),
dataIndex: "address", dataIndex: "address",
key: "address", key: "address",
@ -83,5 +89,5 @@ export const useColumns = (fields = []) => {
}, },
...fields, ...fields,
]; ];
}, [regions?.normalized, fields]); }, [regions?.normalized, fields, fullScreen]);
}; };

Loading…
Cancel
Save