procon_bypass_man-web 0.1.1 → 0.1.2

data/lib/procon_bypass_man/web/server.rb

@@ -15,6 +15,10 @@ module ProconBypassMan
     class App < Sinatra::Base
       require "yaml"
 
+      before do
+        env["rack.logger"] = ProconBypassMan::Web.logger
+      end
+
       register Sinatra::Reloader if defined?(Sinatra::Reloader)
       set :bind, '0.0.0.0'
 
@@ -119,13 +123,19 @@ module ProconBypassMan
         end
       end
 
+      # PBMから受け取って、emmitする
+      post '/api/pressed_buttons' do
+        status 200
+        body ''
+      end
+
       get '/' do
-        send_file File.join(ProconBypassMan::Web.root, 'lib/procon_bypass_man/web', 'public', 'index.html')
+        send_file File.join(ProconBypassMan::Web.gem_root, 'lib/procon_bypass_man/web', 'public', 'index.html')
       end
 
       # サーバでパスとして解釈されないように、全部 `/`として受け付けるため
       get '/:none' do
-        send_file File.join(ProconBypassMan::Web.root, 'lib/procon_bypass_man/web', 'public', 'index.html')
+        send_file File.join(ProconBypassMan::Web.gem_root, 'lib/procon_bypass_man/web', 'public', 'index.html')
       end
     end
 

data/lib/procon_bypass_man/web/setting_parser/layer.rb

@@ -0,0 +1,72 @@
+module ProconBypassMan
+  module Web
+    class SettingParser
+      class Layer
+        module Syntax
+          def initialize(mode: )
+            @table = {
+              mode: mode&.to_s,
+            }.compact
+          end
+
+          def flip(button, if_pressed: nil, force_neutral: nil)
+            @table[:flip] ||= {}
+            if if_pressed.nil? && force_neutral.nil?
+              @table[:flip][button] = nil
+            else
+              if if_pressed
+                if if_pressed.is_a?(Array)
+                  ifp = if_pressed
+                else
+                  ifp = [if_pressed]
+                end
+              end
+              if force_neutral
+                if force_neutral.is_a?(Array)
+                  fn = force_neutral
+                else
+                  fn = [force_neutral]
+                end
+              end
+              @table[:flip][button] = { if_pressed: ifp, force_neutral: fn, enable: true }
+            end
+            self
+          end
+
+          def remap(button, to: nil)
+            case to
+            when Array
+              @table[:remap] ||= {}
+              @table[:remap][button] = { to: to }
+            when String, Symbol
+              @table[:remap] ||= {}
+              @table[:remap][button] = { to: [to] }
+            end
+
+            self
+          end
+
+          def macro(name, if_pressed: nil)
+            @table[:macro] ||= {}
+            if if_pressed.nil?
+              @table[:macro][name.to_s] = { if_pressed: [] }
+            else
+              @table[:macro][name.to_s] = { if_pressed: if_pressed }
+            end
+            self
+          end
+
+          def method_missing(name, *_args)
+            ProconBypassMan::Web.logger.info("unknown layer DSL #{name}")
+            self
+          end
+        end
+        include Syntax
+
+        def to_hash
+          @table
+        end
+      end
+    end
+  end
+end

data/lib/procon_bypass_man/web/setting_parser/top_level_layer.rb

