Skip to content

Commit

Permalink
Merge 8c903cb into 01ebccb
Browse files Browse the repository at this point in the history
  • Loading branch information
@neocybereth
neocybereth committed Feb 21, 2019
2 parents 01ebccb + 8c903cb commit 6925647
Show file tree
Hide file tree
Showing 14 changed files with 1,295 additions and 860 deletions.
2 changes: 1 addition & 1 deletion .travis.yml
View file
Expand Up @@ -48,7 +48,7 @@ install:
else
:
fi
before_script:
# On Linux, create a "virtual display". This allows browsers to work properly
- if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then export DISPLAY=:99.0; fi
Expand Down
1,395 changes: 818 additions & 577 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -45,7 +45,7 @@
"dependencies": {
"@material-ui/core": "^3.8.3",
"@material-ui/icons": "^3.0.1",
"conseiljs": "0.2.0",
"conseiljs": "^0.2.0",
"moment": "^2.23.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
Expand Down
61 changes: 39 additions & 22 deletions src/components/ColumnsDisplay/index.tsx
View file
@@ -1,12 +1,16 @@
import * as React from 'react';
import { connect } from 'react-redux';
import { getEntity, getColumns } from '../../reducers/app/selectors';
import { setColumns } from '../../reducers/app/thunks';
import {
getEntity,
getColumns,
getAttributes,
} from '../../reducers/app/selectors';
import { setColumns, fetchAttributes } from '../../reducers/app/thunks';
import styled from 'styled-components';
import { withStyles } from '@material-ui/core/styles';
import Checkbox from '@material-ui/core/Checkbox';
import ListItemText from '@material-ui/core/ListItemText';
import getColumnData from 'src/utils/getColumns';
// import getColumnData from 'src/utils/getColumns';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
Expand Down Expand Up @@ -171,16 +175,21 @@ const styles = {
};

interface SelectedColumnsData {
dataIndex: string;
title: string;
key: string;
cardinality: null | number;
dataType: string;
displayName: string;
entity: string;
keyType: string;
name: string;
}

type Props = {
selectedEntity: string;
attributes: any;
setColumns: (entity: string, items: object[]) => void;
selectedColumns: object[];
classes: any;
fetchAttributes: () => void;
};

type States = {
Expand All @@ -197,16 +206,17 @@ class ColumnDisplay extends React.Component<Props, States> {
};

componentDidMount() {
const { selectedColumns } = this.props;
const { selectedColumns, attributes } = this.props;
this.setState({
selected: [...selectedColumns],
});
}

componentWillReceiveProps(nextProps: Props) {
if (nextProps.selectedColumns !== this.state.selected) {
componentDidUpdate(prevProps: Props) {
const { selectedColumns } = this.props;
if (selectedColumns !== prevProps.selectedColumns) {
this.setState({
selected: [...nextProps.selectedColumns],
selected: [...selectedColumns],
});
}
}
Expand All @@ -222,7 +232,7 @@ class ColumnDisplay extends React.Component<Props, States> {
handleChange = (name: SelectedColumnsData) => event => {
const { selected } = this.state;
const positionInArray = selected.findIndex(
selected => selected.dataIndex === name.dataIndex
selected => selected.name === name.name
);
if (positionInArray === -1 && selected.length <= 5) {
this.setState({
Expand Down Expand Up @@ -257,7 +267,7 @@ class ColumnDisplay extends React.Component<Props, States> {
};

render() {
const { selectedEntity, selectedColumns, classes } = this.props;
const { selectedEntity, selectedColumns, classes, attributes } = this.props;
const { anchorEl, fadeBottom, selected } = this.state;
let tab;
switch (selectedEntity) {
Expand All @@ -271,8 +281,8 @@ class ColumnDisplay extends React.Component<Props, States> {
tab = 'accounts';
break;
}
const selectedDataIndex = selected.map(selected => {
return selected.dataIndex;
const selectedName = selected.map(selected => {
return selected.name;
});

return (
Expand All @@ -286,27 +296,32 @@ class ColumnDisplay extends React.Component<Props, States> {
<ArrowIcon />
</ButtonShell>
<MenuContainer>
<Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={this.cancelChange}>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.cancelChange}
>
<NestedTitle>Select Up to 6 Columns to Display</NestedTitle>
<MenuContents onScroll={this.handleScroll}>
<FadeTop />
{getColumnData(tab).map(name => (
{attributes.map((name, index) => (
<MenuItem
className={
selected.length >= 6 &&
selectedDataIndex.indexOf(name.dataIndex) === -1
selectedName.indexOf(name.name) === -1
? classes.removeSelector
: null
}
classes={{ root: classes.menuItem }}
onClick={this.handleChange(name)}
key={name.key}
value={name.dataIndex}
key={index}
value={name.name}
>
<Checkbox
className={
selected.length >= 6 &&
selectedDataIndex.indexOf(name.dataIndex) === -1
selectedName.indexOf(name.name) === -1
? classes.removeSelector
: null
}
Expand All @@ -315,9 +330,9 @@ class ColumnDisplay extends React.Component<Props, States> {
checked: classes.checked,
}}
disableRipple={true}
checked={selectedDataIndex.indexOf(name.dataIndex) > -1}
checked={selectedName.indexOf(name.name) > -1}
/>
<ListItemText primary={name.title} />
<ListItemText primary={name.displayName} />
<DraggableIcon />
</MenuItem>
))}
Expand All @@ -340,11 +355,13 @@ class ColumnDisplay extends React.Component<Props, States> {
const mapStateToProps = state => ({
selectedEntity: getEntity(state),
selectedColumns: getColumns(state),
attributes: getAttributes(state),
});

const mapDispatchToProps = dispatch => ({
setColumns: (entity: string, items: object[]) =>
dispatch(setColumns(entity, items)),
fetchAttributes: () => dispatch(fetchAttributes()),
});

export default connect(
Expand Down
111 changes: 102 additions & 9 deletions src/components/CustomTableRow/index.tsx
View file
@@ -1,10 +1,11 @@
import * as React from 'react';
import * as moment from 'moment';
import { connect } from 'react-redux';
import { getColumns } from '../../reducers/app/selectors';
import { getColumns, getNetwork } from '../../reducers/app/selectors';
import styled from 'styled-components';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import Circle from '@material-ui/icons/FiberManualRecord';

const TableRowWrapper = styled(TableRow)`
&&& {
Expand All @@ -13,6 +14,17 @@ const TableRowWrapper = styled(TableRow)`
}
}
`;

const StyledCircle1 = styled(Circle)`
color: rgb(255, 155, 213);
`;

const StyledCircle2 = styled(Circle)`
color: rgb(215, 195, 113);
margin-left: -4px;
margin-right: 7px;
`;

const StyledCell = styled(TableCell)`
&&& {
color: #4a4a4a;
Expand All @@ -26,25 +38,105 @@ const StyledCell = styled(TableCell)`
const SpanContainer = styled.span`
display: flex;
`;

const ExplorerLink = styled.a`
text-decoration: none;
color: #10ade4;
`;
interface Props {
entity: string;
item: any;
selectedColumns: any[];
network: string;
}

export const displayType = (network, shortenedItem, item, name) => {
if (name === 'account_id' || name === 'manager') {
return (
<React.Fragment>
<StyledCircle1 />
<StyledCircle2 />
<ExplorerLink
href={`https://${network}.tzscan.io/${item[name]}`}
target="_blank"
>
{shortenedItem[name]}
</ExplorerLink>
</React.Fragment>
);
} else if (
name === 'predecessor' ||
name === 'hash' ||
name === 'block_id' ||
name === 'block_hash' ||
name === 'operation_group_hash' ||
name === 'delegate'
) {
return (
<React.Fragment>
<ExplorerLink
href={`https://${network}.tzscan.io/${item[name]}`}
target="_blank"
>
{shortenedItem[name]}
</ExplorerLink>
</React.Fragment>
);
} else if (
name === 'protocol' ||
name === 'context' ||
name === 'operations_hash' ||
name === 'signature'
) {
return shortenedItem[name];
} else {
return item[name];
}
};

const CustomTableRow: React.StatelessComponent<Props> = props => {
const { selectedColumns, item } = props;
const { selectedColumns, item, network } = props;
const shortenedItem = { ...item };
let itemsArray = Object.keys(shortenedItem);
itemsArray.forEach(hash => {
if (item[hash] === null) {
return;
} else if (
hash.toLowerCase().includes('hash') ||
hash.toLowerCase().includes('predecessor') ||
hash.toLowerCase().includes('account_id') ||
hash.toLowerCase().includes('block_id') ||
hash.toLowerCase() === 'manager' ||
hash.toLowerCase().includes('protocol') ||
hash.toLowerCase().includes('block_hash') ||
hash.toLowerCase() === 'delegate' ||
hash.toLowerCase().includes('operation_group_hash') ||
hash.toLowerCase().includes('context') ||
hash.toLowerCase().includes('signature')
) {
const hashRepresentation = item[hash];
const firstHalf = hashRepresentation.substring(0, 6);
const secondHalf = hashRepresentation.substring(
hashRepresentation.length - 6,
hashRepresentation.length
);
const newHash = `${firstHalf}...${secondHalf}`;
shortenedItem[hash] = newHash;
}
return shortenedItem[hash];
});

return (
<TableRowWrapper>
{selectedColumns.map(column => {
{selectedColumns.map((column, index) => {
return (
<StyledCell key={column.key}>
{column.dataIndex === 'timestamp' ? (
moment(item[column.dataIndex]).format('dd MM YYYY h:mm:ss a')
<StyledCell key={index}>
{column.name === 'timestamp' ? (
moment(item[column.name]).format('dd MM YYYY h:mm:ss a')
) : (
// NOTE: SpanContainer necessary to avoid error (for passing isIcon: boolean):
// Warning: Failed prop type: Invalid prop children supplied to TableCell, expected a ReactNode.
<SpanContainer>{item[column.dataIndex]}</SpanContainer>
<SpanContainer>
{displayType(network, shortenedItem, item, column.name)}
</SpanContainer>
)}
</StyledCell>
);
Expand All @@ -54,6 +146,7 @@ const CustomTableRow: React.StatelessComponent<Props> = props => {
};

const mapStateToProps = (state: any) => ({
network: getNetwork(state),
selectedColumns: getColumns(state),
});

Expand Down

0 comments on commit 6925647

Please sign in to comment.