Merge pull request #399 from FleekHQ/feature/table-new-ui

release table-new-ui to develop

package.json

@@ -23,10 +23,11 @@
     "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
-    "@fleekhq/space-client": "^1.1.7",
+    "@fleekhq/space-client": "^1.1.10",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-brands-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@fortawesome/pro-duotone-svg-icons": "^5.15.1",
     "@fortawesome/pro-light-svg-icons": "^5.13.0",
     "@fortawesome/pro-regular-svg-icons": "^5.13.0",
     "@fortawesome/pro-solid-svg-icons": "^5.13.0",

public/electron/events/objects.js

@@ -20,6 +20,9 @@ const OPEN_PUBLIC_FILE_SUCCESS_EVENT = `${EVENT_PREFIX}:openPublicFile:success`;
 const SEARCH_EVENT = `${EVENT_PREFIX}:search`;
 const SEARCH_ERROR_EVENT = `${SEARCH_EVENT}:error`;
 const SEARCH_SUCCESS_EVENT = `${SEARCH_EVENT}:success`;
+const DELETE_OBJECT_EVENT = `${EVENT_PREFIX}:deleteObject`;
+const DELETE_OBJECT_ERROR_EVENT = `${EVENT_PREFIX}:deleteObject:error`;
+const DELETE_OBJECT_SUCCESS_EVENT = `${EVENT_PREFIX}:deleteObject:success`;
 
 const DEFAULT_BUCKET = 'personal';
 
@@ -88,6 +91,7 @@ const listSharedFiles = async (mainWindow, payload = {}) => {
         dbId: item.getDbid(),
         sourceBucket: item.getBucket(),
         isPublicLink: item.getIspubliclink(),
+        sharedBy: item.getSharedby(),
         ...entryToObject(entry, 'shared-with-me'),
       };
     });
@@ -99,6 +103,7 @@ const listSharedFiles = async (mainWindow, payload = {}) => {
         dbId: item.getDbid(),
         sourceBucket: item.getBucket(),
         isPublicLink: item.getIspubliclink(),
+        sharedBy: item.getSharedby(),
         ...entryToObject(entry, 'shared-with-me'),
       };
     });
@@ -235,6 +240,20 @@ const registerObjectsEvents = (mainWindow) => {
       });
     }
   });
