From 0777a923d33db5fc52d0859a8eea621b3338b9b5 Mon Sep 17 00:00:00 2001
From: Nicolae Tataru <devdfan@gmail.com>
Date: Tue, 23 Feb 2021 11:16:22 +0200
Subject: [PATCH 1/3] Added posibility to pass text & fixed export of
 <LoaderInline />

---
 src/components/molecules/Loader/Loader.tsx | 4 ++--
 src/components/molecules/index.ts          | 2 +-
 src/index.ts                               | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/Loader/Loader.tsx b/src/components/molecules/Loader/Loader.tsx
index 9d89ca3b..39558af0 100644
--- a/src/components/molecules/Loader/Loader.tsx
+++ b/src/components/molecules/Loader/Loader.tsx
@@ -27,11 +27,11 @@ export const Loader: React.FC<Props> = ({ fade = true, fixed, size = 'regular',
   );
 };
 
-export const LoaderInline: React.FC = () => {
+export const LoaderInline: React.FC<{ text?: string }> = ({ text = 'Loading ...' }) => {
   return (
     <span className="ebs-loader__inline">
       <LoaderSpinner size="small" />
-      Loading ...
+      {text}
     </span>
   );
 };
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index 15c866e6..1a9fda4b 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -1,4 +1,4 @@
-export { Loader } from './Loader/Loader';
+export { Loader, LoaderInline } from './Loader/Loader';
 export { Calendar } from './Calendar/Calendar';
 export { InputPhone } from './InputPhone/InputPhone';
 export { InputSearch } from './InputSearch/InputSearch';
diff --git a/src/index.ts b/src/index.ts
index 25ff4de3..f6c5d197 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -34,6 +34,7 @@ export {
 // Molecules
 export {
   Loader,
+  LoaderInline,
   Stepper,
   Calendar,
   InputPhone,

From e93b4608b25fa6e112df599064d1b82d88a2f3bc Mon Sep 17 00:00:00 2001
From: Nicolae Tataru <devdfan@gmail.com>
Date: Tue, 23 Feb 2021 16:11:35 +0200
Subject: [PATCH 2/3] Refactored <Loader />

---
 src/components/atoms/Button/Button.tsx        |  7 +--
 src/components/atoms/Input/Input.tsx          |  7 +--
 .../atoms/LoaderSpinner/LoaderSpinner.scss    | 45 -------------------
 src/components/atoms/index.ts                 |  3 +-
 src/components/atoms/styles.scss              |  1 -
 src/components/molecules/Loader/Loader.scss   | 36 +++++++++++++++
 .../molecules/Loader/Loader.stories.tsx       | 11 +++--
 src/components/molecules/Loader/Loader.tsx    | 36 ++++++++++-----
 .../molecules/Loader/LoaderInline.tsx         | 11 +++++
 .../Loader}/LoaderSpinner.tsx                 |  7 ++-
 src/components/molecules/index.ts             |  2 +-
 src/components/organisms/Table/Table.tsx      |  4 +-
 src/index.ts                                  |  2 -
 13 files changed, 94 insertions(+), 78 deletions(-)
 delete mode 100644 src/components/atoms/LoaderSpinner/LoaderSpinner.scss
 create mode 100644 src/components/molecules/Loader/LoaderInline.tsx
 rename src/components/{atoms/LoaderSpinner => molecules/Loader}/LoaderSpinner.tsx (56%)

diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
index 4e788f98..16337989 100644
--- a/src/components/atoms/Button/Button.tsx
+++ b/src/components/atoms/Button/Button.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import cn from 'classnames';
-import { Icon, LoaderSpinner } from 'components/atoms';
+import { Icon } from 'components/atoms';
+import { Loader } from 'components/molecules';
 
 export type ButtonSize = 'small' | 'medium' | 'large';
 
@@ -51,10 +52,10 @@ export const Button: React.FC<ButtonProps> = ({
       role="presentation"
     >
       {prefix ? (
-        <div className="ebs-button__prefix">{loading ? <LoaderSpinner size="small" /> : prefix}</div>
+        <div className="ebs-button__prefix">{loading ? <Loader.Spinner size="small" /> : prefix}</div>
       ) : loading ? (
         <div className={cn(`ebs-button__loading`, `ebs-button__loading-${type}`)}>
-          <LoaderSpinner size="small" />
+          <Loader.Spinner size="small" />
         </div>
       ) : null}
 
diff --git a/src/components/atoms/Input/Input.tsx b/src/components/atoms/Input/Input.tsx
index 850918ca..0c26cfab 100644
--- a/src/components/atoms/Input/Input.tsx
+++ b/src/components/atoms/Input/Input.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import cn from 'classnames';
-import { Extra, Label, LoaderSpinner } from 'components/atoms';
+import { Extra, Label } from 'components/atoms';
+import { Loader } from 'components/molecules';
 
 export type InputSize = 'small' | 'medium' | 'large';
 export type InputStyleType = 'white' | 'grey';
@@ -100,7 +101,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               className={cn(`ebs-input__prefix`, !loading && props.onClickPrefix ? `clickable` : `not-clickable`)}
               onClick={onClickPrefixHandler}
             >
-              {loading ? <LoaderSpinner size="small" /> : prefix}
+              {loading ? <Loader.Spinner size="small" /> : prefix}
             </div>
           ) : null}
 
@@ -109,7 +110,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
               className={cn(`ebs-input__suffix`, !loading && props.onClickSuffix ? `clickable` : `not-clickable`)}
               onClick={onClickSuffixHandler}
             >
-              {loading && !prefix ? <LoaderSpinner size="small" /> : suffix}
+              {loading && !prefix ? <Loader.Spinner size="small" /> : suffix}
             </div>
           ) : null}
 
