@foxford/ui 2.5.0-beta-896cda4-20230622 → 2.5.0-beta-5f68188-20230623
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import{useMemo as r}from'react';import{useTheme as o}from'styled-components';import{Close as s,WarningTriangleFill as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import{useMemo as r}from'react';import{useTheme as o}from'styled-components';import{Close as s,WarningTriangleFill as t,CheckCircleFill as n,NotifFill as i,CloseCirlceFill as c}from'@foxford/icon-pack';import{useClassname as a}from'../../hooks/useClassname.js';import{Anchor as l}from'../Anchor/Anchor.js';import{Button as m}from'../Button/Button.js';import{Icon as p}from'../Icon/Icon.js';import'../Icon/icons.js';import{Text as h}from'../Text/Text.js';import d from'./parts/CountdownCircle.js';import{Root as u}from'./style.js';import{jsxs as f,jsx as C}from'react/jsx-runtime';function g(k){var{primaryAction:y,primaryActionProps:N,secondaryAction:w,secondaryActionProps:b,children:x,className:j,clear:z=!1,content:A,customIcon:v,image:I,isCompact:T=!1,link:W,linkProps:P,noIcon:B=!1,onClickCancelTimer:F,closeToast:H,style:L,textProps:M,timer:R,title:S,titleProps:q,type:D}=k;var E=a(g.displayName,j);var G=o();var J=r((()=>{switch(D){case'error':return G.colors['alert-bg-error-500'];case'info':default:return G.colors['content-brand-primary'];case'success':return G.colors['alert-success'];case'warning':return G.colors['alert-warning']}}),[D]);var K=r((()=>Boolean(!!S||T&&(S||W||y||w))),[T,W,y,w,S]);return f(u,{className:E,clear:z,column:K,isCompact:T,noIcon:B,style:L,type:D,withAction:!!y||!!w,withCloseIcon:!!H,withImage:!!I,withLink:!!W,withTimer:!!R,withTitle:!!S,children:[(!B||v)&&f("div",{className:"iconWrapper",children:[!B&&!R&&!v&&!I&&(()=>{var e=T?16:24;switch(D){case'error':return C(c,{color:G.colors['alert-bg-error-500'],size:e});case'info':return C(i,{color:G.colors['content-brand-primary'],size:e});case'success':return C(n,{color:G.colors['alert-success'],size:e});case'warning':return C(t,{color:G.colors['alert-warning'],size:e});default:return null}})(),v&&C(p,{name:v,size:T?16:24}),I&&I,R&&C(d,{className:"timer",color:J,isCompact:T,timer:R})]}),f("div",{className:"content",children:[S&&C(h,e({className:"title",content:S,size:T?14:16,lineHeight:"m"},q)),C(h,e(e({className:"text",content:'string'==typeof A?A:void 0,lineHeight:"s",size:T?14:16},M),{},{children:x||A})),W&&C(l,e(e({className:"link",onClick:W.onClick,pseudo:!0,size:T?'s':'m'},P),{},{children:W.content})),(y||w)&&f("div",{className:"actions",children:[w&&C(m,e(e({black:!0,className:"secondaryAction",fontWeight:"normal",height:32,onClick:w.onClick,outline:!0,preset:"brand",size:"xs"},b),{},{children:w.content})),y&&C(m,e(e({black:!0,className:"primaryAction",fontWeight:"normal",height:32,onClick:y.onClick,preset:"brand",size:"xs"},N),{},{children:y.content}))]})]}),F&&C(m,{black:!0,className:"cancelTimer",fontWeight:"normal",height:T?32:44,width:T?94:127,onClick:F,clear:!0,preset:"brand",size:T?'xs':'s',children:"Отменить"}),!H||R&&T?null:C("div",{className:"closeIconWrapper",children:C(s,{size:T?18:24,onClick:H})})]})}g.displayName='Alert';export{g as Alert};
|
|
2
2
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport { useClassname } from 'hooks/useClassname'\n\nimport { ColorValue } from '../../mixins/color'\nimport { BaseProps } from '../../shared/interfaces'\n\nimport { Anchor, AnchorProps } from '../Anchor'\nimport { Button, ButtonProps } from '../Button'\nimport { Icon, IconNames } from '../Icon'\nimport { Text, TextProps } from '../Text'\n\nimport CountdownCircle from './parts/CountdownCircle'\nimport * as Styled from './style'\n\nexport type AlertType = 'warning' | 'error' | 'info' | 'success'\n\nexport interface AlertProps extends BaseProps {\n /**\n * Children react node\n */\n children?: React.ReactNode\n clear?: boolean\n content?: string | React.ReactNode\n /** Icon name (for inner Icon component) */\n customIcon?: keyof typeof IconNames\n image?: React.ReactNode\n isCompact?: boolean\n link?: { content: string | React.ReactNode; onClick(): void }\n linkProps?: AnchorProps\n noIcon?: boolean\n onClickCancelTimer?(): void\n
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTheme } from 'styled-components'\nimport { CheckCircleFill, Close, CloseCirlceFill, NotifFill, WarningTriangleFill } from '@foxford/icon-pack'\nimport { useClassname } from 'hooks/useClassname'\n\nimport { ColorValue } from '../../mixins/color'\nimport { BaseProps } from '../../shared/interfaces'\n\nimport { Anchor, AnchorProps } from '../Anchor'\nimport { Button, ButtonProps } from '../Button'\nimport { Icon, IconNames } from '../Icon'\nimport { Text, TextProps } from '../Text'\n\nimport CountdownCircle from './parts/CountdownCircle'\nimport * as Styled from './style'\n\nexport type AlertType = 'warning' | 'error' | 'info' | 'success'\n\nexport interface AlertProps extends BaseProps {\n /**\n * Children react node\n */\n children?: React.ReactNode\n clear?: boolean\n closeToast?(): void\n content?: string | React.ReactNode\n /** Icon name (for inner Icon component) */\n customIcon?: keyof typeof IconNames\n image?: React.ReactNode\n isCompact?: boolean\n link?: { content: string | React.ReactNode; onClick(): void }\n linkProps?: AnchorProps\n noIcon?: boolean\n onClickCancelTimer?(): void\n primaryAction?: { content: string | React.ReactNode; onClick(): void }\n primaryActionProps?: ButtonProps\n secondaryAction?: { content: string | React.ReactNode; onClick(): void }\n secondaryActionProps?: ButtonProps\n textProps?: TextProps\n timer?: number\n title?: string\n titleProps?: TextProps\n type: AlertType\n}\n\nAlert.displayName = 'Alert'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n */\nexport function Alert({\n primaryAction,\n primaryActionProps,\n secondaryAction,\n secondaryActionProps,\n children,\n className,\n clear = false,\n content,\n customIcon,\n image,\n isCompact = false,\n link,\n linkProps,\n noIcon = false,\n onClickCancelTimer,\n closeToast,\n style,\n textProps,\n timer,\n title,\n titleProps,\n type,\n}: AlertProps) {\n const _className = useClassname(Alert.displayName, className)\n const theme = useTheme()\n\n const getDefaultIcon = () => {\n const size = isCompact ? 16 : 24\n\n switch (type) {\n case 'error':\n return <CloseCirlceFill color={theme.colors['alert-bg-error-500']} size={size} />\n case 'info':\n return <NotifFill color={theme.colors['content-brand-primary']} size={size} />\n case 'success':\n return <CheckCircleFill color={theme.colors['alert-success']} size={size} />\n case 'warning':\n return <WarningTriangleFill color={theme.colors['alert-warning']} size={size} />\n default:\n return null\n }\n }\n\n const countdownColor: ColorValue = useMemo(() => {\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 }, [type])\n\n const column: boolean = useMemo(() => {\n return Boolean(!!title || (isCompact && (title || link || primaryAction || secondaryAction)))\n }, [isCompact, link, primaryAction, secondaryAction, title])\n\n return (\n <Styled.Root\n className={_className}\n clear={clear}\n column={column}\n isCompact={isCompact}\n noIcon={noIcon}\n style={style}\n type={type}\n withAction={!!primaryAction || !!secondaryAction}\n withCloseIcon={!!closeToast}\n withImage={!!image}\n withLink={!!link}\n withTimer={!!timer}\n withTitle={!!title}\n >\n {(!noIcon || customIcon) && (\n <div className='iconWrapper'>\n {!noIcon && !timer && !customIcon && !image && getDefaultIcon()}\n {customIcon && <Icon name={customIcon} size={isCompact ? 16 : 24} />}\n {image && image}\n {timer && <CountdownCircle className='timer' color={countdownColor} isCompact={isCompact} timer={timer} />}\n </div>\n )}\n\n <div className='content'>\n {title && <Text className='title' content={title} size={isCompact ? 14 : 16} lineHeight='m' {...titleProps} />}\n\n <Text\n className='text'\n content={typeof content === 'string' ? content : undefined}\n lineHeight='s'\n size={isCompact ? 14 : 16}\n {...textProps}\n >\n {children || content}\n </Text>\n\n {link && (\n <Anchor className='link' onClick={link.onClick} pseudo size={isCompact ? 's' : 'm'} {...linkProps}>\n {link.content}\n </Anchor>\n )}\n\n {(primaryAction || secondaryAction) && (\n <div className='actions'>\n {secondaryAction && (\n <Button\n black\n className='secondaryAction'\n fontWeight='normal'\n height={32}\n onClick={secondaryAction.onClick}\n outline\n preset='brand'\n size='xs'\n {...secondaryActionProps}\n >\n {secondaryAction.content}\n </Button>\n )}\n\n {primaryAction && (\n <Button\n black\n className='primaryAction'\n fontWeight='normal'\n height={32}\n onClick={primaryAction.onClick}\n preset='brand'\n size='xs'\n {...primaryActionProps}\n >\n {primaryAction.content}\n </Button>\n )}\n </div>\n )}\n </div>\n\n {onClickCancelTimer && (\n <Button\n black\n className='cancelTimer'\n fontWeight='normal'\n height={isCompact ? 32 : 44}\n width={isCompact ? 94 : 127}\n onClick={onClickCancelTimer}\n clear\n preset='brand'\n size={isCompact ? 'xs' : 's'}\n >\n Отменить\n </Button>\n )}\n\n {!closeToast || (timer && isCompact) ? null : (\n <div className='closeIconWrapper'>\n <Close size={isCompact ? 18 : 24} onClick={closeToast} />\n </div>\n )}\n </Styled.Root>\n )\n}\n"],"names":["Alert","_ref","primaryAction","primaryActionProps","secondaryAction","secondaryActionProps","children","className","clear","content","customIcon","image","isCompact","link","linkProps","noIcon","onClickCancelTimer","closeToast","style","textProps","timer","title","titleProps","type","_className","useClassname","displayName","theme","useTheme","countdownColor","useMemo","colors","column","Boolean","_jsxs","Styled.Root","withAction","withCloseIcon","withImage","withLink","withTimer","withTitle","size","_jsx","CloseCirlceFill","color","NotifFill","CheckCircleFill","WarningTriangleFill","Icon","name","CountdownCircle","Text","_objectSpread","lineHeight","Anchor","onClick","pseudo","Button","black","fontWeight","height","outline","preset","width","Close"],"mappings":"wnBAmDO,SAASA,EAuBDC,GAAA,IAvBOC,cACpBA,EADoBC,mBAEpBA,EAFoBC,gBAGpBA,EAHoBC,qBAIpBA,EAJoBC,SAKpBA,EALoBC,UAMpBA,EANoBC,MAOpBA,GAAAA,EAPoBC,QAQpBA,EARoBC,WASpBA,EAToBC,MAUpBA,EAVoBC,UAWpBA,KAXoBC,KAYpBA,EAZoBC,UAapBA,EAboBC,OAcpBA,KAdoBC,mBAepBA,EAfoBC,WAgBpBA,EAhBoBC,MAiBpBA,EAjBoBC,UAkBpBA,EAlBoBC,MAmBpBA,EAnBoBC,MAoBpBA,EApBoBC,WAqBpBA,EArBoBC,KAsBpBA,GACatB,EACb,IAAMuB,EAAaC,EAAazB,EAAM0B,YAAanB,GACnD,IAAMoB,EAAQC,IAmBd,IAAMC,EAA6BC,GAAQ,KACzC,OAAQP,GACN,IAAK,QACH,OAAOI,EAAMI,OAAO,sBACtB,IAAK,OAML,QACE,OAAOJ,EAAMI,OAAO,yBALtB,IAAK,UACH,OAAOJ,EAAMI,OAAO,iBACtB,IAAK,UACH,OAAOJ,EAAMI,OAAO,oBAIvB,CAACR,IAEJ,IAAMS,EAAkBF,GAAQ,IACvBG,UAAUZ,GAAUT,IAAcS,GAASR,GAAQX,GAAiBE,KAC1E,CAACQ,EAAWC,EAAMX,EAAeE,EAAiBiB,IAErD,OACEa,EAACC,EAAD,CACE5B,UAAWiB,EACXhB,MAAOA,EACPwB,OAAQA,EACRpB,UAAWA,EACXG,OAAQA,EACRG,MAAOA,EACPK,KAAMA,EACNa,aAAclC,KAAmBE,EACjCiC,gBAAiBpB,EACjBqB,YAAa3B,EACb4B,WAAY1B,EACZ2B,YAAapB,EACbqB,YAAapB,EAbff,SAAA,GAeKS,GAAUL,IACXwB,EAAA,MAAA,CAAK3B,UAAU,cAAfD,SAAA,EACIS,IAAWK,IAAUV,IAAeC,GAtDvB,MACrB,IAAM+B,EAAO9B,EAAY,GAAK,GAE9B,OAAQW,GACN,IAAK,QACH,OAAOoB,EAACC,EAAD,CAAiBC,MAAOlB,EAAMI,OAAO,sBAAuBW,KAAMA,IAC3E,IAAK,OACH,OAAOC,EAACG,EAAD,CAAWD,MAAOlB,EAAMI,OAAO,yBAA0BW,KAAMA,IACxE,IAAK,UACH,OAAOC,EAACI,EAAD,CAAiBF,MAAOlB,EAAMI,OAAO,iBAAkBW,KAAMA,IACtE,IAAK,UACH,OAAOC,EAACK,EAAD,CAAqBH,MAAOlB,EAAMI,OAAO,iBAAkBW,KAAMA,IAC1E,QACE,OAAO,OAbU,GAuDdhC,GAAciC,EAACM,EAAD,CAAMC,KAAMxC,EAAYgC,KAAM9B,EAAY,GAAK,KAC7DD,GAASA,EACTS,GAASuB,EAACQ,EAAD,CAAiB5C,UAAU,QAAQsC,MAAOhB,EAAgBjB,UAAWA,EAAWQ,MAAOA,OAIrGc,EAAA,MAAA,CAAK3B,UAAU,UAAfD,SACGe,CAAAA,GAASsB,EAACS,EAADC,EAAA,CAAM9C,UAAU,QAAQE,QAASY,EAAOqB,KAAM9B,EAAY,GAAK,GAAI0C,WAAW,KAAQhC,IAEhGqB,EAACS,EAADC,EAAAA,EAAA,CACE9C,UAAU,OACVE,QAA4B,iBAAZA,EAAuBA,OAAAA,EACvC6C,WAAW,IACXZ,KAAM9B,EAAY,GAAK,IACnBO,GALN,GAAA,CAAAb,SAOGA,GAAYG,KAGdI,GACC8B,EAACY,EAADF,EAAAA,EAAA,CAAQ9C,UAAU,OAAOiD,QAAS3C,EAAK2C,QAASC,UAAOf,KAAM9B,EAAY,IAAM,KAASE,GAAxF,GAAA,CAAAR,SACGO,EAAKJ,YAIRP,GAAiBE,IACjB8B,EAAA,MAAA,CAAK3B,UAAU,UAAfD,SACGF,CAAAA,GACCuC,EAACe,EAADL,EAAAA,EAAA,CACEM,OADF,EAEEpD,UAAU,kBACVqD,WAAW,SACXC,OAAQ,GACRL,QAASpD,EAAgBoD,QACzBM,SAAAA,EACAC,OAAO,QACPrB,KAAK,MACDrC,GATN,GAAA,CAAAC,SAWGF,EAAgBK,WAIpBP,GACCyC,EAACe,EAADL,EAAAA,EAAA,CACEM,OAAAA,EACApD,UAAU,gBACVqD,WAAW,SACXC,OAAQ,GACRL,QAAStD,EAAcsD,QACvBO,OAAO,QACPrB,KAAK,MACDvC,GARN,GAAA,CAAAG,SAUGJ,EAAcO,iBAOxBO,GACC2B,EAACe,EAAD,CACEC,OAAAA,EACApD,UAAU,cACVqD,WAAW,SACXC,OAAQjD,EAAY,GAAK,GACzBoD,MAAOpD,EAAY,GAAK,IACxB4C,QAASxC,EACTR,OAPF,EAQEuD,OAAO,QACPrB,KAAM9B,EAAY,KAAO,IAT3BN,SAAA,cAeAW,GAAeG,GAASR,EAAa,KACrC+B,EAAA,MAAA,CAAKpC,UAAU,mBAAfD,SACEqC,EAACsB,EAAD,CAAOvB,KAAM9B,EAAY,GAAK,GAAI4C,QAASvC,SAvKrDjB,EAAM0B,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from'@babel/runtime/helpers/taggedTemplateLiteral';import t,{css as e}from'styled-components';import{screenS as i,screenXs as r}from'../../mixins/screen.js';var n,p;var c=t.div.withConfig({shouldForwardProp:o=>['children','className','style'].includes(o)}).withConfig({componentId:"fox-ui__sc-1v79u95-0"})(["display:flex;align-items:",";justify-content:",";padding:",";padding-left:",";padding-right:",";height:",";width:",";border-radius:",";background-color:",";box-shadow:",";box-sizing:border-box;"," "," .iconWrapper{display:flex;margin-right:",";","}.title{display:inline-block;margin-top:",";margin-bottom:8px;max-width:100%;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden;}.content{display:flex;margin-right:auto;flex-direction:",";align-items:",";max-width:",";white-space:",";overflow:",";}.text{line-height:",";color:",";text-overflow:",";overflow:hidden;}.link{display:flex;margin-top:",";margin-left:",";color:",";}.actions{margin-top:",";margin-left:",";}.primaryAction{margin-left:0;}.secondaryAction{margin-right:",";}.timer{line-height:",";font-weight:",";font-size:",";color:",";svg{transform:rotateY(180deg);}}.cancelTimer{margin-left:",";}.closeIconWrapper{display:flex;margin-left:",";cursor:pointer;}"],(o=>o.column||o.isCompact&&!o.withTimer?'flex-start':'center'),(o=>o.withTimer?'space-between':'flex-start'),(o=>o.isCompact?o.column?'16px':o.withTimer?'5px 12px 5px 16px':'12px 12px 12px 16px':o.column?'16px':o.withImage?'8px 16px':o.withTimer?'2px 16px 2px 20px':'12px 16px 12px 20px'),(o=>o.isCompact?o.withTitle?o.withImage||!o.noIcon?'16px':'20px':o.withImage?'12px':o.withAction&&o.noIcon?'20px':'16px':o.withTitle?o.withImage||!o.noIcon?'16px':'24px':o.withImage?'16px':'20px'),(o=>o.withCloseIcon?o.isCompact?'12px':'16px':o.withTimer?'8px':'20px'),(o=>o.isCompact||o.column?'auto':'48px'),(o=>"".concat(o.isCompact?'351px':'fit-content')),(o=>o.column?o.isCompact?'20px':'12px':'30px'),(o=>o.clear?o.theme.colors['bg-oncolor-primary']:((o,t)=>{switch(o){case'error':return t.colors['alert-bg-error-200'];case'info':return t.colors['bg-brand-primary-200'];case'success':return t.colors['alert-bg-success-200'];case'warning':return t.colors['alert-bg-warning-200'];default:return t.colors['bg-oncolor-primary']}})(o.type,o.theme)),(o=>o.clear?'0 6px 20px 0 rgba(0, 0, 0, 0.1)':'none'),i()(n||(n=o(["\n width: 351px;\n "]))),r()(p||(p=o(["\n width: 304px;\n "]))),(o=>o.isCompact?'8px':o.column?o.withImage?'8px':'12px':'8px'),(o=>o.withImage&&e(["img,svg{height:",";width:",";}"],(o=>o.isCompact?'20px':o.column?'28px':'32px'),(o=>o.isCompact?'20px':o.column?'28px':'32px'))),(o=>o.isCompact?'0':'2px'),(o=>o.column?'column':'row'),(o=>o.column?'flex-start':'center'),(o=>o.column?'260px':'initial'),(o=>o.column||o.isCompact?'normal':'nowrap'),(o=>o.column||o.isCompact?'auto':'hidden'),(o=>o.isCompact?'18px':'20px'),(o=>o.theme.colors['content-oncolor-constant']),(o=>o.column||o.isCompact?'clip':'ellipsis'),(o=>o.column?o.isCompact&&!o.withTitle?'4px':'12px':0),(o=>o.column?0:'60px'),(o=>o.clear?o.theme.colors['content-link']:o.theme.colors['content-oncolor-constant']),(o=>o.column?o.isCompact?o.withTitle?'16px':'8px':'16px':0),(o=>o.column?0:'60px'),(o=>o.column?'4px':'8px'),(o=>o.isCompact?'12px':'18px'),(o=>o.isCompact?'700':'400'),(o=>o.isCompact?'11px':'14px'),(o=>((o,t)=>{switch(o){case'error':return t.colors['alert-bg-error-500'];case'info':default:return t.colors['content-brand-primary'];case'success':return t.colors['alert-success'];case'warning':return t.colors['alert-warning']}})(o.type,o.theme)),(o=>o.isCompact?'28px':'60px'),(o=>o.withTimer?'0':'16px'));export{c as Root};
|
|
1
|
+
import o from'@babel/runtime/helpers/taggedTemplateLiteral';import t,{css as e}from'styled-components';import{screenS as i,screenXs as r}from'../../mixins/screen.js';var n,p;var c=t.div.withConfig({shouldForwardProp:o=>['children','className','style'].includes(o)}).withConfig({componentId:"fox-ui__sc-1v79u95-0"})(["display:flex;align-items:",";justify-content:",";padding:",";padding-left:",";padding-right:",";height:",";max-width:100%;width:",";border-radius:",";background-color:",";box-shadow:",";box-sizing:border-box;"," "," .iconWrapper{display:flex;margin-right:",";","}.title{display:inline-block;margin-top:",";margin-bottom:8px;max-width:100%;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden;}.content{display:flex;margin-right:auto;flex-direction:",";align-items:",";max-width:",";white-space:",";overflow:",";}.text{line-height:",";color:",";text-overflow:",";overflow:hidden;}.link{display:flex;margin-top:",";margin-left:",";color:",";}.actions{margin-top:",";margin-left:",";}.primaryAction{margin-left:0;}.secondaryAction{margin-right:",";}.timer{line-height:",";font-weight:",";font-size:",";color:",";svg{transform:rotateY(180deg);}}.cancelTimer{margin-left:",";}.closeIconWrapper{display:flex;margin-left:",";cursor:pointer;}"],(o=>o.column||o.isCompact&&!o.withTimer?'flex-start':'center'),(o=>o.withTimer?'space-between':'flex-start'),(o=>o.isCompact?o.column?'16px':o.withTimer?'5px 12px 5px 16px':'12px 12px 12px 16px':o.column?'16px':o.withImage?'8px 16px':o.withTimer?'2px 16px 2px 20px':'12px 16px 12px 20px'),(o=>o.isCompact?o.withTitle?o.withImage||!o.noIcon?'16px':'20px':o.withImage?'12px':o.withAction&&o.noIcon?'20px':'16px':o.withTitle?o.withImage||!o.noIcon?'16px':'24px':o.withImage?'16px':'20px'),(o=>o.withCloseIcon?o.isCompact?'12px':'16px':o.withTimer?'8px':'20px'),(o=>o.isCompact||o.column?'auto':'48px'),(o=>"".concat(o.isCompact?'351px':'fit-content')),(o=>o.column?o.isCompact?'20px':'12px':'30px'),(o=>o.clear?o.theme.colors['bg-oncolor-primary']:((o,t)=>{switch(o){case'error':return t.colors['alert-bg-error-200'];case'info':return t.colors['bg-brand-primary-200'];case'success':return t.colors['alert-bg-success-200'];case'warning':return t.colors['alert-bg-warning-200'];default:return t.colors['bg-oncolor-primary']}})(o.type,o.theme)),(o=>o.clear?'0 6px 20px 0 rgba(0, 0, 0, 0.1)':'none'),i()(n||(n=o(["\n width: 351px;\n "]))),r()(p||(p=o(["\n width: 304px;\n "]))),(o=>o.isCompact?'8px':o.column?o.withImage?'8px':'12px':'8px'),(o=>o.withImage&&e(["img,svg{height:",";width:",";}"],(o=>o.isCompact?'20px':o.column?'28px':'32px'),(o=>o.isCompact?'20px':o.column?'28px':'32px'))),(o=>o.isCompact?'0':'2px'),(o=>o.column?'column':'row'),(o=>o.column?'flex-start':'center'),(o=>o.column?'260px':'initial'),(o=>o.column||o.isCompact?'normal':'nowrap'),(o=>o.column||o.isCompact?'auto':'hidden'),(o=>o.isCompact?'18px':'20px'),(o=>o.theme.colors['content-oncolor-constant']),(o=>o.column||o.isCompact?'clip':'ellipsis'),(o=>o.column?o.isCompact&&!o.withTitle?'4px':'12px':0),(o=>o.column?0:'60px'),(o=>o.clear?o.theme.colors['content-link']:o.theme.colors['content-oncolor-constant']),(o=>o.column?o.isCompact?o.withTitle?'16px':'8px':'16px':0),(o=>o.column?0:'60px'),(o=>o.column?'4px':'8px'),(o=>o.isCompact?'12px':'18px'),(o=>o.isCompact?'700':'400'),(o=>o.isCompact?'11px':'14px'),(o=>((o,t)=>{switch(o){case'error':return t.colors['alert-bg-error-500'];case'info':default:return t.colors['content-brand-primary'];case'success':return t.colors['alert-success'];case'warning':return t.colors['alert-warning']}})(o.type,o.theme)),(o=>o.isCompact?'28px':'60px'),(o=>o.withTimer?'0':'16px'));export{c as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components'\n\nimport { screenS, screenXs } from '../../mixins/screen'\n\nimport { AlertProps, AlertType } from './Alert'\n\nconst color = (type: AlertType, theme: DefaultTheme) => {\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 countdownColor = (type: AlertType, theme: DefaultTheme) => {\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\ntype AdditionalAlertTypes = {\n column: boolean\n isCompact: boolean\n withAction: boolean\n withCloseIcon: boolean\n withImage: boolean\n withLink: boolean\n withTimer: boolean\n withTitle: boolean\n}\n\ntype ExtendedAlertProps = AlertProps & AdditionalAlertTypes\n\nexport const Root = styled.div.withConfig<ExtendedAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n})`\n display: flex;\n align-items: ${(props) => (props.column || (props.isCompact && !props.withTimer) ? 'flex-start' : 'center')};\n justify-content: ${(props) => (props.withTimer ? 'space-between' : 'flex-start')};\n padding: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? props.column\n ? '16px'\n : props.withTimer\n ? '5px 12px 5px 16px'\n : '12px 12px 12px 16px'\n : props.column\n ? '16px'\n : props.withImage\n ? '8px 16px'\n : props.withTimer\n ? '2px 16px 2px 20px'\n : '12px 16px 12px 20px'};\n padding-left: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? props.withTitle\n ? (props.withImage || !props.noIcon) ? '16px' : '20px'\n : props.withImage\n ? '12px'\n : props.withAction && props.noIcon\n ? '20px'\n : '16px'\n : props.withTitle\n ? (props.withImage || !props.noIcon) ? '16px' : '24px'\n : props.withImage ? '16px' : '20px'};\n padding-right: ${(props) =>\n // prettier-ignore\n props.withCloseIcon\n ? props.isCompact ? '12px' : '16px'\n : props.withTimer ? '8px' : '20px'};\n height: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? 'auto'\n : props.column ? 'auto' : '48px'};\n width: ${(props) => `${props.isCompact ? '351px' : 'fit-content'}`};\n border-radius: ${(props) => (props.column ? (props.isCompact ? '20px' : '12px') : '30px')};\n background-color: ${(props) =>\n props.clear ? props.theme.colors['bg-oncolor-primary'] : color(props.type, props.theme)};\n box-shadow: ${(props) => (props.clear ? '0 6px 20px 0 rgba(0, 0, 0, 0.1)' : 'none')};\n box-sizing: border-box;\n\n ${screenS()`\n width: 351px;\n `}\n ${screenXs()`\n width: 304px;\n `}\n\n .iconWrapper {\n display: flex;\n margin-right: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? '8px'\n : props.column\n ? props.withImage ? '8px' : '12px'\n : '8px'};\n\n ${(props) =>\n props.withImage &&\n css`\n img,\n svg {\n height: ${(props: ExtendedAlertProps) =>\n // prettier-ignore\n props.isCompact\n ? '20px'\n : props.column ? '28px' : '32px'};\n width: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? '20px'\n : props.column ? '28px' : '32px'};\n }\n `}\n }\n\n .title {\n display: inline-block;\n margin-top: ${(props) => (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 .content {\n display: flex;\n margin-right: auto;\n flex-direction: ${(props) => (props.column ? 'column' : 'row')};\n align-items: ${(props) => (props.column ? 'flex-start' : 'center')};\n max-width: ${(props) => (props.column ? '260px' : 'initial')};\n white-space: ${(props) => (props.column || props.isCompact ? 'normal' : 'nowrap')};\n overflow: ${(props) => (props.column || props.isCompact ? 'auto' : 'hidden')};\n }\n\n .text {\n line-height: ${(props) => (props.isCompact ? '18px' : '20px')};\n color: ${(props) => props.theme.colors['content-oncolor-constant']};\n text-overflow: ${(props) => (props.column || props.isCompact ? 'clip' : 'ellipsis')};\n overflow: hidden;\n }\n\n .link {\n display: flex;\n margin-top: ${(props) => (props.column ? (props.isCompact && !props.withTitle ? '4px' : '12px') : 0)};\n margin-left: ${(props) => (props.column ? 0 : '60px')};\n color: ${(props) =>\n props.clear ? props.theme.colors['content-link'] : props.theme.colors['content-oncolor-constant']};\n }\n\n .actions {\n margin-top: ${(props) =>\n // prettier-ignore\n props.column\n ? props.isCompact\n ? props.withTitle ? '16px' : '8px'\n : '16px'\n : 0};\n margin-left: ${(props) => (props.column ? 0 : '60px')};\n }\n\n .primaryAction {\n margin-left: 0;\n }\n\n .secondaryAction {\n margin-right: ${(props) => (props.column ? '4px' : '8px')};\n }\n\n .timer {\n line-height: ${(props) => (props.isCompact ? '12px' : '18px')};\n font-weight: ${(props) => (props.isCompact ? '700' : '400')};\n font-size: ${(props) => (props.isCompact ? '11px' : '14px')};\n color: ${(props) => countdownColor(props.type, props.theme)};\n\n svg {\n transform: rotateY(180deg);\n }\n }\n\n .cancelTimer {\n margin-left: ${(props) => (props.isCompact ? '28px' : '60px')};\n }\n\n .closeIconWrapper {\n display: flex;\n margin-left: ${(props) => (props.withTimer ? '0' : '16px')};\n cursor: pointer;\n }\n`\n"],"names":["Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","column","isCompact","withTimer","withImage","withTitle","noIcon","withAction","withCloseIcon","clear","theme","colors","type","screenS","_templateObject","_taggedTemplateLiteral","screenXs","_templateObject2","css"],"mappings":"8KAiDO,IAAMA,EAAOC,EAAOC,IAAIC,WAA+B,CAC5DC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,SAASC,SAASD,KAD1DF,WAAA,CAAAI,YAAA,wBAAGN,CAAH,CAAA,4BAAA,oBAAA,YAAA,iBAAA,kBAAA,WAAA,
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Alert/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme } from 'styled-components'\n\nimport { screenS, screenXs } from '../../mixins/screen'\n\nimport { AlertProps, AlertType } from './Alert'\n\nconst color = (type: AlertType, theme: DefaultTheme) => {\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 countdownColor = (type: AlertType, theme: DefaultTheme) => {\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\ntype AdditionalAlertTypes = {\n column: boolean\n isCompact: boolean\n withAction: boolean\n withCloseIcon: boolean\n withImage: boolean\n withLink: boolean\n withTimer: boolean\n withTitle: boolean\n}\n\ntype ExtendedAlertProps = AlertProps & AdditionalAlertTypes\n\nexport const Root = styled.div.withConfig<ExtendedAlertProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n})`\n display: flex;\n align-items: ${(props) => (props.column || (props.isCompact && !props.withTimer) ? 'flex-start' : 'center')};\n justify-content: ${(props) => (props.withTimer ? 'space-between' : 'flex-start')};\n padding: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? props.column\n ? '16px'\n : props.withTimer\n ? '5px 12px 5px 16px'\n : '12px 12px 12px 16px'\n : props.column\n ? '16px'\n : props.withImage\n ? '8px 16px'\n : props.withTimer\n ? '2px 16px 2px 20px'\n : '12px 16px 12px 20px'};\n padding-left: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? props.withTitle\n ? (props.withImage || !props.noIcon) ? '16px' : '20px'\n : props.withImage\n ? '12px'\n : props.withAction && props.noIcon\n ? '20px'\n : '16px'\n : props.withTitle\n ? (props.withImage || !props.noIcon) ? '16px' : '24px'\n : props.withImage ? '16px' : '20px'};\n padding-right: ${(props) =>\n // prettier-ignore\n props.withCloseIcon\n ? props.isCompact ? '12px' : '16px'\n : props.withTimer ? '8px' : '20px'};\n height: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? 'auto'\n : props.column ? 'auto' : '48px'};\n max-width: 100%;\n width: ${(props) => `${props.isCompact ? '351px' : 'fit-content'}`};\n border-radius: ${(props) => (props.column ? (props.isCompact ? '20px' : '12px') : '30px')};\n background-color: ${(props) =>\n props.clear ? props.theme.colors['bg-oncolor-primary'] : color(props.type, props.theme)};\n box-shadow: ${(props) => (props.clear ? '0 6px 20px 0 rgba(0, 0, 0, 0.1)' : 'none')};\n box-sizing: border-box;\n\n ${screenS()`\n width: 351px;\n `}\n ${screenXs()`\n width: 304px;\n `}\n\n .iconWrapper {\n display: flex;\n margin-right: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? '8px'\n : props.column\n ? props.withImage ? '8px' : '12px'\n : '8px'};\n\n ${(props) =>\n props.withImage &&\n css`\n img,\n svg {\n height: ${(props: ExtendedAlertProps) =>\n // prettier-ignore\n props.isCompact\n ? '20px'\n : props.column ? '28px' : '32px'};\n width: ${(props) =>\n // prettier-ignore\n props.isCompact\n ? '20px'\n : props.column ? '28px' : '32px'};\n }\n `}\n }\n\n .title {\n display: inline-block;\n margin-top: ${(props) => (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 .content {\n display: flex;\n margin-right: auto;\n flex-direction: ${(props) => (props.column ? 'column' : 'row')};\n align-items: ${(props) => (props.column ? 'flex-start' : 'center')};\n max-width: ${(props) => (props.column ? '260px' : 'initial')};\n white-space: ${(props) => (props.column || props.isCompact ? 'normal' : 'nowrap')};\n overflow: ${(props) => (props.column || props.isCompact ? 'auto' : 'hidden')};\n }\n\n .text {\n line-height: ${(props) => (props.isCompact ? '18px' : '20px')};\n color: ${(props) => props.theme.colors['content-oncolor-constant']};\n text-overflow: ${(props) => (props.column || props.isCompact ? 'clip' : 'ellipsis')};\n overflow: hidden;\n }\n\n .link {\n display: flex;\n margin-top: ${(props) => (props.column ? (props.isCompact && !props.withTitle ? '4px' : '12px') : 0)};\n margin-left: ${(props) => (props.column ? 0 : '60px')};\n color: ${(props) =>\n props.clear ? props.theme.colors['content-link'] : props.theme.colors['content-oncolor-constant']};\n }\n\n .actions {\n margin-top: ${(props) =>\n // prettier-ignore\n props.column\n ? props.isCompact\n ? props.withTitle ? '16px' : '8px'\n : '16px'\n : 0};\n margin-left: ${(props) => (props.column ? 0 : '60px')};\n }\n\n .primaryAction {\n margin-left: 0;\n }\n\n .secondaryAction {\n margin-right: ${(props) => (props.column ? '4px' : '8px')};\n }\n\n .timer {\n line-height: ${(props) => (props.isCompact ? '12px' : '18px')};\n font-weight: ${(props) => (props.isCompact ? '700' : '400')};\n font-size: ${(props) => (props.isCompact ? '11px' : '14px')};\n color: ${(props) => countdownColor(props.type, props.theme)};\n\n svg {\n transform: rotateY(180deg);\n }\n }\n\n .cancelTimer {\n margin-left: ${(props) => (props.isCompact ? '28px' : '60px')};\n }\n\n .closeIconWrapper {\n display: flex;\n margin-left: ${(props) => (props.withTimer ? '0' : '16px')};\n cursor: pointer;\n }\n`\n"],"names":["Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","column","isCompact","withTimer","withImage","withTitle","noIcon","withAction","withCloseIcon","clear","theme","colors","type","screenS","_templateObject","_taggedTemplateLiteral","screenXs","_templateObject2","css"],"mappings":"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"}
|
package/dts/index.d.ts
CHANGED
|
@@ -832,6 +832,7 @@ interface AlertProps extends BaseProps {
|
|
|
832
832
|
*/
|
|
833
833
|
children?: React.ReactNode;
|
|
834
834
|
clear?: boolean;
|
|
835
|
+
closeToast?(): void;
|
|
835
836
|
content?: string | React.ReactNode;
|
|
836
837
|
/** Icon name (for inner Icon component) */
|
|
837
838
|
customIcon?: keyof typeof IconNames;
|
|
@@ -844,7 +845,6 @@ interface AlertProps extends BaseProps {
|
|
|
844
845
|
linkProps?: AnchorProps;
|
|
845
846
|
noIcon?: boolean;
|
|
846
847
|
onClickCancelTimer?(): void;
|
|
847
|
-
onClickCloseIcon?(): void;
|
|
848
848
|
primaryAction?: {
|
|
849
849
|
content: string | React.ReactNode;
|
|
850
850
|
onClick(): void;
|
|
@@ -865,7 +865,7 @@ interface AlertProps extends BaseProps {
|
|
|
865
865
|
* Расширен:
|
|
866
866
|
* - [`BaseProps`](#/Миксины)
|
|
867
867
|
*/
|
|
868
|
-
declare function Alert({ primaryAction, primaryActionProps, secondaryAction, secondaryActionProps, children, className, clear, content, customIcon, image, isCompact, link, linkProps, noIcon, onClickCancelTimer,
|
|
868
|
+
declare function Alert({ primaryAction, primaryActionProps, secondaryAction, secondaryActionProps, children, className, clear, content, customIcon, image, isCompact, link, linkProps, noIcon, onClickCancelTimer, closeToast, style, textProps, timer, title, titleProps, type, }: AlertProps): JSX.Element;
|
|
869
869
|
declare namespace Alert {
|
|
870
870
|
var displayName: string;
|
|
871
871
|
}
|