Let’s briefly introduce the three React components.

  • Image
  • Table
  • Form

React-Image

Source code for the Demo

A component for loading/previewing images

Image

  • Automatic image managementloadinganderrorStatus, and display different prompts.
  • throughIntersectionObserverTo achieve lazy image loading
  • Use the defaultPreviewTo preview the images
  • Can be achieved bygroupTo manage a preview list of images, samegroupWill appear in the preview list
import { Image } from '@zzwing/react-image'

<Image src='any.jpg' width='200px' height='200px' onClick={this.onClick}/>
Copy the code

Preview

Image browser, zoom in/move/toggle etc. Integrated into Image, preview can be turned off with preview={false}. It can also be called directly through the API

import { PreviewApi } from '@zzwing/react-image'
const list = ['1.jpg'.'2.jpg'.'3.jpg']
// use index
PreviewApi.preview(2, list)
// or use src
PreviewApi.preview('2.jpg', list)
Copy the code

React-Table

Source code for the Demo

Can fix the table head and sides of the table.

The form antd

Antd’s form does the trick, but it has a few disadvantages (personally)

  • Each column is required to be writtenwidthTo fix column width: by splittingtheadandtbodyTo fix the head, throughcolgroupTo finish fixing the column width
  • Table height is not adaptive (am I using it wrong?)
  • The other thing is thatantdTable function is too powerful, there are many functions I do not use, virtually increased code.

The solution

Specified form scrollTarget, rolling target, the default is the document scrollingElement.

  • Used when the header scrolls to the toptransformFixed, as belonging to the sametable“That will solve the problemtbodyandtheadMisalignment problems.
  • Fixed sides are throughtableRedundant implementations (as is ANTD), but only the parts that need to be fixed. throughabsolute + paddingBoth sides are fixed.
  • Finally, through the maximum height of the same row in different tables, to set the height of other tables, to achieve high synchronization
  • Since the table height exceeds the container height, the horizontal scroll bar will be ‘hidden ‘, so one is providedscrollerTo simulate a horizontal scroll bar, which means you can pull the scroll bar at any timeshift+ Scroll wheel to complete scrolling)

Insufficient points

  • Due to thetheadUsing thetransform“, which brings several problems
    • whentheadSet uptransformAfter that,borderIt will fail, so it’s usedbox-shadowTo simulate theborderOf course,
  • Listening to themousewheelTo set thetransformWhen scrolling and view updates there is a delay infirfoxandsafariThere will be a wobble in thechromeGood performance.
    • inchromeandfirfoxRespectively to joinwindow.addEventListener('scroll', console.log), mouse scroll once, you will findffIt triggers multiple callbacks, andchromeIt only triggers once
  • safariNext,theadAfter being fixedbox-shadowWill fail.

use

Similar to antd

import { Table } from '@zzwing/react-table'
const data = [{key1: '123'.keyn: '123'}]
const columns = [{
    title: 'column1'.fixed: 'left'.dataIndex: 'key1'
}, { / *... * /}, {title: 'column2'.fixed: 'right'.dataIndex: 'keyn'
}]

<Table dataSource={data} columns={columns} rowKey='key1'/>
Copy the code

React-Form-Wrapper

Source code for the Demo

A higher-order component that encapsulates onChange and value. It is similar to the ANTD Form component but contains only the most basic data binding. Options can also be used to define data reads and writes.

import FormWrapperHoc from '@zzwing/react-form-wrapper'

class Test extends React.PureComponent {
  render() {
    const { itemWrapper, getState } = this.props.formWrapper
    const Input = itemWrapper('valueKey', {/* options */}) (<input />)
    const value = getState().valueKey
    return (
      <>
        {Input}
        you can get value for {value}
      </>)}}Copy the code

Read and write implementation of chain key

const Input = itemWrapper('a.b.c.d') (<input />)
Copy the code

According to the general implementation, data is set/get by traversing each layer.

const _state = {}
const pathArr = path.split('. ')
let tmp = _state
pathArr.forEach((each, index) = > {
    if(index === pathArr.length - 1) {
        // do something
    }
    if(each in tmp) {
        tmp = tmp[each]
    } else {
        tmp[each] = {}
        tmp = tmp[each]
    }
})
Copy the code

A recent implementation change is to store the path data directly through a chain object

// a.b.c.d
const chain = {
    a: {b: chain['a.b']},
    'a.b': {c: chain['a.b.c']},
    'a.b.c': {d: chain['a.b.c.d']},
    'a.b.c.d': undefined
}
Copy the code
  • forgetOperation, then can be directly fromchain[path]Retrieve data from
  • forsetOperation can be modified directlychain['a.b.c'].d = 'str', last modificationchain['a.b.c.d'] = 'str
  • Because the same reference is being modified, sosetOperations will be synchronizedchain.aandchain.a.b

The last

Antd is a UI library with full functions, but I do not need most of its functions, which may add a lot of code. Therefore, I prefer to refer to the implementation of ANTD to develop components to meet my personal needs. The components developed by myself will be more clear and more convenient to use. It’s easy to extend but for something like the DatePicker, I think I’ll just use antD

I hope these components can help you.