import React, { Component } from "react";
import styles from "./index.css";
import { Scroll } from "../Animation/index";
class autoList extends Component {
    state = {
        showBool: true
    }
    componentWillReceiveProps(props) {
        if (props.data != this.props.data) {
            this.setState({ showBool: false });
            setTimeout(() => {
                this.setState({ showBool: true });
            }, 0);
        }
    }
    value = value => {
        const type = Object.prototype.toString.call(value);
        if (type == '[object String]' || type == '[object Number]') {
            return value;
        } else if (type == '[object Array]' || type == '[object Object]') {
            return (<div className={styles.array}>
                {!!value.length && value.map((x, i) => {
                    return <span key={i}>{x + ""}</span>
                })}
            </div>)
        }
        return '';
    }
    render() {
        const { data = [], row = 2, native = false } = this.props,
            { showBool } = this.state;
        let width = {
            width: `calc(${100 / row}% - ${10 * (row - 1)}px)`
        }
        const scrollBox = () => {
            return !!data.length && data.map((x, i) => {
                return (
                    <div className={styles.li} key={i} style={width}>
                        <h4>{showBool ? x.name : ""}</h4>
                        <div className={styles.radialLine}></div>
                        {this.value(x.value)}
                    </div>
                )
            });
        }
        return !native ? <Scroll {...this.props} className={`${styles.rectangleList} ${this.props.className}`}>
            {scrollBox()}
        </Scroll> : <div className={`${styles.rectangleList} ${this.props.className}`}>{scrollBox()}</div>;
    }
}
export default autoList;