@elliemae/ds-notification-badge 3.16.0-next.1 → 3.16.0-next.10
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 -7
- package/dist/cjs/NotificationBadge.js.map +2 -2
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/react-desc-prop-types.js +9 -9
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/style.js.map +1 -1
- package/dist/esm/NotificationBadge.js +3 -3
- package/dist/esm/NotificationBadge.js.map +2 -2
- 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/react-desc-prop-types.js +1 -1
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/esm/style.js.map +1 -1
- package/dist/types/NotificationBadge.d.ts +2 -2
- package/dist/types/index.d.ts +2 -2
- package/dist/types/react-desc-prop-types.d.ts +366 -366
- package/dist/types/style.d.ts +1 -1
- package/package.json +5 -4
|
@@ -31,19 +31,19 @@ module.exports = __toCommonJS(NotificationBadge_exports);
|
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var import_react = require("react");
|
|
34
|
-
var
|
|
35
|
-
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
36
|
-
var import_style = require("./style");
|
|
34
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
35
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
36
|
+
var import_style = require("./style.js");
|
|
37
37
|
const getValueCharactersCount = (val) => String(val).length;
|
|
38
38
|
const NotificationBadge = (props) => {
|
|
39
|
-
const propsWithDefaults = (0,
|
|
40
|
-
(0,
|
|
39
|
+
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
40
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(
|
|
41
41
|
propsWithDefaults,
|
|
42
42
|
import_react_desc_prop_types.NotificationBadgePropTypes,
|
|
43
43
|
"DSNotificationBadge"
|
|
44
44
|
);
|
|
45
45
|
const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;
|
|
46
|
-
const globalAttributes = (0,
|
|
46
|
+
const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest);
|
|
47
47
|
const Badge = type === "number" ? import_style.NumericBadge : import_style.DotBadge;
|
|
48
48
|
const relatedComponentRef = (0, import_react.useRef)(null);
|
|
49
49
|
const renderBadge = relatedComponentRef?.current || !Component;
|
|
@@ -83,6 +83,6 @@ const NotificationBadge = (props) => {
|
|
|
83
83
|
};
|
|
84
84
|
NotificationBadge.propTypes = import_react_desc_prop_types.NotificationBadgePropTypes;
|
|
85
85
|
NotificationBadge.displayName = "NotificationBadge";
|
|
86
|
-
const NotificationBadgeWithSchema = (0,
|
|
86
|
+
const NotificationBadgeWithSchema = (0, import_ds_props_helpers.describe)(NotificationBadge);
|
|
87
87
|
NotificationBadgeWithSchema.propTypes = import_react_desc_prop_types.NotificationBadgePropTypes;
|
|
88
88
|
//# sourceMappingURL=NotificationBadge.js.map
|
|
@@ -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, { useState, useEffect, useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { useState, useEffect, 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 Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const renderBadge = relatedComponentRef?.current || !Component;\n const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);\n const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);\n\n useEffect(() => {\n const relatedComponent = relatedComponentRef?.current;\n setRelatedComponentHeight(relatedComponent?.offsetHeight || 0);\n setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);\n }, [relatedComponentRef]);\n\n let top = 0;\n let right = 0;\n let left = 0;\n\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n\n return (\n <Wrapper {...globalAttributes}>\n {renderBadge && (\n <Badge\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={left}\n right={right}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n )}\n {Component && <Component innerRef={relatedComponentRef} />}\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;AD6CnB;AA5CJ,mBAAmD;AACnD,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,cAAc,KAAK,IAAI;AAC7E,QAAM,uBAAmB,gDAAuB,IAAI;AAEpD,QAAM,QAAQ,SAAS,WAAW,4BAAe;AACjD,QAAM,0BAAsB,qBAAwB,IAAI;AACxD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,yBAAyB,QAAI,uBAAS,CAAC;AACtE,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAS,CAAC;AAEpE,8BAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB,CAAC;AAC7D,6BAAyB,kBAAkB,eAAe,CAAC;AAAA,EAC7D,GAAG,CAAC,mBAAmB,CAAC;AAExB,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAEX,MAAI,aAAa;AAAS,WAAO,wBAAwB;AACzD,MAAI,aAAa;AAAQ,YAAQ,wBAAwB;AACzD,QAAM,yBAAyB;AAE/B,SACE,6CAAC,wBAAS,GAAG,kBACV;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B;AAAA,IAED,aAAa,4CAAC,aAAU,UAAU,qBAAqB;AAAA,KAC1D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -29,6 +29,6 @@ __export(src_exports, {
|
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(src_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
|
-
__reExport(src_exports, require("./NotificationBadge"), module.exports);
|
|
33
|
-
var import_NotificationBadge = require("./NotificationBadge");
|
|
32
|
+
__reExport(src_exports, require("./NotificationBadge.js"), module.exports);
|
|
33
|
+
var import_NotificationBadge = require("./NotificationBadge.js");
|
|
34
34
|
//# 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": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,
|
|
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
|
}
|
|
@@ -29,7 +29,7 @@ __export(react_desc_prop_types_exports, {
|
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
|
-
var
|
|
32
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
33
33
|
const defaultProps = {
|
|
34
34
|
type: "number",
|
|
35
35
|
size: "s",
|
|
@@ -37,13 +37,13 @@ const defaultProps = {
|
|
|
37
37
|
position: "right"
|
|
38
38
|
};
|
|
39
39
|
const NotificationBadgePropTypes = {
|
|
40
|
-
...
|
|
41
|
-
value:
|
|
42
|
-
type:
|
|
43
|
-
size:
|
|
44
|
-
position:
|
|
45
|
-
disabled:
|
|
46
|
-
Component:
|
|
47
|
-
color:
|
|
40
|
+
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
41
|
+
value: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.number]).description("value of the numeric badge"),
|
|
42
|
+
type: import_ds_props_helpers.PropTypes.oneOf(["number", "dot"]).description("type of badge: number or dot"),
|
|
43
|
+
size: import_ds_props_helpers.PropTypes.oneOf(["s", "l"]).description("size of the badge: s or l"),
|
|
44
|
+
position: import_ds_props_helpers.PropTypes.oneOf(["left", "right"]).description("position of the badge with the related component"),
|
|
45
|
+
disabled: import_ds_props_helpers.PropTypes.bool.description("whether the badge is disabled"),
|
|
46
|
+
Component: import_ds_props_helpers.PropTypes.func.description("Related component"),
|
|
47
|
+
color: import_ds_props_helpers.PropTypes.string.description("Badge background color value")
|
|
48
48
|
};
|
|
49
49
|
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
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": ";;;;;;;;;;;;;;;;;;;;;;;;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.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 { DSNotificationBadgeT } from './react-desc-prop-types';\n\ninterface StyledGenericBadgeT {\n top: number;\n left: number;\n right: number;\n}\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n`;\n\nexport const GenericBadge = styled.span<DSNotificationBadgeT.Props & StyledGenericBadgeT>`\n position: relative;\n top: ${({ top }) => (top ? `${top}px` : 'unset')};\n left: ${({ left }) => (left ? `${left}px` : 'unset')};\n right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<{\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}>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ charCount }) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }) => {\n if (size === 'l' && charCount > 1) return '30px';\n if (size === 'l' && charCount <= 1) return '21px';\n if (size === 's' && charCount > 1) return '21px';\n return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)<DSNotificationBadgeT.Props>`\n background-color: ${({ disabled, theme, color }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\n\ninterface StyledGenericBadgeT {\n top: number;\n left: number;\n right: number;\n}\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n`;\n\nexport const GenericBadge = styled.span<DSNotificationBadgeT.Props & StyledGenericBadgeT>`\n position: relative;\n top: ${({ top }) => (top ? `${top}px` : 'unset')};\n left: ${({ left }) => (left ? `${left}px` : 'unset')};\n right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<{\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}>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ charCount }) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }) => {\n if (size === 'l' && charCount > 1) return '30px';\n if (size === 'l' && charCount <= 1) return '21px';\n if (size === 's' && charCount > 1) return '21px';\n return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)<DSNotificationBadgeT.Props>`\n background-color: ${({ disabled, theme, color }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAShB,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,wBAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,IAAI,MAAO,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,KAAK,MAAO,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,MAAM,MAAO,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,mBAAe,yBAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAelC,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,UAAU;AAAA,sBACrC,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,SAAS;AAAA,eACjD,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,UAAU,MAAM;AACpC,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO;AAC3C,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,SAAO;AACT;AAAA;AAGK,MAAM,eAAW,yBAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,MAAM;AAAA,WAC9D,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -6,9 +6,9 @@ import {
|
|
|
6
6
|
useValidateTypescriptPropTypes,
|
|
7
7
|
describe,
|
|
8
8
|
useGetGlobalAttributes
|
|
9
|
-
} from "@elliemae/ds-
|
|
10
|
-
import { NotificationBadgePropTypes, defaultProps } from "./react-desc-prop-types";
|
|
11
|
-
import { Wrapper, NumericBadge, DotBadge } from "./style";
|
|
9
|
+
} from "@elliemae/ds-props-helpers";
|
|
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);
|
|
@@ -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, { useState, useEffect, useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { useState, useEffect, 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 Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const renderBadge = relatedComponentRef?.current || !Component;\n const [relatedComponentHeight, setRelatedComponentHeight] = useState(0);\n const [relatedComponentWidth, setRelatedComponentWidth] = useState(0);\n\n useEffect(() => {\n const relatedComponent = relatedComponentRef?.current;\n setRelatedComponentHeight(relatedComponent?.offsetHeight || 0);\n setRelatedComponentWidth(relatedComponent?.offsetWidth || 0);\n }, [relatedComponentRef]);\n\n let top = 0;\n let right = 0;\n let left = 0;\n\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n\n return (\n <Wrapper {...globalAttributes}>\n {renderBadge && (\n <Badge\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={left}\n right={right}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n )}\n {Component && <Component innerRef={relatedComponentRef} />}\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;AC6CnB,SAEI,KAFJ;AA5CJ,SAAgB,UAAU,WAAW,cAAc;AACnD;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,cAAc,KAAK,IAAI;AAC7E,QAAM,mBAAmB,uBAAuB,IAAI;AAEpD,QAAM,QAAQ,SAAS,WAAW,eAAe;AACjD,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,cAAc,qBAAqB,WAAW,CAAC;AACrD,QAAM,CAAC,wBAAwB,yBAAyB,IAAI,SAAS,CAAC;AACtE,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,CAAC;AAEpE,YAAU,MAAM;AACd,UAAM,mBAAmB,qBAAqB;AAC9C,8BAA0B,kBAAkB,gBAAgB,CAAC;AAC7D,6BAAyB,kBAAkB,eAAe,CAAC;AAAA,EAC7D,GAAG,CAAC,mBAAmB,CAAC;AAExB,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAEX,MAAI,aAAa;AAAS,WAAO,wBAAwB;AACzD,MAAI,aAAa;AAAQ,YAAQ,wBAAwB;AACzD,QAAM,yBAAyB;AAE/B,SACE,qBAAC,WAAS,GAAG,kBACV;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B;AAAA,IAED,aAAa,oBAAC,aAAU,UAAU,qBAAqB;AAAA,KAC1D;AAEJ;AAEA,kBAAkB,YAAY;AAC9B,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,iCAAiC;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,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY,4BAA4B;AAAA,EACzG,MAAM,UAAU,MAAM,CAAC,UAAU,KAAK,CAAC,EAAE,YAAY,8BAA8B;AAAA,EACnF,MAAM,UAAU,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,YAAY,2BAA2B;AAAA,EACzE,UAAU,UAAU,MAAM,CAAC,QAAQ,OAAO,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAC3G,UAAU,UAAU,KAAK,YAAY,+BAA+B;AAAA,EACpE,WAAW,UAAU,KAAK,YAAY,mBAAmB;AAAA,EACzD,OAAO,UAAU,OAAO,YAAY,8BAA8B;AACpE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
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 { DSNotificationBadgeT } from './react-desc-prop-types';\n\ninterface StyledGenericBadgeT {\n top: number;\n left: number;\n right: number;\n}\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n`;\n\nexport const GenericBadge = styled.span<DSNotificationBadgeT.Props & StyledGenericBadgeT>`\n position: relative;\n top: ${({ top }) => (top ? `${top}px` : 'unset')};\n left: ${({ left }) => (left ? `${left}px` : 'unset')};\n right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<{\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}>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ charCount }) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }) => {\n if (size === 'l' && charCount > 1) return '30px';\n if (size === 'l' && charCount <= 1) return '21px';\n if (size === 's' && charCount > 1) return '21px';\n return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)<DSNotificationBadgeT.Props>`\n background-color: ${({ disabled, theme, color }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\n\ninterface StyledGenericBadgeT {\n top: number;\n left: number;\n right: number;\n}\n\nexport const Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: fit-content;\n`;\n\nexport const GenericBadge = styled.span<DSNotificationBadgeT.Props & StyledGenericBadgeT>`\n position: relative;\n top: ${({ top }) => (top ? `${top}px` : 'unset')};\n left: ${({ left }) => (left ? `${left}px` : 'unset')};\n right: ${({ right }) => (right ? `${right}px` : 'unset')};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<{\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}>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ charCount }) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }) => (size === 'l' ? '400' : '600')};\n height: ${({ size }) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }) => {\n if (size === 'l' && charCount > 1) return '30px';\n if (size === 'l' && charCount <= 1) return '21px';\n if (size === 's' && charCount > 1) return '21px';\n return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)<DSNotificationBadgeT.Props>`\n background-color: ${({ disabled, theme, color }) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAShB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,MAAM,eAAe,OAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,IAAI,MAAO,MAAM,GAAG,UAAU;AAAA,UAChC,CAAC,EAAE,KAAK,MAAO,OAAO,GAAG,WAAW;AAAA,WACnC,CAAC,EAAE,MAAM,MAAO,QAAQ,GAAG,YAAY;AAAA;AAG3C,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAelC,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,UAAU;AAAA,sBACrC,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,OAAO;AAAA,mBACvD,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI,SAAS;AAAA,eACjD,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,iBACrC,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,QAAQ;AAAA,YAC3C,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,eACpC,CAAC,EAAE,MAAM,UAAU,MAAM;AACpC,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,MAAI,SAAS,OAAO,aAAa;AAAG,WAAO;AAC3C,MAAI,SAAS,OAAO,YAAY;AAAG,WAAO;AAC1C,SAAO;AACT;AAAA;AAGK,MAAM,WAAW,OAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,SAAS,SAAS,MAAM,OAAO,MAAM;AAAA,WAC9D,CAAC,EAAE,KAAK,MAAO,SAAS,MAAM,SAAS;AAAA,YACtC,CAAC,EAAE,KAAK,MAAO,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-
|
|
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';
|