From 8866685a8aa9170d3e9e8801aeb8881791b1461c Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Thu, 7 Jun 2018 14:44:46 -0700
Subject: [PATCH] Cleanup EntityItem, explicitly pass in all actions
---
.../metabase/components/CollectionLanding.jsx | 35 +++++--
.../src/metabase/components/EntityItem.jsx | 96 +++++++++----------
2 files changed, 70 insertions(+), 61 deletions(-)
diff --git a/frontend/src/metabase/components/CollectionLanding.jsx b/frontend/src/metabase/components/CollectionLanding.jsx
index 2c12107b9fe..45df29d0b93 100644
--- a/frontend/src/metabase/components/CollectionLanding.jsx
+++ b/frontend/src/metabase/components/CollectionLanding.jsx
@@ -4,7 +4,7 @@ import { t } from "c-3po";
import { connect } from "react-redux";
import _ from "underscore";
import listSelect from "metabase/hoc/ListSelect";
-import BulkActionBar from "metabase/components/BulkActionBar"
+import BulkActionBar from "metabase/components/BulkActionBar";
import * as Urls from "metabase/lib/urls";
import { normal } from "metabase/lib/colors";
@@ -96,7 +96,13 @@ class DefaultLanding extends React.Component {
};
render() {
- const { collectionId, list, onToggleSelected, selection, selected } = this.props;
+ const {
+ collectionId,
+ list,
+ onToggleSelected,
+ selection,
+ selected,
+ } = this.props;
// Show the
const showCollectionList = collectionId === "root";
@@ -189,29 +195,38 @@ class DefaultLanding extends React.Component {
name={item.getName()}
iconName={item.getIcon()}
iconColor={item.getColor()}
+ isFavorite={
+ item.getFavorited && item.getFavorited()
+ }
onFavorite={
item.setFavorited
? () => item.setFavorited(true)
: null
}
- isFavorite={
- item.getFavorited && item.getFavorited()
- }
onPin={
collection.can_write && item.setPinned
? () => item.setPinned(true)
: null
}
+ onMove={
+ collection.can_write
+ ? () => {
+ alert(
+ "FIXME: move not yet implemented!",
+ );
+ }
+ : null
+ }
+ onArchive={
+ collection.can_write && item.setArchived
+ ? () => item.setArchived(true)
+ : null
+ }
selected={selection.has(item)}
onToggleSelected={ev => {
ev.preventDefault();
onToggleSelected(item);
}}
- onArchived={
- item.setArchived
- ? () => item.setArchived(true)
- : null
- }
/>
</Link>
</Box>
diff --git a/frontend/src/metabase/components/EntityItem.jsx b/frontend/src/metabase/components/EntityItem.jsx
index e6e4ccafffe..6a9aca35306 100644
--- a/frontend/src/metabase/components/EntityItem.jsx
+++ b/frontend/src/metabase/components/EntityItem.jsx
@@ -1,8 +1,8 @@
import React from "react";
import { t } from "c-3po";
import EntityMenu from "metabase/components/EntityMenu";
-import Swapper from "metabase/components/Swapper"
-import IconWrapper from "metabase/components/IconWrapper"
+import Swapper from "metabase/components/Swapper";
+import IconWrapper from "metabase/components/IconWrapper";
import { Flex, Box, Truncate } from "rebass";
@@ -27,37 +27,51 @@ const EntityItem = ({
name,
iconName,
iconColor,
- item,
isFavorite,
onPin,
onFavorite,
+ onMove,
+ onArchive,
selected,
onToggleSelected,
selectable,
- showSelect
+ showSelect,
}) => {
+ const actions = [
+ onPin && {
+ title: t`Pin this item`,
+ icon: "pin",
+ action: onPin,
+ },
+ onMove && {
+ title: t`Move this item`,
+ icon: "move",
+ action: onMove,
+ },
+ onArchive && {
+ title: t`Archive`,
+ icon: "archive",
+ action: onArchive,
+ },
+ ].filter(action => action);
+
return (
<EntityItemWrapper py={2} px={2} className="hover-parent hover--visibility">
- <IconWrapper
- p={1}
- mr={1}
- align="center"
- justify="center"
- >
- { selectable ? (
- <Swapper
- startSwapped={showSelect}
- defaultElement={<Icon name={iconName} color={iconColor} />}
- swappedElement={
- <CheckBox
- checked={selected}
- onChange={(ev) => onToggleSelected(ev)}
- />
- }
- />
- ) : (
- <Icon name={iconName} color={iconColor} />
- )}
+ <IconWrapper p={1} mr={1} align="center" justify="center">
+ {selectable ? (
+ <Swapper
+ startSwapped={showSelect}
+ defaultElement={<Icon name={iconName} color={iconColor} />}
+ swappedElement={
+ <CheckBox
+ checked={selected}
+ onChange={ev => onToggleSelected(ev)}
+ />
+ }
+ />
+ ) : (
+ <Icon name={iconName} color={iconColor} />
+ )}
</IconWrapper>
<h3>
<Truncate>{name}</Truncate>
@@ -69,43 +83,23 @@ const EntityItem = ({
className="hover-child"
onClick={e => e.preventDefault()}
>
- { onFavorite && (
+ {(onFavorite || isFavorite) && (
<Icon
name={isFavorite ? "star" : "staroutline"}
mr={1}
- onClick={() => onFavorite()}
+ onClick={onFavorite}
/>
)}
- <EntityMenu
- triggerIcon="ellipsis"
- items={[
- {
- title: t`Pin this item`,
- icon: "pin",
- action: () => onPin(item),
- },
- {
- title: t`Move this item`,
- icon: "move",
- action: () => onPin(item),
- },
- {
- title: t`Archive`,
- icon: "archive",
- action: () => {
- item.setArchived(true)
- }
- },
- ]}
- />
+ {actions.length > 0 && (
+ <EntityMenu triggerIcon="ellipsis" items={actions} />
+ )}
</Flex>
</EntityItemWrapper>
);
};
-
EntityItem.defaultProps = {
- selectable: false
-}
+ selectable: false,
+};
export default EntityItem;
--
GitLab