Merge branch 'main' of github.com:equinor/fusion-react-components int…

…o main

packages/button/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.4.0 (2021-10-05)
+
+
+### Features
+
+* add new element creator ([efd2a2a](https://github.com/equinor/fusion-react-components/commit/efd2a2a3bfcf53c8cc640cafb8351bc137ecc677))
+
+
+
+
+
 ## 0.3.8 (2021-09-30)
 
 **Note:** Version bump only for package @equinor/fusion-react-button

packages/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-react-button",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "React component for displaying a button",
   "keywords": [
     "button",
@@ -34,7 +34,7 @@
     "url": "https://github.com/equinor/fusion-react-components/issues"
   },
   "dependencies": {
-    "@equinor/fusion-wc-button": "^1.1.18",
-    "@equinor/fusion-react-utils": "^1.1.18"
+    "@equinor/fusion-react-utils": "^1.1.18",
+    "@equinor/fusion-wc-button": "^1.1.18"
   }
 }

packages/filterpane/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.8](https://github.com/equinor/fusion-react-components/compare/@equinor/[email protected]...@equinor/[email protected]) (2021-10-05)
+
+**Note:** Version bump only for package @equinor/fusion-react-filter
+
+
+
+
+
 ## 1.1.7 (2021-10-05)
 
 

packages/filterpane/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-react-filter",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "component for Filtering data",
   "author": "",
   "homepage": "https://github.com/equinor/fusion-react-components/tree/master/packages/filterpane#readme",
@@ -38,7 +38,7 @@
     "url": "https://github.com/equinor/fusion-react-components/issues"
   },
   "dependencies": {
-    "@equinor/fusion-react-button": "^0.3.8",
+    "@equinor/fusion-react-button": "^0.4.0",
     "@equinor/fusion-react-checkbox": "^0.3.6",
     "@equinor/fusion-react-radio": "^0.3.6",
     "@equinor/fusion-react-styles": "^0.3.5",

packages/hanging-garden/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.6.8](https://github.com/equinor/fusion-react-components/compare/@equinor/[email protected]...@equinor/[email protected]) (2021-10-11)
+
+**Note:** Version bump only for package @equinor/fusion-react-hanging-garden
+
+
+
+
+
 ## [1.6.7](https://github.com/equinor/fusion-react-components/compare/@equinor/[email protected]...@equinor/[email protected]) (2021-09-30)
 
 **Note:** Version bump only for package @equinor/fusion-react-hanging-garden

packages/hanging-garden/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-react-hanging-garden",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "description": "component handling rendering of hanging gardens",
   "author": "",
   "homepage": "https://github.com/equinor/fusion-react-components/tree/master/packages/HangingGarden#readme",

packages/hanging-garden/src/utils.ts

@@ -21,7 +21,7 @@ export const DEFAULT_ITEM_TEXT_STYLE = new PIXI.TextStyle({
 export const createTextStyle = (style: PIXI.TextStyle): PIXI.TextStyle => new PIXI.TextStyle(style);
 
 export const getMaxRowCount = <T extends HangingGardenColumnIndex>(columns: HangingGardenColumn<T>[]): number => {
-  return Math.max(...columns.map((column) => column.data.length));
+  return Math.max(...columns.map((column) => flattenColumn(column).length));
 };
 
 export const getExpandedWith = (width: number, c: ExpandedColumn): number =>
@@ -146,7 +146,7 @@ const flattenGroup = <T extends HangingGardenColumnIndex>(
 /**
  *
  * @param column columns that might need to be flattened
- * @returns columns, flattened into one array per column, without grouping, in correct order for rendering. May containar both Items and ColumnGrouPheaders
+ * @returns columns, flattened into one array per column, without grouping, in correct order for rendering. May contain both Items and ColumnGroupHeaders
  *
  * checks if the columns data is grouped, is not returns the columns.
  * else reduces the Columns into a flat array of items and group by headers.

packages/table/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.4.0 (2021-10-12)
+
+
+### Bug Fixes
+
+* remove some comments ([51e4f93](https://github.com/equinor/fusion-react-components/commit/51e4f938ab36233fa4f5cd7a0291e66143db6600))
+
+
+### Features
+
+* make pagination disabled by default and add option for pagesizes ([9888099](https://github.com/equinor/fusion-react-components/commit/98880994753c89ff5ebbdbb64a78e8cda74f3094))
+* pagination for table ([f578745](https://github.com/equinor/fusion-react-components/commit/f578745abd916a36cdfb9bf618312f1563f18d66))
+
+
+
+
+
 ## [0.3.19](https://github.com/equinor/fusion-react-components/compare/@equinor/[email protected]...@equinor/[email protected]) (2021-09-30)
 
 **Note:** Version bump only for package @equinor/fusion-react-table

packages/table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/fusion-react-table",
-  "version": "0.3.19",
+  "version": "0.4.0",
   "description": "component for displaying tables",
   "keywords": [
     "table",
@@ -35,6 +35,7 @@
     "url": "https://github.com/equinor/fusion-react-components/issues"
   },
   "dependencies": {
+    "@equinor/fusion-react-button": "^0.3.7",
     "@equinor/fusion-react-styles": "^0.3.5",
     "@equinor/fusion-wc-icon": "^1.0.12",
     "@equinor/fusion-wc-popover": "^1.0.13",

packages/table/src/Table.tsx

@@ -1,9 +1,9 @@
 import { TableOptions, PluginHook } from 'react-table';
 import { Layout, LayoutProps, TableLayout } from './layout';
-
 import { TableData } from './types';
 import { TableProvider } from './TableProvider';
 import { PropsWithChildren } from 'react';
+import Paginator from './components/pagination/Paginator';
 
 export type TableProps<TData extends TableData> = LayoutProps & {
   options: TableOptions<TData>;
@@ -20,6 +20,7 @@ export const Table = <TData extends TableData>(props: PropsWithChildren<TablePro
   return (
     <TableProvider options={options} plugins={plugins}>
       <Template {...layoutProps} />
+      <Paginator />
       {children}
     </TableProvider>
   );

packages/table/src/TableProvider.tsx

@@ -8,6 +8,7 @@ import {
   useSortBy,
   useTable,
   TableState,
+  usePagination,
 } from 'react-table';
 import { useDefaultColumn } from './components';
 import { useColumnMenu } from './plugins/menu';
@@ -34,7 +35,10 @@ export const TableProvider = <TData extends TableData = TableData>(
   const { children, options } = props;
 
   const _plugins = props.plugins || [];
-  const plugins = useMemo(() => [useResizeColumns, useColumnMenu, useFilters, useSortBy, ..._plugins], [..._plugins]);
+  const plugins = useMemo(
+    () => [useResizeColumns, useColumnMenu, useFilters, useSortBy, usePagination, ..._plugins],
+    [..._plugins]
+  );
 
   const defaultColumn = useDefaultColumn(options);
 

packages/table/src/components/pagination/Buttons/PaginationBtnFirst.tsx

@@ -0,0 +1,19 @@
+import Button from '@equinor/fusion-react-button';
+import { useTableContext } from '../../../TableProvider';
+
+export const PaginationBtnFirst = (): JSX.Element => {
+  const { instance } = useTableContext();
+  const { gotoPage, canPreviousPage } = instance;
+
+  return (
+    <Button
+      onClick={() => gotoPage(0)}
+      icon="first_page"
+      variant="ghost"
+      disabled={!canPreviousPage}
+      color={canPreviousPage ? 'primary' : 'secondary'}
+      dense
+    />
+  );
+};
+export default PaginationBtnFirst;

packages/table/src/components/pagination/Buttons/PaginationBtnLast.tsx

@@ -0,0 +1,19 @@
+import Button from '@equinor/fusion-react-button';
+import { useTableContext } from '../../../TableProvider';
+
+export const PaginationBtnLast = (): JSX.Element => {
+  const { instance } = useTableContext();
+  const { gotoPage, pageCount, canNextPage } = instance;
+
+  return (
+    <Button
+      onClick={() => gotoPage(pageCount - 1)}
+      icon="last_page"
+      variant="ghost"
+      disabled={!canNextPage}
+      color={canNextPage ? 'primary' : 'secondary'}
+      dense
+    />
+  );
+};
+export default PaginationBtnLast;

packages/table/src/components/pagination/Buttons/PaginationBtnNext.tsx

@@ -0,0 +1,20 @@
+import Button from '@equinor/fusion-react-button';
+import { useTableContext } from '../../../TableProvider';
+
+export const PaginationBtnNext = (): JSX.Element => {
+  const { instance } = useTableContext();
+  const { nextPage, canNextPage } = instance;
+
+  return (
+    <Button
+      onClick={() => nextPage()}
+      icon="chevron_right"
+      variant="ghost"
+      disabled={!canNextPage}
+      color={canNextPage ? 'primary' : 'secondary'}
+      dense
+    />
+  );
+};
+
+export default PaginationBtnNext;

packages/table/src/components/pagination/Buttons/PaginationBtnPrev.tsx

@@ -0,0 +1,18 @@
+import Button from '@equinor/fusion-react-button';
+import { useTableContext } from '../../../TableProvider';
+
+export const PaginationBtnPrev = (): JSX.Element => {
+  const { instance } = useTableContext();
+  const { previousPage, canPreviousPage } = instance;
+
+  return (
+    <Button
+      onClick={() => previousPage()}
+      icon="chevron_left"
+      variant="ghost"
+      disabled={!canPreviousPage}
+      color={canPreviousPage ? 'primary' : 'secondary'}
+      dense
+    />
+  );
+};

packages/table/src/components/pagination/Buttons/index.tsx

@@ -0,0 +1,4 @@
+export { PaginationBtnFirst } from './PaginationBtnFirst';
+export { PaginationBtnNext } from './PaginationBtnNext';
+export { PaginationBtnPrev } from './PaginationBtnPrev';
+export { PaginationBtnLast } from './PaginationBtnLast';

packages/table/src/components/pagination/Paginator.style.ts

@@ -0,0 +1,27 @@
+import { makeStyles, FusionTheme, createStyles, theme } from '@equinor/fusion-react-styles';
+
+export type SpacingType = keyof typeof theme.spacing.comfortable;
+
+export type StyleProps = {
+  spacing: SpacingType;
+};
+
+export const useStyles = makeStyles<FusionTheme, StyleProps>(
+  () =>
+    createStyles({
+      pagination: {
+        display: 'flex',
+        justifyContent: 'end',
+        alignItems: 'center',
+      },
+      select: {
+        fontFamily: 'inherit',
+        margin: '0 1em 0 1em',
+        padding: '0 .5em 0 0',
+        fontSize: '14px',
+      },
+    }),
+  { name: 'fusion-table-pagination-layout' }
+);
+
+export default useStyles;

packages/table/src/components/pagination/Paginator.tsx

@@ -0,0 +1,69 @@
+import { useTableContext } from '../../TableProvider';
+import { PaginationBtnFirst, PaginationBtnPrev, PaginationBtnNext, PaginationBtnLast } from './Buttons';
+import { StyleProps, useStyles } from './Paginator.style';
+
+const defaultStyleProps: StyleProps = {
+  spacing: 'small',
+};
+type PaginatorProps = JSX.IntrinsicElements['div'];
+/**
+ * Component for showing and controlling the pagination of the table component.
+ * Returns null if `disablePagination` is set to `true`.
+ * Set the boolean in the `options` prop to the `Table` component to enable pagination.
+ * The `pageSize` is by default 10 (showing 10 records on each page), but can be changed.
+ * Same goes for `pageSizes`
+ * @param JSX.InstrinsicElements - HTML Attributes, e.g. styling.
+ * @example
+ * ```jsx
+ * const options = {
+ * data: data,
+ * columns: columns,
+ * disablePagination: false,
+ * pageSizes: [20,30,40],
+ * initialState: {
+ * pageSize: 20
+ *  },
+ * }
+ * return <Table options={options}/>
+ * ```
+ */
+export const Paginator = (props: PaginatorProps): JSX.Element | null => {
+  const { instance, state } = useTableContext();
+  const { pageOptions, setPageSize, disablePagination = true, pageSizes = [10, 20, 30, 40, 50] } = instance;
+  const { pageIndex, pageSize } = state;
+  const styles = useStyles({ ...defaultStyleProps });
+
+  if (disablePagination) {
+    return null;
+  }
+  return (
+    <div {...props} className={styles.pagination}>
+      <div>Items per page: </div>
+      {/*TODO: use fusion dropdown component */}
+      <select
+        className={styles.select}
+        value={pageSize}
+        onChange={(e) => {
+          setPageSize(Number(e.target.value));
+        }}
+      >
+        {pageSizes.map((pageSize) => (
+          <option key={pageSize} value={pageSize}>
+            {pageSize}
+          </option>
+        ))}
+      </select>
+
+      <div>
+        {/*TODO: pageIndex should might not be undefined? See types.ts */}
+        {pageIndex !== undefined && `Page ${pageIndex + 1} of ${pageOptions.length}`}
+      </div>
+      <PaginationBtnFirst />
+      <PaginationBtnPrev />
+      <PaginationBtnNext />
+      <PaginationBtnLast />
+    </div>
+  );
+};
+
+export default Paginator;

packages/table/src/index.tsx

@@ -1,6 +1,5 @@
 export * from './useTable';
 export * from './components';
 export * from './types';
-
 export * from './Table';
 export * from './TableProvider';

packages/table/src/layout/TableLayout.tsx

@@ -1,7 +1,5 @@
 import { clsx } from '@equinor/fusion-react-styles';
-
 import useStyles, { StyleProps } from './layout.style';
-
 import { Layout, LayoutProps } from './types';
 import { useTableContext } from '../TableProvider';
 // import { useFlexLayout } from 'react-table';
@@ -13,7 +11,8 @@ const defaultStyleProps: StyleProps = {
 export const TableLayoutTemplate = (props: LayoutProps): JSX.Element => {
   const { spacing = 'small', style, className } = props;
   const { instance } = useTableContext();
-  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = instance;
+  const { getTableProps, getTableBodyProps, headerGroups, prepareRow } = instance;
+  const rows = instance.disablePagination ? instance.rows : instance.page;
   const styles = useStyles({ ...defaultStyleProps, spacing });
   return (
     <table {...getTableProps({ className: clsx(styles.root, className) })} style={style}>