atnd table sort 多个值

/***
使用说明：
父组件调用：<Sort title="任务名" sort={true|false} onChange={(value) => {this.changeSorter('schedule_duration', value)}}></Sort>
***/


import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import classNames from "classnames";
import React, { Component } from "react";

const states = [null, true, false]
class Sort extends Component{

    constructor (props) {
        super(props);
        this.state = {
            pointer: 0
        }
    }

    componentDidMount () {
        if (this.props.sort === true || this.props.sort === false) {
            this.setState({
                pointer: this.props.sort === true ? 1 : 2
            })
        }
    }

    clickSorter = () => {
        let pointer = this.state.pointer + 1
        if (pointer === 3) {
            pointer = 0
        }
        this.setState({
            pointer: pointer
        })
        this.props.onChange(states[pointer])
    }

    render () {
        return (
            <div className="flex flex-v-center flex-h-center">
                <span className="ant-table-column-title">{this.props.title}</span>
                <a className="ant-table-column-sorter" onClick={this.clickSorter}>
                    <div className="ant-table-column-sorter-inner ant-table-column-sorter-inner-full">
                        <CaretUpOutlined
                            className={classNames({
                                "anticon": true,
                                "anticon-caret-up": true,
                                "ant-table-column-sorter-up": true,
                                "on": states[this.state.pointer] === true ,

                            })} />
                        <CaretDownOutlined
                            className={classNames({
                                "anticon": true,
                                "anticon-caret-down": true,
                                "ant-table-column-sorter-down": true,
                                "on": states[this.state.pointer] === false,
                            })} />
                    </div>
                </a>
            </div>
        );
    }
}

export default Sort;