fix: use ThemeProvider to variant and update index.d.js

nexxtway · Aug 21, 2020 · 4b08092 · 4b08092
1 parent ccc507f
commit 4b08092
Show file tree

Hide file tree

Showing 26 changed files with 85 additions and 143 deletions.
diff --git a/src/components/Table/body/actionsCell.js b/src/components/Table/body/actionsCell.js
@@ -25,7 +25,7 @@ function MenuItems({ children, rowData }) {
 }
 
 export default function ActionsCell(props) {
-    const { columnChildren, rowsLength, rowIndex, rowData, variant } = props;
+    const { columnChildren, rowsLength, rowIndex, rowData } = props;
 
     if (columnChildren) {
         const getMenuAlignment = () => {
@@ -45,8 +45,8 @@ export default function ActionsCell(props) {
         };
 
         return (
-            <StyledCellContainer role="gridcell" tabIndex={-1} variant={variant}>
-                <StyledActionCell variant={variant}>
+            <StyledCellContainer role="gridcell" tabIndex={-1}>
+                <StyledActionCell>
                     <ButtonMenu
                         tabIndex={-1}
                         icon={<MoreIcon />}
@@ -67,13 +67,11 @@ ActionsCell.propTypes = {
     rowsLength: PropTypes.number,
     rowIndex: PropTypes.number,
     rowData: PropTypes.object,
-    variant: PropTypes.oneOf(['default', 'listview']),
 };
 
 ActionsCell.defaultProps = {
     columnChildren: undefined,
     rowsLength: undefined,
     rowIndex: undefined,
     rowData: {},
-    variant: 'default',
 };
diff --git a/src/components/Table/body/cell.js b/src/components/Table/body/cell.js
@@ -47,7 +47,6 @@ export default function Cell(props) {
         onDeselectRow,
         inputType,
         restColumnProps,
-        variant,
     } = props;
 
     const getHeaderLabel = () => {
@@ -58,7 +57,7 @@ export default function Cell(props) {
     };
 
     if (columnType === WITH_ENUMERABLE) {
-        return <EnumerableCell variant={variant} />;
+        return <EnumerableCell />;
     }
 
     if (columnType === 'action') {
@@ -68,7 +67,6 @@ export default function Cell(props) {
                 rowIndex={rowIndex}
                 rowsLength={rowsLength}
                 rowData={rowData}
-                variant={variant}
             />
         );
     }
@@ -82,15 +80,14 @@ export default function Cell(props) {
                 onSelectRow={onSelectRow}
                 onDeselectRow={onDeselectRow}
                 inputType={inputType}
-                variant={variant}
             />
         );
     }
 
     if (isFirst) {
         return (
-            <StyledCell scope="row" tabIndex={-1} data-label={getHeaderLabel()} variant={variant}>
-                <StyledCellContent variant={variant}>
+            <StyledCell scope="row" tabIndex={-1} data-label={getHeaderLabel()}>
+                <StyledCellContent>
                     <CellValue
                         component={component}
                         value={value}
@@ -103,14 +100,8 @@ export default function Cell(props) {
     }
 
     return (
-        <StyledCell
-            as="td"
-            role="gridcell"
-            tabIndex={-1}
-            data-label={getHeaderLabel()}
-            variant={variant}
-        >
-            <StyledCellContent variant={variant}>
+        <StyledCell as="td" role="gridcell" tabIndex={-1} data-label={getHeaderLabel()}>
+            <StyledCellContent>
                 <CellValue
                     component={component}
                     value={value}
@@ -139,7 +130,6 @@ Cell.propTypes = {
     rowIndex: PropTypes.number,
     rowData: PropTypes.object,
     restColumnProps: PropTypes.object.isRequired,
-    variant: PropTypes.oneOf(['default', 'listview']),
 };
 
 Cell.defaultProps = {
@@ -157,5 +147,4 @@ Cell.defaultProps = {
     rowsLength: undefined,
     rowIndex: undefined,
     rowData: {},
-    variant: 'default',
 };
diff --git a/src/components/Table/body/enumerableCell.js b/src/components/Table/body/enumerableCell.js
@@ -1,24 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import StyledCellContainer from './styled/cellContainer';
 import StyledCellContent from './styled/cellContent';
 import StyledEnumerable from './styled/enumerable';
 
-export default function EnumerableCell(props) {
-    const { variant } = props;
+export default function EnumerableCell() {
     return (
-        <StyledCellContainer role="gridcell" tabIndex={-1} variant={variant} hideBorderRight>
-            <StyledCellContent variant={variant}>
-                <StyledEnumerable variant={variant} />
+        <StyledCellContainer role="gridcell" tabIndex={-1} hideBorderRight>
+            <StyledCellContent>
+                <StyledEnumerable />
             </StyledCellContent>
         </StyledCellContainer>
     );
 }
-
-EnumerableCell.propTypes = {
-    variant: PropTypes.oneOf(['default', 'listview']),
-};
-
-EnumerableCell.defaultProps = {
-    variant: 'default',
-};
diff --git a/src/components/Table/body/index.js b/src/components/Table/body/index.js
@@ -27,7 +27,6 @@ export default class Body extends PureComponent {
             emptyIcon,
             emptyTitle,
             emptyDescription,
-            variant,
         } = this.props;
         const isEmpty = data.length === 0;
         const columnsLength = columns.length;
@@ -67,7 +66,6 @@ export default class Body extends PureComponent {
                     onDeselectRow={(event, isMultiple) =>
                         onDeselectRow(event, isMultiple, rowKeyValue)
                     }
-                    variant={variant}
                 />
             );
         });
@@ -85,7 +83,6 @@ Body.propTypes = {
     emptyTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     emptyDescription: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     isLoading: PropTypes.bool,
-    variant: PropTypes.oneOf(['default', 'listview']),
 };
 
 Body.defaultProps = {
@@ -98,5 +95,4 @@ Body.defaultProps = {
     onSelectRow: () => {},
     onDeselectRow: () => {},
     isLoading: false,
-    variant: 'default',
 };
diff --git a/src/components/Table/body/row.js b/src/components/Table/body/row.js
@@ -39,7 +39,6 @@ export default function Row(props) {
                 isFirst={isFirstDataColumn}
                 isSelected={isSelected}
                 columnChildren={children}
-                variant={variant}
             />
         );
     });
@@ -58,7 +57,6 @@ export default function Row(props) {
             tabIndex={-1}
             aria-selected={isSelected}
             isSelected={isSelected}
-            variant={variant}
         >
             {cells}
         </StyledRow>
@@ -69,12 +67,10 @@ Row.propTypes = {
     rowData: PropTypes.object,
     columns: PropTypes.array,
     isSelected: PropTypes.bool,
-    variant: PropTypes.oneOf(['default', 'listview']),
 };
 
 Row.defaultProps = {
     rowData: {},
     columns: [],
     isSelected: false,
-    variant: 'default',
 };
diff --git a/src/components/Table/body/selectableCell.js b/src/components/Table/body/selectableCell.js
@@ -6,15 +6,7 @@ import StyledCellContainer from './styled/cellContainer';
 import StyledCheckboxContainer from './styled/checkboxContainer';
 
 export default function SelectableCell(props) {
-    const {
-        isSelected,
-        isDisabled,
-        tableId,
-        onSelectRow,
-        onDeselectRow,
-        inputType,
-        variant,
-    } = props;
+    const { isSelected, isDisabled, tableId, onSelectRow, onDeselectRow, inputType } = props;
     const name = `${tableId}-options`;
     const isRadio = inputType === 'radio';
 
@@ -44,12 +36,8 @@ export default function SelectableCell(props) {
     };
 
     return (
-        <StyledCellContainer role="gridcell" tabIndex={-1} variant={variant} hideBorderRight>
-            <StyledCheckboxContainer
-                role="presentation"
-                onMouseDown={handleMouseDown}
-                variant={variant}
-            >
+        <StyledCellContainer role="gridcell" tabIndex={-1} hideBorderRight>
+            <StyledCheckboxContainer role="presentation" onMouseDown={handleMouseDown}>
                 <Input
                     className="rainbow-table_cell-checkbox"
                     name={name}
@@ -74,7 +62,6 @@ SelectableCell.propTypes = {
     onSelectRow: PropTypes.func,
     onDeselectRow: PropTypes.func,
     inputType: PropTypes.string,
-    variant: PropTypes.oneOf(['default', 'listview']),
 };
 
 SelectableCell.defaultProps = {
@@ -83,5 +70,4 @@ SelectableCell.defaultProps = {
     onSelectRow: () => {},
     onDeselectRow: () => {},
     inputType: 'checkbox',
-    variant: 'default',
 };
diff --git a/src/components/Table/body/styled/actionCell.js b/src/components/Table/body/styled/actionCell.js
@@ -10,7 +10,7 @@ const StyledActionCell = attachThemeAttrs(styled.div)`
     box-sizing: border-box;
 
     ${props =>
-        props.variant === 'listview' &&
+        props.theme.variant === 'listview' &&
         `
             background-color: ${props.palette.background.main};
         `};

diff --git a/src/components/Table/body/styled/cell.js b/src/components/Table/body/styled/cell.js
@@ -11,7 +11,7 @@ const StyledCell = attachThemeAttrs(styled.th)`
     }
 
     ${props =>
-        props.variant === 'listview' &&
+        props.theme.variant === 'listview' &&
         `
         background-color: ${props.palette.background.main};
         border: none;

diff --git a/src/components/Table/body/styled/cellContainer.js b/src/components/Table/body/styled/cellContainer.js
@@ -7,7 +7,7 @@ const StyledCellContainer = attachThemeAttrs(styled.td)`
     box-sizing: border-box;
 
     ${props =>
-        props.variant === 'listview' &&
+        props.theme.variant === 'listview' &&
         `
         background-color: ${props.palette.background.main};
         border: none;

diff --git a/src/components/Table/body/styled/cellContent.js b/src/components/Table/body/styled/cellContent.js
@@ -17,7 +17,7 @@ const StyledCellContent = attachThemeAttrs(styled.div)`
     box-sizing: border-box;
 
     ${props =>
-        props.variant === 'listview' &&
+        props.theme.variant === 'listview' &&
         `
             padding: 0;
         `};

diff --git a/src/components/Table/body/styled/checkboxContainer.js b/src/components/Table/body/styled/checkboxContainer.js
@@ -7,7 +7,7 @@ const StyledCheckboxContainer = styled.div`
     border: 1px solid transparent;
     box-sizing: border-box;
     ${props =>
-        props.variant === 'listview' &&
+        props.theme.variant === 'listview' &&
         `
         padding: 0 10px;
     `}

diff --git a/src/components/Table/body/styled/enumerable.js b/src/components/Table/body/styled/enumerable.js
@@ -7,7 +7,7 @@ const StyledEnumerable = attachThemeAttrs(styled.span)`
     color: ${props => props.palette.text.header};
 
     ${props =>
-        props.variant === 'listview' &&
+        props.theme.variant === 'listview' &&
         `
         color: ${props.palette.text.main};
     `}

diff --git a/src/components/Table/body/styled/row.js b/src/components/Table/body/styled/row.js
@@ -6,7 +6,7 @@ const StyledRow = attachThemeAttrs(styled.tr)`
     counter-increment: rowCounter;
     box-sizing: border-box;
     ${props =>
-        props.variant === 'default' &&
+        props.theme.variant === 'default' &&
         `
         box-shadow: ${props.shadows.shadow_8};
         transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -18,7 +18,7 @@ const StyledRow = attachThemeAttrs(styled.tr)`
     `}
 
     ${props =>
-        props.variant === 'listview' &&
+        props.theme.variant === 'listview' &&
         `
         border-radius: 13px;
         box-shadow: 0 1px 1px 0 ${props.palette.border.divider};

diff --git a/src/components/Table/head/header.js b/src/components/Table/head/header.js
@@ -67,7 +67,6 @@ export default class Header extends Component {
             maxRowSelection,
             bulkSelection,
             hasScroll,
-            variant,
         } = this.props;
 
         const headerStyles = {
@@ -86,7 +85,6 @@ export default class Header extends Component {
                     bulkSelection={bulkSelection}
                     hasScroll={hasScroll}
                     style={headerStyles}
-                    variant={variant}
                 />
             );
         }
@@ -100,14 +98,12 @@ export default class Header extends Component {
                 scope="col"
                 tabIndex={this.getTabIndex()}
                 aria-label={this.getHeaderContent()}
-                variant={variant}
             >
-                <StyledWrapper style={headerStyles} variant={variant}>
+                <StyledWrapper style={headerStyles}>
                     <StyledHeaderContainer
                         className="rainbow-table_header-container"
                         role="presentation"
                         onClick={this.handleSort}
-                        variant={variant}
                     >
                         <StyledContent
                             title={this.getHeaderContent()}
@@ -155,7 +151,6 @@ Header.propTypes = {
     maxRowSelection: PropTypes.number,
     bulkSelection: PropTypes.oneOf(['none', 'some', 'all']),
     hasScroll: PropTypes.bool,
-    variant: PropTypes.oneOf(['default', 'listview']),
 };
 
 Header.defaultProps = {
@@ -177,5 +172,4 @@ Header.defaultProps = {
     maxRowSelection: undefined,
     bulkSelection: 'none',
     hasScroll: false,
-    variant: 'default',
 };
diff --git a/src/components/Table/head/index.js b/src/components/Table/head/index.js
@@ -37,7 +37,6 @@ export default class Head extends PureComponent {
                         sortDirection={this.resolveSortDirection(field)}
                         isSorted={this.isSorted(field)}
                         field={field}
-                        variant={variant}
                     />
                 );
             });
@@ -52,7 +51,6 @@ Head.propTypes = {
     defaultSortDirection: PropTypes.string,
     sortedBy: PropTypes.string,
     hasScroll: PropTypes.bool,
-    variant: PropTypes.oneOf(['default', 'listview']),
 };
 
 Head.defaultProps = {
@@ -61,5 +59,4 @@ Head.defaultProps = {
     defaultSortDirection: 'asc',
     sortedBy: undefined,
     hasScroll: false,
-    variant: 'default',
 };