@elliemae/ds-notification-badge 3.17.0-next.19 → 3.17.0-next.20
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 +7 -4
- package/dist/cjs/NotificationBadge.js.map +2 -2
- package/dist/cjs/style.js +1 -1
- package/dist/cjs/style.js.map +2 -2
- package/dist/esm/NotificationBadge.js +7 -4
- package/dist/esm/NotificationBadge.js.map +2 -2
- package/dist/esm/style.js +1 -1
- package/dist/esm/style.js.map +2 -2
- package/dist/types/style.d.ts +1 -0
- package/package.json +3 -3
|
@@ -50,7 +50,8 @@ const NotificationBadge = (props) => {
|
|
|
50
50
|
const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
51
51
|
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
|
|
52
52
|
const [renderBadge, setRenderBadge] = import_react.default.useState(false);
|
|
53
|
-
const
|
|
53
|
+
const isNumericBadge = type === "number";
|
|
54
|
+
const Badge = isNumericBadge ? import_style.NumericBadge : import_style.DotBadge;
|
|
54
55
|
const relatedComponentRef = (0, import_react.useRef)(null);
|
|
55
56
|
const wrapperComponentRef = (0, import_react.useRef)(null);
|
|
56
57
|
const badgeComponentRef = (0, import_react.useRef)(null);
|
|
@@ -61,13 +62,15 @@ const NotificationBadge = (props) => {
|
|
|
61
62
|
const spaceLeft = (0, import_helpers.getSpaceLeft)(relatedComputedStyle);
|
|
62
63
|
const spaceRight = (0, import_helpers.getSpaceRight)(relatedComputedStyle);
|
|
63
64
|
const spaceTop = (0, import_helpers.getSpaceTop)(relatedComputedStyle);
|
|
64
|
-
const
|
|
65
|
-
const
|
|
66
|
-
const
|
|
65
|
+
const factor = isNumericBadge ? size === "l" ? 9 : 5 : size === "l" ? 5 : 3;
|
|
66
|
+
const top = relatedComponentRef?.current ? spaceTop - factor : 0;
|
|
67
|
+
const left = relatedComponentRef?.current ? spaceLeft - factor : 0;
|
|
68
|
+
const right = relatedComponentRef?.current ? spaceRight - factor : 0;
|
|
67
69
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_style.Wrapper, { ...globalAttributes, ref: wrapperComponentRef, children: [
|
|
68
70
|
renderBadge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
71
|
Badge,
|
|
70
72
|
{
|
|
73
|
+
"data-related-component": !!Component ? "true" : "false",
|
|
71
74
|
ref: badgeComponentRef,
|
|
72
75
|
"data-position": position,
|
|
73
76
|
"data-type": type,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NotificationBadge.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/restrict-plus-operands */\n/* eslint-disable complexity */\nimport 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';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/restrict-plus-operands */\n/* eslint-disable complexity */\nimport 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';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.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 isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<Element>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper {...globalAttributes} ref={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n data-related-component={!!Component ? 'true' : 'false'}\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 right={position === 'right' ? right : null}\n left={position === 'left' ? left : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null}\n {Component ? <Component data-testid=\"ds-notification-badge-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;ADiDnB;AA9CJ,mBAA8B;AAC9B,8BAKO;AAEP,mCAAyD;AACzD,mBAAgD;AAChD,qBAAyD;AAEzD,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,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,4BAAe;AAC9C,QAAM,0BAAsB,qBAAwB,IAAI;AACxD,QAAM,0BAAsB,qBAAgB,IAAI;AAChD,QAAM,wBAAoB,qBAAuB,IAAI;AAErD,eAAAA,QAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,gBAAY,6BAAa,oBAAoB;AACnD,QAAM,iBAAa,8BAAc,oBAAoB;AACrD,QAAM,eAAW,4BAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE,6CAAC,wBAAS,GAAG,kBAAkB,KAAK,qBACjC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,CAAC,CAAC,YAAY,SAAS;AAAA,QAC/C,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,4CAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/style.js
CHANGED
|
@@ -57,7 +57,7 @@ const Wrapper = import_ds_system.styled.div`
|
|
|
57
57
|
z-index: 0;
|
|
58
58
|
`;
|
|
59
59
|
const GenericBadge = import_ds_system.styled.span`
|
|
60
|
-
position: absolute;
|
|
60
|
+
position: ${(props) => props["data-related-component"] === "true" ? "absolute" : "inherit"};
|
|
61
61
|
display: flex;
|
|
62
62
|
justify-content: center;
|
|
63
63
|
align-items: center;
|
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 { 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 z-index: 0;\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 right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n z-index: ${({ theme }) => theme.zIndex.tooltip};\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;
|
|
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 ['data-related-component']: 'true' | 'false';\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 z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n z-index: ${({ theme }) => theme.zIndex.tooltip};\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;AAgBvB,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;AAAA;AAOvB,MAAM,eAAe,wBAAO;AAAA,cACrB,CAAC,UAAW,MAAM,wBAAwB,MAAM,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,SAK3E,CAAC,EAAE,IAAI,MAAqB,GAAG;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,UACvD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA,aAChD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO;AAAA;AAGlC,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
|
}
|
|
@@ -21,7 +21,8 @@ const NotificationBadge = (props) => {
|
|
|
21
21
|
const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
22
22
|
const globalAttributes = useGetGlobalAttributes(rest);
|
|
23
23
|
const [renderBadge, setRenderBadge] = React2.useState(false);
|
|
24
|
-
const
|
|
24
|
+
const isNumericBadge = type === "number";
|
|
25
|
+
const Badge = isNumericBadge ? NumericBadge : DotBadge;
|
|
25
26
|
const relatedComponentRef = useRef(null);
|
|
26
27
|
const wrapperComponentRef = useRef(null);
|
|
27
28
|
const badgeComponentRef = useRef(null);
|
|
@@ -32,13 +33,15 @@ const NotificationBadge = (props) => {
|
|
|
32
33
|
const spaceLeft = getSpaceLeft(relatedComputedStyle);
|
|
33
34
|
const spaceRight = getSpaceRight(relatedComputedStyle);
|
|
34
35
|
const spaceTop = getSpaceTop(relatedComputedStyle);
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
const
|
|
36
|
+
const factor = isNumericBadge ? size === "l" ? 9 : 5 : size === "l" ? 5 : 3;
|
|
37
|
+
const top = relatedComponentRef?.current ? spaceTop - factor : 0;
|
|
38
|
+
const left = relatedComponentRef?.current ? spaceLeft - factor : 0;
|
|
39
|
+
const right = relatedComponentRef?.current ? spaceRight - factor : 0;
|
|
38
40
|
return /* @__PURE__ */ jsxs(Wrapper, { ...globalAttributes, ref: wrapperComponentRef, children: [
|
|
39
41
|
renderBadge ? /* @__PURE__ */ jsx(
|
|
40
42
|
Badge,
|
|
41
43
|
{
|
|
44
|
+
"data-related-component": !!Component ? "true" : "false",
|
|
42
45
|
ref: badgeComponentRef,
|
|
43
46
|
"data-position": position,
|
|
44
47
|
"data-type": type,
|
|
@@ -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", "/* eslint-disable @typescript-eslint/restrict-plus-operands */\n/* eslint-disable complexity */\nimport 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';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/restrict-plus-operands */\n/* eslint-disable complexity */\nimport 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';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.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 isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<Element>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper {...globalAttributes} ref={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n data-related-component={!!Component ? 'true' : 'false'}\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 right={position === 'right' ? right : null}\n left={position === 'left' ? left : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null}\n {Component ? <Component data-testid=\"ds-notification-badge-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;ACiDnB,SAEI,KAFJ;AA9CJ,OAAOA,UAAS,cAAc;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAChD,SAAS,cAAc,eAAe,mBAAmB;AAEzD,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,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,eAAe;AAC9C,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,sBAAsB,OAAgB,IAAI;AAChD,QAAM,oBAAoB,OAAuB,IAAI;AAErD,EAAAA,OAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,YAAY,aAAa,oBAAoB;AACnD,QAAM,aAAa,cAAc,oBAAoB;AACrD,QAAM,WAAW,YAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE,qBAAC,WAAS,GAAG,kBAAkB,KAAK,qBACjC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,CAAC,CAAC,YAAY,SAAS;AAAA,QAC/C,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,oBAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/style.js
CHANGED
|
@@ -21,7 +21,7 @@ const Wrapper = styled.div`
|
|
|
21
21
|
z-index: 0;
|
|
22
22
|
`;
|
|
23
23
|
const GenericBadge = styled.span`
|
|
24
|
-
position: absolute;
|
|
24
|
+
position: ${(props) => props["data-related-component"] === "true" ? "absolute" : "inherit"};
|
|
25
25
|
display: flex;
|
|
26
26
|
justify-content: center;
|
|
27
27
|
align-items: center;
|
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 { 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 z-index: 0;\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 right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n z-index: ${({ theme }) => theme.zIndex.tooltip};\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;
|
|
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 ['data-related-component']: 'true' | 'false';\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 z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n z-index: ${({ theme }) => theme.zIndex.tooltip};\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;AAgBvB,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;AAAA;AAOvB,MAAM,eAAe,OAAO;AAAA,cACrB,CAAC,UAAW,MAAM,wBAAwB,MAAM,SAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,SAK3E,CAAC,EAAE,IAAI,MAAqB,GAAG;AAAA,WAC7B,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,YAAY;AAAA,UACvD,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,WAAW;AAAA,aAChD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO;AAAA;AAGlC,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
|
}
|
package/dist/types/style.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ interface NumericBadgeT {
|
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
color?: string;
|
|
12
12
|
theme: Theme;
|
|
13
|
+
['data-related-component']: 'true' | 'false';
|
|
13
14
|
}
|
|
14
15
|
export declare const Wrapper: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
|
|
15
16
|
export declare const GenericBadge: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & NumericBadgeT, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-notification-badge",
|
|
3
|
-
"version": "3.17.0-next.
|
|
3
|
+
"version": "3.17.0-next.20",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Notification Badge",
|
|
6
6
|
"files": [
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@elliemae/pui-theme": "~2.7.0",
|
|
51
|
-
"@elliemae/ds-props-helpers": "3.17.0-next.
|
|
52
|
-
"@elliemae/ds-system": "3.17.0-next.
|
|
51
|
+
"@elliemae/ds-props-helpers": "3.17.0-next.20",
|
|
52
|
+
"@elliemae/ds-system": "3.17.0-next.20"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@testing-library/react": "~12.1.3",
|