doly
Version:
doly ui components
204 lines (157 loc) • 7.3 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _common = require("../_style/common");
var _createTag = _interopRequireDefault(require("../_utils/createTag"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _icon = _interopRequireDefault(require("../icon"));
function _templateObject4() {
var data = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n outline: 0 none;\n box-sizing: border-box;\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n white-space: nowrap;\n max-width: 100%;\n border: 0 none;\n padding: 0 15px;\n\n ", "\n\n &:active{\n opacity: 0.7;\n }\n\n &::before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 200%;\n height: 200%;\n border: 1px solid #ddd;\n border-radius: 10px;\n transform-origin: 0 0;\n transform: scale(.5);\n box-sizing: border-box;\n pointer-events: none;\n }\n\n ", "\n\n ", "\n"]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n height: 100%;\n justify-centent: center;\n align-items: center;\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n height: 100%;\n justify-centent: center;\n align-items: center;\n margin-right: 0.3em;\n vertical-align: top;\n\n img{\n display: inline-block;\n vertical-align: middle;\n\n ", "\n }\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = (0, _taggedTemplateLiteral2.default)(["\n opacity: .4;\n\n &:active{\n opacity: .4;\n }\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
// TODO ThemeProvider
var ButtonTag = (0, _createTag.default)({
tag: 'button',
propsToOmit: ['fill', 'round', 'active', 'size', 'inline', 'color']
});
var isWhiteColor = function isWhiteColor(color) {
return color === 'white' || color === '#fff' || color === '#ffffff';
};
var blackColor = '#000',
whiteColor = '#fff';
var disabledCss = (0, _styledComponents.css)(_templateObject());
var StyledIcon = _styledComponents.default.span(_templateObject2(), function (props) {
var size = '22px';
if (props.size === 'small') {
size = '15px';
}
return "\n width: ".concat(size, ";\n height: ").concat(size, ";\n ");
});
var StyledText = _styledComponents.default.span(_templateObject3());
var StyledButton = (0, _styledComponents.default)(ButtonTag)(_templateObject4(), function (props) {
// 处理按钮内联、尺寸、不填充、圆角、颜色等样式
var bgColor = props.color,
color = whiteColor,
height = '44px',
fontSize = '18px',
width = '100%',
display = 'block',
round = (typeof props.round === 'number' && props.round >= 0 ? props.round : 5) + 'px';
if (props.inline) {
display = 'inline-block';
width = 'auto';
}
if (props.size === 'small') {
fontSize = '14px';
height = '30px';
}
if (props.fill) {
if (isWhiteColor(props.color)) {
bgColor = whiteColor;
color = blackColor;
}
} else {
bgColor = 'transparent';
color = props.color;
}
return ['background-color:' + bgColor, 'color:' + color, 'height:' + height, 'line-height:' + height, 'font-size:' + fontSize, 'width:' + width, 'display:' + display, 'border-radius:' + round].join(';');
}, function (props) {
// 处理边框颜色和圆角
var _beforeStyle = '';
var round = (typeof props.round === 'number' && props.round >= 0 ? props.round : 5) * 2 + 'px';
_beforeStyle = '&::before{ border-color:' + props.color + '; border-radius: ' + round + ';}';
return _beforeStyle;
}, function (props) {
return props.disabled ? disabledCss : '';
});
var Button =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(Button, _React$Component);
function Button() {
(0, _classCallCheck2.default)(this, Button);
return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Button).apply(this, arguments));
}
(0, _createClass2.default)(Button, [{
key: "render",
value: function render() {
var _this$props = this.props,
children = _this$props.children,
icon = _this$props.icon,
rest = (0, _objectWithoutProperties2.default)(_this$props, ["children", "icon"]);
var iconEl = null;
if (typeof icon === 'string') {
iconEl = _react.default.createElement(_icon.default, {
"aria-hidden": "true",
type: icon,
size: rest.size === 'small' ? 'xxs' : 'md'
});
} else if (_react.default.isValidElement(icon)) {
iconEl = icon;
}
return _react.default.createElement(StyledButton, rest, _react.default.createElement(_common.GlobalStyle, null), iconEl ? _react.default.createElement(StyledIcon, {
size: rest.size
}, iconEl) : null, _react.default.createElement(StyledText, null, children));
}
}]);
return Button;
}(_react.default.Component);
exports.default = Button;
(0, _defineProperty2.default)(Button, "propTypes", {
size: _propTypes.default.oneOf(['small', 'large']),
color: _propTypes.default.string,
round: _propTypes.default.number,
fill: _propTypes.default.bool,
active: _propTypes.default.bool,
inline: _propTypes.default.bool,
disabled: _propTypes.default.bool,
as: _propTypes.default.string,
onClick: _propTypes.default.func
});
(0, _defineProperty2.default)(Button, "defaultProps", {
size: 'large',
color: 'white',
round: 5,
active: false,
fill: true,
inline: false,
onClick: function onClick() {}
});