@6thquake/react-material
Version:
React components that implement Google's Material Design.
346 lines (312 loc) • 9.7 kB
JavaScript
"use strict";
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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _react = _interopRequireWildcard(require("react"));
var _styles = require("../styles");
var _FormControlLabel = _interopRequireDefault(require("../FormControlLabel"));
var _Button = _interopRequireDefault(require("../Button"));
var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var styles = function styles(theme) {
return {
root: {
background: '#fff',
borderRadius: 0,
// border: '1px solid rgba(0, 0, 0, 0.23)',
overflow: 'hidden'
},
label: {
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
borderRadius: 'inherit'
},
sizeSmall: {
padding: "".concat(theme.spacing(1) - 1, "px ").concat(theme.spacing(1), "px"),
fontSize: theme.typography.pxToRem(13)
},
sizeLarge: {
padding: "".concat(theme.spacing(1), "px ").concat(theme.spacing(3), "px"),
fontSize: theme.typography.pxToRem(15)
},
vertical: {
width: theme.spacing(11),
'& span': {
'& label': {
'& span:last-child': {
borderBottom: 0
}
}
},
'&:first-child': {
borderTopLeftRadius: 4,
borderTopRightRadius: 4
},
'&:last-child': {
borderBottomLeftRadius: 4,
borderBottomRightRadius: 4,
'& span': {
'& label': {
'& span:last-child': {
borderBottom: '1px solid rgba(0, 0, 0, 0.23)'
}
}
}
}
},
verticalMediumCircular: {
'&:first-child': {
borderTopLeftRadius: theme.spacing(5.5),
borderTopRightRadius: theme.spacing(5.5)
},
'&:last-child': {
borderBottomLeftRadius: theme.spacing(5.5),
borderBottomRightRadius: theme.spacing(5.5)
}
},
verticalSmallCircular: {
'&:first-child': {
borderTopLeftRadius: theme.spacing(4),
borderTopRightRadius: theme.spacing(4)
},
'&:last-child': {
borderBottomLeftRadius: theme.spacing(4),
borderBottomRightRadius: theme.spacing(4)
}
},
verticalLargeCircular: {
'&:first-child': {
borderTopLeftRadius: theme.spacing(7),
borderTopRightRadius: theme.spacing(7)
},
'&:last-child': {
borderBottomLeftRadius: theme.spacing(7),
borderBottomRightRadius: theme.spacing(7)
}
},
verticalSmall: {
maxWidth: theme.spacing(8),
minWidth: theme.spacing(8),
minHeight: 32
},
verticalLarge: {
width: theme.spacing(14),
minHeight: 40
},
horizontal: {
height: 36,
'& span': {
'& label': {
'& span:last-child': {
borderRight: 0
}
}
},
'&:first-child': {
borderTopLeftRadius: 4,
borderBottomLeftRadius: 4
},
'&:last-child': {
borderTopRightRadius: 4,
borderBottomRightRadius: 4,
'& span': {
'& label': {
'& span:last-child': {
borderRight: '1px solid rgba(0, 0, 0, 0.23)'
}
}
}
}
},
horizontalSmall: {
minWidth: theme.spacing(8),
height: 32,
minHeight: 32
},
horizontalLarge: {
minWidth: theme.spacing(14),
height: 40
},
horizontalSmallCircular: {
'&:first-child': {
borderTopLeftRadius: 16,
borderBottomLeftRadius: 16
},
'&:last-child': {
borderTopRightRadius: 16,
borderBottomRightRadius: 16
}
},
horizontalMediumCircular: {
'&:first-child': {
borderTopLeftRadius: 18,
borderBottomLeftRadius: 18
},
'&:last-child': {
borderTopRightRadius: 18,
borderBottomRightRadius: 18
}
},
horizontalLargeCircular: {
'&:first-child': {
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20
},
'&:last-child': {
borderTopRightRadius: 20,
borderBottomRightRadius: 20
}
}
};
};
var RadioButton =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(RadioButton, _Component);
function RadioButton() {
(0, _classCallCheck2.default)(this, RadioButton);
return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(RadioButton).apply(this, arguments));
}
(0, _createClass2.default)(RadioButton, [{
key: "getButtonStyles",
value: function getButtonStyles() {
var _this$context = this.context,
row = _this$context.row,
size = _this$context.size;
var position = row ? 'horizontal' : 'vertical';
var postfix = size === 'small' ? 'Small' : 'Large';
return position + postfix;
}
}, {
key: "render",
value: function render() {
var _classNames;
var _this$props = this.props,
classes = _this$props.classes,
classNamePro = _this$props.className,
other = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "className"]);
var disabled = this.props.disabled;
var _this$context2 = this.context,
row = _this$context2.row,
size = _this$context2.size,
circular = _this$context2.circular;
var Label = getLabel(other);
var styles = this.getButtonStyles();
var className = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.vertical, !row), (0, _defineProperty2.default)(_classNames, classes.horizontal, row), (0, _defineProperty2.default)(_classNames, classes[styles], size !== 'medium'), (0, _defineProperty2.default)(_classNames, classes["".concat(styles, "Circular")], circular), _classNames), classNamePro);
return _react.default.createElement(_Button.default, {
className: className,
classes: {
root: classes.root,
label: classes.label
},
color: "primary",
disabled: disabled
}, _react.default.createElement(Label, null));
}
}]);
return RadioButton;
}(_react.Component);
RadioButton.propTypes = {
/**
* RadioButton 的value
*/
value: _propTypes.default.string
};
RadioButton.contextTypes = {
row: _propTypes.default.bool,
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
circular: _propTypes.default.bool
};
function getLabel(props) {
var styles = function styles(theme) {
return {
root: {
margin: 0,
width: '100%',
height: '100%',
justifyContent: 'center',
borderRadius: 'inherit'
},
label: {
width: '100%',
height: '100%',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 'inherit',
border: '1px solid rgba(0, 0, 0, 0.23)'
}
};
};
var children = props.children,
other = (0, _objectWithoutProperties2.default)(props, ["children"]);
function Label(props) {
var classes = props.classes;
var Radio = getRadio(other);
return _react.default.createElement(_FormControlLabel.default, (0, _extends2.default)({
classes: {
root: classes.root,
label: classes.label
}
}, other, {
control: _react.default.createElement(Radio, null),
label: children
}));
}
return (0, _styles.withStyles)(styles, {
name: 'RMLabel'
})(Label);
}
function getRadio(props) {
var styles = function styles(theme) {
return {
root: {
borderRadius: 'inherit',
display: 'none'
},
checked: {
'&+span': {
color: theme.palette.primary.contrastText,
background: theme.palette.primary.main,
border: "1px solid ".concat(theme.palette.primary.light)
}
}
};
};
var radioProps = props;
function R(props, context) {
var classes = props.classes;
var classesPro = context.classes;
classesPro = classesPro || {};
return _react.default.createElement(_Radio.default, (0, _extends2.default)({}, radioProps, {
classes: {
checked: (0, _classnames.default)(classesPro.checked, classes.checked),
root: classes.root
}
}));
}
R.contextTypes = {
classes: _propTypes.default.object
};
return (0, _styles.withStyles)(styles, {
name: 'RMRadio'
})(R);
}
var _default = (0, _styles.withStyles)(styles, {
name: 'RMRadioButton'
})(RadioButton);
exports.default = _default;