@propellerads/table 4.5.1 → 4.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/index.d.ts +4 -2
- package/dist/table.cjs.development.js +43 -18
- package/dist/table.cjs.development.js.map +1 -1
- package/dist/table.cjs.production.min.js +1 -1
- package/dist/table.cjs.production.min.js.map +1 -1
- package/dist/table.esm.js +43 -18
- package/dist/table.esm.js.map +1 -1
- package/dist/types.d.ts +1 -0
- package/package.json +4 -5
- package/src/index.tsx +27 -13
- package/src/types.tsx +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.cjs.production.min.js","sources":["../src/types.tsx","../src/useTableShadow.tsx","../src/propsGetter.tsx","../src/style.tsx","../src/index.tsx","../src/useLoadingState.tsx"],"sourcesContent":["import React, {FunctionComponent, ReactElement, ReactNode} from 'react';\nimport {\n Cell,\n CellPropGetter,\n Column,\n FooterGroupPropGetter,\n FooterPropGetter,\n HeaderGroup,\n HeaderGroupPropGetter,\n Hooks,\n Meta,\n Row,\n RowPropGetter,\n TableBodyPropGetter,\n TablePropGetter, TableState,\n UsePaginationInstanceProps, UsePaginationOptions,\n UsePaginationState,\n UseRowSelectInstanceProps,\n UseRowSelectState, UseSortByColumnProps, UseRowSelectRowProps,\n UseSortByInstanceProps, UseSortByOptions,\n UseTableOptions, HeaderPropGetter,\n} from 'react-table';\n\nexport type DefaultObject = Record<string, string | number | unknown>;\n\nexport type LoadingState = {\n loadingColumns?: Column[],\n loadingData: any[],\n}\n\nexport enum FOOTER_PLACEMENT {\n TOP = 'top',\n BOTTOM = 'bottom'\n}\n\nexport type PaginationProps = {\n paginationAmount?: string | ReactNode | ReactElement,\n parentElementId: string,\n labelPerPage?: string,\n pageSizes?: Array<string | number>,\n pageIndex: number,\n perPage: number,\n totalPages: number,\n totalItems: number,\n canNextPage: boolean,\n canPreviousPage: boolean,\n nextPageHandler: () => void,\n previousPageHandler: () => void,\n setPageSize: (size: number) => void,\n gotoPage: (page: number) => void,\n}\n\nexport type ControlledPagination = {\n paginationAmount?: string | ReactNode | ReactElement,\n pageSize: number,\n pageIndex: number,\n pageCount: number,\n}\n\nexport type TableProps = {\n columns: Array<Column<DefaultObject>>,\n data: [],\n totalItems?: number,\n PaginationComponent: React.FunctionComponent<PaginationProps>,\n initialState: Partial<TableState<DefaultObject>>,\n fetchData?: (params: { pageIndex: number, pageSize: number }) => void,\n onSortedChange?: (id: string, isDesc: boolean) => void,\n isLoading?: boolean,\n footerPlacement?: Array<FOOTER_PLACEMENT>,\n hasDefaultPagination?: boolean,\n onSelectRowsChange?: (rows: Array<DefaultObject>) => void,\n controlledPagination?: ControlledPagination,\n loadingMessage?: string,\n labelPerPage?: string,\n parentElementId?: string,\n tableContentId?: string,\n getRowPreProps?: (row: Row) => DefaultObject,\n getTableProps?: TableGetter,\n getHeaderGroupProps?: ElementGetter,\n getHeaderProps?: ElementGetter,\n getRowProps?: ElementGetter,\n getCellProps?: ElementGetter,\n getFooterProps?: ElementGetter,\n getFooterGroupProps?: ElementGetter,\n showLoadingState?: boolean,\n LoadingCellComponent?: FunctionComponent<DefaultObject>,\n noDataMessage?: string | ReactElement\n rowSubComponent?: (row: StandardRow) => ReactElement\n}\n\nexport type TableOptions = {\n columns: Array<Column<DefaultObject>>,\n data: Array<DefaultObject>,\n initialState: {\n pageIndex?: number,\n pageSize?: number,\n },\n disableSortRemove: boolean,\n disableMultiSort: boolean,\n disableMultiRemove: boolean,\n manualSortBy?: boolean,\n autoResetPage?: boolean,\n manualPagination?: boolean,\n pageCount?: number,\n}\n\nexport type MetaProps = {\n column?: HeaderGroup<DefaultObject>,\n cell?: Cell,\n}\n\nexport type BaseMeta = Meta<DefaultObject, MetaProps>\n\nexport type TableGetter = (props: DefaultObject) => DefaultObject;\n\nexport type ElementGetter = (props: DefaultObject, meta: BaseMeta) => DefaultObject;\n\nexport type ElementCellPropGetter = CellPropGetter<DefaultObject>\n\nexport type ElementRowPropGetter = RowPropGetter<DefaultObject>\n\nexport type ElementHeaderFooterPropGetter = FooterGroupPropGetter<DefaultObject> |\n HeaderGroupPropGetter<DefaultObject> |\n FooterPropGetter<DefaultObject>\n\nexport type GetTableContainerPropsGetter = (userGetter?: TableGetter, getter?: TableGetter) =>\n TablePropGetter<DefaultObject> | TableBodyPropGetter<DefaultObject>\n\nexport type GetTableElementPropsGetter<T> = (userGetter?: ElementGetter, getter?: ElementGetter) => T\n\nexport type GetTableElementInternalPropsGetter =\n (internalProps: DefaultObject, userGetter?: ElementGetter, getter?: ElementGetter) =>\n HeaderPropGetter<DefaultObject>\n\nexport type ColumnWithSort = HeaderGroup<DefaultObject> & Partial<UseSortByColumnProps<DefaultObject>>\n\nexport type StandardColumn = Column<DefaultObject>\n\nexport type StandardRow = Row<DefaultObject> & { isExpanded?: boolean }\n\nexport type SelectableRow = Row<{ id: string }> & UseRowSelectRowProps<DefaultObject>\n\nexport type StandardCell = Cell<DefaultObject>\n\nexport type SelectableRowInstanceProps = UseRowSelectInstanceProps<DefaultObject>\n\nexport type StandardHooks = Hooks<DefaultObject>\n\nexport type TableHooksInstanceProps =\n UseSortByInstanceProps<DefaultObject> &\n UsePaginationInstanceProps<DefaultObject> &\n UseRowSelectInstanceProps<DefaultObject> &\n { state: UseRowSelectState<DefaultObject> & UsePaginationState<DefaultObject>};\n\nexport type TableOptionsProps =\n UseTableOptions<DefaultObject> & UseSortByOptions<DefaultObject> & UsePaginationOptions<DefaultObject> &\n { initialState: Partial<TableState<DefaultObject>> & Partial<UsePaginationState<DefaultObject>> }\n\nexport class Table extends React.Component<Partial<TableProps>> {}\n","// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport {useEffect} from 'react';\n\nconst TABLE_SHADOW_CLASS_NAME = {\n LEFT: 'shadow_left',\n RIGHT: 'shadow_right',\n};\n\nfunction changeClassName(tableWrapperNode: Element, newClassNameList: string[]) {\n const {classList} = tableWrapperNode;\n\n classList.remove(TABLE_SHADOW_CLASS_NAME.LEFT, TABLE_SHADOW_CLASS_NAME.RIGHT);\n classList.add(...newClassNameList);\n}\n\nfunction calculateNewClassNames(tableNode, tableWrapperNode) {\n if (!tableNode || !tableWrapperNode) {\n return;\n }\n\n const tableRect = tableNode.getBoundingClientRect();\n const tableWrapperRect = tableWrapperNode.getBoundingClientRect();\n const newClassName = [];\n\n const tableRectLeft = Math.floor(tableRect.left);\n const tableRectRight = Math.floor(tableRect.right);\n const tableWrapperRectLeft = Math.floor(tableWrapperRect.left);\n const tableWrapperRectRight = Math.floor(tableWrapperRect.right);\n\n if (tableRectLeft < tableWrapperRectLeft) {\n newClassName.push(TABLE_SHADOW_CLASS_NAME.LEFT);\n }\n\n if (tableRectRight > tableWrapperRectRight) {\n newClassName.push(TABLE_SHADOW_CLASS_NAME.RIGHT);\n }\n\n changeClassName(tableWrapperNode, newClassName);\n}\n\nexport default (tableRef, tableWrapperRef) => {\n useEffect(() => {\n let ticking = false;\n\n function onMousewheel() {\n if (ticking) {\n return;\n }\n\n window.requestAnimationFrame(() => {\n calculateNewClassNames(tableRef.current, tableWrapperRef.current);\n ticking = false;\n });\n\n ticking = true;\n }\n\n calculateNewClassNames(tableRef.current, tableWrapperRef.current);\n\n tableRef?.current?.addEventListener('mousewheel', onMousewheel);\n window.addEventListener('resize', onMousewheel);\n\n return () => {\n tableRef?.current?.removeEventListener('mousewheel', onMousewheel);\n window.removeEventListener('resize', onMousewheel);\n };\n }, [tableRef.current, tableWrapperRef.current]);\n};\n","import {\n ElementGetter,\n BaseMeta,\n TableGetter,\n ElementCellPropGetter,\n ElementRowPropGetter,\n DefaultObject,\n ElementHeaderFooterPropGetter,\n GetTableElementPropsGetter,\n GetTableContainerPropsGetter,\n GetTableElementInternalPropsGetter,\n} from './types';\n\nexport const defaultGetter: ElementGetter = (props) => props;\n\nexport const cellGetter: ElementGetter = (props, {cell}) => ({\n ...props,\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n align: cell?.column?.align,\n});\nexport const mainCellGetter: ElementGetter = (props, {column}) => ({\n ...props,\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n align: column?.align,\n});\n\nexport const getTableProps: GetTableContainerPropsGetter = (userGetter, getter = defaultGetter as TableGetter) => {\n if (userGetter) {\n return (props) => ({\n ...getter(props),\n ...userGetter(props),\n });\n }\n\n return getter;\n};\n\nexport const getTableElementProps:\n GetTableElementPropsGetter<ElementHeaderFooterPropGetter> = (userGetter, getter = defaultGetter) => {\n if (userGetter) {\n return (props, meta) => ({\n ...getter(props, meta),\n ...userGetter(props, meta),\n });\n }\n\n return getter;\n };\n\nexport const getTableRowProps:\n GetTableElementPropsGetter<ElementRowPropGetter> = (userGetter, getter = defaultGetter) => {\n if (userGetter) {\n return (props, meta) => ({\n ...getter(props, meta),\n ...userGetter(props, meta),\n });\n }\n\n return getter;\n };\n\nexport const getTableCellProps:\n GetTableElementPropsGetter<ElementCellPropGetter> = (userGetter, getter = defaultGetter) => {\n if (userGetter) {\n return (props, meta) => ({\n ...getter(props, meta),\n ...userGetter(props, meta),\n });\n }\n\n return getter;\n };\n\nexport const getTableElementInternalProps:\n GetTableElementInternalPropsGetter = (internalProps, userGetter, getter = defaultGetter) => {\n if (userGetter) {\n return (props, meta) => ({\n ...getter({...props, ...internalProps}, meta),\n ...userGetter(props, meta),\n });\n }\n\n return (props: DefaultObject, meta: BaseMeta) => getter({...props, ...internalProps}, meta);\n };\n","/* eslint max-len: off */\nimport styled, {\n keyframes, css, CSSObject,\n} from 'styled-components';\nimport {\n fontNormal,\n white,\n black,\n spacing,\n gray80,\n gray95,\n} from '@propellerads/stylevariables';\n\nconst loadingAnimation = keyframes`\n from {\n background-position-x: 0;\n }\n 50% {\n background-position-x: 100%;\n }\n 100% {\n background-position-x: 0;\n }\n`;\n\nexport const TableLoading = styled.div`\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.8);\n transition: all 0.3s ease;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n \n ${(props: { isLoading: boolean }) => props.isLoading && css`\n opacity: 1;\n z-index: 2;\n pointer-events: all;\n `}\n`;\n\nexport const TableLoadingInner = styled.div`\n position: absolute;\n display: block;\n text-align: center;\n width: 100%;\n top: 50%;\n left: 0;\n color: rgba(0, 0, 0, 0.6);\n transform: translateY(-52%);\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n`;\n\nexport const TableWrapper = styled.div`\n position: relative;\n overflow: hidden;\n \n &::before {\n bottom: 10px;\n content: '';\n opacity: 0;\n pointer-events: none;\n position: absolute;\n width: 10px;\n height: 100%;\n top: 0;\n left: -10px;\n box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);\n transition: 0.3s opacity;\n }\n\n &::after {\n bottom: 10px;\n content: '';\n opacity: 0;\n pointer-events: none;\n width: 10px;\n height: 100%;\n position: absolute;\n top: 0;\n right: -10px;\n box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);\n transition: 0.3s opacity;\n }\n \n &.shadow_left {\n &::before {\n opacity: 1 !important;\n }\n }\n \n &.shadow_right {\n &::after {\n opacity: 1 !important;\n }\n }\n`;\n\nexport const TableRoot = styled.div`\n font-size: ${fontNormal}px;\n position: relative;\n display: flex;\n flex-direction: column;\n border: 0;\n`;\n\nexport const TableContent = styled.div`\n display: block;\n max-width: 100%;\n overflow-x: scroll;\n overflow-y: hidden;\n`;\n\nexport const TableCore = styled.div`\n flex: auto 1;\n display: flex;\n flex-direction: column;\n align-items: stretch; \n border-collapse: collapse;\n`;\n\nexport const HeadCell = styled.div`\n display: inline-flex;\n`;\n\nexport const TD = styled.div`\n white-space: nowrap;\n text-overflow: ellipsis;\n line-height: 1.3rem;\n padding: 7px 4px;\n overflow: hidden;\n transition: width 0.3s ease 0s, min-width, padding, opacity;\n \n ${({align}: { align?: CSSObject, colSpan?: number }) => align && css`\n text-align: ${align}`\n}\n`;\n\nexport const EmptyStateCell = styled.div`\n width: 100%;\n height: ${spacing * 4}px;\n background: linear-gradient(to left, ${gray95}, ${white}, ${gray95});\n background-size: 200% 200%;\n animation: ${loadingAnimation} 1.6s linear infinite;\n`;\n\nexport const TH = styled.div`\n padding: 0 4px;\n line-height: normal;\n position: relative;\n transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;\n color: rgb(0, 0, 0);\n font-weight: 500;\n outline: none;\n`;\n\nexport const THead = styled.div`\n flex: 1 0 auto;\n display: flex;\n flex-direction: column;\n user-select: none;\n \n ${TH}, ${TD} {\n padding: 0 4px;\n line-height: normal;\n position: relative;\n transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n color: ${black};\n font-weight: 500;\n outline: none;\n }\n`;\n\nexport const TRGroup = styled.div`\n display: flex;\n flex: 1 0 auto;\n box-shadow: inset 0 -1px 0 0 ${gray95};\n min-width: 100%;\n width: max-content;\n`;\n\nexport const TR = styled.div`\n padding: 0;\n -webkit-box-align: center;\n align-items: center;\n`;\n\nexport const TBody = styled.div`\n border-top: 1px solid ${gray80};\n margin-top: ${spacing * 2}px;\n min-width: 100%;\n width: max-content;\n`;\n\nexport const TFoot = styled.div`\n background: ${gray95};\n flex: 1 0 auto;\n display: flex;\n flex-direction: column;\n`;\n","import React, {\n FunctionComponent, useEffect, useMemo, useRef,\n} from 'react';\nimport {\n useSortBy,\n useTable,\n useRowSelect,\n usePagination,\n useExpanded,\n useFlexLayout,\n Column,\n} from 'react-table';\n\nimport {\n ArrowDown, ArrowUp, COLOR, SIZE,\n} from '@propellerads/icon';\nimport Checkbox from '@propellerads/input-checkbox';\n\nimport useLoadingState from './useLoadingState';\nimport useTableShadow from './useTableShadow';\n\nimport {\n FOOTER_PLACEMENT,\n TableProps,\n PaginationProps,\n StandardHooks,\n StandardColumn,\n StandardRow,\n StandardCell,\n ColumnWithSort,\n TableHooksInstanceProps,\n SelectableRowInstanceProps,\n TableOptionsProps,\n SelectableRow,\n DefaultObject,\n} from './types';\n\nimport {\n getTableProps as getTableBodyProps,\n getTableElementProps,\n getTableElementInternalProps,\n cellGetter,\n mainCellGetter,\n getTableCellProps,\n getTableRowProps,\n} from './propsGetter';\n\nimport {\n TableRoot,\n TableWrapper,\n TableContent,\n HeadCell,\n TableLoading,\n TableLoadingInner,\n TD,\n TableCore,\n THead,\n TR,\n TH,\n TBody,\n TRGroup,\n TFoot,\n EmptyStateCell,\n} from './style';\n\nexport const defaultProps = {\n hasDefaultPagination: false,\n isLoading: false,\n footerPlacement: [],\n loadingMessage: 'loading...',\n labelPerPage: 'Show rows',\n parentElementId: 'parent-element',\n tableContentId: '',\n showLoadingState: false,\n initialState: {},\n LoadingCellComponent: EmptyStateCell,\n getRowPreProps: () => ({}),\n noDataMessage: '',\n};\n\ntype DefaultProps = Readonly<typeof defaultProps>;\n\nconst disableSortRemove = true;\nconst disableMultiSort = true;\nconst disabledMultiRemove = true;\n\nconst DEFAULT_PAGE_INDEX = 0;\nconst DEFAULT_PAGE_SIZE = 10;\n\nfunction isFunction(reference?: (arg1?: any, arg2?: any) => void) {\n return typeof reference === 'function';\n}\n\nfunction getHeadContent(column: ColumnWithSort) {\n if (column.isSorted && column.isSortedDesc) {\n return (\n <HeadCell>\n {column.render('Header')}\n <ArrowDown size={SIZE.SMALL} color={COLOR.GRAY_DARK} />\n </HeadCell>\n );\n }\n\n if (column.isSorted && !column.isSortedDesc) {\n return (\n <HeadCell>\n {column.render('Header')}\n <ArrowUp size={SIZE.SMALL} color={COLOR.GRAY_DARK} />\n </HeadCell>\n );\n }\n\n return column.render('Header');\n}\n\nconst Table: FunctionComponent<TableProps & DefaultProps> = (props) => {\n const {\n columns,\n data,\n totalItems,\n fetchData,\n controlledPagination,\n initialState,\n isLoading,\n loadingMessage,\n labelPerPage,\n footerPlacement,\n onSortedChange,\n hasDefaultPagination,\n onSelectRowsChange,\n parentElementId,\n tableContentId,\n LoadingCellComponent,\n PaginationComponent,\n getRowPreProps,\n getTableProps,\n getHeaderGroupProps,\n getHeaderProps,\n getRowProps,\n getCellProps,\n getFooterProps,\n getFooterGroupProps,\n showLoadingState,\n noDataMessage,\n rowSubComponent,\n } = props;\n\n const memoColumns = useMemo(() => columns, [columns]);\n\n const {loadingColumns, loadingData} = useLoadingState(\n showLoadingState,\n isLoading,\n controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE,\n memoColumns,\n LoadingCellComponent,\n );\n\n const showLoading = showLoadingState && isLoading;\n const hasSelectedRowsAbility = onSelectRowsChange && isFunction(onSelectRowsChange);\n const hasManualSortBy = onSortedChange && isFunction(onSortedChange);\n const hasControlledPagination = fetchData\n && controlledPagination\n && Object.keys(controlledPagination).length > 0;\n\n const options: TableOptionsProps = {\n columns: showLoading\n ? (loadingColumns as Column<DefaultObject>[])\n : memoColumns,\n data: showLoading ? loadingData : data,\n initialState,\n disableSortRemove,\n disableMultiSort,\n disabledMultiRemove,\n };\n\n if (hasManualSortBy) {\n options.manualSortBy = true;\n }\n\n if (hasControlledPagination) {\n if (typeof controlledPagination?.pageCount === 'undefined') {\n throw new Error(\n 'You have to pass pageCount in controlledPagination data',\n );\n }\n\n options.initialState = {\n ...options.initialState,\n pageIndex: controlledPagination.pageIndex ?? DEFAULT_PAGE_INDEX,\n pageSize: controlledPagination.pageSize ?? DEFAULT_PAGE_SIZE,\n };\n\n options.autoResetPage = true;\n options.manualPagination = true;\n options.pageCount = controlledPagination.pageCount;\n }\n\n const useSelect = (hooks: StandardHooks) => {\n if (!hasSelectedRowsAbility) {\n return;\n }\n\n const newColumn = {\n id: 'selection',\n disableSortBy: true,\n Header: (instance: SelectableRowInstanceProps) => {\n const {\n getToggleAllRowsSelectedProps,\n toggleAllRowsSelected,\n } = instance;\n\n return (\n <Checkbox\n elementId=\"all\"\n onChange={toggleAllRowsSelected}\n isChecked={getToggleAllRowsSelectedProps().checked}\n />\n );\n },\n Cell: ({row}: { row: SelectableRow }) => {\n const {\n id,\n original,\n toggleRowSelected,\n getToggleRowSelectedProps,\n } = row;\n\n const elementId = Number.isInteger(original.id) ? original.id : id;\n\n return (\n <Checkbox\n elementId={elementId}\n onChange={toggleRowSelected}\n isChecked={getToggleRowSelectedProps().checked}\n />\n );\n },\n };\n\n hooks.visibleColumns.push((tableColumns: Array<StandardColumn>) => [\n newColumn,\n ...tableColumns,\n ]);\n };\n\n const {\n getTableProps: _getTableProps,\n headerGroups,\n footerGroups,\n setHiddenColumns,\n rows,\n prepareRow,\n visibleColumns,\n ...rest\n } = useTable(\n options,\n useFlexLayout,\n useSortBy,\n useExpanded,\n usePagination,\n useRowSelect,\n useSelect,\n );\n\n const {\n selectedFlatRows,\n setSortBy,\n page,\n canPreviousPage,\n canNextPage,\n pageCount,\n gotoPage,\n nextPage,\n previousPage,\n setPageSize,\n state: {selectedRowIds, pageIndex, pageSize},\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n } = rest as TableHooksInstanceProps;\n\n const tableRef = useRef(null);\n const tableWrapperRef = useRef(null);\n\n useTableShadow(tableRef, tableWrapperRef);\n\n useEffect(() => {\n if (!initialState?.hiddenColumns) {\n return;\n }\n\n setHiddenColumns(initialState.hiddenColumns);\n }, [initialState?.hiddenColumns]);\n\n useEffect(() => {\n if (hasSelectedRowsAbility) {\n onSelectRowsChange?.(\n selectedFlatRows?.map((row: StandardRow) => row.original),\n );\n }\n }, [selectedRowIds]);\n\n let pagination: JSX.Element | null = null;\n\n if (hasDefaultPagination && hasControlledPagination) {\n throw new Error(\n 'You have to pass either hasDefaultPagination true boolean prop or '\n + 'pass fetchData callback and controlledPagination data',\n );\n }\n\n if (hasControlledPagination || hasDefaultPagination) {\n const paginationData: PaginationProps = {\n setPageSize,\n gotoPage,\n canNextPage,\n canPreviousPage,\n parentElementId,\n labelPerPage,\n pageIndex,\n previousPageHandler: previousPage,\n nextPageHandler: nextPage,\n totalPages: pageCount,\n perPage: pageSize,\n totalItems: totalItems ?? data.length,\n };\n\n if (hasControlledPagination && controlledPagination) {\n paginationData.canNextPage = controlledPagination.pageIndex + 1 !== paginationData.totalPages;\n paginationData.canPreviousPage = controlledPagination.pageIndex !== 0;\n paginationData.pageIndex = controlledPagination.pageIndex;\n paginationData.perPage = controlledPagination.pageSize;\n\n paginationData.setPageSize = (newPageSize: number) => {\n fetchData?.({\n pageIndex: paginationData.pageIndex,\n pageSize: newPageSize,\n });\n };\n\n paginationData.gotoPage = (newPageIndex: number) => {\n fetchData?.({\n pageIndex: newPageIndex,\n pageSize: paginationData.perPage,\n });\n };\n\n paginationData.nextPageHandler = () => {\n const newPageIndex = paginationData.pageIndex + 1;\n paginationData.gotoPage(newPageIndex);\n };\n\n paginationData.previousPageHandler = () => {\n const newPageIndex = paginationData.pageIndex - 1;\n paginationData.gotoPage(newPageIndex);\n };\n\n if (controlledPagination?.paginationAmount) {\n paginationData.paginationAmount = controlledPagination.paginationAmount;\n }\n }\n\n pagination = <PaginationComponent {...paginationData} />;\n }\n\n function extendSortByProps(column: ColumnWithSort) {\n const headerProps = column.getSortByToggleProps && column.getSortByToggleProps();\n\n delete headerProps?.style;\n\n if (hasManualSortBy && column.canSort && headerProps) {\n headerProps.onClick = () => {\n onSortedChange?.(column.id, Boolean(column.isSortedDesc));\n setSortBy([\n {\n id: column.id,\n desc: !column.isSortedDesc,\n },\n ]);\n };\n }\n\n return headerProps;\n }\n\n const tBodyTr = hasControlledPagination || hasDefaultPagination ? page : rows;\n\n return (\n <TableRoot className=\"table-root\">\n <TableLoading\n isLoading={!showLoadingState && isLoading}\n className=\"table-loading\"\n >\n <TableLoadingInner>{loadingMessage}</TableLoadingInner>\n </TableLoading>\n <TableWrapper ref={tableWrapperRef} className=\"table-wrapper\">\n <TableContent id={tableContentId} className=\"table-content\">\n <TableCore\n {..._getTableProps(getTableBodyProps(getTableProps))}\n ref={tableRef}\n >\n <THead className=\"table-head\">\n {headerGroups.map((headerGroup) => (\n <TR\n {...headerGroup.getHeaderGroupProps(\n getTableElementProps(getHeaderGroupProps),\n )}\n >\n {headerGroup.headers.map((column) => {\n const headerProps = extendSortByProps(\n column,\n ) as DefaultObject;\n\n return (\n <TH\n {...column.getHeaderProps(\n getTableElementInternalProps(\n headerProps,\n getHeaderProps,\n mainCellGetter,\n ),\n )}\n >\n {getHeadContent(column)}\n </TH>\n );\n })}\n </TR>\n ))}\n </THead>\n {footerPlacement.includes(FOOTER_PLACEMENT.TOP) && (\n <TFoot className=\"table-footer-top\">\n {footerGroups.map((group) => (\n <TR\n {...group.getFooterGroupProps(\n getTableElementProps(getFooterGroupProps),\n )}\n >\n {group.headers.map((column) => (\n <TD\n {...column.getFooterProps(\n getTableElementProps(getFooterProps, mainCellGetter),\n )}\n >\n {column.render('Footer')}\n </TD>\n ))}\n </TR>\n ))}\n </TFoot>\n )}\n <TBody className=\"table-body\">\n {tBodyTr.map((row: StandardRow) => {\n prepareRow(row);\n const {isDelimiterTd} = getRowPreProps(row);\n\n if (isDelimiterTd) {\n return (\n <React.Fragment key={`group_${row.index}`}>\n <TRGroup>\n <TR {...row.getRowProps(getTableRowProps(getRowProps))}>\n <TD\n colSpan={visibleColumns.length}\n {...row.cells[0].getCellProps(\n getTableCellProps(getCellProps, cellGetter),\n )}\n >\n <strong>{row.cells[0].render('Cell')}</strong>\n </TD>\n </TR>\n </TRGroup>\n {row?.isExpanded && rowSubComponent && rowSubComponent(row)}\n </React.Fragment>\n );\n }\n\n return (\n <React.Fragment key={`group_${row.index}`}>\n <TRGroup>\n <TR {...row.getRowProps(getTableRowProps(getRowProps))}>\n {row.cells.map((cell: StandardCell) => (\n <TD\n {...cell.getCellProps(\n getTableCellProps(getCellProps, cellGetter),\n )}\n >\n {cell.render('Cell')}\n </TD>\n ))}\n </TR>\n </TRGroup>\n {row?.isExpanded && rowSubComponent && rowSubComponent(row)}\n </React.Fragment>\n );\n })}\n </TBody>\n {footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && (\n <TFoot className=\"table-footer-bottom\">\n {footerGroups.map((group) => (\n <TR\n {...group.getFooterGroupProps(\n getTableElementProps(getFooterGroupProps),\n )}\n >\n {group.headers.map((column) => (\n <TD\n {...column.getFooterProps(\n getTableElementProps(getFooterProps, mainCellGetter),\n )}\n >\n {column.render('Footer')}\n </TD>\n ))}\n </TR>\n ))}\n </TFoot>\n )}\n </TableCore>\n </TableContent>\n </TableWrapper>\n {!isLoading && !data.length && noDataMessage}\n {pagination}\n </TableRoot>\n );\n};\n\nTable.defaultProps = defaultProps;\n\nexport {Table};\n","import React, {FunctionComponent, useMemo} from 'react';\nimport {Column} from 'react-table';\nimport {DefaultObject, LoadingState} from './types';\n\nconst useLoadingState = (\n showLoadingState: boolean,\n loading: boolean,\n pageSize: number,\n columns: Column<DefaultObject>[],\n LoadingCellComponent: FunctionComponent<DefaultObject>,\n): LoadingState => {\n const loadingColumns: Column<DefaultObject>[] | undefined = useMemo(() => (showLoadingState && loading ? columns\n .map((column: Column<DefaultObject>) => {\n const loadingColumn: Column<DefaultObject> = {\n ...column,\n Cell: () => <LoadingCellComponent />,\n };\n\n return loadingColumn;\n }) : []), [columns, loading, showLoadingState]);\n\n const loadingData = useMemo(() => {\n if (showLoadingState && loading && columns && columns.length > 0) {\n const dataObject: DefaultObject = {};\n const dataArray: DefaultObject[] = [];\n\n for (let i = 0; i < columns.length; i += 1) {\n dataObject[`empty_${i}`] = '';\n }\n for (let i = 0; i < pageSize; i += 1) {\n dataArray.push(dataObject);\n }\n\n return dataArray;\n }\n\n return [];\n }, [columns, loading, pageSize, showLoadingState]);\n\n return {\n loadingColumns,\n loadingData,\n };\n};\n\nexport default useLoadingState;\n"],"names":["FOOTER_PLACEMENT","calculateNewClassNames","tableNode","tableWrapperNode","tableRect","getBoundingClientRect","tableWrapperRect","newClassName","tableRectLeft","Math","floor","left","tableRectRight","right","tableWrapperRectLeft","tableWrapperRectRight","push","newClassNameList","classList","remove","add","changeClassName","defaultGetter","props","cellGetter","cell","align","column","_cell$column","mainCellGetter","getTableElementProps","userGetter","getter","meta","getTableCellProps","loadingAnimation","keyframes","TableLoading","styled","div","isLoading","css","TableLoadingInner","TableWrapper","TableRoot","fontNormal","TableContent","TableCore","HeadCell","TD","EmptyStateCell","spacing","gray95","white","TH","THead","black","TRGroup","TR","TBody","gray80","TFoot","defaultProps","hasDefaultPagination","footerPlacement","loadingMessage","labelPerPage","parentElementId","tableContentId","showLoadingState","initialState","LoadingCellComponent","getRowPreProps","noDataMessage","isFunction","reference","Table","columns","data","totalItems","fetchData","controlledPagination","onSortedChange","onSelectRowsChange","PaginationComponent","getTableProps","getHeaderGroupProps","getHeaderProps","getRowProps","getCellProps","getFooterProps","getFooterGroupProps","rowSubComponent","memoColumns","useMemo","loading","pageSize","loadingColumns","map","Cell","React","loadingData","length","dataObject","dataArray","i","useLoadingState","showLoading","hasSelectedRowsAbility","hasManualSortBy","hasControlledPagination","Object","keys","options","disableSortRemove","disableMultiSort","disabledMultiRemove","manualSortBy","pageCount","Error","pageIndex","autoResetPage","manualPagination","useTable","useFlexLayout","useSortBy","useExpanded","usePagination","useRowSelect","hooks","newColumn","id","disableSortBy","Header","instance","Checkbox","elementId","onChange","toggleAllRowsSelected","isChecked","getToggleAllRowsSelectedProps","checked","row","original","toggleRowSelected","getToggleRowSelectedProps","Number","isInteger","visibleColumns","tableColumns","_getTableProps","headerGroups","footerGroups","setHiddenColumns","rows","prepareRow","rest","selectedFlatRows","setSortBy","page","canPreviousPage","canNextPage","gotoPage","nextPage","previousPage","setPageSize","state","selectedRowIds","tableRef","useRef","tableWrapperRef","useEffect","ticking","onMousewheel","window","requestAnimationFrame","current","addEventListener","removeEventListener","useTableShadow","hiddenColumns","pagination","paginationData","previousPageHandler","nextPageHandler","totalPages","perPage","newPageSize","newPageIndex","paginationAmount","tBodyTr","className","ref","headerGroup","headers","headerProps","getSortByToggleProps","style","canSort","onClick","Boolean","isSortedDesc","desc","extendSortByProps","internalProps","getTableElementInternalProps","isSorted","render","ArrowDown","size","SIZE","SMALL","color","COLOR","GRAY_DARK","ArrowUp","getHeadContent","includes","TOP","group","Fragment","key","index","getTableRowProps","isDelimiterTd","colSpan","cells","isExpanded","BOTTOM"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"table.cjs.production.min.js","sources":["../src/types.tsx","../src/useTableShadow.tsx","../src/propsGetter.tsx","../src/style.tsx","../src/index.tsx","../src/useLoadingState.tsx"],"sourcesContent":["import React, {FunctionComponent, ReactElement, ReactNode} from 'react';\nimport {\n Cell,\n CellPropGetter,\n Column,\n FooterGroupPropGetter,\n FooterPropGetter,\n HeaderGroup,\n HeaderGroupPropGetter,\n Hooks,\n Meta,\n Row,\n RowPropGetter,\n TableBodyPropGetter,\n TablePropGetter, TableState,\n UsePaginationInstanceProps, UsePaginationOptions,\n UsePaginationState,\n UseRowSelectInstanceProps,\n UseRowSelectState, UseSortByColumnProps, UseRowSelectRowProps,\n UseSortByInstanceProps, UseSortByOptions,\n UseTableOptions, HeaderPropGetter,\n} from 'react-table';\n\nexport type DefaultObject = Record<string, string | number | unknown>;\n\nexport type LoadingState = {\n loadingColumns?: Column[],\n loadingData: any[],\n}\n\nexport enum FOOTER_PLACEMENT {\n TOP = 'top',\n BOTTOM = 'bottom'\n}\n\nexport type PaginationProps = {\n paginationAmount?: string | ReactNode | ReactElement,\n parentElementId: string,\n labelPerPage?: string,\n pageSizes?: Array<string | number>,\n pageIndex: number,\n perPage: number,\n totalPages: number,\n totalItems: number,\n canNextPage: boolean,\n canPreviousPage: boolean,\n nextPageHandler: () => void,\n previousPageHandler: () => void,\n setPageSize: (size: number) => void,\n gotoPage: (page: number) => void,\n}\n\nexport type ControlledPagination = {\n paginationAmount?: string | ReactNode | ReactElement,\n pageSize: number,\n pageIndex: number,\n pageCount: number,\n}\n\nexport type TableProps = {\n columns: Array<Column<DefaultObject>>,\n data: [],\n totalItems?: number,\n PaginationComponent: React.FunctionComponent<PaginationProps>,\n initialState: Partial<TableState<DefaultObject>>,\n fetchData?: (params: { pageIndex: number, pageSize: number }) => void,\n onSortedChange?: (id: string, isDesc: boolean) => void,\n isLoading?: boolean,\n footerPlacement?: Array<FOOTER_PLACEMENT>,\n hasDefaultPagination?: boolean,\n onSelectRowsChange?: (rows: Array<DefaultObject>) => void,\n controlledPagination?: ControlledPagination,\n loadingMessage?: string,\n labelPerPage?: string,\n parentElementId?: string,\n tableContentId?: string,\n getRowPreProps?: (row: Row) => DefaultObject,\n getTableProps?: TableGetter,\n getHeaderGroupProps?: ElementGetter,\n getHeaderProps?: ElementGetter,\n getRowProps?: ElementGetter,\n getCellProps?: ElementGetter,\n getFooterProps?: ElementGetter,\n getFooterGroupProps?: ElementGetter,\n showLoadingState?: boolean,\n LoadingCellComponent?: FunctionComponent<DefaultObject>,\n noDataMessage?: string | ReactElement\n rowSubComponent?: (row: StandardRow) => ReactElement,\n isEnableRowSelect?: (original: DefaultObject) => boolean,\n}\n\nexport type TableOptions = {\n columns: Array<Column<DefaultObject>>,\n data: Array<DefaultObject>,\n initialState: {\n pageIndex?: number,\n pageSize?: number,\n },\n disableSortRemove: boolean,\n disableMultiSort: boolean,\n disableMultiRemove: boolean,\n manualSortBy?: boolean,\n autoResetPage?: boolean,\n manualPagination?: boolean,\n pageCount?: number,\n}\n\nexport type MetaProps = {\n column?: HeaderGroup<DefaultObject>,\n cell?: Cell,\n}\n\nexport type BaseMeta = Meta<DefaultObject, MetaProps>\n\nexport type TableGetter = (props: DefaultObject) => DefaultObject;\n\nexport type ElementGetter = (props: DefaultObject, meta: BaseMeta) => DefaultObject;\n\nexport type ElementCellPropGetter = CellPropGetter<DefaultObject>\n\nexport type ElementRowPropGetter = RowPropGetter<DefaultObject>\n\nexport type ElementHeaderFooterPropGetter = FooterGroupPropGetter<DefaultObject> |\n HeaderGroupPropGetter<DefaultObject> |\n FooterPropGetter<DefaultObject>\n\nexport type GetTableContainerPropsGetter = (userGetter?: TableGetter, getter?: TableGetter) =>\n TablePropGetter<DefaultObject> | TableBodyPropGetter<DefaultObject>\n\nexport type GetTableElementPropsGetter<T> = (userGetter?: ElementGetter, getter?: ElementGetter) => T\n\nexport type GetTableElementInternalPropsGetter =\n (internalProps: DefaultObject, userGetter?: ElementGetter, getter?: ElementGetter) =>\n HeaderPropGetter<DefaultObject>\n\nexport type ColumnWithSort = HeaderGroup<DefaultObject> & Partial<UseSortByColumnProps<DefaultObject>>\n\nexport type StandardColumn = Column<DefaultObject>\n\nexport type StandardRow = Row<DefaultObject> & { isExpanded?: boolean }\n\nexport type SelectableRow = Row<{ id: string }> & UseRowSelectRowProps<DefaultObject>\n\nexport type StandardCell = Cell<DefaultObject>\n\nexport type SelectableRowInstanceProps = UseRowSelectInstanceProps<DefaultObject>\n\nexport type StandardHooks = Hooks<DefaultObject>\n\nexport type TableHooksInstanceProps =\n UseSortByInstanceProps<DefaultObject> &\n UsePaginationInstanceProps<DefaultObject> &\n UseRowSelectInstanceProps<DefaultObject> &\n { state: UseRowSelectState<DefaultObject> & UsePaginationState<DefaultObject>};\n\nexport type TableOptionsProps =\n UseTableOptions<DefaultObject> & UseSortByOptions<DefaultObject> & UsePaginationOptions<DefaultObject> &\n { initialState: Partial<TableState<DefaultObject>> & Partial<UsePaginationState<DefaultObject>> }\n\nexport class Table extends React.Component<Partial<TableProps>> {}\n","// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-nocheck\nimport {useEffect} from 'react';\n\nconst TABLE_SHADOW_CLASS_NAME = {\n LEFT: 'shadow_left',\n RIGHT: 'shadow_right',\n};\n\nfunction changeClassName(tableWrapperNode: Element, newClassNameList: string[]) {\n const {classList} = tableWrapperNode;\n\n classList.remove(TABLE_SHADOW_CLASS_NAME.LEFT, TABLE_SHADOW_CLASS_NAME.RIGHT);\n classList.add(...newClassNameList);\n}\n\nfunction calculateNewClassNames(tableNode, tableWrapperNode) {\n if (!tableNode || !tableWrapperNode) {\n return;\n }\n\n const tableRect = tableNode.getBoundingClientRect();\n const tableWrapperRect = tableWrapperNode.getBoundingClientRect();\n const newClassName = [];\n\n const tableRectLeft = Math.floor(tableRect.left);\n const tableRectRight = Math.floor(tableRect.right);\n const tableWrapperRectLeft = Math.floor(tableWrapperRect.left);\n const tableWrapperRectRight = Math.floor(tableWrapperRect.right);\n\n if (tableRectLeft < tableWrapperRectLeft) {\n newClassName.push(TABLE_SHADOW_CLASS_NAME.LEFT);\n }\n\n if (tableRectRight > tableWrapperRectRight) {\n newClassName.push(TABLE_SHADOW_CLASS_NAME.RIGHT);\n }\n\n changeClassName(tableWrapperNode, newClassName);\n}\n\nexport default (tableRef, tableWrapperRef) => {\n useEffect(() => {\n let ticking = false;\n\n function onMousewheel() {\n if (ticking) {\n return;\n }\n\n window.requestAnimationFrame(() => {\n calculateNewClassNames(tableRef.current, tableWrapperRef.current);\n ticking = false;\n });\n\n ticking = true;\n }\n\n calculateNewClassNames(tableRef.current, tableWrapperRef.current);\n\n tableRef?.current?.addEventListener('mousewheel', onMousewheel);\n window.addEventListener('resize', onMousewheel);\n\n return () => {\n tableRef?.current?.removeEventListener('mousewheel', onMousewheel);\n window.removeEventListener('resize', onMousewheel);\n };\n }, [tableRef.current, tableWrapperRef.current]);\n};\n","import {\n ElementGetter,\n BaseMeta,\n TableGetter,\n ElementCellPropGetter,\n ElementRowPropGetter,\n DefaultObject,\n ElementHeaderFooterPropGetter,\n GetTableElementPropsGetter,\n GetTableContainerPropsGetter,\n GetTableElementInternalPropsGetter,\n} from './types';\n\nexport const defaultGetter: ElementGetter = (props) => props;\n\nexport const cellGetter: ElementGetter = (props, {cell}) => ({\n ...props,\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n align: cell?.column?.align,\n});\nexport const mainCellGetter: ElementGetter = (props, {column}) => ({\n ...props,\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n align: column?.align,\n});\n\nexport const getTableProps: GetTableContainerPropsGetter = (userGetter, getter = defaultGetter as TableGetter) => {\n if (userGetter) {\n return (props) => ({\n ...getter(props),\n ...userGetter(props),\n });\n }\n\n return getter;\n};\n\nexport const getTableElementProps:\n GetTableElementPropsGetter<ElementHeaderFooterPropGetter> = (userGetter, getter = defaultGetter) => {\n if (userGetter) {\n return (props, meta) => ({\n ...getter(props, meta),\n ...userGetter(props, meta),\n });\n }\n\n return getter;\n };\n\nexport const getTableRowProps:\n GetTableElementPropsGetter<ElementRowPropGetter> = (userGetter, getter = defaultGetter) => {\n if (userGetter) {\n return (props, meta) => ({\n ...getter(props, meta),\n ...userGetter(props, meta),\n });\n }\n\n return getter;\n };\n\nexport const getTableCellProps:\n GetTableElementPropsGetter<ElementCellPropGetter> = (userGetter, getter = defaultGetter) => {\n if (userGetter) {\n return (props, meta) => ({\n ...getter(props, meta),\n ...userGetter(props, meta),\n });\n }\n\n return getter;\n };\n\nexport const getTableElementInternalProps:\n GetTableElementInternalPropsGetter = (internalProps, userGetter, getter = defaultGetter) => {\n if (userGetter) {\n return (props, meta) => ({\n ...getter({...props, ...internalProps}, meta),\n ...userGetter(props, meta),\n });\n }\n\n return (props: DefaultObject, meta: BaseMeta) => getter({...props, ...internalProps}, meta);\n };\n","/* eslint max-len: off */\nimport styled, {\n keyframes, css, CSSObject,\n} from 'styled-components';\nimport {\n fontNormal,\n white,\n black,\n spacing,\n gray80,\n gray95,\n} from '@propellerads/stylevariables';\n\nconst loadingAnimation = keyframes`\n from {\n background-position-x: 0;\n }\n 50% {\n background-position-x: 100%;\n }\n 100% {\n background-position-x: 0;\n }\n`;\n\nexport const TableLoading = styled.div`\n display: block;\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.8);\n transition: all 0.3s ease;\n z-index: -1;\n opacity: 0;\n pointer-events: none;\n \n ${(props: { isLoading: boolean }) => props.isLoading && css`\n opacity: 1;\n z-index: 2;\n pointer-events: all;\n `}\n`;\n\nexport const TableLoadingInner = styled.div`\n position: absolute;\n display: block;\n text-align: center;\n width: 100%;\n top: 50%;\n left: 0;\n color: rgba(0, 0, 0, 0.6);\n transform: translateY(-52%);\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n`;\n\nexport const TableWrapper = styled.div`\n position: relative;\n overflow: hidden;\n \n &::before {\n bottom: 10px;\n content: '';\n opacity: 0;\n pointer-events: none;\n position: absolute;\n width: 10px;\n height: 100%;\n top: 0;\n left: -10px;\n box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);\n transition: 0.3s opacity;\n }\n\n &::after {\n bottom: 10px;\n content: '';\n opacity: 0;\n pointer-events: none;\n width: 10px;\n height: 100%;\n position: absolute;\n top: 0;\n right: -10px;\n box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);\n transition: 0.3s opacity;\n }\n \n &.shadow_left {\n &::before {\n opacity: 1 !important;\n }\n }\n \n &.shadow_right {\n &::after {\n opacity: 1 !important;\n }\n }\n`;\n\nexport const TableRoot = styled.div`\n font-size: ${fontNormal}px;\n position: relative;\n display: flex;\n flex-direction: column;\n border: 0;\n`;\n\nexport const TableContent = styled.div`\n display: block;\n max-width: 100%;\n overflow-x: scroll;\n overflow-y: hidden;\n`;\n\nexport const TableCore = styled.div`\n flex: auto 1;\n display: flex;\n flex-direction: column;\n align-items: stretch; \n border-collapse: collapse;\n`;\n\nexport const HeadCell = styled.div`\n display: inline-flex;\n`;\n\nexport const TD = styled.div`\n white-space: nowrap;\n text-overflow: ellipsis;\n line-height: 1.3rem;\n padding: 7px 4px;\n overflow: hidden;\n transition: width 0.3s ease 0s, min-width, padding, opacity;\n \n ${({align}: { align?: CSSObject, colSpan?: number }) => align && css`\n text-align: ${align}`\n}\n`;\n\nexport const EmptyStateCell = styled.div`\n width: 100%;\n height: ${spacing * 4}px;\n background: linear-gradient(to left, ${gray95}, ${white}, ${gray95});\n background-size: 200% 200%;\n animation: ${loadingAnimation} 1.6s linear infinite;\n`;\n\nexport const TH = styled.div`\n padding: 0 4px;\n line-height: normal;\n position: relative;\n transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;\n color: rgb(0, 0, 0);\n font-weight: 500;\n outline: none;\n`;\n\nexport const THead = styled.div`\n flex: 1 0 auto;\n display: flex;\n flex-direction: column;\n user-select: none;\n \n ${TH}, ${TD} {\n padding: 0 4px;\n line-height: normal;\n position: relative;\n transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n color: ${black};\n font-weight: 500;\n outline: none;\n }\n`;\n\nexport const TRGroup = styled.div`\n display: flex;\n flex: 1 0 auto;\n box-shadow: inset 0 -1px 0 0 ${gray95};\n min-width: 100%;\n width: max-content;\n`;\n\nexport const TR = styled.div`\n padding: 0;\n -webkit-box-align: center;\n align-items: center;\n`;\n\nexport const TBody = styled.div`\n border-top: 1px solid ${gray80};\n margin-top: ${spacing * 2}px;\n min-width: 100%;\n width: max-content;\n`;\n\nexport const TFoot = styled.div`\n background: ${gray95};\n flex: 1 0 auto;\n display: flex;\n flex-direction: column;\n`;\n","import React, {\n FunctionComponent, useEffect, useMemo, useRef,\n} from 'react';\nimport {\n useSortBy,\n useTable,\n useRowSelect,\n usePagination,\n useExpanded,\n useFlexLayout,\n Column,\n} from 'react-table';\n\nimport {\n ArrowDown, ArrowUp, COLOR, SIZE,\n} from '@propellerads/icon';\nimport Checkbox from '@propellerads/input-checkbox';\n\nimport useLoadingState from './useLoadingState';\nimport useTableShadow from './useTableShadow';\n\nimport {\n FOOTER_PLACEMENT,\n TableProps,\n PaginationProps,\n StandardHooks,\n StandardColumn,\n StandardRow,\n StandardCell,\n ColumnWithSort,\n TableHooksInstanceProps,\n TableOptionsProps,\n SelectableRow,\n DefaultObject,\n} from './types';\n\nimport {\n getTableProps as getTableBodyProps,\n getTableElementProps,\n getTableElementInternalProps,\n cellGetter,\n mainCellGetter,\n getTableCellProps,\n getTableRowProps,\n} from './propsGetter';\n\nimport {\n TableRoot,\n TableWrapper,\n TableContent,\n HeadCell,\n TableLoading,\n TableLoadingInner,\n TD,\n TableCore,\n THead,\n TR,\n TH,\n TBody,\n TRGroup,\n TFoot,\n EmptyStateCell,\n} from './style';\n\nconst isEnableRowSelectDefault: () => boolean = () => true;\nconst selectColumnPropsDefault = {};\nconst getRowPrePropsDefault: () => DefaultObject = () => ({});\n\nexport const defaultProps = {\n hasDefaultPagination: false,\n isLoading: false,\n footerPlacement: [],\n loadingMessage: 'loading...',\n labelPerPage: 'Show rows',\n parentElementId: 'parent-element',\n tableContentId: '',\n showLoadingState: false,\n initialState: {},\n LoadingCellComponent: EmptyStateCell,\n getRowPreProps: getRowPrePropsDefault,\n isEnableRowSelect: isEnableRowSelectDefault,\n selectColumnProps: selectColumnPropsDefault,\n noDataMessage: '',\n};\n\ntype DefaultProps = Readonly<typeof defaultProps>;\n\nconst disableSortRemove = true;\nconst disableMultiSort = true;\nconst disabledMultiRemove = true;\n\nconst DEFAULT_PAGE_INDEX = 0;\nconst DEFAULT_PAGE_SIZE = 10;\n\nfunction isFunction(reference?: (arg1?: any, arg2?: any) => void) {\n return typeof reference === 'function';\n}\n\nfunction getHeadContent(column: ColumnWithSort) {\n if (column.isSorted && column.isSortedDesc) {\n return (\n <HeadCell>\n {column.render('Header')}\n <ArrowDown size={SIZE.SMALL} color={COLOR.GRAY_DARK} />\n </HeadCell>\n );\n }\n\n if (column.isSorted && !column.isSortedDesc) {\n return (\n <HeadCell>\n {column.render('Header')}\n <ArrowUp size={SIZE.SMALL} color={COLOR.GRAY_DARK} />\n </HeadCell>\n );\n }\n\n return column.render('Header');\n}\n\nconst Table: FunctionComponent<TableProps & DefaultProps> = (props) => {\n const {\n columns,\n data,\n totalItems,\n fetchData,\n controlledPagination,\n initialState,\n isLoading,\n loadingMessage,\n labelPerPage,\n footerPlacement,\n onSortedChange,\n hasDefaultPagination,\n onSelectRowsChange,\n parentElementId,\n tableContentId,\n LoadingCellComponent,\n PaginationComponent,\n getRowPreProps,\n getTableProps,\n getHeaderGroupProps,\n getHeaderProps,\n getRowProps,\n getCellProps,\n getFooterProps,\n getFooterGroupProps,\n showLoadingState,\n noDataMessage,\n rowSubComponent,\n isEnableRowSelect,\n selectColumnProps,\n } = props;\n\n const memoColumns = useMemo(() => columns, [columns]);\n\n const {loadingColumns, loadingData} = useLoadingState(\n showLoadingState,\n isLoading,\n controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE,\n memoColumns,\n LoadingCellComponent,\n );\n\n const showLoading = showLoadingState && isLoading;\n const hasSelectedRowsAbility = onSelectRowsChange && isFunction(onSelectRowsChange);\n const hasManualSortBy = onSortedChange && isFunction(onSortedChange);\n const hasControlledPagination = fetchData\n && controlledPagination\n && Object.keys(controlledPagination).length > 0;\n\n const options: TableOptionsProps = {\n columns: showLoading\n ? (loadingColumns as Column<DefaultObject>[])\n : memoColumns,\n data: showLoading ? loadingData : data,\n initialState,\n disableSortRemove,\n disableMultiSort,\n disabledMultiRemove,\n };\n\n if (hasManualSortBy) {\n options.manualSortBy = true;\n }\n\n if (hasControlledPagination) {\n if (typeof controlledPagination?.pageCount === 'undefined') {\n throw new Error(\n 'You have to pass pageCount in controlledPagination data',\n );\n }\n\n options.initialState = {\n ...options.initialState,\n pageIndex: controlledPagination.pageIndex ?? DEFAULT_PAGE_INDEX,\n pageSize: controlledPagination.pageSize ?? DEFAULT_PAGE_SIZE,\n };\n\n options.autoResetPage = true;\n options.manualPagination = true;\n options.pageCount = controlledPagination.pageCount;\n }\n\n const useSelect = (hooks: StandardHooks) => {\n if (!hasSelectedRowsAbility) {\n return;\n }\n\n const newColumn = {\n id: 'selection',\n disableSortBy: true,\n Header: (instance: TableHooksInstanceProps & { toggleAllPageRowsSelected: () => void}) => {\n const {\n getToggleAllPageRowsSelectedProps,\n toggleAllPageRowsSelected,\n page,\n } = instance;\n\n const isDisabledAllRows = page.map(({original}) => original).filter(isEnableRowSelect).length === 0;\n\n return (\n <Checkbox\n elementId=\"all\"\n onChange={toggleAllPageRowsSelected}\n isChecked={getToggleAllPageRowsSelectedProps().checked}\n isDisabled={isDisabledAllRows}\n />\n );\n },\n Cell: ({row}: { row: SelectableRow }) => {\n const {\n id,\n original,\n toggleRowSelected,\n getToggleRowSelectedProps,\n } = row;\n\n const elementId = Number.isInteger(original.id) ? original.id : id;\n const isEnabled = isEnableRowSelect(row.original);\n\n return (\n <Checkbox\n elementId={elementId}\n onChange={toggleRowSelected}\n isDisabled={!isEnabled}\n isChecked={isEnabled && getToggleRowSelectedProps().checked}\n />\n );\n },\n ...selectColumnProps,\n };\n\n hooks.visibleColumns.push((tableColumns: Array<StandardColumn>) => [\n newColumn,\n ...tableColumns,\n ]);\n };\n\n const {\n getTableProps: _getTableProps,\n headerGroups,\n footerGroups,\n setHiddenColumns,\n rows,\n prepareRow,\n visibleColumns,\n ...rest\n } = useTable(\n options,\n useFlexLayout,\n useSortBy,\n useExpanded,\n usePagination,\n useRowSelect,\n useSelect,\n );\n\n const {\n selectedFlatRows,\n setSortBy,\n page,\n canPreviousPage,\n canNextPage,\n pageCount,\n gotoPage,\n nextPage,\n previousPage,\n setPageSize,\n state: {selectedRowIds, pageIndex, pageSize},\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n } = rest as TableHooksInstanceProps;\n\n const tableRef = useRef(null);\n const tableWrapperRef = useRef(null);\n\n useTableShadow(tableRef, tableWrapperRef);\n\n useEffect(() => {\n if (!initialState?.hiddenColumns) {\n return;\n }\n\n setHiddenColumns(initialState.hiddenColumns);\n }, [initialState?.hiddenColumns]);\n\n useEffect(() => {\n if (hasSelectedRowsAbility) {\n onSelectRowsChange?.(\n selectedFlatRows?.map((row: StandardRow) => row.original).filter(isEnableRowSelect),\n );\n }\n }, [selectedRowIds]);\n\n let pagination: JSX.Element | null = null;\n\n if (hasDefaultPagination && hasControlledPagination) {\n throw new Error(\n 'You have to pass either hasDefaultPagination true boolean prop or '\n + 'pass fetchData callback and controlledPagination data',\n );\n }\n\n if (hasControlledPagination || hasDefaultPagination) {\n const paginationData: PaginationProps = {\n setPageSize,\n gotoPage,\n canNextPage,\n canPreviousPage,\n parentElementId,\n labelPerPage,\n pageIndex,\n previousPageHandler: previousPage,\n nextPageHandler: nextPage,\n totalPages: pageCount,\n perPage: pageSize,\n totalItems: totalItems ?? data.length,\n };\n\n if (hasControlledPagination && controlledPagination) {\n paginationData.canNextPage = controlledPagination.pageIndex + 1 !== paginationData.totalPages;\n paginationData.canPreviousPage = controlledPagination.pageIndex !== 0;\n paginationData.pageIndex = controlledPagination.pageIndex;\n paginationData.perPage = controlledPagination.pageSize;\n\n paginationData.setPageSize = (newPageSize: number) => {\n fetchData?.({\n pageIndex: paginationData.pageIndex,\n pageSize: newPageSize,\n });\n };\n\n paginationData.gotoPage = (newPageIndex: number) => {\n fetchData?.({\n pageIndex: newPageIndex,\n pageSize: paginationData.perPage,\n });\n };\n\n paginationData.nextPageHandler = () => {\n const newPageIndex = paginationData.pageIndex + 1;\n paginationData.gotoPage(newPageIndex);\n };\n\n paginationData.previousPageHandler = () => {\n const newPageIndex = paginationData.pageIndex - 1;\n paginationData.gotoPage(newPageIndex);\n };\n\n if (controlledPagination?.paginationAmount) {\n paginationData.paginationAmount = controlledPagination.paginationAmount;\n }\n }\n\n pagination = <PaginationComponent {...paginationData} />;\n }\n\n function extendSortByProps(column: ColumnWithSort) {\n const headerProps = column.getSortByToggleProps && column.getSortByToggleProps();\n\n delete headerProps?.style;\n\n if (hasManualSortBy && column.canSort && headerProps) {\n headerProps.onClick = () => {\n onSortedChange?.(column.id, Boolean(column.isSortedDesc));\n setSortBy([\n {\n id: column.id,\n desc: !column.isSortedDesc,\n },\n ]);\n };\n }\n\n return headerProps;\n }\n\n const tBodyTr = hasControlledPagination || hasDefaultPagination ? page : rows;\n\n return (\n <TableRoot className=\"table-root\">\n <TableLoading\n isLoading={!showLoadingState && isLoading}\n className=\"table-loading\"\n >\n <TableLoadingInner>{loadingMessage}</TableLoadingInner>\n </TableLoading>\n <TableWrapper ref={tableWrapperRef} className=\"table-wrapper\">\n <TableContent id={tableContentId} className=\"table-content\">\n <TableCore\n {..._getTableProps(getTableBodyProps(getTableProps))}\n ref={tableRef}\n >\n <THead className=\"table-head\" data-role=\"table-head\">\n {headerGroups.map((headerGroup) => (\n <TR\n {...headerGroup.getHeaderGroupProps(\n getTableElementProps(getHeaderGroupProps),\n )}\n >\n {headerGroup.headers.map((column) => {\n const headerProps = extendSortByProps(\n column,\n ) as DefaultObject;\n\n return (\n <TH\n {...column.getHeaderProps(\n getTableElementInternalProps(\n headerProps,\n getHeaderProps,\n mainCellGetter,\n ),\n )}\n >\n {getHeadContent(column)}\n </TH>\n );\n })}\n </TR>\n ))}\n </THead>\n {footerPlacement.includes(FOOTER_PLACEMENT.TOP) && (\n <TFoot className=\"table-footer-top\" data-role=\"table-footer-top\">\n {footerGroups.map((group) => (\n <TR\n {...group.getFooterGroupProps(\n getTableElementProps(getFooterGroupProps),\n )}\n >\n {group.headers.map((column) => (\n <TD\n {...column.getFooterProps(\n getTableElementProps(getFooterProps, mainCellGetter),\n )}\n >\n {column.render('Footer')}\n </TD>\n ))}\n </TR>\n ))}\n </TFoot>\n )}\n <TBody className=\"table-body\" data-role=\"table-body\">\n {tBodyTr.map((row: StandardRow) => {\n prepareRow(row);\n const {isDelimiterTd} = getRowPreProps(row);\n\n if (isDelimiterTd) {\n return (\n <React.Fragment key={`group_${row.index}`}>\n <TRGroup>\n <TR {...row.getRowProps(getTableRowProps(getRowProps))}>\n <TD\n colSpan={visibleColumns.length}\n {...row.cells[0].getCellProps(\n getTableCellProps(getCellProps, cellGetter),\n )}\n >\n <strong>{row.cells[0].render('Cell')}</strong>\n </TD>\n </TR>\n </TRGroup>\n {row?.isExpanded && rowSubComponent && rowSubComponent(row)}\n </React.Fragment>\n );\n }\n\n return (\n <React.Fragment key={`group_${row.index}`}>\n <TRGroup>\n <TR {...row.getRowProps(getTableRowProps(getRowProps))}>\n {row.cells.map((cell: StandardCell) => (\n <TD\n {...cell.getCellProps(\n getTableCellProps(getCellProps, cellGetter),\n )}\n >\n {cell.render('Cell')}\n </TD>\n ))}\n </TR>\n </TRGroup>\n {row?.isExpanded && rowSubComponent && rowSubComponent(row)}\n </React.Fragment>\n );\n })}\n </TBody>\n {footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && (\n <TFoot className=\"table-footer-bottom\" data-role=\"table-footer-bottom\">\n {footerGroups.map((group) => (\n <TR\n {...group.getFooterGroupProps(\n getTableElementProps(getFooterGroupProps),\n )}\n >\n {group.headers.map((column) => (\n <TD\n {...column.getFooterProps(\n getTableElementProps(getFooterProps, mainCellGetter),\n )}\n >\n {column.render('Footer')}\n </TD>\n ))}\n </TR>\n ))}\n </TFoot>\n )}\n </TableCore>\n </TableContent>\n </TableWrapper>\n {!isLoading && !data.length && noDataMessage}\n {pagination}\n </TableRoot>\n );\n};\n\nTable.defaultProps = defaultProps;\n\nexport {Table};\n","import React, {FunctionComponent, useMemo} from 'react';\nimport {Column} from 'react-table';\nimport {DefaultObject, LoadingState} from './types';\n\nconst useLoadingState = (\n showLoadingState: boolean,\n loading: boolean,\n pageSize: number,\n columns: Column<DefaultObject>[],\n LoadingCellComponent: FunctionComponent<DefaultObject>,\n): LoadingState => {\n const loadingColumns: Column<DefaultObject>[] | undefined = useMemo(() => (showLoadingState && loading ? columns\n .map((column: Column<DefaultObject>) => {\n const loadingColumn: Column<DefaultObject> = {\n ...column,\n Cell: () => <LoadingCellComponent />,\n };\n\n return loadingColumn;\n }) : []), [columns, loading, showLoadingState]);\n\n const loadingData = useMemo(() => {\n if (showLoadingState && loading && columns && columns.length > 0) {\n const dataObject: DefaultObject = {};\n const dataArray: DefaultObject[] = [];\n\n for (let i = 0; i < columns.length; i += 1) {\n dataObject[`empty_${i}`] = '';\n }\n for (let i = 0; i < pageSize; i += 1) {\n dataArray.push(dataObject);\n }\n\n return dataArray;\n }\n\n return [];\n }, [columns, loading, pageSize, showLoadingState]);\n\n return {\n loadingColumns,\n loadingData,\n };\n};\n\nexport default useLoadingState;\n"],"names":["FOOTER_PLACEMENT","calculateNewClassNames","tableNode","tableWrapperNode","tableRect","getBoundingClientRect","tableWrapperRect","newClassName","tableRectLeft","Math","floor","left","tableRectRight","right","tableWrapperRectLeft","tableWrapperRectRight","push","newClassNameList","classList","remove","add","changeClassName","defaultGetter","props","cellGetter","cell","align","column","_cell$column","mainCellGetter","getTableElementProps","userGetter","getter","meta","getTableCellProps","loadingAnimation","keyframes","TableLoading","styled","div","isLoading","css","TableLoadingInner","TableWrapper","TableRoot","fontNormal","TableContent","TableCore","HeadCell","TD","EmptyStateCell","spacing","gray95","white","TH","THead","black","TRGroup","TR","TBody","gray80","TFoot","defaultProps","hasDefaultPagination","footerPlacement","loadingMessage","labelPerPage","parentElementId","tableContentId","showLoadingState","initialState","LoadingCellComponent","getRowPreProps","isEnableRowSelect","selectColumnProps","noDataMessage","isFunction","reference","Table","columns","data","totalItems","fetchData","controlledPagination","onSortedChange","onSelectRowsChange","PaginationComponent","getTableProps","getHeaderGroupProps","getHeaderProps","getRowProps","getCellProps","getFooterProps","getFooterGroupProps","rowSubComponent","memoColumns","useMemo","loading","pageSize","loadingColumns","map","Cell","React","loadingData","length","dataObject","dataArray","i","useLoadingState","showLoading","hasSelectedRowsAbility","hasManualSortBy","hasControlledPagination","Object","keys","options","disableSortRemove","disableMultiSort","disabledMultiRemove","manualSortBy","pageCount","Error","pageIndex","autoResetPage","manualPagination","useTable","useFlexLayout","useSortBy","useExpanded","usePagination","useRowSelect","hooks","newColumn","id","disableSortBy","Header","instance","getToggleAllPageRowsSelectedProps","toggleAllPageRowsSelected","isDisabledAllRows","page","original","filter","Checkbox","elementId","onChange","isChecked","checked","isDisabled","row","toggleRowSelected","getToggleRowSelectedProps","Number","isInteger","isEnabled","visibleColumns","tableColumns","_getTableProps","headerGroups","footerGroups","setHiddenColumns","rows","prepareRow","rest","selectedFlatRows","setSortBy","canPreviousPage","canNextPage","gotoPage","nextPage","previousPage","setPageSize","state","selectedRowIds","tableRef","useRef","tableWrapperRef","useEffect","ticking","onMousewheel","window","requestAnimationFrame","current","addEventListener","removeEventListener","useTableShadow","hiddenColumns","pagination","paginationData","previousPageHandler","nextPageHandler","totalPages","perPage","newPageSize","newPageIndex","paginationAmount","tBodyTr","className","ref","headerGroup","headers","headerProps","getSortByToggleProps","style","canSort","onClick","Boolean","isSortedDesc","desc","extendSortByProps","internalProps","getTableElementInternalProps","isSorted","render","ArrowDown","size","SIZE","SMALL","color","COLOR","GRAY_DARK","ArrowUp","getHeadContent","includes","TOP","group","Fragment","key","index","getTableRowProps","isDelimiterTd","colSpan","cells","isExpanded","BOTTOM"],"mappings":"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"}
|
package/dist/table.esm.js
CHANGED
|
@@ -446,6 +446,16 @@ var TR = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject16());
|
|
|
446
446
|
var TBody = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject17(), gray80, spacing * 2);
|
|
447
447
|
var TFoot = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject18(), gray95);
|
|
448
448
|
|
|
449
|
+
var isEnableRowSelectDefault = function isEnableRowSelectDefault() {
|
|
450
|
+
return true;
|
|
451
|
+
};
|
|
452
|
+
|
|
453
|
+
var selectColumnPropsDefault = {};
|
|
454
|
+
|
|
455
|
+
var getRowPrePropsDefault = function getRowPrePropsDefault() {
|
|
456
|
+
return {};
|
|
457
|
+
};
|
|
458
|
+
|
|
449
459
|
var defaultProps = {
|
|
450
460
|
hasDefaultPagination: false,
|
|
451
461
|
isLoading: false,
|
|
@@ -457,9 +467,9 @@ var defaultProps = {
|
|
|
457
467
|
showLoadingState: false,
|
|
458
468
|
initialState: {},
|
|
459
469
|
LoadingCellComponent: EmptyStateCell,
|
|
460
|
-
getRowPreProps:
|
|
461
|
-
|
|
462
|
-
|
|
470
|
+
getRowPreProps: getRowPrePropsDefault,
|
|
471
|
+
isEnableRowSelect: isEnableRowSelectDefault,
|
|
472
|
+
selectColumnProps: selectColumnPropsDefault,
|
|
463
473
|
noDataMessage: ''
|
|
464
474
|
};
|
|
465
475
|
var disableSortRemove = true;
|
|
@@ -520,7 +530,9 @@ var Table = function Table(props) {
|
|
|
520
530
|
getFooterGroupProps = props.getFooterGroupProps,
|
|
521
531
|
showLoadingState = props.showLoadingState,
|
|
522
532
|
noDataMessage = props.noDataMessage,
|
|
523
|
-
rowSubComponent = props.rowSubComponent
|
|
533
|
+
rowSubComponent = props.rowSubComponent,
|
|
534
|
+
isEnableRowSelect = props.isEnableRowSelect,
|
|
535
|
+
selectColumnProps = props.selectColumnProps;
|
|
524
536
|
var memoColumns = useMemo(function () {
|
|
525
537
|
return columns;
|
|
526
538
|
}, [columns]);
|
|
@@ -567,32 +579,41 @@ var Table = function Table(props) {
|
|
|
567
579
|
return;
|
|
568
580
|
}
|
|
569
581
|
|
|
570
|
-
var newColumn = {
|
|
582
|
+
var newColumn = _extends({
|
|
571
583
|
id: 'selection',
|
|
572
584
|
disableSortBy: true,
|
|
573
585
|
Header: function Header(instance) {
|
|
574
|
-
var
|
|
575
|
-
|
|
586
|
+
var getToggleAllPageRowsSelectedProps = instance.getToggleAllPageRowsSelectedProps,
|
|
587
|
+
toggleAllPageRowsSelected = instance.toggleAllPageRowsSelected,
|
|
588
|
+
page = instance.page;
|
|
589
|
+
var isDisabledAllRows = page.map(function (_ref) {
|
|
590
|
+
var original = _ref.original;
|
|
591
|
+
return original;
|
|
592
|
+
}).filter(isEnableRowSelect).length === 0;
|
|
576
593
|
return React.createElement(Checkbox, {
|
|
577
594
|
elementId: "all",
|
|
578
|
-
onChange:
|
|
579
|
-
isChecked:
|
|
595
|
+
onChange: toggleAllPageRowsSelected,
|
|
596
|
+
isChecked: getToggleAllPageRowsSelectedProps().checked,
|
|
597
|
+
isDisabled: isDisabledAllRows
|
|
580
598
|
});
|
|
581
599
|
},
|
|
582
|
-
Cell: function Cell(
|
|
583
|
-
var row =
|
|
600
|
+
Cell: function Cell(_ref2) {
|
|
601
|
+
var row = _ref2.row;
|
|
584
602
|
var id = row.id,
|
|
585
603
|
original = row.original,
|
|
586
604
|
toggleRowSelected = row.toggleRowSelected,
|
|
587
605
|
getToggleRowSelectedProps = row.getToggleRowSelectedProps;
|
|
588
606
|
var elementId = Number.isInteger(original.id) ? original.id : id;
|
|
607
|
+
var isEnabled = isEnableRowSelect(row.original);
|
|
589
608
|
return React.createElement(Checkbox, {
|
|
590
609
|
elementId: elementId,
|
|
591
610
|
onChange: toggleRowSelected,
|
|
592
|
-
|
|
611
|
+
isDisabled: !isEnabled,
|
|
612
|
+
isChecked: isEnabled && getToggleRowSelectedProps().checked
|
|
593
613
|
});
|
|
594
614
|
}
|
|
595
|
-
};
|
|
615
|
+
}, selectColumnProps);
|
|
616
|
+
|
|
596
617
|
hooks.visibleColumns.push(function (tableColumns) {
|
|
597
618
|
return [newColumn].concat(tableColumns);
|
|
598
619
|
});
|
|
@@ -636,7 +657,7 @@ var Table = function Table(props) {
|
|
|
636
657
|
if (hasSelectedRowsAbility) {
|
|
637
658
|
onSelectRowsChange === null || onSelectRowsChange === void 0 ? void 0 : onSelectRowsChange(selectedFlatRows === null || selectedFlatRows === void 0 ? void 0 : selectedFlatRows.map(function (row) {
|
|
638
659
|
return row.original;
|
|
639
|
-
}));
|
|
660
|
+
}).filter(isEnableRowSelect));
|
|
640
661
|
}
|
|
641
662
|
}, [selectedRowIds]);
|
|
642
663
|
var pagination = null;
|
|
@@ -731,20 +752,23 @@ var Table = function Table(props) {
|
|
|
731
752
|
}, React.createElement(TableCore, Object.assign({}, _getTableProps(getTableProps(getTableProps$1)), {
|
|
732
753
|
ref: tableRef
|
|
733
754
|
}), React.createElement(THead, {
|
|
734
|
-
className: "table-head"
|
|
755
|
+
className: "table-head",
|
|
756
|
+
"data-role": "table-head"
|
|
735
757
|
}, headerGroups.map(function (headerGroup) {
|
|
736
758
|
return React.createElement(TR, Object.assign({}, headerGroup.getHeaderGroupProps(getTableElementProps(getHeaderGroupProps))), headerGroup.headers.map(function (column) {
|
|
737
759
|
var headerProps = extendSortByProps(column);
|
|
738
760
|
return React.createElement(TH, Object.assign({}, column.getHeaderProps(getTableElementInternalProps(headerProps, getHeaderProps, mainCellGetter))), getHeadContent(column));
|
|
739
761
|
}));
|
|
740
762
|
})), footerPlacement.includes(FOOTER_PLACEMENT.TOP) && React.createElement(TFoot, {
|
|
741
|
-
className: "table-footer-top"
|
|
763
|
+
className: "table-footer-top",
|
|
764
|
+
"data-role": "table-footer-top"
|
|
742
765
|
}, footerGroups.map(function (group) {
|
|
743
766
|
return React.createElement(TR, Object.assign({}, group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))), group.headers.map(function (column) {
|
|
744
767
|
return React.createElement(TD, Object.assign({}, column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))), column.render('Footer'));
|
|
745
768
|
}));
|
|
746
769
|
})), React.createElement(TBody, {
|
|
747
|
-
className: "table-body"
|
|
770
|
+
className: "table-body",
|
|
771
|
+
"data-role": "table-body"
|
|
748
772
|
}, tBodyTr.map(function (row) {
|
|
749
773
|
prepareRow(row);
|
|
750
774
|
|
|
@@ -765,7 +789,8 @@ var Table = function Table(props) {
|
|
|
765
789
|
return React.createElement(TD, Object.assign({}, cell.getCellProps(getTableCellProps(getCellProps, cellGetter))), cell.render('Cell'));
|
|
766
790
|
}))), (row === null || row === void 0 ? void 0 : row.isExpanded) && rowSubComponent && rowSubComponent(row));
|
|
767
791
|
})), footerPlacement.includes(FOOTER_PLACEMENT.BOTTOM) && React.createElement(TFoot, {
|
|
768
|
-
className: "table-footer-bottom"
|
|
792
|
+
className: "table-footer-bottom",
|
|
793
|
+
"data-role": "table-footer-bottom"
|
|
769
794
|
}, footerGroups.map(function (group) {
|
|
770
795
|
return React.createElement(TR, Object.assign({}, group.getFooterGroupProps(getTableElementProps(getFooterGroupProps))), group.headers.map(function (column) {
|
|
771
796
|
return React.createElement(TD, Object.assign({}, column.getFooterProps(getTableElementProps(getFooterProps, mainCellGetter))), column.render('Footer'));
|