@charcoal-ui/react 5.4.4 → 5.5.0-beta.0

package/dist/components/Pagination/helper.d.ts

@@ -0,0 +1,2 @@
+export declare function usePagerWindow(page: number, pageCount: number, pageRangeDisplayed?: number): (number | "...")[];
+//# sourceMappingURL=helper.d.ts.map

package/dist/components/Pagination/helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/helper.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,EACjB,kBAAkB,SAAI,sBA+DvB"}

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,16 @@
+import './index.css';
+interface CommonProps {
+    page: number;
+    pageCount: number;
+    pageRangeDisplayed?: number;
+}
+export interface PaginationProps extends CommonProps {
+    onChange(newPage: number): void;
+}
+declare const _default: import("react").NamedExoticComponent<PaginationProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "onChange">>;
+export default _default;
+export interface LinkPaginationProps extends CommonProps {
+    makeUrl(page: number): string;
+}
+export declare function LinkPagination({ page, pageCount, pageRangeDisplayed, makeUrl, className, ...props }: LinkPaginationProps & React.ComponentPropsWithoutRef<'nav'>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AASpB,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;;AAED,wBA0EE;AAEF,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;CAC9B;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,2CAmD7D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.4.4",
+  "version": "5.5.0-beta.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -54,10 +54,10 @@
     "react-spring": "^9.0.0",
     "react-stately": "^3.26.0",
     "warning": "^4.0.3",
-    "@charcoal-ui/foundation": "5.4.4",
-    "@charcoal-ui/icons": "5.4.4",
-    "@charcoal-ui/theme": "5.4.4",
-    "@charcoal-ui/utils": "5.4.4"
+    "@charcoal-ui/foundation": "5.5.0-beta.0",
+    "@charcoal-ui/icons": "5.5.0-beta.0",
+    "@charcoal-ui/utils": "5.5.0-beta.0",
+    "@charcoal-ui/theme": "5.5.0-beta.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0"

package/src/components/Pagination/Pagination.story.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
+import Pagination, { LinkPagination } from '.'
+
+function PaginationWithState(args: React.ComponentProps<typeof Pagination>) {
+  const [page, setPage] = useState(args.page)
+  return <Pagination {...args} page={page} onChange={setPage} />
+}
+
+export default {
+  title: 'react/Pagination',
+  component: Pagination,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Pagination>
+
+export const Default: StoryObj<typeof Pagination> = {
+  args: {
+    page: 5,
+    pageCount: 10,
+  },
+  render: (args) => <PaginationWithState {...args} />,
+}
+
+export const FirstPage: StoryObj<typeof Pagination> = {
+  args: {
+    page: 1,
+    pageCount: 10,
+  },
+  render: (args) => <PaginationWithState {...args} />,
+}
+
+export const LastPage: StoryObj<typeof Pagination> = {
+  args: {
+    page: 10,
+    pageCount: 10,
+  },
+  render: (args) => <PaginationWithState {...args} />,
+}
+
+export const ManyPages: StoryObj<typeof Pagination> = {
+  args: {
+    page: 50,
+    pageCount: 103,
+  },
+  render: (args) => <PaginationWithState {...args} />,
+}
+
+export const LinkPaginationStory: StoryObj<typeof LinkPagination> = {
+  args: {
+    page: 5,
+    pageCount: 10,
+    makeUrl: (p) => `#page-${p}`,
+  },
+  render: (args) => <LinkPagination {...args} />,
+}

package/src/components/Pagination/helper.ts

@@ -0,0 +1,70 @@
+import { useDebugValue, useMemo } from 'react'
+import warning from 'warning'
+
+export function usePagerWindow(
+  page: number,
+  pageCount: number,
+  pageRangeDisplayed = 7,
+) {
+  // ページャーのリンク生成例:
+  //
+  //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >
+  //
+  //     < [ 1 ] [ 2 ] [ 3 ] [*4*] [ 5 ] [ 6 ] [ 7 ] >
+  //
+  //     < [ 1 ]  ...  [ 4 ] [*5*] [ 6 ] [ 7 ] [ 8 ] >
+  //
+  //     < [ 1 ]  ...  [ 99 ] [*100*] [ 101 ] [ 102 ] [ 103 ] >
+  //
+  //     < [ 1 ]  ...  [ 99 ] [ 100 ] [ 101 ] [ 102 ] [*103*]
+  //
+  //       [*1*] [ 2 ] >
+  //
+  // デザインの意図: 前後移動時のカーソル移動を最小限にする。
+
+  if (process.env.NODE_ENV !== 'production') {
+    warning((page | 0) === page, `\`page\` must be integer (${page})`)
+    warning(
+      (pageCount | 0) === pageCount,
+      `\`pageCount\` must be integer (${pageCount})`,
+    )
+    warning(
+      (pageRangeDisplayed | 0) === pageRangeDisplayed,
+      `\`pageRangeDisplayed\` must be integer (${pageRangeDisplayed})`,
+    )
+    warning(pageRangeDisplayed > 2, `\`windowSize\` must be greater than 2`)
+  }
+
+  const window = useMemo(() => {
+    const visibleFirstPage = 1
+    const visibleLastPage = Math.min(
+      pageCount,
+      Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed),
+    )
+
+    if (visibleLastPage <= pageRangeDisplayed) {
+      // 表示範囲が1-7ページなら省略は無い。
+      return Array.from(
+        { length: 1 + visibleLastPage - visibleFirstPage },
+        (_, i) => visibleFirstPage + i,
+      )
+    } else {
+      const start = visibleLastPage - (pageRangeDisplayed - 1) + 2
+      return [
+        // 表示範囲が1-7ページを超えるなら、
+        // - 1ページ目は固定で表示する
+        visibleFirstPage,
+        // - 2ページ目から現在のページの直前までは省略する
+        '...' as const,
+        ...Array.from(
+          { length: 1 + visibleLastPage - start },
+          (_, i) => start + i,
+        ),
+      ]
+    }
+  }, [page, pageCount, pageRangeDisplayed])
+
+  useDebugValue(window)
+
+  return window
+}

package/src/components/Pagination/index.css

@@ -0,0 +1,67 @@
+.charcoal-pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.charcoal-pagination-button {
+  font-size: 1rem;
+  line-height: calc(1em + 8px);
+  text-decoration: none;
+  border: none;
+  outline: none;
+  touch-action: manipulation;
+  user-select: none;
+  transition:
+    box-shadow 0.2s ease 0s,
+    color 0.2s ease 0s,
+    background 0.2s ease 0s,
+    opacity 0.2s ease 0s;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: content-box;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  /* HACK: Safari repaint fix */
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-transform: translateZ(0);
+
+  background: transparent;
+  color: var(--charcoal-text3);
+  border-radius: 48px;
+}
+
+.charcoal-pagination-button[hidden] {
+  visibility: hidden;
+  display: block;
+}
+
+.charcoal-pagination-button:hover {
+  background: var(--charcoal-surface3);
+  color: var(--charcoal-text2);
+}
+
+.charcoal-pagination-button[aria-current] {
+  background-color: var(--charcoal-surface6);
+  color: var(--charcoal-text5);
+}
+
+.charcoal-pagination-button[aria-current]:hover {
+  background-color: var(--charcoal-surface6);
+  color: var(--charcoal-text5);
+}
+
+.charcoal-pagination-spacer {
+  cursor: default;
+  color: var(--charcoal-text3);
+  background: none;
+}
+
+.charcoal-pagination-spacer.charcoal-icon-button:disabled {
+  opacity: 1;
+}

package/src/components/Pagination/index.tsx

@@ -0,0 +1,158 @@
+import './index.css'
+
+import { memo, useCallback } from 'react'
+import { usePagerWindow } from './helper'
+import { useClassNames } from '../../_lib/useClassNames'
+import IconButton from '../IconButton'
+
+const Text = 'span'
+
+interface CommonProps {
+  page: number
+  pageCount: number
+  pageRangeDisplayed?: number
+}
+
+export interface PaginationProps extends CommonProps {
+  onChange(newPage: number): void
+}
+
+export default memo(function Pagination({
+  page,
+  pageCount,
+  pageRangeDisplayed,
+  onChange,
+  className,
+  ...props
+}: PaginationProps & Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>) {
+  const window = usePagerWindow(page, pageCount, pageRangeDisplayed)
+  const makeClickHandler = useCallback(
+    (value: number) => () => {
+      onChange(value)
+    },
+    [onChange],
+  )
+
+  const hasNext = page < pageCount
+  const hasPrev = page > 1
+  const classNames = useClassNames('charcoal-pagination', className)
+
+  return (
+    <nav {...props} className={classNames}>
+      <IconButton
+        icon="24/Prev"
+        size="M"
+        className="charcoal-pagination-button"
+        data-no-background
+        hidden={!hasPrev}
+        disabled={!hasPrev}
+        onClick={makeClickHandler(Math.max(1, page - 1))}
+      />
+      {window.map((p) =>
+        p === '...' ? (
+          <IconButton
+            key={p}
+            icon="24/Dot"
+            size="M"
+            disabled
+            className="charcoal-pagination-button charcoal-pagination-spacer"
+            aria-hidden
+          />
+        ) : p === page ? (
+          // we remove the onClick but don't mark it as disabled to preserve keyboard focus
+          // not doing so causes the focus ring to flicker in and out of existence
+          <button
+            key={p}
+            type="button"
+            className="charcoal-pagination-button"
+            aria-current
+          >
+            <Text>{p}</Text>
+          </button>
+        ) : (
+          <button
+            key={p}
+            type="button"
+            className="charcoal-pagination-button"
+            onClick={makeClickHandler(p)}
+          >
+            <Text>{p}</Text>
+          </button>
+        ),
+      )}
+      <IconButton
+        icon="24/Next"
+        size="M"
+        className="charcoal-pagination-button"
+        data-no-background
+        hidden={!hasNext}
+        disabled={!hasNext}
+        onClick={makeClickHandler(Math.min(pageCount, page + 1))}
+      />
+    </nav>
+  )
+})
+
+export interface LinkPaginationProps extends CommonProps {
+  makeUrl(page: number): string
+}
+
+export function LinkPagination({
+  page,
+  pageCount,
+  pageRangeDisplayed,
+  makeUrl,
+  className,
+  ...props
+}: LinkPaginationProps & React.ComponentPropsWithoutRef<'nav'>) {
+  const window = usePagerWindow(page, pageCount, pageRangeDisplayed)
+
+  const hasNext = page < pageCount
+  const hasPrev = page > 1
+  const classNames = useClassNames('charcoal-pagination', className)
+
+  return (
+    <nav {...props} className={classNames}>
+      <IconButton
+        icon="24/Prev"
+        size="M"
+        component="a"
+        href={makeUrl(Math.max(1, page - 1))}
+        className="charcoal-pagination-button"
+        data-no-background
+        hidden={!hasPrev}
+        aria-disabled={!hasPrev}
+      />
+      {window.map((p) =>
+        p === '...' ? (
+          <IconButton
+            key={p}
+            icon="24/Dot"
+            size="M"
+            disabled
+            className="charcoal-pagination-button charcoal-pagination-spacer"
+            aria-hidden
+          />
+        ) : p === page ? (
+          <span key={p} className="charcoal-pagination-button" aria-current>
+            <Text>{p}</Text>
+          </span>
+        ) : (
+          <a key={p} href={makeUrl(p)} className="charcoal-pagination-button">
+            <Text>{p}</Text>
+          </a>
+        ),
+      )}
+      <IconButton
+        icon="24/Next"
+        size="M"
+        component="a"
+        href={makeUrl(Math.min(pageCount, page + 1))}
+        className="charcoal-pagination-button"
+        data-no-background
+        hidden={!hasNext}
+        aria-disabled={!hasNext}
+      />
+    </nav>
+  )
+}