ywana-core8 0.0.887 → 0.0.888

package/dist/index.umd.js

@@ -4036,7 +4036,7 @@
           }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
             text: title,
             top: ".5rem",
-            left: "2rem"
+            left: "4.5rem"
           }, /*#__PURE__*/React__default["default"].createElement(Icon, {
             key: id,
             icon: icon,
@@ -4300,77 +4300,169 @@
     };
 
     /**
-     * File Explorer
+     * File Explorer View
      */
-    var FileExplorer = function FileExplorer(props) {
-      var title = props.title,
+    var FileExplorerView = function FileExplorerView(props) {
+      var _props$folders = props.folders,
+        folders = _props$folders === void 0 ? [] : _props$folders,
+        selectedFolder = props.selectedFolder,
+        onSelectFolder = props.onSelectFolder,
         _props$files = props.files,
-        files = _props$files === void 0 ? [] : _props$files;
+        files = _props$files === void 0 ? [] : _props$files,
+        selectedFile = props.selectedFile,
+        onSelectFile = props.onSelectFile,
+        search = props.search,
+        onSearch = props.onSearch;
+      var _useState4 = React.useState('list'),
+        view = _useState4[0],
+        setView = _useState4[1];
+      var folder = folders.find(function (folder) {
+        return folder.id === selectedFolder;
+      });
+      var folderTitle = folder ? folder.title : '';
+      function switchView() {
+        setView(view === 'grid' ? 'list' : 'grid');
+      }
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "file-explorer"
-      }, /*#__PURE__*/React__default["default"].createElement("header", null, title, /*#__PURE__*/React__default["default"].createElement("nav", null, /*#__PURE__*/React__default["default"].createElement(Icon, {
-        icon: "info"
-      }))), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FilesGrid, {
-        files: files
-      })), /*#__PURE__*/React__default["default"].createElement("aside", null));
+      }, /*#__PURE__*/React__default["default"].createElement("nav", null, /*#__PURE__*/React__default["default"].createElement("header", {
+        className: "folder-header"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "folder-title"
+      }, folderTitle)), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "folder-actions"
+      }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "list",
+        clickable: true,
+        action: switchView,
+        checked: view === "list"
+      }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+        icon: "grid_view",
+        clickable: true,
+        action: switchView,
+        checked: view === "grid"
+      })), /*#__PURE__*/React__default["default"].createElement(FilesSearchBox, {
+        search: search,
+        onSearch: onSearch
+      })), /*#__PURE__*/React__default["default"].createElement("menu", null, /*#__PURE__*/React__default["default"].createElement(FoldersTreeView, {
+        folders: folders,
+        selected: selectedFolder,
+        onSelect: onSelectFolder
+      })), /*#__PURE__*/React__default["default"].createElement("main", null, view === 'grid' ? /*#__PURE__*/React__default["default"].createElement(FilesGridView, {
+        files: files,
+        selected: selectedFile,
+        onSelect: onSelectFile
+      }) : null, view === 'list' ? /*#__PURE__*/React__default["default"].createElement(FilesTableView, {
+        files: files,
+        selected: selectedFile,
+        onSelect: onSelectFile
+      }) : null));
+    };
+    var FoldersTreeView = function FoldersTreeView(props) {
+      var _props$folders2 = props.folders,
+        folders = _props$folders2 === void 0 ? [] : _props$folders2,
+        selected = props.selected,
+        _onSelect = props.onSelect;
+      function isSelected(id) {
+        return selected === id;
+      }
+      return /*#__PURE__*/React__default["default"].createElement(Tree, null, folders.map(function (folder) {
+        return /*#__PURE__*/React__default["default"].createElement(TreeItem, {
+          key: folder.id,
+          icon: folder.icon,
+          label: folder.title,
+          onSelect: function onSelect() {
+            return _onSelect(folder.id);
+          },
+          selected: isSelected(folder.id)
+        });
+      }));
+    };
+    var FilesSearchBox = function FilesSearchBox(props) {
+      var onSearch = props.onSearch;
+      function searchChanged(id, value) {
+        onSearch(value);
+      }
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "file-searchbox"
+      }, /*#__PURE__*/React__default["default"].createElement(TextField, {
+        placeholder: "Search...",
+        onChange: searchChanged,
+        outlined: true
+      }));
     };
 
     /**
      * File Icons View
      */
