procon_bypass_man-web 0.1.1 → 0.1.2

data/src/hooks/useModal.ts

@@ -0,0 +1,37 @@
+import React, { useState, useReducer } from "react";
+import { Button, buttons } from "../types/button";
+import { ModalProps } from "../components/buttons_modal";
+
+export type ModalSetting = {
+  toggleModal: any;
+  setCallbackOnSubmit: any;
+  setCallbackOnClose: any;
+  setTitle: any;
+  setPrefillButtons: any;
+}
+
+type openModalParams = {
+  title: string,
+  prefill: any,
+  callbackOnSubmit: any,
+};
+
+export const useModal = () => {
+  const [visible, toggleModal] = useReducer(((m: boolean) => { return !m; }), false);
+  const [callbackOnSubmit, setCallbackOnSubmit] = useState(undefined as any)
+  const [callbackOnClose, setCallbackOnClose] = useState(undefined as any)
+  const [title, setTitle] = useState("")
+  const [prefill, setPrefillButtons] = useState<Array<Button>>([])
+
+  const openModal = ({ title, prefill, callbackOnSubmit }: openModalParams): void => {
+    toggleModal();
+    setTitle(title)
+    setPrefillButtons(prefill);
+    setCallbackOnSubmit(() => callbackOnSubmit);
+    setCallbackOnClose(() => toggleModal);
+  }
+  const modalProps: ModalProps = { visible, callbackOnSubmit, callbackOnClose, title, prefill };
+  const modalSetting: ModalSetting ={ toggleModal, setCallbackOnSubmit, setCallbackOnClose, setTitle, setPrefillButtons }; 
+
+  return [modalProps, openModal] as const;
+}

data/src/pages/buttons_setting_page.tsx

@@ -13,6 +13,8 @@ import { ButtonsSettingContext, } from "./../contexts/buttons_setting";
 import { ButtonsSettingConverter } from "./../lib/buttons_setting_converter";
 import { disableFlipType, alwaysFlipType, flipIfPressedSelfType, flipIfPressedSomeButtonsType, ignoreButtonsInFlipingType, remapType, closeMenuType, applyMacroType, installMacroType, installModeType, applyModeType } from "../reducers/layer_reducer";
 import { ButtonsModal } from "../components/buttons_modal";
+import { useModal, ModalSetting } from "../hooks/useModal";
+import { ModalProps } from "../components/buttons_modal";
 import { InstallableMacros } from "../components/installable_macros";
 import { InstallableModes } from "../components/installable_modes";
 import _ from 'lodash';
@@ -31,6 +33,7 @@ export const ButtonsSettingPage = () => {
   const layerRefs = layerKeys.map((l) => ({} as LayerRef));
   const [initializedSetting, setInitializedSetting] = useState({} as ButtonsSettingType)
   const [infoMessage, setInfoMessage] = useState(undefined as undefined | string)
+  const [modalProps, openModal] = useModal();
 
   const switchLayer = (event:  React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     if (event.target instanceof HTMLElement) {
@@ -218,22 +221,12 @@ export const ButtonsSettingPage = () => {
       return "inactive"
     };
   }
+
   const handlePrefixKeysField = () => {
-    toggleModal();
-    setModalTitle("キープレフィックスの変更")
-    setModalPrefillButtons(prefixKeys);
-    setModalCallbackOnSubmit(() => setPrefixKeys);
-    setModalCloseCallback(() => toggleModal);
+    openModal({ title: "キープレフィックスの変更", prefill: prefixKeys, callbackOnSubmit: setPrefixKeys });
   }
 
-  // for modal
-  const [isOpenModal, toggleModal] = useReducer(((m) => { return !m; }), false);
-  const [modalCallbackOnSubmit, setModalCallbackOnSubmit] = useState(undefined as any)
-  const [modalCloseCallback, setModalCloseCallback] = useState(undefined as any)
-  const [modalTitle, setModalTitle] = useState("")
-  const [modalPrefillButtons, setModalPrefillButtons] = useState<Array<Button>>([])
-
-  if(!loaded) { return null; };
+  if(!loaded) { return <div>{infoMessage}</div> };
 
   return(
     <>
@@ -244,19 +237,16 @@ export const ButtonsSettingPage = () => {
             <a href="#" onClick={exportSetting}>エクスポートする</a>
           </div>
 
-          <h3>インストール可能なマクロ</h3>
-          {<InstallableMacros />}
-
           <h3>インストール可能なモード</h3>
           {<InstallableModes />}
 
           <h3>インストール可能なマクロ</h3>
-          {loaded && <InstallableMacros />}
+          {<InstallableMacros />}
 
           <h3>設定中のプレフィックスキー</h3>
           <div css={css`position: relative; margin-bottom: 20px;`}>
             <input type="text" value={prefixKeys.join(", ")} readOnly={true} onClick={handlePrefixKeysField} />
-            {isOpenModal && <ButtonsModal callbackOnSubmit={modalCallbackOnSubmit} callbackOnClose={modalCloseCallback} title={modalTitle} prefill={modalPrefillButtons} positionOnShown={"stay"} />}
+            {<ButtonsModal {...modalProps as ModalProps} />}
           </div>
         </div>
         <div css={css`display: table-cell`}>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: procon_bypass_man-web
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - jiikko
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2021-10-16 00:00:00.000000000 Z
+date: 2021-11-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -62,6 +62,7 @@ files:
 - ".babelrc"
 - ".circleci/config.yml"
 - ".gitignore"
+- ".node-version"
 - ".rspec"
 - ".rubocop.yml"
 - CHANGELOG.md
@@ -76,8 +77,10 @@ files:
 - bin/setup
 - jest.config.ts
 - lib/procon_bypass_man/web.rb
+- lib/procon_bypass_man/web/configuration.rb
 - lib/procon_bypass_man/web/db.rb
 - lib/procon_bypass_man/web/migration/001_create_settings_table.sql
+- lib/procon_bypass_man/web/migration/002_insert_default_settings_rows.sql
 - lib/procon_bypass_man/web/models/base_model.rb
 - lib/procon_bypass_man/web/models/setting.rb
 - lib/procon_bypass_man/web/public/bundle.js
@@ -85,6 +88,8 @@ files:
 - lib/procon_bypass_man/web/public/index.html
 - lib/procon_bypass_man/web/server.rb
 - lib/procon_bypass_man/web/setting_parser.rb
+- lib/procon_bypass_man/web/setting_parser/layer.rb
+- lib/procon_bypass_man/web/setting_parser/top_level_layer.rb
 - lib/procon_bypass_man/web/storage.rb
 - lib/procon_bypass_man/web/version.rb
 - package.json
@@ -98,6 +103,7 @@ files:
 - src/components/macro_settings.tsx
 - src/components/mode_settings.tsx
 - src/contexts/buttons_setting.ts
+- src/hooks/useModal.ts
 - src/index.html
 - src/lib/button_state.test.ts
 - src/lib/button_state.ts