@@ -27,21 +23,19 @@ const HeaderContainer = (
borderStyle={borderStyles.none}
sorted={sorted && sortIndexColumn}
sortAscending={sortAscending}
- onClick={onIndexTHClick}
- >
+ onClick={onIndexTHClick}>
{indexColumnText}
- {columns.map(column =>
+ {columns.map(column => (
|
+ onClick={onTHClick.bind(this, column)}>
{column}
- | ,
- )}
+
+ ))}
@@ -49,13 +43,4 @@ const HeaderContainer = (
);
};
-HeaderContainer.defaultProps = {
- indexColumnText: '(index)',
- columns: [],
-};
-
-HeaderContainer.contextTypes = {
- theme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-};
-
export default HeaderContainer;
diff --git a/src/table-inspector/TH.js b/src/table-inspector/TH.js
index 77788ca..6f6ee2a 100644
--- a/src/table-inspector/TH.js
+++ b/src/table-inspector/TH.js
@@ -1,9 +1,8 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { useCallback, useState } from 'react';
-import createStyles from '../styles/createStyles';
+import { useStyles } from '../styles';
-const SortIconContainer = props =>
+const SortIconContainer = props => (
bottom: 1,
display: 'flex',
alignItems: 'center',
- }}
- >
+ }}>
{props.children}
-
;
+
+);
-const SortIcon = ({ sortAscending }, { theme }) => {
+const SortIcon = ({ sortAscending }) => {
+ const styles = useStyles('TableInspectorSortIcon');
const glyph = sortAscending ? '▲' : '▼';
- const styles = createStyles('TableInspectorSortIcon', theme);
- return (
-