-    var FilesGrid = function FilesGrid(props) {
+    var FilesGridView = function FilesGridView(props) {
       var _props$files2 = props.files,
         files = _props$files2 === void 0 ? [] : _props$files2,
+        selected = props.selected,
         onSelect = props.onSelect;
-      var _useState = React.useState(),
-        selected = _useState[0],
-        setSelected = _useState[1];
-      function select(id) {
-        setSelected(id);
-        if (onSelect) onSelect(id);
-      }
       function isSelected(id) {
         return selected === id;
       }
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "file-view file-view--icons"
+        className: "files-grid"
       }, files.map(function (file) {
-        return /*#__PURE__*/React__default["default"].createElement(FileIcon, {
+        return /*#__PURE__*/React__default["default"].createElement(FileGridItem, {
+          key: file.id,
           file: file,
-          onSelect: select,
+          onSelect: onSelect,
           selected: isSelected(file.id)
         });
       }));
     };
 
     /**
-     * File Icon
+     * File Grid Item
      */
-    var FileIcon = function FileIcon(props) {
+    var FileGridItem = function FileGridItem(props) {
       var _props$file = props.file,
         file = _props$file === void 0 ? {} : _props$file,
         _props$selected = props.selected,
         selected = _props$selected === void 0 ? false : _props$selected,
         onSelect = props.onSelect;
       var id = file.id,
-        icon = file.icon,
-        label = file.label,
+        title = file.title,
+        subtitle = file.subtitle,
         _file$src = file.src,
-        src = _file$src === void 0 ? "https://findicons.com/files/icons/2813/flat_jewels/256/file.png" : _file$src,
-        footer = file.footer;
+        src = _file$src === void 0 ? "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkAPtY9GS4QgwAjRUSvLaa6TP4fSlQkVDqEg&usqp=CAU" : _file$src;
       function select() {
         if (onSelect && !selected) onSelect(id);
       }
-      var style = selected ? 'file-icon--selected' : '';
+      var style = selected ? 'file-item--selected' : '';
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "file-icon " + style,
+        className: "file-item " + style,
         onClick: select
       }, /*#__PURE__*/React__default["default"].createElement("picture", null, /*#__PURE__*/React__default["default"].createElement("img", {
         src: src
-      })), /*#__PURE__*/React__default["default"].createElement("main", null, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-        size: "small",
-        icon: icon
-      }) : null, /*#__PURE__*/React__default["default"].createElement("label", null, label)), footer ? /*#__PURE__*/React__default["default"].createElement("footer", null, footer) : null);
+      })), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "file-item-title"
+      }, title), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "file-item-subtitle"
+      }, subtitle)));
+    };
+    var FilesTableView = function FilesTableView(props) {
+      var _props$files3 = props.files,
+        files = _props$files3 === void 0 ? [] : _props$files3;
+      var table = {
+        columns: [{
+          id: "icon",
+          type: "ICON"
+        }, {
+          id: "title",
+          label: "Title"
+        }, {
+          id: "subtitle",
+          label: "Subtitle"
+        }],
+        rows: files
+      };
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "files-table"
+      }, /*#__PURE__*/React__default["default"].createElement(DataTable, table));
     };
 
     /**
@@ -10984,8 +11076,10 @@
     exports.EmptyMessage = EmptyMessage;
     exports.FORMATS = FORMATS$1;
     exports.FieldEditor = FieldEditor;
-    exports.FileExplorer = FileExplorer;
-    exports.FilesGrid = FilesGrid;
+    exports.FileExplorerView = FileExplorerView;
+    exports.FilesGridView = FilesGridView;
+    exports.FilesSearchBox = FilesSearchBox;
+    exports.FoldersTreeView = FoldersTreeView;
     exports.Form = Form;
     exports.HTTPClient = HTTPClient;
     exports.Header = Header;