wix-style-react
Version:
288 lines (233 loc) • 13.3 kB
JavaScript
"use strict";
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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _constants = require("./constants");
var _avatar = require("wix-ui-core/dist/src/components/avatar");
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 _context = require("../FontUpgrade/context");
var _excluded = ["size", "presence", "indication", "color", "customIndication", "onIndicationClick", "dataHook", "className", "shape", "text", "placeholder", "name", "onClick", "showIndicationOnHover", "loading"];
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) { (0, _defineProperty2["default"])(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; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var getSizeNumber = function getSizeNumber(size) {
return 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.
*/
var Avatar = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(Avatar, _React$PureComponent);
var _super = _createSuper(Avatar);
function Avatar(props) {
var _this;
(0, _classCallCheck2["default"])(this, Avatar);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseEnter", function () {
if (_this.props.showIndicationOnHover) {
_this.setState({
showIndication: true
});
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseLeave", function () {
if (_this.props.showIndicationOnHover) {
_this.setState({
fadeIndication: true
});
setTimeout(function () {
return _this.setState({
fadeIndication: false,
showIndication: false
});
}, 150);
}
});
_this.state = {
fadeIndication: false,
showIndication: false
};
return _this;
}
(0, _createClass2["default"])(Avatar, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props = this.props,
size = _this$props.size,
presence = _this$props.presence,
indication = _this$props.indication,
color = _this$props.color,
customIndication = _this$props.customIndication,
onIndicationClick = _this$props.onIndicationClick,
dataHook = _this$props.dataHook,
className = _this$props.className,
shape = _this$props.shape,
text = _this$props.text,
placeholder = _this$props.placeholder,
name = _this$props.name,
onClick = _this$props.onClick,
showIndicationOnHover = _this$props.showIndicationOnHover,
loading = _this$props.loading,
rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
var _this$state = this.state,
fadeIndication = _this$state.fadeIndication,
showIndication = _this$state.showIndication;
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("div", {
"data-hook": dataHook,
className: (0, _AvatarSt.st)(className, _AvatarSt.classes.root)
}, /*#__PURE__*/_react["default"].createElement(_context.FontUpgradeContext.Consumer, null, function (_ref) {
var active = _ref.active;
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.avatarWSR,
onMouseEnter: _this2._onMouseEnter,
onMouseLeave: _this2._onMouseLeave,
className: (0, _AvatarSt.st)(_AvatarSt.classes.avatarContainer, {
shape: shape,
size: size,
indication: Boolean(customIndication || indication),
presence: Boolean(presence),
presenceType: presence,
clickable: !!onClick,
fade: fadeIndication,
hasText: !!text
}),
"data-madefor": active
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _AvatarSt.classes.coreAvatar
}, /*#__PURE__*/_react["default"].createElement(_avatar.Avatar, (0, _extends2["default"])({}, _objectSpread(_objectSpread({}, rest), {}, {
placeholder: placeholder ? placeholder : /*#__PURE__*/_react["default"].createElement(AvatarDefaultPlaceholder, {
shape: shape,
size: size
}),
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))])
}))), renderLoader && [/*#__PURE__*/_react["default"].createElement("div", {
key: "overlay",
className: (0, _AvatarSt.st)(_AvatarSt.classes.loaderContainer, _AvatarSt.classes.overlay)
}), /*#__PURE__*/_react["default"].createElement("div", {
key: "loader",
className: (0, _AvatarSt.st)(_AvatarSt.classes.loaderContainer, _AvatarSt.classes.loader)
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
dataHook: _constants.dataHooks.loader,
size: "tiny"
}))], presence && /*#__PURE__*/_react["default"].createElement("div", {
className: _AvatarSt.classes.presence
}), renderIndication && /*#__PURE__*/_react["default"].createElement("div", {
className: _AvatarSt.classes.indication
}, /*#__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'
}, indication)), renderCustomIndication && /*#__PURE__*/_react["default"].createElement("div", {
className: _AvatarSt.classes.indication,
"data-hook": _constants.dataHooks.customIndication,
onClick: onIndicationClick
}, customIndication));
}));
}
}]);
return Avatar;
}(_react["default"].PureComponent);
var AvatarDefaultPlaceholder = function AvatarDefaultPlaceholder(_ref2) {
var shape = _ref2.shape,
size = _ref2.size;
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 = Avatar;
exports["default"] = _default;