/**
 * @file GhostButton component
 * @author liangxiaojun(liangxiaojun@derbysoft.com)
 */

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import BaseButton from '../_BaseButton';
import TipProvider from '../TipProvider';
import Theme from '../Theme';

import Position from '../_statics/Position';

import Util from '../_vendors/Util';

class GhostButton extends Component {

    static Theme = Theme;
    static TipPosition = Position;

    constructor(props, ...restArgs) {
        super(props, ...restArgs);
    }

    /**
     * public
     */
    startRipple = (e, props) => {
        this.refs.baseButton && this.refs.baseButton.startRipple(e, props);
    };

    /**
     * public
     */
    endRipple = () => {
        this.refs.baseButton && this.refs.baseButton.endRipple();
    };

    /**
     * public
     */
    triggerRipple = (e, props) => {
        this.refs.baseButton && this.refs.baseButton.triggerRipple(e, props);
    };

    render() {

        const {children, className, ...restProps} = this.props,

            buttonClassName = classNames('ghost-button', {
                [className]: className
            });

        return (
            <BaseButton {...restProps}
                        ref="baseButton"
                        className={buttonClassName}>
                {children}
            </BaseButton>
        );

    }
}

GhostButton.propTypes = {

    /**
     * The CSS class name of the root element.
     */
    className: PropTypes.string,

    /**
     * Override the styles of the root element.
     */
    style: PropTypes.object,

    /**
     * The button theme.Can be primary,highlight,success,warning,error.
     */
    theme: PropTypes.oneOf(Util.enumerateValue(Theme)),

    /**
     * If true,the button will have rounded corners.
     */
    isRounded: PropTypes.bool,

    /**
     * If true,the button will be round.
     */
    isCircular: PropTypes.bool,

    /**
     * The title of the button.
     */
    title: PropTypes.string,

    /**
     * The text of the button.Type can be string or number.
     */
    value: PropTypes.any,

    /**
     * The type of button.Can be reset,submit or button.
     */
    type: PropTypes.string,

    /**
     * Disables the button if set to true.
     */
    disabled: PropTypes.bool,

    /**
     * If true,the button will be have loading effect.
     */
    isLoading: PropTypes.bool,

    /**
     * If true,the element's ripple effect will be disabled.
     */
    disableTouchRipple: PropTypes.bool,

    /**
     * Use this property to display an icon.It will display on the left.
     */
    iconCls: PropTypes.string,

    /**
     * Use this property to display an icon.It will display on the right.
     */
    rightIconCls: PropTypes.string,

    /**
     * If true,the ripple effect will be display centered.
     */
    rippleDisplayCenter: PropTypes.bool,

    tip: PropTypes.string,
    tipPosition: PropTypes.oneOf(Util.enumerateValue(TipProvider.Position)),

    /**
     * You can create a complicated renderer callback instead of value prop.
     */
    renderer: PropTypes.func,

    /**
     * Callback function fired when the button is touch-tapped.
     */
    onClick: PropTypes.func

};

GhostButton.defaultProps = {

    theme: Theme.DEFAULT,
    isRounded: false,
    isCircular: false,

    value: '',
    disabled: false,
    type: 'button',
    isLoading: false,
    disableTouchRipple: false,

    rippleDisplayCenter: false,

    tipPosition: TipProvider.Position.BOTTOM

};

export default GhostButton;
@@ -109,16 +109,27 @@
 omponent
+, createRef
 %7D from '
@@ -547,16 +547,17 @@
 Args) %7B%0A
+%0A
         
@@ -579,24 +579,97 @@
 .restArgs);%0A
+%0A        this.button = createRef();%0A        this.buttonInstance = null;%0A%0A
     %7D%0A%0A    /
@@ -744,47 +744,45 @@
 his.
-refs.baseButton && this.refs.baseButton
+buttonInstance && this.buttonInstance
 .sta
@@ -880,47 +880,45 @@
 his.
-refs.baseButton && this.refs.baseButton
+buttonInstance && this.buttonInstance
 .end
@@ -1018,47 +1018,45 @@
 his.
-refs.baseButton && this.refs.baseButton
+buttonInstance && this.buttonInstance
 .tri
@@ -1093,28 +1093,38 @@
     
-render
+componentDidMount
 () %7B%0A
-%0A
         
 cons
@@ -1123,177 +1123,141 @@
     
-const %7Bchildren, className, ...restProps%7D = this.props,%0A%0A            buttonClassName = classNames('ghost-button', %7B
+this.buttonInstance = this.button && this.button.current;
 %0A    
+%7D%0A%0A
     
-        %5BclassName%5D: className%0A            %7D)
+render() %7B%0A%0A        const %7BclassName, ...restProps%7D = this.props
 ;%0A%0A 
@@ -1343,20 +1343,21 @@
 ref=
-%22baseB
+%7Bthis.b
 utton
-%22
+%7D
 %0A   
@@ -1392,23 +1392,17 @@
 me=%7B
-buttonC
+c
 lassName
 %7D%3E%0A 
@@ -1401,62 +1401,107 @@
 Name
-%7D%3E%0A                %7Bchildren%7D%0A            %3C/BaseButton
+s('ghost-button', %7B%0A                            %5BclassName%5D: className%0A                        %7D)%7D/
 %3E%0A  
@@ -3696,8 +3696,9 @@
 tButton;
+%0A

update GhostButton