feat(Table): add justifyContent, alignItems, columnGap modifiers

8base · Jul 12, 2019 · 9dadf30 · 9dadf30
1 parent aa3f9e0
commit 9dadf30
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 51 deletions.
diff --git a/src/components/FlexLayout/FlexLayout.theme.js b/src/components/FlexLayout/FlexLayout.theme.js
@@ -1,48 +1,10 @@
 // @flow
 
 import { createThemeTag } from '../../theme/createThemeTag';
-
+import { paddingSizes, gapSizes, justifyContentStyles, alignContentStyles, alignItemsStyles } from '../../constants';
 
 const name = 'flex-layout';
 
-const paddingSizes = {
-  none: '0',
-  xs: '4px',
-  sm: '8px',
-  md: '16px',
-  lg: '24px',
-  xl: '32px',
-};
-
-const gapSizes = {
-  none: '0',
-  xs: '4px',
-  sm: '8px',
-  md: '16px',
-  lg: '24px',
-  xl: '32px',
-};
-
-const justifyContentStyles = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  between: 'space-between',
-  around: 'space-around',
-};
-
-const alignContentStyles = {
-  ...justifyContentStyles,
-  stretch: 'stretch',
-};
-
-const alignItemsStyles = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  baseline: 'baseline',
-  stretch: 'stretch',
-};
 
 const getGapStyle = (direction: 'row' | 'column', gapProp: $Keys<typeof gapSizes>) =>
   direction === 'row'
@@ -97,4 +59,4 @@ const [FlexLayoutTag, theme] = createThemeTag(name, {
 });
 
 
-export { FlexLayoutTag, theme };
+export { FlexLayoutTag, justifyContentStyles, alignContentStyles, alignItemsStyles, theme };
diff --git a/src/components/Table/TableBodyCell.js b/src/components/Table/TableBodyCell.js
@@ -2,23 +2,28 @@
 import React from 'react';
 
 import { createThemeTag } from '../../theme/createThemeTag';
-
 import { Row } from '../FlexLayout';
