chore: model style && ts import adjust (#1087)

mydearxym · web-flow · commit ca42c83c7811 · 2021-05-02T00:43:02.000+08:00
* refactor(user-reaction): add esc hint &amp;&amp; convert to ts

* chore(import): move ReactNode to top of file
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/Modal/index.tsx b/src/components/Modal/index.tsx
@@ -4,30 +4,41 @@
  *
  */
 
-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'
 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
@@ -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;
+`
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/containers/unit/Comments/List/Header.tsx b/src/containers/unit/Comments/List/Header.tsx
diff --git a/src/containers/unit/Header/DesktopView/index.tsx b/src/containers/unit/Header/DesktopView/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`*`
`5`	`5`	`*/`
`6`	`6`
`7`		`-import React, { FC } from 'react'`
	`7`	`+import React, { FC, ReactNode } from 'react'`
`8`	`8`
`9`	`9`	`import { buildLog } from '@/utils'`
`10`	`10`
`@@ -14,7 +14,7 @@ import { Wrapper } from './styles'`
`14`	`14`	`const log = buildLog('c:AlertBar:index')`
`15`	`15`
`16`	`16`	`type TProps = {`
`17`		`- children: React.ReactNode`
	`17`	`+ children: ReactNode`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`const AlertBar: FC<TProps> = ({ children }) => {`