ywana-core8 0.0.354 → 0.0.355

package/dist/index.umd.js

@@ -634,7 +634,9 @@
     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 = React.useState(false),
         open = _useState[0],
@@ -650,6 +652,7 @@
       className: "menu-icon"
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
       icon: icon,
+      size: size,
       clickable: true,
       action: toggle
     }), open ? /*#__PURE__*/React__default["default"].createElement("menu", {
@@ -3459,6 +3462,94 @@
     }));
   };
 
+  /**
+   * File Explorer
+   */
+
+  var FileExplorer = function FileExplorer(props) {
+    var _props$files = props.files,
+        files = _props$files === void 0 ? [] : _props$files;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "file-explorer"
+    }, /*#__PURE__*/React__default["default"].createElement("header", null, "header"), /*#__PURE__*/React__default["default"].createElement("nav", null, "nav"), /*#__PURE__*/React__default["default"].createElement("menu", null, "menu"), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FileIconsView, {
+      files: files
+    })), /*#__PURE__*/React__default["default"].createElement("aside", null), /*#__PURE__*/React__default["default"].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 = 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"
+    }, files.map(function (file) {
+      return /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
+      className: "file-icon " + style,
+      onClick: select
+    }, /*#__PURE__*/React__default["default"].createElement("header", null, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      size: "small",
+      icon: icon
+    }) : null, /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
+      size: "small"
+    }, actions.map(function (action) {
+      return /*#__PURE__*/React__default["default"].createElement(MenuItem, {
+        icon: action.icon,
+        label: action.label,
+        onSelect: action.execute
+      });
+    }))), /*#__PURE__*/React__default["default"].createElement("picture", null, /*#__PURE__*/React__default["default"].createElement("img", {
+      src: src
+    })), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement("label", null, label)), footer ? /*#__PURE__*/React__default["default"].createElement("footer", null, footer) : null);
+  };
+
   /**
    * Content Form 
    */
@@ -6091,6 +6182,8 @@
   exports.EditContentDialog = EditContentDialog;
   exports.FORMATS = FORMATS;
   exports.FieldEditor = FieldEditor;
+  exports.FileExplorer = FileExplorer;
+  exports.FileIconsView = FileIconsView;
   exports.Form = Form;
   exports.HTTPClient = HTTPClient;
   exports.Header = Header;