@foxford/ui 2.129.0 → 2.130.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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var styled=require('styled-components');var useClassname=require('../../hooks/useClassname.js');var misc=require('../../shared/utils/misc.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:
|
|
1
|
+
'use strict';var React=require('react');var styled=require('styled-components');var useClassname=require('../../hooks/useClassname.js');var misc=require('../../shared/utils/misc.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 Slot=require('../Slot/Slot.js');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:o=!0,color:i="accent",fontColor:r="white",showContentOnStatus:c,textProps:l={},iconProps:a={},leftIconProps:u={},rightIconProps:d={},textSizes:x={},iconSizes:p={},as:j,root:m,text:S,addonLeft:h,addonRight:R,successIcon:z,loadingIcon:f,sizeXXS:I,sizeXS:y,sizeS:g,sizeM:P,sizeL:v,sizeXL:E,className:k,children:C,content:b,fontWeight:q,icon:_,innerRef:N,...T}=e;const D=styled.useTheme();T.preset!=='default'||typeof t!='string'||T.round||(T={...sizesDefault.PROPS_BY_SIZE[t]??{},...T}),T.href&&(j='a'),T.to&&(j=D.link),T.disabled&&(j='button'),T.primary&&(i='primary'),T.secondary&&(i='atlantis');const L=useClassname.useClassname("Button",k);const Z=useClassname.useClassname("Button");const F=hooks.useComputedRel(D,T);const X=hooks.useComputedLinkProps(j,T);let[O,w]=Array.isArray(_)?_:[_];const B={size:t,sizeXXS:I,sizeXS:y,sizeS:g,sizeM:P,sizeL:v,sizeXL:E};const M={...B,as:'span',color:'inherit',weight:q??(T.preset==='brand'?800:600),lineHeight:T.preset==='brand'?1.2:1,sizes:misc.deepmerge(T.preset==='brand'?sizes.SIZES_TEXT:sizesDefault.SIZES_TEXT_DEFAULT,x)};const A={...B,color:'inherit',preset:T.preset,sizes:misc.deepmerge(sizes.SIZES_ICON,p)};const U={...A,icon:jsxRuntime.jsx(index.CheckFill,{})};const $={...A,icon:jsxRuntime.jsx(index$1.LoaderFill,{})};const W=T.preset==='brand'&&T.success;const H=T.preset==='brand'&&T.loading;const Y=jsxRuntime.jsx(Slot.Slot,{render:S,props:M,fallback:typeof C!='function'&&(C||b)?jsxRuntime.jsx(Text.Text,{className:`${Z}__content`,...M,...l,children:C||b}):null});return jsxRuntime.jsx(style.Root,{...T,...X,...B,inline:n,color:i,fontColor:r,rounded:o,rel:F,as:j,className:L,ref:s??N,children:jsxRuntime.jsx(Slot.Slot,{render:m,props:{textProps:M,iconProps:A,successIconProps:U,loadingIconProps:$},fallback:typeof C=='function'?jsxRuntime.jsx(jsxRuntime.Fragment,{children:C({textProps:M,iconProps:A})}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[W||H?jsxRuntime.jsxs(style.ContentWithStatus,{children:[jsxRuntime.jsx(Slot.Slot,W?{render:z,props:U,fallback:jsxRuntime.jsx(Icon.Icon,{...A,...a,icon:jsxRuntime.jsx(index.CheckFill,{})})}:{render:f,props:$,fallback:jsxRuntime.jsx(style.IconAnimation,{children:jsxRuntime.jsx(Icon.Icon,{...A,...a,icon:jsxRuntime.jsx(index$1.LoaderFill,{})})})}),c?Y:null]}):null,jsxRuntime.jsxs(style.Content,{"aria-hidden":W||H,children:[jsxRuntime.jsx(Slot.Slot,{render:h,props:{iconProps:A},fallback:O?jsxRuntime.jsx(Icon.Icon,{className:"icon",name:typeof O=='string'?O:void 0,icon:typeof O!='string'?O:void 0,...A,...a,...u}):null}),Y,jsxRuntime.jsx(Slot.Slot,{render:R,props:{iconProps:A},fallback:w?jsxRuntime.jsx(Icon.Icon,{className:"icon",name:typeof w=='string'?w:void 0,icon:typeof w!='string'?w:void 0,...A,...a,...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 { deepmerge } from 'shared/utils/misc'\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 textSizes = {},\n iconSizes = {},\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: deepmerge(restProps.preset === 'brand' ? SIZES_TEXT : SIZES_TEXT_DEFAULT, textSizes),\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n color: 'inherit',\n preset: restProps.preset,\n sizes: deepmerge(SIZES_ICON, iconSizes),\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","textSizes","iconSizes","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","deepmerge","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":"8nBA0BA,MAAMA,OAAuDC,gBAAAA,gBAC3DC,MAAAA,WAAwD,CAACC,EAAOC,KAC9D,IAAIC,KACFA,EAAO,IAAGC,OACVA,GAAS,EAAIC,QACbA,GAAU,EAAIC,MACdA,EAAQ,SAAQC,UAChBA,EAAY,QAAOC,oBACnBA,EACAC,UAAWC,EAAgB,CAAA,EAC3BC,UAAWC,EAAgB,CAAA,EAAEC,cAC7BA,EAAgB,CAAA,EAAEC,eAClBA,EAAiB,CAAA,EAAEC,UACnBA,EAAY,CAAA,EAAEC,UACdA,EAAY,CAAA,EACZC,GAAIC,EAAGC,QACPA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,EAAMC,UACNA,EAASC,SACTA,EAAQC,QACRA,EAAOC,WACPA,EAAUC,KACVA,EAAIC,SACJA,KACGC,GACD9B,EAEJ,MAAM+B,EAAQC,OAAAA,WAEVF,EAAUG,SAAW,kBAAoB/B,GAAS,UAAa4B,EAAUI,QAE3EJ,EAAY,IADQK,aAAAA,cAAcjC,IAAiB,CAAA,KAClB4B,IAG/BA,EAAUM,OAAMnB,EAAM,KACtBa,EAAUO,KAAIpB,EAAMc,EAAMO,MAC1BR,EAAUS,WAAUtB,EAAM,UAE1Ba,EAAUU,UAASnC,EAAQ,WAC3ByB,EAAUW,YAAWpC,EAAQ,YAEjC,MAAMqC,EAAgBC,aAAAA,aArDH,SAqDgCnB,GACnD,MAAMoB,EAAgBD,aAAAA,aAtDH,UAuDnB,MAAME,EAAMC,MAAAA,eAAef,EAAOD,GAClC,MAAMiB,EAAYC,MAAAA,qBAAqB/B,EAAKa,GAE5C,IAAKmB,EAAQC,GAASC,MAAMC,QAAQxB,GAAQA,EAAO,CAACA,GAEpD,MAAMyB,EAAY,CAChBnD,OACAgB,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMf,EAAuB,IACxB6C,EACHrC,GAAI,OACJX,MAAO,UACPiD,OAAQ3B,IAAeG,EAAUG,SAAW,QAAU,IAAM,KAC5DsB,WAAYzB,EAAUG,SAAW,QAAU,IAAM,EACjDuB,MAAOC,KAAAA,UAAU3B,EAAUG,SAAW,QAAUyB,MAAAA,WAAaC,aAAAA,mBAAoB7C,IAGnF,MAAMJ,EAAuB,IACxB2C,EACHhD,MAAO,UACP4B,OAAQH,EAAUG,OAClBuB,MAAOC,KAAAA,UAAUG,MAAAA,WAAY7C,IAG/B,MAAM8C,EAAU/B,EAAUG,SAAW,SAAWH,EAAU+B,QAC1D,MAAMC,EAAUhC,EAAUG,SAAW,SAAWH,EAAUgC,QAE1D,MAAMC,SACGtC,GAAa,aAAeA,GAAYC,GAC7CsC,WAAAA,IAACC,UAAI,CAACzC,UAAW,GAAGoB,gBAA8BpC,KAAeC,EAAagB,SAC3EA,GAAYC,IAEb,KAEN,OACEsC,WAAAA,IAACE,MAAAA,KAAW,IACNpC,KACAiB,KACAM,EACJlD,OAAQA,EACRE,MAAOA,EACPC,UAAWA,EACXF,QAASA,EACTyC,IAAKA,EACL7B,GAAIC,EACJO,UAAWkB,EACXzC,IAAKA,GAAO4B,EAASJ,gBAEbA,GAAa,WACnBA,EAAS,CAAEjB,YAAWE,cAEtByD,WAAAA,KAAAC,oBAAA,CAAA3C,SAAA,CACGoC,GAAWC,EACVK,WAAAA,KAACD,MAAAA,kBAAwB,CAAAzC,SAAA,CACtBoC,EACCG,WAAAA,IAACK,UAAI,IAAK3D,KAAeC,EAAeiB,KAAMoC,WAAAA,IAACM,MAAAA,UAAS,CAAA,KAExDN,WAAAA,IAACE,oBAAoB,CAAAzC,SACnBuC,WAAAA,IAACK,UAAI,IAAK3D,KAAeC,EAAeiB,KAAMoC,WAAAA,IAACO,QAAAA,WAAU,CAAA,OAG5DhE,EAAsBwD,EAAc,QAErC,KACJI,WAAAA,KAACD,cAAc,CAAC,cAAaL,GAAWC,EAAQrC,SAAA,CAC7CwB,EACCe,WAAAA,IAACK,UAAI,CACH7C,UAAU,OACVgD,YAAavB,GAAW,SAAWA,OAASwB,EAC5C7C,YAAaqB,GAAW,SAAWA,OAASwB,KACxC/D,KACAC,KACAC,IAEJ,KACHmD,EACAb,EACCc,WAAAA,IAACK,KAAAA,KAAI,CACH7C,UAAU,OACVgD,YAAatB,GAAU,SAAWA,OAAQuB,EAC1C7C,YAAasB,GAAU,SAAWA,OAAQuB,KACtC/D,KACAC,KACAE,IAEJ,eAOhB,CACE6D,YA3JmB,SA4JnBlB,MAAQxD,IACN,IAAIwD,EAAQxD,EAAMiC,SAAW,QAAU0C,MAAAA,MAAQC,aAAAA,cAG/C,OAFI5E,EAAMkC,QAAOsB,EAAQxD,EAAMiC,SAAW,QAAU4C,MAAAA,YAAcC,aAAAA,qBAE3DtB,kHAhKU"}
|
|
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 { deepmerge } from 'shared/utils/misc'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport { Slot } from 'components/Slot'\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 textSizes = {},\n iconSizes = {},\n as: _as,\n root,\n text,\n addonLeft,\n addonRight,\n successIcon,\n loadingIcon,\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: deepmerge(restProps.preset === 'brand' ? SIZES_TEXT : SIZES_TEXT_DEFAULT, textSizes),\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n color: 'inherit',\n preset: restProps.preset,\n sizes: deepmerge(SIZES_ICON, iconSizes),\n }\n\n const successIconProps: IconProps = {\n ...iconProps,\n icon: <CheckFill />,\n }\n\n const loadingIconProps: IconProps = {\n ...iconProps,\n icon: <LoaderFill />,\n }\n\n const success = restProps.preset === 'brand' && restProps.success\n const loading = restProps.preset === 'brand' && restProps.loading\n\n const mainContent = (\n <Slot\n render={text}\n props={textProps}\n fallback={\n typeof children !== 'function' && (children || content) ? (\n <Text className={`${textClassName}__content`} {...textProps} {...textPropsProp}>\n {children || content}\n </Text>\n ) : null\n }\n />\n )\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 <Slot\n render={root}\n props={{\n textProps,\n iconProps,\n successIconProps,\n loadingIconProps,\n }}\n fallback={\n typeof children === 'function' ? (\n <>{children({ textProps, iconProps })}</>\n ) : (\n <>\n {success || loading ? (\n <Styled.ContentWithStatus>\n {success ? (\n <Slot\n render={successIcon}\n props={successIconProps}\n fallback={<Icon {...iconProps} {...iconPropsProp} icon={<CheckFill />} />}\n />\n ) : (\n <Slot\n render={loadingIcon}\n props={loadingIconProps}\n fallback={\n <Styled.IconAnimation>\n <Icon {...iconProps} {...iconPropsProp} icon={<LoaderFill />} />\n </Styled.IconAnimation>\n }\n />\n )}\n {showContentOnStatus ? mainContent : null}\n </Styled.ContentWithStatus>\n ) : null}\n <Styled.Content aria-hidden={success || loading}>\n <Slot\n render={addonLeft}\n props={{\n iconProps,\n }}\n fallback={\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 }\n />\n {mainContent}\n <Slot\n render={addonRight}\n props={{\n iconProps,\n }}\n fallback={\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 }\n />\n </Styled.Content>\n </>\n )\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","textSizes","iconSizes","as","_as","root","text","addonLeft","addonRight","successIcon","loadingIcon","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","deepmerge","SIZES_TEXT","SIZES_TEXT_DEFAULT","SIZES_ICON","successIconProps","_jsx","CheckFill","loadingIconProps","LoaderFill","success","loading","mainContent","Slot","render","fallback","Text","Styled","_Fragment","_jsxs","Icon","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{deepmerge}from'../../shared/utils/misc.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
|
|
1
|
+
import{forwardRef}from'react';import{useTheme}from'styled-components';import{useClassname}from'../../hooks/useClassname.mjs';import{deepmerge}from'../../shared/utils/misc.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,Fragment,jsxs}from'react/jsx-runtime';import{Slot}from'../Slot/Slot.mjs';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((o,e)=>{let{size:s="m",inline:t=!0,rounded:n=!0,color:r="accent",fontColor:i="white",showContentOnStatus:c,textProps:l={},iconProps:a={},leftIconProps:p={},rightIconProps:m={},textSizes:d={},iconSizes:S={},as:f,root:u,text:j,addonLeft:x,addonRight:I,successIcon:h,loadingIcon:E,sizeXXS:_,sizeXS:C,sizeS:P,sizeM:g,sizeL:T,sizeXL:z,className:N,children:Z,content:k,fontWeight:F,icon:L,innerRef:b,...y}=o;const R=useTheme();y.preset!=='default'||typeof s!='string'||y.round||(y={...PROPS_BY_SIZE[s]??{},...y}),y.href&&(f='a'),y.to&&(f=R.link),y.disabled&&(f='button'),y.primary&&(r='primary'),y.secondary&&(r='atlantis');const O=useClassname("Button",N);const A=useClassname("Button");const X=useComputedRel(R,y);const D=useComputedLinkProps(f,y);let[U,M]=Array.isArray(L)?L:[L];const w={size:s,sizeXXS:_,sizeXS:C,sizeS:P,sizeM:g,sizeL:T,sizeXL:z};const B={...w,as:'span',color:'inherit',weight:F??(y.preset==='brand'?800:600),lineHeight:y.preset==='brand'?1.2:1,sizes:deepmerge(y.preset==='brand'?SIZES_TEXT:SIZES_TEXT_DEFAULT,d)};const v={...w,color:'inherit',preset:y.preset,sizes:deepmerge(SIZES_ICON,S)};const W={...v,icon:jsx(CheckFill,{})};const Y={...v,icon:jsx(LoaderFill,{})};const H=y.preset==='brand'&&y.success;const $=y.preset==='brand'&&y.loading;const q=jsx(Slot,{render:j,props:B,fallback:typeof Z!='function'&&(Z||k)?jsx(Text,{className:`${A}__content`,...B,...l,children:Z||k}):null});return jsx(Root,{...y,...D,...w,inline:t,color:r,fontColor:i,rounded:n,rel:X,as:f,className:O,ref:e??b,children:jsx(Slot,{render:u,props:{textProps:B,iconProps:v,successIconProps:W,loadingIconProps:Y},fallback:typeof Z=='function'?jsx(Fragment,{children:Z({textProps:B,iconProps:v})}):jsxs(Fragment,{children:[H||$?jsxs(ContentWithStatus,{children:[jsx(Slot,H?{render:h,props:W,fallback:jsx(Icon,{...v,...a,icon:jsx(CheckFill,{})})}:{render:E,props:Y,fallback:jsx(IconAnimation,{children:jsx(Icon,{...v,...a,icon:jsx(LoaderFill,{})})})}),c?q:null]}):null,jsxs(Content,{"aria-hidden":H||$,children:[jsx(Slot,{render:x,props:{iconProps:v},fallback:U?jsx(Icon,{className:"icon",name:typeof U=='string'?U:void 0,icon:typeof U!='string'?U:void 0,...v,...a,...p}):null}),q,jsx(Slot,{render:I,props:{iconProps:v},fallback:M?jsx(Icon,{className:"icon",name:typeof M=='string'?M:void 0,icon:typeof M!='string'?M:void 0,...v,...a,...m}):null})]})]})})})}),{displayName:"Button",sizes:o=>{let e=o.preset==='brand'?SIZES:SIZES_DEFAULT;return o.round&&(e=o.preset==='brand'?SIZES_ROUND:SIZES_ROUND_DEFAULT),e}});export{Button,COMPONENT_NAME,SIZES,SIZES_ROUND};
|
|
2
2
|
//# sourceMappingURL=Button.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","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 { deepmerge } from 'shared/utils/misc'\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 textSizes = {},\n iconSizes = {},\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: deepmerge(restProps.preset === 'brand' ? SIZES_TEXT : SIZES_TEXT_DEFAULT, textSizes),\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n color: 'inherit',\n preset: restProps.preset,\n sizes: deepmerge(SIZES_ICON, iconSizes),\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":["COMPONENT_NAME","Button","withMergedProps","forwardRef","props","ref","size","inline","rounded","color","fontColor","showContentOnStatus","textProps","textPropsProp","iconProps","iconPropsProp","leftIconProps","rightIconProps","textSizes","iconSizes","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","deepmerge","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
|
+
{"version":3,"file":"Button.mjs","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 { deepmerge } from 'shared/utils/misc'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport { Slot } from 'components/Slot'\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 textSizes = {},\n iconSizes = {},\n as: _as,\n root,\n text,\n addonLeft,\n addonRight,\n successIcon,\n loadingIcon,\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: deepmerge(restProps.preset === 'brand' ? SIZES_TEXT : SIZES_TEXT_DEFAULT, textSizes),\n }\n\n const iconProps: IconProps = {\n ...sizeProps,\n color: 'inherit',\n preset: restProps.preset,\n sizes: deepmerge(SIZES_ICON, iconSizes),\n }\n\n const successIconProps: IconProps = {\n ...iconProps,\n icon: <CheckFill />,\n }\n\n const loadingIconProps: IconProps = {\n ...iconProps,\n icon: <LoaderFill />,\n }\n\n const success = restProps.preset === 'brand' && restProps.success\n const loading = restProps.preset === 'brand' && restProps.loading\n\n const mainContent = (\n <Slot\n render={text}\n props={textProps}\n fallback={\n typeof children !== 'function' && (children || content) ? (\n <Text className={`${textClassName}__content`} {...textProps} {...textPropsProp}>\n {children || content}\n </Text>\n ) : null\n }\n />\n )\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 <Slot\n render={root}\n props={{\n textProps,\n iconProps,\n successIconProps,\n loadingIconProps,\n }}\n fallback={\n typeof children === 'function' ? (\n <>{children({ textProps, iconProps })}</>\n ) : (\n <>\n {success || loading ? (\n <Styled.ContentWithStatus>\n {success ? (\n <Slot\n render={successIcon}\n props={successIconProps}\n fallback={<Icon {...iconProps} {...iconPropsProp} icon={<CheckFill />} />}\n />\n ) : (\n <Slot\n render={loadingIcon}\n props={loadingIconProps}\n fallback={\n <Styled.IconAnimation>\n <Icon {...iconProps} {...iconPropsProp} icon={<LoaderFill />} />\n </Styled.IconAnimation>\n }\n />\n )}\n {showContentOnStatus ? mainContent : null}\n </Styled.ContentWithStatus>\n ) : null}\n <Styled.Content aria-hidden={success || loading}>\n <Slot\n render={addonLeft}\n props={{\n iconProps,\n }}\n fallback={\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 }\n />\n {mainContent}\n <Slot\n render={addonRight}\n props={{\n iconProps,\n }}\n fallback={\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 }\n />\n </Styled.Content>\n </>\n )\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":["COMPONENT_NAME","Button","withMergedProps","forwardRef","props","ref","size","inline","rounded","color","fontColor","showContentOnStatus","textProps","textPropsProp","iconProps","iconPropsProp","leftIconProps","rightIconProps","textSizes","iconSizes","as","_as","root","text","addonLeft","addonRight","successIcon","loadingIcon","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","deepmerge","SIZES_TEXT","SIZES_TEXT_DEFAULT","SIZES_ICON","successIconProps","_jsx","CheckFill","loadingIconProps","LoaderFill","success","loading","mainContent","Slot","render","fallback","Text","Styled","_Fragment","_jsxs","Icon","name","undefined","displayName","SIZES","SIZES_DEFAULT","SIZES_ROUND","SIZES_ROUND_DEFAULT"],"mappings":"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"}
|
package/dts/index.d.ts
CHANGED
|
@@ -1845,9 +1845,64 @@ ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
|
|
|
1845
1845
|
borderColorDisabled?: Color;
|
|
1846
1846
|
shadowColor?: Color;
|
|
1847
1847
|
};
|
|
1848
|
+
/**
|
|
1849
|
+
* Кастомный рутовый блок.
|
|
1850
|
+
*
|
|
1851
|
+
* Использование компонента только как контейнера.
|
|
1852
|
+
*
|
|
1853
|
+
* @slot
|
|
1854
|
+
* @default undefined */
|
|
1855
|
+
root?: React.ReactElement | ((props: {
|
|
1856
|
+
textProps: TextProps;
|
|
1857
|
+
iconProps: IconProps;
|
|
1858
|
+
successIconProps: IconProps;
|
|
1859
|
+
loadingIconProps: IconProps;
|
|
1860
|
+
}) => React.ReactNode);
|
|
1861
|
+
/**
|
|
1862
|
+
* Основной текстовый контент.
|
|
1863
|
+
*
|
|
1864
|
+
* Если передана строка или число используется встроенная типографика.
|
|
1865
|
+
*
|
|
1866
|
+
* @slot
|
|
1867
|
+
* @default undefined */
|
|
1868
|
+
text?: React.ReactNode | ((textProps: TextProps) => React.ReactNode);
|
|
1869
|
+
/**
|
|
1870
|
+
* Дополнительные элементы слева.
|
|
1871
|
+
*
|
|
1872
|
+
* @slot
|
|
1873
|
+
* @default undefined */
|
|
1874
|
+
addonLeft?: React.ReactElement | ((addonLeftProps: {
|
|
1875
|
+
iconProps: IconProps;
|
|
1876
|
+
}) => React.ReactNode);
|
|
1877
|
+
/**
|
|
1878
|
+
* Дополнительные элементы справа.
|
|
1879
|
+
*
|
|
1880
|
+
* @slot
|
|
1881
|
+
* @default undefined */
|
|
1882
|
+
addonRight?: React.ReactElement | ((addonRightProps: {
|
|
1883
|
+
iconProps: IconProps;
|
|
1884
|
+
}) => React.ReactNode);
|
|
1885
|
+
/**
|
|
1886
|
+
* Иконка для успешного состояния.
|
|
1887
|
+
*
|
|
1888
|
+
* По умолчанию используется checkFill.
|
|
1889
|
+
*
|
|
1890
|
+
* @slot
|
|
1891
|
+
* @default undefined */
|
|
1892
|
+
successIcon?: React.ReactElement | ((iconProps: IconProps) => React.ReactNode);
|
|
1893
|
+
/**
|
|
1894
|
+
* Иконка для состояния загрузки.
|
|
1895
|
+
*
|
|
1896
|
+
* По умолчанию используется loaderFill.
|
|
1897
|
+
*
|
|
1898
|
+
* @slot
|
|
1899
|
+
* @default undefined */
|
|
1900
|
+
loadingIcon?: React.ReactElement | ((iconProps: IconProps) => React.ReactNode);
|
|
1848
1901
|
/**
|
|
1849
1902
|
* Основной контент.
|
|
1850
1903
|
*
|
|
1904
|
+
* Вместо этого пропа можно использовать проп text.
|
|
1905
|
+
*
|
|
1851
1906
|
* @general
|
|
1852
1907
|
* @default undefined */
|
|
1853
1908
|
children?: React.ReactNode | ((rootProps: {
|
|
@@ -1861,13 +1916,15 @@ ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
|
|
|
1861
1916
|
* @default {} */
|
|
1862
1917
|
textProps?: TextProps;
|
|
1863
1918
|
/**
|
|
1864
|
-
* Отображение на
|
|
1919
|
+
* Отображение на одной линии с другими элементами.
|
|
1865
1920
|
*
|
|
1866
1921
|
* @default true */
|
|
1867
1922
|
inline?: boolean;
|
|
1868
1923
|
/**
|
|
1869
1924
|
* Иконки до и после основного контента.
|
|
1870
1925
|
*
|
|
1926
|
+
* Вместо этого пропа можно использовать пропы addonLeft, addonRight.
|
|
1927
|
+
*
|
|
1871
1928
|
* @general
|
|
1872
1929
|
* @default undefined */
|
|
1873
1930
|
icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foxford/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.130.0",
|
|
4
4
|
"description": "UI components and utilities",
|
|
5
5
|
"bugs": {
|
|
6
6
|
"url": "https://github.com/foxford/ui/issues"
|
|
@@ -60,6 +60,6 @@
|
|
|
60
60
|
"shared",
|
|
61
61
|
"theme"
|
|
62
62
|
],
|
|
63
|
-
"sha": "
|
|
63
|
+
"sha": "a23165f",
|
|
64
64
|
"scripts": {}
|
|
65
65
|
}
|