index.tsx 1.07 KB
Newer Older
偏右's avatar
偏右 committed
1
import React, { PureComponent, createElement } from 'react';
陈帅's avatar
陈帅 committed
2

afc163's avatar
afc163 committed
3
import { Button } from 'antd';
4 5
import styles from './index.less';

愚道's avatar
愚道 committed
6 7 8
export interface EditableLink {
  title: string;
  href: string;
陈帅's avatar
陈帅 committed
9
  id?: string;
愚道's avatar
愚道 committed
10 11 12 13 14
}

interface EditableLinkGroupProps {
  onAdd: () => void;
  links: EditableLink[];
陈帅's avatar
陈帅 committed
15
  linkElement: React.ComponentClass<any>;
愚道's avatar
愚道 committed
16
}
17

愚道's avatar
愚道 committed
18
class EditableLinkGroup extends PureComponent<EditableLinkGroupProps> {
jim's avatar
jim committed
19 20 21 22 23
  static defaultProps = {
    links: [],
    onAdd: () => {},
    linkElement: 'a',
  };
陈帅's avatar
陈帅 committed
24

25
  render() {
偏右's avatar
偏右 committed
26
    const { links, linkElement, onAdd } = this.props;
27 28
    return (
      <div className={styles.linkGroup}>
jim's avatar
jim committed
29 30 31 32
        {links.map(link =>
          createElement(
            linkElement,
            {
偏右's avatar
偏右 committed
33 34 35
              key: `linkGroup-item-${link.id || link.title}`,
              to: link.href,
              href: link.href,
jim's avatar
jim committed
36
            },
陈帅's avatar
陈帅 committed
37 38
            link.title,
          ),
jim's avatar
jim committed
39
        )}
40
        {
afc163's avatar
afc163 committed
41 42
          <Button size="small" type="primary" ghost onClick={onAdd} icon="plus">
            添加
43 44 45 46 47 48 49 50
          </Button>
        }
      </div>
    );
  }
}

export default EditableLinkGroup;