@orfeas126/box-ui-elements
Version:
Box UI Elements
132 lines • 4.65 kB
JavaScript
const _excluded = ["onClick"];
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
import * as React from 'react';
import noop from 'lodash/noop';
import classNames from 'classnames';
import X from '../../icon/fill/X16';
// $FlowFixMe this imports from a typescript file
import LabelPill from '../label-pill';
import Avatar from '../avatar';
import './RoundPill.scss';
const RemoveButton = _ref => {
let {
onClick
} = _ref,
rest = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/React.createElement(X, _extends({}, rest, {
"aria-hidden": "true",
onClick: onClick
}));
};
class RoundPill extends React.PureComponent {
constructor(...args) {
super(...args);
_defineProperty(this, "state", {
avatarUrl: undefined
});
_defineProperty(this, "isMounted", false);
_defineProperty(this, "getStyles", () => {
const {
className,
isSelected,
isDisabled,
hasWarning,
isValid
} = this.props;
return classNames('bdl-RoundPill', className, {
'bdl-RoundPill--selected': isSelected && !isDisabled,
'bdl-RoundPill--disabled': isDisabled,
'bdl-RoundPill--warning': hasWarning,
'bdl-RoundPill--error': !isValid
});
});
_defineProperty(this, "handleClickRemove", () => {
const {
isDisabled,
onRemove
} = this.props;
return isDisabled ? noop : onRemove();
});
/**
* Success handler for getting avatar url
*
* @param {string} [avatarUrl] the user avatar url
*/
_defineProperty(this, "getAvatarUrlHandler", avatarUrl => {
if (this.isMounted) {
this.setState({
avatarUrl
});
}
});
}
/**
* Gets the avatar URL for the user from the getPillImageUrl prop
*
* @return {void}
*/
getAvatarUrl() {
const {
getPillImageUrl,
id,
type
} = this.props;
Promise.resolve(getPillImageUrl && id ? getPillImageUrl({
id,
type
}) : undefined).then(this.getAvatarUrlHandler).catch(() => {
// noop
});
}
componentDidMount() {
this.isMounted = true;
this.getAvatarUrl();
}
componentWillUnmount() {
this.isMounted = false;
}
render() {
const {
id,
isExternal,
showAvatar,
text
} = this.props;
const {
avatarUrl
} = this.state;
return /*#__PURE__*/React.createElement(LabelPill.Pill, {
size: "large",
className: this.getStyles()
}, showAvatar ? /*#__PURE__*/React.createElement(LabelPill.Icon, {
Component: Avatar,
className: "bdl-RoundPill-avatar",
avatarUrl: avatarUrl,
id: id,
isExternal: isExternal,
name: text,
size: "small",
shouldShowExternal: true
}) : null, /*#__PURE__*/React.createElement(LabelPill.Text, {
className: "bdl-RoundPill-text"
}, text), /*#__PURE__*/React.createElement(LabelPill.Icon, {
className: "bdl-RoundPill-closeBtn",
Component: RemoveButton,
onClick: this.handleClickRemove
}));
}
}
_defineProperty(RoundPill, "defaultProps", {
isDisabled: false,
isSelected: false,
isValid: true,
hasWarning: false,
showAvatar: false
});
export default RoundPill;
//# sourceMappingURL=RoundPill.js.map