@@ -0,0 +1,109 @@
+module ProconBypassMan
+  module Web
+    class SettingParser
+      class TopLevelLayer
+        module Serializer
+          def to_hash
+            h = { prefix_keys_for_changing_layer: prefix_keys_for_changing_layer || [] }
+            h[:layers] ||= {}
+            @layers.each do |key, layer|
+              h[:layers][key] = layer&.to_hash
+            end
+            h
+          end
+
+          def to_hash_group_by_button
+            h = { prefix_keys_for_changing_layer: prefix_keys_for_changing_layer || [] }
+            h[:layers] ||= {}
+            @layers.each do |key, layer|
+              h[:layers][key] ||= {}
+              next if layer.nil?
+
+              if !@installed_plugin[:macros].empty?
+                h[:installed_macros] = @installed_plugin[:macros]
+              end
+              if !@installed_plugin[:modes].empty?
+                h[:installed_modes] = @installed_plugin[:modes]
+              end
+
+              layer.to_hash.dig(:flip)&.each do |button, value|
+                h[:layers][key][button] ||= {}
+                h[:layers][key][button][:open] = true
+                h[:layers][key][button][:flip] ||= {}
+                h[:layers][key][button][:flip][:enable] = true
+                if value
+                  h[:layers][key][button][:flip].merge!(value)
+                end
+              end
+
+              if layer.to_hash.dig(:macro)
+                h[:layers][key][:macro] = []
+                if(macros = layer.to_hash.dig(:macro))
+                  macros.transform_values! { |x| x[:if_pressed] }
+                  h[:layers][key][:macro] = macros
+                end
+              end
+
+              if layer.to_hash.dig(:mode)
+                h[:layers][key][:mode] = { layer.to_hash.dig(:mode) => true }
+              end
+
+              layer.to_hash.dig(:remap)&.each do |button, value|
+                h[:layers][key][button] ||= {}
+                h[:layers][key][button][:remap] ||= {}
+                h[:layers][key][button][:open] = true
+                if value
+                  h[:layers][key][button][:remap].merge!(value)
+                end
+              end
+            end
+            h
+          end
+        end
+
+        module Syntax
+          def initialize
+            @installed_plugin = { macros: [], modes: [] }
+            @layers = {}
+          end
+
+          def install_macro_plugin(name)
+            @installed_plugin[:macros] << name.to_s
+          end
+
+          def install_mode_plugin(name)
+            @installed_plugin[:modes] << name.to_s
+          end
+
+          def prefix_keys_for_changing_layer(value=nil)
+            if value
+              @prefix_keys_for_changing_layer = value
+            else
+              @prefix_keys_for_changing_layer
+            end
+          end
+
+          def layer(dir, mode: nil, &block)
+            if(mode == :manual || mode == 'manual')
+              mode = nil
+            end
+
+            if block_given?
+              @layers[dir] = Layer.new(mode: mode).instance_eval(&block) || Layer.new(mode: mode)
+            else
+              @layers[dir] = Layer.new(mode: mode)
+            end
+          end
+
+          def method_missing(name, *_args)
+            ProconBypassMan::Web.logger.info("unknown toplevel DSL #{name}")
+            self
+          end
+        end
+
+        include Syntax
+        include Serializer
+      end
+    end
+  end
+end

data/lib/procon_bypass_man/web/setting_parser.rb

@@ -1,4 +1,6 @@
 require "json"
+require "procon_bypass_man/web/setting_parser/top_level_layer"
+require "procon_bypass_man/web/setting_parser/layer"
 
 # pluginの定数を握りつぶす
 class Module
@@ -9,160 +11,10 @@ class Module
   end
 end
 
+# PBM 0.1.8バージョンの構文に対応
 module ProconBypassMan
   module Web
     class SettingParser
