|
@@ -1,4 +1,6 @@
|
|
|
-import { useMemo, useState, useEffect } from 'react';
|
|
|
|
|
|
|
+import {
|
|
|
|
|
+ useMemo, useState, useEffect, useCallback,
|
|
|
|
|
+} from 'react';
|
|
|
import type { FC } from 'react';
|
|
import type { FC } from 'react';
|
|
|
|
|
|
|
|
import type { IPagePopulatedToShowRevision } from '@growi/core';
|
|
import type { IPagePopulatedToShowRevision } from '@growi/core';
|
|
@@ -61,24 +63,24 @@ export const PagePathHeader: FC<Props> = (props) => {
|
|
|
setEditedPagePath(inputText);
|
|
setEditedPagePath(inputText);
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- const handleEditButtonClick = () => {
|
|
|
|
|
|
|
+ const handleEditButtonClick = useCallback(() => {
|
|
|
if (isRenameInputShown) {
|
|
if (isRenameInputShown) {
|
|
|
pagePathRenameHandler(editedPagePath);
|
|
pagePathRenameHandler(editedPagePath);
|
|
|
}
|
|
}
|
|
|
else {
|
|
else {
|
|
|
setRenameInputShown(true);
|
|
setRenameInputShown(true);
|
|
|
}
|
|
}
|
|
|
- };
|
|
|
|
|
|
|
+ }, [editedPagePath, isRenameInputShown, pagePathRenameHandler]);
|
|
|
|
|
|
|
|
const buttonStyle = isButtonsShown ? '' : 'd-none';
|
|
const buttonStyle = isButtonsShown ? '' : 'd-none';
|
|
|
|
|
|
|
|
- const clickOutSideHandler = (e) => {
|
|
|
|
|
|
|
+ const clickOutSideHandler = useCallback((e) => {
|
|
|
const container = document.getElementById('page-path-header');
|
|
const container = document.getElementById('page-path-header');
|
|
|
|
|
|
|
|
if (container && !container.contains(e.target)) {
|
|
if (container && !container.contains(e.target)) {
|
|
|
setRenameInputShown(false);
|
|
setRenameInputShown(false);
|
|
|
}
|
|
}
|
|
|
- };
|
|
|
|
|
|
|
+ }, []);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
document.addEventListener('click', clickOutSideHandler);
|
|
document.addEventListener('click', clickOutSideHandler);
|