import * as React from 'react' ; import classNames from 'classnames' ; import Star from '../icon/svgs/Star' ; import StarO from '../icon/svgs/StarO' ; export interface RateProps { prefixCls ? : string ; className ? : string ; style ? : React . CSSProperties ; name ? : string ; value : number ; editing ? : boolean ; starCount : number ; onStarClick ? : ( index : number , value : any , name : any , e : any ) => void ; renderStarIcon ? : ( index : number , value : any , name : any , id : any ) => React . ReactNode ; renderStarIconHalf ? : ( index : number , value : any , name : any , id : any ) => React . ReactNode ; } interface State { value : number ; } export default class Rate extends React . PureComponent < RateProps , State > { static defaultProps = { prefixCls : 'Yep-rate' , style : { } , starCount : 5 , editing : true , value : 0 , } ; constructor ( props ) { super ( props ) ; this . onChange = this . onChange . bind ( this ) ; this . onStarClick = this . onStarClick . bind ( this ) ; this . renderStars = this . renderStars . bind ( this ) ; this . state = { value : props . value , } ; } componentWillReceiveProps ( nextProps ) { const { value } = nextProps ; if ( value != null && value !== this . state . value ) { this . setState ( { value } ) ; } } onChange ( inputValue ) { const { editing , value } = this . props ; if ( ! editing ) { return ; } if ( value != null ) { return ; } this . setState ( { value : inputValue } ) ; } onStarClick ( index , value , name ? , e ? ) { e . stopPropagation ( ) ; const { onStarClick , editing } = this . props ; if ( ! editing ) { return ; } onStarClick && onStarClick ( index , value , name , e ) ; } renderStars ( ) { const { name , starCount , prefixCls } = this . props ; const { value } = this . state ; const radioStyles = { display : 'none' , position : 'absolute' , marginLeft : - 9999 , } as React . CSSProperties ; const starNodes = [ ] ; for ( let i = starCount ; i > 0 ; i -- ) { const id = `${ name }_${ i }` ; const starNodeInput = ( < input key = { `input_${ id }` } style = { radioStyles } className = "dv-star-rating-input" type = "radio" name = { name } id = { id } value = { i } checked = { value === i } onChange = { ( ) => this . onChange ( i ) } />); const starNodeLabel = ( < label key = { `label_${ id }` } className = { classNames ( `${ prefixCls } - star `, ` $ { prefixCls } - $ { value >= i ? 'full' : 'empty' } - star `)} htmlFor={id} onClick={e => this.onStarClick(i, value, name, e)}>
          {this.renderIcon(i, value, name, id)}
        </label>);
            //@ts-ignore
            starNodes.push(starNodeInput);
            //@ts-ignore
            starNodes.push(starNodeLabel);
        }
        return starNodes.length ? starNodes : null;
    }
    renderIcon(index, value, name?, id?) {
        const { renderStarIcon, renderStarIconHalf } = this.props;
        if (typeof renderStarIconHalf === 'function' && Math.ceil(value) === index && value % 1 !== 0) {
            return renderStarIconHalf(index, value, name, id);
        }
        if (typeof renderStarIcon === 'function') {
            return renderStarIcon(index, value, name, id);
        }
        return value >= index ? <Star className="Yep-icon-xs"/> : <StarO className="Yep-icon-xs"/>;
    }
    render() {
        const { editing, prefixCls, className, style } = this.props;
        const cls = classNames(prefixCls, className, {
            [` $ { prefixCls } - non - editable `]: !editing,
        });
        return (<div style={style} className={cls}>
        {this.renderStars()}
      </div>);
    }
}
