feat(Loader): Initial Implementation (#153)

Author: Lukas742

packages/main/src/components/Loader/Loader.jss.ts

@@ -0,0 +1,35 @@
+import { JSSTheme } from '../../interfaces/JSSTheme';
+
+//todo use theme colors when available
+export const styles = ({ parameters }: JSSTheme) => ({
+  '@keyframes scroll': {
+    '0%': { backgroundPosition: '-100% 0' },
+    '100%': { backgroundPosition: '200% 0' }
+  },
+  loader: {
+    height: '0.25rem',
+    width: '100%',
+    '&$loaderDeterminate': {
+      background: `linear-gradient(to right, ${parameters.sapUiContentIconColor}, ${parameters.sapUiContentIconColor})`,
+      backgroundColor: 'rgba(8, 84, 160, 0.15)',
+      backgroundRepeat: 'repeat-y'
+    },
+    '&$loaderIndeterminate': {
+      background: `linear-gradient(
+      to right,
+      rgba(8, 84, 160, 0) 0px,
+      rgba(8, 84, 160, 1) calc(50% - 2rem),
+      ${parameters.sapUiContentIconColor} calc(50% - 2rem),
+      ${parameters.sapUiContentIconColor} calc(50% + 2rem),
+      rgba(8, 84, 160, 1) calc(50% + 2rem),
+      rgba(8, 84, 160, 0) 100%
+    )`,
+      backgroundColor: 'rgba(8, 84, 160, 0.15)',
+      backgroundSize: '40%',
+      backgroundRepeat: 'repeat-y',
+      animation: '$scroll 1.2s linear infinite'
+    }
+  },
+  loaderDeterminate: {},
+  loaderIndeterminate: {}
+});

packages/main/src/components/Loader/Loader.test.tsx

@@ -0,0 +1,31 @@
+import { renderThemedComponent } from '@shared/tests/utils';
+import React from 'react';
+import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
+import { Loader } from '@ui5/webcomponents-react/lib/Loader';
+
+describe('Loader', () => {
+  test('indeterminate', () => {
+    const wrapper = renderThemedComponent(<Loader type={LoaderType.Indeterminate} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('determinate', () => {
+    const wrapper = renderThemedComponent(<Loader type={LoaderType.Determinate} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('determinate with progress prop', () => {
+    const wrapper = renderThemedComponent(<Loader type={LoaderType.Determinate} progress="42%" />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('default', () => {
+    const wrapper = renderThemedComponent(<Loader />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('with Custom Class Name', () => {
+    const wrapper = renderThemedComponent(<Loader className="myTestClass" />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

packages/main/src/components/Loader/__snapshots__/Loader.test.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loader default 1`] = `
+<div
+  aria-busy="true"
+  class="Loader--loader- Loader--loaderIndeterminate-"
+  data-component-name="Loader"
+  role="progressbar"
+  style="background-size:40%"
+  title="Please wait"
+/>
+`;
+
+exports[`Loader determinate 1`] = `
+<div
+  aria-busy="true"
+  class="Loader--loader- Loader--loaderDeterminate-"
+  data-component-name="Loader"
+  role="progressbar"
+  style="background-size:0px"
+  title="Please wait"
+/>
+`;
+
+exports[`Loader determinate with progress prop 1`] = `
+<div
+  aria-busy="true"
+  class="Loader--loader- Loader--loaderDeterminate-"
+  data-component-name="Loader"
+  role="progressbar"
+  style="background-size:42%"
+  title="Please wait"
+/>
+`;
+
+exports[`Loader indeterminate 1`] = `
+<div
+  aria-busy="true"
+  class="Loader--loader- Loader--loaderIndeterminate-"
+  data-component-name="Loader"
+  role="progressbar"
+  style="background-size:40%"
+  title="Please wait"
+/>
+`;
+
+exports[`Loader with Custom Class Name 1`] = `
+<div
+  aria-busy="true"
+  class="Loader--loader- myTestClass Loader--loaderIndeterminate-"
+  data-component-name="Loader"
+  role="progressbar"
+  style="background-size:40%"
+  title="Please wait"
+/>
+`;

packages/main/src/components/Loader/demo.stories.tsx

@@ -0,0 +1,16 @@
+import { select, text } from '@storybook/addon-knobs';
+import React from 'react';
+import { Loader } from '@ui5/webcomponents-react/lib/Loader';
+import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
+
+export const renderLoader = () => (
+  <Loader type={select('type', LoaderType, LoaderType.Indeterminate)} progress={text('progress', '40%')} />
+);
+renderLoader.story = {
+  name: 'Default'
+};
+
+export default {
+  title: 'Components | Loader',
+  component: Loader
+};

packages/main/src/components/Loader/index.tsx

@@ -0,0 +1,55 @@
+import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
+import { LoaderType } from '@ui5/webcomponents-react/lib/LoaderType';
+import React, { CSSProperties, FC, forwardRef, RefObject, useMemo } from 'react';
+import { createUseStyles } from 'react-jss';
+import { CommonProps } from '../../interfaces/CommonProps';
+import { JSSTheme } from '../../interfaces/JSSTheme';
+import { styles } from './Loader.jss';
+
+export interface LoaderProps extends CommonProps {
+  type?: LoaderType;
+  progress?: CSSProperties['width'];
+}
+
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'Loader' });
+
+const Loader: FC<LoaderProps> = forwardRef((props: LoaderProps, ref: RefObject<HTMLDivElement>) => {
+  const { className, type, progress, tooltip, slot, style } = props;
+  const classes = useStyles(props);
+
+  const loaderClasses = StyleClassHelper.of(classes.loader);
+  if (className) {
+    loaderClasses.put(className);
+  }
+  loaderClasses.put(classes[`loader${type}`]);
+
+  const inlineStyles = useMemo(() => {
+    const backgroundSize = type !== LoaderType.Determinate ? '40%' : progress;
+    return {
+      ...style,
+      backgroundSize
+    };
+  }, [progress, style, type]);
+
+  return (
+    <div
+      ref={ref}
+      className={loaderClasses.valueOf()}
+      data-component-name="Loader"
+      aria-busy="true"
+      role="progressbar"
+      title={tooltip || 'Please wait'}
+      slot={slot}
+      style={inlineStyles}
+    />
+  );
+});
+
+Loader.defaultProps = {
+  type: LoaderType.Indeterminate,
+  progress: '0px'
+};
+
+Loader.displayName = 'Loader';
+
+export { Loader };

packages/main/src/enums/LoaderType.ts

@@ -0,0 +1,4 @@
+export enum LoaderType {
+  Determinate = 'Determinate',
+  Indeterminate = 'Indeterminate'
+}

packages/main/src/index.ts

@@ -107,6 +107,8 @@ import { Tokenizer } from './lib/Tokenizer';
 import { ValueState } from './lib/ValueState';
 import { VariantManagement } from './lib/VariantManagement';
 import { VerticalAlign } from './lib/VerticalAlign';
+import { Loader } from './lib/Loader';
+import { LoaderType } from './lib/LoaderType';
 
 export {
   ActionSheet,
@@ -213,5 +215,7 @@ export {
   Tokenizer,
   ValueState,
   VariantManagement,
-  VerticalAlign
+  VerticalAlign,
+  Loader,
+  LoaderType
 };

packages/main/src/lib/Loader.ts

@@ -0,0 +1,3 @@
+import { Loader } from '../components/Loader';
+
+export { Loader };

packages/main/src/lib/LoaderType.ts

@@ -0,0 +1,3 @@
+import { LoaderType } from '../enums/LoaderType';
+
+export { LoaderType };