@foxford/ui 2.68.0 → 2.69.0-beta-bf06789-20250325
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/components/Alert/Alert.js +1 -1
- package/components/Alert/Alert.js.map +1 -1
- package/components/Alert/Alert.mjs +1 -1
- package/components/Alert/Alert.mjs.map +1 -1
- package/components/Alert/CountdownCircle.js +1 -1
- package/components/Alert/CountdownCircle.js.map +1 -1
- package/components/Alert/CountdownCircle.mjs +1 -1
- package/components/Alert/CountdownCircle.mjs.map +1 -1
- package/dts/index.d.ts +2 -0
- package/package.json +2 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var styled=require('styled-components');var iconPack=require('@foxford/icon-pack');var useClassname=require('../../hooks/useClassname.js');var useConfigPriority=require('../../hooks/use-config-priority.js');var style=require('./style.js');var utils=require('./utils.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Anchor=require('../Anchor/Anchor.js');var Button=require('../Button/Button.js');const getDefaultIcon=({isCompact:e,theme:t,type:n})=>{const o=e?16:24;switch(n){case'error':return jsxRuntime.jsx(iconPack.CloseCirlceFill,{color:t.colors['alert-bg-error-500'],size:o});case'info':return jsxRuntime.jsx(iconPack.NotifFill,{color:t.colors['content-brand-primary'],size:o});case'success':return jsxRuntime.jsx(iconPack.CheckCircleFill,{color:t.colors['alert-success'],size:o});case'warning':return jsxRuntime.jsx(iconPack.WarningTriangleFill,{color:t.colors['alert-warning'],size:o});default:return null}};const Alert=React.forwardRef(((e,t)=>{const n=styled.useTheme();const{cancelTimerText:o="Отменить",primaryAction:s,primaryActionProps:
|
|
1
|
+
'use strict';var React=require('react');var styled=require('styled-components');var iconPack=require('@foxford/icon-pack');var useClassname=require('../../hooks/useClassname.js');var useConfigPriority=require('../../hooks/use-config-priority.js');var style=require('./style.js');var utils=require('./utils.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var Anchor=require('../Anchor/Anchor.js');var Button=require('../Button/Button.js');const getDefaultIcon=({isCompact:e,theme:t,type:n})=>{const o=e?16:24;switch(n){case'error':return jsxRuntime.jsx(iconPack.CloseCirlceFill,{color:t.colors['alert-bg-error-500'],size:o});case'info':return jsxRuntime.jsx(iconPack.NotifFill,{color:t.colors['content-brand-primary'],size:o});case'success':return jsxRuntime.jsx(iconPack.CheckCircleFill,{color:t.colors['alert-success'],size:o});case'warning':return jsxRuntime.jsx(iconPack.WarningTriangleFill,{color:t.colors['alert-warning'],size:o});default:return null}};const Alert=React.forwardRef(((e,t)=>{const n=styled.useTheme();const{cancelTimerText:o="Отменить",primaryAction:s,primaryActionProps:i={},secondaryAction:r,secondaryActionProps:c={},children:l,className:a,clear:m,customIcon:u,image:p,isCompact:x,link:j,linkProps:h={},noIcon:C,onClickCancelTimer:y,closeToast:d,onTimerFinish:k,size:R="s",style:f,textProps:g={},textWrap:A,timer:w,title:T,titleProps:I={},type:P,width:z=['fit-content','fit-content','fit-content','351px','304px','304px']}=useConfigPriority.useConfigPriority(n.components?.Alert,e);const v=useClassname.useClassname("Alert",a);const[b,q]=React.useState(!1);const W=Boolean(R==='l'||!!T||x&&(T||j||s||r));return jsxRuntime.jsxs(style.Root,{className:v,clear:m,column:W,isCompact:x,noIcon:C,onMouseEnter:()=>{w&&q(!0)},onMouseLeave:()=>{w&&q(!1)},ref:t,size:R,style:f,textWrap:A,type:P,width:z,withAction:!!s||!!r,withCloseIcon:!!d,withImage:!!p,withLink:!!j,withTimer:!!w,withTitle:!!T,children:[(!C||u)&&jsxRuntime.jsxs(style.IconWrapper,{column:W,isCompact:x,withImage:!!p,children:[!C&&!w&&!u&&!p&&getDefaultIcon({isCompact:x,theme:n,type:P}),u&&jsxRuntime.jsx(Icon.Icon,{name:u,size:x?16:24}),p,w&&jsxRuntime.jsx(style.Timer,{isCompact:x,paused:b,timer:w,onTimerFinish:k,color:utils.countdownColor({theme:n,type:P})})]}),jsxRuntime.jsxs(style.ContentWrapper,{column:W,isCompact:x,children:[T&&jsxRuntime.jsx(style.Title,{color:n.colors['content-onmain-primary'],isCompact:x,size:x?14:16,lineHeight:"m",...I,children:T}),jsxRuntime.jsx(style.Content,{appearance:"body",color:n.colors['content-onmain-primary'],column:W,isCompact:x,size:x?'xs':'s',textWrap:A,...g,children:l}),j&&jsxRuntime.jsx(style.Link,{clear:m,column:W,isCompact:x,withTitle:!!T,children:jsxRuntime.jsx(Anchor.Anchor,{color:e.clear?n.colors['content-link']:n.colors['content-onmain-primary'],onClick:j.onClick,preset:"default",pseudo:!0,size:x?'s':'m',...h,children:j.content})}),(s||r)&&jsxRuntime.jsxs(style.Actions,{column:W,isCompact:x,withTitle:!!T,children:[r&&jsxRuntime.jsx(Button.Button,{black:!0,fontWeight:"normal",onClick:r.onClick,outline:!0,preset:"brand",size:x?'xs':'s',margin:4,...c,children:r.content}),s&&jsxRuntime.jsx(Button.Button,{black:!0,fontWeight:"normal",onClick:s.onClick,preset:"brand",size:x?'xs':'s',margin:4,...i,children:s.content})]})]}),y&&jsxRuntime.jsx(style.CancelTimer,{black:!0,clear:!0,fontWeight:"normal",isCompact:x,onClick:y,preset:"brand",size:x?'xs':'s',margin:4,children:o}),d&&(!x||!w)&&jsxRuntime.jsx(style.CloseIcon,{"aria-label":"close",onClick:d,type:"button",withTimer:!!w,children:jsxRuntime.jsx(iconPack.Close,{color:n.colors['content-onmain-primary'],size:x?18:24})})]})}));Alert.displayName="Alert",exports.Alert=Alert,exports.COMPONENT_NAME="Alert";
|
|
2
2
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { useClassname } from 'hooks/useClassname'\nimport { useConfigPriority } from 'hooks/use-config-priority'\n\nimport { Anchor } from '../Anchor'\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\n\nimport * as Styled from './style'\n\nimport type { AlertProps } from './types'\nimport { countdownColor } from './utils'\n\nconst getDefaultIcon = ({\n isCompact,\n theme,\n type,\n}: Pick<AlertProps, 'isCompact' | 'type'> & { theme: DefaultTheme }) => {\n const size = isCompact ? 16 : 24\n\n switch (type) {\n case 'error':\n return <CloseCirlceFill color={theme.colors['alert-bg-error-500']} size={size} />\n case 'info':\n return <NotifFill color={theme.colors['content-brand-primary']} size={size} />\n case 'success':\n return <CheckCircleFill color={theme.colors['alert-success']} size={size} />\n case 'warning':\n return <WarningTriangleFill color={theme.colors['alert-warning']} size={size} />\n default:\n return null\n }\n}\n\nconst COMPONENT_NAME = 'Alert'\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const theme = useTheme()\n\n const {\n cancelTimerText = 'Отменить',\n primaryAction,\n primaryActionProps = {},\n secondaryAction,\n secondaryActionProps = {},\n children,\n className,\n clear,\n customIcon,\n image,\n isCompact,\n link,\n linkProps = {},\n noIcon,\n onClickCancelTimer,\n closeToast,\n size = 's',\n style,\n textProps = {},\n textWrap,\n timer,\n title,\n titleProps = {},\n type,\n width = ['fit-content', 'fit-content', 'fit-content', '351px', '304px', '304px'],\n } = useConfigPriority<AlertProps>(theme.components?.Alert, props)\n const _className = useClassname(COMPONENT_NAME, className)\n const [timerOnPause, setTimerOnPause] = useState(false)\n\n const column = Boolean(size === 'l' || !!title || (isCompact && (title || link || primaryAction || secondaryAction)))\n\n const handleMouseEnter = () => {\n if (timer) {\n setTimerOnPause(true)\n }\n }\n\n const handleMouseLeave = () => {\n if (timer) {\n setTimerOnPause(false)\n }\n }\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={ref}\n size={size}\n style={style}\n textWrap={textWrap}\n type={type}\n width={width}\n withAction={!!primaryAction || !!secondaryAction}\n withCloseIcon={!!closeToast}\n withImage={!!image}\n withLink={!!link}\n withTimer={!!timer}\n withTitle={!!title}\n >\n {(!noIcon || customIcon) && (\n <Styled.IconWrapper column={column} isCompact={isCompact} withImage={!!image}>\n {!noIcon && !timer && !customIcon && !image && getDefaultIcon({ isCompact, theme, type })}\n {customIcon && <Icon name={customIcon} size={isCompact ? 16 : 24} />}\n {image}\n {timer && (\n <Styled.Timer\n isCompact={isCompact}\n paused={timerOnPause}\n timer={timer}\n color={countdownColor({ theme, type })}\n />\n )}\n </Styled.IconWrapper>\n )}\n\n <Styled.ContentWrapper column={column} isCompact={isCompact}>\n {title && (\n <Styled.Title\n color={theme.colors['content-onmain-primary']}\n isCompact={isCompact}\n size={isCompact ? 14 : 16}\n lineHeight='m'\n {...titleProps}\n >\n {title}\n </Styled.Title>\n )}\n\n <Styled.Content\n appearance='body'\n color={theme.colors['content-onmain-primary']}\n column={column}\n isCompact={isCompact}\n size={isCompact ? 'xs' : 's'}\n textWrap={textWrap}\n {...textProps}\n >\n {children}\n </Styled.Content>\n\n {link && (\n <Styled.Link clear={clear} column={column} isCompact={isCompact} withTitle={!!title}>\n <Anchor\n color={props.clear ? theme.colors['content-link'] : theme.colors['content-onmain-primary']}\n onClick={link.onClick}\n preset='default'\n pseudo\n size={isCompact ? 's' : 'm'}\n {...linkProps}\n >\n {link.content}\n </Anchor>\n </Styled.Link>\n )}\n\n {(primaryAction || secondaryAction) && (\n <Styled.Actions column={column} isCompact={isCompact} withTitle={!!title}>\n {secondaryAction && (\n <Button\n black\n fontWeight='normal'\n onClick={secondaryAction.onClick}\n outline\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...secondaryActionProps}\n >\n {secondaryAction.content}\n </Button>\n )}\n\n {primaryAction && (\n <Button\n black\n fontWeight='normal'\n onClick={primaryAction.onClick}\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Button>\n )}\n </Styled.Actions>\n )}\n </Styled.ContentWrapper>\n\n {onClickCancelTimer && (\n <Styled.CancelTimer\n black\n clear\n fontWeight='normal'\n isCompact={isCompact}\n onClick={onClickCancelTimer}\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n >\n {cancelTimerText}\n </Styled.CancelTimer>\n )}\n\n {closeToast && (isCompact ? !timer : true) && (\n <Styled.CloseIcon aria-label='close' onClick={closeToast} type='button' withTimer={!!timer}>\n <Close color={theme.colors['content-onmain-primary']} size={isCompact ? 18 : 24} />\n </Styled.CloseIcon>\n )}\n </Styled.Root>\n )\n})\n\nAlert.displayName = COMPONENT_NAME\n\nexport { Alert, COMPONENT_NAME }\n\nexport type { AlertProps }\n"],"names":["getDefaultIcon","isCompact","theme","type","size","_jsx","CloseCirlceFill","color","colors","NotifFill","CheckCircleFill","WarningTriangleFill","Alert","forwardRef","props","ref","useTheme","cancelTimerText","primaryAction","primaryActionProps","secondaryAction","secondaryActionProps","children","className","clear","customIcon","image","link","linkProps","noIcon","onClickCancelTimer","closeToast","style","textProps","textWrap","timer","title","titleProps","width","useConfigPriority","components","_className","useClassname","timerOnPause","setTimerOnPause","useState","column","Boolean","_jsxs","Styled","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","jsx","Icon","name","paused","countdownColor","jsxs","lineHeight","appearance","Anchor","onClick","preset","pseudo","content","Button","black","fontWeight","outline","margin","Close","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { useClassname } from 'hooks/useClassname'\nimport { useConfigPriority } from 'hooks/use-config-priority'\n\nimport { Anchor } from '../Anchor'\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\n\nimport * as Styled from './style'\n\nimport type { AlertProps } from './types'\nimport { countdownColor } from './utils'\n\nconst getDefaultIcon = ({\n isCompact,\n theme,\n type,\n}: Pick<AlertProps, 'isCompact' | 'type'> & { theme: DefaultTheme }) => {\n const size = isCompact ? 16 : 24\n\n switch (type) {\n case 'error':\n return <CloseCirlceFill color={theme.colors['alert-bg-error-500']} size={size} />\n case 'info':\n return <NotifFill color={theme.colors['content-brand-primary']} size={size} />\n case 'success':\n return <CheckCircleFill color={theme.colors['alert-success']} size={size} />\n case 'warning':\n return <WarningTriangleFill color={theme.colors['alert-warning']} size={size} />\n default:\n return null\n }\n}\n\nconst COMPONENT_NAME = 'Alert'\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const theme = useTheme()\n\n const {\n cancelTimerText = 'Отменить',\n primaryAction,\n primaryActionProps = {},\n secondaryAction,\n secondaryActionProps = {},\n children,\n className,\n clear,\n customIcon,\n image,\n isCompact,\n link,\n linkProps = {},\n noIcon,\n onClickCancelTimer,\n closeToast,\n onTimerFinish,\n size = 's',\n style,\n textProps = {},\n textWrap,\n timer,\n title,\n titleProps = {},\n type,\n width = ['fit-content', 'fit-content', 'fit-content', '351px', '304px', '304px'],\n } = useConfigPriority<AlertProps>(theme.components?.Alert, props)\n const _className = useClassname(COMPONENT_NAME, className)\n const [timerOnPause, setTimerOnPause] = useState(false)\n\n const column = Boolean(size === 'l' || !!title || (isCompact && (title || link || primaryAction || secondaryAction)))\n\n const handleMouseEnter = () => {\n if (timer) {\n setTimerOnPause(true)\n }\n }\n\n const handleMouseLeave = () => {\n if (timer) {\n setTimerOnPause(false)\n }\n }\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={ref}\n size={size}\n style={style}\n textWrap={textWrap}\n type={type}\n width={width}\n withAction={!!primaryAction || !!secondaryAction}\n withCloseIcon={!!closeToast}\n withImage={!!image}\n withLink={!!link}\n withTimer={!!timer}\n withTitle={!!title}\n >\n {(!noIcon || customIcon) && (\n <Styled.IconWrapper column={column} isCompact={isCompact} withImage={!!image}>\n {!noIcon && !timer && !customIcon && !image && getDefaultIcon({ isCompact, theme, type })}\n {customIcon && <Icon name={customIcon} size={isCompact ? 16 : 24} />}\n {image}\n {timer && (\n <Styled.Timer\n isCompact={isCompact}\n paused={timerOnPause}\n timer={timer}\n onTimerFinish={onTimerFinish}\n color={countdownColor({ theme, type })}\n />\n )}\n </Styled.IconWrapper>\n )}\n\n <Styled.ContentWrapper column={column} isCompact={isCompact}>\n {title && (\n <Styled.Title\n color={theme.colors['content-onmain-primary']}\n isCompact={isCompact}\n size={isCompact ? 14 : 16}\n lineHeight='m'\n {...titleProps}\n >\n {title}\n </Styled.Title>\n )}\n\n <Styled.Content\n appearance='body'\n color={theme.colors['content-onmain-primary']}\n column={column}\n isCompact={isCompact}\n size={isCompact ? 'xs' : 's'}\n textWrap={textWrap}\n {...textProps}\n >\n {children}\n </Styled.Content>\n\n {link && (\n <Styled.Link clear={clear} column={column} isCompact={isCompact} withTitle={!!title}>\n <Anchor\n color={props.clear ? theme.colors['content-link'] : theme.colors['content-onmain-primary']}\n onClick={link.onClick}\n preset='default'\n pseudo\n size={isCompact ? 's' : 'm'}\n {...linkProps}\n >\n {link.content}\n </Anchor>\n </Styled.Link>\n )}\n\n {(primaryAction || secondaryAction) && (\n <Styled.Actions column={column} isCompact={isCompact} withTitle={!!title}>\n {secondaryAction && (\n <Button\n black\n fontWeight='normal'\n onClick={secondaryAction.onClick}\n outline\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...secondaryActionProps}\n >\n {secondaryAction.content}\n </Button>\n )}\n\n {primaryAction && (\n <Button\n black\n fontWeight='normal'\n onClick={primaryAction.onClick}\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Button>\n )}\n </Styled.Actions>\n )}\n </Styled.ContentWrapper>\n\n {onClickCancelTimer && (\n <Styled.CancelTimer\n black\n clear\n fontWeight='normal'\n isCompact={isCompact}\n onClick={onClickCancelTimer}\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n >\n {cancelTimerText}\n </Styled.CancelTimer>\n )}\n\n {closeToast && (isCompact ? !timer : true) && (\n <Styled.CloseIcon aria-label='close' onClick={closeToast} type='button' withTimer={!!timer}>\n <Close color={theme.colors['content-onmain-primary']} size={isCompact ? 18 : 24} />\n </Styled.CloseIcon>\n )}\n </Styled.Root>\n )\n})\n\nAlert.displayName = COMPONENT_NAME\n\nexport { Alert, COMPONENT_NAME }\n\nexport type { AlertProps }\n"],"names":["getDefaultIcon","isCompact","theme","type","size","_jsx","CloseCirlceFill","color","colors","NotifFill","CheckCircleFill","WarningTriangleFill","Alert","forwardRef","props","ref","useTheme","cancelTimerText","primaryAction","primaryActionProps","secondaryAction","secondaryActionProps","children","className","clear","customIcon","image","link","linkProps","noIcon","onClickCancelTimer","closeToast","onTimerFinish","style","textProps","textWrap","timer","title","titleProps","width","useConfigPriority","components","_className","useClassname","timerOnPause","setTimerOnPause","useState","column","Boolean","_jsxs","Styled","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","jsx","Icon","name","paused","countdownColor","jsxs","lineHeight","appearance","Anchor","onClick","preset","pseudo","content","Button","black","fontWeight","outline","margin","Close","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef,useState}from'react';import{useTheme}from'styled-components';import{Close,WarningTriangleFill,CheckCircleFill,NotifFill,CloseCirlceFill}from'@foxford/icon-pack';import{useClassname}from'../../hooks/useClassname.mjs';import{useConfigPriority}from'../../hooks/use-config-priority.mjs';import{Root,IconWrapper,Timer,ContentWrapper,Title,Content,Link,Actions,CancelTimer,CloseIcon}from'./style.mjs';import{countdownColor}from'./utils.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{Anchor}from'../Anchor/Anchor.mjs';import{Button}from'../Button/Button.mjs';const getDefaultIcon=({isCompact:o,theme:e,type:t})=>{const n=o?16:24;switch(t){case'error':return jsx(CloseCirlceFill,{color:e.colors['alert-bg-error-500'],size:n});case'info':return jsx(NotifFill,{color:e.colors['content-brand-primary'],size:n});case'success':return jsx(CheckCircleFill,{color:e.colors['alert-success'],size:n});case'warning':return jsx(WarningTriangleFill,{color:e.colors['alert-warning'],size:n});default:return null}};const COMPONENT_NAME='Alert';const Alert=forwardRef(((o,e)=>{const t=useTheme();const{cancelTimerText:n="Отменить",primaryAction:r,primaryActionProps:i={},secondaryAction:s,secondaryActionProps:c={},children:l,className:a,clear:m,customIcon:p,image:C,isCompact:
|
|
1
|
+
import{forwardRef,useState}from'react';import{useTheme}from'styled-components';import{Close,WarningTriangleFill,CheckCircleFill,NotifFill,CloseCirlceFill}from'@foxford/icon-pack';import{useClassname}from'../../hooks/useClassname.mjs';import{useConfigPriority}from'../../hooks/use-config-priority.mjs';import{Root,IconWrapper,Timer,ContentWrapper,Title,Content,Link,Actions,CancelTimer,CloseIcon}from'./style.mjs';import{countdownColor}from'./utils.mjs';import{jsxs,jsx}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{Anchor}from'../Anchor/Anchor.mjs';import{Button}from'../Button/Button.mjs';const getDefaultIcon=({isCompact:o,theme:e,type:t})=>{const n=o?16:24;switch(t){case'error':return jsx(CloseCirlceFill,{color:e.colors['alert-bg-error-500'],size:n});case'info':return jsx(NotifFill,{color:e.colors['content-brand-primary'],size:n});case'success':return jsx(CheckCircleFill,{color:e.colors['alert-success'],size:n});case'warning':return jsx(WarningTriangleFill,{color:e.colors['alert-warning'],size:n});default:return null}};const COMPONENT_NAME='Alert';const Alert=forwardRef(((o,e)=>{const t=useTheme();const{cancelTimerText:n="Отменить",primaryAction:r,primaryActionProps:i={},secondaryAction:s,secondaryActionProps:c={},children:l,className:a,clear:m,customIcon:p,image:C,isCompact:h,link:u,linkProps:x={},noIcon:f,onClickCancelTimer:d,closeToast:j,onTimerFinish:y,size:k="s",style:T,textProps:g={},textWrap:A,timer:w,title:I,titleProps:z={},type:W,width:b=['fit-content','fit-content','fit-content','351px','304px','304px']}=useConfigPriority(t.components?.Alert,o);const N=useClassname("Alert",a);const[F,P]=useState(!1);const B=Boolean(k==='l'||!!I||h&&(I||u||r||s));return jsxs(Root,{className:N,clear:m,column:B,isCompact:h,noIcon:f,onMouseEnter:()=>{w&&P(!0)},onMouseLeave:()=>{w&&P(!1)},ref:e,size:k,style:T,textWrap:A,type:W,width:b,withAction:!!r||!!s,withCloseIcon:!!j,withImage:!!C,withLink:!!u,withTimer:!!w,withTitle:!!I,children:[(!f||p)&&jsxs(IconWrapper,{column:B,isCompact:h,withImage:!!C,children:[!f&&!w&&!p&&!C&&getDefaultIcon({isCompact:h,theme:t,type:W}),p&&jsx(Icon,{name:p,size:h?16:24}),C,w&&jsx(Timer,{isCompact:h,paused:F,timer:w,onTimerFinish:y,color:countdownColor({theme:t,type:W})})]}),jsxs(ContentWrapper,{column:B,isCompact:h,children:[I&&jsx(Title,{color:t.colors['content-onmain-primary'],isCompact:h,size:h?14:16,lineHeight:"m",...z,children:I}),jsx(Content,{appearance:"body",color:t.colors['content-onmain-primary'],column:B,isCompact:h,size:h?'xs':'s',textWrap:A,...g,children:l}),u&&jsx(Link,{clear:m,column:B,isCompact:h,withTitle:!!I,children:jsx(Anchor,{color:o.clear?t.colors['content-link']:t.colors['content-onmain-primary'],onClick:u.onClick,preset:"default",pseudo:!0,size:h?'s':'m',...x,children:u.content})}),(r||s)&&jsxs(Actions,{column:B,isCompact:h,withTitle:!!I,children:[s&&jsx(Button,{black:!0,fontWeight:"normal",onClick:s.onClick,outline:!0,preset:"brand",size:h?'xs':'s',margin:4,...c,children:s.content}),r&&jsx(Button,{black:!0,fontWeight:"normal",onClick:r.onClick,preset:"brand",size:h?'xs':'s',margin:4,...i,children:r.content})]})]}),d&&jsx(CancelTimer,{black:!0,clear:!0,fontWeight:"normal",isCompact:h,onClick:d,preset:"brand",size:h?'xs':'s',margin:4,children:n}),j&&(!h||!w)&&jsx(CloseIcon,{"aria-label":"close",onClick:j,type:"button",withTimer:!!w,children:jsx(Close,{color:t.colors['content-onmain-primary'],size:h?18:24})})]})}));Alert.displayName="Alert";export{Alert,COMPONENT_NAME};
|
|
2
2
|
//# sourceMappingURL=Alert.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.mjs","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { useClassname } from 'hooks/useClassname'\nimport { useConfigPriority } from 'hooks/use-config-priority'\n\nimport { Anchor } from '../Anchor'\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\n\nimport * as Styled from './style'\n\nimport type { AlertProps } from './types'\nimport { countdownColor } from './utils'\n\nconst getDefaultIcon = ({\n isCompact,\n theme,\n type,\n}: Pick<AlertProps, 'isCompact' | 'type'> & { theme: DefaultTheme }) => {\n const size = isCompact ? 16 : 24\n\n switch (type) {\n case 'error':\n return <CloseCirlceFill color={theme.colors['alert-bg-error-500']} size={size} />\n case 'info':\n return <NotifFill color={theme.colors['content-brand-primary']} size={size} />\n case 'success':\n return <CheckCircleFill color={theme.colors['alert-success']} size={size} />\n case 'warning':\n return <WarningTriangleFill color={theme.colors['alert-warning']} size={size} />\n default:\n return null\n }\n}\n\nconst COMPONENT_NAME = 'Alert'\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const theme = useTheme()\n\n const {\n cancelTimerText = 'Отменить',\n primaryAction,\n primaryActionProps = {},\n secondaryAction,\n secondaryActionProps = {},\n children,\n className,\n clear,\n customIcon,\n image,\n isCompact,\n link,\n linkProps = {},\n noIcon,\n onClickCancelTimer,\n closeToast,\n size = 's',\n style,\n textProps = {},\n textWrap,\n timer,\n title,\n titleProps = {},\n type,\n width = ['fit-content', 'fit-content', 'fit-content', '351px', '304px', '304px'],\n } = useConfigPriority<AlertProps>(theme.components?.Alert, props)\n const _className = useClassname(COMPONENT_NAME, className)\n const [timerOnPause, setTimerOnPause] = useState(false)\n\n const column = Boolean(size === 'l' || !!title || (isCompact && (title || link || primaryAction || secondaryAction)))\n\n const handleMouseEnter = () => {\n if (timer) {\n setTimerOnPause(true)\n }\n }\n\n const handleMouseLeave = () => {\n if (timer) {\n setTimerOnPause(false)\n }\n }\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={ref}\n size={size}\n style={style}\n textWrap={textWrap}\n type={type}\n width={width}\n withAction={!!primaryAction || !!secondaryAction}\n withCloseIcon={!!closeToast}\n withImage={!!image}\n withLink={!!link}\n withTimer={!!timer}\n withTitle={!!title}\n >\n {(!noIcon || customIcon) && (\n <Styled.IconWrapper column={column} isCompact={isCompact} withImage={!!image}>\n {!noIcon && !timer && !customIcon && !image && getDefaultIcon({ isCompact, theme, type })}\n {customIcon && <Icon name={customIcon} size={isCompact ? 16 : 24} />}\n {image}\n {timer && (\n <Styled.Timer\n isCompact={isCompact}\n paused={timerOnPause}\n timer={timer}\n color={countdownColor({ theme, type })}\n />\n )}\n </Styled.IconWrapper>\n )}\n\n <Styled.ContentWrapper column={column} isCompact={isCompact}>\n {title && (\n <Styled.Title\n color={theme.colors['content-onmain-primary']}\n isCompact={isCompact}\n size={isCompact ? 14 : 16}\n lineHeight='m'\n {...titleProps}\n >\n {title}\n </Styled.Title>\n )}\n\n <Styled.Content\n appearance='body'\n color={theme.colors['content-onmain-primary']}\n column={column}\n isCompact={isCompact}\n size={isCompact ? 'xs' : 's'}\n textWrap={textWrap}\n {...textProps}\n >\n {children}\n </Styled.Content>\n\n {link && (\n <Styled.Link clear={clear} column={column} isCompact={isCompact} withTitle={!!title}>\n <Anchor\n color={props.clear ? theme.colors['content-link'] : theme.colors['content-onmain-primary']}\n onClick={link.onClick}\n preset='default'\n pseudo\n size={isCompact ? 's' : 'm'}\n {...linkProps}\n >\n {link.content}\n </Anchor>\n </Styled.Link>\n )}\n\n {(primaryAction || secondaryAction) && (\n <Styled.Actions column={column} isCompact={isCompact} withTitle={!!title}>\n {secondaryAction && (\n <Button\n black\n fontWeight='normal'\n onClick={secondaryAction.onClick}\n outline\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...secondaryActionProps}\n >\n {secondaryAction.content}\n </Button>\n )}\n\n {primaryAction && (\n <Button\n black\n fontWeight='normal'\n onClick={primaryAction.onClick}\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Button>\n )}\n </Styled.Actions>\n )}\n </Styled.ContentWrapper>\n\n {onClickCancelTimer && (\n <Styled.CancelTimer\n black\n clear\n fontWeight='normal'\n isCompact={isCompact}\n onClick={onClickCancelTimer}\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n >\n {cancelTimerText}\n </Styled.CancelTimer>\n )}\n\n {closeToast && (isCompact ? !timer : true) && (\n <Styled.CloseIcon aria-label='close' onClick={closeToast} type='button' withTimer={!!timer}>\n <Close color={theme.colors['content-onmain-primary']} size={isCompact ? 18 : 24} />\n </Styled.CloseIcon>\n )}\n </Styled.Root>\n )\n})\n\nAlert.displayName = COMPONENT_NAME\n\nexport { Alert, COMPONENT_NAME }\n\nexport type { AlertProps }\n"],"names":["getDefaultIcon","isCompact","theme","type","size","_jsx","CloseCirlceFill","color","colors","NotifFill","CheckCircleFill","WarningTriangleFill","COMPONENT_NAME","Alert","forwardRef","props","ref","useTheme","cancelTimerText","primaryAction","primaryActionProps","secondaryAction","secondaryActionProps","children","className","clear","customIcon","image","link","linkProps","noIcon","onClickCancelTimer","closeToast","style","textProps","textWrap","timer","title","titleProps","width","useConfigPriority","components","_className","useClassname","timerOnPause","setTimerOnPause","useState","column","Boolean","_jsxs","Styled","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","Icon","name","paused","countdownColor","lineHeight","appearance","Anchor","onClick","preset","pseudo","content","Button","black","fontWeight","outline","margin","Close","displayName"],"mappings":"kmBAiBA,MAAMA,eAAiBA,EACrBC,YACAC,QACAC,WAEA,MAAMC,EAAOH,EAAY,GAAK,GAE9B,OAAQE,GACN,IAAK,QACH,OAAOE,IAACC,gBAAe,CAACC,MAAOL,EAAMM,OAAO,sBAAuBJ,KAAMA,IAC3E,IAAK,OACH,OAAOC,IAACI,UAAS,CAACF,MAAOL,EAAMM,OAAO,yBAA0BJ,KAAMA,IACxE,IAAK,UACH,OAAOC,IAACK,gBAAe,CAACH,MAAOL,EAAMM,OAAO,iBAAkBJ,KAAMA,IACtE,IAAK,UACH,OAAOC,IAACM,oBAAmB,CAACJ,MAAOL,EAAMM,OAAO,iBAAkBJ,KAAMA,IAC1E,QACE,OAAO,KACX,EAGIQ,MAAAA,eAAiB,QAEjBC,MAAAA,MAAQC,YAAuC,CAACC,EAAOC,KAC3D,MAAMd,EAAQe,WAEd,MAAMC,gBACJA,EAAkB,WAAUC,cAC5BA,EAAaC,mBACbA,EAAqB,CAAE,EAAAC,gBACvBA,EAAeC,qBACfA,EAAuB,CAAE,EAAAC,SACzBA,EAAQC,UACRA,EAASC,MACTA,EAAKC,WACLA,EAAUC,MACVA,EAAK1B,UACLA,EAAS2B,KACTA,EAAIC,UACJA,EAAY,CAAE,EAAAC,OACdA,EAAMC,mBACNA,EAAkBC,WAClBA,EAAU5B,KACVA,EAAO,IAAG6B,MACVA,EAAKC,UACLA,EAAY,CAAE,EAAAC,SACdA,EAAQC,MACRA,EAAKC,MACLA,EAAKC,WACLA,EAAa,CAAE,EAAAnC,KACfA,EAAIoC,MACJA,EAAQ,CAAC,cAAe,cAAe,cAAe,QAAS,QAAS,UACtEC,kBAA8BtC,EAAMuC,YAAY5B,MAAOE,GAC3D,MAAM2B,EAAaC,aAhCE,QAgC2BnB,GAChD,MAAOoB,EAAcC,GAAmBC,UAAS,GAEjD,MAAMC,EAASC,QAAQ5C,IAAS,OAASiC,GAAUpC,IAAcoC,GAAST,GAAQT,GAAiBE,IAcnG,OACE4B,KAACC,KAAW,CACV1B,UAAWkB,EACXjB,MAAOA,EACPsB,OAAQA,EACR9C,UAAWA,EACX6B,OAAQA,EACRqB,aAnBqBC,KACnBhB,GACFS,GAAgB,EAClB,EAiBEQ,aAdqBC,KACnBlB,GACFS,GAAgB,EAClB,EAYE7B,IAAKA,EACLZ,KAAMA,EACN6B,MAAOA,EACPE,SAAUA,EACVhC,KAAMA,EACNoC,MAAOA,EACPgB,aAAcpC,KAAmBE,EACjCmC,gBAAiBxB,EACjByB,YAAa9B,EACb+B,WAAY9B,EACZ+B,YAAavB,EACbwB,YAAavB,EAAMd,SAAA,GAEhBO,GAAUJ,IACXuB,KAACC,YAAkB,CAACH,OAAQA,EAAQ9C,UAAWA,EAAWwD,YAAa9B,EAAMJ,SAC1E,EAACO,IAAWM,IAAUV,IAAeC,GAAS3B,eAAe,CAAEC,YAAWC,QAAOC,SACjFuB,GAAcrB,IAACwD,KAAI,CAACC,KAAMpC,EAAYtB,KAAMH,EAAY,GAAK,KAC7D0B,EACAS,GACC/B,IAAC6C,MAAY,CACXjD,UAAWA,EACX8D,OAAQnB,EACRR,MAAOA,EACP7B,MAAOyD,eAAe,CAAE9D,QAAOC,cAMvC8C,KAACC,eAAqB,CAACH,OAAQA,EAAQ9C,UAAWA,EAAUsB,UACzDc,GACChC,IAAC6C,MAAY,CACX3C,MAAOL,EAAMM,OAAO,0BACpBP,UAAWA,EACXG,KAAMH,EAAY,GAAK,GACvBgE,WAAW,OACP3B,EAAUf,SAEbc,IAILhC,IAAC6C,QAAc,CACbgB,WAAW,OACX3D,MAAOL,EAAMM,OAAO,0BACpBuC,OAAQA,EACR9C,UAAWA,EACXG,KAAMH,EAAY,KAAO,IACzBkC,SAAUA,KACND,EAASX,SAEZA,IAGFK,GACCvB,IAAC6C,KAAW,CAACzB,MAAOA,EAAOsB,OAAQA,EAAQ9C,UAAWA,EAAW2D,YAAavB,EAAMd,SAClFlB,IAAC8D,OAAM,CACL5D,MAAOQ,EAAMU,MAAQvB,EAAMM,OAAO,gBAAkBN,EAAMM,OAAO,0BACjE4D,QAASxC,EAAKwC,QACdC,OAAO,UACPC,QAAM,EACNlE,KAAMH,EAAY,IAAM,OACpB4B,EAASN,SAEZK,EAAK2C,aAKVpD,GAAiBE,IACjB4B,KAACC,QAAc,CAACH,OAAQA,EAAQ9C,UAAWA,EAAW2D,YAAavB,EAAMd,SACtEF,CAAAA,GACChB,IAACmE,OAAM,CACLC,OAAK,EACLC,WAAW,SACXN,QAAS/C,EAAgB+C,QACzBO,SAAO,EACPN,OAAO,QACPjE,KAAMH,EAAY,KAAO,IACzB2E,OAAQ,KACJtD,EAAoBC,SAEvBF,EAAgBkD,UAIpBpD,GACCd,IAACmE,OAAM,CACLC,OAAK,EACLC,WAAW,SACXN,QAASjD,EAAciD,QACvBC,OAAO,QACPjE,KAAMH,EAAY,KAAO,IACzB2E,OAAQ,KACJxD,EAAkBG,SAErBJ,EAAcoD,gBAOxBxC,GACC1B,IAAC6C,YAAkB,CACjBuB,OAAK,EACLhD,OAAK,EACLiD,WAAW,SACXzE,UAAWA,EACXmE,QAASrC,EACTsC,OAAO,QACPjE,KAAMH,EAAY,KAAO,IACzB2E,OAAQ,EAAErD,SAETL,IAIJc,KAAe/B,IAAamC,IAC3B/B,IAAC6C,UAAgB,CAAC,aAAW,QAAQkB,QAASpC,EAAY7B,KAAK,SAASwD,YAAavB,EAAMb,SACzFlB,IAACwE,MAAK,CAACtE,MAAOL,EAAMM,OAAO,0BAA2BJ,KAAMH,EAAY,GAAK,SAGrE,IAIlBY,MAAMiE,YAzLiB"}
|
|
1
|
+
{"version":3,"file":"Alert.mjs","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport type { DefaultTheme } from 'styled-components'\n\nimport { useClassname } from 'hooks/useClassname'\nimport { useConfigPriority } from 'hooks/use-config-priority'\n\nimport { Anchor } from '../Anchor'\nimport { Button } from '../Button'\nimport { Icon } from '../Icon'\n\nimport * as Styled from './style'\n\nimport type { AlertProps } from './types'\nimport { countdownColor } from './utils'\n\nconst getDefaultIcon = ({\n isCompact,\n theme,\n type,\n}: Pick<AlertProps, 'isCompact' | 'type'> & { theme: DefaultTheme }) => {\n const size = isCompact ? 16 : 24\n\n switch (type) {\n case 'error':\n return <CloseCirlceFill color={theme.colors['alert-bg-error-500']} size={size} />\n case 'info':\n return <NotifFill color={theme.colors['content-brand-primary']} size={size} />\n case 'success':\n return <CheckCircleFill color={theme.colors['alert-success']} size={size} />\n case 'warning':\n return <WarningTriangleFill color={theme.colors['alert-warning']} size={size} />\n default:\n return null\n }\n}\n\nconst COMPONENT_NAME = 'Alert'\n\nconst Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const theme = useTheme()\n\n const {\n cancelTimerText = 'Отменить',\n primaryAction,\n primaryActionProps = {},\n secondaryAction,\n secondaryActionProps = {},\n children,\n className,\n clear,\n customIcon,\n image,\n isCompact,\n link,\n linkProps = {},\n noIcon,\n onClickCancelTimer,\n closeToast,\n onTimerFinish,\n size = 's',\n style,\n textProps = {},\n textWrap,\n timer,\n title,\n titleProps = {},\n type,\n width = ['fit-content', 'fit-content', 'fit-content', '351px', '304px', '304px'],\n } = useConfigPriority<AlertProps>(theme.components?.Alert, props)\n const _className = useClassname(COMPONENT_NAME, className)\n const [timerOnPause, setTimerOnPause] = useState(false)\n\n const column = Boolean(size === 'l' || !!title || (isCompact && (title || link || primaryAction || secondaryAction)))\n\n const handleMouseEnter = () => {\n if (timer) {\n setTimerOnPause(true)\n }\n }\n\n const handleMouseLeave = () => {\n if (timer) {\n setTimerOnPause(false)\n }\n }\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={ref}\n size={size}\n style={style}\n textWrap={textWrap}\n type={type}\n width={width}\n withAction={!!primaryAction || !!secondaryAction}\n withCloseIcon={!!closeToast}\n withImage={!!image}\n withLink={!!link}\n withTimer={!!timer}\n withTitle={!!title}\n >\n {(!noIcon || customIcon) && (\n <Styled.IconWrapper column={column} isCompact={isCompact} withImage={!!image}>\n {!noIcon && !timer && !customIcon && !image && getDefaultIcon({ isCompact, theme, type })}\n {customIcon && <Icon name={customIcon} size={isCompact ? 16 : 24} />}\n {image}\n {timer && (\n <Styled.Timer\n isCompact={isCompact}\n paused={timerOnPause}\n timer={timer}\n onTimerFinish={onTimerFinish}\n color={countdownColor({ theme, type })}\n />\n )}\n </Styled.IconWrapper>\n )}\n\n <Styled.ContentWrapper column={column} isCompact={isCompact}>\n {title && (\n <Styled.Title\n color={theme.colors['content-onmain-primary']}\n isCompact={isCompact}\n size={isCompact ? 14 : 16}\n lineHeight='m'\n {...titleProps}\n >\n {title}\n </Styled.Title>\n )}\n\n <Styled.Content\n appearance='body'\n color={theme.colors['content-onmain-primary']}\n column={column}\n isCompact={isCompact}\n size={isCompact ? 'xs' : 's'}\n textWrap={textWrap}\n {...textProps}\n >\n {children}\n </Styled.Content>\n\n {link && (\n <Styled.Link clear={clear} column={column} isCompact={isCompact} withTitle={!!title}>\n <Anchor\n color={props.clear ? theme.colors['content-link'] : theme.colors['content-onmain-primary']}\n onClick={link.onClick}\n preset='default'\n pseudo\n size={isCompact ? 's' : 'm'}\n {...linkProps}\n >\n {link.content}\n </Anchor>\n </Styled.Link>\n )}\n\n {(primaryAction || secondaryAction) && (\n <Styled.Actions column={column} isCompact={isCompact} withTitle={!!title}>\n {secondaryAction && (\n <Button\n black\n fontWeight='normal'\n onClick={secondaryAction.onClick}\n outline\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...secondaryActionProps}\n >\n {secondaryAction.content}\n </Button>\n )}\n\n {primaryAction && (\n <Button\n black\n fontWeight='normal'\n onClick={primaryAction.onClick}\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Button>\n )}\n </Styled.Actions>\n )}\n </Styled.ContentWrapper>\n\n {onClickCancelTimer && (\n <Styled.CancelTimer\n black\n clear\n fontWeight='normal'\n isCompact={isCompact}\n onClick={onClickCancelTimer}\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n >\n {cancelTimerText}\n </Styled.CancelTimer>\n )}\n\n {closeToast && (isCompact ? !timer : true) && (\n <Styled.CloseIcon aria-label='close' onClick={closeToast} type='button' withTimer={!!timer}>\n <Close color={theme.colors['content-onmain-primary']} size={isCompact ? 18 : 24} />\n </Styled.CloseIcon>\n )}\n </Styled.Root>\n )\n})\n\nAlert.displayName = COMPONENT_NAME\n\nexport { Alert, COMPONENT_NAME }\n\nexport type { AlertProps }\n"],"names":["getDefaultIcon","isCompact","theme","type","size","_jsx","CloseCirlceFill","color","colors","NotifFill","CheckCircleFill","WarningTriangleFill","COMPONENT_NAME","Alert","forwardRef","props","ref","useTheme","cancelTimerText","primaryAction","primaryActionProps","secondaryAction","secondaryActionProps","children","className","clear","customIcon","image","link","linkProps","noIcon","onClickCancelTimer","closeToast","onTimerFinish","style","textProps","textWrap","timer","title","titleProps","width","useConfigPriority","components","_className","useClassname","timerOnPause","setTimerOnPause","useState","column","Boolean","_jsxs","Styled","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","Icon","name","paused","countdownColor","lineHeight","appearance","Anchor","onClick","preset","pseudo","content","Button","black","fontWeight","outline","margin","Close","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var colors=require('../../theme/colors.js');var jsxRuntime=require('react/jsx-runtime');var Progress=require('../Progress/Progress.js');exports.CountdownCircle=({className:e,color:r,isCompact:s,paused:t,timer:
|
|
1
|
+
'use strict';var React=require('react');var colors=require('../../theme/colors.js');var jsxRuntime=require('react/jsx-runtime');var Progress=require('../Progress/Progress.js');exports.CountdownCircle=({className:e,color:r,isCompact:s,paused:t,timer:o,onTimerFinish:c})=>{const[a,n]=React.useState(o);const u=React.useRef(!1);const i=React.useRef();const l=a/o*100;return React.useEffect((()=>(t||u.current||(i.current=setInterval((()=>{n((e=>e<=.05?(c!==void 0&&c(),u.current=!0,clearInterval(i.current),e):e-.05))}),50)),()=>{i.current&&clearInterval(i.current)})),[t,c]),jsxRuntime.jsx(Progress.Progress.Circle,{className:e,progress:l,progressStartAngle:0,resultColor:r,size:s?16:20,strokeBGColor:colors.DefaultColorNames.transparent,strokeLineWidth:1.5,children:Math.ceil(a)})};
|
|
2
2
|
//# sourceMappingURL=CountdownCircle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { DefaultColorNames } from 'theme/colors'\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, paused, timer }: CountdownCircleProps) => {\n const [countdown, setCountdown] = useState(timer)\n const intervalId = useRef<ReturnType<typeof setInterval>>()\n
|
|
1
|
+
{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { DefaultColorNames } from 'theme/colors'\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, paused, timer, onTimerFinish }: CountdownCircleProps) => {\n const [countdown, setCountdown] = useState(timer)\n const finishedRef = useRef<boolean>(false)\n const intervalId = useRef<ReturnType<typeof setInterval>>()\n const progress = (countdown / timer) * 100\n\n useEffect(() => {\n if (!paused && !finishedRef.current) {\n intervalId.current = setInterval(() => {\n setCountdown((prevCountdown) => {\n if (prevCountdown <= progressRate) {\n if (onTimerFinish !== undefined) {\n onTimerFinish()\n }\n\n finishedRef.current = true\n clearInterval(intervalId.current)\n return prevCountdown\n }\n\n return prevCountdown - progressRate\n })\n }, progressRate * 1000)\n }\n\n return () => {\n if (intervalId.current) {\n clearInterval(intervalId.current)\n }\n }\n }, [paused, onTimerFinish])\n\n return (\n <Progress.Circle\n className={className}\n progress={progress}\n progressStartAngle={0}\n resultColor={color}\n size={isCompact ? 16 : 20}\n strokeBGColor={DefaultColorNames.transparent}\n strokeLineWidth={1.5}\n >\n {Math.ceil(countdown)}\n </Progress.Circle>\n )\n}\n\nexport { CountdownCircle }\n"],"names":["CountdownCircle","className","color","isCompact","paused","timer","onTimerFinish","countdown","setCountdown","useState","finishedRef","useRef","intervalId","progress","useEffect","current","setInterval","prevCountdown","undefined","clearInterval","progressRate","_jsx","jsx","Progress","Circle","progressStartAngle","resultColor","size","strokeBGColor","DefaultColorNames","transparent","strokeLineWidth","children","Math","ceil"],"mappings":"wMASwBA,EAAGC,YAAWC,QAAOC,YAAWC,SAAQC,QAAOC,oBACrE,MAAOC,EAAWC,GAAgBC,MAAQA,SAACJ,GAC3C,MAAMK,EAAcC,cAAgB,GACpC,MAAMC,EAAaD,MAAAA,SACnB,MAAME,EAAYN,EAAYF,EAAS,IA4BvC,OA1BAS,MAAAA,WAAU,KACHV,GAAWM,EAAYK,UAC1BH,EAAWG,QAAUC,aAAY,KAC/BR,GAAcS,GACRA,GAZO,KAaLX,SAAkBY,GACpBZ,IAGFI,EAAYK,SAAU,EACtBI,cAAcP,EAAWG,SAClBE,GAGFA,EAtBI,KAuBX,GACDG,KAGE,KACDR,EAAWG,SACbI,cAAcP,EAAWG,QAC3B,IAED,CAACX,EAAQE,IAGVe,WAAAC,IAACC,SAAQA,SAACC,OAAM,CACdvB,UAAWA,EACXY,SAAUA,EACVY,mBAAoB,EACpBC,YAAaxB,EACbyB,KAAMxB,EAAY,GAAK,GACvByB,cAAeC,OAAiBA,kBAACC,YACjCC,gBAAiB,IAAIC,SAEpBC,KAAKC,KAAK3B,IACK"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useState,useRef,useEffect}from'react';import{DefaultColorNames}from'../../theme/colors.mjs';import{jsx}from'react/jsx-runtime';import{Progress}from'../Progress/Progress.mjs';const CountdownCircle=({className:
|
|
1
|
+
import{useState,useRef,useEffect}from'react';import{DefaultColorNames}from'../../theme/colors.mjs';import{jsx}from'react/jsx-runtime';import{Progress}from'../Progress/Progress.mjs';const CountdownCircle=({className:r,color:e,isCompact:t,paused:s,timer:o,onTimerFinish:c})=>{const[n,a]=useState(o);const l=useRef(!1);const u=useRef();const i=n/o*100;return useEffect((()=>(s||l.current||(u.current=setInterval((()=>{a((r=>r<=.05?(c!==void 0&&c(),l.current=!0,clearInterval(u.current),r):r-.05))}),50)),()=>{u.current&&clearInterval(u.current)})),[s,c]),jsx(Progress.Circle,{className:r,progress:i,progressStartAngle:0,resultColor:e,size:t?16:20,strokeBGColor:DefaultColorNames.transparent,strokeLineWidth:1.5,children:Math.ceil(n)})};export{CountdownCircle};
|
|
2
2
|
//# sourceMappingURL=CountdownCircle.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountdownCircle.mjs","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { DefaultColorNames } from 'theme/colors'\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, paused, timer }: CountdownCircleProps) => {\n const [countdown, setCountdown] = useState(timer)\n const intervalId = useRef<ReturnType<typeof setInterval>>()\n
|
|
1
|
+
{"version":3,"file":"CountdownCircle.mjs","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { DefaultColorNames } from 'theme/colors'\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, paused, timer, onTimerFinish }: CountdownCircleProps) => {\n const [countdown, setCountdown] = useState(timer)\n const finishedRef = useRef<boolean>(false)\n const intervalId = useRef<ReturnType<typeof setInterval>>()\n const progress = (countdown / timer) * 100\n\n useEffect(() => {\n if (!paused && !finishedRef.current) {\n intervalId.current = setInterval(() => {\n setCountdown((prevCountdown) => {\n if (prevCountdown <= progressRate) {\n if (onTimerFinish !== undefined) {\n onTimerFinish()\n }\n\n finishedRef.current = true\n clearInterval(intervalId.current)\n return prevCountdown\n }\n\n return prevCountdown - progressRate\n })\n }, progressRate * 1000)\n }\n\n return () => {\n if (intervalId.current) {\n clearInterval(intervalId.current)\n }\n }\n }, [paused, onTimerFinish])\n\n return (\n <Progress.Circle\n className={className}\n progress={progress}\n progressStartAngle={0}\n resultColor={color}\n size={isCompact ? 16 : 20}\n strokeBGColor={DefaultColorNames.transparent}\n strokeLineWidth={1.5}\n >\n {Math.ceil(countdown)}\n </Progress.Circle>\n )\n}\n\nexport { CountdownCircle }\n"],"names":["CountdownCircle","className","color","isCompact","paused","timer","onTimerFinish","countdown","setCountdown","useState","finishedRef","useRef","intervalId","progress","useEffect","current","setInterval","prevCountdown","undefined","clearInterval","progressRate","_jsx","Progress","Circle","progressStartAngle","resultColor","size","strokeBGColor","DefaultColorNames","transparent","strokeLineWidth","children","Math","ceil"],"mappings":"qLASMA,MAAAA,gBAAkBA,EAAGC,YAAWC,QAAOC,YAAWC,SAAQC,QAAOC,oBACrE,MAAOC,EAAWC,GAAgBC,SAASJ,GAC3C,MAAMK,EAAcC,QAAgB,GACpC,MAAMC,EAAaD,SACnB,MAAME,EAAYN,EAAYF,EAAS,IA4BvC,OA1BAS,WAAU,KACHV,GAAWM,EAAYK,UAC1BH,EAAWG,QAAUC,aAAY,KAC/BR,GAAcS,GACRA,GAZO,KAaLX,SAAkBY,GACpBZ,IAGFI,EAAYK,SAAU,EACtBI,cAAcP,EAAWG,SAClBE,GAGFA,EAtBI,KAuBX,GACDG,KAGE,KACDR,EAAWG,SACbI,cAAcP,EAAWG,QAC3B,IAED,CAACX,EAAQE,IAGVe,IAACC,SAASC,OAAM,CACdtB,UAAWA,EACXY,SAAUA,EACVW,mBAAoB,EACpBC,YAAavB,EACbwB,KAAMvB,EAAY,GAAK,GACvBwB,cAAeC,kBAAkBC,YACjCC,gBAAiB,IAAIC,SAEpBC,KAAKC,KAAK1B,IACK"}
|
package/dts/index.d.ts
CHANGED
|
@@ -1518,6 +1518,8 @@ interface AlertProps extends BaseProps {
|
|
|
1518
1518
|
noIcon?: boolean;
|
|
1519
1519
|
/** You can cancel the action if the timer has not expired yet */
|
|
1520
1520
|
onClickCancelTimer?(): void;
|
|
1521
|
+
/** Call when timer has expired */
|
|
1522
|
+
onTimerFinish?(): void;
|
|
1521
1523
|
/** Display the action button */
|
|
1522
1524
|
primaryAction?: {
|
|
1523
1525
|
content: string | React.ReactNode;
|
package/package.json
CHANGED