@telia-ace/knowledge-widget-components-notification-row 1.0.12 → 1.0.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.
package/dist/notification-row.js
CHANGED
|
@@ -172,7 +172,10 @@ const NotificationRow = (_c) => {
|
|
|
172
172
|
};
|
|
173
173
|
const Wrapper = styled.div`
|
|
174
174
|
${genericHtml}
|
|
175
|
-
padding: ${(p) =>
|
|
175
|
+
padding: ${(p) => {
|
|
176
|
+
var _a;
|
|
177
|
+
return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
|
|
178
|
+
}} ${(p) => {
|
|
176
179
|
var _a;
|
|
177
180
|
return ((_a = p.theme.sizes) == null ? void 0 : _a.cardinal) * 12;
|
|
178
181
|
}}px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification-row.js","sources":["../src/notification-row.tsx"],"sourcesContent":["import {\r\n borderTabStyle,\r\n Button,\r\n createEmptyComponent,\r\n genericHtml,\r\n Html,\r\n linkTabStyle,\r\n SymbolBadge,\r\n useContainer,\r\n useProperties,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport {\r\n createStorageWriter,\r\n readStorage,\r\n StorageCategory,\r\n StorageMedium,\r\n StorageWriter,\r\n} from '@telia-ace/widget-services';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { useEffect, useState } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { NotificationRowComponentProps } from './notification-row-component';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst STORAGE_KEY = 'closed-notifications';\r\n\r\nconst infocusableHtml = {\r\n transform: {\r\n a: ({ children, ...props }: React.ComponentProps<'a'>) => (\r\n <a {...props} tabIndex={-1}>\r\n {children}\r\n </a>\r\n ),\r\n },\r\n};\r\n\r\nconst NotificationRow: React.SFC<Props> = ({ className, ...other }) => {\r\n const {\r\n types = [],\r\n allowPaging = true,\r\n notifications = [],\r\n expandable = false,\r\n closeAriaLabel = '',\r\n pageNextAriaLabel = '',\r\n pagePreviousAriaLabel = '',\r\n expandAriaLabel = '',\r\n } = useProperties<NotificationRowComponentProps>();\r\n const [expanded, setExpanded] = useState(false);\r\n const [closed, setClosed] = useState<string[]>([]);\r\n const [index, setIndex] = useState(0);\r\n\r\n const container = useContainer();\r\n const [write, setWriter] = useState<StorageWriter | undefined>();\r\n\r\n useEffect(() => {\r\n if (container) {\r\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\r\n (closed = []) => setClosed(closed)\r\n );\r\n\r\n createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then((writer) =>\r\n setWriter(() => writer)\r\n );\r\n }\r\n }, [container]);\r\n\r\n useEffect(() => {\r\n if (container) {\r\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\r\n (storedClosed = []) => {\r\n closed.forEach(\r\n (id) => storedClosed.indexOf(id) === -1 && storedClosed.push(id)\r\n );\r\n if (write) {\r\n write(storedClosed);\r\n }\r\n }\r\n );\r\n }\r\n }, [closed, container, write]);\r\n\r\n const filtered = notifications.filter(({ id }) => closed.indexOf(id) === -1);\r\n\r\n const { length } = filtered;\r\n\r\n if (!filtered.length) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-notification-row'),\r\n });\r\n }\r\n\r\n if (allowPaging) {\r\n const notification = filtered[index] || filtered[index + 1] || filtered[index - 1];\r\n\r\n if (!notification) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-notification-row'),\r\n });\r\n }\r\n\r\n const { id, body } = notification || {};\r\n const toggleExpand = () => setExpanded(!expanded);\r\n\r\n return (\r\n <Wrapper\r\n {...other}\r\n aria-expanded={expandable ? expanded : true}\r\n aria-label={expandAriaLabel}\r\n tabIndex={expandable ? 0 : -1}\r\n className={appendClassNames(className, 'humany-notification-row')}\r\n data-pageable={length > 1}\r\n data-types={types}\r\n data-allow-paging={allowPaging}\r\n data-expandable={expandable}\r\n onKeyDown={(e: React.KeyboardEvent) => {\r\n if (e.key === 'Enter') {\r\n toggleExpand();\r\n }\r\n }}\r\n onClick={toggleExpand}\r\n >\r\n <CloseButton\r\n aria-label={closeAriaLabel}\r\n onClick={() => {\r\n setIndex(filtered.indexOf(notification));\r\n setClosed([...closed, id]);\r\n }}\r\n >\r\n <SymbolBadge symbol={{ type: 'Svg', content: 'close' }} />\r\n </CloseButton>\r\n <StyledHtml\r\n htmlParseInstruction={!expandable || expanded ? undefined : infocusableHtml}\r\n data-pageable={length > 1}\r\n data-notification={id}\r\n data-expandable={expandable}\r\n data-expanded={expanded}\r\n html={body}\r\n />\r\n {length > 1 && (\r\n <Pager>\r\n <StyledButton\r\n aria-label={pagePreviousAriaLabel}\r\n data-disabled={index === 0}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (index > 0) {\r\n setIndex(index - 1);\r\n }\r\n }}\r\n >\r\n <StyledSymbolBadge\r\n size={10}\r\n symbol={{ type: 'Svg', content: 'caret-left' }}\r\n />\r\n </StyledButton>\r\n <span>\r\n {index + 1}/{length}\r\n </span>\r\n <StyledButton\r\n aria-label={pageNextAriaLabel}\r\n data-disabled={index + 1 >= length}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (index < length - 1) {\r\n setIndex(index + 1);\r\n }\r\n }}\r\n >\r\n <StyledSymbolBadge\r\n size={10}\r\n symbol={{ type: 'Svg', content: 'caret-right' }}\r\n />\r\n </StyledButton>\r\n </Pager>\r\n )}\r\n </Wrapper>\r\n );\r\n }\r\n\r\n return (\r\n <Wrapper\r\n {...other}\r\n className={appendClassNames(className, 'humany-notification-row')}\r\n data-pageable={false}\r\n data-types={types}\r\n data-allow-paging={false}\r\n >\r\n {filtered.map((notification) => {\r\n if (!notification) {\r\n return null;\r\n }\r\n\r\n const { id, body } = notification;\r\n\r\n return (\r\n <StyledHtml\r\n key={id}\r\n data-pageable={false}\r\n data-expandable={expandable}\r\n data-expanded={expanded}\r\n data-notification={id}\r\n html={body}\r\n />\r\n );\r\n })}\r\n </Wrapper>\r\n );\r\n};\r\n\r\nconst Wrapper = styled.div<{ 'data-types': string[]; 'data-allow-paging': boolean } & any>`\r\n ${genericHtml}\r\n padding: ${(p) => p.theme.sizes.normal} ${(p) => p.theme.sizes?.cardinal * 12}px;\r\n background-color: ${(p) => {\r\n if (p['data-types'].length) {\r\n if (p['data-types'].indexOf('top') > -1) {\r\n return p.theme.colors?.warning;\r\n }\r\n if (p['data-types'].indexOf('bottom') > -1) {\r\n return 'transparent';\r\n }\r\n\r\n return p.theme.colors?.primary;\r\n }\r\n return p.theme.colors?.warning;\r\n }};\r\n color: ${(p) => p.theme.colors?.text};\r\n border-radius: ${(p) => p.theme.borderRadius};\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n cursor: ${(p) => (p['data-expandable'] ? 'pointer' : 'default')};\r\n overflow: hidden;\r\n\r\n i {\r\n color: ${(p) => p.theme.colors?.text};\r\n }\r\n\r\n a {\r\n color: ${(p) => p.theme.colors?.link};\r\n &:focus {\r\n ${(p) => p.theme.accessibility?.isTabbing && linkTabStyle}\r\n }\r\n }\r\n\r\n ${(p) =>\r\n !p['data-allow-paging'] &&\r\n css`\r\n flex-wrap: wrap;\r\n\r\n > div {\r\n min-width: 100%;\r\n margin: ${p.theme.sizes?.cardinal * 2}px;\r\n }\r\n `};\r\n\r\n ${(p) =>\r\n p.theme.accessibility?.isTabbing &&\r\n css`\r\n &:focus {\r\n ${StyledHtml} {\r\n ${borderTabStyle}\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst StyledHtml = styled(Html)<{\r\n 'data-pageable': boolean;\r\n 'data-expandable': boolean;\r\n 'data-expanded': boolean;\r\n}>`\r\n flex: 1;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n line-height: 1.6em;\r\n font-weight: 300;\r\n\r\n ${(p) =>\r\n p['data-expandable'] &&\r\n !p['data-expanded'] &&\r\n css`\r\n max-width: 100%;\r\n\r\n p {\r\n display: none;\r\n &:first-child {\r\n display: block;\r\n margin-bottom: 0;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst Pager = styled.div`\r\n text-align: center;\r\n width: 100%;\r\n span {\r\n font-size: ${(p) => p.theme.fonts?.small};\r\n display: inline-block;\r\n width: 30px;\r\n text-align: center;\r\n }\r\n`;\r\n\r\nconst StyledButton = styled(Button)<{ 'data-disabled'?: boolean }>`\r\n background-color: transparent;\r\n border: none;\r\n cursor: pointer;\r\n transition: opacity 200ms ease-out;\r\n justify-self: flex-end;\r\n align-self: flex-start;\r\n padding: ${(p) => p.theme.sizes?.small} svg {\r\n display: block;\r\n }\r\n\r\n &:focus {\r\n ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle}\r\n }\r\n\r\n ${(p) =>\r\n p['data-disabled']\r\n ? css`\r\n opacity: 0.8;\r\n `\r\n : css`\r\n @media (hover) {\r\n &:hover {\r\n opacity: 0.5;\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst CloseButton = styled(StyledButton)`\r\n position: absolute;\r\n top: 7.5px;\r\n right: 7.5px;\r\n width: 25px;\r\n height: auto;\r\n padding: ${(p) => `calc(${p.theme.sizes?.small}/2) ${p.theme.sizes?.small}`} svg {\r\n vertical-align: middle;\r\n line,\r\n path {\r\n stroke: ${(p) => p.theme.colors?.text};\r\n }\r\n }\r\n`;\r\n\r\nconst StyledSymbolBadge = styled(SymbolBadge)`\r\n line {\r\n stroke: #ffffff;\r\n }\r\n`;\r\n\r\nconst Empty = styled.div`\r\n display: none;\r\n`;\r\n\r\nexport default NotificationRow;\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,cAAc;AAEpB,MAAM,kBAAkB;AAAA,EACpB,WAAW;AAAA,IACP,GAAG,CAAC;AAAA,mBAAE,eAAF,IAAe,kBAAf,IAAe,CAAb;AACD,mCAAA,cAAA,KAAA,iCAAM,QAAN;AAAA,QAAa,UAAU;AAAA,MAAA,IACnB,QACL;AAAA;AAAA,EAER;AACJ;AAEA,MAAM,kBAAoC,CAAC,OAA4B;AAA5B,eAAE,gBAAF,IAAgB,kBAAhB,IAAgB,CAAd;AACnC,QAAA;AAAA,IACF,QAAQ,CAAC;AAAA,IACT,cAAc;AAAA,IACd,gBAAgB,CAAC;AAAA,IACjB,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,oBAAoB;AAAA,IACpB,wBAAwB;AAAA,IACxB,kBAAkB;AAAA,MAClB,cAA6C;AACjD,QAAM,CAAC,UAAU,eAAe,SAAS,KAAK;AAC9C,QAAM,CAAC,QAAQ,aAAa,SAAmB,CAAE,CAAA;AACjD,QAAM,CAAC,OAAO,YAAY,SAAS,CAAC;AAEpC,QAAM,YAAY;AACZ,QAAA,CAAC,OAAO,aAAa,SAAoC;AAE/D,YAAU,MAAM;AACZ,QAAI,WAAW;AACX,kBAAsB,WAAW,aAAa,cAAc,OAAO,EAAE,KACjE,CAAC,UAAS,CAAC,MAAM,UAAU,OAAM,CACrC;AAEoB,0BAAA,WAAW,aAAa,gBAAgB,UAAU,EAAE,KAAK,CAAC,WAC1E,UAAU,MAAM,MAAM,CAC1B;AAAA,IACJ;AAAA,EAAA,GACD,CAAC,SAAS,CAAC;AAEd,YAAU,MAAM;AACZ,QAAI,WAAW;AACW,kBAAA,WAAW,aAAa,cAAc,OAAO,EAAE,KACjE,CAAC,eAAe,OAAO;AACZ,eAAA,QACH,CAAC,OAAO,aAAa,QAAQ,EAAE,MAAM,MAAM,aAAa,KAAK,EAAE,CACnE;AACA,YAAI,OAAO;AACP,gBAAM,YAAY;AAAA,QACtB;AAAA,MAAA,CAER;AAAA,IACJ;AAAA,EACD,GAAA,CAAC,QAAQ,WAAW,KAAK,CAAC;AAEvB,QAAA,WAAW,cAAc,OAAO,CAAC,EAAE,SAAS,OAAO,QAAQ,EAAE,MAAM,EAAE;AAE3E,QAAM,EAAE,WAAW;AAEf,MAAA,CAAC,SAAS,QAAQ;AAClB,WAAO,qBAAqB,WAAW,iCAChC,QADgC;AAAA,MAEnC,WAAW,iBAAiB,WAAW,yBAAyB;AAAA,IAAA,EACnE;AAAA,EACL;AAEA,MAAI,aAAa;AACb,UAAM,eAAe,SAAS,UAAU,SAAS,QAAQ,MAAM,SAAS,QAAQ;AAEhF,QAAI,CAAC,cAAc;AACf,aAAO,qBAAqB,WAAW,iCAChC,QADgC;AAAA,QAEnC,WAAW,iBAAiB,WAAW,yBAAyB;AAAA,MAAA,EACnE;AAAA,IACL;AAEA,UAAM,EAAE,IAAI,SAAS,gBAAgB,CAAA;AACrC,UAAM,eAAe,MAAM,YAAY,CAAC,QAAQ;AAEhD,WACK,sBAAA,cAAA,SAAA,iCACO,QADP;AAAA,MAEG,iBAAe,aAAa,WAAW;AAAA,MACvC,cAAY;AAAA,MACZ,UAAU,aAAa,IAAI;AAAA,MAC3B,WAAW,iBAAiB,WAAW,yBAAyB;AAAA,MAChE,iBAAe,SAAS;AAAA,MACxB,cAAY;AAAA,MACZ,qBAAmB;AAAA,MACnB,mBAAiB;AAAA,MACjB,WAAW,CAAC,MAA2B;AAC/B,YAAA,EAAE,QAAQ,SAAS;AACN;QACjB;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,IAAA,IAER,sBAAA,cAAA,aAAA;AAAA,MACG,cAAY;AAAA,MACZ,SAAS,MAAM;AACF,iBAAA,SAAS,QAAQ,YAAY,CAAC;AACvC,kBAAU,CAAC,GAAG,QAAQ,EAAE,CAAC;AAAA,MAC7B;AAAA,IAAA,GAEC,sBAAA,cAAA,aAAA;AAAA,MAAY,QAAQ,EAAE,MAAM,OAAO,SAAS,QAAQ;AAAA,IAAG,CAAA,CAC5D,GACC,sBAAA,cAAA,YAAA;AAAA,MACG,sBAAsB,CAAC,cAAc,WAAW,SAAY;AAAA,MAC5D,iBAAe,SAAS;AAAA,MACxB,qBAAmB;AAAA,MACnB,mBAAiB;AAAA,MACjB,iBAAe;AAAA,MACf,MAAM;AAAA,IAAA,CACV,GACC,SAAS,KACN,sBAAA,cAAC,aACI,sBAAA,cAAA,cAAA;AAAA,MACG,cAAY;AAAA,MACZ,iBAAe,UAAU;AAAA,MACzB,SAAS,CAAC,MAAM;AACZ,UAAE,gBAAgB;AAClB,YAAI,QAAQ,GAAG;AACX,mBAAS,QAAQ,CAAC;AAAA,QACtB;AAAA,MACJ;AAAA,IAAA,GAEC,sBAAA,cAAA,mBAAA;AAAA,MACG,MAAM;AAAA,MACN,QAAQ,EAAE,MAAM,OAAO,SAAS,aAAa;AAAA,IACjD,CAAA,CACJ,GACC,sBAAA,cAAA,QAAA,MACI,QAAQ,GAAE,KAAE,MACjB,GACC,sBAAA,cAAA,cAAA;AAAA,MACG,cAAY;AAAA,MACZ,iBAAe,QAAQ,KAAK;AAAA,MAC5B,SAAS,CAAC,MAAM;AACZ,UAAE,gBAAgB;AACd,YAAA,QAAQ,SAAS,GAAG;AACpB,mBAAS,QAAQ,CAAC;AAAA,QACtB;AAAA,MACJ;AAAA,IAAA,GAEC,sBAAA,cAAA,mBAAA;AAAA,MACG,MAAM;AAAA,MACN,QAAQ,EAAE,MAAM,OAAO,SAAS,cAAc;AAAA,IAAA,CAClD,CACJ,CACJ,CAER;AAAA,EAER;AAEA,SACK,sBAAA,cAAA,SAAA,iCACO,QADP;AAAA,IAEG,WAAW,iBAAiB,WAAW,yBAAyB;AAAA,IAChE,iBAAe;AAAA,IACf,cAAY;AAAA,IACZ,qBAAmB;AAAA,EAAA,IAElB,SAAS,IAAI,CAAC,iBAAiB;AAC5B,QAAI,CAAC,cAAc;AACR,aAAA;AAAA,IACX;AAEM,UAAA,EAAE,IAAI,SAAS;AAErB,WACK,sBAAA,cAAA,YAAA;AAAA,MACG,KAAK;AAAA,MACL,iBAAe;AAAA,MACf,mBAAiB;AAAA,MACjB,iBAAe;AAAA,MACf,qBAAmB;AAAA,MACnB,MAAM;AAAA,IAAA,CACV;AAAA,EAEP,CAAA,CACL;AAER;AAEA,MAAM,UAAU,OAAO;AAAA,MACjB;AAAA,eACS,CAAC,MAAM,EAAE,MAAM,MAAM,UAAU,CAAC,MAAM;;AAAA,kBAAE,MAAM,UAAR,mBAAe,YAAW;AAAA;AAAA,wBACvD,CAAC,MAAM;;AACnB,MAAA,EAAE,cAAc,QAAQ;AACxB,QAAI,EAAE,cAAc,QAAQ,KAAK,IAAI,IAAI;AAC9B,aAAA,QAAE,MAAM,WAAR,mBAAgB;AAAA,IAC3B;AACA,QAAI,EAAE,cAAc,QAAQ,QAAQ,IAAI,IAAI;AACjC,aAAA;AAAA,IACX;AAEO,WAAA,QAAE,MAAM,WAAR,mBAAgB;AAAA,EAC3B;AACO,SAAA,QAAE,MAAM,WAAR,mBAAgB;AAC3B;AAAA,aACS,CAAC,MAAM;;AAAA,iBAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA,qBACf,CAAC,MAAM,EAAE,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,cAKtB,CAAC,MAAO,EAAE,qBAAqB,YAAY;AAAA;AAAA;AAAA;AAAA,iBAIxC,CAAC,MAAM;;AAAA,iBAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,iBAIvB,CAAC,MAAM;;AAAA,iBAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA;AAAA,cAE1B,CAAC,MAAA;;AAAM,kBAAE,MAAM,kBAAR,mBAAuB,cAAa;AAAA;AAAA;AAAA;AAAA;AAAA,MAInD,CAAC,MACC;;AAAA,UAAC,EAAE,wBACH;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKkB,SAAE,MAAM,UAAR,mBAAe,YAAW;AAAA;AAAA;AAAA;AAAA;AAAA,MAI9C,CAAC,MAAA;;AACC,kBAAE,MAAM,kBAAR,mBAAuB,cACvB;AAAA;AAAA,kBAEU;AAAA,sBACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMtB,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA,iBAMb,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA,MAIjC,CAAC,MACC,EAAE,sBACF,CAAC,EAAE,oBACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBR,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,qBAIA,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO3C,MAAM,eAAe,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOnB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAK3B,CAAC,MAAA;;AAAM,kBAAE,MAAM,kBAAR,mBAAuB,cAAa;AAAA;AAAA;AAAA;AAAA,MAG/C,CAAC,MACC,EAAE,mBACI;AAAA;AAAA,kBAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASd,MAAM,cAAc,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMxB,CAAC,MAAM;;AAAA,iBAAQ,QAAE,MAAM,UAAR,mBAAe,YAAY,QAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA;AAAA,sBAIlD,CAAC,MAAM;;AAAA,iBAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA;AAAA;AAAA;AAK7C,MAAM,oBAAoB,OAAO,WAAW;AAAA;AAAA;AAAA;AAAA;AAM9B,OAAO;AAAA;AAAA;;"}
|
|
1
|
+
{"version":3,"file":"notification-row.js","sources":["../src/notification-row.tsx"],"sourcesContent":["import {\r\n borderTabStyle,\r\n Button,\r\n createEmptyComponent,\r\n genericHtml,\r\n Html,\r\n linkTabStyle,\r\n SymbolBadge,\r\n useContainer,\r\n useProperties,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport {\r\n createStorageWriter,\r\n readStorage,\r\n StorageCategory,\r\n StorageMedium,\r\n StorageWriter,\r\n} from '@telia-ace/widget-services';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { useEffect, useState } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { NotificationRowComponentProps } from './notification-row-component';\r\n\r\ntype Props = {\r\n className: string;\r\n};\r\n\r\nconst STORAGE_KEY = 'closed-notifications';\r\n\r\nconst infocusableHtml = {\r\n transform: {\r\n a: ({ children, ...props }: React.ComponentProps<'a'>) => (\r\n <a {...props} tabIndex={-1}>\r\n {children}\r\n </a>\r\n ),\r\n },\r\n};\r\n\r\nconst NotificationRow: React.SFC<Props> = ({ className, ...other }) => {\r\n const {\r\n types = [],\r\n allowPaging = true,\r\n notifications = [],\r\n expandable = false,\r\n closeAriaLabel = '',\r\n pageNextAriaLabel = '',\r\n pagePreviousAriaLabel = '',\r\n expandAriaLabel = '',\r\n } = useProperties<NotificationRowComponentProps>();\r\n const [expanded, setExpanded] = useState(false);\r\n const [closed, setClosed] = useState<string[]>([]);\r\n const [index, setIndex] = useState(0);\r\n\r\n const container = useContainer();\r\n const [write, setWriter] = useState<StorageWriter | undefined>();\r\n\r\n useEffect(() => {\r\n if (container) {\r\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\r\n (closed = []) => setClosed(closed)\r\n );\r\n\r\n createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then((writer) =>\r\n setWriter(() => writer)\r\n );\r\n }\r\n }, [container]);\r\n\r\n useEffect(() => {\r\n if (container) {\r\n readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\r\n (storedClosed = []) => {\r\n closed.forEach(\r\n (id) => storedClosed.indexOf(id) === -1 && storedClosed.push(id)\r\n );\r\n if (write) {\r\n write(storedClosed);\r\n }\r\n }\r\n );\r\n }\r\n }, [closed, container, write]);\r\n\r\n const filtered = notifications.filter(({ id }) => closed.indexOf(id) === -1);\r\n\r\n const { length } = filtered;\r\n\r\n if (!filtered.length) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-notification-row'),\r\n });\r\n }\r\n\r\n if (allowPaging) {\r\n const notification = filtered[index] || filtered[index + 1] || filtered[index - 1];\r\n\r\n if (!notification) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-notification-row'),\r\n });\r\n }\r\n\r\n const { id, body } = notification || {};\r\n const toggleExpand = () => setExpanded(!expanded);\r\n\r\n return (\r\n <Wrapper\r\n {...other}\r\n aria-expanded={expandable ? expanded : true}\r\n aria-label={expandAriaLabel}\r\n tabIndex={expandable ? 0 : -1}\r\n className={appendClassNames(className, 'humany-notification-row')}\r\n data-pageable={length > 1}\r\n data-types={types}\r\n data-allow-paging={allowPaging}\r\n data-expandable={expandable}\r\n onKeyDown={(e: React.KeyboardEvent) => {\r\n if (e.key === 'Enter') {\r\n toggleExpand();\r\n }\r\n }}\r\n onClick={toggleExpand}\r\n >\r\n <CloseButton\r\n aria-label={closeAriaLabel}\r\n onClick={() => {\r\n setIndex(filtered.indexOf(notification));\r\n setClosed([...closed, id]);\r\n }}\r\n >\r\n <SymbolBadge symbol={{ type: 'Svg', content: 'close' }} />\r\n </CloseButton>\r\n <StyledHtml\r\n htmlParseInstruction={!expandable || expanded ? undefined : infocusableHtml}\r\n data-pageable={length > 1}\r\n data-notification={id}\r\n data-expandable={expandable}\r\n data-expanded={expanded}\r\n html={body}\r\n />\r\n {length > 1 && (\r\n <Pager>\r\n <StyledButton\r\n aria-label={pagePreviousAriaLabel}\r\n data-disabled={index === 0}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (index > 0) {\r\n setIndex(index - 1);\r\n }\r\n }}\r\n >\r\n <StyledSymbolBadge\r\n size={10}\r\n symbol={{ type: 'Svg', content: 'caret-left' }}\r\n />\r\n </StyledButton>\r\n <span>\r\n {index + 1}/{length}\r\n </span>\r\n <StyledButton\r\n aria-label={pageNextAriaLabel}\r\n data-disabled={index + 1 >= length}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n if (index < length - 1) {\r\n setIndex(index + 1);\r\n }\r\n }}\r\n >\r\n <StyledSymbolBadge\r\n size={10}\r\n symbol={{ type: 'Svg', content: 'caret-right' }}\r\n />\r\n </StyledButton>\r\n </Pager>\r\n )}\r\n </Wrapper>\r\n );\r\n }\r\n\r\n return (\r\n <Wrapper\r\n {...other}\r\n className={appendClassNames(className, 'humany-notification-row')}\r\n data-pageable={false}\r\n data-types={types}\r\n data-allow-paging={false}\r\n >\r\n {filtered.map((notification) => {\r\n if (!notification) {\r\n return null;\r\n }\r\n\r\n const { id, body } = notification;\r\n\r\n return (\r\n <StyledHtml\r\n key={id}\r\n data-pageable={false}\r\n data-expandable={expandable}\r\n data-expanded={expanded}\r\n data-notification={id}\r\n html={body}\r\n />\r\n );\r\n })}\r\n </Wrapper>\r\n );\r\n};\r\n\r\nconst Wrapper = styled.div<{ 'data-types': string[]; 'data-allow-paging': boolean } & any>`\r\n ${genericHtml}\r\n padding: ${(p) => p.theme.sizes?.normal} ${(p) => p.theme.sizes?.cardinal * 12}px;\r\n background-color: ${(p) => {\r\n if (p['data-types'].length) {\r\n if (p['data-types'].indexOf('top') > -1) {\r\n return p.theme.colors?.warning;\r\n }\r\n if (p['data-types'].indexOf('bottom') > -1) {\r\n return 'transparent';\r\n }\r\n\r\n return p.theme.colors?.primary;\r\n }\r\n return p.theme.colors?.warning;\r\n }};\r\n color: ${(p) => p.theme.colors?.text};\r\n border-radius: ${(p) => p.theme.borderRadius};\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n cursor: ${(p) => (p['data-expandable'] ? 'pointer' : 'default')};\r\n overflow: hidden;\r\n\r\n i {\r\n color: ${(p) => p.theme.colors?.text};\r\n }\r\n\r\n a {\r\n color: ${(p) => p.theme.colors?.link};\r\n &:focus {\r\n ${(p) => p.theme.accessibility?.isTabbing && linkTabStyle}\r\n }\r\n }\r\n\r\n ${(p) =>\r\n !p['data-allow-paging'] &&\r\n css`\r\n flex-wrap: wrap;\r\n\r\n > div {\r\n min-width: 100%;\r\n margin: ${p.theme.sizes?.cardinal * 2}px;\r\n }\r\n `};\r\n\r\n ${(p) =>\r\n p.theme.accessibility?.isTabbing &&\r\n css`\r\n &:focus {\r\n ${StyledHtml} {\r\n ${borderTabStyle}\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst StyledHtml = styled(Html)<{\r\n 'data-pageable': boolean;\r\n 'data-expandable': boolean;\r\n 'data-expanded': boolean;\r\n}>`\r\n flex: 1;\r\n font-size: ${(p) => p.theme.fonts?.normal};\r\n line-height: 1.6em;\r\n font-weight: 300;\r\n\r\n ${(p) =>\r\n p['data-expandable'] &&\r\n !p['data-expanded'] &&\r\n css`\r\n max-width: 100%;\r\n\r\n p {\r\n display: none;\r\n &:first-child {\r\n display: block;\r\n margin-bottom: 0;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst Pager = styled.div`\r\n text-align: center;\r\n width: 100%;\r\n span {\r\n font-size: ${(p) => p.theme.fonts?.small};\r\n display: inline-block;\r\n width: 30px;\r\n text-align: center;\r\n }\r\n`;\r\n\r\nconst StyledButton = styled(Button)<{ 'data-disabled'?: boolean }>`\r\n background-color: transparent;\r\n border: none;\r\n cursor: pointer;\r\n transition: opacity 200ms ease-out;\r\n justify-self: flex-end;\r\n align-self: flex-start;\r\n padding: ${(p) => p.theme.sizes?.small} svg {\r\n display: block;\r\n }\r\n\r\n &:focus {\r\n ${(p) => p.theme.accessibility?.isTabbing && borderTabStyle}\r\n }\r\n\r\n ${(p) =>\r\n p['data-disabled']\r\n ? css`\r\n opacity: 0.8;\r\n `\r\n : css`\r\n @media (hover) {\r\n &:hover {\r\n opacity: 0.5;\r\n }\r\n }\r\n `}\r\n`;\r\n\r\nconst CloseButton = styled(StyledButton)`\r\n position: absolute;\r\n top: 7.5px;\r\n right: 7.5px;\r\n width: 25px;\r\n height: auto;\r\n padding: ${(p) => `calc(${p.theme.sizes?.small}/2) ${p.theme.sizes?.small}`} svg {\r\n vertical-align: middle;\r\n line,\r\n path {\r\n stroke: ${(p) => p.theme.colors?.text};\r\n }\r\n }\r\n`;\r\n\r\nconst StyledSymbolBadge = styled(SymbolBadge)`\r\n line {\r\n stroke: #ffffff;\r\n }\r\n`;\r\n\r\nconst Empty = styled.div`\r\n display: none;\r\n`;\r\n\r\nexport default NotificationRow;\r\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/knowledge-widget-components-notification-row",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.13",
|
|
4
4
|
"description": "Notification row component for ACE Knowledge Widgets.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
@@ -24,10 +24,10 @@
|
|
|
24
24
|
},
|
|
25
25
|
"sideEffects": false,
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@telia-ace/knowledge-widget-core": "^1.0.
|
|
28
|
-
"@telia-ace/knowledge-widget-types-grid": "^1.0.
|
|
29
|
-
"@telia-ace/knowledge-widget-ui": "^1.0.
|
|
30
|
-
"@telia-ace/widget-services": "^1.0.
|
|
27
|
+
"@telia-ace/knowledge-widget-core": "^1.0.12",
|
|
28
|
+
"@telia-ace/knowledge-widget-types-grid": "^1.0.19",
|
|
29
|
+
"@telia-ace/knowledge-widget-ui": "^1.0.16",
|
|
30
|
+
"@telia-ace/widget-services": "^1.0.9",
|
|
31
31
|
"@telia-ace/widget-utilities": "^1.0.2",
|
|
32
32
|
"@webprovisions/platform": "^1.1.2"
|
|
33
33
|
},
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"@types/react-dom": "^16.8.0",
|
|
42
42
|
"@types/styled-components": "^5.1.7"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "966e7d54038c70191b71e10a898a3738425048fa"
|
|
45
45
|
}
|