+
+  ipcMain.on(DELETE_OBJECT_EVENT, async (event, payload) => {
+    try {
+      await spaceClient.removeDirOrFile({
+        bucket: payload.bucket,
+        path: payload.path,
+      });
+      mainWindow.webContents.send(DELETE_OBJECT_SUCCESS_EVENT);
+    } catch (err) {
+      mainWindow.webContents.send(DELETE_OBJECT_ERROR_EVENT, {
+        error: err.message,
+      });
+    }
+  });
 };
 
 module.exports = {

src/UI/ContextMenu/context-menu.stories.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import ContextMenu, { CONTEXT_OPTION_IDS } from './index';
+import { faExpandArrowsAlt } from '@fortawesome/pro-regular-svg-icons/faExpandArrowsAlt';
+import { faShare } from '@fortawesome/pro-regular-svg-icons/faShare';
+import { faPencil } from '@fortawesome/pro-regular-svg-icons/faPencil';
+import { faTrash } from '@fortawesome/pro-regular-svg-icons/faTrash';
+
+const categoryName = 'ContextMenu';
+
+storiesOf(categoryName, module).add('default', () => {
+  const defaultProps = {
+    menuItemOnClick: (id) => { console.log(id) },
+    items: [
+      {
+        id: CONTEXT_OPTION_IDS.open,
+        displayText: 'Open',
+        icon: faExpandArrowsAlt,
+      },
+      {
+        id: CONTEXT_OPTION_IDS.share,
+        displayText: 'Share',
+        icon: faShare,
+      },
+      {
+        id: CONTEXT_OPTION_IDS.rename,
+        displayText: 'Rename',
+        icon: faPencil,
+      },
+      {
+        id: CONTEXT_OPTION_IDS.trash,
+        displayText: 'Move to Trash',
+        icon: faTrash,
+      },
+    ]
+  };
+
+  return (
+    <div style={{ padding: 20 }}>
+      <ContextMenu {...defaultProps} />
+    </div>
+  );
+});

src/UI/ContextMenu/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Paper from '@material-ui/core/Paper';
+import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+
+import useStyles from './styles';
+
+export const CONTEXT_OPTION_IDS = {
+  open: 'open',
+  share: 'share',
+  rename: 'rename',
+  trash: 'trash',
+};
+
+const ContextMenu = ({
+  menuItemOnClick,
+  items,
+  onClickAway,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <ClickAwayListener onClickAway={onClickAway}>
+      <Paper className={classes.paper}>
+        {items.map((item) => (
+          <MenuItem
+            className={classes.menuItem}
+            onClick={() => menuItemOnClick(item.id)}
+          >
+            <div className={classes.iconContainer}>
+              <FontAwesomeIcon
+                icon={item.icon}
+                className={classes.icon}
+              />
+            </div>
+            <Typography
+              className={classes.displayText}
+            >
+              {item.displayText}
+            </Typography>
+          </MenuItem>
+        ))}
+      </Paper>
+    </ClickAwayListener>
+  );
+};
+
+ContextMenu.propTypes = {
+  menuItemOnClick: PropTypes.func.isRequired,
+  i18n: PropTypes.shape({
+    open: PropTypes.string,
+    share: PropTypes.string,
+    rename: PropTypes.string,
+    trash: PropTypes.string,
+  }).isRequired,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      displayText: PropTypes.string,
+      icon: PropTypes.element,
+    }),
+  ).isRequired,
+  onClickAway: PropTypes.func.isRequired,
+};
+
+export default ContextMenu;

src/UI/ContextMenu/styles.js

@@ -0,0 +1,43 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const getOuterBorder = () => ('1px solid #D8D8d8');
+const getInnerBorder = (theme) => (`1px solid ${theme.palette.palette.gray4}`);
+
+export default makeStyles((theme) => ({
+  paper: {
+    width: 165,
+    boxShadow: '0px 3px 6px #00000029',
+    borderRadius: 6,
+  },
+  menuItem: {
+    display: 'flex',
+    alignContent: 'center',
+    justifyContent: 'flex-start',
+    padding: '11px 0px 11px 15px',
+    borderRight: getOuterBorder(theme),
+    borderLeft: getOuterBorder(theme),
+    borderBottom: getInnerBorder(theme),
+    '&:first-child': {
+      borderTop: getOuterBorder(theme),
+      borderTopRightRadius: 6,
+      borderTopLeftRadius: 6,
+    },
+    '&:last-child': {
+      borderBottom: getOuterBorder(theme),
+      borderBottomRightRadius: 6,
+      borderBottomLeftRadius: 6,
+    },
+  },
+  iconContainer: {
+    width: 21,
+    display: 'flex',
+    alignContent: 'center',
+  },
+  icon: {
+    fontSize: 11,
+    color: '#7F8185',
+  },
+  displayText: {
+    fontSize: 14,
+  },
+}));

src/UI/HoverMenu/hover-menu.stories.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import HoverMenu, { HOVER_OPTION_IDS } from './index';
+import { faSyncAlt } from '@fortawesome/pro-regular-svg-icons/faSyncAlt';
+import { faTimes } from '@fortawesome/pro-regular-svg-icons/faTimes';
+
+const categoryName = 'HoverMenu';
+
+storiesOf(categoryName, module).add('default', () => {
+  const defaultProps = {
+    menuItemOnClick: (id) => { console.log(id) },
+    i18n: {
+      cancel: 'Cancel',
+      retry: 'Retry',
+    },
+    items: [
+      {
+        id: HOVER_OPTION_IDS.retry,
+        icon: faSyncAlt,
+      },
+      {
+        id: HOVER_OPTION_IDS.cancel,
+        icon: faTimes,
+      },
+    ]
+  };
+
+  return (
+    <div style={{ padding: 100 }}>
+      <HoverMenu {...defaultProps} />
+    </div>
+  );
+});

