chore: @material-ui/styles v4

README.md

@@ -18,6 +18,8 @@
 
 - webpack@4
 
+- typescript
+
 
 
 ### 知识库
@@ -78,7 +80,7 @@ module.exports = {
         <img width="150" height="150" src="https://github.com/Deturium.png?s=150">
         <br>
         <a href="https://github.com/Deturium">Deturium</a>
-        <p>前项目背锅人</p>
+        <p>项目背锅人</p>
         <p>小氢气</p>
       </td>
       <td align="center" valign="top">

package.json

@@ -22,19 +22,19 @@
   "dependencies": {
     "@aspnet/signalr": "^1.1.2",
     "@cc98/ubb-core": "1.1.0",
-    "@material-ui/core": "^4.0.0-alpha.2",
-    "@material-ui/icons": "^3.0.2",
-    "@material-ui/styles": "^3.0.0-alpha.10",
+    "@material-ui/core": "^4.0.0-alpha.3",
+    "@material-ui/icons": "^4.0.0-alpha.1",
+    "@material-ui/styles": "^4.0.0-alpha.3",
     "@reach/router": "^1.2.1",
     "aplayer": "^1.10.1",
     "copy-to-clipboard": "^3.0.8",
-    "dayjs": "^1.8.9",
+    "dayjs": "^1.8.10",
     "dplayer": "^1.25.0",
     "lodash-es": "^4.17.11",
     "react": "16.8.4",
-    "cropperjs": "^1.4.3",
+    "cropperjs": "^1.5.1",
     "react-dom": "16.8.4",
-    "react-spring": "^8.0.13",
+    "react-spring": "^8.0.14",
     "remark": "^10.0.1",
     "remark-react": "^5.0.1",
     "styled-components": "^4.1.3",
@@ -50,7 +50,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
     "@types/lodash-es": "^4.17.3",
-    "@types/node": "^11.10.5",
+    "@types/node": "^11.11.0",
     "@types/reach__router": "^1.2.3",
     "@types/react": "^16.8.7",
     "@types/react-cropper": "^0.10.4",

src/@types/@cc98/IBoard.d.ts

@@ -57,4 +57,9 @@ declare module '@cc98/api' {
      */
     canVote: boolean
   }
+
+  export type IBasicBoard = Pick<
+    IBoard,
+    'boardMasters' | 'description' | 'id' | 'name' | 'postCount' | 'todayCount' | 'topicCount'
+  >
 }

src/@types/@cc98/IBoardGroup.ts

@@ -19,6 +19,6 @@ declare module '@cc98/api' {
     /**
      * 子版面
      */
-    boards: IBoard[]
+    boards: IBasicBoard[]
   }
 }

src/App.tsx

@@ -3,12 +3,7 @@ import React from 'react'
 import useModel from '@/hooks/useModel'
 import settingModel from '@/models/setting'
 
-// FIXME: delete after migrate to v4
-// https://material-ui.com/css-in-js/basics/#migration-for-material-ui-core-users
-import { MuiThemeProvider } from '@material-ui/core/styles'
-import { ThemeProvider, install } from '@material-ui/styles'
-
-install()
+import { ThemeProvider } from '@material-ui/styles'
 
 import { getTheme } from '@/theme'
 
@@ -29,11 +24,9 @@ const Root = () => {
   const { theme, mode } = useModel(settingModel, ['theme', 'mode'])
 
   return (
-    <MuiThemeProvider theme={getTheme(theme, mode)}>
-      <ThemeProvider theme={getTheme(theme, mode)}>
-        <App />
-      </ThemeProvider>
-    </MuiThemeProvider>
+    <ThemeProvider theme={getTheme(theme, mode)}>
+      <App />
+    </ThemeProvider>
   )
 }
 

src/components/BackGround/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import styled from 'styled-components'
 import muiStyled from '@/muiStyled'
 
 import { Paper } from '@material-ui/core'
@@ -15,9 +14,10 @@ const Background = muiStyled(Paper).attrs({
 })
 
 // 该占位符高度和 TopBar 保持一致
