@evg-b/evg-ui
Version:
EVG-UI library inspired by Material Design.
246 lines (227 loc) • 7.85 kB
JavaScript
import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Elevation from '../styles/Elevation.js';
import '@babel/runtime/helpers/slicedToArray';
import withStyles from '../styles/withStyles.js';
import '@babel/runtime/helpers/construct';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import ButtonBase from '../ButtonBase/ButtonBase.js';
import Loader from '../Loader/Loader.js';
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var styles = {
base: {
borderRadius: 4,
'&:disabled': _objectSpread({}, Elevation(0))
},
buttonLabel: {
display: 'inline-flex',
alignItems: 'center',
fontFamily: 'Roboto, sans-serif',
letterSpacing: '.09em',
lineHeight: '1.7',
fontWeight: 500
},
// variant
text: {
color: function color(props) {
return props.color === 'default' ? props.Color.Contrast() : props.Color.Base();
}
},
outlined: {
border: function border(props) {
return "1px solid ".concat(props.color === 'default' ? props.Color.Contrast('hexa', 0.6) : props.Color.Base('hexa', 0.6));
},
color: function color(props) {
return props.color === 'default' ? props.Color.Contrast('hexa', 0.6) : props.Color.Base();
}
},
contained: function contained(props) {
return {
backgroundColor: props.Color.Base(),
color: props.Color.Contrast()
};
},
elevation: _objectSpread(_objectSpread({}, Elevation(2)), {}, {
'&:hover': _objectSpread({}, Elevation(4)),
'&:active': _objectSpread({}, Elevation(8))
}),
// variant
// size
small: {
height: '28px',
minWidth: '56px',
fontSize: '.815rem',
padding: '0 10px'
},
medium: {
height: '36px',
minWidth: '64px',
fontSize: '.875rem',
padding: '0 16px'
},
large: {
height: '42px',
minWidth: '72px',
fontSize: '1.2rem',
padding: '0 24px'
},
extra: {
height: '48px',
fontSize: '1.6rem',
padding: '0 24px',
width: '100%'
},
// size
uppercase: {
textTransform: 'uppercase'
},
round: {
borderRadius: '999px'
},
startIcon: {
display: 'inline-flex',
marginRight: '8px',
marginLeft: '-4px'
},
endIcon: {
display: 'inline-flex',
marginLeft: '8px',
marginRight: '-4px'
},
loaderFull: {
position: 'absolute'
}
};
var MapSizeLoader = {
'small': 18,
'medium': 24,
'large': 36,
'extra': 48
};
/**
* Кнопки позволяют пользователям выполнять действия и делать выбор одним нажатием.
* Является `<button>` или `<a>` элементом с ripple эффектом от Material Design.
*/
var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
var _classNames;
var classes = props.classes,
className = props.className,
children = props.children,
component = props.component,
color = props.color,
size = props.size,
uppercase = props.uppercase,
round = props.round,
variant = props.variant,
elevation = props.elevation,
loading = props.loading,
StartIcon = props.startIcon,
EndIcon = props.endIcon,
otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "component", "color", "size", "uppercase", "round", "variant", "elevation", "loading", "startIcon", "endIcon"]);
var Component = otherProps.href ? 'a' : component;
var startIcon = StartIcon && /*#__PURE__*/React.createElement("span", {
className: classes.startIcon
}, /*#__PURE__*/React.cloneElement(StartIcon, {
size: size
}));
var endIcon = EndIcon && /*#__PURE__*/React.createElement("span", {
className: classes.endIcon
}, /*#__PURE__*/React.cloneElement(EndIcon, {
size: size
}));
var buttonLabel = /*#__PURE__*/React.createElement("span", {
className: classes.buttonLabel,
style: loading && !StartIcon && !EndIcon ? {
visibility: 'hidden'
} : null
}, loading && StartIcon ? /*#__PURE__*/React.createElement(Loader, {
className: classes.startIcon,
size: MapSizeLoader[size],
depth: size === 'small' ? 2 : 3
}) : startIcon, children, endIcon);
return /*#__PURE__*/React.createElement(ButtonBase, _extends({
className: classNames(className, classes.base, classes[variant], classes[size], (_classNames = {}, _defineProperty(_classNames, classes.uppercase, uppercase), _defineProperty(_classNames, classes.round, round), _defineProperty(_classNames, classes.elevation, elevation && variant === 'contained'), _classNames)),
color: color,
contrast: variant === 'contained' || color === 'default' ? true : false,
ref: ref,
type: Component
}, otherProps), loading && !StartIcon && !EndIcon ? /*#__PURE__*/React.createElement(Loader, {
className: classes.loaderFull,
size: MapSizeLoader[size]
}) : null, buttonLabel);
});
Button.propTypes = {
/**
* Это контент между открывающим и закрывающим тегом компонента.
*/
children: PropTypes.node,
/**
* Объект содержит jss стили компонента.
*/
classes: PropTypes.object,
/**
* Чтобы указать CSS классы, используйте этот атрибут.
*/
className: PropTypes.string,
/**
* Корневой узел. Это HTML элемент или компонент.
*/
component: PropTypes.elementType,
/**
* Название цвета в разных форматах.
*/
color: PropTypes.string,
/**
* Размер компонента.
*/
size: PropTypes.oneOf(['small', 'medium', 'large', 'extra']),
/**
* Регистр текста.
*/
uppercase: PropTypes.bool,
/**
* Варианты кнопки.
*/
variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
/**
* Круглые края кнопки.
*/
round: PropTypes.bool,
/**
* Отображение уровня высоты(тени) у кнопки.
*/
elevation: PropTypes.bool,
/**
* Статус загрузки.
*/
loading: PropTypes.bool,
/**
* Контейнер элементов в начале.
*/
startIcon: PropTypes.node,
/**
* Контейнер элементов в конце.
*/
endIcon: PropTypes.node
};
Button.defaultProps = {
color: 'default',
component: 'button',
size: 'medium',
uppercase: true,
round: false,
// true - круглые края
variant: 'text',
elevation: true,
loading: false
};
Button.displayName = 'ButtonEVG';
var Button$1 = withStyles(styles)(Button);
export default Button$1;