plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
31 lines (30 loc) • 1.44 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { List, Button, Avatar } from 'antd';
import Icon from '../../icon/Icon';
class StyleList extends Component {
render() {
const { styles, onEdit, onDelete } = this.props;
return (React.createElement(List, { dataSource: styles, renderItem: (style, index) => {
const actions = [
React.createElement(Button, { key: 1, className: "rde-action-btn", shape: "circle", onClick: () => {
onEdit(style, 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" })),
];
const description = `fill: ${style.fill}, opacity: ${style.opacity}`;
return (React.createElement(List.Item, { actions: actions },
React.createElement(List.Item.Meta, { avatar: React.createElement(Avatar, null, index), title: style.title, description: description })));
} }));
}
}
StyleList.propTypes = {
styles: PropTypes.array,
onEdit: PropTypes.func,
onDelete: PropTypes.func,
};
export default StyleList;