@foxford/ui 2.5.0-beta-896cda4-20230622 → 2.5.0-beta-e62c2f8-20230622
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/dts/index.d.ts +2 -2
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -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":"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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
|
}
|