Fixed TS errors and created "withDefaultProps" HOC for class components (#65)

* withDefaultProps HOC for class components

Fab and Mention components were updated to get theme defaultProps working

* Fixed TS errors

Author: erickriva

example/src/index.tsx

@@ -27,6 +27,9 @@ const theme: Partial<ThemeType> = {
       fontSize: 'lg',
       textTransform: 'uppercase',
     },
+    Fab: {
+      bg: 'red500',
+    },
   },
 
   colors: {

src/ui/checkbox/group.component.tsx

@@ -8,7 +8,7 @@ import { CheckboxGroupProps } from './checkbox.type';
 const CheckboxGroup: React.FunctionComponent<CheckboxGroupProps> = (
   incomingProps
 ) => {
-  const props = useDefaultProps('CheckboxGroup', incomingProps);
+  const props = useDefaultProps('CheckboxGroup', incomingProps, {});
 
   const [value, setValue] = useState(props.value || props.defaultValue || []);
   const {

src/ui/collapse/collapse.component.tsx

@@ -12,6 +12,7 @@ import { CollapseGroup } from './group.component';
 const Collapse: CompoundedCollapse<CollapseProps> = (incomingProps) => {
   const props = useDefaultProps('Collapse', incomingProps, {
     bg: 'white',
+    active: false,
     flexDir: 'column',
     flexWrap: 'nowrap',
     rounded: 'md',

src/ui/collapse/group.component.tsx

@@ -8,7 +8,7 @@ import { CollapseGroupProps } from './collapse.type';
 const CollapseGroup: React.FunctionComponent<CollapseGroupProps> = (
   incomingProps
 ) => {
-  const props = useDefaultProps('CollapseGroup', incomingProps);
+  const props = useDefaultProps('CollapseGroup', incomingProps, {});
 
   const [activeId, setActiveId] = useState(props.defaultActive || null);
   const { children, onChange: onChangeProp, ...rest } = props;

src/ui/fab/fab.component.tsx

@@ -13,41 +13,45 @@ import { ThemeContext, ThemeType } from '../../theme';
 import { Button } from '../button/button.component';
 import { Icon } from '../icon/icon.component';
 import { FabProps } from './fab.type';
+import { withDefaultProps } from '../../utilities/withDefaultProps';
 
 interface FabState {
   active: boolean;
 }
 
-class Fab extends React.Component<FabProps, FabState> {
-  static defaultProps: Partial<FabProps> = {
-    color: 'white',
-    fontSize: '4xl',
-    p: 18,
-    overlayColor: 'gray900',
-    overlayOpacity: 0.5,
-    position: 'absolute',
-    openOnMount: false,
-    showBackground: true,
-    animated: true,
-    bottom: 30,
-    right: 30,
-    icon: 'plus',
-    activeIcon: 'close',
-    rounded: 'circle',
-    bg: 'blue500',
-    useNativeDriver: false,
-    shadow: 'lg',
-    shadowColor: 'gray900',
-  };
-
+const defaultProps = {
+  color: 'white',
+  fontSize: '4xl',
+  p: 18,
+  overlayColor: 'gray900',
+  overlayOpacity: 0.5,
+  position: 'absolute',
+  openOnMount: false,
+  showBackground: true,
+  animated: true,
+  bottom: 30,
+  right: 30,
+  icon: 'plus',
+  activeIcon: 'close',
+  rounded: 'circle',
+  bg: 'blue500',
+  useNativeDriver: false,
+  shadow: 'lg',
+  shadowColor: 'gray900',
+} as const;
+
+class FabBase extends React.Component<
+  FabProps & typeof defaultProps,
+  FabState
+> {
   animation: any;
   fadeAnimation: any;
   visibleAnimation: any;
   actionsAnimation: any;
   mainBottomAnimation: any;
   actionsBottomAnimation: any;
 
-  constructor(props: FabProps) {
+  constructor(props: FabProps & typeof defaultProps) {
     super(props);
 
     this.state = {
@@ -363,4 +367,6 @@ class Fab extends React.Component<FabProps, FabState> {
   }
 }
 
+const Fab = withDefaultProps<FabProps>(FabBase, 'Fab')(defaultProps);
+
 export { Fab };

src/ui/image/image.component.tsx

@@ -8,7 +8,7 @@ import { ThemeContext } from '../../theme';
 import { useDefaultProps } from '../../utilities/useDefaultProps';
 
 const Image: React.FunctionComponent<ImageProps> = (incomingProps) => {
-  const props = useDefaultProps('Image', incomingProps);
+  const props = useDefaultProps('Image', incomingProps, {});
 
   const {
     h,

src/ui/mention/mention.component.tsx

@@ -5,24 +5,25 @@ import { View, FlatList, ActivityIndicator } from 'react-native';
 import { MentionProps } from './mention.type';
 import { getStyle } from './mention.style';
 import { ThemeContext } from '../../theme';
-
-class Mention extends React.Component<MentionProps> {
-  static defaultProps = {
-    bg: 'white',
-    rounded: 'md',
-    borderColor: 'gray200',
-    borderWidth: 1,
-    horizontal: false,
-    loading: false,
-    shadow: 1,
-    shadowColor: 'gray900',
-    keyboardShouldPersistTaps: 'always',
-    trigger: '@',
-    position: 'absolute',
-    bottom: '100%',
-    onHide: () => {},
-  };
-
+import { withDefaultProps } from '../../utilities/withDefaultProps';
+
+const defaultProps = {
+  bg: 'white',
+  rounded: 'md',
+  borderColor: 'gray200',
+  borderWidth: 1,
+  horizontal: false,
+  loading: false,
+  shadow: 1,
+  shadowColor: 'gray900',
+  keyboardShouldPersistTaps: 'always',
+  trigger: '@',
+  position: 'absolute',
+  bottom: '100%',
+  onHide: () => {},
+} as const;
+
+class MentionBase extends React.Component<MentionProps & typeof defaultProps> {
   previousChar = ' ';
 
   isTrackingStarted = false;
@@ -183,4 +184,6 @@ class Mention extends React.Component<MentionProps> {
   }
 }
 
+const Mention = withDefaultProps(MentionBase, 'Mention')(defaultProps);
+
 export { Mention };

src/ui/radio/group.component.tsx

@@ -8,7 +8,7 @@ import { useDefaultProps } from '../../utilities/useDefaultProps';
 const RadioGroup: React.FunctionComponent<RadioGroupProps> = (
   incomingProps
 ) => {
-  const props = useDefaultProps('RadioGroup', incomingProps);
+  const props = useDefaultProps('RadioGroup', incomingProps, {});
 
   const [value, setValue] = useState(props.value || props.defaultValue || null);
   const {

src/ui/radio/radio.component.tsx

@@ -25,6 +25,7 @@ const Radio: CompoundedRadio<RadioProps> = (incomingProps) => {
     highlightBg: 'gray300',
     bg: 'transparent',
     p: 'none',
+    checked: false,
     color: 'white',
     rounded: 'circle',
     loading: false,

src/utilities/withDefaultProps.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import deepmerge from 'deepmerge';
+import { ThemeContext, ThemeType } from '../theme';
+
+export function withDefaultProps<T>(
+  WrappedComponent: unknown,
+  componentName: keyof NonNullable<ThemeType['components']>
+) {
+  return function wrapWithStyledComponent(defaultProps: Partial<T>) {
+    return class extends React.PureComponent {
+      static contextType = ThemeContext;
+      context!: React.ContextType<typeof ThemeContext>;
+
+      render() {
+        const theme = this.context.theme;
+        // @ts-ignore
+        const propsFromTheme: Partial<T> =
+          (theme.components && theme.components[componentName]) ?? {};
+
+        // @ts-ignore
+        const mergedProps: T & Required<typeof defaultProps> = deepmerge(
+          deepmerge(defaultProps, propsFromTheme),
+          this.props
+        );
+        // @ts-ignore
+        return <WrappedComponent {...mergedProps} />;
+      }
+    };
+  };
+}

tsconfig.json

@@ -21,6 +21,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "esnext"
+    "target": "esnext",
+    "types": ["react-native"]
   }
 }