Skip to content

Commit

Permalink
refactor: update table to properly render actions/children
Browse files Browse the repository at this point in the history
  • Loading branch information
chanceaclark committed Sep 23, 2019
1 parent 115e8fe commit b1ea88e
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 140 deletions.
208 changes: 104 additions & 104 deletions packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,32 @@ exports[`render pagination component 1`] = `
width: 1.5rem;
}
.c7 {
border-radius: 0.25rem;
box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
background-color: #FFFFFF;
color: #313440;
display: inline-block;
margin: 0;
max-height: 15.625rem;
outline: none;
overflow-y: scroll;
padding: 0.5rem 0;
z-index: 1070;
}
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
Expand Down Expand Up @@ -61,32 +87,6 @@ exports[`render pagination component 1`] = `
width: 100%;
}
.c7 {
border-radius: 0.25rem;
box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
background-color: #FFFFFF;
color: #313440;
display: inline-block;
margin: 0;
max-height: 15.625rem;
outline: none;
overflow-y: scroll;
padding: 0.5rem 0;
z-index: 1070;
}
.c1 {
box-sizing: border-box;
}
Expand Down Expand Up @@ -498,6 +498,32 @@ exports[`render pagination component with invalid page info 1`] = `
width: 1.5rem;
}
.c7 {
border-radius: 0.25rem;
box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
background-color: #FFFFFF;
color: #313440;
display: inline-block;
margin: 0;
max-height: 15.625rem;
outline: none;
overflow-y: scroll;
padding: 0.5rem 0;
z-index: 1070;
}
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
Expand Down Expand Up @@ -546,32 +572,6 @@ exports[`render pagination component with invalid page info 1`] = `
width: 100%;
}
.c7 {
border-radius: 0.25rem;
box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
background-color: #FFFFFF;
color: #313440;
display: inline-block;
margin: 0;
max-height: 15.625rem;
outline: none;
overflow-y: scroll;
padding: 0.5rem 0;
z-index: 1070;
}
.c1 {
box-sizing: border-box;
}
Expand Down Expand Up @@ -983,6 +983,32 @@ exports[`render pagination component with invalid range info 1`] = `
width: 1.5rem;
}
.c7 {
border-radius: 0.25rem;
box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
background-color: #FFFFFF;
color: #313440;
display: inline-block;
margin: 0;
max-height: 15.625rem;
outline: none;
overflow-y: scroll;
padding: 0.5rem 0;
z-index: 1070;
}
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
Expand Down Expand Up @@ -1031,32 +1057,6 @@ exports[`render pagination component with invalid range info 1`] = `
width: 100%;
}
.c7 {
border-radius: 0.25rem;
box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
background-color: #FFFFFF;
color: #313440;
display: inline-block;
margin: 0;
max-height: 15.625rem;
outline: none;
overflow-y: scroll;
padding: 0.5rem 0;
z-index: 1070;
}
.c1 {
box-sizing: border-box;
}
Expand Down Expand Up @@ -1469,6 +1469,32 @@ exports[`render pagination component with no items 1`] = `
width: 1.5rem;
}
.c7 {
border-radius: 0.25rem;
box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
background-color: #FFFFFF;
color: #313440;
display: inline-block;
margin: 0;
max-height: 15.625rem;
outline: none;
overflow-y: scroll;
padding: 0.5rem 0;
z-index: 1070;
}
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
Expand Down Expand Up @@ -1517,32 +1543,6 @@ exports[`render pagination component with no items 1`] = `
width: 100%;
}
.c7 {
border-radius: 0.25rem;
box-shadow: 0px 1px 6px rgba(49,52,64,0.2);
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
background-color: #FFFFFF;
color: #313440;
display: inline-block;
margin: 0;
max-height: 15.625rem;
outline: none;
overflow-y: scroll;
padding: 0.5rem 0;
z-index: 1070;
}
.c1 {
box-sizing: border-box;
}
Expand Down
29 changes: 12 additions & 17 deletions packages/big-design/src/components/Table/Actions/Actions.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,18 @@
import React from 'react';
import React, { useContext } from 'react';

import { FlexProps } from '../../Flex';
import { TableContext } from '../context';

import { StyledActions } from './styled';

export interface TableActionsProps extends FlexProps {
selectable?: boolean;
tableId?: string;
}
export type TableActionsProps = FlexProps;

export const TableActions: React.FC<TableActionsProps> = ({
children,
className,
selectable,
style,
tableId,
...props
}) => (
<StyledActions padding="small" aria-controls={tableId} {...props}>
{children}
</StyledActions>
);
export const TableActions: React.FC<TableActionsProps> = ({ children, className, style, ...props }) => {
const tableContext = useContext(TableContext);

return (
<StyledActions padding="small" aria-controls={tableContext.tableId} {...props}>
{children}
</StyledActions>
);
};
23 changes: 4 additions & 19 deletions packages/big-design/src/components/Table/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,29 +29,14 @@ export function Table(this: Table, props: TableProps) {
const { children, className, selectable, stickyHeader, style, ...rest } = props;

const tableId = uniqueId('table_');
const tableActions: React.ReactChild[] = [];

function renderChildren() {
return React.Children.map(children, (child, index) => {
if (React.isValidElement(child) && child.type === Table.Actions) {
tableActions.push(
React.cloneElement<TableActionsProps>(child, {
selectable,
tableId: child.props.tableId ? child.props.tableId : tableId,
key: index,
}),
);
} else {
return child;
}
});
}
const actions = (children as React.ReactElement[]).filter(child => child.type === Table.Actions);
const content = (children as React.ReactElement[]).filter(child => child.type !== Table.Actions);

return (
<TableContext.Provider value={{ selectable, stickyHeader, tableId }}>
{tableActions ? tableActions : null}
{actions}
<StyledTable id={tableId} {...rest}>
{renderChildren()}
{content}
</StyledTable>
</TableContext.Provider>
);
Expand Down

0 comments on commit b1ea88e

Please sign in to comment.