MS Snippet 代码片段

日常开发中常用的react代码片段

支持的语言类型

• Typescript (.ts)
• Typescript React (.tsx)

基础的代码片段

IParams

export interface IParams {
  ${1: id}: string$2
}

IQuery

interface IQuery {
  page: number,
  ${1: limit}: number$0
}

React hook

useState

const [$1 set$1] = useState<$2>($3)

useEffect

useEffect(() => {
  $0
} [$1])

useDispatch

const dispatch = useDispatch()

useParams

const { $2 } = useParams<$1>()

useForm

const [form] = Form.useForm()

useQueryAndFetch

const { query, updateQueryAndFetch } = useQueryAndFetch<IQuery>(initQuery, $1)

React Native Components

react

import React from 'react'

interface IProps {}

const FileName:React.FC<IProps> = props => {
  return <div>$2</div>
}

export default FileName

re-connect

import React from 'react'
import { connect } from 'umi'
import { IConnectProps IConnectState } from '@/models/connect'

interface IProps extends IConnectProps {}

const FileName:React.FC<IProps> = props => {
  $0
  return <div>$2</div>
}
export default connect(({ loading $3 }: IConnectState) => ({
  ...$3
  loading: loading.effects[xxx]
}))(FileName)

connect

export default connect(({ $1 }: IConnectState) => ({
  ...$1
}))($2)

modal

import React, { useEffect } from 'react'
import { connect } from 'umi'
import { IConnectProps, IConnectState } from '@/models/connect'
import { Modal } from 'antd'

export interface IProps extends IConnectProps {
  visible: boolean
  setVisible: React.Dispatch<React.SetStateAction<boolean>>
  handleUpdate(): void
}

const FileName: React.FC<IProps> = props => {
  const { visible, setVisible, handleUpdate } = props

  const handleSubmit = () => {
    console.log('submit')
  }

  const handleClose = () => {
    setVisible(false)
  }

  useEffect(() => {
    console.log(visible)
  }, [visible])

  return (
    <Modal
      title={$2}
      visible={visible}
      onCancel={handleClose}
      onOk={handleSubmit}
    >
      <div>这是一个普通弹框</div>
    </Modal>
  )
}

export default connect(({ $3 }: IConnectState) => ({
  ...$3
}))(FileName)

modal_form

import React, { useEffect } from 'react'
import { connect, useDispatch } from 'umi'
import { IConnectProps, IConnectState } from '@/models/connect'
import { Form, Modal } from 'antd'
import { MSForm } from '@/components'
import { IFormList } from '@moresec/react-components/dist/form/MSForm'

export interface IProps extends IConnectProps {
  visible: boolean
  setVisible: React.Dispatch<React.SetStateAction<boolean>>
  handleUpdate(): void
}

const FileName: React.FC<IProps> = props => {
  const dispatch = useDispatch()
  const { visible, setVisible, handleUpdate } = props
  const [form] = Form.useForm()

  const handleSubmit = () => {
    form.validateFields().then(values => {
      console.log(values)
      dispatch({
        type: 'xx',
        payload: values,
        callback: () => {
          handleUpdate()
          handleClose()
        }
      })
    })
  }

  const handleClose = () => {
    setVisible(false)
  }

  useEffect(() => {
    console.log(visible)
    form.resetFields()
  }, [visible])

  const formList: IFormList[] = [
    {
      type: 'input',
      itemProps: {
        label: '输入框',
        name: 'value',
        rules: [{ required: true }]
      },
    },
  ],
,
  return (
    <Modal
      title={$2}
      visible={visible}
      onCancel={handleClose}
      onOk={handleSubmit}
    >
      <MSForm form={form} formList={formList} colon={false} />
    </Modal>
  )
}

export default connect(({ $3 }: IConnectState) => ({
  ...$3
}))(FileName)

结合项目一些常用的代码片段

arrow

($1) => {
  $2
}

arrow_c

const $1 = ($2) => {
  $0
}

searchParams

const searchParams = getSearchParams(window.location.search)
const { page = 1, limit = 10, ...resetParams } = searchParams

initQuery

const initQuery = {
  page: Number(page),
  limit: Number(limit),
  ...resetParams
}

dispatch

