cldV2react/src/pages/Customer/Test/index.jsx

import React, { useEffect, useRef, useMemo, useState, useCallback } from 'react'
import { Button, Card, Cascader, Dropdown, Input, Menu, Select, Pagination } from 'antd'
import EditableForm from '@/components/EditableForm'
import { useModal } from '@/components/Modal'
import { connect } from 'dva'
import SearchModal from '@/pages/Customer/Contact/components/CustomerModal'
import ChangeCompanyInput from '../Contact/components/ChangeCompany'
import PersonLabel from '../Company/components/PersonLabel'
import { TagTypeEnum } from '../Company/components/PersonLabel'
import { TagDataTypeEnum } from '../Company/components/PersonLabel'

const { Option } = Select
const Test = ({ natures, dispatch }) => {
  const { toggleModal, setModalProps } = useModal()

  const [state, setState] = useState(null)
  const iRef = useRef(null)
  const options = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake'
            }
          ]
        }
      ]
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men'
            }
          ]
        }
      ]
    }
  ]
  const record = {
    address: '珠海',
    clientName: '啊实打实大',
    age: 16
  }

  const columns = [
    {
      dataIndex: 'address',
      label: '珠海',
      span: 12
    },
    {
      dataIndex: 'clientName',
      label: '名字',
      span: 12
    },
    {
      dataIndex: 'age',
      label: '年龄',
      span: 24
    }
  ]
  const onClick = () => {
    setModalProps({
      modalRender: node => <SearchModal node={node} />,
      onCancel: () => toggleModal()
    })
    toggleModal()
  }

  useEffect(() => {
    const initNatures = () => {
      dispatch({
        type: 'customer/fetch'
      })
    }
    !natures.length && initNatures()
  }, [])

  // const a = useMemo(() => {
  //   const e = null
  //   const b = 2
  //   const c = e ?? b
  //   console.log('c', c)
  // }, [state])
  // const customOptions = useCallback(originNode => {
  //   return originNode
  // }, [])

  const menu = (
    <Menu>
      <Menu.Item key="1">1st menu item</Menu.Item>
      <Menu.Item key="2">2nd menu item</Menu.Item>
      <Menu.Item key="3">3rd menu item</Menu.Item>
    </Menu>
  )

  // const measuredRef = useCallback(node => {
  //   if (node) {
  //     console.log(node.getBoundingClientRect)
  //   }
  // })
  return (
    <Card bordered={false}>
      {/* <EditableForm dataSource={record} columns={columns} /> */}
      {/* <Button onClick={onClick}>click</Button> */}
      {/* <Cascader ref={iRef} options={options} /> */}
      {/* <ChangeCompanyInput /> */}
      <div className="zh-width-100P">
        <Dropdown overlay={menu} trigger={['click']}>
          <Input />
        </Dropdown>
      </div>
      <Button
        onClick={() => {
          setState('123')
        }}>
        AAA
      </Button>

      {/* <Select
        ref={iRef}
        onBlur={() => console.log(22)}
        // onChange={() => console.log(iRef)}
        options={options}
        style={{ width: '200px' }}
      /> */}
      <PersonLabel tagType={TagTypeEnum.PERSONTAG} tagColumn={TagDataTypeEnum.CONTACT}>
        <Button>2222</Button>
      </PersonLabel>
      <Pagination
        total={500}
        onChange={(page, size) => {
          console.log(page, size)
        }}
      />
    </Card>
  )
}

export default connect(({ customer }) => ({
  natures: customer.natures
}))(Test)