某些UI组件

记录一些不仔细阅读文档踩过的坑，没什么参考性😶

Typography

copyable 是否可拷贝，为对象时可设置复制文本以回调函数；注意 text 判空啊 😖

{text && <Typography.Text copyable={{text}}>
  <span className='overflow_ellipsis_300' title={text}>
      {text}
  </span>
</Typography.Text>}

Select

<Select
 ...{props}
 onSearch={async(v) => {
    const {onSearchData} = this.props;
    const keyword = v ? v.trim() : '';
    if (keyword && onSearchData) {
      this.loading = true;
      this.data = [];
      try {
        const res = await onSearchData(keyword);
        this.data = res;
      } finally {
        this.loading = false;
      }
    }
  }}
 />

Tree （3.x.x）

renderTreeNodes = (data): ReactElement => {
    const {isAdmin} = this.props;
    return (data || []).map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} disableCheckbox={isAdmin}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode title={title} key={item.key} disableCheckbox={isAdmin} />;
    });
  }

不要用 disable，这样不会默认展开

Input

测试提了个bug，密码框在控制台能看到 value，看到 antd4.X 已经修复了，在不同的时机 removeAttribute，但组件库没法升级，就包了一层

import React, {Component} from 'react';
import {Input} from '@ant-design';

export default class Input extends Component {
  render() {
    const {onFocus, onBlur, onChange, ...props} = this.props;
    return (
      <Input
        ref={(r) => { this.input = r; }}
        {...props}
        onFocus={(e) => {
          this.clearPasswordValueAttribute();
          if (onFocus) {
            onFocus(e);
          }
        }}
        onBlur={(e) => {
          this.clearPasswordValueAttribute();
          if (onBlur) {
            onBlur(e);
          }
        }}
        onChange={(e) => {
          this.clearPasswordValueAttribute();
          if (onChange) {
            onChange(e);
          }
        }}
      />
    );
  }

  componentDidMount() {
    this.clearPasswordValueAttribute();
  }

  clearPasswordValueAttribute = () => {
    // https://github.com/ant-design/ant-design/issues/20541
    this.removePasswordTimeout = setTimeout(() => {
      if (
        this.input &&
        this.input.input.getAttribute('type') === 'password' &&
        this.input.input.hasAttribute('value')
      ) {
        this.input.input.removeAttribute('value');
      }
    });
  };
}

Table

table单元格既要复制又要省略号的问题

<Typography.Paragraph copyable ellipsis={{rows: 2}}>
  {ids}
</Typography.Paragraph>