+import { justifyContentStyles, alignItemsStyles } from '../../constants';
+import type { PropLayoutStretch, PropLayout } from '../../types';
 
 type TableBodyCellProps = {
   children?: React$Node,
+  justifyContent?: PropLayoutStretch,
+  alignItems?: PropLayout,
 };
 
 const name = 'tableBodyCell';
 
 const [TableBodyCellTag, theme] = createThemeTag(name, ({ COLORS }: *) => ({
-  root: {
+  root: props => ({
     display: 'flex',
-    alignItems: 'center',
     wordBreak: 'break-all',
 
     padding: '8px 24px',
-  },
+
+    justifyContent: justifyContentStyles[props.justifyContent],
+    alignItems: alignItemsStyles[props.alignItems],
+  }),
   modifiers: {
     bordered: {
       borderLeft: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
@@ -37,4 +42,10 @@ function TableBodyCell({
   return <TableBodyCellTag { ...rest } tagName={ Row }>{ children }</TableBodyCellTag>;
 }
 
+TableBodyCell.defaultProps = {
+  alignItems: 'center',
+  justifyContent: 'start',
+};
+
+
 export { TableBodyCell, theme };
diff --git a/src/components/Table/TableBodyRow.js b/src/components/Table/TableBodyRow.js
@@ -3,20 +3,24 @@ import React from 'react';
 
 import { Grid } from '../Grid';
 import { createThemeTag } from '../../theme/createThemeTag';
+import { gapSizes } from '../../constants';
+import type { PropSizes } from '../../types';
 
 
 type TableBodyRowProps = {
   children?: React$Node,
+  columnGap?: PropSizes,
 };
 
 const name = 'tableBodyRow';
 
 const [TableBodyRowTag, theme] = createThemeTag(name, ({ COLORS }: *) => ({
-  root: {
+  root: props => ({
     display: 'grid',
     minHeight: '48px',
     borderBottom: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
-  },
+    columnGap: gapSizes[props.columnGap],
+  }),
   modifiers: {
     condensed: {
       minHeight: '36px',

diff --git a/src/components/Table/TableBuilder.js b/src/components/Table/TableBuilder.js
@@ -40,6 +40,7 @@ type TableState = {
 type TableBulderProps = {
   /** Options of the columns */
   columns: Array<ColumnType>,
+  columnGap: string,
   /** Data to show in table */
   data: Array<Object>,
   /** Callback to execute custom table action */

diff --git a/src/components/Table/TableHeader.js b/src/components/Table/TableHeader.js
@@ -3,22 +3,26 @@ import React from 'react';
 
 import { Grid } from '../Grid';
 import { createThemeTag } from '../../theme/createThemeTag';
+import { gapSizes } from '../../constants';
+import type { PropSizes } from '../../types';
 
 
 type TableHeaderProps = {
   children?: React$Node,
+  columnGap?: PropSizes,
 };
 
 const name = 'tableHeader';
 
 const [TableHeaderTag, theme] = createThemeTag(name, ({ COLORS }: *) => ({
-  root: {
+  root: props => ({
     display: 'grid',
     height: '48px',
     backgroundColor: COLORS.LIGHT_GRAY5,
     borderBottom: `1px solid ${COLORS.PRIMARY_BORDER_COLOR}`,
     color: COLORS.GRAY4,
-  },
+    columnGap: gapSizes[props.columnGap],
+  }),
 
   modifiers: {
     condensed: {

diff --git a/src/components/Table/TableHeaderCell.js b/src/components/Table/TableHeaderCell.js
@@ -2,8 +2,9 @@
 import React, { PureComponent } from 'react';
 
 import { createThemeTag } from '../../theme/createThemeTag';
-
 import { Row } from '../FlexLayout';
+import { justifyContentStyles, alignItemsStyles } from '../../constants';
+import type { PropLayoutStretch, PropLayout } from '../../types';
 import { Icon } from '../Icon';
 
 const DEFAULT_SORT = 'DESC';
@@ -14,14 +15,17 @@ type TableHeaderCellProps = {
   enableSort?: boolean,
   order?: 'ASC' | 'DESC',
   cursor?: 'pointer' | 'default' | 'inherit',
+  justifyContent?: PropLayoutStretch,
+  alignItems?: PropLayout,
 };
 
 const name = 'tableHeaderCell';
 
 const [TableHeaderCellTag, theme] = createThemeTag(name, ({ SIZES, COLORS }: *) => ({
   root: props => ({
     display: 'flex',
-    alignItems: 'center',
+    justifyContent: justifyContentStyles[props.justifyContent],
+    alignItems: alignItemsStyles[props.alignItems],
     cursor: props.cursor,
 
     padding: '0 24px',
@@ -44,6 +48,11 @@ const [TableHeaderCellTag, theme] = createThemeTag(name, ({ SIZES, COLORS }: *)
 
 class TableHeaderCell extends PureComponent<TableHeaderCellProps> {
 
+  static defaultProps = {
+    alignItems: 'center',
+    justifyContent: 'start',
+  }
+
   onSort = () => {
     const { onSort, order, enableSort } = this.props;
 

diff --git a/src/constants.js b/src/constants.js
@@ -0,0 +1,40 @@
+export const paddingSizes = {
+  none: '0',
+  xs: '4px',
+  sm: '8px',
+  md: '16px',
+  lg: '24px',
+  xl: '32px',
+  xxl: '48px',
+};
+
+export const gapSizes = {
+  none: '0',
+  xs: '4px',
+  sm: '8px',
+  md: '16px',
+  lg: '24px',
+  xl: '32px',
+  xxl: '48px',
+};
+
+export const justifyContentStyles = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  between: 'space-between',
+  around: 'space-around',
+};
+
+export const alignContentStyles = {
+  ...justifyContentStyles,
+  stretch: 'stretch',
+};
+
+export const alignItemsStyles = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  baseline: 'baseline',
+  stretch: 'stretch',
+};
diff --git a/src/types.js b/src/types.js
@@ -26,7 +26,7 @@ export type MetaType = {|
   visited?: boolean
 |};
 
-export type PropSizes = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type PropSizes = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
 export type PropLayout = 'start' | 'end' | 'between' | 'around' | 'center';