kwikid-components-react
Version:
KwikID's Component Library in React
63 lines (60 loc) • 4.68 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.BasicFileExplorer = void 0;
var _react = _interopRequireWildcard(require("react"));
var _DataTree = require("../DataTree");
var _DataTree2 = require("../DataTree.helper");
var _sampleData = _interopRequireDefault(require("./data/sample-data.json"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
// Import JSON data with type assertion
// Type the imported JSON data
const sampleFileStructureData = _sampleData.default;
var _default = exports.default = {
title: "DataViewer/Tree",
component: _DataTree.Tree,
parameters: {
docs: {
description: {
component: "A simple tree component for displaying files and folders with appropriate icons based on file type"
}
}
}
};
const Template = _ref => {
let {
data,
onFileClick
} = _ref;
const [selectedFile, setSelectedFile] = (0, _react.useState)(null);
const handleFileClick = file => {
setSelectedFile(file);
if (onFileClick) {
onFileClick(file);
}
};
// Get file extension if the selected item is a file
const fileExtension = (selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.type) === "file" ? (0, _DataTree2.getFileExtension)(selectedFile.name) : "";
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
width: "400px",
borderRight: "1px solid #eee",
padding: "10px"
}
}, /*#__PURE__*/_react.default.createElement("h3", null, "File Explorer with Type-Based Icons"), /*#__PURE__*/_react.default.createElement("p", null, "Files show different icons based on their extension"), /*#__PURE__*/_react.default.createElement(_DataTree.Tree, {
data: data || sampleFileStructureData,
onFileClick: handleFileClick
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
padding: "10px"
}
}, selectedFile ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Selected Item Details:"), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("strong", null, "Name:"), " ", selectedFile.name), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("strong", null, "Type:"), " ", selectedFile.type), selectedFile.type === "file" && /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("strong", null, "Extension:"), " ", fileExtension || "None"), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("strong", null, "ID:"), " ", selectedFile.id)) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "File Icons Legend"), /*#__PURE__*/_react.default.createElement("p", null, "Click a file to view its details. Different file types have different icons:"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("strong", null, "Documents:"), " .docx, .pdf, .xlsx, .pptx, .txt"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("strong", null, "Images:"), " .jpg, .png, .svg, .gif"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("strong", null, "Media:"), " .mp3, .mp4, .wav"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("strong", null, "Code:"), " .js, .ts, .jsx, .tsx, .html, .css, .json"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("strong", null, "Other:"), " Any unrecognized extension will show a generic file icon")))));
};
const BasicFileExplorer = exports.BasicFileExplorer = Template.bind({});
BasicFileExplorer.args = {};