ywana-core8 0.0.352 → 0.0.355

package/dist/index.modern.js

@@ -631,7 +631,9 @@ var MenuIcon = function MenuIcon(props) {
   var _props$icon = props.icon,
       icon = _props$icon === void 0 ? "more_vert" : _props$icon,
       children = props.children,
-      align = props.align;
+      align = props.align,
+      _props$size = props.size,
+      size = _props$size === void 0 ? "normal" : _props$size;
 
   var _useState = useState(false),
       open = _useState[0],
@@ -647,6 +649,7 @@ var MenuIcon = function MenuIcon(props) {
     className: "menu-icon"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
+    size: size,
     clickable: true,
     action: toggle
   }), open ? /*#__PURE__*/React.createElement("menu", {
@@ -3097,6 +3100,7 @@ var Site = function Site(_ref3) {
       logo = _ref3.logo,
       title = _ref3.title,
       toolbar = _ref3.toolbar,
+      footer = _ref3.footer,
       children = _ref3.children,
       init = _ref3.init,
       min = _ref3.min,
@@ -3118,7 +3122,7 @@ var Site = function Site(_ref3) {
     init: init
   }, children, /*#__PURE__*/React.createElement(Page, {
     id: "EMPTY"
-  }, "EMPTY")), /*#__PURE__*/React.createElement(SiteAside, null), /*#__PURE__*/React.createElement(SiteConsole, null), /*#__PURE__*/React.createElement(SiteDialog, null), /*#__PURE__*/React.createElement(SitePromptDialog, null), /*#__PURE__*/React.createElement(SitePreview, null), /*#__PURE__*/React.createElement(SiteNotifications, null)));
+  }, "EMPTY")), /*#__PURE__*/React.createElement(SiteAside, null), /*#__PURE__*/React.createElement(SiteConsole, null), /*#__PURE__*/React.createElement(SiteDialog, null), /*#__PURE__*/React.createElement(SitePromptDialog, null), /*#__PURE__*/React.createElement(SitePreview, null), /*#__PURE__*/React.createElement(SiteNotifications, null), /*#__PURE__*/React.createElement(SiteFooter, null, footer)));
 };
 
 var SiteNotifications = function SiteNotifications() {
@@ -3148,6 +3152,16 @@ var SiteToolBar = function SiteToolBar(_ref4) {
   useContext(SiteContext);
   return /*#__PURE__*/React.createElement("nav", null, children);
 };
+/**
+ * Site Footer
+ */
+
+
+var SiteFooter = function SiteFooter(_ref5) {
+  var children = _ref5.children;
+  useContext(SiteContext);
+  return /*#__PURE__*/React.createElement("footer", null, children);
+};
 /**
  * Site Aside
  */
@@ -3162,10 +3176,10 @@ var SiteAside = function SiteAside() {
  */
 
 
-var SiteMenu = function SiteMenu(_ref5) {
-  var title = _ref5.title,
-      children = _ref5.children,
-      min = _ref5.min;
+var SiteMenu = function SiteMenu(_ref6) {
+  var title = _ref6.title,
+      children = _ref6.children,
+      min = _ref6.min;
   var context = useContext(SiteContext);
   var page = context.page,
       sideNav = context.sideNav,
@@ -3211,11 +3225,11 @@ var SiteMenu = function SiteMenu(_ref5) {
       key: title
     }, /*#__PURE__*/React.createElement("div", {
       className: "section-title " + style
-    }, sideNav === "max" ? title : ''), sections[title].map(function (_ref6) {
-      var id = _ref6.id,
-          _ref6$icon = _ref6.icon,
-          icon = _ref6$icon === void 0 ? 'info' : _ref6$icon,
-          title = _ref6.title;
+    }, sideNav === "max" ? title : ''), sections[title].map(function (_ref7) {
+      var id = _ref7.id,
+          _ref7$icon = _ref7.icon,
+          icon = _ref7$icon === void 0 ? 'info' : _ref7$icon,
+          title = _ref7.title;
       var styleItem = id === page ? 'selected' : '';
       return /*#__PURE__*/React.createElement("div", {
         className: "site-menu-item " + styleItem,
@@ -3245,9 +3259,9 @@ var SiteMenu = function SiteMenu(_ref5) {
  */
 
 
-var SitePage = function SitePage(_ref7) {
-  var children = _ref7.children,
-      init = _ref7.init;
+var SitePage = function SitePage(_ref8) {
+  var children = _ref8.children,
+      init = _ref8.init;
   var context = useContext(SiteContext);
   var page = context.page;
   useEffect(function () {
@@ -3445,6 +3459,94 @@ var UploadDialog = function UploadDialog(_ref) {
   }));
 };
 
+/**
+ * File Explorer
+ */
+
+var FileExplorer = function FileExplorer(props) {
+  var _props$files = props.files,
+      files = _props$files === void 0 ? [] : _props$files;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "file-explorer"
+  }, /*#__PURE__*/React.createElement("header", null, "header"), /*#__PURE__*/React.createElement("nav", null, "nav"), /*#__PURE__*/React.createElement("menu", null, "menu"), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement(FileIconsView, {
+    files: files
+  })), /*#__PURE__*/React.createElement("aside", null), /*#__PURE__*/React.createElement("footer", null, "footer"));
+};
+/**
+ * File Icons View
+ */
+
+var FileIconsView = function FileIconsView(props) {
+  var _props$files2 = props.files,
+      files = _props$files2 === void 0 ? [] : _props$files2,
+      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"
+  }, files.map(function (file) {
+    return /*#__PURE__*/React.createElement(FileIcon, {
+      file: file,
+      onSelect: select,
+      selected: isSelected(file.id)
+    });
+  }));
+};
+/**
+ * File Icon
+ */
+
+var FileIcon = function FileIcon(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,
+      _file$actions = file.actions,
+      actions = _file$actions === void 0 ? [] : _file$actions,
+      _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;
+
+  function select() {
+    if (onSelect && !selected) onSelect(id);
+  }
+
+  var style = selected ? 'file-icon--selected' : '';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "file-icon " + style,
+    onClick: select
+  }, /*#__PURE__*/React.createElement("header", null, icon ? /*#__PURE__*/React.createElement(Icon, {
+    size: "small",
+    icon: icon
+  }) : null, /*#__PURE__*/React.createElement(MenuIcon, {
+    size: "small"
+  }, actions.map(function (action) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      icon: action.icon,
+      label: action.label,
+      onSelect: action.execute
+    });
+  }))), /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("img", {
+    src: src
+  })), /*#__PURE__*/React.createElement("main", null, /*#__PURE__*/React.createElement("label", null, label)), footer ? /*#__PURE__*/React.createElement("footer", null, footer) : null);
+};
+
 /**
  * Content Form 
  */
@@ -6057,5 +6159,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Avatar, Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, CollectionTree, Content, ContentEditor, ContentForm, CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES, Tab, TabbedContentEditor, TableEditor, TablePage, Tabs, Text, TextArea, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, UploadIcon, Uploader, View, Viewer, WaitScreen, isFunction };
+export { Avatar, Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, CollectionTree, Content, ContentEditor, ContentForm, CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, FileExplorer, FileIconsView, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TEXTFORMATS, TYPES, Tab, TabbedContentEditor, TableEditor, TablePage, Tabs, Text, TextArea, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadDialog, UploadFile, UploadIcon, Uploader, View, Viewer, WaitScreen, isFunction };
 //# sourceMappingURL=index.modern.js.map