fix: x icon (#227)

Co-authored-by: 杨国璇 <[email protected]>

Author: YangGuoXuan-0503

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package.json

@@ -1,7 +1,9 @@
 import LongTextModal from './longtext-modal';
 import BrowserTip from './browser-tip';
+import ModalHeader from './modal-header';
 
 export {
   LongTextModal,
   BrowserTip,
+  ModalHeader,
 };

src/components/index.js

@@ -0,0 +1,18 @@
+.sf-editor-close-icon {
+  border-radius: 3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  width: 28px;
+}
+
+.sf-editor-close-icon .iconfont {
+  font-weight: 700;
+  color: #666;
+}
+
+.sf-editor-close-icon:hover {
+  background-color: #efefef;
+  cursor: pointer;
+}

src/components/modal-header/index.css

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ModalHeader as DefaultModalHeader } from 'reactstrap';
+
+import './index.css';
+
+function ModalHeader({ toggle, children }) {
+  let close = null;
+  if (toggle) {
+    close = <span class="sf-editor-close-icon" onClick={toggle}><i class="iconfont icon-x" aria-hidden="true"></i></span>;
+  }
+  return (
+    <DefaultModalHeader close={close}>
+      {children}
+    </DefaultModalHeader>
+  );
+}
+
+export default ModalHeader;

src/components/modal-header/index.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Input } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
+import { ModalHeader } from '../../../../components';
 import { insertFormula, updateFormula } from '../helper';
 import { getAboveBlockNode } from '../../../core';
 import { TRANSLATE_NAMESPACE } from '../../../../constants';

src/extension/plugins/formula/menu/formula-modal.js

@@ -1,7 +1,8 @@
 import React, { useState, useRef, useMemo } from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, FormFeedback } from 'reactstrap';
+import { Button, Modal, ModalBody, ModalFooter, Form, FormGroup, Label, Input, FormFeedback } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { ModalHeader } from '../../../../components';
 import isUrl from 'is-url';
 import { insertImage } from '../helper';
 import { TRANSLATE_NAMESPACE } from '../../../../constants';

src/extension/plugins/image/menu/image-menu-dialog.js

@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { Button, Form, FormFeedback, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { Button, Form, FormFeedback, FormGroup, Input, Label, Modal, ModalBody, ModalFooter } from 'reactstrap';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { ModalHeader } from '../../../../components';
 import { insertLink, isLinkType, updateLink } from '../helper';
 import { TRANSLATE_NAMESPACE } from '../../../../constants';
 

src/extension/plugins/link/menu/link-modal.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalBody } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
+import { ModalHeader } from '../../../components';
 
 import './style.css';