diff --git a/src/forge/Component/CopyTool.jsx b/src/forge/Component/CopyTool.jsx new file mode 100644 index 00000000..e659c077 --- /dev/null +++ b/src/forge/Component/CopyTool.jsx @@ -0,0 +1,44 @@ +import React, { useState, useCallback, memo } from 'react'; +import { Tooltip } from 'antd'; + +CopyTool.defaultProps = { + beforeText: '复制', //浮动过去显示的文字 + afterText: '复制成功', //点击后显示的文字 + className: '', //传给svg的class + inputId: 'copyText', //要复制的文本的ID +}; + + +function CopyTool({ beforeText, afterText, className,inputId }) { + const [title, setTitle] = useState(() => { + return beforeText; + }); + + // 复制链接 + const copyUrl = useCallback(() => { + let inputDom = document.getElementById(inputId); + if (!inputDom) { + console.error("您的CopyTool未设置正确的inputId"); + return; + } + inputDom.select(); + if (document.execCommand('copy')) { + document.execCommand('copy'); + } + setTitle(afterText); + inputDom.blur(); + }, []); + + return ( + { setTitle(beforeText) }} + > + + + ); +} + + +export default memo(CopyTool); \ No newline at end of file diff --git a/src/forge/Wiki/Index.jsx b/src/forge/Wiki/Index.jsx index ed5c4899..c27879b2 100644 --- a/src/forge/Wiki/Index.jsx +++ b/src/forge/Wiki/Index.jsx @@ -2,7 +2,7 @@ import React, { useEffect, useCallback, useState } from 'react'; import { Button, Dropdown, Icon, Input, Menu, Tooltip, Select, Upload, message, Spin } from 'antd'; import { getImageUrl, timeAgo } from 'educoder'; import cookie from 'react-cookies'; -// import Loading from "../../Loading"; +import CopyTool from '../Component/CopyTool'; import DelModal from './components/ModalFun'; import Welcome from './Welcome'; import { wikiPages, getWiki, deleteWiki } from './api'; @@ -14,15 +14,12 @@ const InputGroup = Input.Group; const { Option } = Select; export default (props) => { - const { match, current_user, history, showNotification, project, projectDetail } = props; - // const permission = projectDetail && projectDetail.permission !== "Reporter"; + const { match, history, showNotification, project, projectDetail } = props; const permission = projectDetail && projectDetail.permission && projectDetail.permission !== "Reporter"; let projectsId = match.params.projectsId; let owner = match.params.owner; - console.log(project); - const [fileArrInit, setFileArrInit] = useState(null); const [checkItem, setCheckItem] = useState({}); const [itemDetail, setItemDetail] = useState({}); @@ -85,7 +82,7 @@ export default (props) => { DelModal({ title: '删除页面', contentTitle: `您确定要删除“${item.name}”此页面吗?`, - content: '此操作将删除该页面,请进行确认以防文件的丢失。', + content: '此操作将删除该页面,请进行确认以防文件的丢失', onOk: () => { deleteWiki({ owner: owner, @@ -109,17 +106,6 @@ export default (props) => { window.location.href = `/users/${login}`; } - // 复制链接 - const copyUrl = useCallback(() => { - let wikiUrl = document.getElementById("wikiUrl"); - wikiUrl.select(); - if (document.execCommand('copy')) { - document.execCommand('copy'); - } - message.success('复制成功'); - wikiUrl.blur(); - }, []) - function addFile() { history.push(`/projects/${owner}/${projectsId}/wiki/add`); } @@ -231,6 +217,7 @@ export default (props) => { + @@ -246,8 +233,8 @@ export default (props) => { { fileArr.map(item => { - return
-
{ setCheckItem(item) }}> + return
+
{ setCheckItem(item) }}>
{item.name} @@ -266,9 +253,7 @@ export default (props) => { - - - + }
@@ -277,9 +262,9 @@ export default (props) => {

{checkItem.name}

- { goUser(current_user.login) }}> + { checkItem.commit && goUser(checkItem.commit.author.name) }}> {itemDetail.image_url && 头像} - {checkItem.commit ? checkItem.commit.author.name : ''} + {itemDetail.userName} 上次修改于{checkItem.commit && timeAgo(checkItem.commit.author.when)}
diff --git a/src/forge/Wiki/Index.scss b/src/forge/Wiki/Index.scss index c571da25..e40de299 100644 --- a/src/forge/Wiki/Index.scss +++ b/src/forge/Wiki/Index.scss @@ -199,7 +199,7 @@ body { word-break: break-all; } - .copy-svg { + .copy-wiki { display: inline-flex; align-items: center; justify-content: center; diff --git a/src/forge/Wiki/Preview.jsx b/src/forge/Wiki/Preview.jsx index 20645246..e7c6a623 100644 --- a/src/forge/Wiki/Preview.jsx +++ b/src/forge/Wiki/Preview.jsx @@ -1,5 +1,6 @@ import React, { useEffect, useCallback, useState } from 'react'; -import { Input, Button, Tooltip, Select, Dropdown, Icon, Menu, message } from 'antd'; +import { Input, Button, Select, Dropdown, Icon, Menu, message } from 'antd'; +import CopyTool from '../Component/CopyTool'; import { wikiPages, getWiki, } from './api'; import { httpUrl } from './fetch'; import './Index.scss'; @@ -59,16 +60,6 @@ export default (props) => { }); }, [project, checkItem]); - const copyUrl = useCallback(() => { - let wikiUrl = document.getElementById("wikiUrl"); - wikiUrl.select(); - if (document.execCommand('copy')) { - document.execCommand('copy'); - } - message.success('复制成功'); - wikiUrl.blur(); - }, []); - function goEdit() { history.push(`/projects/${owner}/${projectsId}/wiki/edit/${checkItem.name}`); } @@ -113,9 +104,7 @@ export default (props) => { - - - + } diff --git a/src/forge/Wiki/components/Login/index.jsx b/src/forge/Wiki/components/Login/index.jsx index 9574a9a5..abfa5295 100644 --- a/src/forge/Wiki/components/Login/index.jsx +++ b/src/forge/Wiki/components/Login/index.jsx @@ -1,10 +1,9 @@ import React, { useState } from 'react'; import * as ReactDOM from 'react-dom'; import LoginDialog from '../../../../modules/login/LoginDialog'; -import './index.scss'; -// 使用函数调用删除组件 -export default function DelModal(props) { +// 使用函数调用登录组件 +export default function Login(props) { const div = document.createElement('div'); document.body.appendChild(div); @@ -16,9 +15,6 @@ export default function DelModal(props) { } function render() { - /** - * Sync render blocks React event. Let's make this async. - */ setTimeout(() => { ReactDOM.render( diff --git a/src/forge/Wiki/components/Login/index.scss b/src/forge/Wiki/components/Login/index.scss deleted file mode 100644 index 13d16066..00000000 --- a/src/forge/Wiki/components/Login/index.scss +++ /dev/null @@ -1,56 +0,0 @@ -.delete-modal { - .ant-modal-header { - padding: 9px 24px; - background: #f8f8f8; - border-bottom: 1px solid #eee; - } - .ant-modal-title { - text-align: left; - } - .ant-modal-close { - top: 0px !important; - } - .ant-modal-close-x { - font-size: 24px; - } - .ant-modal-body { - text-align: center; - } - .delete-title { - display: flex; - justify-content: center; - align-items: center; - margin: 2rem 0 1rem !important; - font-size: 16px; - color: #333; - letter-spacing: 0; - line-height: 29px; - font-weight: 400; - } - .red-circle { - align-self: flex-start; - color: #ca0002; - font-size: 1.5rem !important; - } - .delete-descibe { - font-size: 14px; - color: #666; - line-height: 33px; - font-weight: 400; - } - .ant-modal-footer { - padding: 2rem 0; - text-align: center; - border: 0; - .ant-btn { - width: 6rem; - } - } - .foot-submit { - margin-left: 3rem; - color: #df0002; - &:hover { - border-color: #df0002; - } - } -} \ No newline at end of file diff --git a/src/forge/Wiki/components/ModalFun/index.jsx b/src/forge/Wiki/components/ModalFun/index.jsx index 661eca31..d9a62e8f 100644 --- a/src/forge/Wiki/components/ModalFun/index.jsx +++ b/src/forge/Wiki/components/ModalFun/index.jsx @@ -1,23 +1,33 @@ +/* eslint-disable react/jsx-no-duplicate-props */ import React, { useState } from 'react'; import * as ReactDOM from 'react-dom'; import { Modal, Button } from 'antd'; import './index.scss'; +InitModal.defaultProps = { + okText: '确认', //确定按钮的文字 + cancelText: '取消', //取消按钮的文字 + className: '', // + inputId: 'copyText', //要复制的文本的ID +}; + // 使用函数调用删除组件 export default function DelModal(props) { renderModal({ ...props, type: 'delete' }) } -export function confirmModal(props) { +// 使用函数调用选择模态框组件 +export function Confirm(props) { renderModal({ ...props, type: 'confirm' }) } function renderModal(props) { - const type = props.type; + const { type, afterClose } = props; const div = document.createElement('div'); document.body.appendChild(div); function destroy() { + afterClose && afterClose(); const unmountResult = ReactDOM.unmountComponentAtNode(div); if (unmountResult && div.parentNode) { div.parentNode.removeChild(div); @@ -26,18 +36,26 @@ function renderModal(props) { function modalType(type) { if (type === 'delete') { - return + return + + {props.contentTitle} + } + /> } else if (type === 'confirm') { - return + return } else { - return + return } } function render() { - /** - * Sync render blocks React event. Let's make this async. - */ setTimeout(() => { ReactDOM.render( modalType(type), @@ -48,16 +66,17 @@ function renderModal(props) { render(); } -// 真正的删除组件 -function DeleteModal({ +// 选择模态框组件 +function InitModal({ onCancel, onOk, title, contentTitle, content, - afterClose, okText, cancelText, + afterClose, + className, }) { const [visible, setVisible] = useState(true); @@ -78,71 +97,20 @@ function DeleteModal({ onCancel={onCancelModal} afterClose={afterClose} title={title} - className="myself-modal" + className={`myself-modal ${className}`} centered footer={[ - , , ]} >
-

