Merge pull request #1398 from coveo/new-table-in-loading

Demo Only: New table in loading
coveo · Jan 28, 2020 · 5aea1da · 5aea1da
2 parents 9c000b4 + 38d922f
commit 5aea1da
Show file tree

Hide file tree

Showing 71 changed files with 1,905 additions and 395 deletions.
diff --git a/packages/react-vapor/docs/Reducers.ts b/packages/react-vapor/docs/Reducers.ts
@@ -4,20 +4,14 @@ import {
     IListBoxExampleCompositeState,
     listBoxExampleReducer,
 } from '../src/components/listBox/examples/ListBoxExampleReducer';
-import {
-    IExampleServerTableState,
-    TableHOCServerExampleReducer,
-} from '../src/components/table-hoc/examples/TableHOCServerExamples';
 import {IReactVaporState} from '../src/ReactVapor';
 import {ReactVaporReducers} from '../src/ReactVaporReducers';
 
 export interface IReactVaporExampleState extends IReactVaporState {
     listBoxExampleState?: IListBoxExampleCompositeState;
-    tableHOCExample?: IExampleServerTableState;
 }
 
 export const ExamplesReducers: Redux.Reducer<IReactVaporExampleState> = Redux.combineReducers<IReactVaporExampleState>({
     ...ReactVaporReducers,
     listBoxExampleState: listBoxExampleReducer,
-    tableHOCExample: TableHOCServerExampleReducer,
 });
diff --git a/packages/react-vapor/src/components/actions/ActionBarReducers.ts b/packages/react-vapor/src/components/actions/ActionBarReducers.ts
@@ -7,7 +7,7 @@ import {LoadingActions} from '../loading/LoadingActions';
 import {PaginationActions} from '../navigation/pagination/NavigationPaginationActions';
 import {PerPageActions} from '../navigation/perPage/NavigationPerPageActions';
 import {TableHOCRowActionsType} from '../table-hoc/actions/TableHOCRowActions';
-import {TableHOCUtils} from '../table-hoc/TableHOCUtils';
+import {TableHOCUtils} from '../table-hoc/utils/TableHOCUtils';
 import {IActionOptions} from './Action';
 import {ActionBarActions} from './ActionBarActions';
 

diff --git a/packages/react-vapor/src/components/actions/tests/actionBarsReducers.spec.ts b/packages/react-vapor/src/components/actions/tests/actionBarsReducers.spec.ts
@@ -4,7 +4,7 @@ import {selectListBoxOption} from '../../listBox/ListBoxActions';
 import {turnOffLoading, turnOnLoading} from '../../loading/LoadingActions';
 import {changePage} from '../../navigation/pagination/NavigationPaginationActions';
 import {changePerPage} from '../../navigation/perPage/NavigationPerPageActions';
-import {TableHOCUtils} from '../../table-hoc/TableHOCUtils';
+import {TableHOCUtils} from '../../table-hoc/utils/TableHOCUtils';
 import {ActionBarActions, IActionBarPayload, IChangeActionBarActionsPayload} from '../ActionBarActions';
 import {
     actionBarInitialState,

diff --git a/packages/react-vapor/src/components/flatSelect/FlatSelect.tsx b/packages/react-vapor/src/components/flatSelect/FlatSelect.tsx
@@ -6,11 +6,13 @@ import {FlatSelectOption, IFlatSelectOptionProps} from './FlatSelectOption';
 export interface IFlatSelectOwnProps {
     id: string;
     options: IFlatSelectOptionProps[];
-    classes?: string[];
+    className?: string;
     group?: boolean;
     optionPicker?: boolean;
     defaultSelectedOptionId?: string;
     onClick?: (option: IFlatSelectOptionProps) => void;
+    disabled?: boolean;
+    classes?: string[] /* @deprecated use className instead */;
 }
 
 export interface IFlatSelectStateProps {
@@ -54,7 +56,7 @@ export class FlatSelect extends React.Component<IFlatSelectProps> {
                 this.props.selectedOptionId && this.props.selectedOptionId === flatSelectOption.id;
             flatSelectOption.onClick = (option: IFlatSelectOptionProps) => this.handleOnOptionClick(option);
 
-            return <FlatSelectOption key={index} {...flatSelectOption} />;
+            return <FlatSelectOption key={index} {...flatSelectOption} disabled={this.props.disabled} />;
         });
     }
 
