wix-style-react
Version:
wix-style-react
298 lines (295 loc) • 12.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _constants = require("./constants");
var _context = require("../WixStyleReactProvider/context");
var _Loader = _interopRequireDefault(require("../Loader"));
var _assets = require("./assets");
var _AvatarSt = require("./Avatar.st.css");
var _cssClassUtils = require("../utils/cssClassUtils");
var _stringToColor = _interopRequireDefault(require("./string-to-color"));
var _AvatarCore = _interopRequireDefault(require("./AvatarCore"));
var _excluded = ["size", "presence", "indication", "color", "customIndication", "onIndicationClick", "dataHook", "className", "shape", "text", "placeholder", "name", "onClick", "showIndicationOnHover", "loading"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Avatar/Avatar.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var getSizeNumber = size => Number(size.substring(4));
var defaultSize = 48;
var minSmallIconButton = 60;
/**
* Avatar is a type of element that visually represents a user, either as an image, name initials or placeholder icon.
*/
class Avatar extends _react.default.PureComponent {
constructor(props) {
super(props);
this._onMouseEnter = () => {
if (this.props.showIndicationOnHover) {
this.setState({
showIndication: true
});
}
};
this._onMouseLeave = () => {
if (this.props.showIndicationOnHover) {
this.setState({
fadeIndication: true
});
setTimeout(() => this.setState({
fadeIndication: false,
showIndication: false
}), 150);
}
};
this.state = {
fadeIndication: false,
showIndication: false
};
}
render() {
var _this$props = this.props,
{
size,
presence,
indication,
color,
customIndication,
onIndicationClick,
dataHook,
className,
shape,
text,
placeholder,
name,
onClick,
showIndicationOnHover,
loading
} = _this$props,
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
var {
fadeIndication,
showIndication
} = this.state;
var calculatedColor = color || (0, _stringToColor.default)(text || name); // if color is provided as a prop use it, otherwise, generate a color based on the text
var sizeNumber = getSizeNumber(size);
var renderOnHover = !showIndicationOnHover || showIndication;
var indicationConstraints = renderOnHover && sizeNumber >= defaultSize;
var renderIndication = indicationConstraints && !customIndication && indication;
var renderCustomIndication = indicationConstraints && customIndication;
var renderLoader = loading && sizeNumber >= defaultSize;
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 7
}
}, _ref => {
var {
newColorsBranding
} = _ref;
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
className: (0, _AvatarSt.st)(className, _AvatarSt.classes.root),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.avatarWSR,
onMouseEnter: this._onMouseEnter,
onMouseLeave: this._onMouseLeave,
className: (0, _AvatarSt.st)(_AvatarSt.classes.avatarContainer, {
shape,
size,
indication: Boolean(customIndication || indication),
presence: Boolean(presence),
presenceType: presence,
clickable: !!onClick,
fade: fadeIndication,
hasText: !!text,
newColorsBranding
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _AvatarSt.classes.coreAvatar,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 15
}
}, /*#__PURE__*/_react.default.createElement(_AvatarCore.default, (0, _extends2.default)({}, rest, {
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : /*#__PURE__*/_react.default.createElement(AvatarDefaultPlaceholder, {
shape: shape,
size: size,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 23
}
}),
text: text,
name: name,
onClick: onClick,
initialsLimit: sizeNumber < 30 ? 1 : undefined,
"data-hook": _constants.dataHooks.avatarCore,
className: (0, _AvatarSt.st)(_AvatarSt.classes.avatar, _AvatarSt.classes["color".concat((0, _cssClassUtils.capitalize)(calculatedColor))]),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 17
}
}))), renderLoader && [/*#__PURE__*/_react.default.createElement("div", {
key: "overlay",
className: (0, _AvatarSt.st)(_AvatarSt.classes.loaderContainer, _AvatarSt.classes.overlay),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 17
}
}), /*#__PURE__*/_react.default.createElement("div", {
key: "loader",
className: (0, _AvatarSt.st)(_AvatarSt.classes.loaderContainer, _AvatarSt.classes.loader),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 17
}
}, /*#__PURE__*/_react.default.createElement(_Loader.default, {
dataHook: _constants.dataHooks.loader,
size: "tiny",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 19
}
}))], presence && /*#__PURE__*/_react.default.createElement("div", {
className: _AvatarSt.classes.presence,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 28
}
}), renderIndication && /*#__PURE__*/_react.default.createElement("div", {
className: _AvatarSt.classes.indication,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 17
}
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
className: _AvatarSt.classes.iconButtonShadow,
dataHook: _constants.dataHooks.indication,
onClick: onIndicationClick,
skin: "inverted",
shape: shape,
size: sizeNumber > minSmallIconButton ? 'small' : 'tiny',
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 19
}
}, indication)), renderCustomIndication && /*#__PURE__*/_react.default.createElement("div", {
className: _AvatarSt.classes.indication,
"data-hook": _constants.dataHooks.customIndication,
onClick: onIndicationClick,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 17
}
}, customIndication)));
});
}
}
var AvatarDefaultPlaceholder = _ref2 => {
var {
shape,
size
} = _ref2;
return shape !== _constants.avatarShapes.square ? _assets.placeholderSVGs[size][_constants.avatarShapes.circle] : _assets.placeholderSVGs[size][_constants.avatarShapes.square];
};
var CoreAvatarPropTypes = {
/**
* Defines a name of the avatar user. Text initials will be generated from the name.
* The name value will be used as default value for HTML title and `aria-label` attributes.
* And also as default value for the image's alt attribute if `imgProps` is provided.
*/
name: _propTypes.default.string,
/** Defines a text to render as a content instead of a given `name`. */
text: _propTypes.default.string,
/**
* Accept any content to render as a content placeholder. This placeholder will be displayed if no text, name or imgProps are provided.<br>
* By default use a generic avatar user icon.
*/
placeholder: _propTypes.default.node,
/** Accept all common `<img>` tag properties. */
imgProps: _propTypes.default.object,
/** Defines a string that labels the current element in case where text label is not visible on the screen. */
ariaLabel: _propTypes.default.string,
/** Defines a standard HTML title attribute value. Applies it to the root element. */
title: _propTypes.default.string,
/** Defines a click event handler. When defined, component will be clickable and will have a pointer cursor on hover. */
onClick: _propTypes.default.func
};
Avatar.displayName = 'Avatar';
Avatar.propTypes = _objectSpread(_objectSpread({}, CoreAvatarPropTypes), {}, {
/** Controls the size of an avatar. */
size: _propTypes.default.oneOf(['size90', 'size72', 'size60', 'size48', 'size36', 'size30', 'size24', 'size18']),
/**
* Controls the background color of the avatar. If not provided,
* color is determined by the provided text or name so that each name will receive a different color.
*/
color: _propTypes.default.oneOf(['A1', 'A2', 'A3', 'A4', 'A5', 'A6']),
/** Controls the shape of the image. */
shape: _propTypes.default.oneOf(['circle', 'square']),
/** Specifies a CSS class name to be appended to the component’s root element. */
className: _propTypes.default.string,
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: _propTypes.default.string,
/** Sets the presence status of an avatar. */
presence: _propTypes.default.oneOf(['online', 'offline', 'busy']),
/** Accept any content to render as an indication item. */
indication: _propTypes.default.node,
/**
* Accept any content to render as a custom indication item. This indication element will not be wrapped by an IconButton.
* It could be rendered in other shapes (such as square).
* */
customIndication: _propTypes.default.node,
/** Defines a callback function which is called every time indication element is clicked. */
onIndicationClick: _propTypes.default.func,
/** Shows indication element on hover. */
showIndicationOnHover: _propTypes.default.bool,
/** Shows a loader on top of an avatar. */
loading: _propTypes.default.bool
});
Avatar.defaultProps = {
size: 'size48',
shape: 'circle',
showIndicationOnHover: false
};
var _default = exports.default = Avatar;
//# sourceMappingURL=Avatar.js.map