@foxford/ui 2.119.0-beta-3939fb6-20260713 → 2.119.0
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 +2 -0
- package/components/Alert/CountdownCircle.js.map +1 -0
- package/components/Alert/CountdownCircle.mjs +2 -0
- package/components/Alert/CountdownCircle.mjs.map +1 -0
- package/components/Alert/style.js +1 -1
- package/components/Alert/style.js.map +1 -1
- package/components/Alert/style.mjs +1 -1
- package/components/Alert/style.mjs.map +1 -1
- package/components/Alert/utils.js +2 -0
- package/components/Alert/utils.js.map +1 -0
- package/components/Alert/utils.mjs +2 -0
- package/components/Alert/utils.mjs.map +1 -0
- package/components/Button/Button.js +1 -1
- package/components/Button/Button.js.map +1 -1
- package/components/Button/Button.mjs +1 -1
- package/components/Button/Button.mjs.map +1 -1
- package/components/DialogComponent/DialogComponent.js +1 -1
- package/components/DialogComponent/DialogComponent.js.map +1 -1
- package/components/DialogComponent/DialogComponent.mjs +1 -1
- package/components/DialogComponent/DialogComponent.mjs.map +1 -1
- package/components/IconButton/IconButton.js +1 -1
- package/components/IconButton/IconButton.js.map +1 -1
- package/components/IconButton/IconButton.mjs +1 -1
- package/components/IconButton/IconButton.mjs.map +1 -1
- package/components/IconButton/style.js +1 -1
- package/components/IconButton/style.js.map +1 -1
- package/components/IconButton/style.mjs +1 -1
- package/components/IconButton/style.mjs.map +1 -1
- package/components/Media/Media.js +1 -1
- package/components/Media/Media.js.map +1 -1
- package/components/Media/Media.mjs +1 -1
- package/components/Media/Media.mjs.map +1 -1
- package/components/Media/MediaMatcher.js +2 -0
- package/components/Media/MediaMatcher.js.map +1 -0
- package/components/Media/MediaMatcher.mjs +2 -0
- package/components/Media/MediaMatcher.mjs.map +1 -0
- package/components/Media/MediaMatchers.js +1 -1
- package/components/Media/MediaMatchers.js.map +1 -1
- package/components/Media/MediaMatchers.mjs +1 -1
- package/components/Media/MediaMatchers.mjs.map +1 -1
- package/components/Media/MediaMediator.js +2 -0
- package/components/Media/MediaMediator.js.map +1 -0
- package/components/Media/MediaMediator.mjs +2 -0
- package/components/Media/MediaMediator.mjs.map +1 -0
- package/{shared/context/media.js → components/Media/context.js} +1 -1
- package/components/Media/context.js.map +1 -0
- package/{shared/context/media.mjs → components/Media/context.mjs} +1 -1
- package/components/Media/context.mjs.map +1 -0
- package/{hooks → components/Media}/useMediaConnector.js +1 -1
- package/components/Media/useMediaConnector.js.map +1 -0
- package/components/Media/useMediaConnector.mjs +2 -0
- package/components/Media/useMediaConnector.mjs.map +1 -0
- package/components/Media/useMediaMatchers.js.map +1 -0
- package/components/Media/useMediaMatchers.mjs.map +1 -0
- package/components/Media/useMediaPropsMatches.js.map +1 -1
- package/components/Media/useMediaPropsMatches.mjs.map +1 -1
- package/components/TooltipComponent/TooltipComponent.js +1 -1
- package/components/TooltipComponent/TooltipComponent.js.map +1 -1
- package/components/TooltipComponent/TooltipComponent.mjs +1 -1
- package/components/TooltipComponent/TooltipComponent.mjs.map +1 -1
- package/dts/index.d.ts +659 -911
- package/icon-pack/src/collection.json.js +1 -1
- package/icon-pack/src/collection.json.mjs +1 -1
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/mixins/responsive-margin.js.map +1 -1
- package/mixins/responsive-margin.mjs.map +1 -1
- package/package.json +2 -2
- package/theme/colors-dark.js +1 -1
- package/theme/colors-dark.js.map +1 -1
- package/theme/colors-dark.mjs +1 -1
- package/theme/colors-dark.mjs.map +1 -1
- package/components/Alert/sizes.js +0 -2
- package/components/Alert/sizes.js.map +0 -1
- package/components/Alert/sizes.mjs +0 -2
- package/components/Alert/sizes.mjs.map +0 -1
- package/components/Alert/useAlertProps.js +0 -2
- package/components/Alert/useAlertProps.js.map +0 -1
- package/components/Alert/useAlertProps.mjs +0 -2
- package/components/Alert/useAlertProps.mjs.map +0 -1
- package/components/Timer/Timer.js +0 -2
- package/components/Timer/Timer.js.map +0 -1
- package/components/Timer/Timer.mjs +0 -2
- package/components/Timer/Timer.mjs.map +0 -1
- package/components/Timer/context.js +0 -2
- package/components/Timer/context.js.map +0 -1
- package/components/Timer/context.mjs +0 -2
- package/components/Timer/context.mjs.map +0 -1
- package/components/Timer/images/Circle.svg.js +0 -2
- package/components/Timer/images/Circle.svg.js.map +0 -1
- package/components/Timer/images/Circle.svg.mjs +0 -2
- package/components/Timer/images/Circle.svg.mjs.map +0 -1
- package/components/Timer/sizes.js +0 -2
- package/components/Timer/sizes.js.map +0 -1
- package/components/Timer/sizes.mjs +0 -2
- package/components/Timer/sizes.mjs.map +0 -1
- package/components/Timer/styled.js +0 -2
- package/components/Timer/styled.js.map +0 -1
- package/components/Timer/styled.mjs +0 -2
- package/components/Timer/styled.mjs.map +0 -1
- package/components/Timer/useTimer.js +0 -2
- package/components/Timer/useTimer.js.map +0 -1
- package/components/Timer/useTimer.mjs +0 -2
- package/components/Timer/useTimer.mjs.map +0 -1
- package/components/Timer/useTimerProps.js +0 -2
- package/components/Timer/useTimerProps.js.map +0 -1
- package/components/Timer/useTimerProps.mjs +0 -2
- package/components/Timer/useTimerProps.mjs.map +0 -1
- package/hooks/useMediaConnector.js.map +0 -1
- package/hooks/useMediaConnector.mjs +0 -2
- package/hooks/useMediaConnector.mjs.map +0 -1
- package/hooks/useMediaMatchers.js.map +0 -1
- package/hooks/useMediaMatchers.mjs.map +0 -1
- package/hooks/useResponsiveLayoutProps.js +0 -2
- package/hooks/useResponsiveLayoutProps.js.map +0 -1
- package/hooks/useResponsiveLayoutProps.mjs +0 -2
- package/hooks/useResponsiveLayoutProps.mjs.map +0 -1
- package/hooks/useResponsiveMarginProps.js +0 -2
- package/hooks/useResponsiveMarginProps.js.map +0 -1
- package/hooks/useResponsiveMarginProps.mjs +0 -2
- package/hooks/useResponsiveMarginProps.mjs.map +0 -1
- package/hooks/useResponsiveProps.js +0 -2
- package/hooks/useResponsiveProps.js.map +0 -1
- package/hooks/useResponsiveProps.mjs +0 -2
- package/hooks/useResponsiveProps.mjs.map +0 -1
- package/hooks/useResponsiveSizeProps.js +0 -2
- package/hooks/useResponsiveSizeProps.js.map +0 -1
- package/hooks/useResponsiveSizeProps.mjs +0 -2
- package/hooks/useResponsiveSizeProps.mjs.map +0 -1
- package/shared/context/media.js.map +0 -1
- package/shared/context/media.mjs.map +0 -1
- package/shared/media/MediaMatcher.js +0 -2
- package/shared/media/MediaMatcher.js.map +0 -1
- package/shared/media/MediaMatcher.mjs +0 -2
- package/shared/media/MediaMatcher.mjs.map +0 -1
- package/shared/media/MediaMediator.js +0 -2
- package/shared/media/MediaMediator.js.map +0 -1
- package/shared/media/MediaMediator.mjs +0 -2
- package/shared/media/MediaMediator.mjs.map +0 -1
- package/shared/utils/isPointerSupported.js +0 -2
- package/shared/utils/isPointerSupported.js.map +0 -1
- package/shared/utils/isPointerSupported.mjs +0 -2
- package/shared/utils/isPointerSupported.mjs.map +0 -1
- /package/{hooks → components/Media}/useMediaMatchers.js +0 -0
- /package/{hooks → components/Media}/useMediaMatchers.mjs +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var
|
|
1
|
+
'use strict';var React=require('react');var styled=require('styled-components');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');var index=require('../../icon-pack/src/icons/Close/index.js');var index$1=require('../../icon-pack/src/icons/WarningTriangleFill/index.js');var index$2=require('../../icon-pack/src/icons/CheckCircleFill/index.js');var index$3=require('../../icon-pack/src/icons/NotifFill/index.js');var index$4=require('../../icon-pack/src/icons/CloseCirlceFill/index.js');const getDefaultIcon=({isCompact:e,theme:n,type:i})=>{const t=e?16:24;switch(i){case'error':return jsxRuntime.jsx(index$4.CloseCirlceFill,{fill:n.colors['alert-bg-error-500'],width:t,height:t});case'info':return jsxRuntime.jsx(index$3.NotifFill,{fill:n.colors['content-brand-primary'],width:t,height:t});case'success':return jsxRuntime.jsx(index$2.CheckCircleFill,{fill:n.colors['alert-success'],width:t,height:t});case'warning':return jsxRuntime.jsx(index$1.WarningTriangleFill,{fill:n.colors['alert-warning'],width:t,height:t});default:return null}};const Alert=React.forwardRef((e,n)=>{const i=styled.useTheme();const{cancelTimerText:t="Отменить",primaryAction:s,primaryActionProps:r={},secondaryAction:o,secondaryActionProps:l={},children:c,className:a,clear:u,customIcon:m,image:x,isCompact:h,link:p,linkProps:d={},noIcon:j,onClickCancelTimer:C,closeToast:y,onTimerFinish:g,size:k="s",style:f,textProps:R={},textWrap:w,timer:A,title:T,titleProps:v={},type:q,width:I=['fit-content','fit-content','fit-content','351px','304px','304px']}=useConfigPriority.useConfigPriority(i.components?.Alert,e);const b=useClassname.useClassname("Alert",a);const[F,W]=React.useState(!1);const z=Boolean(k==='l'||!!T||h&&(T||p||s||o));return jsxRuntime.jsxs(style.Root,{className:b,clear:u,column:z,isCompact:h,noIcon:j,onMouseEnter:()=>{A&&W(!0)},onMouseLeave:()=>{A&&W(!1)},ref:n,size:k,style:f,textWrap:w,type:q,width:I,withAction:!!s||!!o,withCloseIcon:!!y,withImage:!!x,withLink:!!p,withTimer:!!A,withTitle:!!T,children:[!j||m?jsxRuntime.jsxs(style.IconWrapper,{column:z,isCompact:h,withImage:!!x,children:[j||A||m||x?null:getDefaultIcon({isCompact:h,theme:i,type:q}),m?jsxRuntime.jsx(Icon.Icon,{name:m,size:h?16:24}):null,x,A?jsxRuntime.jsx(style.Timer,{isCompact:h,paused:F,timer:A,onTimerFinish:g,color:utils.countdownColor({theme:i,type:q})}):null]}):null,jsxRuntime.jsxs(style.ContentWrapper,{column:z,isCompact:h,children:[T?jsxRuntime.jsx(style.Title,{color:i.colors['content-onmain-primary'],isCompact:h,size:h?14:16,lineHeight:"m",...v,children:T}):null,jsxRuntime.jsx(style.Content,{appearance:"body",color:i.colors['content-onmain-primary'],column:z,isCompact:h,size:h?'xs':'s',textWrap:w,...R,children:c}),p?jsxRuntime.jsx(style.Link,{clear:u,column:z,isCompact:h,withTitle:!!T,children:jsxRuntime.jsx(Anchor.Anchor,{color:e.clear?i.colors['content-link']:i.colors['content-onmain-primary'],onClick:p.onClick,preset:"default",pseudo:!0,size:h?'s':'m',...d,children:p.content})}):null,s||o?jsxRuntime.jsxs(style.Actions,{column:z,isCompact:h,withTitle:!!T,children:[o?jsxRuntime.jsx(Button.Button,{black:!0,fontWeight:"normal",onClick:o.onClick,outline:!0,preset:"brand",size:h?'xs':'s',margin:4,...l,children:o.content}):null,s?jsxRuntime.jsx(Button.Button,{black:!0,fontWeight:"normal",onClick:s.onClick,preset:"brand",size:h?'xs':'s',margin:4,...r,children:s.content}):null]}):null]}),C?jsxRuntime.jsx(style.CancelTimer,{black:!0,clear:!0,fontWeight:"normal",isCompact:h,onClick:C,preset:"brand",size:h?'xs':'s',margin:4,children:t}):null,!y||h&&A?null:jsxRuntime.jsx(style.CloseIcon,{"aria-label":"close",onClick:y,type:"button",withTimer:!!A,children:jsxRuntime.jsx(index.Close,{fill:i.colors['content-onmain-primary'],width:h?18:24,height:h?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, useMemo, useState } from 'react'\nimport { Close, NotifFill, CheckCircleFill, WarningTriangleFill, CloseCirlceFill } from '@foxford/icon-pack'\nimport { Timer, TimerPropsContext } from 'components/Timer'\nimport type { IconProps } from 'components/Icon'\nimport { Icon } from 'components/Icon'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ButtonProps } from 'components/Button'\nimport type { AnchorProps } from 'components/Anchor'\nimport type { TextProps } from 'components/Text'\nimport type { TimerProps } from 'components/Timer'\nimport { Slot } from 'components/Slot'\nimport type { Color } from 'shared/types'\nimport { isPointerSupported } from 'shared/utils/isPointerSupported'\nimport { useMergedSizes } from 'hooks/useMergedSizes'\nimport { useAlertProps } from './useAlertProps'\nimport {\n SIZES_HORIZONTAL,\n SIZES_VERTICAL,\n SIZES_TEXT,\n SIZES_ICON,\n SIZES_ALERT_TIMER,\n SIZES_DISCARD_BUTTON,\n SIZES_ALERT_BUTTON,\n SIZES_ALERT_BUTTON_ICON,\n SIZES_ALERT_BUTTON_TEXT,\n} from './sizes'\nimport * as Styled from './style'\nimport type { AlertProps, AlertType } from './types'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для отображения информационных сообщений.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n */\nconst Alert: React.ForwardRefExoticComponent<AlertProps> & {\n Timer: typeof Timer\n} = Object.assign(\n forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const {\n size = 's',\n layout = 'horizontal',\n margin = 0,\n type = 'info',\n style = {},\n palette = {},\n title,\n text,\n addon,\n controls,\n discardButton,\n content,\n root,\n withIcon,\n clear,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n ...restProps\n } = useAlertProps(props)\n\n const sizes = useMergedSizes(restProps, layout === 'horizontal' ? SIZES_HORIZONTAL : SIZES_VERTICAL)\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n sizes: SIZES_ICON,\n color: (\n {\n info: 'content-brand-primary',\n success: 'alert-success',\n warning: 'alert-warning',\n error: 'alert-error',\n } as Record<AlertType, Color>\n )[type],\n icon: {\n info: <NotifFill />,\n success: <CheckCircleFill />,\n warning: <WarningTriangleFill />,\n error: <CloseCirlceFill />,\n }[type],\n }\n\n const timerProps: Partial<TimerProps> = {\n ...sizeProps,\n sizes: SIZES_ALERT_TIMER,\n color: (\n {\n info: 'content-brand-primary',\n success: 'alert-success',\n warning: 'alert-warning',\n error: 'alert-error',\n } as Record<AlertType, Color>\n )[type],\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n sizes: SIZES_TEXT,\n appearance: 'caption',\n weight: 700,\n wordBreak: 'break-word',\n color: 'inherit',\n }\n\n const textProps: TextProps = {\n ...sizeProps,\n sizes: SIZES_TEXT,\n appearance: 'caption',\n weight: 400,\n wordBreak: 'break-word',\n color: 'inherit',\n }\n\n const buttonProps: ButtonProps = {\n ...sizeProps,\n sizes: SIZES_ALERT_BUTTON,\n iconSizes: SIZES_ALERT_BUTTON_ICON,\n textSizes: SIZES_ALERT_BUTTON_TEXT,\n preset: 'brand',\n black: true,\n textProps: {\n weight: 400,\n },\n }\n\n const anchorProps: AnchorProps = {\n ...sizeProps,\n sizes: SIZES_TEXT,\n preset: 'brand',\n underline: 'dashed',\n color: 'inherit',\n }\n\n const discardButtonProps: IconButtonProps = {\n ...sizeProps,\n sizes: SIZES_DISCARD_BUTTON,\n icon: <Close />,\n }\n\n const [timerPaused, setTimerPaused] = useState(false)\n\n const timerContextProps = useMemo<Partial<TimerProps>>(\n () => ({\n paused: timerPaused,\n }),\n [timerPaused]\n )\n\n return (\n <Styled.Root\n {...restProps}\n style={{\n ...sizes[size],\n '--alert-margin': margin,\n ...style,\n }}\n palette={palette}\n clear={clear}\n type={type}\n ref={ref}\n onPointerEnter={(evt) => {\n if (restProps.onPointerEnter) {\n restProps.onPointerEnter(evt)\n }\n setTimerPaused(true)\n }}\n onMouseEnter={(evt) => {\n if (restProps.onMouseEnter) {\n restProps.onMouseEnter(evt)\n }\n if (!isPointerSupported()) setTimerPaused(true)\n }}\n onPointerLeave={(evt) => {\n if (restProps.onPointerLeave) {\n restProps.onPointerLeave(evt)\n }\n setTimerPaused(false)\n }}\n onMouseLeave={(evt) => {\n if (restProps.onMouseLeave) {\n restProps.onMouseLeave(evt)\n }\n if (!isPointerSupported()) setTimerPaused(false)\n }}\n >\n <TimerPropsContext.Provider value={timerContextProps}>\n <Slot\n render={root}\n props={{\n titleProps,\n textProps,\n iconProps,\n timerProps,\n buttonProps,\n anchorProps,\n discardButtonProps,\n }}\n fallback={\n <>\n <Styled.Container>\n {withIcon || addon ? (\n <Styled.Addon>\n {withIcon ? <Icon {...iconProps} /> : null}\n <Slot render={addon} props={{ iconProps, timerProps }} />\n </Styled.Addon>\n ) : null}\n <Styled.Main>\n <Slot\n render={content}\n props={{\n titleProps,\n textProps,\n }}\n fallback={\n <Styled.Content>\n <Slot render={title} props={titleProps} />\n <Slot render={text} props={textProps} />\n </Styled.Content>\n }\n />\n {controls ? (\n <Styled.Addon>\n <Slot render={controls} props={{ buttonProps, anchorProps }} />\n </Styled.Addon>\n ) : null}\n </Styled.Main>\n </Styled.Container>\n {discardButton ? (\n <Styled.DiscardButton>\n <Slot render={discardButton} props={discardButtonProps} />\n </Styled.DiscardButton>\n ) : null}\n </>\n }\n />\n </TimerPropsContext.Provider>\n </Styled.Root>\n )\n }),\n {\n Timer,\n }\n)\n\nexport { Alert }\n"],"names":["Alert","Object","assign","forwardRef","props","ref","size","layout","margin","type","style","palette","title","text","addon","controls","discardButton","content","root","withIcon","clear","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","useAlertProps","sizes","useMergedSizes","SIZES_HORIZONTAL","SIZES_VERTICAL","sizeProps","iconProps","SIZES_ICON","color","info","success","warning","error","icon","_jsx","NotifFill","CheckCircleFill","WarningTriangleFill","CloseCirlceFill","timerProps","SIZES_ALERT_TIMER","titleProps","SIZES_TEXT","appearance","weight","wordBreak","textProps","buttonProps","SIZES_ALERT_BUTTON","iconSizes","SIZES_ALERT_BUTTON_ICON","textSizes","SIZES_ALERT_BUTTON_TEXT","preset","black","anchorProps","underline","discardButtonProps","SIZES_DISCARD_BUTTON","Close","timerPaused","setTimerPaused","useState","timerContextProps","useMemo","paused","Styled","onPointerEnter","evt","onMouseEnter","isPointerSupported","onPointerLeave","onMouseLeave","children","TimerPropsContext","Provider","value","Slot","render","fallback","_jsxs","_Fragment","Icon","Timer"],"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 fill={theme.colors['alert-bg-error-500']} width={size} height={size} />\n case 'info':\n return <NotifFill fill={theme.colors['content-brand-primary']} width={size} height={size} />\n case 'success':\n return <CheckCircleFill fill={theme.colors['alert-success']} width={size} height={size} />\n case 'warning':\n return <WarningTriangleFill fill={theme.colors['alert-warning']} width={size} height={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 }) : null}\n {customIcon ? <Icon name={customIcon} size={isCompact ? 16 : 24} /> : null}\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 ) : null}\n </Styled.IconWrapper>\n ) : null}\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 ) : null}\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 // eslint-disable-next-line react/jsx-handler-names\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 ) : null}\n\n {primaryAction || secondaryAction ? (\n <Styled.Actions column={column} isCompact={isCompact} withTitle={!!title}>\n {secondaryAction ? (\n <Button\n black\n fontWeight='normal'\n // eslint-disable-next-line react/jsx-handler-names\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 ) : null}\n\n {primaryAction ? (\n <Button\n black\n fontWeight='normal'\n // eslint-disable-next-line react/jsx-handler-names\n onClick={primaryAction.onClick}\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Button>\n ) : null}\n </Styled.Actions>\n ) : null}\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 ) : null}\n\n {closeToast && (isCompact ? !timer : true) ? (\n <Styled.CloseIcon aria-label='close' onClick={closeToast} type='button' withTimer={!!timer}>\n <Close\n fill={theme.colors['content-onmain-primary']}\n width={isCompact ? 18 : 24}\n height={isCompact ? 18 : 24}\n />\n </Styled.CloseIcon>\n ) : null}\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","fill","colors","width","height","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","useConfigPriority","components","_className","useClassname","timerOnPause","setTimerOnPause","useState","column","Boolean","_jsxs","Styled","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","Icon","name","paused","color","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
|
-
import{forwardRef,useState
|
|
1
|
+
import{forwardRef,useState}from'react';import{useTheme}from'styled-components';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';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';import{WarningTriangleFill}from'../../icon-pack/src/icons/WarningTriangleFill/index.mjs';import{CheckCircleFill}from'../../icon-pack/src/icons/CheckCircleFill/index.mjs';import{NotifFill}from'../../icon-pack/src/icons/NotifFill/index.mjs';import{CloseCirlceFill}from'../../icon-pack/src/icons/CloseCirlceFill/index.mjs';const getDefaultIcon=({isCompact:o,theme:e,type:n})=>{const i=o?16:24;switch(n){case'error':return jsx(CloseCirlceFill,{fill:e.colors['alert-bg-error-500'],width:i,height:i});case'info':return jsx(NotifFill,{fill:e.colors['content-brand-primary'],width:i,height:i});case'success':return jsx(CheckCircleFill,{fill:e.colors['alert-success'],width:i,height:i});case'warning':return jsx(WarningTriangleFill,{fill:e.colors['alert-warning'],width:i,height:i});default:return null}};const COMPONENT_NAME='Alert';const Alert=forwardRef((o,e)=>{const n=useTheme();const{cancelTimerText:i="Отменить",primaryAction:t,primaryActionProps:r={},secondaryAction:l,secondaryActionProps:s={},children:c,className:a,clear:m,customIcon:p,image:h,isCompact:u,link:C,linkProps:d={},noIcon:f,onClickCancelTimer:x,closeToast:j,onTimerFinish:g,size:k="s",style:w,textProps:y={},textWrap:T,timer:A,title:I,titleProps:F={},type:W,width:N=['fit-content','fit-content','fit-content','351px','304px','304px']}=useConfigPriority(n.components?.Alert,o);const b=useClassname("Alert",a);const[z,P]=useState(!1);const B=Boolean(k==='l'||!!I||u&&(I||C||t||l));return jsxs(Root,{className:b,clear:m,column:B,isCompact:u,noIcon:f,onMouseEnter:()=>{A&&P(!0)},onMouseLeave:()=>{A&&P(!1)},ref:e,size:k,style:w,textWrap:T,type:W,width:N,withAction:!!t||!!l,withCloseIcon:!!j,withImage:!!h,withLink:!!C,withTimer:!!A,withTitle:!!I,children:[!f||p?jsxs(IconWrapper,{column:B,isCompact:u,withImage:!!h,children:[f||A||p||h?null:getDefaultIcon({isCompact:u,theme:n,type:W}),p?jsx(Icon,{name:p,size:u?16:24}):null,h,A?jsx(Timer,{isCompact:u,paused:z,timer:A,onTimerFinish:g,color:countdownColor({theme:n,type:W})}):null]}):null,jsxs(ContentWrapper,{column:B,isCompact:u,children:[I?jsx(Title,{color:n.colors['content-onmain-primary'],isCompact:u,size:u?14:16,lineHeight:"m",...F,children:I}):null,jsx(Content,{appearance:"body",color:n.colors['content-onmain-primary'],column:B,isCompact:u,size:u?'xs':'s',textWrap:T,...y,children:c}),C?jsx(Link,{clear:m,column:B,isCompact:u,withTitle:!!I,children:jsx(Anchor,{color:o.clear?n.colors['content-link']:n.colors['content-onmain-primary'],onClick:C.onClick,preset:"default",pseudo:!0,size:u?'s':'m',...d,children:C.content})}):null,t||l?jsxs(Actions,{column:B,isCompact:u,withTitle:!!I,children:[l?jsx(Button,{black:!0,fontWeight:"normal",onClick:l.onClick,outline:!0,preset:"brand",size:u?'xs':'s',margin:4,...s,children:l.content}):null,t?jsx(Button,{black:!0,fontWeight:"normal",onClick:t.onClick,preset:"brand",size:u?'xs':'s',margin:4,...r,children:t.content}):null]}):null]}),x?jsx(CancelTimer,{black:!0,clear:!0,fontWeight:"normal",isCompact:u,onClick:x,preset:"brand",size:u?'xs':'s',margin:4,children:i}):null,!j||u&&A?null:jsx(CloseIcon,{"aria-label":"close",onClick:j,type:"button",withTimer:!!A,children:jsx(Close,{fill:n.colors['content-onmain-primary'],width:u?18:24,height:u?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, useMemo, useState } from 'react'\nimport { Close, NotifFill, CheckCircleFill, WarningTriangleFill, CloseCirlceFill } from '@foxford/icon-pack'\nimport { Timer, TimerPropsContext } from 'components/Timer'\nimport type { IconProps } from 'components/Icon'\nimport { Icon } from 'components/Icon'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ButtonProps } from 'components/Button'\nimport type { AnchorProps } from 'components/Anchor'\nimport type { TextProps } from 'components/Text'\nimport type { TimerProps } from 'components/Timer'\nimport { Slot } from 'components/Slot'\nimport type { Color } from 'shared/types'\nimport { isPointerSupported } from 'shared/utils/isPointerSupported'\nimport { useMergedSizes } from 'hooks/useMergedSizes'\nimport { useAlertProps } from './useAlertProps'\nimport {\n SIZES_HORIZONTAL,\n SIZES_VERTICAL,\n SIZES_TEXT,\n SIZES_ICON,\n SIZES_ALERT_TIMER,\n SIZES_DISCARD_BUTTON,\n SIZES_ALERT_BUTTON,\n SIZES_ALERT_BUTTON_ICON,\n SIZES_ALERT_BUTTON_TEXT,\n} from './sizes'\nimport * as Styled from './style'\nimport type { AlertProps, AlertType } from './types'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для отображения информационных сообщений.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n */\nconst Alert: React.ForwardRefExoticComponent<AlertProps> & {\n Timer: typeof Timer\n} = Object.assign(\n forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n const {\n size = 's',\n layout = 'horizontal',\n margin = 0,\n type = 'info',\n style = {},\n palette = {},\n title,\n text,\n addon,\n controls,\n discardButton,\n content,\n root,\n withIcon,\n clear,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n ...restProps\n } = useAlertProps(props)\n\n const sizes = useMergedSizes(restProps, layout === 'horizontal' ? SIZES_HORIZONTAL : SIZES_VERTICAL)\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n sizes: SIZES_ICON,\n color: (\n {\n info: 'content-brand-primary',\n success: 'alert-success',\n warning: 'alert-warning',\n error: 'alert-error',\n } as Record<AlertType, Color>\n )[type],\n icon: {\n info: <NotifFill />,\n success: <CheckCircleFill />,\n warning: <WarningTriangleFill />,\n error: <CloseCirlceFill />,\n }[type],\n }\n\n const timerProps: Partial<TimerProps> = {\n ...sizeProps,\n sizes: SIZES_ALERT_TIMER,\n color: (\n {\n info: 'content-brand-primary',\n success: 'alert-success',\n warning: 'alert-warning',\n error: 'alert-error',\n } as Record<AlertType, Color>\n )[type],\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n sizes: SIZES_TEXT,\n appearance: 'caption',\n weight: 700,\n wordBreak: 'break-word',\n color: 'inherit',\n }\n\n const textProps: TextProps = {\n ...sizeProps,\n sizes: SIZES_TEXT,\n appearance: 'caption',\n weight: 400,\n wordBreak: 'break-word',\n color: 'inherit',\n }\n\n const buttonProps: ButtonProps = {\n ...sizeProps,\n sizes: SIZES_ALERT_BUTTON,\n iconSizes: SIZES_ALERT_BUTTON_ICON,\n textSizes: SIZES_ALERT_BUTTON_TEXT,\n preset: 'brand',\n black: true,\n textProps: {\n weight: 400,\n },\n }\n\n const anchorProps: AnchorProps = {\n ...sizeProps,\n sizes: SIZES_TEXT,\n preset: 'brand',\n underline: 'dashed',\n color: 'inherit',\n }\n\n const discardButtonProps: IconButtonProps = {\n ...sizeProps,\n sizes: SIZES_DISCARD_BUTTON,\n icon: <Close />,\n }\n\n const [timerPaused, setTimerPaused] = useState(false)\n\n const timerContextProps = useMemo<Partial<TimerProps>>(\n () => ({\n paused: timerPaused,\n }),\n [timerPaused]\n )\n\n return (\n <Styled.Root\n {...restProps}\n style={{\n ...sizes[size],\n '--alert-margin': margin,\n ...style,\n }}\n palette={palette}\n clear={clear}\n type={type}\n ref={ref}\n onPointerEnter={(evt) => {\n if (restProps.onPointerEnter) {\n restProps.onPointerEnter(evt)\n }\n setTimerPaused(true)\n }}\n onMouseEnter={(evt) => {\n if (restProps.onMouseEnter) {\n restProps.onMouseEnter(evt)\n }\n if (!isPointerSupported()) setTimerPaused(true)\n }}\n onPointerLeave={(evt) => {\n if (restProps.onPointerLeave) {\n restProps.onPointerLeave(evt)\n }\n setTimerPaused(false)\n }}\n onMouseLeave={(evt) => {\n if (restProps.onMouseLeave) {\n restProps.onMouseLeave(evt)\n }\n if (!isPointerSupported()) setTimerPaused(false)\n }}\n >\n <TimerPropsContext.Provider value={timerContextProps}>\n <Slot\n render={root}\n props={{\n titleProps,\n textProps,\n iconProps,\n timerProps,\n buttonProps,\n anchorProps,\n discardButtonProps,\n }}\n fallback={\n <>\n <Styled.Container>\n {withIcon || addon ? (\n <Styled.Addon>\n {withIcon ? <Icon {...iconProps} /> : null}\n <Slot render={addon} props={{ iconProps, timerProps }} />\n </Styled.Addon>\n ) : null}\n <Styled.Main>\n <Slot\n render={content}\n props={{\n titleProps,\n textProps,\n }}\n fallback={\n <Styled.Content>\n <Slot render={title} props={titleProps} />\n <Slot render={text} props={textProps} />\n </Styled.Content>\n }\n />\n {controls ? (\n <Styled.Addon>\n <Slot render={controls} props={{ buttonProps, anchorProps }} />\n </Styled.Addon>\n ) : null}\n </Styled.Main>\n </Styled.Container>\n {discardButton ? (\n <Styled.DiscardButton>\n <Slot render={discardButton} props={discardButtonProps} />\n </Styled.DiscardButton>\n ) : null}\n </>\n }\n />\n </TimerPropsContext.Provider>\n </Styled.Root>\n )\n }),\n {\n Timer,\n }\n)\n\nexport { Alert }\n"],"names":["Alert","Object","assign","forwardRef","props","ref","size","layout","margin","type","style","palette","title","text","addon","controls","discardButton","content","root","withIcon","clear","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","useAlertProps","sizes","useMergedSizes","SIZES_HORIZONTAL","SIZES_VERTICAL","sizeProps","iconProps","SIZES_ICON","color","info","success","warning","error","icon","_jsx","NotifFill","CheckCircleFill","WarningTriangleFill","CloseCirlceFill","timerProps","SIZES_ALERT_TIMER","titleProps","SIZES_TEXT","appearance","weight","wordBreak","textProps","buttonProps","SIZES_ALERT_BUTTON","iconSizes","SIZES_ALERT_BUTTON_ICON","textSizes","SIZES_ALERT_BUTTON_TEXT","preset","black","anchorProps","underline","discardButtonProps","SIZES_DISCARD_BUTTON","Close","timerPaused","setTimerPaused","useState","timerContextProps","useMemo","paused","Styled","onPointerEnter","evt","onMouseEnter","isPointerSupported","onPointerLeave","onMouseLeave","children","TimerPropsContext","Provider","value","Slot","render","fallback","_jsxs","_Fragment","Icon","Timer"],"mappings":"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"}
|
|
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 fill={theme.colors['alert-bg-error-500']} width={size} height={size} />\n case 'info':\n return <NotifFill fill={theme.colors['content-brand-primary']} width={size} height={size} />\n case 'success':\n return <CheckCircleFill fill={theme.colors['alert-success']} width={size} height={size} />\n case 'warning':\n return <WarningTriangleFill fill={theme.colors['alert-warning']} width={size} height={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 }) : null}\n {customIcon ? <Icon name={customIcon} size={isCompact ? 16 : 24} /> : null}\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 ) : null}\n </Styled.IconWrapper>\n ) : null}\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 ) : null}\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 // eslint-disable-next-line react/jsx-handler-names\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 ) : null}\n\n {primaryAction || secondaryAction ? (\n <Styled.Actions column={column} isCompact={isCompact} withTitle={!!title}>\n {secondaryAction ? (\n <Button\n black\n fontWeight='normal'\n // eslint-disable-next-line react/jsx-handler-names\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 ) : null}\n\n {primaryAction ? (\n <Button\n black\n fontWeight='normal'\n // eslint-disable-next-line react/jsx-handler-names\n onClick={primaryAction.onClick}\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n margin={4}\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Button>\n ) : null}\n </Styled.Actions>\n ) : null}\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 ) : null}\n\n {closeToast && (isCompact ? !timer : true) ? (\n <Styled.CloseIcon aria-label='close' onClick={closeToast} type='button' withTimer={!!timer}>\n <Close\n fill={theme.colors['content-onmain-primary']}\n width={isCompact ? 18 : 24}\n height={isCompact ? 18 : 24}\n />\n </Styled.CloseIcon>\n ) : null}\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","fill","colors","width","height","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","useConfigPriority","components","_className","useClassname","timerOnPause","setTimerOnPause","useState","column","Boolean","_jsxs","Styled","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","Icon","name","paused","color","countdownColor","lineHeight","appearance","Anchor","onClick","preset","pseudo","content","Button","black","fontWeight","outline","margin","Close","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var React=require('react');var jsxRuntime=require('react/jsx-runtime');var Progress=require('../Progress/Progress.js');exports.CountdownCircle=({className:e,color:r,isCompact:s,paused:t,timer:c,onTimerFinish:a})=>{const[n,o]=React.useState(c);const u=React.useRef(!1);const i=React.useRef();const l=n/c*100;return React.useEffect(()=>(t||u.current||(i.current=setInterval(()=>{o(e=>e<=.05?(a!==void 0&&a(),u.current=!0,clearInterval(i.current),e):e-.05)},50)),()=>{i.current&&clearInterval(i.current)}),[t,a]),jsxRuntime.jsx(Progress.Progress.Circle,{className:e,progress:l,progressStartAngle:0,resultColor:r,size:s?16:20,strokeBGColor:"transparent",strokeLineWidth:1.5,children:Math.ceil(n)})};
|
|
2
|
+
//# sourceMappingURL=CountdownCircle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\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='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","strokeLineWidth","children","Math","ceil"],"mappings":"4JAQwBA,EAAGC,YAAWC,QAAOC,YAAWC,SAAQC,QAAOC,oBACrE,MAAOC,EAAWC,GAAgBC,MAAAA,SAASJ,GAC3C,MAAMK,EAAcC,MAAAA,QAAgB,GACpC,MAAMC,EAAaD,MAAAA,SACnB,MAAME,EAAYN,EAAYF,EAAS,IA4BvC,OA1BAS,MAAAA,UAAU,KACHV,GAAWM,EAAYK,UAC1BH,EAAWG,QAAUC,YAAY,KAC/BR,EAAcS,GACRA,GAZO,KAaLX,SAAkBY,GACpBZ,IAGFI,EAAYK,SAAU,EACtBI,cAAcP,EAAWG,SAClBE,GAGFA,EAtBI,MAwBZG,KAGE,KACDR,EAAWG,SACbI,cAAcP,EAAWG,WAG5B,CAACX,EAAQE,IAGVe,WAAAA,IAACC,SAAAA,SAASC,OAAM,CACdtB,UAAWA,EACXY,SAAUA,EACVW,mBAAoB,EACpBC,YAAavB,EACbwB,KAAMvB,EAAY,GAAK,GACvBwB,cAAc,cACdC,gBAAiB,IAAIC,SAEpBC,KAAKC,KAAKxB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useState,useRef,useEffect}from'react';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:n})=>{const[c,a]=useState(o);const u=useRef(!1);const i=useRef();const l=c/o*100;return useEffect(()=>(s||u.current||(i.current=setInterval(()=>{a(r=>r<=.05?(n!==void 0&&n(),u.current=!0,clearInterval(i.current),r):r-.05)},50)),()=>{i.current&&clearInterval(i.current)}),[s,n]),jsx(Progress.Circle,{className:r,progress:l,progressStartAngle:0,resultColor:e,size:t?16:20,strokeBGColor:"transparent",strokeLineWidth:1.5,children:Math.ceil(c)})};export{CountdownCircle};
|
|
2
|
+
//# sourceMappingURL=CountdownCircle.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CountdownCircle.mjs","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\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='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","strokeLineWidth","children","Math","ceil"],"mappings":"+HAQA,MAAMA,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,UAAU,KACHV,GAAWM,EAAYK,UAC1BH,EAAWG,QAAUC,YAAY,KAC/BR,EAAcS,GACRA,GAZO,KAaLX,SAAkBY,GACpBZ,IAGFI,EAAYK,SAAU,EACtBI,cAAcP,EAAWG,SAClBE,GAGFA,EAtBI,MAwBZG,KAGE,KACDR,EAAWG,SACbI,cAAcP,EAAWG,WAG5B,CAACX,EAAQE,IAGVe,IAACC,SAASC,OAAM,CACdtB,UAAWA,EACXY,SAAUA,EACVW,mBAAoB,EACpBC,YAAavB,EACbwB,KAAMvB,EAAY,GAAK,GACvBwB,cAAc,cACdC,gBAAiB,IAAIC,SAEpBC,KAAKC,KAAKxB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var styled=require('styled-components');var
|
|
1
|
+
'use strict';var styled=require('styled-components');var focus=require('../../mixins/focus.js');var responsiveProperty=require('../../mixins/responsive-property.js');var CountdownCircle=require('./CountdownCircle.js');var Text=require('../Text/Text.js');var Button=require('../Button/Button.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const getPaddingY=({column:e,isCompact:n,withImage:t,withTimer:o})=>e?'16px':n?o?'5px':'12px':t?'8px':o?'2px':'12px';const getImageSize=({column:e,isCompact:n})=>n?'20px':e?'28px':'32px';const Root=styled__default.default.div.withConfig({shouldForwardProp:e=>['children','className','onMouseEnter','onMouseLeave','style'].includes(e)}).withConfig({displayName:"Alert__Root",componentId:"ui__sc-1v79u95-0"})([""," ",""],e=>`\n display: flex;\n align-items: ${e.column||(e.isCompact?!e.withTimer:e.textWrap)?'flex-start':'center'};\n justify-content: ${e.withTimer?'space-between':'flex-start'};\n padding-top: ${getPaddingY(e)};\n padding-right: ${(({isCompact:e,withCloseIcon:n,withTimer:t})=>n?e?'12px':'16px':t?'8px':'20px')(e)};\n padding-bottom: ${getPaddingY(e)};\n padding-left: ${(({isCompact:e,noIcon:n,size:t,withAction:o,withImage:i,withTitle:r})=>e?r||t==='l'?i||!n?'16px':'20px':i?'12px':o&&n?'20px':'16px':r||t==='l'?i||!n?'16px':'24px':i?'16px':'20px')(e)};\n height: ${e.isCompact||e.column||e.textWrap?'auto':'48px'};\n min-width: ${e.isCompact?'304px':'auto'};\n max-width: ${e.isCompact?'351px':'100%'};\n border-radius: ${e.column?e.isCompact?'20px':'12px':'30px'};\n background-color: ${((e,n,t)=>{if(n)return e.colors['bg-onmain-primary'];switch(t){case'error':return e.colors['alert-bg-error-200'];case'info':return e.colors['bg-brand-primary-200'];case'success':return e.colors['alert-bg-success-200'];case'warning':return e.colors['alert-bg-warning-200'];default:return e.colors['bg-oncolor-primary']}})(e.theme,!!e.clear,e.type)};\n box-shadow: ${e.clear?'0 6px 20px 0 rgba(0, 0, 0, 0.1)':'none'};\n box-sizing: border-box;\n `,responsiveProperty.responsiveProperty('width','width'));const IconWrapper=styled__default.default.div.withConfig({displayName:"Alert__IconWrapper",componentId:"ui__sc-1v79u95-1"})([""," ",";"],e=>`\n display: flex;\n margin-right: ${(({column:e,isCompact:n,withImage:t})=>n?'8px':e?t?'8px':'12px':'8px')(e)};\n `,e=>e.withImage?`\n img,\n svg {\n height: ${getImageSize(e)};\n width: ${getImageSize(e)};\n }\n `:null);const ContentWrapper=styled__default.default.div.withConfig({displayName:"Alert__ContentWrapper",componentId:"ui__sc-1v79u95-2"})(["",""],e=>`\n display: flex;\n margin-right: auto;\n flex-direction: ${e.column?'column':'row'};\n align-items: ${e.column?'flex-start':'center'};\n align-self: center;\n max-width: ${e.column?'260px':'initial'};\n white-space: ${e.column||e.isCompact?'normal':'nowrap'};\n overflow: hidden;\n `);const Title=styled__default.default(Text.Text).withConfig({displayName:"Alert__Title",componentId:"ui__sc-1v79u95-3"})(["",""],e=>`\n display: inline-block;\n margin-top: ${e.isCompact?'0':'2px'};\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n `);const Content=styled__default.default(Text.Text).withConfig({displayName:"Alert__Content",componentId:"ui__sc-1v79u95-4"})(["",""],e=>`\n text-overflow: ${e.column||e.isCompact?'clip':'ellipsis'};\n white-space: ${e.column||e.isCompact||e.textWrap?'pre-wrap':'inherit'};\n overflow: hidden;\n `);const Link=styled__default.default.div.withConfig({displayName:"Alert__Link",componentId:"ui__sc-1v79u95-5"})(["",""],e=>`\n display: flex;\n margin-top: ${e.column?e.isCompact&&!e.withTitle?'4px':'12px':0};\n margin-left: ${e.column?0:'60px'};\n color: ${e.clear?e.theme.colors['content-link']:e.theme.colors['content-onmain-primary']};\n `);const Actions=styled__default.default.div.withConfig({displayName:"Alert__Actions",componentId:"ui__sc-1v79u95-6"})(["",""],e=>`\n margin-top: ${(({column:e,isCompact:n,withTitle:t})=>e?n?t?'16px':'8px':'16px':0)(e)};\n margin-left: ${e.column?0:'60px'};\n `);const CloseIcon=styled__default.default.button.withConfig({displayName:"Alert__CloseIcon",componentId:"ui__sc-1v79u95-7"})([""," ",""],e=>`\n appearance: none;\n display: flex;\n margin-left: ${e.withTimer?'0':'16px'};\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n border-radius: 50%;\n `,focus.focus);const CancelTimer=styled__default.default(Button.Button).withConfig({displayName:"Alert__CancelTimer",componentId:"ui__sc-1v79u95-8"})(["",""],e=>`\n margin-left: ${e.isCompact?'28px':'60px'};\n padding-right: ${e.isCompact?'16px':'28px'};\n padding-left: ${e.isCompact?'16px':'28px'};\n `);const Timer=styled__default.default(CountdownCircle.CountdownCircle).withConfig({displayName:"Alert__Timer",componentId:"ui__sc-1v79u95-9"})(["",""],e=>`\n line-height: ${e.isCompact?'12px':'18px'};\n font-weight: ${e.isCompact?'700':'400'};\n font-size: ${e.isCompact?'11px':'14px'};\n color: ${e.color};\n\n svg {\n transform: rotateY(180deg);\n }\n `);exports.Actions=Actions,exports.CancelTimer=CancelTimer,exports.CloseIcon=CloseIcon,exports.Content=Content,exports.ContentWrapper=ContentWrapper,exports.IconWrapper=IconWrapper,exports.Link=Link,exports.Root=Root,exports.Timer=Timer,exports.Title=Title;
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { FlattenInterpolation, ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { AlertType, StyledAlertProps, AlertPalette } from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardAlertProp = createShouldForwardProp(\n filterLayoutProps,\n (propKey: string) => !['type', 'clear'].includes(propKey)\n)\n\nconst template = (palette: AlertPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 6px 20px 0 ${palette.shadowColor};\n`\n\nconst COLOR_SCHEMA: Record<AlertType, FlattenInterpolation<ThemedStyledProps<StyledAlertProps, DefaultTheme>>> = {\n info: css<StyledAlertProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.clear\n ? props.theme.colors['bg-other-surface']\n : props.theme.colors['bg-brand-primary-200'],\n shadowColor: props.clear ? props.theme.colors['effect-shadow-medium'] : 'transparent',\n ...props.palette,\n })}\n `,\n success: css<StyledAlertProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.clear\n ? props.theme.colors['bg-other-surface']\n : props.theme.colors['alert-bg-success-200'],\n shadowColor: props.clear ? props.theme.colors['effect-shadow-medium'] : 'transparent',\n ...props.palette,\n })}\n `,\n warning: css<StyledAlertProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.clear\n ? props.theme.colors['bg-other-surface']\n : props.theme.colors['alert-bg-warning-200'],\n shadowColor: props.clear ? props.theme.colors['effect-shadow-medium'] : 'transparent',\n ...props.palette,\n })}\n `,\n error: css<StyledAlertProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.clear\n ? props.theme.colors['bg-other-surface']\n : props.theme.colors['alert-bg-error-200'],\n shadowColor: props.clear ? props.theme.colors['effect-shadow-medium'] : 'transparent',\n ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledAlertProps>({\n shouldForwardProp: shouldForwardAlertProp,\n})`\n box-sizing: border-box;\n display: flex;\n width: var(--alert-root-width);\n max-width: var(--alert-root-max-width);\n min-width: var(--alert-root-min-width);\n border-radius: var(--alert-root-border-radius);\n min-height: var(--alert-root-min-height);\n margin: var(--alert-margin);\n\n ${(props) => {\n return COLOR_SCHEMA[props.type]\n }}\n`\n\nexport const Container = styled.div`\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n align-items: var(--alert-content-align-items);\n padding: var(--alert-container-padding);\n\n & > *:not(:last-child) {\n margin-right: var(--alert-container-gap);\n }\n`\n\nexport const Main = styled.div`\n box-sizing: border-box;\n flex-grow: 1;\n display: flex;\n flex-direction: var(--alert-main-flex-direction);\n align-items: var(--alert-content-align-items);\n\n & > *:not(:last-child) {\n margin-right: var(--alert-main-gap-horizontal);\n margin-bottom: var(--alert-main-gap-vertical);\n }\n`\n\nexport const Content = styled.div`\n box-sizing: border-box;\n flex-grow: 1;\n padding: var(--alert-content-padding);\n\n & > *:not(:last-child) {\n margin-bottom: var(--alert-content-gap);\n }\n`\n\nexport const Addon = styled.div`\n box-sizing: border-box;\n display: flex;\n`\n\nexport const DiscardButton = styled.div`\n box-sizing: border-box;\n flex-shrink: 0;\n display: flex;\n align-items: var(--alert-content-align-items);\n padding: var(--alert-discard-button-padding);\n`\n"],"names":["shouldForwardAlertProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","shadowColor","COLOR_SCHEMA","info","css","props","theme","colors","clear","success","warning","error","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","type","Container","Main","Content","Addon","DiscardButton"],"mappings":"mNAQA,MAAMA,uBAAyBC,MAAAA,wBAHJC,IACxB,CAAC,SAAU,YAAa,WAAY,UAAW,UAAW,UAAW,WAAY,WAAWC,SAASD,GAIrGA,IAAqB,CAAC,OAAQ,SAASC,SAASD,IAGnD,MAAME,SAAYC,GAA0B,cACjCA,EAAQC,+BACGD,EAAQE,gDACDF,EAAQG,iBAGrC,MAAMC,aAA2G,CAC/GC,KAAMC,OAAAA,IAAG,CAAA,GAAA,IACJC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMG,MACnBH,EAAMC,MAAMC,OAAO,oBACnBF,EAAMC,MAAMC,OAAO,wBACvBN,YAAaI,EAAMG,MAAQH,EAAMC,MAAMC,OAAO,wBAA0B,iBACrEF,EAAMP,WAGfW,QAASL,OAAAA,IAAG,CAAA,GAAA,IACPC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMG,MACnBH,EAAMC,MAAMC,OAAO,oBACnBF,EAAMC,MAAMC,OAAO,wBACvBN,YAAaI,EAAMG,MAAQH,EAAMC,MAAMC,OAAO,wBAA0B,iBACrEF,EAAMP,WAGfY,QAASN,OAAAA,IAAG,CAAA,GAAA,IACPC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMG,MACnBH,EAAMC,MAAMC,OAAO,oBACnBF,EAAMC,MAAMC,OAAO,wBACvBN,YAAaI,EAAMG,MAAQH,EAAMC,MAAMC,OAAO,wBAA0B,iBACrEF,EAAMP,WAGfa,MAAOP,OAAAA,IAAG,CAAA,GAAA,IACLC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMG,MACnBH,EAAMC,MAAMC,OAAO,oBACnBF,EAAMC,MAAMC,OAAO,sBACvBN,YAAaI,EAAMG,MAAQH,EAAMC,MAAMC,OAAO,wBAA0B,iBACrEF,EAAMP,YAKV,MAAMc,KAAOC,gBAAAA,QAAOC,IAAIC,WAA6B,CAC1DC,kBAAmBvB,yBACnBsB,WAAA,CAAAE,YAAA,cAAAC,YAAA,oBAFkBL,CAElB,CAAA,iQAAA,IAUGR,GACMH,aAAaG,EAAMc,aAIjBC,UAAYP,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,mBAAAC,YAAA,oBAAVL,CAAU,CAAA,8MAYtBQ,KAAOR,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,cAAAC,YAAA,oBAAVL,CAAU,CAAA,0QAajBS,QAAUT,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,iBAAAC,YAAA,oBAAVL,CAAU,CAAA,iJAUpBU,MAAQV,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,eAAAC,YAAA,oBAAVL,CAAU,CAAA,8CAKlBW,cAAgBX,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,uBAAAC,YAAA,oBAAVL,CAAU,CAAA"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { focus } from 'mixins/focus'\n\nimport { responsiveProperty } from 'mixins/responsive-property'\n\nimport { Button } from '../Button'\nimport { Text } from '../Text'\n\nimport { CountdownCircle } from './CountdownCircle'\n\nimport type {\n ActionsProps,\n AlertType,\n CancelTimerProps,\n CloseIconProps,\n ContentProps,\n ContentWrapperProps,\n CountdownCircleProps,\n IconWrapperProps,\n LinkProps,\n RootAlertProps,\n TitleProps,\n} from './types'\n\nconst bgColor = (theme: DefaultTheme, clear: boolean, type?: AlertType) => {\n if (clear) {\n return theme.colors['bg-onmain-primary']\n }\n\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-200']\n case 'info':\n return theme.colors['bg-brand-primary-200']\n case 'success':\n return theme.colors['alert-bg-success-200']\n case 'warning':\n return theme.colors['alert-bg-warning-200']\n default:\n return theme.colors['bg-oncolor-primary']\n }\n}\n\nconst getPaddingY = ({\n column,\n isCompact,\n withImage,\n withTimer,\n}: Pick<RootAlertProps, 'column' | 'isCompact' | 'withImage' | 'withTimer'>) => {\n if (column) return '16px'\n\n if (isCompact) {\n return withTimer ? '5px' : '12px'\n }\n\n return withImage ? '8px' : withTimer ? '2px' : '12px'\n}\n\nconst paddingLeft = ({\n isCompact,\n noIcon,\n size,\n withAction,\n withImage,\n withTitle,\n}: Pick<RootAlertProps, 'isCompact' | 'noIcon' | 'size' | 'withAction' | 'withImage' | 'withTitle'>) => {\n if (isCompact) {\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '20px'\n }\n\n return withImage ? '12px' : withAction && noIcon ? '20px' : '16px'\n }\n\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '24px'\n }\n\n return withImage ? '16px' : '20px'\n}\n\nconst paddingRight = ({\n isCompact,\n withCloseIcon,\n withTimer,\n}: Pick<RootAlertProps, 'isCompact' | 'withCloseIcon' | 'withTimer'>) => {\n if (withCloseIcon) {\n return isCompact ? '12px' : '16px'\n }\n\n return withTimer ? '8px' : '20px'\n}\n\nconst getMarginRightIconWrapper = ({\n column,\n isCompact,\n withImage,\n}: {\n column: boolean\n isCompact?: boolean\n withImage: boolean\n}) => {\n if (isCompact) return '8px'\n\n return column ? (withImage ? '8px' : '12px') : '8px'\n}\n\nconst getImageSize = ({ column, isCompact }: { column: boolean; isCompact?: boolean }) => {\n if (isCompact) return '20px'\n\n return column ? '28px' : '32px'\n}\n\nconst getActionsMarginTop = ({\n column,\n isCompact,\n withTitle,\n}: {\n column: boolean\n isCompact?: boolean\n withTitle: boolean\n}) => {\n if (column) {\n return isCompact ? (withTitle ? '16px' : '8px') : '16px'\n }\n\n return 0\n}\n\nexport const Root = styled.div.withConfig<RootAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'onMouseEnter', 'onMouseLeave', 'style'].includes(prop),\n})`\n ${(props) => `\n display: flex;\n align-items: ${props.column || (props.isCompact ? !props.withTimer : props.textWrap) ? 'flex-start' : 'center'};\n justify-content: ${props.withTimer ? 'space-between' : 'flex-start'};\n padding-top: ${getPaddingY(props)};\n padding-right: ${paddingRight(props)};\n padding-bottom: ${getPaddingY(props)};\n padding-left: ${paddingLeft(props)};\n height: ${props.isCompact || props.column || props.textWrap ? 'auto' : '48px'};\n min-width: ${props.isCompact ? '304px' : 'auto'};\n max-width: ${props.isCompact ? '351px' : '100%'};\n border-radius: ${props.column ? (props.isCompact ? '20px' : '12px') : '30px'};\n background-color: ${bgColor(props.theme, !!props.clear, props.type)};\n box-shadow: ${props.clear ? '0 6px 20px 0 rgba(0, 0, 0, 0.1)' : 'none'};\n box-sizing: border-box;\n `}\n ${responsiveProperty('width', 'width')}\n`\n\nexport const IconWrapper = styled.div<IconWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: ${getMarginRightIconWrapper(props)};\n `}\n\n ${(props) =>\n props.withImage\n ? `\n img,\n svg {\n height: ${getImageSize(props)};\n width: ${getImageSize(props)};\n }\n `\n : null};\n`\n\nexport const ContentWrapper = styled.div<ContentWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: auto;\n flex-direction: ${props.column ? 'column' : 'row'};\n align-items: ${props.column ? 'flex-start' : 'center'};\n align-self: center;\n max-width: ${props.column ? '260px' : 'initial'};\n white-space: ${props.column || props.isCompact ? 'normal' : 'nowrap'};\n overflow: hidden;\n `}\n`\n\nexport const Title = styled(Text)<TitleProps>`\n ${(props) => `\n display: inline-block;\n margin-top: ${props.isCompact ? '0' : '2px'};\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n `}\n`\n\nexport const Content = styled(Text)<ContentProps>`\n ${(props) => `\n text-overflow: ${props.column || props.isCompact ? 'clip' : 'ellipsis'};\n white-space: ${props.column || props.isCompact || props.textWrap ? 'pre-wrap' : 'inherit'};\n overflow: hidden;\n `}\n`\n\nexport const Link = styled.div<LinkProps>`\n ${(props) => `\n display: flex;\n margin-top: ${props.column ? (props.isCompact && !props.withTitle ? '4px' : '12px') : 0};\n margin-left: ${props.column ? 0 : '60px'};\n color: ${props.clear ? props.theme.colors['content-link'] : props.theme.colors['content-onmain-primary']};\n `}\n`\n\nexport const Actions = styled.div<ActionsProps>`\n ${(props) => `\n margin-top: ${getActionsMarginTop(props)};\n margin-left: ${props.column ? 0 : '60px'};\n `}\n`\n\nexport const CloseIcon = styled.button<CloseIconProps>`\n ${(props) => `\n appearance: none;\n display: flex;\n margin-left: ${props.withTimer ? '0' : '16px'};\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n border-radius: 50%;\n `}\n ${focus}\n`\n\nexport const CancelTimer = styled(Button)<CancelTimerProps>`\n ${(props) => `\n margin-left: ${props.isCompact ? '28px' : '60px'};\n padding-right: ${props.isCompact ? '16px' : '28px'};\n padding-left: ${props.isCompact ? '16px' : '28px'};\n `}\n`\n\nexport const Timer = styled(CountdownCircle)<CountdownCircleProps>`\n ${(props) => `\n line-height: ${props.isCompact ? '12px' : '18px'};\n font-weight: ${props.isCompact ? '700' : '400'};\n font-size: ${props.isCompact ? '11px' : '14px'};\n color: ${props.color};\n\n svg {\n transform: rotateY(180deg);\n }\n `}\n`\n"],"names":["getPaddingY","column","isCompact","withImage","withTimer","getImageSize","Root","styled","div","withConfig","shouldForwardProp","prop","includes","displayName","componentId","props","textWrap","paddingRight","withCloseIcon","paddingLeft","noIcon","size","withAction","withTitle","bgColor","theme","clear","type","colors","responsiveProperty","IconWrapper","getMarginRightIconWrapper","ContentWrapper","Title","Text","Content","Link","Actions","getActionsMarginTop","CloseIcon","button","focus","CancelTimer","Button","Timer","CountdownCircle","color"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import styled
|
|
1
|
+
import styled from'styled-components';import{focus}from'../../mixins/focus.mjs';import{responsiveProperty}from'../../mixins/responsive-property.mjs';import{CountdownCircle}from'./CountdownCircle.mjs';import{Text}from'../Text/Text.mjs';import{Button}from'../Button/Button.mjs';const getPaddingY=({column:n,isCompact:t,withImage:o,withTimer:e})=>n?'16px':t?e?'5px':'12px':o?'8px':e?'2px':'12px';const getImageSize=({column:n,isCompact:t})=>t?'20px':n?'28px':'32px';const Root=styled.div.withConfig({shouldForwardProp:n=>['children','className','onMouseEnter','onMouseLeave','style'].includes(n)}).withConfig({displayName:"Alert__Root",componentId:"ui__sc-1v79u95-0"})([""," ",""],n=>`\n display: flex;\n align-items: ${n.column||(n.isCompact?!n.withTimer:n.textWrap)?'flex-start':'center'};\n justify-content: ${n.withTimer?'space-between':'flex-start'};\n padding-top: ${getPaddingY(n)};\n padding-right: ${(({isCompact:n,withCloseIcon:t,withTimer:o})=>t?n?'12px':'16px':o?'8px':'20px')(n)};\n padding-bottom: ${getPaddingY(n)};\n padding-left: ${(({isCompact:n,noIcon:t,size:o,withAction:e,withImage:i,withTitle:r})=>n?r||o==='l'?i||!t?'16px':'20px':i?'12px':e&&t?'20px':'16px':r||o==='l'?i||!t?'16px':'24px':i?'16px':'20px')(n)};\n height: ${n.isCompact||n.column||n.textWrap?'auto':'48px'};\n min-width: ${n.isCompact?'304px':'auto'};\n max-width: ${n.isCompact?'351px':'100%'};\n border-radius: ${n.column?n.isCompact?'20px':'12px':'30px'};\n background-color: ${((n,t,o)=>{if(t)return n.colors['bg-onmain-primary'];switch(o){case'error':return n.colors['alert-bg-error-200'];case'info':return n.colors['bg-brand-primary-200'];case'success':return n.colors['alert-bg-success-200'];case'warning':return n.colors['alert-bg-warning-200'];default:return n.colors['bg-oncolor-primary']}})(n.theme,!!n.clear,n.type)};\n box-shadow: ${n.clear?'0 6px 20px 0 rgba(0, 0, 0, 0.1)':'none'};\n box-sizing: border-box;\n `,responsiveProperty('width','width'));const IconWrapper=styled.div.withConfig({displayName:"Alert__IconWrapper",componentId:"ui__sc-1v79u95-1"})([""," ",";"],n=>`\n display: flex;\n margin-right: ${(({column:n,isCompact:t,withImage:o})=>t?'8px':n?o?'8px':'12px':'8px')(n)};\n `,n=>n.withImage?`\n img,\n svg {\n height: ${getImageSize(n)};\n width: ${getImageSize(n)};\n }\n `:null);const ContentWrapper=styled.div.withConfig({displayName:"Alert__ContentWrapper",componentId:"ui__sc-1v79u95-2"})(["",""],n=>`\n display: flex;\n margin-right: auto;\n flex-direction: ${n.column?'column':'row'};\n align-items: ${n.column?'flex-start':'center'};\n align-self: center;\n max-width: ${n.column?'260px':'initial'};\n white-space: ${n.column||n.isCompact?'normal':'nowrap'};\n overflow: hidden;\n `);const Title=styled(Text).withConfig({displayName:"Alert__Title",componentId:"ui__sc-1v79u95-3"})(["",""],n=>`\n display: inline-block;\n margin-top: ${n.isCompact?'0':'2px'};\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n `);const Content=styled(Text).withConfig({displayName:"Alert__Content",componentId:"ui__sc-1v79u95-4"})(["",""],n=>`\n text-overflow: ${n.column||n.isCompact?'clip':'ellipsis'};\n white-space: ${n.column||n.isCompact||n.textWrap?'pre-wrap':'inherit'};\n overflow: hidden;\n `);const Link=styled.div.withConfig({displayName:"Alert__Link",componentId:"ui__sc-1v79u95-5"})(["",""],n=>`\n display: flex;\n margin-top: ${n.column?n.isCompact&&!n.withTitle?'4px':'12px':0};\n margin-left: ${n.column?0:'60px'};\n color: ${n.clear?n.theme.colors['content-link']:n.theme.colors['content-onmain-primary']};\n `);const Actions=styled.div.withConfig({displayName:"Alert__Actions",componentId:"ui__sc-1v79u95-6"})(["",""],n=>`\n margin-top: ${(({column:n,isCompact:t,withTitle:o})=>n?t?o?'16px':'8px':'16px':0)(n)};\n margin-left: ${n.column?0:'60px'};\n `);const CloseIcon=styled.button.withConfig({displayName:"Alert__CloseIcon",componentId:"ui__sc-1v79u95-7"})([""," ",""],n=>`\n appearance: none;\n display: flex;\n margin-left: ${n.withTimer?'0':'16px'};\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n border-radius: 50%;\n `,focus);const CancelTimer=styled(Button).withConfig({displayName:"Alert__CancelTimer",componentId:"ui__sc-1v79u95-8"})(["",""],n=>`\n margin-left: ${n.isCompact?'28px':'60px'};\n padding-right: ${n.isCompact?'16px':'28px'};\n padding-left: ${n.isCompact?'16px':'28px'};\n `);const Timer=styled(CountdownCircle).withConfig({displayName:"Alert__Timer",componentId:"ui__sc-1v79u95-9"})(["",""],n=>`\n line-height: ${n.isCompact?'12px':'18px'};\n font-weight: ${n.isCompact?'700':'400'};\n font-size: ${n.isCompact?'11px':'14px'};\n color: ${n.color};\n\n svg {\n transform: rotateY(180deg);\n }\n `);export{Actions,CancelTimer,CloseIcon,Content,ContentWrapper,IconWrapper,Link,Root,Timer,Title};
|
|
2
2
|
//# sourceMappingURL=style.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport type { FlattenInterpolation, ThemedStyledProps, DefaultTheme } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport type { AlertType, StyledAlertProps, AlertPalette } from './types'\n\nconst filterLayoutProps = (propKey: string) =>\n !['layout', 'layoutXXS', 'layoutXS', 'layoutS', 'layoutM', 'layoutL', 'layoutXL', 'layouts'].includes(propKey)\n\nconst shouldForwardAlertProp = createShouldForwardProp(\n filterLayoutProps,\n (propKey: string) => !['type', 'clear'].includes(propKey)\n)\n\nconst template = (palette: AlertPalette) => `\n color: ${palette.color};\n background-color: ${palette.backgroundColor};\n box-shadow: 0 6px 20px 0 ${palette.shadowColor};\n`\n\nconst COLOR_SCHEMA: Record<AlertType, FlattenInterpolation<ThemedStyledProps<StyledAlertProps, DefaultTheme>>> = {\n info: css<StyledAlertProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.clear\n ? props.theme.colors['bg-other-surface']\n : props.theme.colors['bg-brand-primary-200'],\n shadowColor: props.clear ? props.theme.colors['effect-shadow-medium'] : 'transparent',\n ...props.palette,\n })}\n `,\n success: css<StyledAlertProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.clear\n ? props.theme.colors['bg-other-surface']\n : props.theme.colors['alert-bg-success-200'],\n shadowColor: props.clear ? props.theme.colors['effect-shadow-medium'] : 'transparent',\n ...props.palette,\n })}\n `,\n warning: css<StyledAlertProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.clear\n ? props.theme.colors['bg-other-surface']\n : props.theme.colors['alert-bg-warning-200'],\n shadowColor: props.clear ? props.theme.colors['effect-shadow-medium'] : 'transparent',\n ...props.palette,\n })}\n `,\n error: css<StyledAlertProps>`\n ${(props) =>\n template({\n color: props.theme.colors['content-onmain-primary'],\n backgroundColor: props.clear\n ? props.theme.colors['bg-other-surface']\n : props.theme.colors['alert-bg-error-200'],\n shadowColor: props.clear ? props.theme.colors['effect-shadow-medium'] : 'transparent',\n ...props.palette,\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledAlertProps>({\n shouldForwardProp: shouldForwardAlertProp,\n})`\n box-sizing: border-box;\n display: flex;\n width: var(--alert-root-width);\n max-width: var(--alert-root-max-width);\n min-width: var(--alert-root-min-width);\n border-radius: var(--alert-root-border-radius);\n min-height: var(--alert-root-min-height);\n margin: var(--alert-margin);\n\n ${(props) => {\n return COLOR_SCHEMA[props.type]\n }}\n`\n\nexport const Container = styled.div`\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n align-items: var(--alert-content-align-items);\n padding: var(--alert-container-padding);\n\n & > *:not(:last-child) {\n margin-right: var(--alert-container-gap);\n }\n`\n\nexport const Main = styled.div`\n box-sizing: border-box;\n flex-grow: 1;\n display: flex;\n flex-direction: var(--alert-main-flex-direction);\n align-items: var(--alert-content-align-items);\n\n & > *:not(:last-child) {\n margin-right: var(--alert-main-gap-horizontal);\n margin-bottom: var(--alert-main-gap-vertical);\n }\n`\n\nexport const Content = styled.div`\n box-sizing: border-box;\n flex-grow: 1;\n padding: var(--alert-content-padding);\n\n & > *:not(:last-child) {\n margin-bottom: var(--alert-content-gap);\n }\n`\n\nexport const Addon = styled.div`\n box-sizing: border-box;\n display: flex;\n`\n\nexport const DiscardButton = styled.div`\n box-sizing: border-box;\n flex-shrink: 0;\n display: flex;\n align-items: var(--alert-content-align-items);\n padding: var(--alert-discard-button-padding);\n`\n"],"names":["shouldForwardAlertProp","createShouldForwardProp","propKey","includes","template","palette","color","backgroundColor","shadowColor","COLOR_SCHEMA","info","css","props","theme","colors","clear","success","warning","error","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","type","Container","Main","Content","Addon","DiscardButton"],"mappings":"6GAQA,MAAMA,uBAAyBC,wBAHJC,IACxB,CAAC,SAAU,YAAa,WAAY,UAAW,UAAW,UAAW,WAAY,WAAWC,SAASD,GAIrGA,IAAqB,CAAC,OAAQ,SAASC,SAASD,IAGnD,MAAME,SAAYC,GAA0B,cACjCA,EAAQC,+BACGD,EAAQE,gDACDF,EAAQG,iBAGrC,MAAMC,aAA2G,CAC/GC,KAAMC,IAAG,CAAA,GAAA,IACJC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMG,MACnBH,EAAMC,MAAMC,OAAO,oBACnBF,EAAMC,MAAMC,OAAO,wBACvBN,YAAaI,EAAMG,MAAQH,EAAMC,MAAMC,OAAO,wBAA0B,iBACrEF,EAAMP,WAGfW,QAASL,IAAG,CAAA,GAAA,IACPC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMG,MACnBH,EAAMC,MAAMC,OAAO,oBACnBF,EAAMC,MAAMC,OAAO,wBACvBN,YAAaI,EAAMG,MAAQH,EAAMC,MAAMC,OAAO,wBAA0B,iBACrEF,EAAMP,WAGfY,QAASN,IAAG,CAAA,GAAA,IACPC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMG,MACnBH,EAAMC,MAAMC,OAAO,oBACnBF,EAAMC,MAAMC,OAAO,wBACvBN,YAAaI,EAAMG,MAAQH,EAAMC,MAAMC,OAAO,wBAA0B,iBACrEF,EAAMP,WAGfa,MAAOP,IAAG,CAAA,GAAA,IACLC,GACDR,SAAS,CACPE,MAAOM,EAAMC,MAAMC,OAAO,0BAC1BP,gBAAiBK,EAAMG,MACnBH,EAAMC,MAAMC,OAAO,oBACnBF,EAAMC,MAAMC,OAAO,sBACvBN,YAAaI,EAAMG,MAAQH,EAAMC,MAAMC,OAAO,wBAA0B,iBACrEF,EAAMP,YAKV,MAAMc,KAAOC,OAAOC,IAAIC,WAA6B,CAC1DC,kBAAmBvB,yBACnBsB,WAAA,CAAAE,YAAA,cAAAC,YAAA,oBAFkBL,CAElB,CAAA,iQAAA,IAUGR,GACMH,aAAaG,EAAMc,aAIjBC,UAAYP,OAAOC,IAAGC,WAAA,CAAAE,YAAA,mBAAAC,YAAA,oBAAVL,CAAU,CAAA,8MAYtBQ,KAAOR,OAAOC,IAAGC,WAAA,CAAAE,YAAA,cAAAC,YAAA,oBAAVL,CAAU,CAAA,0QAajBS,QAAUT,OAAOC,IAAGC,WAAA,CAAAE,YAAA,iBAAAC,YAAA,oBAAVL,CAAU,CAAA,iJAUpBU,MAAQV,OAAOC,IAAGC,WAAA,CAAAE,YAAA,eAAAC,YAAA,oBAAVL,CAAU,CAAA,8CAKlBW,cAAgBX,OAAOC,IAAGC,WAAA,CAAAE,YAAA,uBAAAC,YAAA,oBAAVL,CAAU,CAAA"}
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled from 'styled-components'\nimport type { DefaultTheme } from 'styled-components'\nimport { focus } from 'mixins/focus'\n\nimport { responsiveProperty } from 'mixins/responsive-property'\n\nimport { Button } from '../Button'\nimport { Text } from '../Text'\n\nimport { CountdownCircle } from './CountdownCircle'\n\nimport type {\n ActionsProps,\n AlertType,\n CancelTimerProps,\n CloseIconProps,\n ContentProps,\n ContentWrapperProps,\n CountdownCircleProps,\n IconWrapperProps,\n LinkProps,\n RootAlertProps,\n TitleProps,\n} from './types'\n\nconst bgColor = (theme: DefaultTheme, clear: boolean, type?: AlertType) => {\n if (clear) {\n return theme.colors['bg-onmain-primary']\n }\n\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-200']\n case 'info':\n return theme.colors['bg-brand-primary-200']\n case 'success':\n return theme.colors['alert-bg-success-200']\n case 'warning':\n return theme.colors['alert-bg-warning-200']\n default:\n return theme.colors['bg-oncolor-primary']\n }\n}\n\nconst getPaddingY = ({\n column,\n isCompact,\n withImage,\n withTimer,\n}: Pick<RootAlertProps, 'column' | 'isCompact' | 'withImage' | 'withTimer'>) => {\n if (column) return '16px'\n\n if (isCompact) {\n return withTimer ? '5px' : '12px'\n }\n\n return withImage ? '8px' : withTimer ? '2px' : '12px'\n}\n\nconst paddingLeft = ({\n isCompact,\n noIcon,\n size,\n withAction,\n withImage,\n withTitle,\n}: Pick<RootAlertProps, 'isCompact' | 'noIcon' | 'size' | 'withAction' | 'withImage' | 'withTitle'>) => {\n if (isCompact) {\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '20px'\n }\n\n return withImage ? '12px' : withAction && noIcon ? '20px' : '16px'\n }\n\n if (withTitle || size === 'l') {\n return withImage || !noIcon ? '16px' : '24px'\n }\n\n return withImage ? '16px' : '20px'\n}\n\nconst paddingRight = ({\n isCompact,\n withCloseIcon,\n withTimer,\n}: Pick<RootAlertProps, 'isCompact' | 'withCloseIcon' | 'withTimer'>) => {\n if (withCloseIcon) {\n return isCompact ? '12px' : '16px'\n }\n\n return withTimer ? '8px' : '20px'\n}\n\nconst getMarginRightIconWrapper = ({\n column,\n isCompact,\n withImage,\n}: {\n column: boolean\n isCompact?: boolean\n withImage: boolean\n}) => {\n if (isCompact) return '8px'\n\n return column ? (withImage ? '8px' : '12px') : '8px'\n}\n\nconst getImageSize = ({ column, isCompact }: { column: boolean; isCompact?: boolean }) => {\n if (isCompact) return '20px'\n\n return column ? '28px' : '32px'\n}\n\nconst getActionsMarginTop = ({\n column,\n isCompact,\n withTitle,\n}: {\n column: boolean\n isCompact?: boolean\n withTitle: boolean\n}) => {\n if (column) {\n return isCompact ? (withTitle ? '16px' : '8px') : '16px'\n }\n\n return 0\n}\n\nexport const Root = styled.div.withConfig<RootAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'onMouseEnter', 'onMouseLeave', 'style'].includes(prop),\n})`\n ${(props) => `\n display: flex;\n align-items: ${props.column || (props.isCompact ? !props.withTimer : props.textWrap) ? 'flex-start' : 'center'};\n justify-content: ${props.withTimer ? 'space-between' : 'flex-start'};\n padding-top: ${getPaddingY(props)};\n padding-right: ${paddingRight(props)};\n padding-bottom: ${getPaddingY(props)};\n padding-left: ${paddingLeft(props)};\n height: ${props.isCompact || props.column || props.textWrap ? 'auto' : '48px'};\n min-width: ${props.isCompact ? '304px' : 'auto'};\n max-width: ${props.isCompact ? '351px' : '100%'};\n border-radius: ${props.column ? (props.isCompact ? '20px' : '12px') : '30px'};\n background-color: ${bgColor(props.theme, !!props.clear, props.type)};\n box-shadow: ${props.clear ? '0 6px 20px 0 rgba(0, 0, 0, 0.1)' : 'none'};\n box-sizing: border-box;\n `}\n ${responsiveProperty('width', 'width')}\n`\n\nexport const IconWrapper = styled.div<IconWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: ${getMarginRightIconWrapper(props)};\n `}\n\n ${(props) =>\n props.withImage\n ? `\n img,\n svg {\n height: ${getImageSize(props)};\n width: ${getImageSize(props)};\n }\n `\n : null};\n`\n\nexport const ContentWrapper = styled.div<ContentWrapperProps>`\n ${(props) => `\n display: flex;\n margin-right: auto;\n flex-direction: ${props.column ? 'column' : 'row'};\n align-items: ${props.column ? 'flex-start' : 'center'};\n align-self: center;\n max-width: ${props.column ? '260px' : 'initial'};\n white-space: ${props.column || props.isCompact ? 'normal' : 'nowrap'};\n overflow: hidden;\n `}\n`\n\nexport const Title = styled(Text)<TitleProps>`\n ${(props) => `\n display: inline-block;\n margin-top: ${props.isCompact ? '0' : '2px'};\n margin-bottom: 8px;\n max-width: 100%;\n vertical-align: middle;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-weight: 700;\n overflow: hidden;\n `}\n`\n\nexport const Content = styled(Text)<ContentProps>`\n ${(props) => `\n text-overflow: ${props.column || props.isCompact ? 'clip' : 'ellipsis'};\n white-space: ${props.column || props.isCompact || props.textWrap ? 'pre-wrap' : 'inherit'};\n overflow: hidden;\n `}\n`\n\nexport const Link = styled.div<LinkProps>`\n ${(props) => `\n display: flex;\n margin-top: ${props.column ? (props.isCompact && !props.withTitle ? '4px' : '12px') : 0};\n margin-left: ${props.column ? 0 : '60px'};\n color: ${props.clear ? props.theme.colors['content-link'] : props.theme.colors['content-onmain-primary']};\n `}\n`\n\nexport const Actions = styled.div<ActionsProps>`\n ${(props) => `\n margin-top: ${getActionsMarginTop(props)};\n margin-left: ${props.column ? 0 : '60px'};\n `}\n`\n\nexport const CloseIcon = styled.button<CloseIconProps>`\n ${(props) => `\n appearance: none;\n display: flex;\n margin-left: ${props.withTimer ? '0' : '16px'};\n border-radius: 0;\n background: none;\n box-shadow: none;\n padding: 0;\n border: none;\n cursor: pointer;\n border-radius: 50%;\n `}\n ${focus}\n`\n\nexport const CancelTimer = styled(Button)<CancelTimerProps>`\n ${(props) => `\n margin-left: ${props.isCompact ? '28px' : '60px'};\n padding-right: ${props.isCompact ? '16px' : '28px'};\n padding-left: ${props.isCompact ? '16px' : '28px'};\n `}\n`\n\nexport const Timer = styled(CountdownCircle)<CountdownCircleProps>`\n ${(props) => `\n line-height: ${props.isCompact ? '12px' : '18px'};\n font-weight: ${props.isCompact ? '700' : '400'};\n font-size: ${props.isCompact ? '11px' : '14px'};\n color: ${props.color};\n\n svg {\n transform: rotateY(180deg);\n }\n `}\n`\n"],"names":["getPaddingY","column","isCompact","withImage","withTimer","getImageSize","Root","styled","div","withConfig","shouldForwardProp","prop","includes","displayName","componentId","props","textWrap","paddingRight","withCloseIcon","paddingLeft","noIcon","size","withAction","withTitle","bgColor","theme","clear","type","colors","responsiveProperty","IconWrapper","getMarginRightIconWrapper","ContentWrapper","Title","Text","Content","Link","Actions","getActionsMarginTop","CloseIcon","button","focus","CancelTimer","Button","Timer","CountdownCircle","color"],"mappings":"oRA4CA,MAAMA,YAAcA,EAClBC,SACAC,YACAC,YACAC,eAEIH,EAAe,OAEfC,EACKE,EAAY,MAAQ,OAGtBD,EAAY,MAAQC,EAAY,MAAQ,OAoDjD,MAAMC,aAAeA,EAAGJ,SAAQC,eAC1BA,EAAkB,OAEfD,EAAS,OAAS,OAmBpB,MAAMK,KAAOC,OAAOC,IAAIC,WAA2B,CACxDC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,eAAgB,eAAgB,SAASC,SAASD,KACzGF,WAAA,CAAAI,YAAA,cAAAC,YAAA,oBAFkBP,CAElB,CAAA,GAAA,IAAA,IACGQ,GAAU,0CAEIA,EAAMd,SAAWc,EAAMb,WAAaa,EAAMX,UAAYW,EAAMC,UAAY,aAAe,mCACnFD,EAAMX,UAAY,gBAAkB,mCACxCJ,YAAYe,2BAvDVE,GACnBf,YACAgB,gBACAd,eAEIc,EACKhB,EAAY,OAAS,OAGvBE,EAAY,MAAQ,OA+CRa,CAAaF,4BACZf,YAAYe,0BAhFdI,GAClBjB,YACAkB,SACAC,OACAC,aACAnB,YACAoB,eAEIrB,EACEqB,GAAaF,IAAS,IACjBlB,IAAciB,EAAS,OAAS,OAGlCjB,EAAY,OAASmB,GAAcF,EAAS,OAAS,OAG1DG,GAAaF,IAAS,IACjBlB,IAAciB,EAAS,OAAS,OAGlCjB,EAAY,OAAS,OA6DVgB,CAAYJ,oBAClBA,EAAMb,WAAaa,EAAMd,QAAUc,EAAMC,SAAW,OAAS,2BAC1DD,EAAMb,UAAY,QAAU,2BAC5Ba,EAAMb,UAAY,QAAU,+BACxBa,EAAMd,OAAUc,EAAMb,UAAY,OAAS,OAAU,kCAvH1DsB,EAACC,EAAqBC,EAAgBC,KACpD,GAAID,EACF,OAAOD,EAAMG,OAAO,qBAGtB,OAAQD,GACN,IAAK,QACH,OAAOF,EAAMG,OAAO,sBACtB,IAAK,OACH,OAAOH,EAAMG,OAAO,wBACtB,IAAK,UACH,OAAOH,EAAMG,OAAO,wBACtB,IAAK,UACH,OAAOH,EAAMG,OAAO,wBACtB,QACE,OAAOH,EAAMG,OAAO,wBAyGFJ,CAAQT,EAAMU,QAASV,EAAMW,MAAOX,EAAMY,2BAChDZ,EAAMW,MAAQ,kCAAoC,2CAGhEG,mBAAmB,QAAS,gBAGnBC,YAAcvB,OAAOC,IAAGC,WAAA,CAAAI,YAAA,qBAAAC,YAAA,oBAAVP,CAAU,CAAA,GAAA,IAAA,KAChCQ,GAAU,2CA3DmBgB,GAChC9B,SACAC,YACAC,eAMID,EAAkB,MAEfD,EAAUE,EAAY,MAAQ,OAAU,MAkD7B4B,CAA0BhB,UAGzCA,GACDA,EAAMZ,UACF,0DAGcE,aAAaU,2BACdV,aAAaU,6BAG1B,YAGKiB,eAAiBzB,OAAOC,IAAGC,WAAA,CAAAI,YAAA,wBAAAC,YAAA,oBAAVP,CAAU,CAAA,GAAA,IACnCQ,GAAU,sEAGOA,EAAMd,OAAS,SAAW,4BAC7Bc,EAAMd,OAAS,aAAe,sDAEhCc,EAAMd,OAAS,QAAU,gCACvBc,EAAMd,QAAUc,EAAMb,UAAY,SAAW,wCAKzD,MAAM+B,MAAQ1B,OAAO2B,MAAKzB,WAAA,CAAAI,YAAA,eAAAC,YAAA,oBAAZP,CAAY,CAAA,GAAA,IAC5BQ,GAAU,iDAEGA,EAAMb,UAAY,IAAM,gMAWnC,MAAMiC,QAAU5B,OAAO2B,MAAKzB,WAAA,CAAAI,YAAA,iBAAAC,YAAA,oBAAZP,CAAY,CAAA,GAAA,IAC9BQ,GAAU,wBACMA,EAAMd,QAAUc,EAAMb,UAAY,OAAS,iCAC7Ca,EAAMd,QAAUc,EAAMb,WAAaa,EAAMC,SAAW,WAAa,+CAKvEoB,KAAO7B,OAAOC,IAAGC,WAAA,CAAAI,YAAA,cAAAC,YAAA,oBAAVP,CAAU,CAAA,GAAA,IACzBQ,GAAU,yCAEGA,EAAMd,OAAUc,EAAMb,YAAca,EAAMQ,UAAY,MAAQ,OAAU,wBACvER,EAAMd,OAAS,EAAI,uBACzBc,EAAMW,MAAQX,EAAMU,MAAMG,OAAO,gBAAkBb,EAAMU,MAAMG,OAAO,wCAItES,QAAU9B,OAAOC,IAAGC,WAAA,CAAAI,YAAA,iBAAAC,YAAA,oBAAVP,CAAU,CAAA,GAAA,IAC5BQ,GAAU,sBArGauB,GAC1BrC,SACAC,YACAqB,eAMItB,EACKC,EAAaqB,EAAY,OAAS,MAAS,OAG7C,EAyFUe,CAAoBvB,0BACnBA,EAAMd,OAAS,EAAI,qBAI1BsC,UAAYhC,OAAOiC,OAAM/B,WAAA,CAAAI,YAAA,mBAAAC,YAAA,oBAAbP,CAAa,CAAA,GAAA,IAAA,IACjCQ,GAAU,iEAGIA,EAAMX,UAAY,IAAM,sKASvCqC,OAGG,MAAMC,YAAcnC,OAAOoC,QAAOlC,WAAA,CAAAI,YAAA,qBAAAC,YAAA,oBAAdP,CAAc,CAAA,GAAA,IACpCQ,GAAU,sBACIA,EAAMb,UAAY,OAAS,+BACzBa,EAAMb,UAAY,OAAS,8BAC5Ba,EAAMb,UAAY,OAAS,eAIxC,MAAM0C,MAAQrC,OAAOsC,iBAAgBpC,WAAA,CAAAI,YAAA,eAAAC,YAAA,oBAAvBP,CAAuB,CAAA,GAAA,IACvCQ,GAAU,sBACIA,EAAMb,UAAY,OAAS,6BAC3Ba,EAAMb,UAAY,MAAQ,0BAC5Ba,EAAMb,UAAY,OAAS,uBAC/Ba,EAAM+B"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';exports.countdownColor=({theme:r,type:e})=>{switch(e){case'error':return r.colors['alert-bg-error-500'];case'info':default:return r.colors['content-brand-primary'];case'success':return r.colors['alert-success'];case'warning':return r.colors['alert-warning']}};
|
|
2
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/Alert/utils.ts"],"sourcesContent":["import type { DefaultTheme } from 'styled-components'\n\nimport type { CSSColor } from 'shared/types'\n\nimport type { AlertProps } from './types'\n\nexport const countdownColor = ({ theme, type }: Pick<AlertProps, 'type'> & { theme: DefaultTheme }): CSSColor => {\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-500']\n case 'info':\n return theme.colors['content-brand-primary']\n case 'success':\n return theme.colors['alert-success']\n case 'warning':\n return theme.colors['alert-warning']\n default:\n return theme.colors['content-brand-primary']\n }\n}\n"],"names":["countdownColor","theme","type","colors"],"mappings":"oCAM8BA,EAAGC,QAAOC,WACtC,OAAQA,GACN,IAAK,QACH,OAAOD,EAAME,OAAO,sBACtB,IAAK,OAML,QACE,OAAOF,EAAME,OAAO,yBALtB,IAAK,UACH,OAAOF,EAAME,OAAO,iBACtB,IAAK,UACH,OAAOF,EAAME,OAAO"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const countdownColor=({theme:r,type:o})=>{switch(o){case'error':return r.colors['alert-bg-error-500'];case'info':default:return r.colors['content-brand-primary'];case'success':return r.colors['alert-success'];case'warning':return r.colors['alert-warning']}};export{countdownColor};
|
|
2
|
+
//# sourceMappingURL=utils.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.mjs","sources":["../../../../src/components/Alert/utils.ts"],"sourcesContent":["import type { DefaultTheme } from 'styled-components'\n\nimport type { CSSColor } from 'shared/types'\n\nimport type { AlertProps } from './types'\n\nexport const countdownColor = ({ theme, type }: Pick<AlertProps, 'type'> & { theme: DefaultTheme }): CSSColor => {\n switch (type) {\n case 'error':\n return theme.colors['alert-bg-error-500']\n case 'info':\n return theme.colors['content-brand-primary']\n case 'success':\n return theme.colors['alert-success']\n case 'warning':\n return theme.colors['alert-warning']\n default:\n return theme.colors['content-brand-primary']\n }\n}\n"],"names":["countdownColor","theme","type","colors"],"mappings":"AAMO,MAAMA,eAAiBA,EAAGC,QAAOC,WACtC,OAAQA,GACN,IAAK,QACH,OAAOD,EAAME,OAAO,sBACtB,IAAK,OAML,QACE,OAAOF,EAAME,OAAO,yBALtB,IAAK,UACH,OAAOF,EAAME,OAAO,iBACtB,IAAK,UACH,OAAOF,EAAME,OAAO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var styled=require('styled-components');var useClassname=require('../../hooks/useClassname.js');var
|
|
1
|
+
'use strict';var React=require('react');var styled=require('styled-components');var useClassname=require('../../hooks/useClassname.js');var withMergedProps=require('../../hocs/withMergedProps.js');var hooks=require('./hooks.js');var sizes=require('./sizes.js');var sizesDefault=require('./sizes-default.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Text=require('../Text/Text.js');var Icon=require('../Icon/Icon.js');var index=require('../../icon-pack/src/icons/CheckFill/index.js');var index$1=require('../../icon-pack/src/icons/LoaderFill/index.js');const Button=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{let{size:t="m",inline:n=!0,rounded:i=!0,color:r="accent",fontColor:o="white",showContentOnStatus:a,textProps:c={},iconProps:l={},leftIconProps:u={},rightIconProps:d={},as:x,sizeXXS:p,sizeXS:m,sizeS:j,sizeM:S,sizeL:h,sizeXL:z,className:I,children:f,content:R,fontWeight:y,icon:E,innerRef:v,...C}=e;const g=styled.useTheme();C.preset!=='default'||typeof t!='string'||C.round||(C={...sizesDefault.PROPS_BY_SIZE[t]??{},...C}),C.href&&(x='a'),C.to&&(x=g.link),C.disabled&&(x='button'),C.primary&&(r='primary'),C.secondary&&(r='atlantis');const _=useClassname.useClassname("Button",I);const N=useClassname.useClassname("Button");const P=hooks.useComputedRel(g,C);const T=hooks.useComputedLinkProps(x,C);let[q,D]=Array.isArray(E)?E:[E];const Z={size:t,sizeXXS:p,sizeXS:m,sizeS:j,sizeM:S,sizeL:h,sizeXL:z};const k={...Z,as:'span',color:'inherit',weight:y??(C.preset==='brand'?800:600),lineHeight:C.preset==='brand'?1.2:1,sizes:C.preset==='brand'?sizes.SIZES_TEXT:sizesDefault.SIZES_TEXT_DEFAULT};const L={...Z,color:'inherit',preset:C.preset,sizes:sizes.SIZES_ICON};const X=C.preset==='brand'&&C.success;const b=C.preset==='brand'&&C.loading;const O=typeof f!='function'&&(f||R)?jsxRuntime.jsx(Text.Text,{className:`${N}__content`,...k,...c,children:f||R}):null;return jsxRuntime.jsx(style.Root,{...C,...T,...Z,inline:n,color:r,fontColor:o,rounded:i,rel:P,as:x,className:_,ref:s??v,children:typeof f=='function'?f({textProps:k,iconProps:L}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[X||b?jsxRuntime.jsxs(style.ContentWithStatus,{children:[X?jsxRuntime.jsx(Icon.Icon,{...L,...l,icon:jsxRuntime.jsx(index.CheckFill,{})}):jsxRuntime.jsx(style.IconAnimation,{children:jsxRuntime.jsx(Icon.Icon,{...L,...l,icon:jsxRuntime.jsx(index$1.LoaderFill,{})})}),a?O:null]}):null,jsxRuntime.jsxs(style.Content,{"aria-hidden":X||b,children:[q?jsxRuntime.jsx(Icon.Icon,{className:"icon",name:typeof q=='string'?q:void 0,icon:typeof q!='string'?q:void 0,...L,...l,...u}):null,O,D?jsxRuntime.jsx(Icon.Icon,{className:"icon",name:typeof D=='string'?D:void 0,icon:typeof D!='string'?D:void 0,...L,...l,...d}):null]})]})})}),{displayName:"Button",sizes:e=>{let s=e.preset==='brand'?sizes.SIZES:sizesDefault.SIZES_DEFAULT;return e.round&&(s=e.preset==='brand'?sizes.SIZES_ROUND:sizesDefault.SIZES_ROUND_DEFAULT),s}});exports.SIZES=sizes.SIZES,exports.SIZES_ROUND=sizes.SIZES_ROUND,exports.Button=Button,exports.COMPONENT_NAME="Button";
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable prefer-const */\nimport { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckFill, LoaderFill } from '@foxford/icon-pack'\nimport { useClassname } from 'hooks/useClassname'\nimport {
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["/* eslint-disable prefer-const */\nimport { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckFill, LoaderFill } from '@foxford/icon-pack'\nimport { useClassname } from 'hooks/useClassname'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport { useComputedRel, useComputedLinkProps } from './hooks'\nimport { SIZES, SIZES_ROUND, SIZES_ICON, SIZES_TEXT } from './sizes'\nimport { SIZES_DEFAULT, SIZES_ROUND_DEFAULT, PROPS_BY_SIZE, SIZES_TEXT_DEFAULT } from './sizes-default'\nimport type { ButtonProps, Size } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Button'\n\n/**\n *\n * Контрол многоцелевого назначения.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<button\\> элемента.\n */\nconst Button: React.ForwardRefExoticComponent<ButtonProps> = withMergedProps<ButtonProps, HTMLButtonElement>(\n forwardRef<HTMLButtonElement, MergedProps<ButtonProps>>((props, ref) => {\n let {\n size = 'm',\n inline = true,\n rounded = true,\n color = 'accent',\n fontColor = 'white',\n showContentOnStatus,\n textProps: textPropsProp = {},\n iconProps: iconPropsProp = {},\n leftIconProps = {},\n rightIconProps = {},\n as: _as,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n className,\n children,\n content,\n fontWeight,\n icon,\n innerRef,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n if (restProps.preset === 'default' && typeof size === 'string' && !restProps.round) {\n const propsBySize = PROPS_BY_SIZE[size as Size] ?? {}\n restProps = { ...propsBySize, ...restProps }\n }\n\n if (restProps.href) _as = 'a'\n if (restProps.to) _as = theme.link\n if (restProps.disabled) _as = 'button'\n\n if (restProps.primary) color = 'primary'\n if (restProps.secondary) color = 'atlantis'\n\n const rootClassName = useClassname(COMPONENT_NAME, className)\n const textClassName = useClassname(COMPONENT_NAME)\n const rel = useComputedRel(theme, restProps)\n const linkProps = useComputedLinkProps(_as, restProps)\n\n let [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const textProps: TextProps = {\n ...sizeProps,\n as: 'span',\n color: 'inherit',\n weight: fontWeight ?? (restProps.preset === 'brand' ? 800 : 600),\n lineHeight: restProps.preset === 'brand' ? 1.2 : 1,\n sizes: restProps.preset === 'brand' ? SIZES_TEXT : SIZES_TEXT_DEFAULT,\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n color: 'inherit',\n preset: restProps.preset,\n sizes: SIZES_ICON,\n }\n\n const success = restProps.preset === 'brand' && restProps.success\n const loading = restProps.preset === 'brand' && restProps.loading\n\n const mainContent =\n typeof children !== 'function' && (children || content) ? (\n <Text className={`${textClassName}__content`} {...textProps} {...textPropsProp}>\n {children || content}\n </Text>\n ) : null\n\n return (\n <Styled.Root\n {...restProps}\n {...linkProps}\n {...sizeProps}\n inline={inline}\n color={color}\n fontColor={fontColor}\n rounded={rounded}\n rel={rel}\n as={_as}\n className={rootClassName}\n ref={ref ?? innerRef}\n >\n {typeof children === 'function' ? (\n children({ textProps, iconProps })\n ) : (\n <>\n {success || loading ? (\n <Styled.ContentWithStatus>\n {success ? (\n <Icon {...iconProps} {...iconPropsProp} icon={<CheckFill />} />\n ) : (\n <Styled.IconAnimation>\n <Icon {...iconProps} {...iconPropsProp} icon={<LoaderFill />} />\n </Styled.IconAnimation>\n )}\n {showContentOnStatus ? mainContent : null}\n </Styled.ContentWithStatus>\n ) : null}\n <Styled.Content aria-hidden={success || loading}>\n {before ? (\n <Icon\n className='icon'\n name={typeof before === 'string' ? before : undefined}\n icon={typeof before !== 'string' ? before : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...leftIconProps}\n />\n ) : null}\n {mainContent}\n {after ? (\n <Icon\n className='icon'\n name={typeof after === 'string' ? after : undefined}\n icon={typeof after !== 'string' ? after : undefined}\n {...iconProps}\n {...iconPropsProp}\n {...rightIconProps}\n />\n ) : null}\n </Styled.Content>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n let sizes = props.preset === 'brand' ? SIZES : SIZES_DEFAULT\n if (props.round) sizes = props.preset === 'brand' ? SIZES_ROUND : SIZES_ROUND_DEFAULT\n\n return sizes\n },\n }\n)\n\nexport { Button, COMPONENT_NAME, SIZES, SIZES_ROUND }\n\nexport type { ButtonProps }\n"],"names":["Button","withMergedProps","forwardRef","props","ref","size","inline","rounded","color","fontColor","showContentOnStatus","textProps","textPropsProp","iconProps","iconPropsProp","leftIconProps","rightIconProps","as","_as","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","className","children","content","fontWeight","icon","innerRef","restProps","theme","useTheme","preset","round","PROPS_BY_SIZE","href","to","link","disabled","primary","secondary","rootClassName","useClassname","textClassName","rel","useComputedRel","linkProps","useComputedLinkProps","before","after","Array","isArray","sizeProps","weight","lineHeight","sizes","SIZES_TEXT","SIZES_TEXT_DEFAULT","SIZES_ICON","success","loading","mainContent","_jsx","Text","Styled","_jsxs","_Fragment","Icon","CheckFill","LoaderFill","name","undefined","displayName","SIZES","SIZES_DEFAULT","SIZES_ROUND","SIZES_ROUND_DEFAULT"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef}from'react';import{useTheme}from'styled-components';import{useClassname}from'../../hooks/useClassname.mjs';import{
|
|
1
|
+
import{forwardRef}from'react';import{useTheme}from'styled-components';import{useClassname}from'../../hooks/useClassname.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useComputedRel,useComputedLinkProps}from'./hooks.mjs';import{SIZES,SIZES_ROUND,SIZES_TEXT,SIZES_ICON}from'./sizes.mjs';import{SIZES_DEFAULT,SIZES_ROUND_DEFAULT,PROPS_BY_SIZE,SIZES_TEXT_DEFAULT}from'./sizes-default.mjs';import{Root,ContentWithStatus,IconAnimation,Content}from'./style.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{Text}from'../Text/Text.mjs';import{Icon}from'../Icon/Icon.mjs';import{CheckFill}from'../../icon-pack/src/icons/CheckFill/index.mjs';import{LoaderFill}from'../../icon-pack/src/icons/LoaderFill/index.mjs';const COMPONENT_NAME='Button';const Button=withMergedProps(forwardRef((e,o)=>{let{size:s="m",inline:t=!0,rounded:n=!0,color:r="accent",fontColor:i="white",showContentOnStatus:c,textProps:a={},iconProps:l={},leftIconProps:m={},rightIconProps:p={},as:d,sizeXXS:S,sizeXS:u,sizeS:f,sizeM:E,sizeL:I,sizeXL:h,className:j,children:_,content:x,fontWeight:C,icon:T,innerRef:z,...N}=e;const Z=useTheme();N.preset!=='default'||typeof s!='string'||N.round||(N={...PROPS_BY_SIZE[s]??{},...N}),N.href&&(d='a'),N.to&&(d=Z.link),N.disabled&&(d='button'),N.primary&&(r='primary'),N.secondary&&(r='atlantis');const P=useClassname("Button",j);const g=useClassname("Button");const y=useComputedRel(Z,N);const L=useComputedLinkProps(d,N);let[F,O]=Array.isArray(T)?T:[T];const R={size:s,sizeXXS:S,sizeXS:u,sizeS:f,sizeM:E,sizeL:I,sizeXL:h};const A={...R,as:'span',color:'inherit',weight:C??(N.preset==='brand'?800:600),lineHeight:N.preset==='brand'?1.2:1,sizes:N.preset==='brand'?SIZES_TEXT:SIZES_TEXT_DEFAULT};const X={...R,color:'inherit',preset:N.preset,sizes:SIZES_ICON};const D=N.preset==='brand'&&N.success;const U=N.preset==='brand'&&N.loading;const k=typeof _!='function'&&(_||x)?jsx(Text,{className:`${g}__content`,...A,...a,children:_||x}):null;return jsx(Root,{...N,...L,...R,inline:t,color:r,fontColor:i,rounded:n,rel:y,as:d,className:P,ref:o??z,children:typeof _=='function'?_({textProps:A,iconProps:X}):jsxs(Fragment,{children:[D||U?jsxs(ContentWithStatus,{children:[D?jsx(Icon,{...X,...l,icon:jsx(CheckFill,{})}):jsx(IconAnimation,{children:jsx(Icon,{...X,...l,icon:jsx(LoaderFill,{})})}),c?k:null]}):null,jsxs(Content,{"aria-hidden":D||U,children:[F?jsx(Icon,{className:"icon",name:typeof F=='string'?F:void 0,icon:typeof F!='string'?F:void 0,...X,...l,...m}):null,k,O?jsx(Icon,{className:"icon",name:typeof O=='string'?O:void 0,icon:typeof O!='string'?O:void 0,...X,...l,...p}):null]})]})})}),{displayName:"Button",sizes:e=>{let o=e.preset==='brand'?SIZES:SIZES_DEFAULT;return e.round&&(o=e.preset==='brand'?SIZES_ROUND:SIZES_ROUND_DEFAULT),o}});export{Button,COMPONENT_NAME,SIZES,SIZES_ROUND};
|
|
2
2
|
//# sourceMappingURL=Button.mjs.map
|