@codementor/ui-kit
Version:
271 lines (218 loc) • 9.69 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SUPPORTED_SIZES = exports.SUPPORTED_TYPES = exports.SIZE_MAP = exports.OUTLITE_THEME_MAP = exports.TYPE_THEME_MAP = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _keys = require('babel-runtime/core-js/object/keys');
var _keys2 = _interopRequireDefault(_keys);
var _style = require('styled-jsx/style');
var _style2 = _interopRequireDefault(_style);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _tinycolor = require('tinycolor2');
var _tinycolor2 = _interopRequireDefault(_tinycolor);
var _colors = require('./theme/colors');
var _CircularProgress = require('./CircularProgress');
var _CircularProgress2 = _interopRequireDefault(_CircularProgress);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var TYPE_THEME_MAP = exports.TYPE_THEME_MAP = {
default: {
background: _colors.grey,
color: '#333'
},
primary: {
background: _colors.blue,
color: '#fff'
},
secondary: {
background: _colors.teal,
color: '#fff'
},
red: {
background: _colors.red,
color: '#fff'
},
twitter: {
background: '#00aced',
color: '#fff'
},
google: {
background: '#e65d4b',
color: '#fff'
},
linkedin: {
background: '#0275b6',
color: '#fff'
},
github: {
background: '#555555',
color: '#fff'
},
cmx: {
background: _colors.azure,
color: '#fff'
}
};
var OUTLITE_THEME_MAP = exports.OUTLITE_THEME_MAP = {
default: {
color: '#333',
background: '#fff',
borderColor: '#e6e6e6'
}
};
var SIZE_MAP = exports.SIZE_MAP = {
default: {
fontSize: '14px',
loadingSize: '16px',
padding: '8px 14px'
},
small: {
fontSize: '12px',
loadingSize: '14px',
padding: '4px 8px'
},
large: {
fontSize: '16px',
loadingSize: '20px',
padding: '16px 32px'
}
};
var SUPPORTED_TYPES = exports.SUPPORTED_TYPES = (0, _keys2.default)(TYPE_THEME_MAP);
var SUPPORTED_SIZES = exports.SUPPORTED_SIZES = (0, _keys2.default)(SIZE_MAP);
var Button = function (_PureComponent) {
(0, _inherits3.default)(Button, _PureComponent);
function Button() {
var _ref;
var _temp, _this, _ret;
(0, _classCallCheck3.default)(this, Button);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = Button.__proto__ || (0, _getPrototypeOf2.default)(Button)).call.apply(_ref, [this].concat(args))), _this), _this._onInnerContainerClick = function (e) {
if (_this.props.disabled) {
e.stopPropagation();
}
}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
}
(0, _createClass3.default)(Button, [{
key: 'render',
value: function render() {
var _props = this.props,
isLoading = _props.isLoading,
children = _props.children,
outline = _props.outline,
type = _props.type,
size = _props.size,
round = _props.round,
textWidth = _props.textWidth,
fullWidth = _props.fullWidth,
buttonProps = _props.buttonProps,
props = (0, _objectWithoutProperties3.default)(_props, ['isLoading', 'children', 'outline', 'type', 'size', 'round', 'textWidth', 'fullWidth', 'buttonProps']);
var theme = this._getTheme({ type: type, outline: outline });
var hoverTheme = this._hoverTheme({ outline: outline, theme: theme });
var _SIZE_MAP$size = SIZE_MAP[size],
fontSize = _SIZE_MAP$size.fontSize,
padding = _SIZE_MAP$size.padding,
loadingSize = _SIZE_MAP$size.loadingSize;
var borderColor = theme.borderColor || theme.background;
return _react2.default.createElement(
'button',
(0, _extends3.default)({}, props, buttonProps, {
className: _style2.default.dynamic([['483570690', [textWidth || 'auto', theme.color, round ? '0px' : '70px', fullWidth ? '100%' : 'auto', theme.background, borderColor, round ? '50%' : '3px', props.disabled ? 'default' : 'pointer', fontSize, padding, props.disabled ? 0.4 : 1, hoverTheme.background, hoverTheme.borderColor, hoverTheme.color]]]) + ' ' + (buttonProps.className != null && buttonProps.className || props.className != null && props.className || '')
}),
_react2.default.createElement(
'div',
{ onClick: this._onInnerContainerClick, className: _style2.default.dynamic([['483570690', [textWidth || 'auto', theme.color, round ? '0px' : '70px', fullWidth ? '100%' : 'auto', theme.background, borderColor, round ? '50%' : '3px', props.disabled ? 'default' : 'pointer', fontSize, padding, props.disabled ? 0.4 : 1, hoverTheme.background, hoverTheme.borderColor, hoverTheme.color]]]) + ' ' + 'btn-inner-container'
},
isLoading && _react2.default.createElement(_CircularProgress2.default, {
color: theme.color,
size: loadingSize }),
children
),
_react2.default.createElement(_style2.default, {
styleId: '483570690',
css: '.btn-inner-container.__jsx-style-dynamic-selector{width:' + (textWidth || 'auto') + ';text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}button.__jsx-style-dynamic-selector{color:' + theme.color + ';min-width:' + (round ? '0px' : '70px') + ';width:' + (fullWidth ? '100%' : 'auto') + ';background:' + theme.background + ';border:1px solid ' + borderColor + ';border-radius:' + (round ? '50%' : '3px') + ';outline:none;font-weight:600;cursor:' + (props.disabled ? 'default' : 'pointer') + ';font-size:' + fontSize + ';text-transform:uppercase;padding:' + padding + ';opacity:' + (props.disabled ? 0.4 : 1) + ';font-family:Open Sans,sans-serif;}button.__jsx-style-dynamic-selector:hover{background:' + hoverTheme.background + ';border-color:' + hoverTheme.borderColor + ';color:' + hoverTheme.color + ';}',
dynamic: [textWidth || 'auto', theme.color, round ? '0px' : '70px', fullWidth ? '100%' : 'auto', theme.background, borderColor, round ? '50%' : '3px', props.disabled ? 'default' : 'pointer', fontSize, padding, props.disabled ? 0.4 : 1, hoverTheme.background, hoverTheme.borderColor, hoverTheme.color]
})
);
}
}, {
key: '_hoverTheme',
value: function _hoverTheme(_ref2) {
var theme = _ref2.theme,
outline = _ref2.outline;
return outline ? {
background: theme.background,
color: this._darken(theme.color),
borderColor: this._darken(theme.borderColor)
} : {
color: theme.color,
background: this._darken(theme.background),
borderColor: this._darken(theme.background)
};
}
}, {
key: '_darken',
value: function _darken(color) {
return (0, _tinycolor2.default)(color).darken(3).toString();
}
}, {
key: '_getTheme',
value: function _getTheme(_ref3) {
var type = _ref3.type,
outline = _ref3.outline;
var defaultType = SUPPORTED_TYPES[0];
var validType = SUPPORTED_TYPES.includes(type) ? type : defaultType;
var baseTheme = TYPE_THEME_MAP[validType];
return outline ? this._outlineTheme(baseTheme) : baseTheme;
}
}, {
key: '_outlineTheme',
value: function _outlineTheme(theme) {
var type = this.props.type;
var lineColor = theme.background;
var outlineTheme = OUTLITE_THEME_MAP[type];
var fallback = (0, _extends3.default)({}, theme, {
color: lineColor,
borderColor: lineColor,
background: '#fff'
});
return outlineTheme ? (0, _extends3.default)({}, theme, outlineTheme) : fallback;
}
}]);
return Button;
}(_react.PureComponent);
Button.propTypes = {
children: _propTypes2.default.node,
type: _propTypes2.default.oneOf(SUPPORTED_TYPES),
outline: _propTypes2.default.bool.isRequired,
isLoading: _propTypes2.default.bool.isRequired,
round: _propTypes2.default.bool,
fullWidth: _propTypes2.default.bool,
textWidth: _propTypes2.default.string,
buttonProps: _propTypes2.default.object
};
Button.defaultProps = {
outline: false,
isLoading: false,
size: SUPPORTED_SIZES[0],
type: SUPPORTED_TYPES[0],
buttonProps: {}
};
exports.default = Button;