dareway-rui/build/taglib/button/PicButton/view/PicButtonView.js

'use strict';

var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

Object.defineProperty(exports, '__esModule', {
    value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require('@babel/runtime/helpers/classCallCheck'));

var _createClass2 = _interopRequireDefault(require('@babel/runtime/helpers/createClass'));

var _possibleConstructorReturn2 = _interopRequireDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));

var _getPrototypeOf2 = _interopRequireDefault(require('@babel/runtime/helpers/getPrototypeOf'));

var _assertThisInitialized2 = _interopRequireDefault(require('@babel/runtime/helpers/assertThisInitialized'));

var _inherits2 = _interopRequireDefault(require('@babel/runtime/helpers/inherits'));

var _defineProperty2 = _interopRequireDefault(require('@babel/runtime/helpers/defineProperty'));

var _react = _interopRequireDefault(require('react'));

var _propTypes = _interopRequireDefault(require('prop-types'));

var _ruiIcon = _interopRequireDefault(require('rui-icon'));

require('./style.css');

var _FrameConstants = require('../../../../constants/FrameConstants');

var iconCustomStyle = {
    position: 'absolute'
};

var PicButtonView =
    /*#__PURE__*/
    (function(_React$Component) {
        (0, _inherits2.default)(PicButtonView, _React$Component);

        function PicButtonView(props) {
            var _this;

            (0, _classCallCheck2.default)(this, PicButtonView);
            _this = (0, _possibleConstructorReturn2.default)(
                this,
                (0, _getPrototypeOf2.default)(PicButtonView).call(this, props)
            );
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleClick', function() {
                var _this$props = _this.props,
                    disabled = _this$props.disabled,
                    onClick = _this$props.onClick;

                if (disabled) {
                    return;
                }

                if (onClick) {
                    onClick();
                }
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleMouseOver', function() {
                _this.setState({
                    hovered: true
                });
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleMouseLeave', function() {
                _this.setState({
                    hovered: false
                });
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleKeyDown', function(
                event
            ) {
                var key = event.which;

                if (key === _FrameConstants.KEY_CODE.ENTER || key === _FrameConstants.KEY_CODE.SPACE) {
                    _this.handleClick(event);
                }

                var title = _this.props.title;
                var onKeyDown = _this.props.onKeyDown;

                if (onKeyDown) {
                    onKeyDown(title, event);
                }
            });
            (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'handleFocus', function(event) {
                var value = _this.props.value;
                var onFocus = _this.props.onFocus;

                if (onFocus) {
                    onFocus(value, event);
                }
            });
            _this.iconId = _this.props.iconId;
            _this.state = {
                hovered: false
            };
            return _this;
        }

        (0, _createClass2.default)(PicButtonView, [
            {
                key: 'render',
                value: function render() {
                    // functionId 权限控制
                    var _this$props2 = this.props,
                        name = _this$props2.name,
                        title = _this$props2.title;
                    var iconId = this.iconId;
                    var iconColor = 'rgb(100, 100, 100)';

                    if (this.props.color) {
                        iconColor = this.props.color;
                    }

                    var style = {
                        fontSize: 20,
                        marginLeft: 10,
                        marginTop: 10,
                        marginRight: 10,
                        color: iconColor,
                        cursor: 'pointer',
                        width: 20,
                        outline: 'none'
                    };
                    var _this$props3 = this.props,
                        disabled = _this$props3.disabled,
                        hidden = _this$props3.hidden,
                        forwardedRef = _this$props3.forwardedRef;

                    if (hidden) {
                        style.display = 'none';
                    }

                    if (disabled) {
                        style.cursor = 'not-allowed';
                    }

                    var theme = 'outlined';

                    if (this.state.hovered) {
                        theme = 'filled';
                    }

                    return _react.default.createElement(
                        'div',
                        {
                            name: name,
                            style: style,
                            title: title,
                            onClick: this.handleClick,
                            onMouseOver: this.handleMouseOver,
                            onMouseLeave: this.handleMouseLeave,
                            onKeyDown: this.handleKeyDown,
                            onFocus: this.handleFocus
                        },
                        _react.default.createElement(_ruiIcon.default, {
                            type: iconId,
                            disabled: disabled,
                            title: title,
                            theme: theme
                        })
                    );
                }
            }
        ]);
        return PicButtonView;
    })(_react.default.Component);

exports.default = PicButtonView;
(0, _defineProperty2.default)(PicButtonView, 'propTypes', {
    name: _propTypes.default.string,
    onClick: _propTypes.default.func.isRequired,
    iconId: _propTypes.default.string.isRequired,
    title: _propTypes.default.string,
    hidden: _propTypes.default.bool,
    color: _propTypes.default.string
});

//@ sourceMappingURL=PicButtonView.js.map