@@ -65,7 +67,8 @@ export class FlatSelect extends React.Component<IFlatSelectProps> {
                 'mod-btn-group': this.props.group,
                 'mod-option-picker': this.props.optionPicker,
             },
-            this.props.classes
+            this.props.classes,
+            this.props.className
         );
 
         return <div className={classes}>{this.getOptions()}</div>;

diff --git a/packages/react-vapor/src/components/flatSelect/FlatSelectConnected.tsx b/packages/react-vapor/src/components/flatSelect/FlatSelectConnected.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
-import * as _ from 'underscore';
 import {IReactVaporState} from '../../ReactVapor';
 import {IDispatch, ReduxUtils} from '../../utils/ReduxUtils';
 import {

diff --git a/packages/react-vapor/src/components/flatSelect/FlatSelectOption.tsx b/packages/react-vapor/src/components/flatSelect/FlatSelectOption.tsx
@@ -12,6 +12,7 @@ export interface IFlatSelectOptionProps {
     tooltip?: ITooltipProps;
     selected?: boolean;
     onClick?: (option: IFlatSelectOptionProps) => void;
+    disabled?: boolean;
 }
 
 export class FlatSelectOption extends React.Component<IFlatSelectOptionProps, any> {
@@ -30,6 +31,7 @@ export class FlatSelectOption extends React.Component<IFlatSelectOptionProps, an
             'flat-select-option',
             {
                 selectable: !this.props.selected,
+                disabled: this.props.disabled,
             },
             this.props.classes
         );

diff --git a/packages/react-vapor/src/components/flatSelect/FlatSelectWithPrepend.tsx b/packages/react-vapor/src/components/flatSelect/FlatSelectWithPrepend.tsx
@@ -0,0 +1,21 @@
+import * as classNames from 'classnames';
+import {FunctionComponent} from 'react';
+import * as React from 'react';
+import {IFlatSelectOwnProps} from './FlatSelect';
+import {FlatSelectConnected} from './FlatSelectConnected';
+
+export interface IFlatSelectWithPrependProps extends IFlatSelectOwnProps {
+    prepend?: React.ReactNode;
+    prependClassName?: string;
+}
+
+export const FlatSelectWithPrepend: FunctionComponent<IFlatSelectWithPrependProps> = ({
+    prepend,
+    prependClassName = '',
+    ...flatSelectProps
+}) => (
+    <div className={classNames('prepended-flat-select', prependClassName)}>
+        <div className="flat-select-prepend">{prepend}</div>
+        <FlatSelectConnected {...flatSelectProps} />
+    </div>
+);
diff --git a/packages/react-vapor/src/components/index.ts b/packages/react-vapor/src/components/index.ts
@@ -76,3 +76,4 @@ export * from './title';
 export * from './toast';
 export * from './tooltip';
 export * from './userFeedback';
+export * from './pagination';
diff --git a/packages/react-vapor/src/components/loading/components/ContentLoadingPlaceholder.tsx b/packages/react-vapor/src/components/loading/components/ContentLoadingPlaceholder.tsx
@@ -0,0 +1,11 @@
+import * as classNames from 'classnames';
+import * as React from 'react';
+
+export interface IContentLoadingPlaceholder {
+    className?: string;
+}
+
+export const ContentLoadingPlaceholder: React.FunctionComponent<IContentLoadingPlaceholder> = ({
+    className = '',
+    children,
+}) => <div className={classNames('text-content-placeholder', className)}>{children}</div>;
diff --git a/packages/react-vapor/src/components/loading/components/PaginationLoading.tsx b/packages/react-vapor/src/components/loading/components/PaginationLoading.tsx
@@ -1,41 +1,46 @@
 import * as React from 'react';
+import {ContentLoadingPlaceholder} from './ContentLoadingPlaceholder';
+import {TextLoadingPlaceholder} from './TextLoadingPlaceholder';
 
 export const PaginationLoading = () => (
     <div className="pagination-container">
         <div className="items-per-page prepended-flat-select">
             <div className="flat-select center-align">
-                <div className="text-content-placeholder mod-small mr2" />
-                <div className="flat-select-option content-placeholder mod-no-border">
+                <TextLoadingPlaceholder small className="mr2" />
+                <ContentLoadingPlaceholder className="flat-select-option mod-no-border">
                     <span />
-                </div>
-                <div className="flat-select-option content-placeholder mod-no-border">
+                </ContentLoadingPlaceholder>
+                <ContentLoadingPlaceholder className="flat-select-option mod-no-border">
                     <span />
-                </div>
-                <div className="flat-select-option content-placeholder mod-no-border">
+                </ContentLoadingPlaceholder>
+                <ContentLoadingPlaceholder className="flat-select-option mod-no-border">
                     <span />
-                </div>
+                </ContentLoadingPlaceholder>
+                <ContentLoadingPlaceholder className="flat-select-option mod-no-border">
+                    <span />
+                </ContentLoadingPlaceholder>
             </div>
         </div>
         <div className="flex-auto" />
         <div className="pagination">
             <div className="flat-select center-align">
-                <div className="text-content-placeholder mod-word mr2" />
-                <div className="flat-select-option content-placeholder mod-no-border">
+                <TextLoadingPlaceholder word className="mr2" />
+                <ContentLoadingPlaceholder className="flat-select-option mod-no-border">
                     <span />
-                </div>
-                <div className="flat-select-option content-placeholder mod-no-border">
+                </ContentLoadingPlaceholder>
+                <ContentLoadingPlaceholder className="flat-select-option mod-no-border">
                     <span />
-                </div>
-                <div className="flat-select-option content-placeholder mod-no-border">
+                </ContentLoadingPlaceholder>
+                <ContentLoadingPlaceholder className="flat-select-option mod-no-border">
                     <span />
-                </div>
-                <div className="flat-select-option content-placeholder mod-no-border">
+                </ContentLoadingPlaceholder>
+                <ContentLoadingPlaceholder className="flat-select-option mod-no-border">
                     <span />
-                </div>
-                <div className="flat-select-option content-placeholder mod-no-border">
+                </ContentLoadingPlaceholder>
+                <ContentLoadingPlaceholder className="flat-select-option mod-no-border">
                     <span />
-                </div>
-                <div className="text-content-placeholder mod-word ml2" />
+                </ContentLoadingPlaceholder>
+                <TextLoadingPlaceholder word className="mr2" />
             </div>
         </div>
     </div>

diff --git a/packages/react-vapor/src/components/loading/components/TableLoading.tsx b/packages/react-vapor/src/components/loading/components/TableLoading.tsx
@@ -1,32 +1,37 @@
+import * as classNames from 'classnames';
 import * as React from 'react';
 import * as _ from 'underscore';
 
-export const TableLoading = ({
-    numberOfColumn = 4,
-    numberOfRow = 10,
-}: {
-    numberOfColumn?: number;
-    numberOfRow?: number;
-}) => {
+const Table = ({numberOfColumns = 4, numberOfRow = 10}: {numberOfColumns?: number; numberOfRow?: number}) => {
     return (
         <>
             <table className="table big-table">
-                <tbody>
-                    {_.times(numberOfRow, () => (
-                        <tr className="mod-border-bottom no-hover">
-                            {_.times(numberOfColumn, () => (
-                                <TableRowLoading />
-                            ))}
-                        </tr>
-                    ))}
-                </tbody>
+                <Body numberOfColumns={numberOfColumns} numberOfRow={numberOfRow} />
             </table>
         </>
     );
 };
 
-const TableRowLoading = () => (
+const Body = ({numberOfColumns = 4, numberOfRow = 10}: {numberOfColumns?: number; numberOfRow?: number}) => (
+    <tbody>
+        {_.times(numberOfRow, (nColumn: number) => (
+            <tr key={`table-row-loading-${nColumn}`} className="mod-border-bottom no-hover">
+                {_.times(numberOfColumns, (nRow: number) => (
+                    <Row key={`table-row-loading-${nRow}`} num={nColumn} />
+                ))}
+            </tr>
+        ))}
+    </tbody>
+);
+
+const Row = ({num}: {num: number}) => (
     <td className="table-cell-loading">
-        <div className="table-cell-content-loading" />
+        <div className={classNames('table-cell-content-loading', {'mod-half': num % 2})} />
     </td>
 );
+
+export const TableLoading = {
+    Table,
+    Body,
+    Row,
+};
diff --git a/packages/react-vapor/src/components/loading/components/TextLoadingPlaceholder.tsx b/packages/react-vapor/src/components/loading/components/TextLoadingPlaceholder.tsx
@@ -0,0 +1,23 @@
+import * as classNames from 'classnames';
+import * as React from 'react';
+
+export interface ITextLoadingPlaceholder {
+    small?: boolean;
+    word?: boolean;
+    large?: boolean;
+    className?: string;
+}
+
+export const TextLoadingPlaceholder = ({small, word, large, className = ''}: ITextLoadingPlaceholder) => (
+    <div
+        className={classNames(
+            'text-content-placeholder',
+            {
+                'mod-small': small,
+                'mod-word': word,
+                'mod-large': large,
+            },
+            className
+        )}
+    />
+);
diff --git a/packages/react-vapor/src/components/loading/components/tests/ActionBarLoading.spec.tsx b/packages/react-vapor/src/components/loading/components/tests/ActionBarLoading.spec.tsx
@@ -0,0 +1,14 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {ActionBarLoading} from '../ActionBarLoading';
+
+describe('ActionBarLoading tests', () => {
+    describe('<ActionBarLoading />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<ActionBarLoading />, {});
+                wrapper.unmount();
+            });
+        });
+    });
+});
diff --git a/packages/react-vapor/src/components/loading/components/tests/BasicHeaderLoading.spec.tsx b/packages/react-vapor/src/components/loading/components/tests/BasicHeaderLoading.spec.tsx
@@ -0,0 +1,14 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {BasicHeaderLoading} from '../BasicHeaderLoading';
+
+describe('BasicHeaderLoading tests', () => {
+    describe('<BasicHeaderLoading />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<BasicHeaderLoading />, {});
+                wrapper.unmount();
+            });
+        });
+    });
+});
diff --git a/...es/react-vapor/src/components/loading/components/tests/ContentLoadingPlaceholder.spec.tsx b/...es/react-vapor/src/components/loading/components/tests/ContentLoadingPlaceholder.spec.tsx
@@ -0,0 +1,19 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {ContentLoadingPlaceholder} from '../ContentLoadingPlaceholder';
+
+describe('ContentLoadingPlaceholder tests', () => {
+    describe('<ContentLoadingPlaceholder />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(
+                    <ContentLoadingPlaceholder>
+                        <div>Test</div>
+                    </ContentLoadingPlaceholder>,
+                    {}
+                );
+                wrapper.unmount();
+            });
+        });
+    });
+});
diff --git a/packages/react-vapor/src/components/loading/components/tests/PaginationLoading.spec.tsx b/packages/react-vapor/src/components/loading/components/tests/PaginationLoading.spec.tsx
@@ -0,0 +1,14 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {PaginationLoading} from '../PaginationLoading';
+
+describe('PaginationLoading tests', () => {
+    describe('<PaginationLoading />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<PaginationLoading />, {});
+                wrapper.unmount();
+            });
+        });
+    });
+});
diff --git a/packages/react-vapor/src/components/loading/components/tests/TableLoading.spec.tsx b/packages/react-vapor/src/components/loading/components/tests/TableLoading.spec.tsx
@@ -0,0 +1,52 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {TableLoading} from '../TableLoading';
+
+describe('TableLoading tests', () => {
+    describe('<TableLoading.Table />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<TableLoading.Table />, {});
+                wrapper.unmount();
+            });
+        });
+    });
+
+    describe('<TableLoading.Body />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<TableLoading.Body />, {});
+                wrapper.unmount();
+            });
+        });
+
+        it('should render <tr/> equal of the the number of columns sent as parameter', () => {
+            const wrapper = shallow(<TableLoading.Body numberOfRow={10} />, {});
+            expect(wrapper.find('tr').length).toBe(10);
+        });
+
+        it('should render <Row/> equal of the the number of columns sent as parameter', () => {
+            const wrapper = shallow(<TableLoading.Body numberOfColumns={8} numberOfRow={1} />, {});
+            expect(wrapper.find(TableLoading.Row).length).toBe(8);
+        });
+    });
+
+    describe('<TableLoading.Row />', () => {
+        it('should mount and unmount without errors', () => {
+            expect(() => {
+                const wrapper = shallow(<TableLoading.Row num={0} />, {});
+                wrapper.unmount();
+            });
+        });
+
+        it('should add the class mod-haft if the number is odd', () => {
+            const wrapper = shallow(<TableLoading.Row num={1} />, {});
+            expect(wrapper.find('div').hasClass('mod-half')).toBe(true);
+        });
+
+        it('should not add the class mod-haft if the number is even', () => {
+            const wrapper = shallow(<TableLoading.Row num={2} />, {});
+            expect(wrapper.find('div').hasClass('mod-half')).toBe(false);
+        });
+    });
+});