master
mahdi andalib 3 years ago
parent 91058f7d36
commit 24c6c45701
  1. 43
      src/components/ReactTable4/Settings.js

@ -1,13 +1,40 @@
import React from "react";
import React, { useState } from "react";
import { ToggleColumns } from "./ToggleColumns";
import settings from "./settings.svg";
export const Settings = ({}) => {
export const Settings = ({ allColumns, getToggleHideAllColumnsProps }) => {
const [openModal, setOpenModal] = useState(false);
console.log(openModal);
return (
<div
style={{ backgroundColor: "#F9FBFF" }}
className="mr-2 flex flex-col items-center justify-center p-1 rounded"
>
<img src={settings} className="w-6 h-6 cursor-pointer" />
</div>
<section>
<div
onClick={() => setOpenModal(true)}
data-modal-toggle="large-modal"
style={{ backgroundColor: "#F9FBFF" }}
className="mr-2 flex flex-col items-center justify-center p-1 rounded"
>
<img src={settings} className="w-6 h-6 cursor-pointer" />
</div>
{/* modal */}
<div
className={`cursor-pointer w-screen h-screen backdrop-filter backdrop-blur-lg flex items-center justify-center bg-gray-900 fixed left-0 top-0 duration-1000 transition-all
${openModal ? "opacity-90" : "opacity-0 pointer-events-none"}`}
onClick={() => setOpenModal(false)}
>
<div
className="absolute bg-white"
style={{ top: "10%" }}
onClick={(e) => e.stopPropagation()}
onClick={() => setOpenModal(false)}
>
<ToggleColumns
allColumns={allColumns}
getToggleHideAllColumnsProps={getToggleHideAllColumnsProps}
/>
</div>
</div>
</section>
);
};

Loading…
Cancel
Save