diff --git a/src/components/atoms/LoaderSpinner/LoaderSpinner.scss b/src/components/atoms/LoaderSpinner/LoaderSpinner.scss
deleted file mode 100644
index 21610146..00000000
--- a/src/components/atoms/LoaderSpinner/LoaderSpinner.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-// animations
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.ebs-loader__spinner {
-  width: rem($base-size);
-  height: rem($base-size);
-  border-radius: 50%;
-
-  transition-property: transform;
-  animation-name: rotate;
-  animation-duration: 1.2s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-
-  &--small {
-    border: 2px solid $grey-500;
-    border-top: 2px solid $primary-color;
-    width: rem(15px);
-    height: rem(15px);
-    top: calc(50% - 5px);
-  }
-
-  &--middle {
-    border: 2px solid $grey-500;
-    border-top: 2px solid $primary-color;
-    width: rem(20px);
-    height: rem(20px);
-    top: calc(50% - 10px);
-  }
-
-  &--regular {
-    border: 6px solid $grey-500;
-    border-top: 6px solid $primary-color;
-    width: rem(60px);
-    height: rem(60px);
-    top: calc(50% - 20px);
-  }
-}
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index 9981f434..436d16c7 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -2,8 +2,7 @@ export { Alert } from './Alert/Alert';
 export { Avatar, AvatarCard, AvatarInline } from './Avatar';
 export { Badge } from './Badge/Badge';
 export { Button, ButtonGroup } from './Button/Button';
-export { LoaderSpinner } from './LoaderSpinner/LoaderSpinner';
-export { Input } from '../atoms/Input/Input';
+export { Input } from './Input/Input';
 export { Icon } from './Icon/Icon';
 export { Label } from './Label/Label';
 export { ListGroup } from './ListGroup/ListGroup';
diff --git a/src/components/atoms/styles.scss b/src/components/atoms/styles.scss
index 3e6c180b..528f736e 100644
--- a/src/components/atoms/styles.scss
+++ b/src/components/atoms/styles.scss
@@ -1,5 +1,4 @@
 @import './Button/Button';
-@import './LoaderSpinner/LoaderSpinner';
 @import './Input/Input';
 @import './Icon/Icon';
 @import './Label/Label';
diff --git a/src/components/molecules/Loader/Loader.scss b/src/components/molecules/Loader/Loader.scss
index 50fef4b0..ac007fcd 100644
--- a/src/components/molecules/Loader/Loader.scss
+++ b/src/components/molecules/Loader/Loader.scss
@@ -44,4 +44,40 @@
   & > &__spinner.fixed {
     position: fixed;
   }
