From d1dc9e247d55797dd5d3787a472aed66ef66f030 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 2 May 2021 00:17:51 +0800
Subject: [PATCH 1/2] refactor(user-reaction): add esc hint && convert to ts

---
 src/components/Modal/{index.js => index.tsx} | 60 ++++++++------------
 src/components/Modal/styles/index.ts         | 10 +++-
 2 files changed, 33 insertions(+), 37 deletions(-)
 rename src/components/Modal/{index.js => index.tsx} (59%)

diff --git a/src/components/Modal/index.js b/src/components/Modal/index.tsx
similarity index 59%
rename from src/components/Modal/index.js
rename to src/components/Modal/index.tsx
index ebae85680..8b29dd864 100755
--- a/src/components/Modal/index.js
+++ b/src/components/Modal/index.tsx
@@ -4,8 +4,7 @@
  *
  */
 
-import React, { useEffect } from 'react'
-import T from 'prop-types'
+import React, { FC, ReactNode, useEffect } from 'react'
 import usePortal from 'react-useportal'
 
 import { ICON_CMD } from '@/config'
@@ -13,21 +12,33 @@ import { buildLog, toggleGlobalBlur } from '@/utils'
 
 import Belt from './Belt'
 
-import { Mask, Wrapper, CloseBtn, ChildrenWrapper } from './styles'
+import { Mask, Wrapper, CloseBtn, EscHint, ChildrenWrapper } from './styles'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:Modal:index')
 
