@6thquake/react-material
Version:
React components that implement Google's Material Design.
325 lines (275 loc) • 10.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
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 = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _warning = _interopRequireDefault(require("warning"));
var _classnames = _interopRequireDefault(require("classnames"));
var _helpers = require("../utils/helpers");
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
var styles = function styles(theme) {
return {
root: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start'
},
wrapper: {
position: 'relative',
overflow: 'visible',
cursor: 'pointer'
},
disabled: {
cursor: 'default'
},
foldUp: {},
checked: {},
smallAvatar: {
width: 24,
height: 24,
fontSize: theme.typography.pxToRem(12)
},
mediumAvatar: {
width: 40,
height: 40,
fontSize: theme.typography.pxToRem(20)
},
largeAvatar: {
width: 56,
height: 56,
fontSize: theme.typography.pxToRem(28)
},
check: {
position: 'absolute',
zIndex: 1,
borderRadius: '50%',
border: '2px solid #fff',
color: '#fff',
background: 'green'
},
small: {
fontSize: theme.typography.pxToRem(12),
bottom: -2,
right: -2
},
medium: {
fontSize: theme.typography.pxToRem(16),
bottom: -4,
right: -4
},
large: {
fontSize: theme.typography.pxToRem(24),
bottom: -8,
right: -8
},
rowContent: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start'
},
columnContent: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
rowReverse: {
flexDirection: 'row-reverse'
},
columnReverse: {
flexDirection: 'column-reverse'
}
};
};
var AvatarGroup =
/*#__PURE__*/
function (_React$Component) {
(0, _inherits2.default)(AvatarGroup, _React$Component);
function AvatarGroup(props) {
var _this;
(0, _classCallCheck2.default)(this, AvatarGroup);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(AvatarGroup).call(this, props));
_this.avatars = [];
_this.handleClick = function (val, event) {
var _this$props = _this.props,
valueProp = _this$props.value,
multiple = _this$props.multiple,
disabled = _this$props.disabled;
if (disabled) {
return;
}
var value = _this.isControlled ? valueProp : _this.state.value;
value = multiple ? value.slice() : [];
var index = value.indexOf(val);
if (index === -1) {
value.push(val);
} else {
value.splice(index, 1);
}
if (!_this.isControlled) {
_this.setState({
value: value
});
}
if (_this.props.onChange) {
_this.props.onChange(event, value);
}
};
_this.isControlled = props.value != null;
if (!_this.isControlled) {
_this.state = {
value: props.defaultValue
};
}
return _this;
}
(0, _createClass2.default)(AvatarGroup, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
classes = _this$props2.classes,
classNameProp = _this$props2.className,
Component = _this$props2.component,
children = _this$props2.children,
name = _this$props2.name,
valueProp = _this$props2.value,
onChange = _this$props2.onChange,
size = _this$props2.size,
foldUp = _this$props2.foldUp,
spacing = _this$props2.spacing,
direction = _this$props2.direction,
placeholder = _this$props2.placeholder,
max = _this$props2.max,
disabled = _this$props2.disabled,
other = (0, _objectWithoutProperties2.default)(_this$props2, ["classes", "className", "component", "children", "name", "value", "onChange", "size", "foldUp", "spacing", "direction", "placeholder", "max", "disabled"]);
var value = this.isControlled ? valueProp : this.state.value;
this.avatars = [];
return _react.default.createElement(Component, {
role: "radiogroup",
className: classes.root
}, _react.default.Children.map(children, function (child, index) {
var _classNames, _classNames3;
if (index >= max) {
return null;
}
if (!_react.default.isValidElement(child)) {
return null;
}
(0, _warning.default)(child.type !== _react.default.Fragment, ["React-Material: the AvatarGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
var direction = child.props.direction;
var val = typeof child.props.value !== 'undefined' ? child.props.value : index;
var checked = value && value.indexOf(val) !== -1;
return _react.default.createElement("div", {
className: (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.wrapper, true), (0, _defineProperty2.default)(_classNames, classes.foldUp, foldUp), (0, _defineProperty2.default)(_classNames, classes.rowContent, direction === 'left' || direction === 'right'), (0, _defineProperty2.default)(_classNames, classes.columnContent, direction === 'top' || direction === 'bottom'), (0, _defineProperty2.default)(_classNames, classes.rowReverse, direction === 'left'), (0, _defineProperty2.default)(_classNames, classes.columnReverse, direction === 'top'), (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.checked, checked), _classNames)),
style: foldUp ? {
transform: "translateX(-".concat(index * 20, "%)")
} : {
margin: "0px ".concat(spacing, "px")
},
onClick: (0, _helpers.createChainedFunction)(child.props.onClick, _this2.handleClick.bind(_this2, val))
}, _react.default.cloneElement(child, {
className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes["".concat(size, "Avatar")], true)),
inputRef: function inputRef(node) {
if (node) {
_this2.avatars.push(node);
}
}
}), child.props.content, checked && _react.default.createElement(_Check.default, {
className: (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.check, true), (0, _defineProperty2.default)(_classNames3, classes["".concat(size)], true), _classNames3))
}));
}), _react.default.Children.count(children) > max && '...', _react.default.Children.count(children) <= 0 && placeholder);
}
}]);
return AvatarGroup;
}(_react.default.Component);
AvatarGroup.propTypes = {
/**
* Used to render icon or text elements inside the AvatarGroup.
* This can be an element, or just a string.
*/
children: _propTypes.default.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css-api) below for more details.
*/
classes: _propTypes.default.object.isRequired,
/**
* 'div' The component used for the root node. Either a string to use a DOM element or a component.
*/
component: _propTypes.default.element,
/**
* The default selected avatar, useful when not controlling the component.
*/
defaultValue: _propTypes.default.arrayOf([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),
/**
* If true, do not fire click event.
*/
disabled: _propTypes.default.bool,
/**
* If true, the avatars will be fold up.
*/
foldUp: _propTypes.default.bool,
/**
* max item length.
*/
max: _propTypes.default.number,
/**
* a multiple select filter or single select filter.
*/
multiple: _propTypes.default.bool,
/**
* The name used to reference the value of the control.
*/
name: _propTypes.default.string,
/**
* Callback fired when a avatar is selected.
*
* @param {object} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value`.
* @param {string} value The `value` of the selected avatar
*/
onChange: _propTypes.default.func,
/**
* The short hint displayed without any avatars.
*/
placeholder: _propTypes.default.string,
/**
* the size of each item.
*/
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
/**
* spacing between items.
*/
spacing: _propTypes.default.number,
/**
* Value of the selected avatar.
*/
value: _propTypes.default.arrayOf([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool])
};
AvatarGroup.defaultProps = {
component: 'div',
size: 'medium',
foldUp: false,
spacing: 8,
multiple: false,
max: 20,
placeholder: '暂无',
disabled: false
};
var _default = (0, _withStyles.default)(styles, {
name: 'RMAvatarGroup'
})(AvatarGroup);
exports.default = _default;