-      class Core
-        class Layer
-          def initialize(mode: )
-            @table = {
-              mode: mode&.to_s,
-            }.compact
-          end
-
-          def flip(button, if_pressed: nil, force_neutral: nil)
-            @table[:flip] ||= {}
-            if if_pressed.nil? && force_neutral.nil?
-              @table[:flip][button] = nil
-            else
-              if if_pressed
-                if if_pressed.is_a?(Array)
-                  ifp = if_pressed
-                else
-                  ifp = [if_pressed]
-                end
-              end
-              if force_neutral
-                if force_neutral.is_a?(Array)
-                  fn = force_neutral
-                else
-                  fn = [force_neutral]
-                end
-              end
-              @table[:flip][button] = { if_pressed: ifp, force_neutral: fn, enable: true }
-            end
-            self
-          end
-
-          def remap(button, to: nil)
-            case to
-            when Array
-              @table[:remap] ||= {}
-              @table[:remap][button] = { to: to }
-            when String, Symbol
-              @table[:remap] ||= {}
-              @table[:remap][button] = { to: [to] }
-            end
-
-            self
-          end
-
-          def macro(name, if_pressed: nil)
-            @table[:macro] ||= {}
-            if if_pressed.nil?
-              @table[:macro][name.to_s] = { if_pressed: [] }
-            else
-              @table[:macro][name.to_s] = { if_pressed: if_pressed }
-            end
-            self
-          end
-
-          def to_hash
-            @table
-          end
-        end
-
-        def install_macro_plugin(name)
-          @installed_plugin[:macros] << name.to_s
-        end
-
-        def install_mode_plugin(name)
-          @installed_plugin[:modes] << name.to_s
-        end
-
-        def initialize
-          @installed_plugin = { macros: [], modes: [] }
-          @layers = {}
-        end
-
-        def prefix_keys_for_changing_layer(value=nil)
-          if value
-            @prefix_keys_for_changing_layer = value
-          else
-            @prefix_keys_for_changing_layer
-          end
-        end
-
-        def layer(dir, mode: nil, &block)
-          if(mode == :manual || mode == 'manual')
-            mode = nil
-          end
-
-          if block_given?
-            @layers[dir] = Layer.new(mode: mode).instance_eval(&block) || Layer.new(mode: mode)
-          else
-            @layers[dir] = Layer.new(mode: mode)
-          end
-        end
-
-        def to_hash
-          h = { prefix_keys_for_changing_layer: prefix_keys_for_changing_layer || [] }
-          h[:layers] ||= {}
-          @layers.each do |key, layer|
-            h[:layers][key] = layer&.to_hash
-          end
-          h
-        end
-
-        def to_hash_group_by_button
-          h = { prefix_keys_for_changing_layer: prefix_keys_for_changing_layer || [] }
-          h[:layers] ||= {}
-          @layers.each do |key, layer|
-            h[:layers][key] ||= {}
-            next if layer.nil?
-
-            if !@installed_plugin[:macros].empty?
-              h[:installed_macros] = @installed_plugin[:macros]
-            end
-            if !@installed_plugin[:modes].empty?
-              h[:installed_modes] = @installed_plugin[:modes]
-            end
-
-            layer.to_hash.dig(:flip)&.each do |button, value|
-              h[:layers][key][button] ||= {}
-              h[:layers][key][button][:open] = true
-              h[:layers][key][button][:flip] ||= {}
-              h[:layers][key][button][:flip][:enable] = true
-              if value
-                h[:layers][key][button][:flip].merge!(value)
-              end
-            end
-
-            if layer.to_hash.dig(:macro)
-              h[:layers][key][:macro] = []
-              if(macros = layer.to_hash.dig(:macro))
-                macros.transform_values! { |x| x[:if_pressed] }
-                h[:layers][key][:macro] = macros
-              end
-            end
-
-            if layer.to_hash.dig(:mode)
-              h[:layers][key][:mode] = { layer.to_hash.dig(:mode) => true }
-            end
-
-            layer.to_hash.dig(:remap)&.each do |button, value|
-              h[:layers][key][button] ||= {}
-              h[:layers][key][button][:remap] ||= {}
-              h[:layers][key][button][:open] = true
-              if value
-                h[:layers][key][button][:remap].merge!(value)
-              end
-            end
-          end
-          h
-        end
-      end
-
       def self.parse(text)
         new(text)
       end
@@ -182,7 +34,7 @@ module ProconBypassMan
       end
 
       def initialize(text)
-        @parser = Core.new
+        @parser = TopLevelLayer.new
         @parser.instance_eval(text)
       end
     end

data/lib/procon_bypass_man/web/storage.rb

@@ -6,19 +6,19 @@ module ProconBypassMan
       end
 
       def root_path
-        ProconBypassMan::Web::Setting.find_or_create_by&.root_path
+        ProconBypassMan::Web::Setting.find_or_create&.root_path
       end
 
       def root_path=(value)
-        ProconBypassMan::Web::Setting.find_or_create_by&.update!(root_path: value)
+        ProconBypassMan::Web::Setting.find_or_create&.update!(root_path: value)
       end
 
       def setting_path
-        ProconBypassMan::Web::Setting.find_or_create_by&.setting_path
+        ProconBypassMan::Web::Setting.find_or_create&.setting_path
       end
 
       def setting_path=(value)
-        ProconBypassMan::Web::Setting.find_or_create_by&.update!(setting_path: value)
+        ProconBypassMan::Web::Setting.find_or_create&.update!(setting_path: value)
       end
     end
   end