-const Modal = ({
+type TProps = {
+  children: ReactNode
+  show?: boolean
+  showBelt?: boolean
+  width?: string
+  showCloseBtn?: boolean
+  mode?: 'default' | 'error'
+  background?: 'default' | 'preview'
+  offsetTop?: string
+  onClose?: () => void
+}
+
+const Modal: FC<TProps> = ({
   children,
-  show,
-  showBelt,
-  width,
-  showCloseBtn,
-  onClose,
-  mode,
-  background,
-  offsetTop,
+  show = false,
+  showBelt = false,
+  width = '600px',
+  showCloseBtn = false,
+  onClose = log,
+  mode = 'default',
+  background = 'default',
+  offsetTop = '13%',
 }) => {
   const { Portal } = usePortal()
 
@@ -51,6 +62,7 @@ const Modal = ({
                 show={showCloseBtn}
                 onClick={onClose}
               />
+              <EscHint>ESC</EscHint>
               <ChildrenWrapper onClick={(e) => e.stopPropagation()}>
                 {children}
               </ChildrenWrapper>
@@ -62,28 +74,4 @@ const Modal = ({
   )
 }
 
-Modal.propTypes = {
-  // https://www.npmjs.com/package/prop-types
-  children: T.node.isRequired,
-  show: T.bool,
-  showBelt: T.bool,
-  onClose: T.func,
-  width: T.string,
-  showCloseBtn: T.bool,
-  mode: T.oneOf(['default', 'error']),
-  background: T.oneOf(['default', 'preview']),
-  offsetTop: T.string,
-}
-
-Modal.defaultProps = {
-  show: false,
-  showBelt: false,
-  onClose: log,
-  width: '600px',
-  showCloseBtn: false,
-  mode: 'default',
-  background: 'default',
-  offsetTop: '13%',
-}
-
 export default React.memo(Modal)
diff --git a/src/components/Modal/styles/index.ts b/src/components/Modal/styles/index.ts
index 6133b35c3..677a30545 100755
--- a/src/components/Modal/styles/index.ts
+++ b/src/components/Modal/styles/index.ts
@@ -55,7 +55,7 @@ export const CloseBtn = styled(Img)<TCloseBtn>`
     mode === 'default' ? theme('font') : theme('baseColor.red')};
   position: absolute;
   top: 0;
-  right: -45px;
+  right: -48px;
   ${css.size(30)};
   display: ${({ show }) => (show ? 'block' : 'none')};
   z-index: ${css.zIndex.modalCloseBtn};
@@ -66,3 +66,11 @@ export const CloseBtn = styled(Img)<TCloseBtn>`
     cursor: pointer;
   }
 `
+export const EscHint = styled.div`
+  color: ${theme('font')};
+  opacity: 0.7;
+  position: absolute;
+  top: 38px;
+  right: -46px;
+  font-size: 13px;
+`

From bf76180d53a2fcf1b61e300494f35cd84dd7ce70 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Sun, 2 May 2021 00:24:08 +0800
Subject: [PATCH 2/2] chore(import): move ReactNode to top of file

---
 src/components/AlertBar/index.tsx                 | 4 ++--
 src/components/Buttons/ArrowButton.tsx            | 4 ++--
 src/components/Buttons/ArrowLink.tsx              | 4 ++--
 src/components/Buttons/Button.tsx                 | 4 ++--
 src/components/Checker/index.tsx                  | 4 ++--
 src/components/CustomScroller/index.tsx           | 4 ++--
 src/components/DigestSentence/index.tsx           | 6 +++---
 src/components/IconText/index.tsx                 | 4 ++--
 src/components/Img/index.tsx                      | 4 ++--
 src/components/MasonryCards/index.tsx             | 4 ++--
 src/components/Switcher/IconSwitcher.tsx          | 9 ++-------
 src/components/Tooltip/index.tsx                  | 6 +++---
 src/containers/layout/GlobalLayout/index.tsx      | 4 ++--
 src/containers/layout/GlobalLayout/logic.ts       | 6 +++---
 src/containers/tool/Drawer/Viewer/DesktopView.tsx | 4 ++--
 src/containers/tool/Drawer/Viewer/MobileView.tsx  | 4 ++--
 src/containers/unit/Comments/List/Header.tsx      | 4 ++--
 src/containers/unit/Header/DesktopView/index.tsx  | 4 ++--
 18 files changed, 39 insertions(+), 44 deletions(-)

diff --git a/src/components/AlertBar/index.tsx b/src/components/AlertBar/index.tsx
index 6d1a07bc2..fa12773aa 100755
--- a/src/components/AlertBar/index.tsx
+++ b/src/components/AlertBar/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import { buildLog } from '@/utils'
 
@@ -14,7 +14,7 @@ import { Wrapper } from './styles'
 const log = buildLog('c:AlertBar:index')
 
 type TProps = {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const AlertBar: FC<TProps> = ({ children }) => {
diff --git a/src/components/Buttons/ArrowButton.tsx b/src/components/Buttons/ArrowButton.tsx
index b81e71fe3..36b135f7e 100755
--- a/src/components/Buttons/ArrowButton.tsx
+++ b/src/components/Buttons/ArrowButton.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC, useRef, useState, useEffect } from 'react'
+import React, { FC, ReactNode, useRef, useState, useEffect } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { ICON } from '@/config'
@@ -17,7 +17,7 @@ import { Wrapper, Text, LeftIcon, RightIcon } from './styles/arrow_button'
 const log = buildLog('c:Buttons:ArrowButton')
 
 type TProps = {
-  children?: React.ReactNode
+  children?: ReactNode
   onClick?: () => void
   size?: TSIZE
   direction?: 'left' | 'right'
diff --git a/src/components/Buttons/ArrowLink.tsx b/src/components/Buttons/ArrowLink.tsx
index a82efbe9d..992f5a28d 100644
--- a/src/components/Buttons/ArrowLink.tsx
+++ b/src/components/Buttons/ArrowLink.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { ICON_CMD } from '@/config'
@@ -18,7 +18,7 @@ const log = buildLog('c:Buttons:ArrowLink')
 
 type TProps = {
   className?: string
-  children?: React.ReactNode
+  children?: ReactNode
   size?: TSIZE
   href: string
   target?: '_blank' | ''
diff --git a/src/components/Buttons/Button.tsx b/src/components/Buttons/Button.tsx
index 81c430d44..081d5d2ea 100644
--- a/src/components/Buttons/Button.tsx
+++ b/src/components/Buttons/Button.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react'
+import React, { FC, ReactNode, useEffect, useState } from 'react'
 
 import type { TSIZE_TSM } from '@/spec'
 import { SIZE } from '@/constant'
@@ -21,7 +21,7 @@ const clearTimerIfNeed = (timerId: number): void => {
 }
 
 type TProps = {
-  children?: React.ReactNode
+  children?: ReactNode
   className?: string
   ghost?: boolean
   type?: 'primary' | 'red' | 'ghost'
diff --git a/src/components/Checker/index.tsx b/src/components/Checker/index.tsx
index a86e8e6ca..ecc7d3501 100755
--- a/src/components/Checker/index.tsx
+++ b/src/components/Checker/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import type { TSIZE_SM } from '@/spec'
 import { ICON } from '@/config'
@@ -17,7 +17,7 @@ import { Wrapper, IconWrapper, Icon, ChildWrapper } from './styles'
 const log = buildLog('c:Checker:index')
 
 type TProps = {
-  children?: React.ReactNode | null
+  children?: ReactNode | null
   checked?: boolean
   hiddenMode?: boolean
   size?: TSIZE_SM
diff --git a/src/components/CustomScroller/index.tsx b/src/components/CustomScroller/index.tsx
index bc4c6f4cb..fcc724cbb 100755
--- a/src/components/CustomScroller/index.tsx
+++ b/src/components/CustomScroller/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import type { TSIZE_SML } from '@/spec'
 import type { TDirection, TScrollDirection } from './spec'
@@ -8,7 +8,7 @@ import VerticalScroller from './VerticalScroller'
 
 export type TProps = {
   direction: TDirection
-  children: React.ReactNode
+  children: ReactNode
   height?: string
   innerHeight?: string
   width?: string
diff --git a/src/components/DigestSentence/index.tsx b/src/components/DigestSentence/index.tsx
index 13775c712..f9f981a0d 100755
--- a/src/components/DigestSentence/index.tsx
+++ b/src/components/DigestSentence/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import { ICON } from '@/config'
 import { buildLog } from '@/utils'
@@ -26,12 +26,12 @@ const log = buildLog('c:DigestSentence:index')
 
 type TProps = {
   testid?: string
-  children: React.ReactNode
-  onPreview: () => void
+  children: ReactNode
   top?: number
   bottom?: number
   left?: number
   right?: number
+  onPreview: () => void
 }
 
 const DigestSentence: FC<TProps> = ({
diff --git a/src/components/IconText/index.tsx b/src/components/IconText/index.tsx
index 02ab3427f..0735e6edd 100755
--- a/src/components/IconText/index.tsx
+++ b/src/components/IconText/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { buildLog, nilOrEmpty } from '@/utils'
@@ -18,7 +18,7 @@ const log = buildLog('c:IconText:index')
 type TProps = {
   iconSrc: string
   round?: boolean
-  children: React.ReactNode
+  children: ReactNode
   size?: TSIZE
   margin?: string
 }
diff --git a/src/components/Img/index.tsx b/src/components/Img/index.tsx
index 3f64dd1ee..fb1778511 100755
--- a/src/components/Img/index.tsx
+++ b/src/components/Img/index.tsx
@@ -5,7 +5,7 @@
  * Renders an image, enforcing the usage of the alt="" tag
  */
 
-import React from 'react'
+import React, { ReactNode } from 'react'
 import { ReactSVG } from 'react-svg'
 
 import { buildLog } from '@/utils'
@@ -21,7 +21,7 @@ type IProps = {
   alt?: string
   className?: string
   loading?: boolean
-  fallback?: React.ReactNode | null
+  fallback?: ReactNode | null
   noLazy?: boolean
   scrollPosition?: any
   // see https://www.npmjs.com/package/react-lazy-load-image-component
diff --git a/src/components/MasonryCards/index.tsx b/src/components/MasonryCards/index.tsx
index f358a4a06..8c5adffde 100755
--- a/src/components/MasonryCards/index.tsx
+++ b/src/components/MasonryCards/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import Masonry from 'react-masonry-css'
 
 import { buildLog } from '@/utils'
@@ -17,7 +17,7 @@ const log = buildLog('c:MasonryCards:index')
 type TProps = {
   testid?: string
   column?: number
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const MasonryCards: FC<TProps> = ({
diff --git a/src/components/Switcher/IconSwitcher.tsx b/src/components/Switcher/IconSwitcher.tsx
index ba1afa630..e94546155 100644
--- a/src/components/Switcher/IconSwitcher.tsx
+++ b/src/components/Switcher/IconSwitcher.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import { findIndex, propEq } from 'ramda'
 
 import { buildLog, nilOrEmpty } from '@/utils'
@@ -25,16 +25,11 @@ const log = buildLog('c:IconSwitcher:index')
 
 type TItem = {
   iconSrc?: string
-  localIcon?: React.ReactNode
+  localIcon?: ReactNode
   key: string
   desc?: string
 }
 
-type TIconComp = {
-  item: TItem
-  activeKey: string
-}
-
 type TTabLabel = {
   item: TItem
   activeKey: string
diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index 752648d5c..8372a9404 100755
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC, useState, useRef } from 'react'
+import React, { FC, ReactNode, useState, useRef } from 'react'
 
 import type { TTooltipPlacement, TTooltipAnimation } from '@/spec'
 import { css, buildLog, isDescendant } from '@/utils'
@@ -26,8 +26,8 @@ import {
 const log = buildLog('c:Tooltip:index')
 
 type TProps = {
-  children: React.ReactNode
-  content: string | React.ReactNode
+  children: ReactNode
+  content: string | ReactNode
   animation?: TTooltipAnimation
   placement?: TTooltipPlacement
   // more options see: https://atomiks.github.io/tippyjs/all-options/
diff --git a/src/containers/layout/GlobalLayout/index.tsx b/src/containers/layout/GlobalLayout/index.tsx
index 715a1133b..bd9bb4df2 100755
--- a/src/containers/layout/GlobalLayout/index.tsx
+++ b/src/containers/layout/GlobalLayout/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React, { FC, useEffect } from 'react'
+import React, { FC, ReactNode, useEffect } from 'react'
 
 import type { Nullable, TSEO } from '@/spec'
 import { ANCHOR, SIZE } from '@/constant'
@@ -36,7 +36,7 @@ import {
 
 type TProps = {
   globalLayout?: TStore
-  children: React.ReactNode
+  children: ReactNode
   seoConfig: TSEO
   errorCode?: number // 400 | 500 | 404
   errorPath?: Nullable<string>
diff --git a/src/containers/layout/GlobalLayout/logic.ts b/src/containers/layout/GlobalLayout/logic.ts
index 08369f7e2..4541872a3 100755
--- a/src/containers/layout/GlobalLayout/logic.ts
+++ b/src/containers/layout/GlobalLayout/logic.ts
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { ReactNode, useEffect } from 'react'
 
 import type { TScrollDirection } from '@/spec'
 import { buildLog } from '@/utils'
@@ -54,9 +54,9 @@ export const logBuddha = (): void => {
 // cloning children with new props
 // see detail: https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children
 export const childrenWithProps = (
-  children: React.ReactNode,
+  children: ReactNode,
   props: Record<string, unknown>,
-): React.ReactNode => {
+): ReactNode => {
   return React.Children.map(children, (child) => {
     // checking isValidElement is the safe way and avoids a typescript error too
     if (React.isValidElement(child)) {
diff --git a/src/containers/tool/Drawer/Viewer/DesktopView.tsx b/src/containers/tool/Drawer/Viewer/DesktopView.tsx
index dcb5b77d4..d1987693f 100644
--- a/src/containers/tool/Drawer/Viewer/DesktopView.tsx
+++ b/src/containers/tool/Drawer/Viewer/DesktopView.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import type { TSwipeOption } from '../spec'
 import AddOn from '../AddOn'
@@ -13,7 +13,7 @@ type TProps = {
   rightOffset: string
   type: string
   imageUploading: boolean
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const DesktopView: FC<TProps> = ({
diff --git a/src/containers/tool/Drawer/Viewer/MobileView.tsx b/src/containers/tool/Drawer/Viewer/MobileView.tsx
index 808315134..c165e1ace 100644
--- a/src/containers/tool/Drawer/Viewer/MobileView.tsx
+++ b/src/containers/tool/Drawer/Viewer/MobileView.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react'
+import React, { FC, ReactNode, useEffect, useState } from 'react'
 import { useTheme } from 'styled-components'
 
 import type { TThemeMap } from '@/spec'
@@ -32,7 +32,7 @@ type TProps = {
   canBeClose: boolean
   showHeaderText: boolean
   disableContentDrag: boolean
-  children: React.ReactNode
+  children: ReactNode
 }
 
 const Viewer: FC<TProps> = ({
diff --git a/src/containers/unit/Comments/List/Header.tsx b/src/containers/unit/Comments/List/Header.tsx
index 945d221c1..faeb4a26a 100644
--- a/src/containers/unit/Comments/List/Header.tsx
+++ b/src/containers/unit/Comments/List/Header.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import { ICON } from '@/config'
 import Tooltip from '@/components/Tooltip'
@@ -24,7 +24,7 @@ type TProps = {
 }
 
 type TActionTooltip = {
-  children: React.ReactNode
+  children: ReactNode
   desc: string
 }
 
diff --git a/src/containers/unit/Header/DesktopView/index.tsx b/src/containers/unit/Header/DesktopView/index.tsx
index ff924bdb3..3a5e2b3af 100644
--- a/src/containers/unit/Header/DesktopView/index.tsx
+++ b/src/containers/unit/Header/DesktopView/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 
 import { METRIC } from '@/constant'
 
@@ -6,7 +6,7 @@ import CommunityView from './CommunityVIew'
 import ArticleView from './ArticleView'
 import ArticleEditorView from './ArticleEditorView'
 
-const renderHeader = (metric: string): React.ReactNode => {
+const renderHeader = (metric: string): ReactNode => {
   switch (metric) {
     case METRIC.ARTICLE: {
       return <ArticleView metric={metric} />