@charcoal-ui/react-sandbox 3.2.0 → 3.3.0

package/src/components/Carousel/index.tsx

@@ -121,12 +121,12 @@ export default function Carousel({
   // スクロール可能な場合にボタンを表示する
   // scrollLeftが変化したときに処理する (アニメーション開始時 & 手動スクロール時)
   useEffect(() => {
-    const newleftShow = scrollLeft > 0
-    const newrightShow = scrollLeft < maxScrollLeft && maxScrollLeft > 0
-    if (newleftShow !== leftShow || newrightShow !== rightShow) {
-      setLeftShow(newleftShow)
-      setRightShow(newrightShow)
-      onScrollStateChange?.(newleftShow || newrightShow)
+    const newLeftShow = scrollLeft > 0
+    const newRightShow = scrollLeft < maxScrollLeft && maxScrollLeft > 0
+    if (newLeftShow !== leftShow || newRightShow !== rightShow) {
+      setLeftShow(newLeftShow)
+      setRightShow(newRightShow)
+      onScrollStateChange?.(newLeftShow || newRightShow)
     }
   }, [leftShow, maxScrollLeft, onScrollStateChange, rightShow, scrollLeft])
 
@@ -141,7 +141,7 @@ export default function Carousel({
     }
     // スクロール位置を保存 (アニメーションの基準になる)
     const manualScrollLeft = ref.current.scrollLeft
-    // 過剰にsetStateが走らないようにDebouceする
+    // 過剰にsetStateが走らないようにdebounceする
     setScrollLeft(manualScrollLeft)
   }, [animation, setScrollLeft, styles])
 

package/src/components/Filter/index.story.tsx

@@ -21,7 +21,7 @@ const makeUrl = (page: number) => `/${page}`
 export function Default() {
   return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error TOOD: adapt to react-router@6  (props should be covariant not bivariant)
+    // @ts-expect-error TODO: adapt to react-router@6  (props should be covariant not bivariant)
     <ComponentAbstraction components={{ Link: RouterLink }}>
       <Router
         initialEntries={Array.from({ length: 5 }).map((_, i) => makeUrl(i + 1))}

package/src/components/Layout/index.tsx

@@ -5,7 +5,7 @@ import {
   MAIN_COLUMN_HORIZONTAL_MIN_MARGIN,
   RESPONSIVE_LEFT_WIDTH,
   RESPONSIVE_MAIN_MAX_WIDTH,
-} from '../../foundation/contants'
+} from '../../foundation/constants'
 import { useMediaScreen1 } from '../../foundation/hooks'
 import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from '@charcoal-ui/foundation'
 import { maxWidth } from '@charcoal-ui/utils'

package/src/components/MenuListItem/index.story.tsx

@@ -19,7 +19,7 @@ export default {
 export const Default = () => {
   const primary = text('primary', 'Knob to change')
   const secondary = text('secondary', '')
-  const disabled = boolean('diasbled', false)
+  const disabled = boolean('disabled', false)
   const padding = select('padding', { '16': 16, '24': 24 }, 24)
   const noHover = boolean('noHover', false)
   return (

package/src/components/Pager/index.story.tsx

@@ -26,28 +26,51 @@ export default {
         min: 1,
       },
     },
+    pageRangeDisplayed: {
+      control: {
+        type: 'number',
+        min: 3,
+      },
+    },
   },
 }
 
 interface Props {
   page: number
   pageCount: number
+  pageRangeDisplayed?: number
 }
 
-const DefaultStory: Story<Props> = ({ page: defaultPage, pageCount }) => {
+const DefaultStory: Story<Props> = ({
+  page: defaultPage,
+  pageCount,
+  pageRangeDisplayed,
+}) => {
   const [page, setPage] = useState(defaultPage)
-  return <Pager page={page} onChange={setPage} pageCount={pageCount} />
+  return (
+    <Pager
+      page={page}
+      onChange={setPage}
+      pageCount={pageCount}
+      pageRangeDisplayed={pageRangeDisplayed}
+    />
+  )
 }
 
 export const Default = DefaultStory.bind({})
 Default.args = {
   page: 1,
   pageCount: 10,
+  pageRangeDisplayed: undefined,
 }
 
 const makeUrl = (page: number) => `/${page}`
 
-const LinkStory: Story<Props> = ({ page: defaultPage, pageCount }) => (
+const LinkStory: Story<Props> = ({
+  page: defaultPage,
+  pageCount,
+  pageRangeDisplayed,
+}) => (
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   <ComponentAbstraction components={{ Link: RouterLink }}>
@@ -60,18 +83,36 @@ const LinkStory: Story<Props> = ({ page: defaultPage, pageCount }) => (
       <Routes>
         <Route
           path="/:page"
-          element={<CurrentPager pageCount={pageCount}></CurrentPager>}
+          element={
+            <CurrentPager
+              pageCount={pageCount}
+              pageRangeDisplayed={pageRangeDisplayed}
+            ></CurrentPager>
+          }
         />
       </Routes>
     </Router>
   </ComponentAbstraction>
 )
 
-function CurrentPager({ pageCount }: { pageCount: number }) {
+function CurrentPager({
+  pageCount,
+  pageRangeDisplayed,
+}: {
+  pageCount: number
+  pageRangeDisplayed?: number
+}) {
   const params = useParams()
   const page = params.page !== undefined ? parseInt(params.page, 10) : 1
 
-  return <LinkPager makeUrl={makeUrl} page={page} pageCount={pageCount} />
+  return (
+    <LinkPager
+      makeUrl={makeUrl}
+      page={page}
+      pageCount={pageCount}
+      pageRangeDisplayed={pageRangeDisplayed}
+    />
+  )
 }
 
 export const Link = LinkStory.bind({})
@@ -103,3 +144,10 @@ One.args = {
   page: 1,
   pageCount: 1,
 }
+
+export const LittlePageRangeDisplayed = LinkStory.bind({})
+LittlePageRangeDisplayed.args = {
+  page: 1,
+  pageCount: 10,
+  pageRangeDisplayed: 4,
+}

package/src/components/Pager/index.tsx

@@ -6,7 +6,11 @@ import DotsIcon from '../icons/DotsIcon'
 import WedgeIcon, { WedgeDirection } from '../icons/WedgeIcon'
 import { useComponentAbstraction } from '@charcoal-ui/react'
 
-function usePagerWindow(page: number, pageCount: number, windowSize = 7) {
+function usePagerWindow(
+  page: number,
+  pageCount: number,
+  pageRangeDisplayed = 7
+) {
   // ページャーのリンク生成例:
   //
   //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >
@@ -24,28 +28,33 @@ function usePagerWindow(page: number, pageCount: number, windowSize = 7) {
   // デザインの意図: 前後移動時のカーソル移動を最小限にする。
 
   if (process.env.NODE_ENV !== 'production') {
-    warning((page | 0) === page, `\`page\` must be interger (${page})`)
+    warning((page | 0) === page, `\`page\` must be integer (${page})`)
     warning(
       (pageCount | 0) === pageCount,
-      `\`pageCount\` must be interger (${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(windowSize / 2), windowSize)
+      Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed)
     )
 
-    if (visibleLastPage <= windowSize) {
+    if (visibleLastPage <= pageRangeDisplayed) {
       // 表示範囲が1-7ページなら省略は無い。
       return Array.from(
         { length: 1 + visibleLastPage - visibleFirstPage },
         (_, i) => visibleFirstPage + i
       )
     } else {
-      const start = visibleLastPage - (windowSize - 1) + 2
+      const start = visibleLastPage - (pageRangeDisplayed - 1) + 2
       return [
         // 表示範囲が1-7ページを超えるなら、
         // - 1ページ目は固定で表示する
@@ -58,7 +67,7 @@ function usePagerWindow(page: number, pageCount: number, windowSize = 7) {
         ),
       ]
     }
-  }, [page, pageCount, windowSize])
+  }, [page, pageCount, pageRangeDisplayed])
 
   useDebugValue(window)
 
@@ -68,6 +77,7 @@ function usePagerWindow(page: number, pageCount: number, windowSize = 7) {
 interface CommonProps {
   page: number
   pageCount: number
+  pageRangeDisplayed?: number
 }
 
 export interface PagerProps extends CommonProps {
@@ -75,9 +85,14 @@ export interface PagerProps extends CommonProps {
 }
 
 // this pager is just regular buttons; for links use LinkPager
-export default memo(function Pager({ page, pageCount, onChange }: PagerProps) {
+export default memo(function Pager({
+  page,
+  pageCount,
+  pageRangeDisplayed,
+  onChange,
+}: PagerProps) {
   // TODO: refactor Pager and LinkPager to use a common parent component
-  const window = usePagerWindow(page, pageCount)
+  const window = usePagerWindow(page, pageCount, pageRangeDisplayed)
   const makeClickHandler = useCallback(
     (value: number) => () => {
       onChange(value)
@@ -132,9 +147,14 @@ export interface LinkPagerProps extends CommonProps {
   makeUrl(page: number): string
 }
 
-export function LinkPager({ page, pageCount, makeUrl }: LinkPagerProps) {
+export function LinkPager({
+  page,
+  pageCount,
+  pageRangeDisplayed,
+  makeUrl,
+}: LinkPagerProps) {
   const { Link } = useComponentAbstraction()
-  const window = usePagerWindow(page, pageCount)
+  const window = usePagerWindow(page, pageCount, pageRangeDisplayed)
 
   const hasNext = page < pageCount
   const hasPrev = page > 1

package/src/index.ts

@@ -38,7 +38,7 @@ export {
   MAIN_COLUMN_HORIZONTAL_MIN_MARGIN,
   RESPONSIVE_LEFT_WIDTH,
   RESPONSIVE_MAIN_MAX_WIDTH,
-} from './foundation/contants'
+} from './foundation/constants'
 export { default as Carousel } from './components/Carousel'
 export { useElementSize, useMedia, useMediaScreen1 } from './foundation/hooks'
 export { default as Pager, LinkPager } from './components/Pager'

package/dist/foundation/contants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"contants.d.ts","sourceRoot":"","sources":["../../src/foundation/contants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iCAAiC,KAAK,CAAA;AAEnD,eAAO,MAAM,qBAAqB,QACuB,CAAA;AACzD,eAAO,MAAM,yBAAyB,QAIrC,CAAA"}