mrcio-ui/lib/button/buttonField.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRedux = require('react-redux');

var _utils = require('../utils/utils');

var _index = require('../svg/index');

var _index2 = _interopRequireDefault(_index);

var _index3 = require('../theme/index');

var _animations = require('./animations');

var _utilsFn = require('./utilsFn');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ButtonBox = function (_Theme) {
    _inherits(ButtonBox, _Theme);

    function ButtonBox(props) {
        _classCallCheck(this, ButtonBox);

        var _this = _possibleConstructorReturn(this, (ButtonBox.__proto__ || Object.getPrototypeOf(ButtonBox)).call(this, props));

        _initialiseProps.call(_this);

        var _state = {
            flag: 'def',
            styles: {},
            btn_tpye: ""
        };
        _this.state = _utils._Object.merge(_this.state || {}, _state);
        return _this;
    }

    _createClass(ButtonBox, [{
        key: 'render',
        value: function render() {
            var b_cont = this.state.styles.buttonCont,
                b_cont_move = this.state.styles.buttonCont_move,
                b_back = this.state.styles.buttonBackground,
                b_back_move = this.state.styles.buttonBackground_move,
                b_cli_move = this.state.styles.buttonBackground_cli,
                bCont = this.state.flag == 'def' ? b_cont : (0, _utilsFn.extend)(b_cont, b_cont_move),
                bBack1 = b_back,
                bBack2 = b_back,
                fill = void 0;

            if (this.state.flag == 'def') {
                bBack1 = b_back;
                fill = this.state.styles.buttonCont.color;
            } else if (this.state.flag == 'move') {
                bBack1 = (0, _utilsFn.extend)(b_back, b_back_move);
                fill = this.state.styles.buttonCont_move.color;
            } else if (this.state.flag == 'cli') {
                bBack2 = (0, _utilsFn.extend)(b_back, b_cli_move);
                fill = this.state.styles.buttonCont_move.color;
            }
            return _react2.default.createElement(
                'div',
                { style: this.state.styles.buttonBox, onClick: this.handleFn.bind(this) },
                _react2.default.createElement('div', { style: bBack1 }),
                _react2.default.createElement('div', { style: bBack2 }),
                _react2.default.createElement(
                    'div',
                    { onMouseMove: this.onMouseMoveFn, onMouseLeave: this.onMouseLeaveFn, style: bCont },
                    this.props.svgName && _react2.default.createElement(_index2.default, { type: this.props.svgName, fill: fill, width: '1.25rem', height: '1.25rem',
                        style: { marginRight: "0.5rem" } }),
                    this.props.btnText || "button"
                )
            );
        }
    }]);

    return ButtonBox;
}(_index3.Theme);

var _initialiseProps = function _initialiseProps() {
    var _this2 = this;

    this.onMouseMoveFn = function () {
        _this2.setState({ flag: 'move' });
    };

    this.onMouseLeaveFn = function () {
        _this2.setState({ flag: 'def' });
    };

    this.handleFn = function () {
        _this2.setState({ flag: 'cli' });
        _this2.props.handleBtn && _this2.props.handleBtn();
    };

    this.renderButtonType = function (b_type, btnType) {
        var color = btnType[b_type],
            radius = _this2.props.radius == undefined ? true : _this2.props.radius,
            shadow = _this2.props.shadow == undefined ? true : _this2.props.shadow;
        return {
            buttonBox: {
                width: _this2.props.width ? _this2.props.width : "5.625rem",
                height: _this2.props.height ? _this2.props.height : "2.1875rem",
                background: color.botton_bgcolor,
                position: "relative",
                borderRadius: _this2.props.radius ? "0.1875rem" : "0",
                display: "inline-block"
            },
            buttonCont: {
                width: "100%",
                height: "100%",
                color: color.cont_color,
                position: "relative",
                zIndex: "2",
                display: "flex",
                borderRadius: radius ? "0.1875rem" : "0",
                justifyContent: "center",
                alignItems: "center",
                verticalAlign: "middle",
                boxShadow: shadow ? "0 0 0.08rem 0 #888" : "", //0 0.08rem 0.25rem 0 #aeaeae
                cursor: "pointer",
                transform: "perspective(1) translateZ(0)",
                transitionProperty: "all",
                transitionDuration: "0.3s"
            },
            buttonCont_move: {
                color: color.cont_move_color
                //boxShadow: shadow ? "0 0.08rem 0.4rem 0.08rem #ccc" : "",
            },
            buttonBackground: {
                width: "100%",
                height: "100%",
                position: "absolute",
                zIndex: "1",
                top: "0",
                bottom: "0",
                left: "0",
                right: "0",
                background: color.back_move_bgcolor,
                borderRadius: radius ? "0.3125rem" : "0",
                transitionProperty: "all",
                transitionDuration: "0.3s",
                transitionTimingFunction: "ease-out"
            },
            buttonBackground_move: {
                background: color.back_move_bgcolor
            },
            buttonBackground_cli: {
                background: color.back_cli_bgcolor
            }
        };
    };

    this.setStyle = function (props) {
        /*
         * btnSty 试列
         * {
         * cont_color:"",
         * cont_move_color:"",
         * botton_bgcolor:"",
         * back_move_bgcolor:"",
         * back_cli_bgcolor:"",
         * }
         * */

        var themeName = props.theme || "default";
        var _theme = _this2.state.theme[themeName];

        var btn_sty = props.btnSty,
            //手动设置按钮几种状态的颜色
        btn_tpye = props.btnType || "default",
            amn_type = props.amnType || "h_l_u",
            // h_l_u h_c_o_u
        styles = {},
            btnType = Object.assign({}, _theme.button.buttonType);

        var scenesType = _theme.button.scenesType;

        var btn_sty_newFn = function btn_sty_newFn(sty) {
            var btn_sty_new = {};
            btn_sty_new.cont_color = sty.cont_color || btnType.default.cont_color;
            btn_sty_new.cont_move_color = sty.cont_move_color || btnType.default.cont_move_color;
            btn_sty_new.botton_bgcolor = sty.botton_bgcolor || btnType.default.botton_bgcolor;
            btn_sty_new.back_move_bgcolor = sty.back_move_bgcolor || btnType.default.back_move_bgcolor;
            btn_sty_new.back_cli_bgcolor = sty.back_cli_bgcolor || btnType.default.back_cli_bgcolor;
            btnType.new = btn_sty_new;
        };

        if (props.scenesType) {
            btn_sty_newFn(scenesType[props.scenesType || "submit"]);
        }

        if (btn_sty) {
            btn_sty_newFn(btn_sty);
        }

        //只要设置 scenesType 场景类型 和 自定义样式  就用新的new  否则用默认的
        styles = _this2.renderButtonType(props.scenesType || btn_sty ? 'new' : btn_tpye, btnType);

        styles.buttonBackground = (0, _utilsFn.merge)(styles.buttonBackground, _animations.animations[amn_type].def);
        styles.buttonBackground_move = (0, _utilsFn.merge)(styles.buttonBackground_move, _animations.animations[amn_type].move);
        styles.buttonBackground_cli = (0, _utilsFn.merge)(styles.buttonBackground_cli, _animations.animations[amn_type].cli);

        _this2.setState({ styles: styles });
    };

    this.componentWillMount = function () {
        _this2.setStyle(_this2.props);
    };

    this.componentWillReceiveProps = function (newProps) {
        _this2.setStyle(newProps);
    };
};

var mapStateToProps = function mapStateToProps(state) {
    return {
        theme: state.theme
    };
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
    return {};
};

exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ButtonBox);
//# sourceMappingURL=buttonField.js.map