dispatch({
  type: $1,
  payload: {$2}
})

callback(.tsx)

callback: ($1) => {
  $2
}

if

if ($1) {
  $2
}

cr

// TODO: CODE REVIEW ${1: Author}: $2

computedNextPage

const { total, current, pageSize } = ${1:tableData}.pagination,
const nextPage = computedNextPage(current, pageSize, total),
updateQueryAndFetch({ page: nextPage }),
message.success('${2:删除成功}')$0

结合react-components组件库

MSTitle

• MSTitle

  <MSTitle title='$1'></MSTitle>
  

• MSTitle

  <MSTitle title='$1'>
    <Button type='primary' onClick={handleExport}>
      报表导出
    </Button>
  </MSTitle>
  

MSQuery

• MSQuery

  <MSQuery conditions={condition} />
  

• condition

  const condition: ICondition<QueryType>[] = [$1]
  

• condition_select

  {
    label: '$1',
    defaultValue: $2,
    options: $3,
    itemProps: {
      showSearch: false,
      width: 180
    },
    onChange: (value: $4) => updateQueryAndFetch({ $5 })
  }
  

MSSearch

• MSSearch

  <MSSearch
    placeholder='$1'
    value={query.$2}
    onSearch={(val: string) => updateQueryAndFetch({ $2: val })},
  />
  

MSTable

• MSTable

  <MSTable data={tableData} onChange={handleTableChange} columns={columns} />
  

• handleTableChange

  const handleTableChange = ({ current, pageSize }: TablePaginationConfig) => {
    updateQueryAndFetch({
      page: current,
      limit: pageSize
    })
  }
  

• columns

  const columns: ColumnProps<$1>[] = [
    $2
  ]
  

• column_item

  {
    title: '$1',
    dataIndex: '$2'
  }
  

• column_item_r

  {
    title: '$1',
    dataIndex: '$2',
    render: (_$3, record) => {
      return $4
    }
  }
  

MSAboutLayout

• MSAboutLayout

  <MSAboutLayout label='$1' value={$2} />$0
  

MSForm

• MSForm

  <MSForm form={form} formList={formList} colon={false} />
  

• formList

const formList: IFormList[] = [$0]

• formItem

{
  type: '$1',
  itemProps: {
    label: '$2',
    name: '$3',
    rules: [{ required: true }]
  },
  controlledProps: {$4}
}

用于(.ts)文件中的单独的代码片段

model

import { Effect, Reducer } from 'umi'
import api from '@/services'

export interface IFileNameState {}

export interface IFileNameModel {
  state: I$1State
  effects: {
    $2
  }
  reducers: {
    updateState: Reducer<I$1State>
  }
}

const {} = api

const $1: IFileNameModel = {
  state: {},
  effects: {},
  reducers: {
    updateState(state, { payload }) {
      return {
        ...state,
        ...payload
      }
    }
  }
}

export default FileName

*

*$1({ payload, callback }, { call, put }) {
  const response = yield call($2, payload)
  $3,
}

*put

yield put({
  type: 'updateState',
  payload: {$1}
})

response_t

const { count = 0, result = [] } = response

*put_table

yield put({
  type: 'updateState',
  payload: {
    $1: {
      list: result,
      pagination: {
        total: count,
        current: payload.page,
        pageSize: payload.limit
      }
    }
  }
})

callback

callback && callback()

tableData

tableData: {
  list: $1[]
  pagination: MS.pagination
}

tableData_i

tableData: {
  list: [],
  pagination: {
    total: 0,
    current: 1,
    pageSize: 10
  }
}

route_f

{
  path: '/$1',
  title: '$2',
  active: '$1',
  breadcrumb: '/$1',
  wrappers: ['@/wrappers/auth'],
  exclude: [],
  routes: [
    $3
  ]
}

route_s

{
  path: '/$1',
  title: '$2',
  active: '$1',
  breadcrumb: '/$1',
  wrappers: ['@/wrappers/auth'],
  exclude: [],
  routes: [
    $3
  ]
}

const_list

export const $1 = [
  { label: $2, value: $3 }
]

export const MAP_$1 = genMapObject($1)
export type T_MAP_$1 = keyof typeof MAP_$1