feat: useTheme hook

ccontrols · Jun 10, 2020 · 182907d · 182907d
1 parent d1b8f97
commit 182907d
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx
@@ -1,13 +1,13 @@
 import React, { FC, Children, useContext } from 'react';
 import Octicon, { Plus, Dash, Sync } from '@primer/octicons-react';
-import { useThemeUI } from 'theme-ui';
 import {
   BackgroundType,
   DirectionType,
   PanelContainer,
   PanelContainerProps,
   IconButton,
   Zoom,
+  useTheme,
 } from '@component-controls/components';
 import { BlockDataContext } from '../context';
 
@@ -46,7 +46,7 @@ export const Playground: FC<PlaygroundProps> = ({
   description,
   scale: userScale = 1,
 }) => {
-  const { theme } = useThemeUI();
+  const theme = useTheme();
 
   const [scale, setScale] = React.useState(userScale);
   const [background, setBackground] = React.useState<BackgroundType>('light');

diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx
@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { FC } from 'react';
 import { transparentize } from 'polished';
-import { Theme, Box, Flex, Button, jsx, useThemeUI } from 'theme-ui';
+import { Theme, Box, Flex, Button, jsx } from 'theme-ui';
 import { getSortedActions, ActionItems } from './utils';
+import { useTheme } from '../ThemeContext';
 
 export interface ActionBarProps {
   /**
@@ -45,7 +46,7 @@ const ActionColors = ({
  *
  */
 export const ActionBar: FC<ActionBarProps> = ({ actions = [] }) => {
-  const { theme } = useThemeUI();
+  const theme = useTheme();
   const sortedItems = getSortedActions(actions);
   const items = sortedItems.map(
     ({ title, onClick, disabled, 'aria-label': ariaLabel, group }, index) => {

diff --git a/ui/components/src/PanelContainer/PanelContainer.tsx b/ui/components/src/PanelContainer/PanelContainer.tsx
@@ -1,9 +1,10 @@
 import React, { FC, MouseEvent, useCallback } from 'react';
-import { Button, ButtonProps, useThemeUI } from 'theme-ui';
+import { Button, ButtonProps } from 'theme-ui';
 import { Collapsible } from '../Collapsible';
 import { Tab, Tabs, TabList, TabPanel } from '../Tabs';
 import { getSortedPanels, ActionItems, ActionItem } from '../ActionBar';
 import { ActionContainer, ActionContainerProps } from '../ActionContainer';
+import { useTheme } from '../ThemeContext';
 
 export const IconButton = (props: ButtonProps) => (
   <Button style={{ paddingTop: '3px', paddingBottom: '3px' }} {...props} />
@@ -53,7 +54,7 @@ export const PanelContainer: FC<PanelContainerProps> = ({
     undefined,
   );
 
-  const { theme } = useThemeUI();
+  const theme = useTheme();
 
   const panels: ActionItems = getSortedPanels(actions);
 

diff --git a/ui/components/src/Table/Table.tsx b/ui/components/src/Table/Table.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-key */
 /** @jsx jsx */
 import { FC, Fragment, ReactNode, useEffect } from 'react';
-import { Box, BoxProps, Flex, useThemeUI, jsx } from 'theme-ui';
+import { Box, BoxProps, Flex, jsx } from 'theme-ui';
 import { get } from '@theme-ui/css';
 import memoize from 'fast-memoize';
 import {
@@ -34,7 +34,7 @@ import { GlobalFilter } from './TableFilter';
 import { useExpanderColumn } from './TableGrouping';
 import { useRowSelectionColumn } from './TableRowSelection';
 import { useTableLayout } from './useTableLayout';
-
+import { useTheme } from '../ThemeContext';
 const defaultColumn = memoize(() => ({
   subRows: undefined,
   accessor: '',
@@ -195,7 +195,7 @@ export const Table: FC<TableProps> = ({
       onSelectRowsChange(selectedRowIds as SelectedRowIds);
     }
   }, [selectedRowIds, onSelectRowsChange]);
-  const { theme } = useThemeUI();
+  const theme = useTheme();
   return (
     <Box
       as="table"

diff --git a/ui/components/src/Table/TableGrouping.tsx b/ui/components/src/Table/TableGrouping.tsx
@@ -8,9 +8,10 @@ import {
   UseExpandedRowProps,
   UseTableRowProps,
 } from 'react-table';
-import { Flex, Text, useThemeUI } from 'theme-ui';
+import { Flex, Text } from 'theme-ui';
 import { get } from '@theme-ui/css';
 import Octicon, { ChevronRight, ChevronDown } from '@primer/octicons-react';
+import { useTheme } from '../ThemeContext';
 
 type GroupByState = TableState & Partial<UseGroupByState<{}>>;
 const useControlledState = (state: GroupByState) => {
@@ -49,7 +50,7 @@ export const useExpanderColumn = (itemsLabel: string) => (
               groupByVal: any;
             };
         }) => {
-          const { theme } = useThemeUI();
+          const theme = useTheme();
           if (row.canExpand) {
             return (
               <td colSpan={row.cells.length}>