feat(theme): style components from theme

minheq · minheq · commit 082bfaeab98e · 2019-06-11T15:30:46.000+07:00
diff --git a/docs/CustomizeTheme.mdx b/docs/CustomizeTheme.mdx
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -52,10 +52,11 @@ export const Alert = (props: AlertProps) => {
 
   const theme = useTheme();
 
-  const { containerStyle, bodyStyle } = mergeStyles(getAlertStyles, getStyles)(
-    { intent },
-    theme,
-  );
+  const { containerStyle, bodyStyle } = mergeStyles(
+    getAlertStyles,
+    getStyles,
+    theme.components.getAlertStyles,
+  )({ intent }, theme);
 
   return (
     <View style={containerStyle} testID={testID}>
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -110,6 +110,7 @@ export const Avatar = (props: AvatarProps) => {
   const { containerStyle, textStyle, imageStyle } = mergeStyles(
     getAvatarStyles,
     getStyles,
+    theme.components.getAvatarStyles,
   )(
     {
       color,
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -32,10 +32,11 @@ export const Badge = (props: BadgeProps) => {
 
   const theme = useTheme();
 
-  const { containerStyle, textStyle } = mergeStyles(getBadgeStyles, getStyles)(
-    { size, color, isSolid, shape },
-    theme,
-  );
+  const { containerStyle, textStyle } = mergeStyles(
+    getBadgeStyles,
+    getStyles,
+    theme.components.getBadgeStyles,
+  )({ size, color, isSolid, shape }, theme);
 
   return (
     <View style={containerStyle} testID={testID}>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -133,7 +133,7 @@ export const Button = (props: ButtonProps) => {
     focusColor,
     innerButtonWrapperStyle,
     buttonContentWrapperStyle,
-  } = mergeStyles(getButtonStyles, getStyles)(
+  } = mergeStyles(getButtonStyles, getStyles, theme.components.getButtonStyles)(
     {
       appearance,
       color,
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -51,7 +51,11 @@ export const Checkbox = (props: CheckboxProps) => {
     checkboxStyle,
     checkColor,
     checkboxFocusBackgroundColor,
-  } = mergeStyles(getCheckboxStyles, getStyles)(
+  } = mergeStyles(
+    getCheckboxStyles,
+    getStyles,
+    theme.components.getCheckboxStyles,
+  )(
     {
       isChecked,
       isDisabled,
diff --git a/src/components/Collapsible/Collapsible.tsx b/src/components/Collapsible/Collapsible.tsx
@@ -69,7 +69,11 @@ export const Collapsible = (props: CollapsibleProps) => {
     contentWrapperStyle,
     textStyle,
     iconWrapperStyle,
-  } = mergeStyles(getCollapsibleStyles, getStyles)({}, theme);
+  } = mergeStyles(
+    getCollapsibleStyles,
+    getStyles,
+    theme.components.getCollapsibleStyles,
+  )({}, theme);
 
   const handlePress = React.useCallback(() => {
     if (isControlledUsage) {
diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx
@@ -46,7 +46,11 @@ export const Counter = (props: CounterProps) => {
     countStyle,
     textStyle,
     disabledStyle,
-  } = mergeStyles(getCounterStyles, getStyles)({}, theme);
+  } = mergeStyles(
+    getCounterStyles,
+    getStyles,
+    theme.components.getCounterStyles,
+  )({}, theme);
 
   const isDecrementDisabled = min === count;
   const isIncrementDisabled = max === count;
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -53,7 +53,10 @@ export const Dialog = (props: DialogProps) => {
     bodyStyle,
     contentContainerStyle,
     overlayStyle,
-  } = mergeStyles(getDialogStyles, getStyles)({}, theme);
+  } = mergeStyles(getDialogStyles, getStyles, theme.components.getDialogStyles)(
+    {},
+    theme,
+  );
 
   return (
     <Modal
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
@@ -22,10 +22,11 @@ export const Divider = (props: DividerProps) => {
   const { size, color, position = 'horizontal', getStyles } = props;
   const theme = useTheme();
 
-  const { dividerStyle } = mergeStyles(getDividerStyles, getStyles)(
-    { size, color, position },
-    theme,
-  );
+  const { dividerStyle } = mergeStyles(
+    getDividerStyles,
+    getStyles,
+    theme.components.getDividerStyles,
+  )({ size, color, position }, theme);
 
   return <View style={dividerStyle} />;
 };
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
@@ -48,6 +48,7 @@ export const Drawer = (props: DrawerProps) => {
   const { modalContainerStyle, containerStyle } = mergeStyles(
     getDrawerStyles,
     getStyles,
+    theme.components.getDrawerStyles,
   )({}, theme);
 
   const animation = useSpring({
diff --git a/src/components/Form/FormField.tsx b/src/components/Form/FormField.tsx
@@ -44,7 +44,11 @@ export const FormField = (props: FormFieldProps) => {
     labelTextStyle,
     labelWrapperStyle,
     wrapperStyle,
-  } = mergeStyles(getFormFieldStyles, getStyles)(
+  } = mergeStyles(
+    getFormFieldStyles,
+    getStyles,
+    theme.components.getFormFieldStyles,
+  )(
     {
       labelPosition,
     },
diff --git a/src/components/Grid/Column.tsx b/src/components/Grid/Column.tsx
@@ -65,7 +65,11 @@ export const Column = (props: ColumnProps) => {
   const gutterWidth = React.useContext(GutterWidthContext);
 
   const { columns, offsetColumns } = splitColumnConfig(config);
-  const { columnStyle } = mergeStyles(getColumnStyles, getStyles)(
+  const { columnStyle } = mergeStyles(
+    getColumnStyles,
+    getStyles,
+    theme.components.getColumnStyles,
+  )(
     { gutterWidth, currentScreenSize, gridColumnCount, columns, offsetColumns },
     theme,
   );
diff --git a/src/components/Grid/Container.tsx b/src/components/Grid/Container.tsx
@@ -28,10 +28,11 @@ export const Container = (props: ContainerProps) => {
   const { maxWidth: containerWidth, gutterWidth } = useLayout();
   const theme = useTheme();
 
-  const { containerStyle } = mergeStyles(getContainerStyles, getStyles)(
-    { maxWidth, containerWidth, gutterWidth },
-    theme,
-  );
+  const { containerStyle } = mergeStyles(
+    getContainerStyles,
+    getStyles,
+    theme.components.getContainerStyles,
+  )({ maxWidth, containerWidth, gutterWidth }, theme);
 
   return <View style={containerStyle}>{children}</View>;
 };
diff --git a/src/components/Grid/Row.tsx b/src/components/Grid/Row.tsx
@@ -22,10 +22,11 @@ export const Row = (props: RowProps) => {
   const { gutterWidth } = useLayout();
   const theme = useTheme();
 
-  const { rowStyle } = mergeStyles(getRowStyles, getStyles)(
-    { gutterWidth, hasGutter },
-    theme,
-  );
+  const { rowStyle } = mergeStyles(
+    getRowStyles,
+    getStyles,
+    theme.components.getRowStyles,
+  )({ gutterWidth, hasGutter }, theme);
 
   return (
     <View style={rowStyle}>
diff --git a/src/components/Inputs/IconTextInput.tsx b/src/components/Inputs/IconTextInput.tsx
@@ -36,10 +36,11 @@ const IconTextInputBase = (props: IconTextInputProps) => {
     leftContainerStyle,
     rightContainerStyle,
     inputStyle,
-  } = mergeStyles(getIconTextInputStyles, getStyles)(
-    { hasLeftIcon: !!leftIcon, hasRightIcon: !!rightIcon },
-    theme,
-  );
+  } = mergeStyles(
+    getIconTextInputStyles,
+    getStyles,
+    theme.components.getTextInputStyles,
+  )({ hasLeftIcon: !!leftIcon, hasRightIcon: !!rightIcon }, theme);
 
   return (
     <View style={containerStyle}>
diff --git a/src/components/ListItem/ListItem.tsx b/src/components/ListItem/ListItem.tsx
@@ -53,7 +53,11 @@ export const ListItem = (props: ListItemProps) => {
     textStyle,
     focusBackgroundColor,
     wrapperStyle,
-  } = mergeStyles(getListItemStyles, getStyles)({ size, isDisabled }, theme);
+  } = mergeStyles(
+    getListItemStyles,
+    getStyles,
+    theme.components.getListItemStyles,
+  )({ size, isDisabled }, theme);
 
   return (
     <TouchableHighlight
diff --git a/src/components/Overlay/Overlay.tsx b/src/components/Overlay/Overlay.tsx
@@ -20,10 +20,11 @@ export const Overlay = (props: OverlayProps) => {
   const { onPress, transparent = false, getStyles } = props;
   const theme = useTheme();
 
-  const { overlayStyle } = mergeStyles(getOverlayStyles, getStyles)(
-    { transparent },
-    theme,
-  );
+  const { overlayStyle } = mergeStyles(
+    getOverlayStyles,
+    getStyles,
+    theme.components.getOverlayStyles,
+  )({ transparent }, theme);
 
   return (
     <TouchableWithoutFeedback
diff --git a/src/components/Pickers/PickerButton.tsx b/src/components/Pickers/PickerButton.tsx
@@ -41,6 +41,7 @@ export const PickerButton = (props: PickerButtonProps) => {
   const { pickerStyle, itemStyle } = mergeStyles(
     getPickerButtonStyles,
     getStyles,
+    theme.components.getPickerButtonStyles,
   )({ size }, theme);
 
   return (
diff --git a/src/components/Pickers/PickerButtonWrapper.tsx b/src/components/Pickers/PickerButtonWrapper.tsx
@@ -20,6 +20,7 @@ export const PickerButtonWrapper = (props: PickerButtonWrapperProps) => {
   const { containerStyle, rightContainerStyle } = mergeStyles(
     getPickerButtonStyles,
     getStyles,
+    theme.components.getPickerButtonStyles,
   )({ size }, theme);
 
   return (
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -21,6 +21,7 @@ export const Popover = (props: PopoverProps) => {
   const { popoverStyle, modalContainerStyle, positionerStyle } = mergeStyles(
     getPopoverStyles,
     getStyles,
+    theme.components.getPopoverStyles,
   )({}, theme);
 
   return (
diff --git a/src/components/Positioner/Positioner.tsx b/src/components/Positioner/Positioner.tsx
@@ -221,6 +221,7 @@ export const Positioner = (props: PositionerProps) => {
   const { positionerStyle, modalContainerStyle } = mergeStyles(
     getPositionerStyles,
     getStyles,
+    theme.components.getPositionerStyles,
   )({}, theme);
 
   const screenLayout = Dimensions.get('window');
diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
@@ -31,6 +31,7 @@ export const ProgressBar = (props: ProgressBarProps) => {
   const { containerStyle, progressStyle } = mergeStyles(
     getProgressBarStyles,
     getStyles,
+    theme.components.getProgressBarStyles,
   )({ size }, theme);
 
   const boundPercent = Math.max(Math.min(percent, 100), 0);
diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx
@@ -34,6 +34,7 @@ export const Rating = (props: RatingProps) => {
   const { containerStyle, starColor, starSize, touchableStyle } = mergeStyles(
     getRatingStyles,
     getStyles,
+    theme.components.getRatingStyles,
   )({ size, color }, theme);
 
   return (
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -239,7 +239,10 @@ export const Slider = (props: SliderProps) => {
     selectedTrackStyle,
     thumbStyle,
     unselectedTrackStyle,
-  } = mergeStyles(getSliderStyles, getStyles)({ size }, theme);
+  } = mergeStyles(getSliderStyles, getStyles, theme.components.getSliderStyles)(
+    { size },
+    theme,
+  );
 
   const left = getLeftValue(value) * pixelPerValue;
   const right = getRightValue(value) * pixelPerValue;
@@ -256,12 +259,14 @@ export const Slider = (props: SliderProps) => {
       />
       <View
         accessible
+        // @ts-ignore
         style={{ ...thumbStyle, left: left - size / 2, cursor }}
         {...leftThumbRef.current.panHandlers}
       />
       {isRangeSlider && (
         <View
           accessible
+          // @ts-ignore
           style={{ ...thumbStyle, left: right - size / 2, cursor }}
           {...rightThumbRef.current.panHandlers}
         />
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
@@ -51,7 +51,10 @@ export const Switch = (props: SwitchProps) => {
     backgroundColorOn,
     circleColorOff,
     circleColorOn,
-  } = mergeStyles(getSwitchStyles, getStyles)({}, theme);
+  } = mergeStyles(getSwitchStyles, getStyles, theme.components.getSwitchStyles)(
+    {},
+    theme,
+  );
 
   const { backgroundColor, circleColor, circlePosition } = useSpring({
     config: springDefaultConfig,
diff --git a/src/components/Tabs/Tab.tsx b/src/components/Tabs/Tab.tsx
@@ -29,6 +29,7 @@ export const Tab = (props: TabProps) => {
   const { containerStyle, buttonStyle, textStyle, focusColor } = mergeStyles(
     getTabStyles,
     getStyles,
+    theme.components.getTabStyles,
   )({ isActive, shouldStretch }, theme);
 
   return (
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -21,7 +21,11 @@ export const Tabs = (props: TabsProps) => {
   const { children, activeTabIndex, onChange, getStyles } = props;
   const theme = useTheme();
 
-  const { containerStyle } = mergeStyles(getTabsStyles, getStyles)({}, theme);
+  const { containerStyle } = mergeStyles(
+    getTabsStyles,
+    getStyles,
+    theme.components.getTabsStyles,
+  )({}, theme);
 
   const data = React.Children.map(children, (child, index) => {
     if (!child) return null;
diff --git a/src/components/Toast/ToastProvider.tsx b/src/components/Toast/ToastProvider.tsx
@@ -60,6 +60,7 @@ export const ToastProvider = (props: ToastProviderProps) => {
   const { containerStyle, wrapperStyle } = mergeStyles(
     getToastStyles,
     getStyles,
+    theme.components.getToastStyles,
   )({ intent: 'info' }, theme);
 
   const createToastInstance = (toastSettings: ToastSettings): ToastInstance => {
diff --git a/src/components/Typography/Heading.tsx b/src/components/Typography/Heading.tsx
@@ -35,10 +35,11 @@ export const Heading = (props: HeadingProps) => {
   } = props;
   const theme = useTheme();
 
-  const { headingStyle } = mergeStyles(getHeadingStyles, getStyles)(
-    { size, align, color, weight },
-    theme,
-  );
+  const { headingStyle } = mergeStyles(
+    getHeadingStyles,
+    getStyles,
+    theme.components.getHeadingStyles,
+  )({ size, align, color, weight }, theme);
 
   return (
     <Text
diff --git a/src/components/Typography/Paragraph.tsx b/src/components/Typography/Paragraph.tsx
@@ -45,10 +45,11 @@ export const Paragraph = (props: ParagraphProps) => {
   } = props;
   const theme = useTheme();
 
-  const { paragraphStyle } = mergeStyles(getParagraphStyles, getStyles)(
-    { align, size, color, fontFamily, weight },
-    theme,
-  );
+  const { paragraphStyle } = mergeStyles(
+    getParagraphStyles,
+    getStyles,
+    theme.components.getParagraphStyles,
+  )({ align, size, color, fontFamily, weight }, theme);
 
   return (
     <Text
diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx
@@ -42,7 +42,11 @@ export const Text = (props: TextProps) => {
   } = props;
   const theme = useTheme();
 
-  const { textStyle } = mergeStyles(getTextStyles, getStyles)(
+  const { textStyle } = mergeStyles(
+    getTextStyles,
+    getStyles,
+    theme.components.getTextStyles,
+  )(
     {
       align,
       color,
diff --git a/src/constants/StackingOrder.ts b/src/constants/StackingOrder.ts
@@ -2,7 +2,7 @@
  * Stacking order contains z-index values that are used through.
  * Note that the Stack component might increase the z-index for certain components.
  */
-export default {
+export const StackingOrder = {
   /**
    * Used for focused buttons and controls.
    */
diff --git a/src/constants/index.ts b/src/constants/index.ts
diff --git a/src/theme/Theme.tsx b/src/theme/Theme.tsx
diff --git a/src/theme/defaultTheme.ts b/src/theme/defaultTheme.ts
diff --git a/src/utils/mergeStyles.ts b/src/utils/mergeStyles.ts

Original file line number	Diff line number	Diff line change
`@@ -110,6 +110,7 @@ export const Avatar = (props: AvatarProps) => {`
`110`	`110`	`const { containerStyle, textStyle, imageStyle } = mergeStyles(`
`111`	`111`	`getAvatarStyles,`
`112`	`112`	`getStyles,`
	`113`	`+ theme.components.getAvatarStyles,`
`113`	`114`	`)(`
`114`	`115`	`{`
`115`	`116`	`color,`
Original file line number	Diff line number	Diff line change
`@@ -133,7 +133,7 @@ export const Button = (props: ButtonProps) => {`
`133`	`133`	`focusColor,`
`134`	`134`	`innerButtonWrapperStyle,`
`135`	`135`	`buttonContentWrapperStyle,`
`136`		`- } = mergeStyles(getButtonStyles, getStyles)(`
	`136`	`+ } = mergeStyles(getButtonStyles, getStyles, theme.components.getButtonStyles)(`
`137`	`137`	`{`
`138`	`138`	`appearance,`
`139`	`139`	`color,`