kwikid-components-react
Version:
KwikID's Component Library in React
64 lines (61 loc) • 4.85 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
// 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 = {};