ywana-core8 0.0.887 → 0.0.889

package/dist/index.modern.js

@@ -4034,7 +4034,7 @@ var SiteMenu = function SiteMenu(_ref6) {
       }, /*#__PURE__*/React.createElement(Tooltip, {
         text: title,
         top: ".5rem",
-        left: "2rem"
+        left: "4.5rem"
       }, /*#__PURE__*/React.createElement(Icon, {
         key: id,
         icon: icon,
@@ -4301,74 +4301,213 @@ var UploadDialog = function UploadDialog(_ref) {
  * File Explorer
  */
 var FileExplorer = function FileExplorer(props) {
-  var title = props.title,
+  var _useState = useState("10002"),
+    selectedFolder = _useState[0],
+    setSelectedFolder = _useState[1];
+  var _useState2 = useState(),
+    selectedFile = _useState2[0],
+    setSelectedFile = _useState2[1];
+  var _useState3 = useState(),
+    search = _useState3[0],
+    setSearch = _useState3[1];
+  function selectFolder(id) {
+    setSelectedFolder(id);
+  }
+  function selectFile(id) {
+    setSelectedFile(id);
+  }
+  function searchChanged(value) {
+    setSearch(value);
+  }
+  var filteredFiles = search ? files.filter(function (file) {
+    return file.title.toLowerCase().includes(search.toLowerCase());
+  }) : files;
+  var selectedFiles = filteredFiles.filter(function (file) {
+    return file.folder === selectedFolder;
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: "1rem",
+      flex: "1",
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(FileExplorerView, {
+    title: "File Explorer Test",
+    folders: folders,
+    selectedFolder: selectedFolder,
+    onSelectFolder: selectFolder,
+    files: selectedFiles,
+    selectedFile: selectedFile,
+    onSelectFile: selectFile,
+    search: search,
+    onSearch: searchChanged
+  }));
+};
+
+/**
+ * File Explorer View
+ */
+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 = 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.createElement("div", {
     className: "file-explorer"
-  }, /*#__PURE__*/React.createElement("header", null, title, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement(Icon, {
-    icon: "info"
-  }))), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(FilesGrid, {
-    files: files
-  })), /*#__PURE__*/React.createElement("aside", null));
+  }, /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("header", {
+    className: "folder-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "folder-title"
+  }, folderTitle)), /*#__PURE__*/React.createElement("div", {
+    className: "folder-actions"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "list",
+    clickable: true,
+    action: switchView,
+    checked: view === "list"
+  }), /*#__PURE__*/React.createElement(Icon, {
+    icon: "grid_view",
+    clickable: true,
+    action: switchView,
+    checked: view === "grid"
+  })), /*#__PURE__*/React.createElement(FilesSearchBox, {
+    search: search,
+    onSearch: onSearch
+  })), /*#__PURE__*/React.createElement("menu", null, /*#__PURE__*/React.createElement(FoldersTreeView, {
+    folders: folders,
+    selected: selectedFolder,
+    onSelect: onSelectFolder
+  })), /*#__PURE__*/React.createElement("main", null, view === 'grid' ? /*#__PURE__*/React.createElement(FilesGridView, {
+    files: files,
+    selected: selectedFile,
+    onSelect: onSelectFile
+  }) : null, view === 'list' ? /*#__PURE__*/React.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.createElement(Tree, null, folders.map(function (folder) {
+    return /*#__PURE__*/React.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.createElement("div", {
+    className: "file-searchbox"
+  }, /*#__PURE__*/React.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 = 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.createElement("div", {
-    className: "file-view file-view--icons"
+    className: "files-grid"
   }, files.map(function (file) {
-    return /*#__PURE__*/React.createElement(FileIcon, {
+    return /*#__PURE__*/React.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.createElement("div", {
-    className: "file-icon " + style,
+    className: "file-item " + style,
     onClick: select
   }, /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("img", {
     src: src
-  })), /*#__PURE__*/React.createElement("main", null, icon ? /*#__PURE__*/React.createElement(Icon, {
-    size: "small",
-    icon: icon
-  }) : null, /*#__PURE__*/React.createElement("label", null, label)), footer ? /*#__PURE__*/React.createElement("footer", null, footer) : null);
+  })), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement("div", {
+    className: "file-item-title"
+  }, title), /*#__PURE__*/React.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.createElement("div", {
+    className: "files-table"
+  }, /*#__PURE__*/React.createElement(DataTable, table));
 };
 
 /**
@@ -10950,5 +11089,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Accordion, Avatar, Button, Calendar, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DateRange, Dialog, DropDown, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FilesGrid, Form, HTTPClient, Header, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MultiSelector, Page, PageContext, PageProvider, PasswordEditor, PasswordField, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextField, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction };
+export { Accordion, Avatar, Button, Calendar, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DateRange, Dialog, DropDown, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FileExplorerView, FileGridItem, FilesGridView, FilesSearchBox, FilesTableView, FoldersTreeView, Form, HTTPClient, Header, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MultiSelector, Page, PageContext, PageProvider, PasswordEditor, PasswordField, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextField, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction };
 //# sourceMappingURL=index.modern.js.map