src/UI/HoverMenu/index.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Paper from '@material-ui/core/Paper';
+import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@material-ui/core/Typography';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Tooltip from '@material-ui/core/Tooltip';
+import classnames from 'classnames';
+
+import useStyles from './styles';
+
+export const HOVER_OPTION_IDS = {
+  retry: 'retry',
+  cancel: 'cancel',
+};
+
+const HoverMenu = ({
+  menuItemOnClick,
+  items,
+  i18n,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <Paper className={classes.paper}>
+      {items.map((item) => (
+        <>
+          <Tooltip
+            key={item.id}
+            enterDelay={1000}
+            enterNextDelay={1000}
+            arrow
+            interactive
+            placement="top"
+            classes={{
+              popper: classes.popperRoot,
+              tooltip: classes.tooltipRoot,
+              arrow: classes.tooltipArrow,
+            }}
+            title={<Typography color="inherit" variant="body2">{i18n[item.id]}</Typography>}
+          >
+            <MenuItem
+              className={classes.menuItem}
+              onClick={() => menuItemOnClick(item.id)}
+            >
+              <div className={classes.iconContainer}>
+                <FontAwesomeIcon
+                  icon={item.icon}
+                  className={classnames(classes.icon, {
+                    [classes.cancelIcon]: item.id === HOVER_OPTION_IDS.cancel,
+                  })}
+                />
+              </div>
+              <Typography
+                className={classes.displayText}
+              >
+                {item.displayText}
+              </Typography>
+            </MenuItem>
+          </Tooltip>
+        </>
+      ))}
+    </Paper>
+  );
+};
+
+HoverMenu.defaultProps = {
+  items: [],
+};
+
+HoverMenu.propTypes = {
+  menuItemOnClick: PropTypes.func.isRequired,
+  i18n: PropTypes.shape({
+    retry: PropTypes.string,
+    cancel: PropTypes.string,
+  }).isRequired,
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      icon: PropTypes.element,
+    }),
+  ),
+};
+
+export default HoverMenu;

src/UI/HoverMenu/styles.js

@@ -0,0 +1,56 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const getBorder = () => ('1px solid #D8D8d8');
+
+export default makeStyles((theme) => ({
+  paper: {
+    width: 'fit-content',
+    boxShadow: '0px 3px 6px #00000029',
+    borderRadius: 6,
+    display: 'flex',
+    flexDirection: 'row',
+    height: 32,
+  },
+  menuItem: {
+    width: 32,
+    display: 'flex',
+    alignContent: 'center',
+    justifyContent: 'center',
+    borderBottom: getBorder(theme),
+    borderTop: getBorder(theme),
+    '&:first-child': {
+      borderTopLeftRadius: 6,
+      borderBottomLeftRadius: 6,
+      borderLeft: getBorder(theme),
+    },
+    '&:last-child': {
+      borderTopRightRadius: 6,
+      borderBottomRightRadius: 6,
+      borderRight: getBorder(theme),
+    },
+  },
+  iconContainer: {
+    width: 21,
+    display: 'flex',
+    alignContent: 'center',
+  },
+  icon: {
+    fontSize: 14,
+    color: '#7F8185',
+  },
+  cancelIcon: {
+    fontSize: 19,
+  },
+  tooltipRoot: {
+    margin: 0,
+    maxWidth: 300,
+    padding: '5px 10px',
+    color: theme.palette.common.white,
+    backgroundColor: '#171717',
+    borderRadius: 4,
+    top: -5,
+  },
+  tooltipArrow: {
+    color: '#171717',
+  },
+}));