ar-design
Version:
AR Design is a (react | nextjs) ui library.
66 lines (65 loc) • 4.65 kB
JavaScript
import { memo, useState } from "react";
import React from "react";
import Grid from "../../grid-system";
import Popover from "../../../feedback/popover";
import Upload from "../../../form/upload";
import Tooltip from "../../../feedback/tooltip";
import Button from "../../../form/button";
import { ARIcon } from "../../../icons";
const { Row, Column } = Grid;
const ActionButtons = ({ states, actions }) => {
// states
const [files, setFiles] = useState([]);
const [formData, setFormData] = useState(undefined);
const [base64, setBase64] = useState([]);
return (React.createElement("div", { className: "actions" },
actions.import && (React.createElement(Popover, { title: actions.import.title ?? "İçeri Aktar", message: actions.import.message ??
"Seçtiğiniz dosyaları uygulamaya yükleyebilirsiniz. Bu işlem, dosyalardaki verileri sistemimize aktarır ve verilerle işlem yapmanıza olanak tanır.", content: React.createElement(React.Fragment, null,
actions.import.prefixItem && (React.createElement(Row, null,
React.createElement(Column, { size: 12 }, actions.import.prefixItem))),
React.createElement(Row, null,
React.createElement(Column, { size: 12 },
React.createElement(Upload, { text: actions.import.buttonText ?? "Belge Yükleyin", allowedTypes: actions.import.allowedTypes, files: files, onChange: (formData, files, base64) => {
setFormData(formData);
setFiles(files);
setBase64(base64);
}, size: "small", fullWidth: true }))),
actions.import.suffixItem), onConfirm: (confirm) => {
if (!confirm) {
setFiles([]);
return;
}
if (actions.import && actions.import.onClick)
actions.import.onClick(formData, files, base64);
}, config: { buttons: { okay: "Yükle", cancel: "İptal" } }, windowBlur: true },
React.createElement(Tooltip, { text: actions.import.tooltip },
React.createElement(Button, { variant: "outlined", color: "purple", icon: { element: React.createElement(ARIcon, { icon: "Upload", fill: "currentcolor" }) } })))),
actions.export && (React.createElement(Popover, { title: actions.export.title ?? "Dışarı Aktar", message: actions.export.message ??
"Seçtiğiniz verileri bilgisayarınıza indirebilirsiniz. Bu işlem, sistemimizdeki verileri dosya olarak dışa aktarır ve verileri harici olarak kullanmanıza olanak tanır.", content: actions.export.content, onConfirm: (confirm) => {
if (!confirm) {
setFiles([]);
return;
}
if (actions.export && actions.export.onClick)
actions.export.onClick();
}, config: { buttons: { okay: "Dışarı Aktar", cancel: "İptal" } }, windowBlur: true },
React.createElement(Tooltip, { text: actions.export.tooltip },
React.createElement(Button, { variant: "outlined", color: "blue", icon: { element: React.createElement(ARIcon, { icon: "Download", fill: "currentcolor" }) } })))),
actions.create && (React.createElement(Tooltip, { text: actions.create.tooltip },
React.createElement(Button, { variant: "outlined", color: "green", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 24 }) }, onClick: (event) => {
if (!actions.create)
return;
actions.create.onClick(event);
states.createTrigger.set((prev) => !prev);
} }))),
actions.delete && (React.createElement(Popover, { title: actions.delete.title ?? "Siliniyor", message: actions.delete.message ??
"Seçtiğiniz verileri uygulamadan silebilirsiniz. Bu işlem, verilerin sistemimizden tamamen kaldırılmasını sağlar ve bu verilerle artık işlem yapılamaz.", onConfirm: (confirm) => {
if (!confirm)
return;
if (actions.delete && actions.delete.onClick)
actions.delete.onClick();
} },
React.createElement(Tooltip, { text: actions.delete.tooltip },
React.createElement(Button, { variant: "outlined", color: "red", icon: { element: React.createElement(ARIcon, { icon: "Trash-Fill", fill: "currentcolor" }) } }))))));
};
export default memo(ActionButtons);