disabled実装

visionary-japan · Apr 27, 2024 · c745ab5 · c745ab5
1 parent 5364814
commit c745ab5
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/public/js/configs.js"></script>
+    <script type="module" src="./public/js/configs.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/src/components/button/buttonViteStyle.ts b/src/components/button/buttonViteStyle.ts
@@ -24,6 +24,14 @@ export const styls = stylex.create({
         borderRadius: 8,
         transition: 'border-color 0.25s',
         willChange: 'border-color',
+        pointerEvents: {
+            default: 'auto',
+            ':disabled': 'none',
+        },
+        filter: {
+            default: 'auto',
+            ':disabled': 'brightness(0.5)',
+        },
     },
 });
 

diff --git a/src/pages/Public.tsx b/src/pages/Public.tsx
@@ -1,29 +1,24 @@
-import { type FC, memo, useEffect, useState } from 'react';
+import { type FC, memo } from 'react';
 import type { JsonConfigs } from '../@types';
 import { H1 } from '../components/heading/H1';
 
-const Component: FC = () => {
-    const windowConfigs = window.configs;
-    const [json, setJson] = useState<JsonConfigs | null>(null);
-
-    useEffect(() => {
-        fetch('./json/config.json')
-            .then(response => response.json())
-            .then((val: JsonConfigs) => setJson(val))
-            .catch(error => console.error('フェッチ失敗', error));
-    }, []);
+const configsWindow = window.configs;
+const configsJson: JsonConfigs = await fetch('./json/config.json').then(res =>
+    res.json(),
+);
 
+const Component: FC = () => {
     return (
         <>
             <H1 isLeft>JS: window.configs</H1>
-            {windowConfigs &&
-                Object.keys(windowConfigs).map(key => (
-                    <div key={key}>{windowConfigs?.[key]?.keyString}</div>
+            {configsWindow &&
+                Object.keys(configsWindow).map(key => (
+                    <div key={key}>{configsWindow?.[key]?.keyString}</div>
                 ))}
             <H1 isLeft>JSON: FETCH</H1>
-            {json &&
-                Object.keys(json).map(key =>
-                    json?.[key]?.map(val => (
+            {configsJson &&
+                Object.keys(configsJson).map(key =>
+                    configsJson?.[key]?.map(val => (
                         <div key={`${key}-${val.keyString}`}>
                             {val.keyString}
                         </div>

diff --git a/src/pages/scroll/Ultimate.tsx b/src/pages/scroll/Ultimate.tsx
@@ -1,5 +1,12 @@
 import stylex from '@stylexjs/stylex';
-import { type FC, type KeyboardEvent, memo, useRef, useState } from 'react';
+import {
+    type FC,
+    type KeyboardEvent,
+    memo,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import { ButtonVite } from '../../components/button/ButtonVite';
 import { DivCustom } from '../../components/div/DivCustom';
 import { DivScrollable } from '../../components/div/DivScrollable';
@@ -46,6 +53,7 @@ const arr = [
     ['1', '2', '3', '4', '5', '6', '7', '8', ''],
     ['9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
 ];
+const chapIdxMax = arr.length - 1;
 
 export interface RefScroll {
     refScroll: HTMLDivElement | null;
@@ -62,8 +70,38 @@ const Component: FC = () => {
     // State: Text
     const [pageTxt, setPageTxt] = useState<string>('');
 
+    // Memo
+    const pageIdxMax = useMemo(() => arr[chapIdx].length - 1, [chapIdx]);
+
+    // callback
+    // back
+    const handleBack = () => {
+        if (pageIdx > 0) {
+            refScroll.current?.back();
+        } else {
+            const newChapIdx = chapIdx - 1;
+            if (newChapIdx > 0) return;
+            const newPageIdx = arr[newChapIdx].length - 1;
+            if (!refScroll.current?.refScroll) return;
+            setChapIdx(newChapIdx);
+            snapToIndex(refScroll.current.refScroll, newPageIdx, false);
+        }
+    };
+    // next
+    const handleNext = () => {
+        if (pageIdx >= pageIdxMax) {
+            const newChapIdx = chapIdx + 1;
+            if (newChapIdx > chapIdxMax) return;
+            if (!refScroll.current?.refScroll) return;
+            setChapIdx(newChapIdx);
+            snapToIndex(refScroll.current.refScroll, 0, false);
+        } else {
+            refScroll.current?.next();
+        }
+    };
+
     // Function: Keydown
-    const handleKeydown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
         if (e.nativeEvent.isComposing || e.key !== 'Enter' || !pageTxt) return;
         const [newChapIdx, newPageIdx] = findIndexes(pageTxt, arr);
         if (newChapIdx === undefined || newPageIdx === undefined) return;
@@ -102,10 +140,16 @@ const Component: FC = () => {
                 styleTypes={['flexColumn', 'gap', 'margin']}
                 styles={styles.btns}
             >
-                <ButtonVite onClick={() => refScroll.current?.back()}>
+                <ButtonVite
+                    disabled={chapIdx === 0 && pageIdx === 0}
+                    onClick={handleBack}
+                >
                     Back
                 </ButtonVite>
-                <ButtonVite onClick={() => refScroll.current?.next()}>
+                <ButtonVite
+                    disabled={chapIdx >= chapIdxMax && pageIdx >= pageIdxMax}
+                    onClick={handleNext}
+                >
                     Next
                 </ButtonVite>
                 <ButtonVite
@@ -122,7 +166,7 @@ const Component: FC = () => {
                     aria-label='chapter'
                     value={pageTxt}
                     onChange={e => setPageTxt(e.target.value)}
-                    onKeyDown={handleKeydown}
+                    onKeyDown={handleKeyDown}
                 />
             </DivCustom>
         </DivCustom>

diff --git a/vite.config.ts b/vite.config.ts
@@ -6,4 +6,9 @@ import styleX from 'vite-plugin-stylex';
 export default defineConfig({
     plugins: [react(), styleX()],
     base: '/react_ui_comparison',
+    esbuild: {
+        supported: {
+            'top-level-await': true,
+        },
+    },
 });