Merge pull request #86 from ebs-integrator/development

Development

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": [

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}
 

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}
 

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';

src/components/atoms/styles.scss

@@ -1,5 +1,4 @@
 @import './Button/Button';
-@import './LoaderSpinner/LoaderSpinner';
 @import './Input/Input';
 @import './Icon/Icon';
 @import './Label/Label';

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);
+    }
+  }
 }

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 />;

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 = () => {
-  return (
-    <span className="ebs-loader__inline">
-      <LoaderSpinner size="small" />
-      Loading ...
-    </span>
-  );
-};
+Loader.displayName = 'Loader';
+
+Loader.Inline = LoaderInline;
+Loader.Spinner = LoaderSpinner;
+
+export { Loader };

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>
+  );
+};

src/components/atoms/LoaderSpinner/LoaderSpinner.tsx → 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 })} />
 );

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}>

src/index.ts

@@ -9,7 +9,6 @@ export {
   Badge,
   Button,
   ButtonGroup,
-  LoaderSpinner,
   Label,
   ListGroup,
   Extra,