- - {contentTitle}

-

{content}

-
- - ) -} - -// 选择组件 -function ConfirmModal({ - onCancel, - onOk, - title, - contentTitle, - content, - okText, - cancelText, - afterClose, -}) { - - const [visible, setVisible] = useState(true); - - function onCancelModal() { - setVisible(false); - onCancel && onCancel() - } - - function onSuccess() { - setVisible(false); - onOk && onOk(); - } - - return ( - - {cancelText||'取消'} - , - , - ]} - > -
- {contentTitle &&

{contentTitle}

} -

{content}

+ {contentTitle &&

{contentTitle}

} +

{content}

) diff --git a/src/forge/Wiki/components/ModalFun/index.scss b/src/forge/Wiki/components/ModalFun/index.scss index a598d2bf..24f7b021 100644 --- a/src/forge/Wiki/components/ModalFun/index.scss +++ b/src/forge/Wiki/components/ModalFun/index.scss @@ -16,7 +16,7 @@ .ant-modal-body { text-align: center; } - .delete-title { + .content-title { display: flex; justify-content: center; align-items: center; @@ -32,7 +32,7 @@ color: #ca0002; font-size: 1.5rem !important; } - .delete-descibe { + .content-descibe { font-size: 14px; color: #666; line-height: 33px; @@ -53,4 +53,11 @@ border-color: #df0002; } } + .ant-btn-default:hover, + .ant-btn-default:active, + .ant-btn-default:focus { + background: #f3f4f6; + color: #333; + border-color: #d0d0d0; + } } \ No newline at end of file