|
@@ -1,10 +1,9 @@
|
|
|
import React, {
|
|
import React, {
|
|
|
- useState, useMemo, useCallback,
|
|
|
|
|
|
|
+ useState, useMemo, useCallback, type ReactNode, type CSSProperties,
|
|
|
} from 'react';
|
|
} from 'react';
|
|
|
|
|
|
|
|
import { pagePathUtils } from '@growi/core/dist/utils';
|
|
import { pagePathUtils } from '@growi/core/dist/utils';
|
|
|
import { useTranslation } from 'next-i18next';
|
|
import { useTranslation } from 'next-i18next';
|
|
|
-import PropTypes from 'prop-types';
|
|
|
|
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
|
import {
|
|
import {
|
|
|
Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
|
|
Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
|
|
@@ -15,9 +14,26 @@ import styles from './CopyDropdown.module.scss';
|
|
|
|
|
|
|
|
const { encodeSpaces } = pagePathUtils;
|
|
const { encodeSpaces } = pagePathUtils;
|
|
|
|
|
|
|
|
|
|
+interface DropdownItemContentsProps {
|
|
|
|
|
+ title: string;
|
|
|
|
|
+ contents: ReactNode;
|
|
|
|
|
+ className?: string;
|
|
|
|
|
+ style?: CSSProperties;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+interface CopyDropdownProps {
|
|
|
|
|
+ children: ReactNode;
|
|
|
|
|
+ dropdownToggleId: string;
|
|
|
|
|
+ pagePath: string;
|
|
|
|
|
+ pageId?: string;
|
|
|
|
|
+ dropdownToggleClassName?: string;
|
|
|
|
|
+ dropdownMenuContainer?: string | HTMLElement | React.RefObject<HTMLElement>;
|
|
|
|
|
+ isShareLinkMode?: boolean;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
/* eslint-disable react/prop-types */
|
|
/* eslint-disable react/prop-types */
|
|
|
-const DropdownItemContents = ({
|
|
|
|
|
- title, contents, className, style,
|
|
|
|
|
|
|
+const DropdownItemContents: React.FC<DropdownItemContentsProps> = ({
|
|
|
|
|
+ title, contents, className = '', style,
|
|
|
}) => (
|
|
}) => (
|
|
|
<>
|
|
<>
|
|
|
<div className="h6 mt-1 mb-2"><strong>{title}</strong></div>
|
|
<div className="h6 mt-1 mb-2"><strong>{title}</strong></div>
|
|
@@ -27,7 +43,7 @@ const DropdownItemContents = ({
|
|
|
/* eslint-enable react/prop-types */
|
|
/* eslint-enable react/prop-types */
|
|
|
|
|
|
|
|
|
|
|
|
|
-export const CopyDropdown = (props) => {
|
|
|
|
|
|
|
+export const CopyDropdown: React.FC<CopyDropdownProps> = (props) => {
|
|
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
|
const [tooltipOpen, setTooltipOpen] = useState(false);
|
|
const [tooltipOpen, setTooltipOpen] = useState(false);
|
|
|
const [isParamsAppended, setParamsAppended] = useState(!props.isShareLinkMode);
|
|
const [isParamsAppended, setParamsAppended] = useState(!props.isShareLinkMode);
|
|
@@ -105,7 +121,10 @@ export const CopyDropdown = (props) => {
|
|
|
*/
|
|
*/
|
|
|
const { t } = useTranslation('commons');
|
|
const { t } = useTranslation('commons');
|
|
|
const {
|
|
const {
|
|
|
- dropdownToggleId, pageId, dropdownToggleClassName, children, isShareLinkMode,
|
|
|
|
|
|
|
+ dropdownToggleId, pageId,
|
|
|
|
|
+ dropdownToggleClassName,
|
|
|
|
|
+ dropdownMenuContainer,
|
|
|
|
|
+ children, isShareLinkMode,
|
|
|
} = props;
|
|
} = props;
|
|
|
|
|
|
|
|
const customSwitchForParamsId = `customSwitchForParams_${dropdownToggleId}`;
|
|
const customSwitchForParamsId = `customSwitchForParams_${dropdownToggleId}`;
|
|
@@ -128,7 +147,7 @@ export const CopyDropdown = (props) => {
|
|
|
<DropdownMenu
|
|
<DropdownMenu
|
|
|
className={`${styles['copy-clipboard-dropdown-menu']}`}
|
|
className={`${styles['copy-clipboard-dropdown-menu']}`}
|
|
|
strategy="fixed"
|
|
strategy="fixed"
|
|
|
- container="body"
|
|
|
|
|
|
|
+ container={dropdownMenuContainer}
|
|
|
>
|
|
>
|
|
|
<div className="d-flex align-items-center justify-content-between">
|
|
<div className="d-flex align-items-center justify-content-between">
|
|
|
<DropdownItem header className="px-3">
|
|
<DropdownItem header className="px-3">
|
|
@@ -209,7 +228,7 @@ export const CopyDropdown = (props) => {
|
|
|
{ pageId && (
|
|
{ pageId && (
|
|
|
<CopyToClipboard text={markdownLink} onCopy={showToolTip}>
|
|
<CopyToClipboard text={markdownLink} onCopy={showToolTip}>
|
|
|
<DropdownItem className="px-3 text-wrap">
|
|
<DropdownItem className="px-3 text-wrap">
|
|
|
- <DropdownItemContents title={t('copy_to_clipboard.Markdown link')} contents={markdownLink} isContentsWrap />
|
|
|
|
|
|
|
+ <DropdownItemContents title={t('copy_to_clipboard.Markdown link')} contents={markdownLink} />
|
|
|
</DropdownItem>
|
|
</DropdownItem>
|
|
|
</CopyToClipboard>
|
|
</CopyToClipboard>
|
|
|
)}
|
|
)}
|
|
@@ -223,13 +242,3 @@ export const CopyDropdown = (props) => {
|
|
|
</>
|
|
</>
|
|
|
);
|
|
);
|
|
|
};
|
|
};
|
|
|
-
|
|
|
|
|
-CopyDropdown.propTypes = {
|
|
|
|
|
- children: PropTypes.node.isRequired,
|
|
|
|
|
- dropdownToggleId: PropTypes.string.isRequired,
|
|
|
|
|
- pagePath: PropTypes.string.isRequired,
|
|
|
|
|
-
|
|
|
|
|
- pageId: PropTypes.string,
|
|
|
|
|
- dropdownToggleClassName: PropTypes.string,
|
|
|
|
|
- isShareLinkMode: PropTypes.bool,
|
|
|
|
|
-};
|
|
|