ywana-core8 0.0.354 → 0.0.357

package/dist/index.cjs

@@ -639,7 +639,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 = React.useState(false),
       open = _useState[0],
@@ -655,6 +657,7 @@ var MenuIcon = function MenuIcon(props) {
     className: "menu-icon"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: icon,
+    size: size,
     clickable: true,
     action: toggle
   }), open ? /*#__PURE__*/React__default["default"].createElement("menu", {
@@ -3464,6 +3467,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__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 
  */
@@ -6096,6 +6187,8 @@ exports.DropDown = DropDown;
 exports.EditContentDialog = EditContentDialog;
 exports.FORMATS = FORMATS;
 exports.FieldEditor = FieldEditor;
+exports.FileExplorer = FileExplorer;
+exports.FileIconsView = FileIconsView;
 exports.Form = Form;
 exports.HTTPClient = HTTPClient;
 exports.Header = Header;