data/lib/procon_bypass_man/web/version.rb

@@ -2,6 +2,6 @@
 
 module ProconBypassMan
   module Web
-    VERSION = "0.1.1"
+    VERSION = "0.1.2"
   end
 end

data/lib/procon_bypass_man/web.rb

@@ -1,4 +1,6 @@
 require_relative "web/version"
+require "logger"
+require "procon_bypass_man/web/configuration"
 require "procon_bypass_man/web/server"
 require "procon_bypass_man/web/db"
 require "procon_bypass_man/web/models/setting"
@@ -8,13 +10,21 @@ module ProconBypassMan
   module Web
     class Error < StandardError; end
 
-    def self.root
-      File.expand_path('../..', File.dirname(__FILE__))
+    extend ProconBypassMan::Web::Configuration::ClassAttributes
+
+    def self.configure(&block)
+      @@configuration = ProconBypassMan::Web::Configuration.new
+      @@configuration.instance_eval(&block)
+      @@configuration
     end
 
     def self.config
-      { db_path: ENV["DB_PATH"] ||= File.join(root, "pbm_web.db"),
-      }
+      @@configuration ||= ProconBypassMan::Web::Configuration.new
+    end
+
+    # @return [String]
+    def self.gem_root
+      File.expand_path('../..', __dir__).freeze
     end
   end
 end

data/src/components/button_setting.tsx

@@ -9,6 +9,8 @@ import { ButtonsSettingContext } from "./../contexts/buttons_setting";
 import { ButtonsSettingType, ButtonsInLayer, ButtonInLayer, Layers, Flip } from "../types/buttons_setting_type";
 import { LayerKey } from "../types/layer_key";
 import { disableFlipType, alwaysFlipType, flipIfPressedSelfType, flipIfPressedSomeButtonsType, ignoreButtonsInFlipingType, remapType, openMenuType, closeMenuType } from "../reducers/layer_reducer";