+
+  &__spinner {
+    width: rem($base-size);
+    height: rem($base-size);
+    border-radius: 50%;
+  
+    transition-property: transform;
+    animation-name: rotate;
+    animation-duration: 1.2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  
+    &--small {
+      border: 2px solid $grey-500;
+      border-top: 2px solid $primary-color;
+      width: rem(15px);
+      height: rem(15px);
+      top: calc(50% - 5px);
+    }
+  
+    &--middle {
+      border: 2px solid $grey-500;
+      border-top: 2px solid $primary-color;
+      width: rem(20px);
+      height: rem(20px);
+      top: calc(50% - 10px);
+    }
+  
+    &--regular {
+      border: 6px solid $grey-500;
+      border-top: 6px solid $primary-color;
+      width: rem(60px);
+      height: rem(60px);
+      top: calc(50% - 20px);
+    }
+  }
 }
diff --git a/src/components/molecules/Loader/Loader.stories.tsx b/src/components/molecules/Loader/Loader.stories.tsx
index c732be1d..30243622 100644
--- a/src/components/molecules/Loader/Loader.stories.tsx
+++ b/src/components/molecules/Loader/Loader.stories.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
-import { Loader, LoaderInline } from './Loader';
+import { Loader } from './Loader';
 import { exportStory } from '../../../libs';
 
+const { Inline, Spinner } = Loader;
+
 export default {
   title: exportStory('Loader', 'molecules'),
   component: Loader,
-  subcomponents: { LoaderInline },
+  subcomponents: { Inline, Spinner },
 };
 
