@elliemae/ds-notification-badge 3.16.0-rc.4 → 3.16.0-rc.6
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/cjs/NotificationBadge.js +25 -25
- package/dist/cjs/NotificationBadge.js.map +3 -3
- package/dist/cjs/index.js +6 -2
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/react-desc-prop-types.js +4 -0
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/style.js +30 -17
- package/dist/cjs/style.js.map +2 -2
- package/dist/esm/NotificationBadge.js +21 -25
- package/dist/esm/NotificationBadge.js.map +3 -3
- package/dist/esm/index.js +2 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/package.json +7 -0
- package/dist/esm/style.js +26 -17
- package/dist/esm/style.js.map +2 -2
- package/dist/types/NotificationBadge.d.ts +2 -2
- package/dist/types/index.d.ts +2 -2
- package/dist/types/style.d.ts +11 -14
- package/package.json +5 -5
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -30,10 +34,10 @@ __export(NotificationBadge_exports, {
|
|
|
30
34
|
module.exports = __toCommonJS(NotificationBadge_exports);
|
|
31
35
|
var React = __toESM(require("react"));
|
|
32
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
-
var import_react = require("react");
|
|
37
|
+
var import_react = __toESM(require("react"));
|
|
34
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
36
|
-
var import_style = require("./style");
|
|
39
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
40
|
+
var import_style = require("./style.js");
|
|
37
41
|
const getValueCharactersCount = (val) => String(val).length;
|
|
38
42
|
const NotificationBadge = (props) => {
|
|
39
43
|
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
@@ -44,41 +48,37 @@ const NotificationBadge = (props) => {
|
|
|
44
48
|
);
|
|
45
49
|
const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
46
50
|
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
|
|
51
|
+
const [renderBadge, setRenderBadge] = import_react.default.useState(false);
|
|
47
52
|
const Badge = type === "number" ? import_style.NumericBadge : import_style.DotBadge;
|
|
48
53
|
const relatedComponentRef = (0, import_react.useRef)(null);
|
|
49
|
-
const
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
let left = 0;
|
|
60
|
-
if (position === "right")
|
|
61
|
-
left = relatedComponentWidth / 2;
|
|
62
|
-
if (position === "left")
|
|
63
|
-
right = relatedComponentWidth / 2;
|
|
64
|
-
top = relatedComponentHeight / 2;
|
|
65
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Wrapper, { ...globalAttributes, children: [
|
|
66
|
-
renderBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
54
|
+
const wrapperComponentRef = (0, import_react.useRef)(null);
|
|
55
|
+
const badgeComponentRef = (0, import_react.useRef)(null);
|
|
56
|
+
import_react.default.useLayoutEffect(() => {
|
|
57
|
+
setRenderBadge(!!relatedComponentRef?.current || !Component);
|
|
58
|
+
}, [relatedComponentRef, relatedComponentRef?.current, Component]);
|
|
59
|
+
const top = relatedComponentRef?.current ? (relatedComponentRef?.current?.getBoundingClientRect().top || 0) - (wrapperComponentRef?.current?.getBoundingClientRect().top || 0) - (badgeComponentRef?.current?.getBoundingClientRect().height || 0) / 2 - 3 : 0;
|
|
60
|
+
const right = relatedComponentRef?.current ? (relatedComponentRef?.current?.getBoundingClientRect().right || 0) - (wrapperComponentRef?.current?.getBoundingClientRect().left || 0) - 3 : 0;
|
|
61
|
+
const left = relatedComponentRef?.current ? (wrapperComponentRef?.current?.getBoundingClientRect().right || 0) - (relatedComponentRef?.current?.getBoundingClientRect().right || 0) + (relatedComponentRef?.current?.getBoundingClientRect().width || 0) - 3 : 0;
|
|
62
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Wrapper, { ...globalAttributes, ref: wrapperComponentRef, children: [
|
|
63
|
+
renderBadge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
67
64
|
Badge,
|
|
68
65
|
{
|
|
66
|
+
ref: badgeComponentRef,
|
|
67
|
+
"data-position": position,
|
|
68
|
+
"data-type": type,
|
|
69
69
|
"data-testid": "ds-notification-badge",
|
|
70
70
|
color,
|
|
71
71
|
size,
|
|
72
72
|
value,
|
|
73
73
|
disabled,
|
|
74
74
|
top,
|
|
75
|
-
left,
|
|
76
|
-
right,
|
|
75
|
+
left: position === "left" ? left : null,
|
|
76
|
+
right: position === "right" ? right : null,
|
|
77
77
|
charCount: getValueCharactersCount(value),
|
|
78
78
|
children: type === "number" ? value : null
|
|
79
79
|
}
|
|
80
|
-
),
|
|
81
|
-
Component
|
|
80
|
+
) : null,
|
|
81
|
+
Component ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { innerRef: relatedComponentRef }) : null
|
|
82
82
|
] });
|
|
83
83
|
};
|
|
84
84
|
NotificationBadge.propTypes = import_react_desc_prop_types.NotificationBadgePropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NotificationBadge.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, {
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\n\nconst getValueCharactersCount = (val: string | number): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component)\n }, [relatedComponentRef, relatedComponentRef?.current, Component]);\n\n const top = relatedComponentRef?.current\n ? (relatedComponentRef?.current?.getBoundingClientRect().top || 0) -\n (wrapperComponentRef?.current?.getBoundingClientRect().top || 0) -\n (badgeComponentRef?.current?.getBoundingClientRect().height || 0) / 2 -\n 3\n : 0;\n const right = relatedComponentRef?.current\n ? (relatedComponentRef?.current?.getBoundingClientRect().right || 0) -\n (wrapperComponentRef?.current?.getBoundingClientRect().left || 0) -\n 3\n : 0;\n const left = relatedComponentRef?.current\n ? (wrapperComponentRef?.current?.getBoundingClientRect().right || 0) -\n (relatedComponentRef?.current?.getBoundingClientRect().right || 0) +\n (relatedComponentRef?.current?.getBoundingClientRect().width || 0) -\n 3\n : 0;\n\n return (\n <Wrapper {...globalAttributes} ref={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n ref={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={position === 'left' ? left : null}\n right={position === 'right' ? right : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null }\n {Component ? <Component innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDnB;AApDJ,mBAA8B;AAC9B,8BAKO;AAEP,mCAAyD;AACzD,mBAAgD;AAEhD,MAAM,0BAA0B,CAAC,QAAiC,OAAO,GAAG,EAAE;AAE9E,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,wBAAoB,sDAA6B,OAAO,yCAAY;AAC1E;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,uBAAmB,gDAAuB,IAAI;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1D,QAAM,QAAQ,SAAS,WAAW,4BAAe;AACjD,QAAM,0BAAsB,qBAAwB,IAAI;AACxD,QAAM,0BAAsB,qBAAuB,IAAI;AACvD,QAAM,wBAAoB,qBAAuB,IAAI;AAErD,eAAAA,QAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,qBAAqB,SAAS,SAAS,CAAC;AAEjE,QAAM,MAAM,qBAAqB,WAC5B,qBAAqB,SAAS,sBAAsB,EAAE,OAAO,MAC7D,qBAAqB,SAAS,sBAAsB,EAAE,OAAO,MAC7D,mBAAmB,SAAS,sBAAsB,EAAE,UAAU,KAAK,IACpE,IACA;AACJ,QAAM,QAAQ,qBAAqB,WAC9B,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,QAAQ,KAC/D,IACA;AACJ,QAAM,OAAO,qBAAqB,WAC7B,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,KAChE,IACA;AAEJ,SACE,6CAAC,wBAAS,GAAG,kBAAkB,KAAK,qBACjC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,4CAAC,aAAU,UAAU,qBAAqB,IAAK;AAAA,KAC9D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -19,6 +19,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
19
19
|
};
|
|
20
20
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
21
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
22
26
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
23
27
|
mod
|
|
24
28
|
));
|
|
@@ -29,6 +33,6 @@ __export(src_exports, {
|
|
|
29
33
|
});
|
|
30
34
|
module.exports = __toCommonJS(src_exports);
|
|
31
35
|
var React = __toESM(require("react"));
|
|
32
|
-
__reExport(src_exports, require("./NotificationBadge"), module.exports);
|
|
33
|
-
var import_NotificationBadge = require("./NotificationBadge");
|
|
36
|
+
__reExport(src_exports, require("./NotificationBadge.js"), module.exports);
|
|
37
|
+
var import_NotificationBadge = require("./NotificationBadge.js");
|
|
34
38
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './NotificationBadge';\n// eslint-disable-next-line no-restricted-exports\nexport { NotificationBadge as default } from './NotificationBadge';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["export * from './NotificationBadge.js';\n// eslint-disable-next-line no-restricted-exports\nexport { NotificationBadge as default } from './NotificationBadge.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,mCAAd;AAEA,+BAA6C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSNotificationBadgeT {\n interface ComponentT {\n innerRef: React.RefObject<HTMLSpanElement>;\n }\n type BadgeType = 'number' | 'dot';\n type BadgeSize = 's' | 'l';\n type BadgePosition = 'left' | 'right';\n\n export interface Props {\n [property: string]: unknown;\n type?: BadgeType;\n value?: number | string;\n size?: BadgeSize;\n disabled?: boolean;\n position?: BadgePosition;\n Component?: (propsT: ComponentT) => JSX.Element;\n color?: string;\n }\n}\n\nexport const defaultProps: DSNotificationBadgeT.Props = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n\nexport const NotificationBadgePropTypes = {\n ...globalAttributesPropTypes,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('value of the numeric badge'),\n type: PropTypes.oneOf(['number', 'dot']).description('type of badge: number or dot'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n position: PropTypes.oneOf(['left', 'right']).description('position of the badge with the related component'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n Component: PropTypes.func.description('Related component'),\n color: PropTypes.string.description('Badge background color value'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAqD;AAsB9C,MAAM,eAA2C;AAAA,EACtD,MAAM;AAAA,EACN,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,6BAA6B;AAAA,EACxC,GAAG;AAAA,EACH,OAAO,kCAAU,UAAU,CAAC,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY,4BAA4B;AAAA,EACzG,MAAM,kCAAU,MAAM,CAAC,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AAAA,EACnF,MAAM,kCAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,2BAA2B;AAAA,EACzE,UAAU,kCAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAC3G,UAAU,kCAAU,KAAK,YAAY,+BAA+B;AAAA,EACpE,WAAW,kCAAU,KAAK,YAAY,mBAAmB;AAAA,EACzD,OAAO,kCAAU,OAAO,YAAY,8BAA8B;AACpE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/style.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -32,24 +36,41 @@ __export(style_exports, {
|
|
|
32
36
|
module.exports = __toCommonJS(style_exports);
|
|
33
37
|
var React = __toESM(require("react"));
|
|
34
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
|
+
const magicNumbersWidth = {
|
|
40
|
+
l: 30,
|
|
41
|
+
l1: 21,
|
|
42
|
+
d: 15
|
|
43
|
+
};
|
|
44
|
+
const getWidth = (size, charCount) => {
|
|
45
|
+
if (size === "l" && charCount > 1)
|
|
46
|
+
return magicNumbersWidth.l;
|
|
47
|
+
if (size === "l" && charCount <= 1)
|
|
48
|
+
return magicNumbersWidth.l1;
|
|
49
|
+
if (size === "s" && charCount > 1)
|
|
50
|
+
return magicNumbersWidth.l1;
|
|
51
|
+
return magicNumbersWidth.d;
|
|
52
|
+
};
|
|
35
53
|
const Wrapper = import_ds_system.styled.div`
|
|
36
|
-
display: flex;
|
|
37
|
-
flex-direction: column;
|
|
38
|
-
justify-content: center;
|
|
39
|
-
align-items: center;
|
|
40
54
|
width: fit-content;
|
|
55
|
+
height: fit-content;
|
|
56
|
+
position: relative;
|
|
41
57
|
`;
|
|
42
58
|
const GenericBadge = import_ds_system.styled.span`
|
|
43
|
-
position:
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
59
|
+
position: absolute;
|
|
60
|
+
display: flex;
|
|
61
|
+
justify-content: center;
|
|
62
|
+
align-items: center;
|
|
63
|
+
line-height: 1;
|
|
64
|
+
top: ${({ top }) => `${top}px`};
|
|
65
|
+
left: ${({ right }) => right ? `${right}px` : `unset`};
|
|
66
|
+
right: ${({ left }) => left ? `${left}px` : `unset`};
|
|
47
67
|
`;
|
|
48
68
|
const NumericBadge = (0, import_ds_system.styled)(GenericBadge)`
|
|
49
69
|
display: flex;
|
|
50
70
|
justify-content: center;
|
|
51
71
|
align-items: center;
|
|
52
72
|
width: fit-content;
|
|
73
|
+
white-space: nowrap;
|
|
53
74
|
color: #fff;
|
|
54
75
|
padding: ${({ charCount }) => charCount > 1 ? "0 5px" : "0"};
|
|
55
76
|
background-color: ${({ disabled, color, theme }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.danger["900"]};
|
|
@@ -57,15 +78,7 @@ const NumericBadge = (0, import_ds_system.styled)(GenericBadge)`
|
|
|
57
78
|
font-size: ${({ size }) => size === "l" ? "16px" : "12px"};
|
|
58
79
|
font-weight: ${({ size }) => size === "l" ? "400" : "600"};
|
|
59
80
|
height: ${({ size }) => size === "l" ? "21px" : "15px"};
|
|
60
|
-
min-width: ${({ size, charCount }) => {
|
|
61
|
-
if (size === "l" && charCount > 1)
|
|
62
|
-
return "30px";
|
|
63
|
-
if (size === "l" && charCount <= 1)
|
|
64
|
-
return "21px";
|
|
65
|
-
if (size === "s" && charCount > 1)
|
|
66
|
-
return "21px";
|
|
67
|
-
return "15px";
|
|
68
|
-
}};
|
|
81
|
+
min-width: ${({ size, charCount }) => `${getWidth(size, charCount)}px`};
|
|
69
82
|
`;
|
|
70
83
|
const DotBadge = (0, import_ds_system.styled)(GenericBadge)`
|
|
71
84
|
background-color: ${({ disabled, theme, color }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.brand[500]};
|
package/dist/cjs/style.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/style.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n theme: Theme;\n}\n\nconst magicNumbersWidth = {\n l: 30,\n l1: 21,\n d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n width: fit-content;\n height: fit-content;\n position: relative;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n left: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n right: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n white-space: nowrap;\n color: #fff;\n padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAevB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO,kBAAkB;AAC7D,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,SAAO,kBAAkB;AAC3B;AAEO,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAM1B,CAAC,EAAE,IAAI,MAAqB,GAAG;AAAA,UAC9B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,WACrD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA;AAGvD,MAAM,mBAAe,yBAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,UAAU;AAAA,sBACpD,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,mBAC5D,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,SAAS;AAAA,eAChE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,iBACpD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,QAAQ;AAAA,YAC1D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,eACnD,CAAC,EAAE,MAAM,UAAU,MAAqB,GAAG,SAAS,MAAM,SAAS;AAAA;AAG3E,MAAM,eAAW,yBAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA,WACjE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,YACrD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import React2, { useRef } from "react";
|
|
4
4
|
import {
|
|
5
5
|
useMemoMergePropsWithDefault,
|
|
6
6
|
useValidateTypescriptPropTypes,
|
|
7
7
|
describe,
|
|
8
8
|
useGetGlobalAttributes
|
|
9
9
|
} from "@elliemae/ds-props-helpers";
|
|
10
|
-
import { NotificationBadgePropTypes, defaultProps } from "./react-desc-prop-types";
|
|
11
|
-
import { Wrapper, NumericBadge, DotBadge } from "./style";
|
|
10
|
+
import { NotificationBadgePropTypes, defaultProps } from "./react-desc-prop-types.js";
|
|
11
|
+
import { Wrapper, NumericBadge, DotBadge } from "./style.js";
|
|
12
12
|
const getValueCharactersCount = (val) => String(val).length;
|
|
13
13
|
const NotificationBadge = (props) => {
|
|
14
14
|
const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
|
|
@@ -19,41 +19,37 @@ const NotificationBadge = (props) => {
|
|
|
19
19
|
);
|
|
20
20
|
const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
21
21
|
const globalAttributes = useGetGlobalAttributes(rest);
|
|
22
|
+
const [renderBadge, setRenderBadge] = React2.useState(false);
|
|
22
23
|
const Badge = type === "number" ? NumericBadge : DotBadge;
|
|
23
24
|
const relatedComponentRef = useRef(null);
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
let left = 0;
|
|
35
|
-
if (position === "right")
|
|
36
|
-
left = relatedComponentWidth / 2;
|
|
37
|
-
if (position === "left")
|
|
38
|
-
right = relatedComponentWidth / 2;
|
|
39
|
-
top = relatedComponentHeight / 2;
|
|
40
|
-
return /* @__PURE__ */ jsxs(Wrapper, { ...globalAttributes, children: [
|
|
41
|
-
renderBadge && /* @__PURE__ */ jsx(
|
|
25
|
+
const wrapperComponentRef = useRef(null);
|
|
26
|
+
const badgeComponentRef = useRef(null);
|
|
27
|
+
React2.useLayoutEffect(() => {
|
|
28
|
+
setRenderBadge(!!relatedComponentRef?.current || !Component);
|
|
29
|
+
}, [relatedComponentRef, relatedComponentRef?.current, Component]);
|
|
30
|
+
const top = relatedComponentRef?.current ? (relatedComponentRef?.current?.getBoundingClientRect().top || 0) - (wrapperComponentRef?.current?.getBoundingClientRect().top || 0) - (badgeComponentRef?.current?.getBoundingClientRect().height || 0) / 2 - 3 : 0;
|
|
31
|
+
const right = relatedComponentRef?.current ? (relatedComponentRef?.current?.getBoundingClientRect().right || 0) - (wrapperComponentRef?.current?.getBoundingClientRect().left || 0) - 3 : 0;
|
|
32
|
+
const left = relatedComponentRef?.current ? (wrapperComponentRef?.current?.getBoundingClientRect().right || 0) - (relatedComponentRef?.current?.getBoundingClientRect().right || 0) + (relatedComponentRef?.current?.getBoundingClientRect().width || 0) - 3 : 0;
|
|
33
|
+
return /* @__PURE__ */ jsxs(Wrapper, { ...globalAttributes, ref: wrapperComponentRef, children: [
|
|
34
|
+
renderBadge ? /* @__PURE__ */ jsx(
|
|
42
35
|
Badge,
|
|
43
36
|
{
|
|
37
|
+
ref: badgeComponentRef,
|
|
38
|
+
"data-position": position,
|
|
39
|
+
"data-type": type,
|
|
44
40
|
"data-testid": "ds-notification-badge",
|
|
45
41
|
color,
|
|
46
42
|
size,
|
|
47
43
|
value,
|
|
48
44
|
disabled,
|
|
49
45
|
top,
|
|
50
|
-
left,
|
|
51
|
-
right,
|
|
46
|
+
left: position === "left" ? left : null,
|
|
47
|
+
right: position === "right" ? right : null,
|
|
52
48
|
charCount: getValueCharactersCount(value),
|
|
53
49
|
children: type === "number" ? value : null
|
|
54
50
|
}
|
|
55
|
-
),
|
|
56
|
-
Component
|
|
51
|
+
) : null,
|
|
52
|
+
Component ? /* @__PURE__ */ jsx(Component, { innerRef: relatedComponentRef }) : null
|
|
57
53
|
] });
|
|
58
54
|
};
|
|
59
55
|
NotificationBadge.propTypes = NotificationBadgePropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/NotificationBadge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\n\nconst getValueCharactersCount = (val: string | number): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component)\n }, [relatedComponentRef, relatedComponentRef?.current, Component]);\n\n const top = relatedComponentRef?.current\n ? (relatedComponentRef?.current?.getBoundingClientRect().top || 0) -\n (wrapperComponentRef?.current?.getBoundingClientRect().top || 0) -\n (badgeComponentRef?.current?.getBoundingClientRect().height || 0) / 2 -\n 3\n : 0;\n const right = relatedComponentRef?.current\n ? (relatedComponentRef?.current?.getBoundingClientRect().right || 0) -\n (wrapperComponentRef?.current?.getBoundingClientRect().left || 0) -\n 3\n : 0;\n const left = relatedComponentRef?.current\n ? (wrapperComponentRef?.current?.getBoundingClientRect().right || 0) -\n (relatedComponentRef?.current?.getBoundingClientRect().right || 0) +\n (relatedComponentRef?.current?.getBoundingClientRect().width || 0) -\n 3\n : 0;\n\n return (\n <Wrapper {...globalAttributes} ref={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n ref={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={position === 'left' ? left : null}\n right={position === 'right' ? right : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null }\n {Component ? <Component innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACqDnB,SAEI,KAFJ;AApDJ,OAAOA,UAAS,cAAc;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAEhD,MAAM,0BAA0B,CAAC,QAAiC,OAAO,GAAG,EAAE;AAE9E,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,mBAAmB,uBAAuB,IAAI;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAS,KAAK;AAC1D,QAAM,QAAQ,SAAS,WAAW,eAAe;AACjD,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,sBAAsB,OAAuB,IAAI;AACvD,QAAM,oBAAoB,OAAuB,IAAI;AAErD,EAAAA,OAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,qBAAqB,SAAS,SAAS,CAAC;AAEjE,QAAM,MAAM,qBAAqB,WAC5B,qBAAqB,SAAS,sBAAsB,EAAE,OAAO,MAC7D,qBAAqB,SAAS,sBAAsB,EAAE,OAAO,MAC7D,mBAAmB,SAAS,sBAAsB,EAAE,UAAU,KAAK,IACpE,IACA;AACJ,QAAM,QAAQ,qBAAqB,WAC9B,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,QAAQ,KAC/D,IACA;AACJ,QAAM,OAAO,qBAAqB,WAC7B,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,MAC/D,qBAAqB,SAAS,sBAAsB,EAAE,SAAS,KAChE,IACA;AAEJ,SACE,qBAAC,WAAS,GAAG,kBAAkB,KAAK,qBACjC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,oBAAC,aAAU,UAAU,qBAAqB,IAAK;AAAA,KAC9D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
export * from "./NotificationBadge";
|
|
3
|
-
import { NotificationBadge } from "./NotificationBadge";
|
|
2
|
+
export * from "./NotificationBadge.js";
|
|
3
|
+
import { NotificationBadge } from "./NotificationBadge.js";
|
|
4
4
|
export {
|
|
5
5
|
NotificationBadge as default
|
|
6
6
|
};
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './NotificationBadge';\n// eslint-disable-next-line no-restricted-exports\nexport { NotificationBadge as default } from './NotificationBadge';\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './NotificationBadge.js';\n// eslint-disable-next-line no-restricted-exports\nexport { NotificationBadge as default } from './NotificationBadge.js';\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AAEd,SAA8B,yBAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/style.js
CHANGED
|
@@ -1,23 +1,40 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled } from "@elliemae/ds-system";
|
|
3
|
+
const magicNumbersWidth = {
|
|
4
|
+
l: 30,
|
|
5
|
+
l1: 21,
|
|
6
|
+
d: 15
|
|
7
|
+
};
|
|
8
|
+
const getWidth = (size, charCount) => {
|
|
9
|
+
if (size === "l" && charCount > 1)
|
|
10
|
+
return magicNumbersWidth.l;
|
|
11
|
+
if (size === "l" && charCount <= 1)
|
|
12
|
+
return magicNumbersWidth.l1;
|
|
13
|
+
if (size === "s" && charCount > 1)
|
|
14
|
+
return magicNumbersWidth.l1;
|
|
15
|
+
return magicNumbersWidth.d;
|
|
16
|
+
};
|
|
3
17
|
const Wrapper = styled.div`
|
|
4
|
-
display: flex;
|
|
5
|
-
flex-direction: column;
|
|
6
|
-
justify-content: center;
|
|
7
|
-
align-items: center;
|
|
8
18
|
width: fit-content;
|
|
19
|
+
height: fit-content;
|
|
20
|
+
position: relative;
|
|
9
21
|
`;
|
|
10
22
|
const GenericBadge = styled.span`
|
|
11
|
-
position:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
23
|
+
position: absolute;
|
|
24
|
+
display: flex;
|
|
25
|
+
justify-content: center;
|
|
26
|
+
align-items: center;
|
|
27
|
+
line-height: 1;
|
|
28
|
+
top: ${({ top }) => `${top}px`};
|
|
29
|
+
left: ${({ right }) => right ? `${right}px` : `unset`};
|
|
30
|
+
right: ${({ left }) => left ? `${left}px` : `unset`};
|
|
15
31
|
`;
|
|
16
32
|
const NumericBadge = styled(GenericBadge)`
|
|
17
33
|
display: flex;
|
|
18
34
|
justify-content: center;
|
|
19
35
|
align-items: center;
|
|
20
36
|
width: fit-content;
|
|
37
|
+
white-space: nowrap;
|
|
21
38
|
color: #fff;
|
|
22
39
|
padding: ${({ charCount }) => charCount > 1 ? "0 5px" : "0"};
|
|
23
40
|
background-color: ${({ disabled, color, theme }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.danger["900"]};
|
|
@@ -25,15 +42,7 @@ const NumericBadge = styled(GenericBadge)`
|
|
|
25
42
|
font-size: ${({ size }) => size === "l" ? "16px" : "12px"};
|
|
26
43
|
font-weight: ${({ size }) => size === "l" ? "400" : "600"};
|
|
27
44
|
height: ${({ size }) => size === "l" ? "21px" : "15px"};
|
|
28
|
-
min-width: ${({ size, charCount }) => {
|
|
29
|
-
if (size === "l" && charCount > 1)
|
|
30
|
-
return "30px";
|
|
31
|
-
if (size === "l" && charCount <= 1)
|
|
32
|
-
return "21px";
|
|
33
|
-
if (size === "s" && charCount > 1)
|
|
34
|
-
return "21px";
|
|
35
|
-
return "15px";
|
|
36
|
-
}};
|
|
45
|
+
min-width: ${({ size, charCount }) => `${getWidth(size, charCount)}px`};
|
|
37
46
|
`;
|
|
38
47
|
const DotBadge = styled(GenericBadge)`
|
|
39
48
|
background-color: ${({ disabled, theme, color }) => disabled ? theme.colors.neutral["500"] : color || theme.colors.brand[500]};
|
package/dist/esm/style.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n theme: Theme;\n}\n\nconst magicNumbersWidth = {\n l: 30,\n l1: 21,\n d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n width: fit-content;\n height: fit-content;\n position: relative;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n left: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n right: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n white-space: nowrap;\n color: #fff;\n padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAevB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO,kBAAkB;AAC7D,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO,kBAAkB;AAC5D,SAAO,kBAAkB;AAC3B;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAM1B,CAAC,EAAE,IAAI,MAAqB,GAAG;AAAA,UAC9B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,WACrD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA;AAGvD,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,UAAU;AAAA,sBACpD,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK;AAAA,mBAC5D,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,SAAS;AAAA,eAChE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,iBACpD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,QAAQ;AAAA,YAC1D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,eACnD,CAAC,EAAE,MAAM,UAAU,MAAqB,GAAG,SAAS,MAAM,SAAS;AAAA;AAG3E,MAAM,WAAW,OAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG;AAAA,WACjE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA,YACrD,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { DSNotificationBadgeT } from './react-desc-prop-types';
|
|
2
|
+
import type { DSNotificationBadgeT } from './react-desc-prop-types.js';
|
|
3
3
|
declare const NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props>;
|
|
4
|
-
declare const NotificationBadgeWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").DocumentedReactComponent<DSNotificationBadgeT.Props>;
|
|
4
|
+
declare const NotificationBadgeWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSNotificationBadgeT.Props>;
|
|
5
5
|
export { NotificationBadge, NotificationBadgeWithSchema };
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './NotificationBadge';
|
|
2
|
-
export { NotificationBadge as default } from './NotificationBadge';
|
|
1
|
+
export * from './NotificationBadge.js';
|
|
2
|
+
export { NotificationBadge as default } from './NotificationBadge.js';
|
package/dist/types/style.d.ts
CHANGED
|
@@ -1,20 +1,17 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
interface
|
|
1
|
+
import type { Theme } from '@elliemae/pui-theme';
|
|
2
|
+
interface NumericBadgeT {
|
|
3
3
|
top: number;
|
|
4
4
|
left: number;
|
|
5
5
|
right: number;
|
|
6
|
+
charCount: number;
|
|
7
|
+
size?: string;
|
|
8
|
+
value?: number | string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
color?: string;
|
|
11
|
+
theme: Theme;
|
|
6
12
|
}
|
|
7
13
|
export declare const Wrapper: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
|
|
8
|
-
export declare const GenericBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> &
|
|
9
|
-
export declare const NumericBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> &
|
|
10
|
-
|
|
11
|
-
left: number;
|
|
12
|
-
right: number;
|
|
13
|
-
charCount: number;
|
|
14
|
-
size?: string | undefined;
|
|
15
|
-
value?: string | number | undefined;
|
|
16
|
-
disabled?: boolean | undefined;
|
|
17
|
-
color?: string | undefined;
|
|
18
|
-
}, never>;
|
|
19
|
-
export declare const DotBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & DSNotificationBadgeT.Props & StyledGenericBadgeT, never>;
|
|
14
|
+
export declare const GenericBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & NumericBadgeT, never>;
|
|
15
|
+
export declare const NumericBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & NumericBadgeT, never>;
|
|
16
|
+
export declare const DotBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & NumericBadgeT, never>;
|
|
20
17
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-notification-badge",
|
|
3
|
-
"version": "3.16.0-rc.
|
|
3
|
+
"version": "3.16.0-rc.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Notification Badge",
|
|
6
6
|
"files": [
|
|
@@ -47,13 +47,13 @@
|
|
|
47
47
|
"indent": 4
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@elliemae/ds-props-helpers": "3.16.0-rc.
|
|
51
|
-
"@elliemae/ds-system": "3.16.0-rc.
|
|
52
|
-
"@elliemae/ds-utilities": "3.16.0-rc.
|
|
50
|
+
"@elliemae/ds-props-helpers": "3.16.0-rc.6",
|
|
51
|
+
"@elliemae/ds-system": "3.16.0-rc.6",
|
|
52
|
+
"@elliemae/ds-utilities": "3.16.0-rc.6"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@testing-library/react": "~12.1.3",
|
|
56
|
-
"styled-components": "~5.3.
|
|
56
|
+
"styled-components": "~5.3.9"
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"react": "^17.0.2",
|