plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
30 lines (29 loc) • 1.4 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { List, Button, Avatar } from 'antd';
import Icon from '../../icon/Icon';
class DataSourceList extends Component {
render() {
const { dataSources, onEdit, onDelete } = this.props;
return (React.createElement(List, { dataSource: dataSources, renderItem: (dataSource, index) => {
const actions = [
React.createElement(Button, { key: 1, className: "rde-action-btn", shape: "circle", onClick: () => {
onEdit(dataSource, index);
} },
React.createElement(Icon, { name: "edit" })),
React.createElement(Button, { key: 2, className: "rde-action-btn", shape: "circle", onClick: () => {
onDelete(index);
} },
React.createElement(Icon, { name: "times" })),
];
return (React.createElement(List.Item, { actions: actions },
React.createElement(List.Item.Meta, { avatar: React.createElement(Avatar, null, index), title: dataSource.title, description: dataSource.type })));
} }));
}
}
DataSourceList.propTypes = {
dataSources: PropTypes.array,
onEdit: PropTypes.func,
onDelete: PropTypes.func,
};
export default DataSourceList;