@ant-design/icons#StarTwoTone TypeScript Examples

The following examples show how to use @ant-design/icons#StarTwoTone. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Home.tsx    From react-ts-antd with MIT License 4 votes vote down vote up 
constructor(props: any) {
        super(props);
        this.state = {
            total: 0,
            pageNo: 1,
            pageSize: 10,
            loading: false,
            textBtn: '提交',
            title: '添加任务',
            currentRowData: {
                id: -1,
                title: '',
                date: '',
                content: ''
            },
            visible: false,
            dataSource: [],
            status: null,  // 0：待办 1：完成 2：删除
            columns: [
                {
                    title: '序号',
                    key: 'id',
                    align: 'center',
                    render: (text: any, record: any, index: number) => {
                        let num = (this.state.pageNo - 1) * 10 + index + 1;
                        return num;
                    }
                },
                {
                    title: '任务名称',
                    dataIndex: 'title',
                    key: 'title',
                    render: (text: any, record: any, index: number) => {
                        const fav = this.state.dataSource[index].is_major;
                        const style = {
                            cursor: 'pointer',
                            fontSize: '16px'
                        }

                        const icon = fav === 0 ? <StarOutlined style={ style } /> : <StarTwoTone style={ style } twoToneColor="#f50" />;

                        return <div><span onClick={ () => this.toggleFav(record, index) }>{ icon }</span> { record.title }</div>;
                    }
                },
                {
                    title: '任务内容',
                    dataIndex: 'content',
                    key: 'content'
                },
                {
                    title: '截止日期',
                    dataIndex: 'gmt_expire',
                    key: 'gmt_expire',
                    render: (text: any, record: any) => formatDate(record.gmt_expire)
                },
                {
                    title: '任务状态',
                    dataIndex: 'status',
                    key: 'status',
                    width: 120,
                    render: (text: any, record: any) => {
                        const txt = record.status === 0 ? '待办' : record.status === 1 ? '完成' : '删除';
                        return txt;
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 300,
                    align: 'center',
                    render: (text: any, record: any, index: number) => (
                        <Space size="middle">
                            <Button style={{marginRight: '10px', display: record.status !== 2 ? '' : 'none'  }} onClick={ () => this.editTask(record, index) }>编辑</Button>
                            <Button type="primary" ghost style={{marginRight: '10px', display: record.status !== 2 ? '' : 'none' }} onClick={ () => this.completeTask(record) }>
                                { record.status === 0 ? '完成' : record.status === 1 ? '待办' : null }
                            </Button>
                            <Button danger style={{ display: record.status !== 2 ? '' : 'none'  }} onClick={ () => this.removeTask(record.id) }>删除</Button>
                        </Space>
                    )
                }
            ]
        }
    }