-const Placeholder = styled.div`
-  height: 56px;
-`
+const Placeholder = muiStyled('div')(({ theme }) => ({
+  height: 56,
+  backgroundColor: theme.palette.primary.main,
+}))
 
 const BackGround: React.FC = ({ children }) => (
   <>

src/components/StickyBar/index.tsx

@@ -12,10 +12,15 @@ const Div = styled.div`
   padding: 0 16px;
 `
 
+const AppBarSticky = styled(AppBar)`
+  position: sticky;
+  position: -webkit-sticky;
+`
+
 const StickyBar: React.FC = ({ children }) => (
-  <AppBar elevation={0} position="sticky">
+  <AppBarSticky elevation={0} position="sticky">
     <Div>{children}</Div>
-  </AppBar>
+  </AppBarSticky>
 )
 
 export default StickyBar

src/muiStyled.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import { styled } from '@material-ui/styles'
 import { CSSProperties, WithStylesOptions } from '@material-ui/styles/withStyles'
+import { Theme } from '@material-ui/core/styles/createMuiTheme'
+export { Theme }
 
 export default function muiStyled<Props>(Component: React.ComponentType<Props> | React.ReactType) {
-  function styledCreator<Theme>(
-    styles: CSSProperties | ((theme: Theme) => CSSProperties),
+  function styledCreator(
+    styles: CSSProperties | ((theme: { theme: Theme }) => CSSProperties),
     options?: WithStylesOptions
   ) {
     // 强制保留原组件类型，对类型提示有帮助
@@ -17,7 +19,3 @@ export default function muiStyled<Props>(Component: React.ComponentType<Props> |
 
   return styledCreator
 }
-
-// const styledBy = (property, mapping) => props => mapping[props[property]]
-
-export { Theme } from '@material-ui/core/styles/createMuiTheme'

src/pages/BoardList/BoardGroup.tsx

@@ -2,11 +2,12 @@ import React, { useState, useMemo } from 'react'
 import styled from 'styled-components'
 import muiStyled from '@/muiStyled'
 
-import { Typography, Button, IconButton, Collapse } from '@material-ui/core'
+import { Typography, IconButton, Collapse } from '@material-ui/core'
 
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+import SwapVertIcon from '@material-ui/icons/SwapVert'
 
 import BoardItem from './BoardItem'
+import { NOT_EXPANDED_BOARDS } from './constants'
 
 import { IBoardGroup } from '@cc98/api'
 
@@ -18,19 +19,19 @@ const Title = muiStyled(Typography).attrs({
   variant: 'subtitle1',
   color: 'primary',
 })({
-  margin: '0 8px',
-  textAlign: 'right',
+  margin: '0 6px',
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
 })
 
 interface Props {
   boardsInfo: IBoardGroup
 }
 
-const notExpandedBoards = [2, 29, 33, 35, 37, 604]
-
 export default ({ boardsInfo }: Props) => {
   const hasCover = useMemo(() => {
-    return notExpandedBoards.indexOf(boardsInfo.id) === -1
+    return NOT_EXPANDED_BOARDS.indexOf(boardsInfo.id) === -1
   }, [boardsInfo.id])
   const [isExpanded, setIsExpanded] = useState(hasCover)
 
@@ -39,7 +40,7 @@ export default ({ boardsInfo }: Props) => {
       <Title onClick={() => setIsExpanded(!isExpanded)}>
         {boardsInfo.name}
         <IconButton color="primary" style={{ marginRight: -4 }}>
-          <ExpandMoreIcon
+          <SwapVertIcon
             style={{
               transform: isExpanded ? undefined : 'rotate(90deg)',
               transition: 'transform 0.5s',

src/pages/BoardList/BoardItem.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
-import { navigate } from '@/utils/history'
-import { Theme } from '@/muiStyled'
 
 import { makeStyles } from '@material-ui/styles'
+import { Theme } from '@/muiStyled'
 
 import { Typography, CardMedia } from '@material-ui/core'
 
-import { IBoard } from '@cc98/api'
+import { navigate } from '@/utils/history'
+
+import { IBasicBoard } from '@cc98/api'
 import { IMG_BASE_URL } from '@/config'
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -44,7 +45,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }))
 
 interface Props {
-  boardInfo: IBoard
+  boardInfo: IBasicBoard
   hasCover?: boolean
 }
 

src/pages/BoardList/constants.ts

@@ -0,0 +1,4 @@
+/**
+ * 默认不展开（没有 cover）
+ */
+export const NOT_EXPANDED_BOARDS = [2, 29, 33, 35, 37, 604]

src/pages/BoardList/index.tsx

@@ -8,23 +8,24 @@ import BoardItem from './BoardItem'
 
 import { getBoardsInfo } from '@/services/board'
 import { navigateHandler } from '@/services/utils/errorHandler'
-import { IBoard } from '@cc98/api'
 
 import { throttle } from 'lodash-es'
 
 import SearchInput from '@/components/SearchInput'
 import StickyBar from '@/components/StickyBar'
 
-const WrapperDiv = styled.div`
-  margin: 0 10px;
+import { IBasicBoard } from '@cc98/api'
+
+const SearchDiv = styled.div`
+  margin: 24px 10px;
 `
 
 const EmptyDiv = styled.div`
-  height: 100px;
+  height: 110px;
 `
 
 export default () => {
-  const [childBoards, setChildBoards] = useState<IBoard[]>([])
+  const [childBoards, setChildBoards] = useState<IBasicBoard[]>([])
   const [boardList] = useFetcher(getBoardsInfo, {
     success: boards => {
       setChildBoards(
@@ -36,7 +37,7 @@ export default () => {
 
   // 版面搜索
   const [searchTerm, setSearchTerm] = useState('')
-  const [filteredBoards, setFilteredBoards] = useState<IBoard[]>([])
+  const [filteredBoards, setFilteredBoards] = useState<IBasicBoard[]>([])
 
   const onSearchTermChange = throttle((value: string) => {
     setSearchTerm(value)
@@ -49,11 +50,11 @@ export default () => {
         <SearchInput placeholder="搜索版面" onChange={onSearchTermChange} />
       </StickyBar>
       {searchTerm ? (
-        <WrapperDiv>
+        <SearchDiv>
           {filteredBoards.map(board => (
             <BoardItem key={board.id} boardInfo={board} />
           ))}
-        </WrapperDiv>
+        </SearchDiv>
       ) : (
         <>
           {boardList &&

src/pages/Topic/Dialog/MoveTopic.tsx

@@ -8,7 +8,7 @@ import { Select, MenuItem, Input, InputLabel, FormControl } from '@material-ui/c
 
 import { getBoardsInfo } from '@/services/board'
 import { navigateHandler } from '@/services/utils/errorHandler'
-import { IBoard } from '@cc98/api'
+import { IBasicBoard } from '@cc98/api'
 
 const FormDiv = styled.div`
   display: flex;
@@ -28,7 +28,7 @@ interface Props {
 export default ({ handleBoardChange }: Props) => {
   const [basePoint, setBasePoint] = useState('')
   const [childPoint, setChildPoint] = useState('')
-  const [childBoards, setChildBoards] = useState<IBoard[]>([])
+  const [childBoards, setChildBoards] = useState<IBasicBoard[]>([])
   const [boardList] = useFetcher(getBoardsInfo, {
     success: boards => {
       setChildBoards(

src/pages/Topic/PostItem/Actions/IconActions.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
 import muiStyled from '@/muiStyled'
-import usePalette from '@/hooks/usePalette'
 
 import { IconButton, Typography } from '@material-ui/core'
 
@@ -48,17 +47,11 @@ const Count = muiStyled(Typography).attrs({
   marginRight: 12,
 })
 
-const DividerCol = () => {
-  const palette = usePalette()
-
-  const style: React.CSSProperties = {
-    margin: '0 4px',
-    height: '1em',
-    border: `solid thin ${palette.text.secondary}`,
-  }
-
-  return <span style={style} />
-}
+const DividerCol = muiStyled('span')(({ theme }) => ({
+  margin: '0 4px',
+  height: '1em',
+  border: `solid thin ${theme.palette.text.secondary}`,
+}))
 
 /**
  * 检查是否登录

src/services/board.ts

@@ -1,6 +1,13 @@
 import { GET, PUT, DELETE } from '@/utils/fetch'
 
-import { IBoardGroup, IBoard, ITagGroup, IBoardRecord, IBoardStopPostUser } from '@cc98/api'
+import {
+  IBoardGroup,
+  IBoard,
+  IBasicBoard,
+  ITagGroup,
+  IBoardRecord,
+  IBoardStopPostUser,
+} from '@cc98/api'
 
 import { cacheService } from './utils'
 
@@ -16,7 +23,7 @@ export const getBoardsInfo = cacheService(
 // Cache Map for Board
 let HAS_MAP = false
 const BOARD_MAP: {
-  [id: number]: IBoard
+  [id: number]: IBasicBoard
 } = {}
 
 /** 创建 BOARD_MAP */