@elliemae/ds-notification-badge 1.61.12 → 1.61.13
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationBadge.js","sources":["../../src/NotificationBadge.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { describe } from 'react-desc';\nimport { notificationBadgeProps, defaultProps } from './prop-types';\nimport { NotificactionBadge as props } from './index.d';\nimport { Wrapper, NumericBadge, DotBadge } from './style';\n\nconst NotificationBadge = ({\n type,\n value,\n size,\n disabled,\n position,\n Component,\n}: props): JSX.Element => {\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef(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);\n setRelatedComponentWidth(relatedComponent?.offsetWidth);\n }, [relatedComponentRef]);\n\n let top;\n let right;\n let left;\n\n if (Component) {\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n }\n\n return (\n <Wrapper>\n {renderBadge && (\n <Badge\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={left}\n right={right}\n >\n {type === 'number' && value}\n </Badge>\n )}\n {Component && <Component innerRef={relatedComponentRef} />}\n </Wrapper>\n );\n};\n\nNotificationBadge.defaultProps = defaultProps;\nNotificationBadge.propTypes = notificationBadgeProps;\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = notificationBadgeProps;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],"names":["NotificationBadge","type","value","size","disabled","position","Component","Badge","NumericBadge","DotBadge","relatedComponentRef","useRef","renderBadge","current","useState","relatedComponentHeight","setRelatedComponentHeight","relatedComponentWidth","setRelatedComponentWidth","useEffect","relatedComponent","offsetHeight","offsetWidth","top","right","left","React","Wrapper","defaultProps","propTypes","notificationBadgeProps","NotificationBadgeWithSchema","describe"],"mappings":";;;;;;;;;;;;;;;;IAMMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAOA;
|
|
1
|
+
{"version":3,"file":"NotificationBadge.js","sources":["../../src/NotificationBadge.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { describe } from 'react-desc';\nimport { notificationBadgeProps, defaultProps } from './prop-types';\nimport { NotificactionBadge as props } from './index.d';\nimport { Wrapper, NumericBadge, DotBadge } from './style';\n\nconst NotificationBadge = ({\n type,\n value,\n size,\n disabled,\n position,\n Component,\n}: props): JSX.Element => {\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef(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);\n setRelatedComponentWidth(relatedComponent?.offsetWidth);\n }, [relatedComponentRef]);\n\n let top;\n let right;\n let left;\n\n if (Component) {\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n }\n\n return (\n <Wrapper>\n {renderBadge && (\n <Badge\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={left}\n right={right}\n >\n {type === 'number' && value}\n </Badge>\n )}\n {Component && <Component innerRef={relatedComponentRef} />}\n </Wrapper>\n );\n};\n\nNotificationBadge.defaultProps = defaultProps;\nNotificationBadge.propTypes = notificationBadgeProps;\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = notificationBadgeProps;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],"names":["NotificationBadge","type","value","size","disabled","position","Component","Badge","NumericBadge","DotBadge","relatedComponentRef","useRef","renderBadge","current","useState","relatedComponentHeight","setRelatedComponentHeight","relatedComponentWidth","setRelatedComponentWidth","useEffect","relatedComponent","offsetHeight","offsetWidth","top","right","left","React","Wrapper","defaultProps","propTypes","notificationBadgeProps","NotificationBadgeWithSchema","describe"],"mappings":";;;;;;;;;;;;;;;;IAMMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAOA;EAAA,IANxBC,IAMwB,QANxBA,IAMwB;MALxBC,KAKwB,QALxBA,KAKwB;MAJxBC,IAIwB,QAJxBA,IAIwB;MAHxBC,QAGwB,QAHxBA,QAGwB;MAFxBC,QAEwB,QAFxBA,QAEwB;MADxBC,SACwB,QADxBA,SACwB;EACxB,IAAMC,KAAK,GAAGN,IAAI,KAAK,QAAT,GAAoBO,kBAApB,GAAmCC,cAAjD;EACA,IAAMC,mBAAmB,GAAGC,YAAM,CAAC,IAAD,CAAlC;EACA,IAAMC,WAAW,GAAG,CAAAF,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEG,OAArB,KAAgC,CAACP,SAArD;;EACA,gBAA4DQ,cAAQ,CAAC,CAAD,CAApE;;MAAOC,sBAAP;MAA+BC,yBAA/B;;EACA,iBAA0DF,cAAQ,CAAC,CAAD,CAAlE;;MAAOG,qBAAP;MAA8BC,wBAA9B;;EAEAC,eAAS,CAAC,YAAM;IACd,IAAMC,gBAAgB,GAAGV,mBAAH,aAAGA,mBAAH,uBAAGA,mBAAmB,CAAEG,OAA9C;IACAG,yBAAyB,CAACI,gBAAD,aAACA,gBAAD,uBAACA,gBAAgB,CAAEC,YAAnB,CAAzB;IACAH,wBAAwB,CAACE,gBAAD,aAACA,gBAAD,uBAACA,gBAAgB,CAAEE,WAAnB,CAAxB;GAHO,EAIN,CAACZ,mBAAD,CAJM,CAAT;EAMA,IAAIa,GAAJ;EACA,IAAIC,KAAJ;EACA,IAAIC,IAAJ;;EAEA,IAAInB,SAAJ,EAAe;IACb,IAAID,QAAQ,KAAK,OAAjB,EAA0BoB,IAAI,GAAGR,qBAAqB,GAAG,CAA/B;IAC1B,IAAIZ,QAAQ,KAAK,MAAjB,EAAyBmB,KAAK,GAAGP,qBAAqB,GAAG,CAAhC;IACzBM,GAAG,GAAGR,sBAAsB,GAAG,CAA/B;;;EAGF,oBACEW,wCAACC,aAAD,QACGf,WAAW,iBACVc,wCAAC,KAAD;IACE,IAAI,EAAEvB,IADR;IAEE,KAAK,EAAED,KAFT;IAGE,QAAQ,EAAEE,QAHZ;IAIE,GAAG,EAAEmB,GAJP;IAKE,IAAI,EAAEE,IALR;IAME,KAAK,EAAED;KAENvB,IAAI,KAAK,QAAT,IAAqBC,KARxB,CAFJ,EAaGI,SAAS,iBAAIoB,wCAAC,SAAD;IAAW,QAAQ,EAAEhB;IAbrC,CADF;AAiBD;;AAEDV,iBAAiB,CAAC4B,YAAlB,GAAiCA,sBAAjC;AACA5B,iBAAiB,CAAC6B,SAAlB,GAA8BC,gCAA9B;IACMC,2BAA2B,GAAGC,kBAAQ,CAAChC,iBAAD;AAC5C+B,2BAA2B,CAACF,SAA5B,GAAwCC,gCAAxC;;;;;"}
|
package/cjs/prop-types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.js","sources":["../../src/prop-types.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\n\nexport const notificationBadgeProps = {\n type: PropTypes.oneOf(['number', 'dot']).description(\n 'type of badge: number or dot',\n ),\n value: PropTypes.number.description('value of the numeric badge'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n position: PropTypes.oneOf(['left', 'right']).description(\n 'position of the badge with the related component',\n ),\n Component: PropTypes.func.description('Related component'),\n};\n\nexport const defaultProps = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n"],"names":["notificationBadgeProps","type","PropTypes","oneOf","description","value","number","size","disabled","bool","position","Component","func","defaultProps"],"mappings":";;;;;;IAEaA,sBAAsB,GAAG;
|
|
1
|
+
{"version":3,"file":"prop-types.js","sources":["../../src/prop-types.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\n\nexport const notificationBadgeProps = {\n type: PropTypes.oneOf(['number', 'dot']).description(\n 'type of badge: number or dot',\n ),\n value: PropTypes.number.description('value of the numeric badge'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n position: PropTypes.oneOf(['left', 'right']).description(\n 'position of the badge with the related component',\n ),\n Component: PropTypes.func.description('Related component'),\n};\n\nexport const defaultProps = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n"],"names":["notificationBadgeProps","type","PropTypes","oneOf","description","value","number","size","disabled","bool","position","Component","func","defaultProps"],"mappings":";;;;;;IAEaA,sBAAsB,GAAG;EACpCC,IAAI,EAAEC,mBAAS,CAACC,KAAV,CAAgB,CAAC,QAAD,EAAW,KAAX,CAAhB,EAAmCC,WAAnC,CACJ,8BADI,CAD8B;EAIpCC,KAAK,EAAEH,mBAAS,CAACI,MAAV,CAAiBF,WAAjB,CAA6B,4BAA7B,CAJ6B;EAKpCG,IAAI,EAAEL,mBAAS,CAACC,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,CAAhB,EAA4BC,WAA5B,CAAwC,2BAAxC,CAL8B;EAMpCI,QAAQ,EAAEN,mBAAS,CAACO,IAAV,CAAeL,WAAf,CAA2B,+BAA3B,CAN0B;EAOpCM,QAAQ,EAAER,mBAAS,CAACC,KAAV,CAAgB,CAAC,MAAD,EAAS,OAAT,CAAhB,EAAmCC,WAAnC,CACR,kDADQ,CAP0B;EAUpCO,SAAS,EAAET,mBAAS,CAACU,IAAV,CAAeR,WAAf,CAA2B,mBAA3B;AAVyB;IAazBS,YAAY,GAAG;EAC1BZ,IAAI,EAAE,QADoB;EAE1BM,IAAI,EAAE,GAFoB;EAG1BC,QAAQ,EAAE,KAHgB;EAI1BE,QAAQ,EAAE;AAJgB;;;;;"}
|
package/cjs/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../src/style.tsx"],"sourcesContent":["import styled from 'styled-components';\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`\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 display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ value }) => (value > 9 ? '0 5px' : '0')};\n padding-top: 2px;\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};\n border-radius: ${({ value }) => (value > 9 ? '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, value }) => {\n if (size === 'l' && value > 9) return '30px';\n if (size === 'l' && value <= 9) return '21px';\n if (size === 's' && value > 9) return '21px';\n if (size === 's' && value <= 9) return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)`\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],"names":["Wrapper","styled","div","GenericBadge","span","top","left","right","NumericBadge","value","disabled","theme","colors","neutral","danger","size","DotBadge","brand"],"mappings":";;;;;;;;;;IAEaA,OAAO,gBAAGC,0BAAM,CAACC,GAAV;
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../src/style.tsx"],"sourcesContent":["import styled from 'styled-components';\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`\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 display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ value }) => (value > 9 ? '0 5px' : '0')};\n padding-top: 2px;\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};\n border-radius: ${({ value }) => (value > 9 ? '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, value }) => {\n if (size === 'l' && value > 9) return '30px';\n if (size === 'l' && value <= 9) return '21px';\n if (size === 's' && value > 9) return '21px';\n if (size === 's' && value <= 9) return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)`\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],"names":["Wrapper","styled","div","GenericBadge","span","top","left","right","NumericBadge","value","disabled","theme","colors","neutral","danger","size","DotBadge","brand"],"mappings":";;;;;;;;;;IAEaA,OAAO,gBAAGC,0BAAM,CAACC,GAAV;EAAA;AAAA;IAQPC,YAAY,gBAAGF,0BAAM,CAACG,IAAV;EAAA;AAAA,yDAEhB;EAAA,IAAGC,GAAH,QAAGA,GAAH;EAAA,OAAcA,GAAG,aAAMA,GAAN,UAAgB,OAAjC;AAAA,CAFgB,EAGf;EAAA,IAAGC,IAAH,SAAGA,IAAH;EAAA,OAAeA,IAAI,aAAMA,IAAN,UAAiB,OAApC;AAAA,CAHe,EAId;EAAA,IAAGC,KAAH,SAAGA,KAAH;EAAA,OAAgBA,KAAK,aAAMA,KAAN,UAAkB,OAAvC;AAAA,CAJc;IAOZC,YAAY,gBAAGP,0BAAM,CAACE,YAAD,CAAT;EAAA;AAAA,8NAMZ;EAAA,IAAGM,KAAH,SAAGA,KAAH;EAAA,OAAgBA,KAAK,GAAG,CAAR,GAAY,OAAZ,GAAsB,GAAtC;AAAA,CANY,EAQH;EAAA,IAAGC,QAAH,SAAGA,QAAH;MAAaC,KAAb,SAAaA,KAAb;EAAA,OAClBD,QAAQ,GAAGC,KAAK,CAACC,MAAN,CAAaC,OAAb,CAAqB,GAArB,CAAH,GAA+BF,KAAK,CAACC,MAAN,CAAaE,MAAb,CAAoB,GAApB,CADrB;AAAA,CARG,EAUN;EAAA,IAAGL,KAAH,SAAGA,KAAH;EAAA,OAAgBA,KAAK,GAAG,CAAR,GAAY,MAAZ,GAAqB,KAArC;AAAA,CAVM,EAWV;EAAA,IAAGM,IAAH,SAAGA,IAAH;EAAA,OAAeA,IAAI,KAAK,GAAT,GAAe,MAAf,GAAwB,MAAvC;AAAA,CAXU,EAYR;EAAA,IAAGA,IAAH,SAAGA,IAAH;EAAA,OAAeA,IAAI,KAAK,GAAT,GAAe,KAAf,GAAuB,KAAtC;AAAA,CAZQ,EAab;EAAA,IAAGA,IAAH,SAAGA,IAAH;EAAA,OAAeA,IAAI,KAAK,GAAT,GAAe,MAAf,GAAwB,MAAvC;AAAA,CAba,EAcV,kBAAqB;EAAA,IAAlBA,IAAkB,UAAlBA,IAAkB;MAAZN,KAAY,UAAZA,KAAY;EAChC,IAAIM,IAAI,KAAK,GAAT,IAAgBN,KAAK,GAAG,CAA5B,EAA+B,OAAO,MAAP;EAC/B,IAAIM,IAAI,KAAK,GAAT,IAAgBN,KAAK,IAAI,CAA7B,EAAgC,OAAO,MAAP;EAChC,IAAIM,IAAI,KAAK,GAAT,IAAgBN,KAAK,GAAG,CAA5B,EAA+B,OAAO,MAAP;EAC/B,IAAIM,IAAI,KAAK,GAAT,IAAgBN,KAAK,IAAI,CAA7B,EAAgC,OAAO,MAAP;AACjC,CAnBsB;IAsBZO,QAAQ,gBAAGf,0BAAM,CAACE,YAAD,CAAT;EAAA;AAAA,yEACC;EAAA,IAAGO,QAAH,UAAGA,QAAH;MAAaC,KAAb,UAAaA,KAAb;EAAA,OAClBD,QAAQ,GAAGC,KAAK,CAACC,MAAN,CAAaC,OAAb,CAAqB,GAArB,CAAH,GAA+BF,KAAK,CAACC,MAAN,CAAaK,KAAb,CAAmB,GAAnB,CADrB;AAAA,CADD,EAGV;EAAA,IAAGF,IAAH,UAAGA,IAAH;EAAA,OAAeA,IAAI,KAAK,GAAT,GAAe,MAAf,GAAwB,MAAvC;AAAA,CAHU,EAIT;EAAA,IAAGA,IAAH,UAAGA,IAAH;EAAA,OAAeA,IAAI,KAAK,GAAT,GAAe,MAAf,GAAwB,MAAvC;AAAA,CAJS;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationBadge.js","sources":["../../src/NotificationBadge.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { describe } from 'react-desc';\nimport { notificationBadgeProps, defaultProps } from './prop-types';\nimport { NotificactionBadge as props } from './index.d';\nimport { Wrapper, NumericBadge, DotBadge } from './style';\n\nconst NotificationBadge = ({\n type,\n value,\n size,\n disabled,\n position,\n Component,\n}: props): JSX.Element => {\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef(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);\n setRelatedComponentWidth(relatedComponent?.offsetWidth);\n }, [relatedComponentRef]);\n\n let top;\n let right;\n let left;\n\n if (Component) {\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n }\n\n return (\n <Wrapper>\n {renderBadge && (\n <Badge\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={left}\n right={right}\n >\n {type === 'number' && value}\n </Badge>\n )}\n {Component && <Component innerRef={relatedComponentRef} />}\n </Wrapper>\n );\n};\n\nNotificationBadge.defaultProps = defaultProps;\nNotificationBadge.propTypes = notificationBadgeProps;\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = notificationBadgeProps;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],"names":["NotificationBadge","type","value","size","disabled","position","Component","Badge","NumericBadge","DotBadge","relatedComponentRef","useRef","renderBadge","current","useState","relatedComponentHeight","setRelatedComponentHeight","relatedComponentWidth","setRelatedComponentWidth","useEffect","relatedComponent","offsetHeight","offsetWidth","top","right","left","defaultProps","propTypes","notificationBadgeProps","NotificationBadgeWithSchema","describe"],"mappings":";;;;;;;IAMMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAOA;
|
|
1
|
+
{"version":3,"file":"NotificationBadge.js","sources":["../../src/NotificationBadge.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport { describe } from 'react-desc';\nimport { notificationBadgeProps, defaultProps } from './prop-types';\nimport { NotificactionBadge as props } from './index.d';\nimport { Wrapper, NumericBadge, DotBadge } from './style';\n\nconst NotificationBadge = ({\n type,\n value,\n size,\n disabled,\n position,\n Component,\n}: props): JSX.Element => {\n const Badge = type === 'number' ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef(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);\n setRelatedComponentWidth(relatedComponent?.offsetWidth);\n }, [relatedComponentRef]);\n\n let top;\n let right;\n let left;\n\n if (Component) {\n if (position === 'right') left = relatedComponentWidth / 2;\n if (position === 'left') right = relatedComponentWidth / 2;\n top = relatedComponentHeight / 2;\n }\n\n return (\n <Wrapper>\n {renderBadge && (\n <Badge\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n left={left}\n right={right}\n >\n {type === 'number' && value}\n </Badge>\n )}\n {Component && <Component innerRef={relatedComponentRef} />}\n </Wrapper>\n );\n};\n\nNotificationBadge.defaultProps = defaultProps;\nNotificationBadge.propTypes = notificationBadgeProps;\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = notificationBadgeProps;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],"names":["NotificationBadge","type","value","size","disabled","position","Component","Badge","NumericBadge","DotBadge","relatedComponentRef","useRef","renderBadge","current","useState","relatedComponentHeight","setRelatedComponentHeight","relatedComponentWidth","setRelatedComponentWidth","useEffect","relatedComponent","offsetHeight","offsetWidth","top","right","left","defaultProps","propTypes","notificationBadgeProps","NotificationBadgeWithSchema","describe"],"mappings":";;;;;;;IAMMA,iBAAiB,GAAG,SAApBA,iBAAoB,OAOA;EAAA,IANxBC,IAMwB,QANxBA,IAMwB;MALxBC,KAKwB,QALxBA,KAKwB;MAJxBC,IAIwB,QAJxBA,IAIwB;MAHxBC,QAGwB,QAHxBA,QAGwB;MAFxBC,QAEwB,QAFxBA,QAEwB;MADxBC,SACwB,QADxBA,SACwB;EACxB,IAAMC,KAAK,GAAGN,IAAI,KAAK,QAAT,GAAoBO,YAApB,GAAmCC,QAAjD;EACA,IAAMC,mBAAmB,GAAGC,MAAM,CAAC,IAAD,CAAlC;EACA,IAAMC,WAAW,GAAG,CAAAF,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAEG,OAArB,KAAgC,CAACP,SAArD;;EACA,gBAA4DQ,QAAQ,CAAC,CAAD,CAApE;;MAAOC,sBAAP;MAA+BC,yBAA/B;;EACA,iBAA0DF,QAAQ,CAAC,CAAD,CAAlE;;MAAOG,qBAAP;MAA8BC,wBAA9B;;EAEAC,SAAS,CAAC,YAAM;IACd,IAAMC,gBAAgB,GAAGV,mBAAH,aAAGA,mBAAH,uBAAGA,mBAAmB,CAAEG,OAA9C;IACAG,yBAAyB,CAACI,gBAAD,aAACA,gBAAD,uBAACA,gBAAgB,CAAEC,YAAnB,CAAzB;IACAH,wBAAwB,CAACE,gBAAD,aAACA,gBAAD,uBAACA,gBAAgB,CAAEE,WAAnB,CAAxB;GAHO,EAIN,CAACZ,mBAAD,CAJM,CAAT;EAMA,IAAIa,GAAJ;EACA,IAAIC,KAAJ;EACA,IAAIC,IAAJ;;EAEA,IAAInB,SAAJ,EAAe;IACb,IAAID,QAAQ,KAAK,OAAjB,EAA0BoB,IAAI,GAAGR,qBAAqB,GAAG,CAA/B;IAC1B,IAAIZ,QAAQ,KAAK,MAAjB,EAAyBmB,KAAK,GAAGP,qBAAqB,GAAG,CAAhC;IACzBM,GAAG,GAAGR,sBAAsB,GAAG,CAA/B;;;EAGF,oBACE,oBAAC,OAAD,QACGH,WAAW,iBACV,oBAAC,KAAD;IACE,IAAI,EAAET,IADR;IAEE,KAAK,EAAED,KAFT;IAGE,QAAQ,EAAEE,QAHZ;IAIE,GAAG,EAAEmB,GAJP;IAKE,IAAI,EAAEE,IALR;IAME,KAAK,EAAED;KAENvB,IAAI,KAAK,QAAT,IAAqBC,KARxB,CAFJ,EAaGI,SAAS,iBAAI,oBAAC,SAAD;IAAW,QAAQ,EAAEI;IAbrC,CADF;AAiBD;;AAEDV,iBAAiB,CAAC0B,YAAlB,GAAiCA,YAAjC;AACA1B,iBAAiB,CAAC2B,SAAlB,GAA8BC,sBAA9B;IACMC,2BAA2B,GAAGC,QAAQ,CAAC9B,iBAAD;AAC5C6B,2BAA2B,CAACF,SAA5B,GAAwCC,sBAAxC;;;;"}
|
package/esm/prop-types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.js","sources":["../../src/prop-types.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\n\nexport const notificationBadgeProps = {\n type: PropTypes.oneOf(['number', 'dot']).description(\n 'type of badge: number or dot',\n ),\n value: PropTypes.number.description('value of the numeric badge'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n position: PropTypes.oneOf(['left', 'right']).description(\n 'position of the badge with the related component',\n ),\n Component: PropTypes.func.description('Related component'),\n};\n\nexport const defaultProps = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n"],"names":["notificationBadgeProps","type","PropTypes","oneOf","description","value","number","size","disabled","bool","position","Component","func","defaultProps"],"mappings":";;IAEaA,sBAAsB,GAAG;
|
|
1
|
+
{"version":3,"file":"prop-types.js","sources":["../../src/prop-types.tsx"],"sourcesContent":["import { PropTypes } from 'react-desc';\n\nexport const notificationBadgeProps = {\n type: PropTypes.oneOf(['number', 'dot']).description(\n 'type of badge: number or dot',\n ),\n value: PropTypes.number.description('value of the numeric badge'),\n size: PropTypes.oneOf(['s', 'l']).description('size of the badge: s or l'),\n disabled: PropTypes.bool.description('whether the badge is disabled'),\n position: PropTypes.oneOf(['left', 'right']).description(\n 'position of the badge with the related component',\n ),\n Component: PropTypes.func.description('Related component'),\n};\n\nexport const defaultProps = {\n type: 'number',\n size: 's',\n disabled: false,\n position: 'right',\n};\n"],"names":["notificationBadgeProps","type","PropTypes","oneOf","description","value","number","size","disabled","bool","position","Component","func","defaultProps"],"mappings":";;IAEaA,sBAAsB,GAAG;EACpCC,IAAI,EAAEC,SAAS,CAACC,KAAV,CAAgB,CAAC,QAAD,EAAW,KAAX,CAAhB,EAAmCC,WAAnC,CACJ,8BADI,CAD8B;EAIpCC,KAAK,EAAEH,SAAS,CAACI,MAAV,CAAiBF,WAAjB,CAA6B,4BAA7B,CAJ6B;EAKpCG,IAAI,EAAEL,SAAS,CAACC,KAAV,CAAgB,CAAC,GAAD,EAAM,GAAN,CAAhB,EAA4BC,WAA5B,CAAwC,2BAAxC,CAL8B;EAMpCI,QAAQ,EAAEN,SAAS,CAACO,IAAV,CAAeL,WAAf,CAA2B,+BAA3B,CAN0B;EAOpCM,QAAQ,EAAER,SAAS,CAACC,KAAV,CAAgB,CAAC,MAAD,EAAS,OAAT,CAAhB,EAAmCC,WAAnC,CACR,kDADQ,CAP0B;EAUpCO,SAAS,EAAET,SAAS,CAACU,IAAV,CAAeR,WAAf,CAA2B,mBAA3B;AAVyB;IAazBS,YAAY,GAAG;EAC1BZ,IAAI,EAAE,QADoB;EAE1BM,IAAI,EAAE,GAFoB;EAG1BC,QAAQ,EAAE,KAHgB;EAI1BE,QAAQ,EAAE;AAJgB;;;;"}
|
package/esm/style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../src/style.tsx"],"sourcesContent":["import styled from 'styled-components';\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`\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 display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ value }) => (value > 9 ? '0 5px' : '0')};\n padding-top: 2px;\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};\n border-radius: ${({ value }) => (value > 9 ? '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, value }) => {\n if (size === 'l' && value > 9) return '30px';\n if (size === 'l' && value <= 9) return '21px';\n if (size === 's' && value > 9) return '21px';\n if (size === 's' && value <= 9) return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)`\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],"names":["Wrapper","styled","div","GenericBadge","span","top","left","right","NumericBadge","value","disabled","theme","colors","neutral","danger","size","DotBadge","brand"],"mappings":";;IAEaA,OAAO,gBAAGC,MAAM,CAACC,GAAV;
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../src/style.tsx"],"sourcesContent":["import styled from 'styled-components';\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`\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 display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n color: #fff;\n padding: ${({ value }) => (value > 9 ? '0 5px' : '0')};\n padding-top: 2px;\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.danger[900]};\n border-radius: ${({ value }) => (value > 9 ? '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, value }) => {\n if (size === 'l' && value > 9) return '30px';\n if (size === 'l' && value <= 9) return '21px';\n if (size === 's' && value > 9) return '21px';\n if (size === 's' && value <= 9) return '15px';\n }};\n`;\n\nexport const DotBadge = styled(GenericBadge)`\n background-color: ${({ disabled, theme }) =>\n disabled ? theme.colors.neutral[500] : theme.colors.brand[500]};\n width: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],"names":["Wrapper","styled","div","GenericBadge","span","top","left","right","NumericBadge","value","disabled","theme","colors","neutral","danger","size","DotBadge","brand"],"mappings":";;IAEaA,OAAO,gBAAGC,MAAM,CAACC,GAAV;EAAA;AAAA;IAQPC,YAAY,gBAAGF,MAAM,CAACG,IAAV;EAAA;AAAA,yDAEhB;EAAA,IAAGC,GAAH,QAAGA,GAAH;EAAA,OAAcA,GAAG,aAAMA,GAAN,UAAgB,OAAjC;AAAA,CAFgB,EAGf;EAAA,IAAGC,IAAH,SAAGA,IAAH;EAAA,OAAeA,IAAI,aAAMA,IAAN,UAAiB,OAApC;AAAA,CAHe,EAId;EAAA,IAAGC,KAAH,SAAGA,KAAH;EAAA,OAAgBA,KAAK,aAAMA,KAAN,UAAkB,OAAvC;AAAA,CAJc;IAOZC,YAAY,gBAAGP,MAAM,CAACE,YAAD,CAAT;EAAA;AAAA,8NAMZ;EAAA,IAAGM,KAAH,SAAGA,KAAH;EAAA,OAAgBA,KAAK,GAAG,CAAR,GAAY,OAAZ,GAAsB,GAAtC;AAAA,CANY,EAQH;EAAA,IAAGC,QAAH,SAAGA,QAAH;MAAaC,KAAb,SAAaA,KAAb;EAAA,OAClBD,QAAQ,GAAGC,KAAK,CAACC,MAAN,CAAaC,OAAb,CAAqB,GAArB,CAAH,GAA+BF,KAAK,CAACC,MAAN,CAAaE,MAAb,CAAoB,GAApB,CADrB;AAAA,CARG,EAUN;EAAA,IAAGL,KAAH,SAAGA,KAAH;EAAA,OAAgBA,KAAK,GAAG,CAAR,GAAY,MAAZ,GAAqB,KAArC;AAAA,CAVM,EAWV;EAAA,IAAGM,IAAH,SAAGA,IAAH;EAAA,OAAeA,IAAI,KAAK,GAAT,GAAe,MAAf,GAAwB,MAAvC;AAAA,CAXU,EAYR;EAAA,IAAGA,IAAH,SAAGA,IAAH;EAAA,OAAeA,IAAI,KAAK,GAAT,GAAe,KAAf,GAAuB,KAAtC;AAAA,CAZQ,EAab;EAAA,IAAGA,IAAH,SAAGA,IAAH;EAAA,OAAeA,IAAI,KAAK,GAAT,GAAe,MAAf,GAAwB,MAAvC;AAAA,CAba,EAcV,kBAAqB;EAAA,IAAlBA,IAAkB,UAAlBA,IAAkB;MAAZN,KAAY,UAAZA,KAAY;EAChC,IAAIM,IAAI,KAAK,GAAT,IAAgBN,KAAK,GAAG,CAA5B,EAA+B,OAAO,MAAP;EAC/B,IAAIM,IAAI,KAAK,GAAT,IAAgBN,KAAK,IAAI,CAA7B,EAAgC,OAAO,MAAP;EAChC,IAAIM,IAAI,KAAK,GAAT,IAAgBN,KAAK,GAAG,CAA5B,EAA+B,OAAO,MAAP;EAC/B,IAAIM,IAAI,KAAK,GAAT,IAAgBN,KAAK,IAAI,CAA7B,EAAgC,OAAO,MAAP;AACjC,CAnBsB;IAsBZO,QAAQ,gBAAGf,MAAM,CAACE,YAAD,CAAT;EAAA;AAAA,yEACC;EAAA,IAAGO,QAAH,UAAGA,QAAH;MAAaC,KAAb,UAAaA,KAAb;EAAA,OAClBD,QAAQ,GAAGC,KAAK,CAACC,MAAN,CAAaC,OAAb,CAAqB,GAArB,CAAH,GAA+BF,KAAK,CAACC,MAAN,CAAaK,KAAb,CAAmB,GAAnB,CADrB;AAAA,CADD,EAGV;EAAA,IAAGF,IAAH,UAAGA,IAAH;EAAA,OAAeA,IAAI,KAAK,GAAT,GAAe,MAAf,GAAwB,MAAvC;AAAA,CAHU,EAIT;EAAA,IAAGA,IAAH,UAAGA,IAAH;EAAA,OAAeA,IAAI,KAAK,GAAT,GAAe,MAAf,GAAwB,MAAvC;AAAA,CAJS;;;;"}
|