react-button-fy
Version:
173 lines (144 loc) • 7.3 kB
JavaScript
;
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 _animations = require('./animations');
var _utilsFn = require('./utilsFn');
var _utilsStyle = require('./utilsStyle');
var _utilsStyle2 = _interopRequireDefault(_utilsStyle);
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 defaultTheme = {
default: "#00BCD4", //亮色1
first: "#5ed0df", //亮色2
second: "#ededed", //灰色1
third: "#747474" //灰色2 大法师当
};
var ButtonBox = function (_Component) {
_inherits(ButtonBox, _Component);
function ButtonBox(props) {
_classCallCheck(this, ButtonBox);
var _this = _possibleConstructorReturn(this, (ButtonBox.__proto__ || Object.getPrototypeOf(ButtonBox)).call(this, props));
_initialiseProps.call(_this);
_this.state = {
flag: 'def',
styles: {},
btn_tpye: "",
btnTypeFn: _utilsStyle2.default
};
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,
bCont = this.state.flag == 'def' ? b_cont : (0, _utilsFn.extend)(b_cont, b_cont_move),
bBack = this.state.flag == 'def' ? b_back : (0, _utilsFn.extend)(b_back, b_back_move);
return _react2.default.createElement(
'div',
{ style: this.state.styles.buttonBox, onClick: this.props.handleBtn },
_react2.default.createElement('div', { style: bBack }),
_react2.default.createElement(
'div',
{ onMouseMove: this.onMouseMoveFn, onMouseLeave: this.onMouseLeaveFn, style: bCont },
this.props.btnText || "Imbutton"
)
);
}
}]);
return ButtonBox;
}(_react.Component);
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.onMouseMoveFn = function () {
_this2.setState({ flag: 'move' });
};
this.onMouseLeaveFn = function () {
_this2.setState({ flag: 'def' });
};
this.renderButtonType = function (b_type, btnType) {
var color = btnType[b_type];
return {
buttonBox: {
width: _this2.props.width ? _this2.props.width : "5.5rem",
height: _this2.props.height ? _this2.props.height : "2.25rem",
background: color.bgColorF,
position: "relative",
borderRadius: _this2.props.radius ? "0.1875rem" : "0",
display: "inline-block"
},
buttonCont: {
width: "100%",
height: "100%",
color: color.fontColorF,
position: "relative",
zIndex: "2",
display: "flex",
borderRadius: _this2.props.radius ? "0.1875rem" : "0",
justifyContent: "center",
alignItems: "center",
verticalAlign: "middle",
boxShadow: _this2.props.shadow ? "0 0.08rem 0.25rem 0 #aeaeae" : "",
cursor: "pointer",
transform: "perspective(1) translateZ(0)",
transitionProperty: "all",
transitionDuration: "0.3s"
},
buttonCont_move: {
color: color.fontColorS,
boxShadow: _this2.props.shadow ? "0 0.08rem 0.5rem 0.08rem #aeaeae" : ""
},
buttonBackground: {
width: "100%",
height: "100%",
position: "absolute",
zIndex: "1",
top: "0",
bottom: "0",
left: "0",
right: "0",
background: color.bgColorS,
borderRadius: _this2.props.radius ? "0.3125rem" : "0",
transitionProperty: "all",
transitionDuration: "0.3s",
transitionTimingFunction: "ease-out"
},
buttonBackground_move: {}
};
};
this.setStyle = function (props) {
var btn_sty = props.btnSty,
btn_tpye = props.btnType || "default",
amn_type = props.amnType || "h_c_o_u",
styles = {},
btnType = eval('(' + JSON.stringify(_this2.state.btnTypeFn.bt(_this2.props.themeObj || defaultTheme)) + ')');
if (btn_sty) {
var btn_sty_new = {};
btn_sty_new.fontColorF = btn_sty.cont_color || btnType.default.fontColorF;
btn_sty_new.bgColorF = btn_sty.botton_bgcolor || btnType.default.bgColorF;
btn_sty_new.fontColorS = btn_sty.cont_move_color || btnType.default.fontColorS;
btn_sty_new.bgColorS = btn_sty.back_move_bgcolor || btnType.default.bgColorS;
btnType.new = btn_sty_new;
}
styles = _this2.renderButtonType(btn_sty ? 'new' : btn_tpye, btnType);
styles.buttonBackground = (0, _utilsFn.merge)(styles.buttonBackground, _animations.animations[amn_type].def);
styles.buttonBackground_move = _animations.animations[amn_type].move;
_this2.setState({ styles: styles });
};
this.componentWillMount = function () {
_this2.setStyle(_this2.props);
};
this.componentWillReceiveProps = function (newProps) {
_this2.setStyle(newProps);
};
};
exports.default = ButtonBox;
//# sourceMappingURL=buttonFied.js.map