@workday/canvas-kit-docs 8.3.2 → 8.3.3

package/dist/mdx/react/pagination/examples/ResponsiveRange.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import {
+  Pagination,
+  getLastPage,
+  getVisibleResultsMax,
+  getVisibleResultsMin,
+  usePaginationModel,
+} from '@workday/canvas-kit-react/pagination';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {useResizeObserver, useTheme} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const resultCount = 10;
+  const totalCount = 100;
+  const lastPage = getLastPage(resultCount, totalCount);
+  // Normally, rangeSize can be a static value, but we're making it stateful,
+  // so we can update it using useResizeObserver
+  const [rangeSize, setRangeSize] = React.useState(5);
+  const model = usePaginationModel({
+    lastPage,
+    rangeSize,
+  });
+  // We're only using this state to display the container width;
+  const [containerWidth, setContainerWidth] = React.useState(0);
+  // We're using breakpoints from the theme as reference points to adjust the range
+  const theme = useTheme();
+  const {values: breakpointValues} = theme.canvas.breakpoints;
+
+  // We'll use this ref to measure the size of the container
+  const containerRef = React.useRef(null);
+  useResizeObserver({
+    ref: containerRef,
+    onResize: ({width}) => {
+      // Note: onResizeObserver only accounts for the size of the container.
+      // It does not factor in margin, padding, or border widths.
+      // If you want to be exact, adjust your math to account for those.
+      // If you're okay with being close enough on the measurements, this is fine.
+      if (width) {
+        // updating the container width for the display text
+        setContainerWidth(width);
+        // helper functions for better readability
+        const isBetweenZeroAndSmall = width >= breakpointValues.zero && width < breakpointValues.s;
+        const isBetweenSmallAndMedium = width >= breakpointValues.s && width < breakpointValues.m;
+        const isBetweenMediumAndLarge = width >= breakpointValues.m && width < breakpointValues.l;
+        const isBetweenLargeAndXLarge = width >= breakpointValues.l && width < breakpointValues.xl;
+        // We're checking the rangeSize at each level to prevent extra re-renders.
+        if (rangeSize !== 1 && isBetweenZeroAndSmall) {
+          setRangeSize(1);
+        }
+        if (rangeSize !== 3 && isBetweenSmallAndMedium) {
+          setRangeSize(3);
+        }
+        if (rangeSize !== 5 && isBetweenMediumAndLarge) {
+          setRangeSize(5);
+        }
+        if (rangeSize !== 7 && isBetweenLargeAndXLarge) {
+          setRangeSize(7);
+        }
+      }
+    },
+  });
+
+  return (
+    <Flex
+      border="solid 1px"
+      ref={containerRef}
+      justifyContent="space-between"
+      padding="s"
+      alignItems="center"
+    >
+      <Text typeLevel="body.small" fontWeight="bold">
+        Width: {containerWidth}px
+      </Text>
+      <Pagination model={model} aria-label="Pagination">
+        <Pagination.Controls>
+          <Pagination.StepToPreviousButton aria-label="Previous" />
+          <Pagination.PageList>
+            {({state}) =>
+              state.range.map(pageNumber => (
+                <Pagination.PageListItem key={pageNumber}>
+                  <Pagination.PageButton
+                    aria-label={`Page ${pageNumber}`}
+                    pageNumber={pageNumber}
+                  />
+                </Pagination.PageListItem>
+              ))
+            }
+          </Pagination.PageList>
+          <Pagination.StepToNextButton aria-label="Next" />
+        </Pagination.Controls>
+        <Pagination.AdditionalDetails shouldHideDetails>
+          {({state}) =>
+            `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
+              state.currentPage,
+              resultCount,
+              totalCount
+            )} of ${totalCount} results`
+          }
+        </Pagination.AdditionalDetails>
+      </Pagination>
+    </Flex>
+  );
+};

package/dist/mdx/react/pagination/pagination.mdx

@@ -5,6 +5,7 @@ import CustomRange from './examples/CustomRange';
 import JumpControls from './examples/JumpControls';
 import GoToForm from './examples/GoToForm';
 import HoistedModel from './examples/HoistedModel';
+import ResponsiveRange from './examples/ResponsiveRange';
 import RTL from './examples/RTL';
 import {
   PaginationHoistedComponent,
@@ -90,6 +91,13 @@ This example uses a custom range that allows you to control the width of the com
 
 <ExampleCodeBlock code={CustomRange} />
 
+### Responsive Range
+
+In some situations, you might want to adjust Pagination's range based on the width of the container.
+You can use `useResizeObserver` to accomplish this as in the example below.
+
+<ExampleCodeBlock code={ResponsiveRange} />
+
 ## Components
 
 ### Pagination

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^8.3.2"
+    "@workday/canvas-kit-react": "^8.3.3"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "6166515cdc130418f404429b74d44c4901c17b8b"
+  "gitHead": "101789b6f6426db15967f96ceeec1254754a36b6"
 }