+import { useModal, ModalSetting } from "../hooks/useModal";
+import { ModalProps } from "../components/buttons_modal";
 
 type ButtonMenuProp = {
   name: Button;
@@ -19,27 +21,20 @@ type ButtonMenuProp = {
 
 const ButtonMenu = ({ name, layerKey, buttonValue, layersDispatch }: ButtonMenuProp) => {
   const buttonState = new ButtonState(name, buttonValue.flip, buttonValue.remap);
-
-  // 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>>([])
+  const [modalProps, openModal] = useModal();
 
   // 無効
-  const handleNullFlipValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleNullFlipValue = (e: React.MouseEvent<HTMLInputElement>) => {
     layersDispatch({ type: disableFlipType, payload: { layerKey: layerKey, button: name }});
   };
 
   // 常に連打
-  const handleFlipValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFlipValue = (e: React.MouseEvent<HTMLInputElement>) => {
     layersDispatch({ type: alwaysFlipType, payload: { layerKey: layerKey, button: name }});
   };
 
   // 自分自身への条件付き連打
-  const openIfPressedRadioboxModal = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const openIfPressedRadioboxModal = (e: React.MouseEvent<HTMLInputElement>) => {
     layersDispatch({ type: flipIfPressedSelfType, payload: { layerKey: layerKey, button: name }});
   };
 
@@ -48,12 +43,8 @@ const ButtonMenu = ({ name, layerKey, buttonValue, layersDispatch }: ButtonMenuP
   const setFlipIfPressedSomeButtonsWithPersistence = (bs: Array<Button>) => {
     layersDispatch({ type: flipIfPressedSomeButtonsType, payload: { layerKey: layerKey, button: name, targetButtons: bs }});
   }
-  const openIfPressedSomeButtonsModal = (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLInputElement>) => {
-    toggleModal();
-    setModalTitle("特定のキーを押したときだけ")
-    setModalPrefillButtons(flipIfPressedSomeButtons);
-    setModalCallbackOnSubmit(() => setFlipIfPressedSomeButtonsWithPersistence);
-    setModalCloseCallback(() => toggleModal);
+  const openIfPressedSomeButtonsModal = (e: React.MouseEvent<HTMLInputElement>) => {
+    openModal({ title: "特定のキーを押したときだけ", prefill: flipIfPressedSomeButtons, callbackOnSubmit: setFlipIfPressedSomeButtonsWithPersistence });
   }
 
   // 無視
@@ -62,11 +53,7 @@ const ButtonMenu = ({ name, layerKey, buttonValue, layersDispatch }: ButtonMenuP
     layersDispatch({ type: ignoreButtonsInFlipingType, payload: { layerKey: layerKey, button: name, targetButtons: bs }});
   }
   const handleIgnoreButton = (e: React.ChangeEvent<HTMLInputElement>) => {
-    toggleModal();
-    setModalTitle("連打中は特定のボタンの入力を無視する")
-    setModalPrefillButtons(buttonValue.flip?.force_neutral || [] as Array<Button>);
-    setModalCallbackOnSubmit(() => setIgnoreButtonsOnFlipingWithPersistence);
-    setModalCloseCallback(() => toggleModal);
+    openModal({ title: "連打中は特定のボタンの入力を無視する", prefill: buttonValue.flip?.force_neutral || [] as Array<Button>, callbackOnSubmit: setIgnoreButtonsOnFlipingWithPersistence });
   };
 
   // リマップ
@@ -74,21 +61,20 @@ const ButtonMenu = ({ name, layerKey, buttonValue, layersDispatch }: ButtonMenuP
     layersDispatch({ type: remapType, payload: { layerKey: layerKey, button: name, targetButtons: bs }});
   }
   const handleRemapButton = (e: React.ChangeEvent<HTMLInputElement>) => {
-    toggleModal();
-    setModalTitle("リマップ")
-    setModalPrefillButtons(buttonValue.remap?.to || []);
-    setModalCallbackOnSubmit(() => setRemapButtonsWithPersistence);
-    setModalCloseCallback(() => toggleModal);
+    openModal({ title: "リマップ", prefill: buttonValue.remap?.to || [], callbackOnSubmit: setRemapButtonsWithPersistence });
   };
 
   return(
     <>
+      <div css={css`position: relative;`}>
+        {<ButtonsModal {...modalProps as ModalProps} />}
+      </div>
       <fieldset><legend><strong>連打設定</strong></legend>
-        <label><input type="radio" onChange={handleNullFlipValue} checked={buttonState.isDisabledFlip()}/>無効</label><br />
-        <label><input type="radio" onChange={handleFlipValue} checked={buttonState.isAlwaysFlip()}/>常に連打する</label><br />
-        <label><input type="radio" onChange={openIfPressedRadioboxModal} checked={buttonState.isFlipIfPressedSelf()}/>このボタンを押している時だけ連打する({name})</label><br />
+        <label><input type="radio" onClick={handleNullFlipValue} checked={buttonState.isDisabledFlip()} readOnly={true} />無効</label><br />
+        <label><input type="radio" onClick={handleFlipValue} checked={buttonState.isAlwaysFlip()} readOnly={true} />常に連打する</label><br />
+        <label><input type="radio" onClick={openIfPressedRadioboxModal} checked={buttonState.isFlipIfPressedSelf()} readOnly={true} />このボタンを押している時だけ連打する({name})</label><br />
         <label>
-          <input type="radio" onChange={openIfPressedSomeButtonsModal} onClick={openIfPressedSomeButtonsModal} checked={buttonState.isFlipIfPressedSomeButtons()}/>
+          <input type="radio" onClick={openIfPressedSomeButtonsModal} checked={buttonState.isFlipIfPressedSomeButtons()} readOnly={true} />
           特定のキーを押したときだけ連打する{flipIfPressedSomeButtons.length > 0 && `(${flipIfPressedSomeButtons.join(", ")})`}
         </label>
 
@@ -106,9 +92,6 @@ const ButtonMenu = ({ name, layerKey, buttonValue, layersDispatch }: ButtonMenuP
             別のボタンに置き換える{buttonState.isRemap() && `(${buttonValue.remap?.to?.join(", ")})`}
         </label>
       </fieldset>
-      <div css={css`position: relative;`}>
-        {isOpenModal && <ButtonsModal callbackOnSubmit={modalCallbackOnSubmit} callbackOnClose={modalCloseCallback} title={modalTitle} prefill={modalPrefillButtons} positionOnShown={"relative"} />}
-      </div>
     </>
   )
 }

data/src/components/buttons_modal.tsx

@@ -4,19 +4,21 @@ import { jsx, css } from '@emotion/react'
 import React, { useState } from "react";
 import { Button, buttons } from "../types/button";
 
-type Props = {
+export type ModalProps = {
   callbackOnSubmit: any;
   callbackOnClose: any;
   prefill: Array<Button>;
   title: string;
-  positionOnShown: string;
+  visible: boolean;
 };
 
 type CheckedButtons = {
   [key in Button] : boolean
 }
 
-export const ButtonsModal = ({ callbackOnSubmit, callbackOnClose, title, prefill, positionOnShown }: Props) => {
+export const ButtonsModal = ({ callbackOnSubmit, callbackOnClose, title, prefill, visible }: ModalProps) => {
+  if(!visible) { return null };
+
   const [checkedButtonMap, setCheckedButtonMap] = useState(
     prefill.reduce((a, b) => { a[b] = true; return a },
       buttons.reduce((a, b) => { a[b] = false; return a }, {} as CheckedButtons)
@@ -45,28 +47,16 @@ export const ButtonsModal = ({ callbackOnSubmit, callbackOnClose, title, prefill
     font-weight: bold;
   `)
   const style = () => {
-    if(positionOnShown === "relative") {
-      return css(`
-        position: absolute;
-        align: left;
-        top: -400px;
-        width: 400px;
-        height: 400px;
-        border: solid;
-        background-color: white;
-      `);
-    } else {
-      return css(`
-        position: absolute;
-        align: left;
-        top: 0px;
-        left: 20px;
-        width: 400px;
-        height: 400px;
-        border: solid;
-        background-color: white;
-      `);
-    }
+    return css(`
+      position: absolute;
+      align: left;
+      top: 0px;
+      left: 20px;
+      width: 400px;
+      height: 400px;
+      border: solid;
+      background-color: white;
+    `);
   }
   const aStyle = css`
     background-color: #4669ff;

data/src/components/macro_settings.tsx

@@ -10,29 +10,23 @@ import { Plugin, PluginBody, AvailablePlugins, MacroNameMap } from "../types/plu
 import { ButtonsModal } from "./buttons_modal";
 import { applyMacroType } from "../reducers/layer_reducer";
 
+import { useModal, ModalSetting } from "../hooks/useModal";
+import { ModalProps } from "../components/buttons_modal";
+
 type MacroSettingProps = {
   layerKey: LayerKey;
   macro: StructMacro;
 };
 const MacroSetting = ({ macro, layerKey }: MacroSettingProps) => {
   const { layersDispatch } = useContext(ButtonsSettingContext);
-  // 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>>([])
+  const [modalProps, openModal] = useModal();
 
   const setButtonsForModal = (bs: Array<Button>) => {
     macro.if_pressed = bs;
     layersDispatch({ type: applyMacroType, payload: { layerKey: layerKey, macro: macro }});
   }
   const handleClick = (e: React.ChangeEvent<HTMLInputElement>) => {
-    toggleModal();
-    setModalTitle("発動キーの設定")
-    setModalPrefillButtons(macro.if_pressed);
-    setModalCallbackOnSubmit(() => setButtonsForModal);
-    setModalCloseCallback(() => toggleModal);
+    openModal({ title: "キープレフィックスの変更", prefill: macro.if_pressed, callbackOnSubmit: setButtonsForModal });
   }
   const isEnable = macro.if_pressed.length > 0;
 
@@ -47,7 +41,7 @@ const MacroSetting = ({ macro, layerKey }: MacroSettingProps) => {
         {isEnable && `${macro.if_pressed.join(", ")}で発動`}
       </li>
       <div css={css`position: relative;`}>
-        {isOpenModal && <ButtonsModal callbackOnSubmit={modalCallbackOnSubmit} callbackOnClose={modalCloseCallback} title={modalTitle} prefill={macro.if_pressed} positionOnShown={"relative"} />}
+        {<ButtonsModal {...modalProps as ModalProps} />}
       </div>
     </>
   )