Merge pull request #71 from mura-/ISSUE-70-remove-react-wrapper

Issue 70 remove react wrapper

Author: mura-

package.json

@@ -20,7 +20,6 @@
   "dependencies": {
     "@emotion/core": "^10.0.35",
     "@emotion/styled": "^10.0.27",
-    "@handsontable/react": "^4.0.0",
     "@kintone/kintone-ui-component": "^0.7.2",
     "@kintone/rest-api-client": "^1.4.1",
     "handsontable": "6.2.2",

src/js/spreadsheet/hooks.ts

@@ -1,10 +1,13 @@
 import { useEffect, useRef } from 'react';
 import Handsontable from 'handsontable';
-import { useAsync, useAsyncFn } from 'react-use';
-import { HotTable } from '@handsontable/react';
+import { useAsyncFn } from 'react-use';
 import { Record } from '@kintone/rest-api-client/lib/client/types';
 import { client } from '~/src/js/utils/client';
 
+type HotTable = HTMLDivElement & {
+  hotInstance?: Handsontable;
+};
+
 const NOT_ALLOWED_EDIT_FIELDS = [
   'RECORD_NUMBER',
   'CREATED_TIME',

src/js/spreadsheet/index.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
 import { usePageVisibility } from 'react-page-visibility';
 import Handsontable from 'handsontable';
-import { HotTable } from '@handsontable/react';
 import 'handsontable/dist/handsontable.full.css';
 import { useAsync } from 'react-use';
 import styled from '@emotion/styled';
@@ -19,6 +18,10 @@ import {
 } from '~/src/js/spreadsheet/hooks';
 import { Loader } from '~/src/js/spreadsheet/Loader';
 
+type HotTable = HTMLDivElement & {
+  hotInstance?: Handsontable;
+};
+
 type SpreadSheetProps = {
   saveAfterChange: Handsontable.Hooks['afterChange'];
   beforeRemoveRow: Handsontable.Hooks['beforeRemoveRow'];
@@ -27,23 +30,14 @@ type SpreadSheetProps = {
   dataSchema: Handsontable.GridSettings['dataSchema'];
   data: Handsontable.GridSettings['data'];
   hotRef: React.RefObject<HotTable>;
+  setHotRef: (node: HotTable) => void;
 };
 
 type Props = {
   isLoading: boolean;
   errorMessages: string;
 } & SpreadSheetProps;
 
-const ARRAY_FIELDS = [
-  'CHECK_BOX',
-  'MULTI_SELECT',
-  'FILE',
-  'USER_SELECT',
-  'CATEGORY',
-  'SUBTABLE',
-  'ORGANIZATION_SELECT',
-  'GROUP_SELECT',
-];
 const NOT_ALLOWED_EDIT_FIELDS = [
   'RECORD_NUMBER',
   'CREATED_TIME',
@@ -79,6 +73,18 @@ declare type CheckBoxFieldProperty = {
   align: 'HORIZONTAL' | 'VERTICAL';
 };
 
+export const useHookWithRefCallback = <T extends HTMLElement>(): [
+  React.MutableRefObject<T | null>,
+  (node: T) => void,
+] => {
+  const ref = useRef<T | null>(null);
+  const setRef = useCallback((node: T) => {
+    ref.current = node;
+  }, []);
+
+  return [ref, setRef];
+};
+
 const getColumnData = async (config: Config, appId: number, onChange: any) => {
   const resp = await client.app.getFormFields({ app: appId });
   // ヘッダーの取得
@@ -174,7 +180,8 @@ export const useSpreadSheet = ({ config, query, appId }: { config: Config; query
     i18n.changeLanguage(kintone.getLoginUser().language);
   }, [i18n]);
 
-  const hotRef = useRef<HotTable>();
+  // const hotRef = useRef<HotTable>();
+  const [hotRef, setHotRef] = useHookWithRefCallback<HotTable>();
   const isPageVisible = usePageVisibility();
 
   const [fetchedAndLoadDataState, fetchAndLoadData] = useFetchRecords({
@@ -239,6 +246,7 @@ export const useSpreadSheet = ({ config, query, appId }: { config: Config; query
     data: [], // 繰り返しデータは取得するので初期値としてのデータはあたえない
     dataSchema: fetchedAppDataState.value?.columnData.dataSchema ?? {},
     hotRef: hotRef as React.MutableRefObject<HotTable>,
+    setHotRef: setHotRef,
     isLoading:
       fetchedAndLoadDataState.loading ||
       afterChangeState.loading ||
@@ -255,22 +263,22 @@ export const useSpreadSheet = ({ config, query, appId }: { config: Config; query
 };
 
 const MemoedHotTable = React.memo<SpreadSheetProps>(
-  ({ hotRef, beforeRemoveRow, saveAfterChange, colHeaders, columns, dataSchema, data }) => (
-    <HotTable
-      ref={hotRef}
-      data={data}
-      rowHeaders
-      contextMenu={['remove_row']}
-      minSpareRows={1}
-      // width="100%"
-      // height="100vh"
-      colHeaders={colHeaders}
-      columns={columns}
-      dataSchema={dataSchema}
-      afterChange={saveAfterChange}
-      beforeRemoveRow={beforeRemoveRow}
-    />
-  ),
+  ({ setHotRef, hotRef, beforeRemoveRow, saveAfterChange, colHeaders, columns, dataSchema, data }) => {
+    if (hotRef.current) {
+      hotRef.current.hotInstance = new Handsontable(hotRef.current, {
+        data: data,
+        rowHeaders: true,
+        contextMenu: ['remove_row'],
+        minSpareRows: 1,
+        colHeaders: colHeaders,
+        columns: columns,
+        dataSchema: dataSchema,
+        afterChange: saveAfterChange,
+        beforeRemoveRow: beforeRemoveRow,
+      });
+    }
+    return <div ref={setHotRef}></div>;
+  },
   (prev, next) => prev.hotRef === next.hotRef && prev.columns?.length === next.columns?.length,
 );
 
@@ -290,13 +298,15 @@ export const SpreadSheet: React.FC<Props> = ({
   data,
   isLoading,
   errorMessages,
+  setHotRef,
 }) => {
   return (
     <Wrapper>
       {errorMessages && <Alert isVisible text={errorMessages} />}
       {isLoading && <Loader />}
       <MemoedHotTable
         hotRef={hotRef}
+        setHotRef={setHotRef}
         data={data}
         colHeaders={colHeaders}
         columns={columns}

webpack.config.ts

@@ -20,7 +20,7 @@ const config: Configuration = {
     },
   },
   plugins: [
-    new BundleAnalyzerPlugin(),
+    // new BundleAnalyzerPlugin(),
     {
       // code will be packaged and uploaded automatically only watch mode
       apply: (compiler) => {

yarn.lock

@@ -417,11 +417,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
-"@handsontable/react@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@handsontable/react/-/react-4.0.0.tgz#484423752d21d1313af5fed7cad6fef5e02ea676"
-  integrity sha512-c1HXvdmpKAhy/JoEYEDJSo+6NveQjMgYwBCr8RmhFj2Yo2y71PLK7zNVzKUzebleUDd1oMIbHFNgkpjL3hfT2A==
-
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"