From 6e7df1eadab7ca14b99118a6a27dbb34c4eb859f Mon Sep 17 00:00:00 2001 From: John B Date: Tue, 25 May 2021 22:03:34 +0200 Subject: [PATCH] bootstrap list --- src/list/index.ts | 39 ++++++++ src/list/ui/index.tsx | 178 +++++++++++++++++++++++++++++++++++++ src/list/ui/pagination.tsx | 47 ++++++++++ src/public.tsx | 12 ++- src/routes.tsx | 26 +++--- 5 files changed, 284 insertions(+), 18 deletions(-) create mode 100644 src/list/index.ts create mode 100644 src/list/ui/index.tsx create mode 100644 src/list/ui/pagination.tsx diff --git a/src/list/index.ts b/src/list/index.ts new file mode 100644 index 0000000..8a9e732 --- /dev/null +++ b/src/list/index.ts @@ -0,0 +1,39 @@ +import React from 'react'; +import SuperList, { InnerProps } from '../lib/list/list-super'; +import { + GlobalSearch, + HeaderUnit, + FilterUnit, + OrderController, + Row, + ColCell, + RecordInfo, + NoRow, + ListWrapper, + ListContainer, + ListHeader, + ListBody, + Loader +} from './ui'; + +import Pagination from './ui/pagination'; + +const List = (props: InnerProps): JSX.Element => + SuperList({ + HeaderUnit, + FilterUnit, + OrderController, + ColCell, + GlobalSearch, + NoRow, + Row, + ListWrapper, + ListContainer, + ListHeader, + ListBody, + RecordInfo, + Pagination, + Loader + })(props); + +export default List; diff --git a/src/list/ui/index.tsx b/src/list/ui/index.tsx new file mode 100644 index 0000000..9a87809 --- /dev/null +++ b/src/list/ui/index.tsx @@ -0,0 +1,178 @@ +import React from 'react'; + +import * as UIType from '../../lib/list/ui-type'; +import { paginationBoundaries } from '../../lib/list/utils/pagination-utils'; + +const Loader = () =>

Loading...

; + +const Alert = ({ + // type = 'success', + children +}: { + children: React.ReactNode | JSX.Element; + type?: 'error' | 'success' | 'info' | 'warning'; +}): JSX.Element =>
{children}
; + +const GlobalSearch = () => <>; +const PopoverFilter = () => <>; +const FilterUnit = () => <>; + +import { + PaginationUnitProps, + NoRowProps, + ListWrapperProps, + ListContainerProps, + ListBodyProps, + RecordInfoProps, + ListHeaderProps, + RowProps, + ColCellProps, + PaginationWrapperProps, + OrderControllerUpAndDownProps, + OrderControllerProps +} from '../../lib/list/ui-type'; + +export const NoRow = (props: NoRowProps): JSX.Element | null => { + if (props.n > 0) { + return null; + } + + return No rows found; +}; + +export const PaginationWrapper = ( + props: PaginationWrapperProps +): JSX.Element => { + return ( + + ); +}; + +export const PaginationUnit = ( + props: PaginationUnitProps +): JSX.Element | null => { + const { isActive, isDisabled, children, onClick } = props; + + // here we disable the button in case it is not valid + if (isDisabled) { + return null; + } + + const className = + 'page-item' + (isActive ? ' active' : '') + (isDisabled ? ' disabled' : ''); + + return ( +
  • + +
    • + ); +}; + +export const ColCell = (props: ColCellProps): JSX.Element => { + const { children, colSpan, style } = props; + return ( + + {children} + + ); +}; + +export const HeaderUnit = (props: UIType.HeaderUnitProps): JSX.Element => { + const { children } = props; + + return {children}; +}; + +const Icon = ({ name }: { name: string }) => ; + +export const OrderControllerUpAndDown = ( + props: OrderControllerUpAndDownProps +): JSX.Element => { + return ( + + props.onClick(true)}> + + + props.onClick(false)}> + + + + ); +}; + +const ChevronUp = () => ; +const ChevronDown = () => ; +const SortDefault = () => ; + +export const OrderController = (props: OrderControllerProps): JSX.Element => { + const { onClick, descAsc } = props; + + let Icon = SortDefault; + if (descAsc !== null) { + Icon = descAsc ? ChevronUp : ChevronDown; + } + + return ( +
    onClick(null)} + > + +
    + ); +}; + +export const ListWrapper = (props: ListWrapperProps): JSX.Element => { + const { children } = props; + return
    {children}
    ; +}; + +export const ListContainer = (props: ListContainerProps): JSX.Element => { + const { children, maxHeight, stickyHeader = false } = props; + return ( +
    + {children}
    +
    + ); +}; + +export const Row = (props: RowProps): JSX.Element => { + const { children } = props; + return {children}; +}; + +export const ListHeader = (props: ListHeaderProps): JSX.Element => { + const { children } = props; + return {children}; +}; + +export const ListBody = ({ children }: ListBodyProps): JSX.Element => ( + {children} +); + +export const RecordInfo = (props: RecordInfoProps): JSX.Element | null => { + const { nPerPage, idx, n } = props; + + if (n === 0) { + return null; + } + + const { start, end } = paginationBoundaries(idx, nPerPage); + + return ( +

    + Showing {start + 1} to {Number(start) + Number(nPerPage) > n ? n : end} of{' '} + {n} entries +

    + ); +}; + +export { FilterUnit, GlobalSearch, PopoverFilter, Loader }; diff --git a/src/list/ui/pagination.tsx b/src/list/ui/pagination.tsx new file mode 100644 index 0000000..8ad44ba --- /dev/null +++ b/src/list/ui/pagination.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { getPagination } from '../../lib/list/utils/pagination-utils'; +import { PaginationProps } from '../../lib/list/ui-type'; + +const Pagination = (props: PaginationProps): JSX.Element | null => { + const { n, nPerPage, idx, onClick } = props; + + if (n === 0) { + return null; + } + + const { nPage } = getPagination(n, nPerPage); + + return ( +     + ); +}; + +export default Pagination; diff --git a/src/public.tsx b/src/public.tsx index ebcd2e1..51500bc 100644 --- a/src/public.tsx +++ b/src/public.tsx @@ -1,12 +1,20 @@ import React from 'react'; +import List from './list'; const Default = (): JSX.Element => (
    -

    TODO: examples for bootstrap

    +

    - Source available under MIT license. + Source available + under MIT license.

    ); diff --git a/src/routes.tsx b/src/routes.tsx index 6bd6c9c..f2583f0 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,22 +1,16 @@ import React from 'react'; -import { Router, Switch, Route } from 'react-router-dom'; -import * as History from 'history'; +import { Switch, Route } from 'react-router-dom'; import Public from './public'; -import Layout from './layout/index' - - -const basename: string = import.meta.env.SNOWPACK_PUBLIC_URL || ''; - -console.log(`basename: ${basename}`); - -const history = History.createBrowserHistory({ - basename -}); - -const Routes = (): JSX.Element => gd - - +import Layout from './layout/index'; + +const Routes = (): JSX.Element => ( + + + + + +); export default Routes;