-export const DefaultLoader: React.FC = () => {
+export const Regular: React.FC = () => {
   const [loading, setLoading] = React.useState(true);
 
   const onToggleHandler = (): void => setLoading((s) => !s);
@@ -24,4 +26,5 @@ export const DefaultLoader: React.FC = () => {
   );
 };
 
-export const _LoaderInline = (): React.ReactElement => <LoaderInline />;
+export const _Inline = (): React.ReactElement => <Loader.Inline />;
+export const _Spinner = (): React.ReactElement => <Loader.Spinner />;
diff --git a/src/components/molecules/Loader/Loader.tsx b/src/components/molecules/Loader/Loader.tsx
index 39558af0..18f93559 100644
--- a/src/components/molecules/Loader/Loader.tsx
+++ b/src/components/molecules/Loader/Loader.tsx
@@ -1,8 +1,15 @@
 import * as React from 'react';
-import { LoaderSpinner } from 'components/atoms';
-import { SpinnerSize } from 'components/atoms/LoaderSpinner/LoaderSpinner';
+import { LoaderInline } from './LoaderInline';
+import { LoaderSpinner, LoaderSpinnerProps } from './LoaderSpinner';
 
-export interface Props {
+export type SpinnerSize = 'small' | 'middle' | 'regular';
+
+export interface LoaderComposition {
+  Inline: React.FC;
+  Spinner: React.FC<LoaderSpinnerProps>;
+}
+
+export interface LoaderProps {
   fade?: boolean;
   size?: SpinnerSize;
   loading: boolean;
@@ -11,7 +18,14 @@ export interface Props {
   children?: React.ReactNode;
 }
 
-export const Loader: React.FC<Props> = ({ fade = true, fixed, size = 'regular', loading, height = 350, children }) => {
+const Loader: React.FC<LoaderProps> & LoaderComposition = ({
+  fade = true,
+  fixed,
+  size = 'regular',
+  loading,
+  height = 350,
+  children,
+}) => {
   return (
     <div className="ebs-loader" style={{ minHeight: loading ? height : undefined }}>
       <LoaderSpinner fixed={fixed} size={size} className={!loading ? 'hide' : ''} />
@@ -27,11 +41,9 @@ export const Loader: React.FC<Props> = ({ fade = true, fixed, size = 'regular',
   );
 };
 
-export const LoaderInline: React.FC<{ text?: string }> = ({ text = 'Loading ...' }) => {
-  return (
-    <span className="ebs-loader__inline">
-      <LoaderSpinner size="small" />
-      {text}
-    </span>
-  );
-};
+Loader.displayName = 'Loader';
+
+Loader.Inline = LoaderInline;
+Loader.Spinner = LoaderSpinner;
+
+export { Loader };
diff --git a/src/components/molecules/Loader/LoaderInline.tsx b/src/components/molecules/Loader/LoaderInline.tsx
new file mode 100644
index 00000000..59f85aa2
--- /dev/null
+++ b/src/components/molecules/Loader/LoaderInline.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { LoaderSpinner } from './LoaderSpinner';
+
+export const LoaderInline: React.FC = ({ children = 'Loading ...' }) => {
+  return (
+    <span className="ebs-loader__inline">
+      <LoaderSpinner size="small" />
+      {children}
+    </span>
+  );
+};
diff --git a/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx b/src/components/molecules/Loader/LoaderSpinner.tsx
similarity index 56%
rename from src/components/atoms/LoaderSpinner/LoaderSpinner.tsx
rename to src/components/molecules/Loader/LoaderSpinner.tsx
index b4c0847e..94101c01 100644
--- a/src/components/atoms/LoaderSpinner/LoaderSpinner.tsx
+++ b/src/components/molecules/Loader/LoaderSpinner.tsx
@@ -1,14 +1,13 @@
 import * as React from 'react';
 import cn from 'classnames';
+import { SpinnerSize } from './Loader';
 
-export type SpinnerSize = 'small' | 'middle' | 'regular';
-
-export interface Props {
+export interface LoaderSpinnerProps {
   size?: SpinnerSize;
   className?: string;
   fixed?: boolean;
 }
 
-export const LoaderSpinner: React.FC<Props> = ({ fixed, size = 'regular', className }) => (
+export const LoaderSpinner: React.FC<LoaderSpinnerProps> = ({ fixed, size = 'regular', className }) => (
   <div className={cn(`ebs-loader__spinner`, `ebs-loader__spinner--${size}`, className, { fixed: fixed })} />
 );
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index 1a9fda4b..15c866e6 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -1,4 +1,4 @@
-export { Loader, LoaderInline } from './Loader/Loader';
+export { Loader } from './Loader/Loader';
 export { Calendar } from './Calendar/Calendar';
 export { InputPhone } from './InputPhone/InputPhone';
 export { InputSearch } from './InputSearch/InputSearch';
diff --git a/src/components/organisms/Table/Table.tsx b/src/components/organisms/Table/Table.tsx
index bdbfc2ce..f0f2cbb1 100644
--- a/src/components/organisms/Table/Table.tsx
+++ b/src/components/organisms/Table/Table.tsx
@@ -128,7 +128,9 @@ export const Table = <T extends object>({
                 ? render
                 : render && !isObject(render.children)
                 ? render.children
-                : render && render.children[column.dataIndex!];
+                : render && column.dataIndex
+                ? render.children[column.dataIndex]
+                : null;
 
               return (
                 <React.Fragment key={column.key}>
diff --git a/src/index.ts b/src/index.ts
index f6c5d197..835cfe5f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -9,7 +9,6 @@ export {
   Badge,
   Button,
   ButtonGroup,
-  LoaderSpinner,
   Label,
   ListGroup,
   Extra,
@@ -34,7 +33,6 @@ export {
 // Molecules
 export {
   Loader,
-  LoaderInline,
   Stepper,
   Calendar,
   InputPhone,

From c5a5454a323b19daf8f44c126a8687055dc3f0e5 Mon Sep 17 00:00:00 2001
From: Marcel Lefter <marcellefter@outlook.com>
Date: Wed, 24 Feb 2021 11:24:28 +0200
Subject: [PATCH 3/3] Update package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 94333110..0c54c3e2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebs-integrator/react-ebs-ui",
-  "version": "0.0.1-beta.29",
+  "version": "0.0.1-beta.30",
   "description": "Basic React UI elements.",
   "author": "EBS Integrator",
   "maintainers": [