refactor: refactor components to functions

Author: csvenke

.size-snapshot.json

@@ -1,15 +1,15 @@
 {
   "lib/index.esm.js": {
-    "bundled": 5035,
-    "minified": 2602,
-    "gzipped": 945,
+    "bundled": 4740,
+    "minified": 2528,
+    "gzipped": 923,
     "treeshaked": {
       "rollup": {
-        "code": 1185,
+        "code": 1146,
         "import_statements": 195
       },
       "webpack": {
-        "code": 3075
+        "code": 3036
       }
     }
   }

src/components/List/List.tsx

@@ -18,16 +18,15 @@ interface IListProps {
 /**
  * Renders content from specified callback function from either `render` or `children` on each element of `items`.
  */
-const List = (props: IListProps): TOutput => {
-  const { items, children, render } = props;
-  const renderProp = getRenderProp(children, render);
+function List(props: IListProps): TOutput {
+  const renderProp = getRenderProp(props.children, props.render);
 
   if (!!renderProp && isFunction<TMap>(renderProp)) {
-    return <React.Fragment>{items.map(renderProp)}</React.Fragment>;
+    return <React.Fragment>{props.items.map(renderProp)}</React.Fragment>;
   }
 
   return null;
-};
+}
 
 List.propTypes = {
   children: PropTypes.func,

src/components/Show/Show.tsx

@@ -11,10 +11,9 @@ interface IShowProps extends IRenderProps {
 /**
  * Renders content if `when` equals true.
  */
-const Show = (props: IShowProps): TOutput => {
-  const { when, children, render } = props;
-  return when ? getChildrenOrRender(children, render) : null;
-};
+function Show(props: IShowProps): TOutput {
+  return props.when ? getChildrenOrRender(props.children, props.render) : null;
+}
 
 Show.propTypes = {
   when: PropTypes.bool.isRequired,

src/components/ShowIfElse/ShowIfElse.tsx

@@ -18,12 +18,14 @@ interface IShowIfElse {
 /**
  * Renders content from if when condition equals true, else renders content from else.
  */
-const ShowIfElse = (props: IShowIfElse): TOutput => (
-  <Switch value={true}>
-    <Switch.Case value={props.condition} render={props.if} />
-    <Switch.Default render={props.else} />
-  </Switch>
-);
+function ShowIfElse(props: IShowIfElse): TOutput {
+  return (
+    <Switch value={true}>
+      <Switch.Case value={props.condition} render={props.if} />
+      <Switch.Default render={props.else} />
+    </Switch>
+  );
+}
 
 ShowIfElse.propTypes = {
   condition: PropTypes.bool.isRequired,

src/components/Switch/Switch.tsx

@@ -18,13 +18,12 @@ const getSwitchCaseValue = (element: any) => element.props.value;
 /**
  * Renders content from first `Switch.Case` that matches `value`, else `Switch.Default` if it exists.
  */
-const Switch = (props: ISwitchProps): TOutput => {
-  const { children, value } = props;
-  const switchValue = value;
+function Switch(props: ISwitchProps): TOutput {
+  const switchValue = props.value;
   let match = false;
   let child: any;
 
-  React.Children.forEach(children, (element: any) => {
+  React.Children.forEach(props.children, (element: any) => {
     if (match === false && React.isValidElement(element)) {
       const caseValue = getSwitchCaseValue(element);
       child = element;
@@ -39,7 +38,7 @@ const Switch = (props: ISwitchProps): TOutput => {
 
   // Return case if its a match.
   return match ? React.cloneElement(child) : null;
-};
+}
 
 Switch.Case = SwitchCase;
 

src/components/Switch/SwitchCase.tsx

@@ -11,10 +11,9 @@ export interface ISwitchCaseProps extends IRenderProps {
 /**
  * Helper component that is accessed from `Switch` component.
  */
-const SwitchCase = (props: ISwitchCaseProps): TOutput => {
-  const { children, render } = props;
-  return getChildrenOrRender(children, render);
-};
+function SwitchCase(props: ISwitchCaseProps): TOutput {
+  return getChildrenOrRender(props.children, props.render);
+}
 
 SwitchCase.propTypes = {
   value: PropTypes.any.isRequired,

src/components/Switch/SwitchDefault.tsx

@@ -4,10 +4,9 @@ import { getChildrenOrRender } from '../../utils/';
 /**
  * Helper component that is accessed from `Switch` component.
  */
-const SwitchDefault = (props: IRenderProps): TOutput => {
-  const { children, render } = props;
-  return getChildrenOrRender(children, render);
-};
+function SwitchDefault(props: IRenderProps): TOutput {
+  return getChildrenOrRender(props.children, props.render);
+}
 
 SwitchDefault.propTypes = renderPropsPropTypes;