@luscii-healthtech/web-ui 19.1.0 → 19.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Avatar/Avatar.d.ts +23 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.development.js +43 -48
- package/dist/index.development.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/web-ui-tailwind.css +29 -0
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
type AvatarSize = "large" | "medium" | "small";
|
|
3
|
+
type Props = {
|
|
4
|
+
initials: string;
|
|
5
|
+
src?: string;
|
|
6
|
+
/**
|
|
7
|
+
* Put the name of the person here, so less sighted
|
|
8
|
+
* users can know who the avatar belongs to.
|
|
9
|
+
*
|
|
10
|
+
* In case of rendering the default image or the
|
|
11
|
+
* initials, this will also be used as the `alt` text.
|
|
12
|
+
*/
|
|
13
|
+
alt?: string;
|
|
14
|
+
size?: AvatarSize;
|
|
15
|
+
/**
|
|
16
|
+
* URL to an image to be used as the default image.
|
|
17
|
+
* If this is set, the image provided via `src` will never render.
|
|
18
|
+
*/
|
|
19
|
+
defaultImage?: string;
|
|
20
|
+
className?: string;
|
|
21
|
+
};
|
|
22
|
+
export declare const Avatar: ({ size, src, alt, defaultImage, initials, className, }: Props) => React.JSX.Element;
|
|
23
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export { Modal, ModalProps } from "./components/Modal/Modal";
|
|
|
8
8
|
export { ModalSize, ModalBaseProps } from "./components/Modal/ModalBase";
|
|
9
9
|
export { ModalHeaderProps } from "./components/Modal/ModalHeader";
|
|
10
10
|
export { ModalFooterProps, ModalFooterLeadingComponent, ModalFooterTrailingComponents, } from "./components/Modal/ModalFooter";
|
|
11
|
-
export {
|
|
11
|
+
export { Avatar } from "./components/Avatar/Avatar";
|
|
12
12
|
export { default as Badge } from "./components/Badge/Badge";
|
|
13
13
|
export { BaseButtonProps as NonPrimaryButtonProps, ButtonWithPendingStateProps as PrimaryButtonProps, ButtonDefinition, } from "./components/ButtonV2/ButtonProps.type";
|
|
14
14
|
export { PrimaryButton } from "./components/ButtonV2/PrimaryButton";
|
|
@@ -8,10 +8,10 @@ var sortable = require('@dnd-kit/sortable');
|
|
|
8
8
|
var utilities = require('@dnd-kit/utilities');
|
|
9
9
|
var ReactTooltip = require('react-tooltip');
|
|
10
10
|
var ReactModal = require('react-modal');
|
|
11
|
-
var PropTypes = require('prop-types');
|
|
12
11
|
var Glider = require('react-glider');
|
|
13
12
|
var router = require('@reach/router');
|
|
14
13
|
var ReactDatePicker = require('react-datepicker');
|
|
14
|
+
var PropTypes = require('prop-types');
|
|
15
15
|
var moment = require('moment');
|
|
16
16
|
require('react-datepicker/dist/react-datepicker.css');
|
|
17
17
|
var ClipboardJS = require('clipboard');
|
|
@@ -51,9 +51,9 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
51
51
|
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
52
52
|
var ReactTooltip__default = /*#__PURE__*/_interopDefault(ReactTooltip);
|
|
53
53
|
var ReactModal__default = /*#__PURE__*/_interopDefault(ReactModal);
|
|
54
|
-
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
55
54
|
var Glider__default = /*#__PURE__*/_interopDefault(Glider);
|
|
56
55
|
var ReactDatePicker__default = /*#__PURE__*/_interopDefault(ReactDatePicker);
|
|
56
|
+
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
57
57
|
var moment__default = /*#__PURE__*/_interopDefault(moment);
|
|
58
58
|
var ClipboardJS__default = /*#__PURE__*/_interopDefault(ClipboardJS);
|
|
59
59
|
var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
|
|
@@ -174,8 +174,8 @@ function styleInject(css, ref) {
|
|
|
174
174
|
}
|
|
175
175
|
}
|
|
176
176
|
|
|
177
|
-
var css_248z$
|
|
178
|
-
styleInject(css_248z$
|
|
177
|
+
var css_248z$m = "/* https://stackoverflow.com/a/13924997 */\n.ui-text-two-lines-max {\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n /* number of lines to show */\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n}\n";
|
|
178
|
+
styleInject(css_248z$m);
|
|
179
179
|
|
|
180
180
|
const allowedTextStyles = {
|
|
181
181
|
sm: "ui-text-xs ui-font-medium",
|
|
@@ -745,8 +745,8 @@ var Icons = /*#__PURE__*/Object.freeze({
|
|
|
745
745
|
WarningIcon: WarningIcon
|
|
746
746
|
});
|
|
747
747
|
|
|
748
|
-
var css_248z$
|
|
749
|
-
styleInject(css_248z$
|
|
748
|
+
var css_248z$l = "#application-toaster {\n position: fixed;\n left: 50%;\n transform: translate(-50%, 200%);\n bottom: 48px;\n transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);\n}\n#application-toaster.shelved {\n transform: translate(-50%, 200%);\n}\n#application-toaster.expanded {\n transform: translate(-50%, 0);\n}\n#application-toaster.type-success {\n --tw-bg-opacity: 1;\n background-color: rgb(231 245 236 / var(--tw-bg-opacity));\n}\n#application-toaster.type-success [data-test-id=toaster-title] {\n --tw-text-opacity: 1;\n color: rgb(21 128 61 / var(--tw-text-opacity));\n}\n#application-toaster.type-success .failure-icon {\n display: none;\n}\n#application-toaster.type-success [data-test-id=toaster-progress-bar-container] {\n --tw-bg-opacity: 1;\n background-color: rgb(231 245 236 / var(--tw-bg-opacity));\n}\n#application-toaster.type-success [data-test-id=toaster-progress-bar-container] [data-test-id=toaster-progress-bar] {\n --tw-bg-opacity: 1;\n background-color: rgb(82 176 147 / var(--tw-bg-opacity));\n}\n#application-toaster.type-failure {\n --tw-bg-opacity: 1;\n background-color: rgb(255 241 241 / var(--tw-bg-opacity));\n}\n#application-toaster.type-failure [data-test-id=toaster-title] {\n --tw-text-opacity: 1;\n color: rgb(197 48 48 / var(--tw-text-opacity));\n}\n#application-toaster.type-failure .success-icon {\n display: none;\n}\n#application-toaster.type-failure [data-test-id=toaster-progress-bar-container] {\n --tw-bg-opacity: 1;\n background-color: rgb(255 241 241 / var(--tw-bg-opacity));\n}\n#application-toaster.type-failure [data-test-id=toaster-progress-bar-container] [data-test-id=toaster-progress-bar] {\n --tw-bg-opacity: 1;\n background-color: rgb(255 98 102 / var(--tw-bg-opacity));\n}";
|
|
749
|
+
styleInject(css_248z$l);
|
|
750
750
|
|
|
751
751
|
const TOASTER_TYPE_OPTIONS = {
|
|
752
752
|
SUCCESS: "success",
|
|
@@ -927,8 +927,8 @@ toast.info = (message) => {
|
|
|
927
927
|
});
|
|
928
928
|
};
|
|
929
929
|
|
|
930
|
-
var css_248z$
|
|
931
|
-
styleInject(css_248z$
|
|
930
|
+
var css_248z$k = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.title-avenir {\n font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
|
|
931
|
+
styleInject(css_248z$k);
|
|
932
932
|
|
|
933
933
|
const Title = (props) => {
|
|
934
934
|
var _a, _b;
|
|
@@ -998,8 +998,8 @@ const Accordion = ({ dataTestId, isCollapsedByDefault = false, items, className
|
|
|
998
998
|
}));
|
|
999
999
|
};
|
|
1000
1000
|
|
|
1001
|
-
var css_248z$
|
|
1002
|
-
styleInject(css_248z$
|
|
1001
|
+
var css_248z$j = ".list-skeleton .skeleton-box {\n display: inline-block;\n height: 1em;\n position: relative;\n overflow: hidden;\n background-color: #cbd5e1;\n border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n animation: shimmer 800ms infinite;\n content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button {\n background-color: #e2e8f0;\n border-radius: 9999px;\n}\n.list-skeleton .skeleton-box.is-button::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n animation: shimmer 800ms infinite;\n content: \"\";\n}\n@keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n}";
|
|
1002
|
+
styleInject(css_248z$j);
|
|
1003
1003
|
|
|
1004
1004
|
const ListItemSkeleton = () => {
|
|
1005
1005
|
return React__namespace.default.createElement(
|
|
@@ -1223,8 +1223,8 @@ const DraggableBaseList = (_a) => {
|
|
|
1223
1223
|
return React__namespace.default.createElement(BaseList, Object.assign({}, props, { items, itemComponent: DraggableBaseListItem }));
|
|
1224
1224
|
};
|
|
1225
1225
|
|
|
1226
|
-
var css_248z$
|
|
1227
|
-
styleInject(css_248z$
|
|
1226
|
+
var css_248z$i = ".dropzone-dashed-border {\n border-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 fill%3D%22none%22%3E %3Cpath fill%3D%22%230074DD%22 fill-rule%3D%22evenodd%22 d%3D%22M8 0v1h8V0H8Zm0 23v1h8v-1H8ZM0 8h1v8H0V8Zm24 0h-1v8h1V8ZM1 0h3v1H1v3H0V0h1ZM0 23v-3h1v3h3v1H0v-1Zm20 0v1h4v-4h-1v3h-3Zm0-22V0h4v4h-1V1h-3Z%22 clip-rule%3D%22evenodd%22 %2F%3E%3C%2Fsvg%3E\") 1 1 1 1;\n border-image-width: 4px;\n border-image-slice: 4 4 4 4;\n border-image-repeat: round;\n}";
|
|
1227
|
+
styleInject(css_248z$i);
|
|
1228
1228
|
|
|
1229
1229
|
const DefaultState = ({ icon, message, horizontal = false, alignMessage = "center" }) => {
|
|
1230
1230
|
if (!icon && !message) {
|
|
@@ -1305,8 +1305,8 @@ const SortableBaseList = (_a) => {
|
|
|
1305
1305
|
);
|
|
1306
1306
|
};
|
|
1307
1307
|
|
|
1308
|
-
var css_248z$
|
|
1309
|
-
styleInject(css_248z$
|
|
1308
|
+
var css_248z$h = "li.gu-mirror {\n position: fixed;\n z-index: 9999;\n margin: 0px;\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\nli.gu-hide {\n display: none\n}\nli.gu-unselectable {\n user-select: none\n}\nli.gu-transit {\n --tw-bg-opacity: 1;\n background-color: rgb(239 246 255 / var(--tw-bg-opacity));\n filter: none;\n border-radius: 0px;\n border-style: none;\n opacity: 1\n}\nli.gu-transit > * {\n visibility: hidden\n}";
|
|
1309
|
+
styleInject(css_248z$h);
|
|
1310
1310
|
|
|
1311
1311
|
const ListItem = (props) => {
|
|
1312
1312
|
return React__namespace.default.createElement(BaseListItem, Object.assign({}, props));
|
|
@@ -1358,8 +1358,8 @@ const List = (props) => {
|
|
|
1358
1358
|
return React__namespace.default.createElement(DefaultList, Object.assign({}, props));
|
|
1359
1359
|
};
|
|
1360
1360
|
|
|
1361
|
-
var css_248z$
|
|
1362
|
-
styleInject(css_248z$
|
|
1361
|
+
var css_248z$g = ".input::-ms-clear {\n display: none;\n}";
|
|
1362
|
+
styleInject(css_248z$g);
|
|
1363
1363
|
|
|
1364
1364
|
const Input = React__namespace.default.forwardRef((_a, ref) => {
|
|
1365
1365
|
var { withSuffix = "", withPrefix = "", className, clearable = false, type = "text", isDisabled = false, width = "full", icon, name, value = "", onChange, isError, asFormField } = _a, otherProps = __rest(_a, ["withSuffix", "withPrefix", "className", "clearable", "type", "isDisabled", "width", "icon", "name", "value", "onChange", "isError", "asFormField"]);
|
|
@@ -1595,8 +1595,8 @@ var img$e = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:
|
|
|
1595
1595
|
|
|
1596
1596
|
var img$d = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23cbd5e1' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c!-- %5bldio%5d generated by https://loading.io/ --%3e%3c/svg%3e";
|
|
1597
1597
|
|
|
1598
|
-
var css_248z$
|
|
1599
|
-
styleInject(css_248z$
|
|
1598
|
+
var css_248z$f = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-loading {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.cweb-loading .cweb-loading-text {\n margin-bottom: 24px;\n}\n.cweb-loading.as-modal {\n position: fixed;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n z-index: 9999;\n background-color: rgba(255, 255, 255, 0.6);\n}\n.cweb-loading.as-modal .cweb-loading-panel {\n position: relative;\n width: 320px;\n min-height: 120px;\n border-radius: 4px;\n padding: 16px;\n box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);\n background-color: #ffffff;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n}\n.cweb-loading.as-modal .cweb-loading-panel:before {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n right: 0;\n z-index: 1;\n height: 3px;\n background-color: #6abfa5;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}";
|
|
1599
|
+
styleInject(css_248z$f);
|
|
1600
1600
|
|
|
1601
1601
|
function LoadingIndicator(_a) {
|
|
1602
1602
|
var { asModal = false, asSpinner = false, className = "", spinnerColor = "blue", dataTestId = "loading-indicator" } = _a, restProps = __rest(_a, ["asModal", "asSpinner", "className", "spinnerColor", "dataTestId"]);
|
|
@@ -1777,9 +1777,6 @@ const Modal = (props) => {
|
|
|
1777
1777
|
};
|
|
1778
1778
|
Modal.setAppElement = ReactModal__default.default.setAppElement;
|
|
1779
1779
|
|
|
1780
|
-
var css_248z$f = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-avatar {\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: center;\n width: 64px;\n box-sizing: border-box;\n}\n.cweb-avatar > .avatar-content-container {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n width: 64px;\n height: 64px;\n border-radius: 50%;\n box-sizing: border-box;\n}\n.cweb-avatar > .avatar-content-container > .avatar-image {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n}\n.cweb-avatar > .avatar-content-container > .avatar-initials-text {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 24px;\n font-weight: 300;\n line-height: 1;\n color: #737373;\n margin: 0;\n pointer-events: none;\n}\n.cweb-avatar.size-large {\n width: 128px;\n}\n.cweb-avatar.size-large > .avatar-content-container {\n width: 128px;\n height: 128px;\n}\n.cweb-avatar.size-large > .avatar-content-container > .avatar-initials-text {\n font-size: 48px;\n}\n.cweb-avatar.size-medium {\n width: 64px;\n}\n.cweb-avatar.size-medium > .avatar-content-container {\n width: 64px;\n height: 64px;\n}\n.cweb-avatar.size-medium > .avatar-content-container > .avatar-initials-text {\n font-size: 24px;\n}\n.cweb-avatar.size-small {\n width: 36px;\n}\n.cweb-avatar.size-small > .avatar-content-container {\n width: 36px;\n height: 36px;\n}\n.cweb-avatar.size-small > .avatar-content-container > .avatar-initials-text {\n font-size: 14px;\n}\n.cweb-avatar.type-editable {\n cursor: pointer;\n}\n.cweb-avatar.type-editable > .avatar-content-container {\n position: relative;\n border-color: #1e40af;\n background-color: #ffffff;\n}\n.cweb-avatar.type-editable > .avatar-content-container:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 50%;\n transition: 0.4s ease background-color;\n}\n.cweb-avatar.type-editable > .avatar-content-container:hover:after {\n background-color: rgba(30, 64, 175, 0.1);\n}\n.cweb-avatar.type-editable > .avatar-content-container > .avatar-initials-text {\n color: #1e40af;\n}\n.cweb-avatar.type-readonly > .avatar-content-container {\n border-color: #cccccc;\n background-color: #f1f5f9;\n}\n.cweb-avatar.type-readonly > .avatar-content-container > .avatar-initials-text {\n color: #64748b;\n}\n@media (max-width: 767px) {\n .cweb-avatar.size-large {\n width: 64px;\n }\n .cweb-avatar.size-large > .avatar-content-container {\n width: 64px;\n height: 64px;\n }\n .cweb-avatar.size-large > .avatar-content-container > .avatar-initials-text {\n font-size: 24px;\n }\n .cweb-avatar.size-large.display-initials > .avatar-content-container {\n border-width: 0.5px;\n }\n}";
|
|
1781
|
-
styleInject(css_248z$f);
|
|
1782
|
-
|
|
1783
1780
|
function checkImageValidity(src) {
|
|
1784
1781
|
return new Promise((resolve) => {
|
|
1785
1782
|
const image = new Image();
|
|
@@ -1792,12 +1789,7 @@ function checkImageValidity(src) {
|
|
|
1792
1789
|
image.src = src;
|
|
1793
1790
|
});
|
|
1794
1791
|
}
|
|
1795
|
-
const
|
|
1796
|
-
LARGE: "large",
|
|
1797
|
-
MEDIUM: "medium",
|
|
1798
|
-
SMALL: "small"
|
|
1799
|
-
};
|
|
1800
|
-
const Avatar = ({ size, src, defaultImage, initials, className }) => {
|
|
1792
|
+
const Avatar = ({ size = "medium", src, alt, defaultImage, initials, className }) => {
|
|
1801
1793
|
const [hasValidImage, setHasValidImage] = React.useState(false);
|
|
1802
1794
|
React.useEffect(() => {
|
|
1803
1795
|
let mounted = true;
|
|
@@ -1812,34 +1804,37 @@ const Avatar = ({ size, src, defaultImage, initials, className }) => {
|
|
|
1812
1804
|
mounted = false;
|
|
1813
1805
|
};
|
|
1814
1806
|
}, [defaultImage, src]);
|
|
1815
|
-
const
|
|
1816
|
-
"
|
|
1817
|
-
"
|
|
1818
|
-
"
|
|
1819
|
-
|
|
1820
|
-
|
|
1807
|
+
const sizeClassName = classNames__default.default("ui-rounded-full", {
|
|
1808
|
+
"ui-h-32 ui-w-32": size === "large",
|
|
1809
|
+
"ui-h-16 ui-w-16": size === "medium",
|
|
1810
|
+
"ui-h-9 ui-w-9": size === "small"
|
|
1811
|
+
});
|
|
1812
|
+
const containerClassName = classNames__default.default(className, sizeClassName, "ui-bg-slate-100 ui-text-slate-500 ui-flex ui-items-center ui-justify-center");
|
|
1813
|
+
const textClassName = classNames__default.default({
|
|
1814
|
+
"ui-text-5xl": size === "large",
|
|
1815
|
+
"ui-text-2xl": size === "medium",
|
|
1816
|
+
"ui-text-sm": size === "small"
|
|
1821
1817
|
});
|
|
1818
|
+
const imageClassName = classNames__default.default(sizeClassName);
|
|
1822
1819
|
const renderAvatar = () => {
|
|
1823
1820
|
if (defaultImage) {
|
|
1824
|
-
return
|
|
1821
|
+
return React__namespace.default.createElement("img", { className: imageClassName, src: defaultImage, alt });
|
|
1825
1822
|
} else if (hasValidImage) {
|
|
1826
|
-
return
|
|
1823
|
+
return React__namespace.default.createElement("img", { className: imageClassName, src, alt });
|
|
1827
1824
|
} else {
|
|
1828
|
-
return
|
|
1825
|
+
return React__namespace.default.createElement(
|
|
1826
|
+
React__namespace.default.Fragment,
|
|
1827
|
+
null,
|
|
1828
|
+
React__namespace.default.createElement("span", { className: textClassName, "aria-hidden": true }, initials),
|
|
1829
|
+
React__namespace.default.createElement("span", { className: "ui-sr-only" }, alt)
|
|
1830
|
+
);
|
|
1829
1831
|
}
|
|
1830
1832
|
};
|
|
1831
|
-
return
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
size: PropTypes__default.default.oneOf([AVATAR_SIZE_OPTIONS.LARGE, AVATAR_SIZE_OPTIONS.MEDIUM, AVATAR_SIZE_OPTIONS.SMALL]),
|
|
1837
|
-
defaultImage: PropTypes__default.default.string,
|
|
1838
|
-
className: PropTypes__default.default.string
|
|
1839
|
-
};
|
|
1840
|
-
Avatar.defaultProps = {
|
|
1841
|
-
size: AVATAR_SIZE_OPTIONS.MEDIUM,
|
|
1842
|
-
defaultImage: null
|
|
1833
|
+
return React__namespace.default.createElement(
|
|
1834
|
+
"div",
|
|
1835
|
+
{ className: containerClassName },
|
|
1836
|
+
React__namespace.default.createElement("div", null, renderAvatar())
|
|
1837
|
+
);
|
|
1843
1838
|
};
|
|
1844
1839
|
|
|
1845
1840
|
const Badge = (props) => {
|