@imposium-hub/components 1.45.5 → 1.46.0

package/src/components/data-table/DataTablePaginator.tsx

@@ -1,89 +1,96 @@
 import * as React from 'react';
 import Button from '../button/Button';
 import SelectField from '../select-field/SelectField';
-import {ICON_ANGLE_DOUBLE_LEFT, ICON_ANGLE_LEFT,
-    ICON_ANGLE_DOUBLE_RIGHT, ICON_ANGLE_RIGHT} from '../../constants/icons';
+import {
+    ICON_ANGLE_DOUBLE_LEFT,
+    ICON_ANGLE_LEFT,
+    ICON_ANGLE_DOUBLE_RIGHT,
+    ICON_ANGLE_RIGHT
+} from '../../constants/icons';
 
 interface IDataTablePaginatorProps {
-    page : number;
-    totalPages : number;
-    totalItems : number;
-    onPage : (page : number) => any;
+    page: number;
+    totalPages: number;
+    totalItems: number;
+    onPage: (page: number) => any;
 }
 
 export default class DataTablePaginator extends React.PureComponent<IDataTablePaginatorProps> {
-    private static readonly DEFAULT_TOTAL : number = 0;
-    private static readonly DEFAULT_STEP : number = 25;
+    private static readonly DEFAULT_TOTAL: number = 0;
+    private static readonly DEFAULT_STEP: number = 25;
 
-    constructor(p : IDataTablePaginatorProps) {
+    constructor(p: IDataTablePaginatorProps) {
         super(p);
     }
 
-    public render = () : JSX.Element => {
-        const {page, totalPages, totalItems} = this.props;
-        const listBoundsDefined : boolean = (Number.isInteger(totalPages));
-        const hasMultiplePages : boolean = (Number.isInteger(totalPages) && totalPages > 1);
-        const pageBackDisabled : boolean = (!listBoundsDefined || page - 1 === 0);
-        const pageAheadDisabled : boolean = (!listBoundsDefined || page + 1 > totalPages);
-        const cursorMin : number = Math.max(page - DataTablePaginator.DEFAULT_STEP, 1);
-        const cursorMax : number = Math.min(page + DataTablePaginator.DEFAULT_STEP, totalPages);
-        const pages : any[] = [];
+    public render = (): JSX.Element => {
+        const { page, totalPages, totalItems } = this.props;
+        const listBoundsDefined: boolean = Number.isInteger(totalPages);
+        const hasMultiplePages: boolean = Number.isInteger(totalPages) && totalPages > 1;
+        const pageBackDisabled: boolean = !listBoundsDefined || page - 1 === 0;
+        const pageAheadDisabled: boolean = !listBoundsDefined || page + 1 > totalPages;
+        const cursorMin: number = Math.max(page - DataTablePaginator.DEFAULT_STEP, 1);
+        const cursorMax: number = Math.min(page + DataTablePaginator.DEFAULT_STEP, totalPages);
+        const pages: any[] = [];
 
         for (let i = cursorMin; i <= cursorMax; i++) {
             pages.push(i);
         }
 
         return (
-            <div className = 'paginator'>
-                <div className = 'pagination-controls'>
-                    <span className = 'paging-button-group'>
+            <div className='paginator'>
+                <div className='pagination-controls'>
+                    <span className='paging-button-group'>
                         <Button
-                            color = 'secondary'
-                            size = 'small'
-                            disabled = {pageBackDisabled}
-                            onClick = {() => this.props.onPage(1)}>
+                            color='secondary'
+                            size='small'
+                            disabled={pageBackDisabled}
+                            onClick={() => this.props.onPage(1)}>
                             {ICON_ANGLE_DOUBLE_LEFT}
                         </Button>
 
                         <Button
-                            color = 'secondary'
-                            size = 'small'
-                            disabled = {pageBackDisabled}
-                            onClick = {() => this.props.onPage(page - 1)}>
+                            color='secondary'
+                            size='small'
+                            disabled={pageBackDisabled}
+                            onClick={() => this.props.onPage(page - 1)}>
                             {ICON_ANGLE_LEFT}
                         </Button>
                     </span>
 
-                    <div className = 'jump-to-wrapper'>
+                    <div className='jump-to-wrapper'>
                         <SelectField
-                            label = 'Page'
-                            value = {page}
-                            disable = {!hasMultiplePages}
-                            options = {pages}
-                            onChange = {(p : string) => this.props.onPage(parseInt(p, 10))} />
+                            label='Page'
+                            value={page}
+                            disable={!hasMultiplePages}
+                            options={pages}
+                            onChange={(p: string) => this.props.onPage(parseInt(p, 10))}
+                        />
                     </div>
 
-                    <span className = 'paging-button-group'>
+                    <span className='paging-button-group'>
                         <Button
-                            color = 'secondary'
-                            size = 'small'
-                            disabled = {pageAheadDisabled}
-                            onClick = {() => this.props.onPage(page + 1)}>
+                            color='secondary'
+                            size='small'
+                            disabled={pageAheadDisabled}
+                            onClick={() => this.props.onPage(page + 1)}>
                             {ICON_ANGLE_RIGHT}
                         </Button>
 
                         <Button
-                            color = 'secondary'
-                            size = 'small'
-                            disabled = {pageAheadDisabled}
-                            onClick = {() => this.props.onPage(totalPages)}>
+                            color='secondary'
+                            size='small'
+                            disabled={pageAheadDisabled}
+                            onClick={() => this.props.onPage(totalPages)}>
                             {ICON_ANGLE_DOUBLE_RIGHT}
                         </Button>
                     </span>
                 </div>
 
-                <div className = 'total-assets'>Total: {totalItems || DataTablePaginator.DEFAULT_TOTAL}</div>
+                <div className='total-assets'>
+                    Total: {totalItems || DataTablePaginator.DEFAULT_TOTAL}
+                </div>
             </div>
         );
-    }
+    };
 }

package/src/components/data-table/Paginator.tsx

@@ -7,11 +7,10 @@ import {
     ICON_ANGLE_DOUBLE_RIGHT,
     ICON_ANGLE_RIGHT
 } from '../../constants/icons';
-import {text} from '@fortawesome/fontawesome-svg-core';
 
-let textInputTimeout : number;
+let textInputTimeout: number;
 
-const Paginator : React.FC<any> = ({
+const Paginator: React.FC<any> = ({
     manualPagination,
     pageCount,
     pageIndex,
@@ -23,73 +22,64 @@ const Paginator : React.FC<any> = ({
     gotoPage,
     previousPage,
     nextPage,
-    setPageSize,
+    setPageSize
 }) => (
-    <section className = 'ip-table-pagination'>
+    <section className='ip-table-pagination'>
         <span>
             <Button
-                style = 'subtle'
-                size = 'small'
-                tooltip = 'Go to first page'
-                disabled = {!canPreviousPage}
-                onClick = {() => gotoPage(1, pageSize)}
-            >
+                style='subtle'
+                size='small'
+                tooltip='Go to first page'
+                disabled={!canPreviousPage}
+                onClick={() => gotoPage(1, pageSize)}>
                 {ICON_ANGLE_DOUBLE_LEFT}
             </Button>
-
             <Button
-                style = 'subtle'
-                size = 'small'
-                tooltip = 'Go to previous page'
-                disabled = {!canPreviousPage}
-                onClick = {() => previousPage()}
-            >
+                style='subtle'
+                size='small'
+                tooltip='Go to previous page'
+                disabled={!canPreviousPage}
+                onClick={() => previousPage()}>
                 {ICON_ANGLE_LEFT}
             </Button>
-
             <Button
-                style = 'subtle'
-                size = 'small'
-                tooltip = 'Go to next page'
-                disabled = {!canNextPage}
-                onClick = {() => nextPage()}
-            >
+                style='subtle'
+                size='small'
+                tooltip='Go to next page'
+                disabled={!canNextPage}
+                onClick={() => nextPage()}>
                 {ICON_ANGLE_RIGHT}
             </Button>
-
             <Button
-                style = 'subtle'
-                size = 'small'
-                tooltip = 'Go to last page'
-                disabled = {!canNextPage}
-                onClick = {() => gotoPage(pageCount, pageSize)}
-            >
+                style='subtle'
+                size='small'
+                tooltip='Go to last page'
+                disabled={!canNextPage}
+                onClick={() => gotoPage(pageCount, pageSize)}>
                 {ICON_ANGLE_DOUBLE_RIGHT}
-            </Button>&nbsp;&nbsp;
-
+            </Button>
+            &nbsp;&nbsp;
             <span>
                 Page&nbsp;&nbsp;
-                <strong>{pageIndex} of {pageCount}</strong>&nbsp;&nbsp;
+                <strong>
+                    {pageIndex} of {pageCount}
+                </strong>
+                &nbsp;&nbsp;
             </span>
-
             <span>
                 Go to page &nbsp;&nbsp;
                 <input
-                    className = 'paginator-input'
-                    type = 'number'
-                    placeholder = {pageIndex}
-                    onChange = {(e) => {
+                    className='paginator-input'
+                    type='number'
+                    placeholder={pageIndex}
+                    onChange={(e) => {
                         const input = e.target.value;
                         const inputNum = Number(input);
-                        let next : number;
+                        let next: number;
 
                         clearTimeout(textInputTimeout);
 
-                        if (
-                            !input ||
-                            inputNum < 1 ||
-                            inputNum > pageCount
-                        ) {
+                        if (!input || inputNum < 1 || inputNum > pageCount) {
                             return;
                         }
 
@@ -100,10 +90,13 @@ const Paginator : React.FC<any> = ({
                         textInputTimeout = window.setTimeout(() => gotoPage(next, pageSize), 300);
                     }}
                 />
-            </span>&nbsp;&nbsp;
+            </span>
+            &nbsp;&nbsp;
         </span>
 
-        <span className = 'total-assets'>Total&nbsp;&nbsp;<strong>{totalItems || 0}</strong></span>
+        <span className='total-assets'>
+            Total&nbsp;&nbsp;<strong>{totalItems || 0}</strong>
+        </span>
     </section>
 );
 

package/src/components/determinate-loader/DeterminateLoader.stories.tsx

@@ -7,37 +7,20 @@ export default {
     component: DeterminateLoader
 };
 
-interface IDeterminateLoaderProps {
-    progress : number; // expects int 0-100 (%)
-}
+export const DeterminateLoader50Percent = () => <DeterminateLoader progress={50} />;
 
-export const DeterminateLoader50Percent = () => (
-    <DeterminateLoader
-        progress = {50}
-        />
-);
-
-export const DeterminateLoader25Percent = () => (
-    <DeterminateLoader
-        progress = {25}
-    />
-);
+export const DeterminateLoader25Percent = () => <DeterminateLoader progress={25} />;
 
 export const DeterminateLoaderLoading = () => {
     const [percent, setPercent] = useState(0);
 
     useEffect(() => {
         setTimeout(() => {
-            if ( percent < 100) {
+            if (percent < 100) {
                 setPercent(percent + 1);
             }
         }, 10);
-
     });
 
-    return (
-        <DeterminateLoader
-            progress = {percent}
-        />
-    );
+    return <DeterminateLoader progress={percent} />;
 };

package/src/components/determinate-loader/DeterminateLoader.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
 
 export interface IDeterminateLoaderProps {
-    progress : number; // expects int 0-100 (%)
+    progress: number; // expects int 0-100 (%)
 }
 
-export const DeterminateLoader : React.FC<IDeterminateLoaderProps> = (p : IDeterminateLoaderProps) => {
-    const transform : string = (p.progress) ? `scaleX(${p.progress / 100})` : 'scaleX(0)';
+export const DeterminateLoader: React.FC<IDeterminateLoaderProps> = (
+    p: IDeterminateLoaderProps
+) => {
+    const transform: string = p.progress ? `scaleX(${p.progress / 100})` : 'scaleX(0)';
 
     return (
-        <div className = 'determinate-loader'>
-            <div className = 'progress-bg' style = {{transform}} />
-            <div className = 'progress-copy'>{`${Math.round(p.progress)}%`}</div>
+        <div className='determinate-loader'>
+            <div className='progress-bg' style={{ transform }} />
+            <div className='progress-copy'>{`${Math.round(p.progress)}%`}</div>
         </div>
     );
 };

package/src/components/dropdown/dropdown.stories.tsx

@@ -8,17 +8,17 @@ export default {
 };
 
 export interface IDropdownMenuProps {
-    toggleRef : any;
-    show : boolean;
-    fixed? : boolean;
-    children : React.ReactChild;
-    position : 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
-    onOutsideClick : (...args) => any;
+    toggleRef: any;
+    show: boolean;
+    fixed?: boolean;
+    children: React.ReactChild;
+    position: 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
+    onOutsideClick: (...args) => any;
 }
 
 export interface IDropdownMenuState {
-    build : any;
-    offset : any;
+    build: any;
+    offset: any;
 }
 
 export const defaultDropDown = () => {
@@ -27,15 +27,15 @@ export const defaultDropDown = () => {
 
     return (
         <>
-            <Button onClick = {() => setToggle(!toggle)} ref = {dropdownToggleRef}>
+            <Button onClick={() => setToggle(!toggle)} ref={dropdownToggleRef}>
                 Sample DropDown Toggle
             </Button>
             <ImposiumDropdown
-                toggleRef = {dropdownToggleRef}
-                show = {toggle}
+                toggleRef={dropdownToggleRef}
+                show={toggle}
                 fixed
-                position = 'bottomright'
-                onOutsideClick = {() => setToggle(!toggle)}>
+                position='bottomright'
+                onOutsideClick={() => setToggle(!toggle)}>
                 Sample
             </ImposiumDropdown>
         </>

package/src/components/dropdown/dropdown.tsx

@@ -1,26 +1,29 @@
 import * as React from 'react';
 
 export interface IDropdownMenuProps {
-    toggleRef ? : any;
-    show : boolean;
-    fixed? : boolean;
-    children : React.ReactNode;
-    position : 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
-    onOutsideClick : (...args) => any;
+    toggleRef?: any;
+    show: boolean;
+    fixed?: boolean;
+    children: React.ReactNode;
+    position: 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
+    onOutsideClick: (...args) => any;
 }
 
 export interface IDropdownMenuState {
-    build : any;
-    offset : any;
+    build: any;
+    offset: any;
 }
 
-export default class ImposiumDropdown extends React.PureComponent<IDropdownMenuProps, IDropdownMenuState> {
-    private static readonly ESC_CODE : number = 27;
+export default class ImposiumDropdown extends React.PureComponent<
+    IDropdownMenuProps,
+    IDropdownMenuState
+> {
+    private static readonly ESC_CODE: number = 27;
 
-    private resizeHandler : any = () => this.onResize();
-    private clickHandler : any = (e) => this.detectOutsideClick(e);
-    private escHandler : any = (e) => this.onEsc(e);
-    private dropdownRef : any = null;
+    private resizeHandler: any = () => this.onResize();
+    private clickHandler: any = (e) => this.detectOutsideClick(e);
+    private escHandler: any = (e) => this.onEsc(e);
+    private dropdownRef: any = null;
 
     constructor(p) {
         super(p);
@@ -33,10 +36,10 @@ export default class ImposiumDropdown extends React.PureComponent<IDropdownMenuP
         this.dropdownRef = React.createRef();
     }
 
-    public componentDidUpdate(prevProps : IDropdownMenuProps) {
+    public componentDidUpdate(prevProps: IDropdownMenuProps) {
         if (this.props.show && !prevProps.show) {
             this.onResize();
-            this.setState({build: true}, () => {
+            this.setState({ build: true }, () => {
                 window.addEventListener('resize', this.resizeHandler);
                 window.addEventListener('mousedown', this.clickHandler);
                 window.addEventListener('keydown', this.onEsc);
@@ -48,54 +51,55 @@ export default class ImposiumDropdown extends React.PureComponent<IDropdownMenuP
         }
     }
 
-    private onResize = () : void => {
-        const {toggleRef} = this.props;
+    private onResize = (): void => {
+        const { toggleRef } = this.props;
 
         if (typeof toggleRef !== 'undefined') {
-            const {top, left, bottom, right} = toggleRef.current.getBoundingClientRect();
-            this.setState({offset: {top, left, bottom, right}});
+            const { top, left, bottom, right } = toggleRef.current.getBoundingClientRect();
+            this.setState({ offset: { top, left, bottom, right } });
         }
-    }
+    };
 
-    private cancelRender = (forced : boolean = false) : void => {
-        const {onOutsideClick} = this.props;
+    private cancelRender = (forced: boolean = false): void => {
+        const { onOutsideClick } = this.props;
 
         window.removeEventListener('resize', this.resizeHandler);
         window.removeEventListener('mousedown', this.clickHandler);
         window.addEventListener('keydown', this.onEsc);
-        this.setState({build: false, offset: {}});
+        this.setState({ build: false, offset: {} });
 
         if (forced) {
             onOutsideClick();
         }
-    }
-
-    private onEsc = (e : any) : void => {
+    };
 
+    private onEsc = (e: any): void => {
         if (e.keyCode === ImposiumDropdown.ESC_CODE) {
             this.cancelRender(true);
         }
-    }
+    };
 
-    private detectOutsideClick = (e : any) : void => {
-        const {toggleRef} = this.props;
-        const {target} = e;
+    private detectOutsideClick = (e: any): void => {
+        const { toggleRef } = this.props;
+        const { target } = e;
 
-        const clickInside = (this.dropdownRef.current && this.dropdownRef.current.contains(target)) ? true : false;
-        const clickOnToggle = (toggleRef && toggleRef.current && toggleRef.current.contains(target)) ? true : false;
+        const clickInside =
+            this.dropdownRef.current && this.dropdownRef.current.contains(target) ? true : false;
+        const clickOnToggle =
+            toggleRef && toggleRef.current && toggleRef.current.contains(target) ? true : false;
 
         if (!clickInside && !clickOnToggle) {
             this.cancelRender(true);
         }
-    }
+    };
 
     public render() {
-        const {build, offset} = this.state;
-        const {show, position, children, fixed} = this.props;
-        const dropdownStyle : any = {
-            position: (fixed) ? 'fixed' : 'absolute',
-            transform: (build) ? 'scaleY(1)' : 'scaleY(0)',
-            opacity: (build) ? '1' : '0'
+        const { build, offset } = this.state;
+        const { show, position, children, fixed } = this.props;
+        const dropdownStyle: any = {
+            position: fixed ? 'fixed' : 'absolute',
+            transform: build ? 'scaleY(1)' : 'scaleY(0)',
+            opacity: build ? '1' : '0'
         };
 
         if (!show) {
@@ -103,8 +107,10 @@ export default class ImposiumDropdown extends React.PureComponent<IDropdownMenuP
         }
 
         if (offset) {
-            const {documentElement: {clientWidth}} = document;
-            const {top, left, bottom, right} = offset;
+            const {
+                documentElement: { clientWidth }
+            } = document;
+            const { left, bottom, right } = offset;
 
             switch (position) {
                 case 'topleft':
@@ -127,7 +133,7 @@ export default class ImposiumDropdown extends React.PureComponent<IDropdownMenuP
         }
 
         return (
-            <div className = 'imposium-dropdown' style = {dropdownStyle} ref = {this.dropdownRef}>
+            <div className='imposium-dropdown' style={dropdownStyle} ref={this.dropdownRef}>
                 {children}
             </div>
         );

package/src/components/field-wrapper/FieldWrapper.stories.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
-import {IToolTipConfig} from '../Tooltip';
 import FieldWrapper from './FieldWrapper';
 import SelectField from '../select-field/SelectField';
 
@@ -9,36 +8,21 @@ export default {
     component: FieldWrapper
 };
 
-interface IFieldWrapperProps {
-    buttons? : any;
-    children : any;
-    customClass? : string;
-    label? : any;
-    tooltip? : IToolTipConfig | string;
-    info? : any;
-    width? : string | number;
-    labelPosition? : string;
-}
-
-interface IFieldWrapperState {
-    showInfo : boolean;
-}
-
 export const defaultFieldWrapperWithSelectField = () => (
-    <FieldWrapper
-        width = '50%'
-        label = {'Field Wrapper'}>
+    <FieldWrapper width='50%' label={'Field Wrapper'}>
         <SelectField
-            label = {'SelectField'}
-            value = {'SelectField'}
-            width = '50%'
-            options = {['Item1', 'Item2']}
-            onChange = {action('CLICKED')}/>
+            label={'SelectField'}
+            value={'SelectField'}
+            width='50%'
+            options={['Item1', 'Item2']}
+            onChange={action('CLICKED')}
+        />
         <SelectField
-            label = {'SelectField'}
-            value = {'SelectField'}
-            width = '50%'
-            options = {['Item1', 'Item2']}
-            onChange = {action('CLICKED')}/>
+            label={'SelectField'}
+            value={'SelectField'}
+            width='50%'
+            options={['Item1', 'Item2']}
+            onChange={action('CLICKED')}
+        />
     </FieldWrapper>
 );