@foxford/ui 2.22.1 → 2.23.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/CountdownCircle.js +1 -1
- package/components/Alert/CountdownCircle.js.map +1 -1
- package/components/Anchor/Anchor.js +1 -1
- package/components/Anchor/Anchor.js.map +1 -1
- package/components/Button/Button.js +1 -1
- package/components/Button/Button.js.map +1 -1
- package/components/ContextMenu/Item.js +1 -1
- package/components/ContextMenu/Item.js.map +1 -1
- package/components/ContextMenu.Multilevel/Controls.js +1 -1
- package/components/ContextMenu.Multilevel/Controls.js.map +1 -1
- package/components/Icon/Icon.js +1 -1
- package/components/Icon/Icon.js.map +1 -1
- package/components/Icon/style.js +1 -1
- package/components/Icon/style.js.map +1 -1
- package/components/Progress.Circle/Progress.Circle.js +1 -1
- package/components/Progress.Circle/Progress.Circle.js.map +1 -1
- package/components/Text/Text.js +1 -1
- package/components/Text/Text.js.map +1 -1
- package/components/Text.Ellipse/Text.Ellipse.js +1 -1
- package/components/Text.Ellipse/Text.Ellipse.js.map +1 -1
- package/dts/index.d.ts +6 -10
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useState as r,useRef as e,useEffect as s}from'react';import{DefaultColorNames as t}from'../../theme/colors.js';import{Progress as a}from'../Progress/Progress.js';import{jsx as o}from'react/jsx-runtime';var
|
|
1
|
+
import{useState as r,useRef as e,useEffect as s}from'react';import{DefaultColorNames as t}from'../../theme/colors.js';import{Progress as a}from'../Progress/Progress.js';import{jsx as o}from'react/jsx-runtime';var l=l=>{var{className:c,color:n,isCompact:m,paused:i,timer:u}=l;var[p,f]=r(u);var v=e();return s((()=>()=>{v.current&&clearInterval(v.current)}),[]),s((()=>{i?clearInterval(v.current):v.current=setInterval((()=>{f((r=>r<=.05?(clearInterval(v.current),r):r-.05))}),50)}),[i]),o(a.Circle,{className:c,progress:p/u*100,progressStartAngle:0,resultColor:n,size:m?16:20,strokeBGColor:t.transparent,strokeLineWidth:1.5,children:Math.ceil(p)})};export{l as CountdownCircle};
|
|
2
2
|
//# sourceMappingURL=CountdownCircle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { DefaultColorNames } from 'theme/colors'\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, paused, timer }: CountdownCircleProps) => {\n const [countdown, setCountdown] = useState(timer)\n const intervalId = useRef<ReturnType<typeof setInterval>>()\n\n useEffect(() => {\n return () => {\n if (intervalId.current) {\n clearInterval(intervalId.current)\n }\n }\n }, [])\n\n useEffect(() => {\n if (paused) {\n clearInterval(intervalId.current)\n } else {\n intervalId.current = setInterval(() => {\n setCountdown((prevCountdown) => {\n if (prevCountdown <= progressRate) {\n clearInterval(intervalId.current)\n return prevCountdown\n }\n\n return prevCountdown - progressRate\n })\n }, progressRate * 1000)\n }\n }, [paused])\n\n const progress = (countdown / timer) * 100\n\n return (\n <Progress.Circle\n className={className}\n
|
|
1
|
+
{"version":3,"file":"CountdownCircle.js","sources":["../../../../src/components/Alert/CountdownCircle.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport { DefaultColorNames } from 'theme/colors'\nimport { Progress } from '../Progress'\n\nimport type { CountdownCircleProps } from './types'\n\nconst progressRate = 0.05\n\nconst CountdownCircle = ({ className, color, isCompact, paused, timer }: CountdownCircleProps) => {\n const [countdown, setCountdown] = useState(timer)\n const intervalId = useRef<ReturnType<typeof setInterval>>()\n\n useEffect(() => {\n return () => {\n if (intervalId.current) {\n clearInterval(intervalId.current)\n }\n }\n }, [])\n\n useEffect(() => {\n if (paused) {\n clearInterval(intervalId.current)\n } else {\n intervalId.current = setInterval(() => {\n setCountdown((prevCountdown) => {\n if (prevCountdown <= progressRate) {\n clearInterval(intervalId.current)\n return prevCountdown\n }\n\n return prevCountdown - progressRate\n })\n }, progressRate * 1000)\n }\n }, [paused])\n\n const progress = (countdown / timer) * 100\n\n return (\n <Progress.Circle\n className={className}\n progress={progress}\n progressStartAngle={0}\n resultColor={color}\n size={isCompact ? 16 : 20}\n strokeBGColor={DefaultColorNames.transparent}\n strokeLineWidth={1.5}\n >\n {Math.ceil(countdown)}\n </Progress.Circle>\n )\n}\n\nexport { CountdownCircle }\n"],"names":["CountdownCircle","_ref","className","color","isCompact","paused","timer","countdown","setCountdown","useState","intervalId","useRef","useEffect","current","clearInterval","setInterval","prevCountdown","progressRate","_jsx","Progress","Circle","progress","progressStartAngle","resultColor","size","strokeBGColor","DefaultColorNames","transparent","strokeLineWidth","children","Math","ceil"],"mappings":"iNASMA,IAAAA,EAAkBC,IAA0E,IAAzEC,UAAEA,EAAFC,MAAaA,EAAbC,UAAoBA,EAApBC,OAA+BA,EAA/BC,MAAuCA,GAAkCL,EAChG,IAAOM,EAAWC,GAAgBC,EAASH,GAC3C,IAAMI,EAAaC,IA6BnB,OA3BAC,OACS,KACDF,EAAWG,SACbC,cAAcJ,EAAWG,WAG5B,IAEHD,QACMP,EACFS,cAAcJ,EAAWG,SAEzBH,EAAWG,QAAUE,aAAAA,KACnBP,GAAcQ,GACRA,GApBO,KAqBTF,cAAcJ,EAAWG,SAClBG,GAGFA,EAzBI,QA2BZC,MAEJ,CAACZ,IAKFa,EAACC,EAASC,OAAV,CACElB,UAAWA,EACXmB,SALcd,EAAYD,EAAS,IAMnCgB,mBAAoB,EACpBC,YAAapB,EACbqB,KAAMpB,EAAY,GAAK,GACvBqB,cAAeC,EAAkBC,YACjCC,gBAAiB,IAPnBC,SASGC,KAAKC,KAAKxB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from'@babel/runtime/helpers/objectSpread2';import
|
|
1
|
+
import r from'@babel/runtime/helpers/objectSpread2';import o from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as e}from'react';import{Link as s}from'react-router-dom';import{useTheme as i}from'styled-components';import{withMergedProps as a}from'../../hocs/withMergedProps.js';import{useClassname as t}from'../../hooks/useClassname.js';import{Text as n}from'../Text/Text.js';import{Icon as m}from'../Icon/Icon.js';import'../Icon/icons.js';import{SIZES as c}from'./constants.js';import{Root as l}from'./style.js';import{jsx as p,jsxs as d,Fragment as h}from'react/jsx-runtime';var v=["size","autoRel","textProps","iconProps","icon","children","content"];var f='Anchor';var u=a(e(((e,a)=>{var c,f,u;var{size:j="inherit",autoRel:P=!0,textProps:b={},iconProps:x={},icon:g,children:y,content:A}=e,N=o(e,v);var T=i();var z=t("Anchor",N.className);var I=null===(c=T.utils)||void 0===c?void 0:c.relBuilder;var R=null!==(f=N.href)&&void 0!==f?f:N.to;var M=null!==(u=N.rel)&&void 0!==u?u:P&&I&&'string'==typeof R?I(R,N.target):void 0;var[w,C]=Array.isArray(g)?g:[g];var E={as:'span',size:'inherit',color:'inherit',underline:N.underline,marginLeft:w?'0.25em':void 0,marginRight:C?'0.25em':void 0};var S={as:'span',color:'inherit'};var k;return N.to&&(k=s),N.pseudo&&(k='div'),N.disabled&&(k='span'),N.as&&(k=N.as),p(l,r(r({},N),{},{ref:a,as:k,className:z,size:j,rel:M,"data-disabled":N.disabled,children:'function'==typeof y?y({baseTextProps:E,textProps:b,iconBaseProps:S,iconProps:x,icon:g}):'brand'===e.preset?d(h,{children:[w&&p(m,r(r({icon:w},S),x)),p(n,r(r(r({},E),b),{},{children:y||A})),C&&p(m,r(r({icon:C},S),x))]}):p(h,{children:y||A})}))})),{displayName:"Anchor",sizes:c});export{u as Anchor,f as COMPONENT_NAME};
|
|
2
2
|
//# sourceMappingURL=Anchor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { AnchorProps } from './types'\n\nconst COMPONENT_NAME = 'Anchor'\n\n/**\n *\n * Component accepts all \\<a\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [AnchorProps](https://github.com/foxford/ui/blob/master/src/components/Anchor/types.ts)\n */\nconst Anchor: React.ForwardRefExoticComponent<AnchorProps> = withMergedProps<AnchorProps, HTMLAnchorElement>(\n forwardRef((props, ref) => {\n const {\n size = 'inherit',\n autoRel = true,\n textProps = {},\n iconProps = {},\n icon,\n children,\n content,\n ...restProps\n } = props\n\n const
|
|
1
|
+
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport type { IconProps } from 'components/Icon'\nimport { SIZES } from './constants'\nimport * as Styled from './style'\nimport type { AnchorProps } from './types'\n\nconst COMPONENT_NAME = 'Anchor'\n\n/**\n *\n * Component accepts all \\<a\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [AnchorProps](https://github.com/foxford/ui/blob/master/src/components/Anchor/types.ts)\n */\nconst Anchor: React.ForwardRefExoticComponent<AnchorProps> = withMergedProps<AnchorProps, HTMLAnchorElement>(\n forwardRef((props, ref) => {\n const {\n size = 'inherit',\n autoRel = true,\n textProps = {},\n iconProps = {},\n icon,\n children,\n content,\n ...restProps\n } = props\n\n const theme = useTheme()\n\n const className = useClassname(COMPONENT_NAME, restProps.className)\n const relBuilder = theme.utils?.relBuilder\n const href = restProps.href ?? restProps.to\n\n const rel =\n restProps.rel ??\n (autoRel && relBuilder && typeof href === 'string' ? relBuilder(href, restProps.target) : undefined)\n\n const [before, after] = Array.isArray(icon) ? icon : [icon]\n\n const baseTextProps: TextProps = {\n as: 'span',\n size: 'inherit',\n color: 'inherit',\n underline: restProps.underline,\n marginLeft: before ? '0.25em' : undefined,\n marginRight: after ? '0.25em' : undefined,\n }\n\n const iconBaseProps: IconProps = { as: 'span', color: 'inherit' }\n\n let rootNode\n if (restProps.to) rootNode = Link\n if (restProps.pseudo) rootNode = 'div'\n if (restProps.disabled) rootNode = 'span'\n if (restProps.as) rootNode = restProps.as\n\n return (\n <Styled.Root\n {...restProps}\n ref={ref}\n as={rootNode}\n className={className}\n size={size}\n rel={rel}\n data-disabled={restProps.disabled}\n >\n {typeof children === 'function' ? (\n children({ baseTextProps, textProps, iconBaseProps, iconProps, icon })\n ) : props.preset === 'brand' ? (\n <>\n {before && <Icon icon={before} {...iconBaseProps} {...iconProps} />}\n <Text {...baseTextProps} {...textProps}>\n {children || content}\n </Text>\n {after && <Icon icon={after} {...iconBaseProps} {...iconProps} />}\n </>\n ) : (\n <>{children || content}</>\n )}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: SIZES,\n }\n)\n\nexport { Anchor, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Anchor","withMergedProps","forwardRef","props","ref","_theme$utils","_restProps$href","_restProps$rel","size","autoRel","textProps","iconProps","icon","children","content","restProps","_excluded","theme","useTheme","className","useClassname","relBuilder","utils","href","to","rel","target","before","after","Array","isArray","baseTextProps","as","color","underline","marginLeft","marginRight","undefined","iconBaseProps","rootNode","Link","pseudo","disabled","_jsx","Styled.Root","preset","_jsxs","_Fragment","Icon","_objectSpread","Text","displayName","sizes","SIZES"],"mappings":"kqBAaMA,IAAAA,EAAiB,SAYjBC,IAAAA,EAAuDC,EAC3DC,GAAAA,CAAYC,EAAOC,KAAQ,IAAAC,EAAAC,EAAAC,EACzB,IAAMC,KACJA,EAAO,UADHC,QAEJA,GAAAA,EAFIC,UAGJA,EAAY,GAHRC,UAIJA,EAAY,GAJRC,KAKJA,EALIC,SAMJA,EANIC,QAOJA,GAEEX,EADCY,IACDZ,EATJa,GAWA,IAAMC,EAAQC,IAEd,IAAMC,EAAYC,EA3BC,SA2B4BL,EAAUI,WACzD,IAAME,EAAU,QAAGJ,EAAAA,EAAMK,aAAT,IAAAjB,OAAA,EAAGA,EAAagB,WAChC,IAAME,EAAyBR,UAAlBA,EAAUQ,YAAQR,IAAAA,EAAAA,EAAAA,EAAUS,GAEzC,IAAMC,UACJV,EAAAA,EAAUU,WAAAA,QACThB,GAAWY,GAA8B,iBAATE,EAAoBF,EAAWE,EAAMR,EAAUW,aAAAA,EAElF,IAAOC,EAAQC,GAASC,MAAMC,QAAQlB,GAAQA,EAAO,CAACA,GAEtD,IAAMmB,EAA2B,CAC/BC,GAAI,OACJxB,KAAM,UACNyB,MAAO,UACPC,UAAWnB,EAAUmB,UACrBC,WAAYR,EAAS,cAAA,EACrBS,YAAaR,EAAQ,cAAWS,GAGlC,IAAMC,EAA2B,CAAEN,GAAI,OAAQC,MAAO,WAEtD,IAAIM,EAMJ,OALIxB,EAAUS,KAAIe,EAAWC,GACzBzB,EAAU0B,SAAQF,EAAW,OAC7BxB,EAAU2B,WAAUH,EAAW,QAC/BxB,EAAUiB,KAAIO,EAAWxB,EAAUiB,IAGrCW,EAACC,SACK7B,GADN,GAAA,CAEEX,IAAKA,EACL4B,GAAIO,EACJpB,UAAWA,EACXX,KAAMA,EACNiB,IAAKA,EACL,gBAAeV,EAAU2B,SAP3B7B,SASuB,mBAAbA,EACNA,EAAS,CAAEkB,cAAAA,EAAerB,UAAAA,EAAW4B,cAAAA,EAAe3B,UAAAA,EAAWC,KAAAA,IAC5C,UAAjBT,EAAM0C,OACRC,EAAAC,EAAA,CAAAlC,SACGc,CAAAA,GAAUgB,EAACK,EAADC,EAAAA,EAAA,CAAMrC,KAAMe,GAAYW,GAAmB3B,IACtDgC,EAACO,EAADD,EAAAA,EAAAA,EAAA,GAAUlB,GAAmBrB,GAA7B,GAAA,CAAAG,SACGA,GAAYC,KAEdc,GAASe,EAACK,EAADC,EAAAA,EAAA,CAAMrC,KAAMgB,GAAWU,GAAmB3B,OAGtDgC,EAAAI,EAAA,CAAAlC,SAAGA,GAAYC,UAKvB,CACEqC,YAjFmB,SAkFnBC,MAAOC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from'@babel/runtime/helpers/objectSpread2';import o from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as e}from'react';import{useTheme as s}from'styled-components';import{Link as t}from'react-router-dom';import{useClassname as a}from'../../hooks/useClassname.js';import{withMergedProps as n}from'../../hocs/withMergedProps.js';import{Icon as i}from'../Icon/Icon.js';import'../Icon/icons.js';import{Text as m}from'../Text/Text.js';import{useComputedRel as c,useComputedLinkProps as l}from'./hooks.js';import{SIZES as p,SIZES_ROUND as d}from'./constants.js';import{SIZES_DEFAULT as u,SIZES_ROUND_DEFAULT as f,PROPS_BY_SIZE as h}from'./default-constants.js';import v from'./images/success.module.svg.js';import{Root as j,LoaderIcon as P}from'./style.js';import{jsx as g,jsxs as b,Fragment as N}from'react/jsx-runtime';var x=["size","inline","rounded","color","fontColor","textProps","iconProps","as","className","children","content","fontWeight","icon","innerRef"];var S='Button';var y=n(e(((e,n)=>{var{size:p="m",inline:d=!0,rounded:u=!0,color:f="accent",fontColor:S="white",textProps:y={},iconProps:I={},as:E,className:R,children:_,content:C,fontWeight:T,icon:B,innerRef:L}=e,w=o(e,x);var z=s();if('default'===w.preset&&'string'==typeof p&&!w.round){var A;var O=null!==(A=h[p])&&void 0!==A?A:{};w=r(r({},O),w)}w.href&&(E='a'),w.to&&(E=t),w.primary&&(f='primary'),w.secondary&&(f='atlantis');var Z=a("Button",R);var k=a("Button");var D=c(z,w);var M=l(E,w);var[U,F]=Array.isArray(B)?B:[B];w.success&&(U=g(v,{}),F=null),'brand'===w.preset&&w.loading&&(U=g(P,{}),F=null);var W={as:'span',size:'inherit',color:'inherit',weight:null!=T?T:'brand'===w.preset?800:600,lineHeight:'brand'===w.preset?1.2:1,marginLeft:U?'0.25em':void 0,marginRight:F?'0.25em':void 0};var H={as:'span',color:'inherit'};return g(j,r(r(r({},w),M),{},{size:p,inline:d,color:f,fontColor:S,rounded:u,rel:D,as:E,className:Z,ref:null!=n?n:L,children:'function'==typeof _?_({baseTextProps:W,textProps:y,iconBaseProps:H,iconProps:I,icon:[U,F]}):b(N,{children:[U&&g(i,r(r({className:"icon",icon:U},H),I)),(C
|
|
1
|
+
import r from'@babel/runtime/helpers/objectSpread2';import o from'@babel/runtime/helpers/objectWithoutProperties';import{forwardRef as e}from'react';import{useTheme as s}from'styled-components';import{Link as t}from'react-router-dom';import{useClassname as a}from'../../hooks/useClassname.js';import{withMergedProps as n}from'../../hocs/withMergedProps.js';import{Icon as i}from'../Icon/Icon.js';import'../Icon/icons.js';import{Text as m}from'../Text/Text.js';import{useComputedRel as c,useComputedLinkProps as l}from'./hooks.js';import{SIZES as p,SIZES_ROUND as d}from'./constants.js';import{SIZES_DEFAULT as u,SIZES_ROUND_DEFAULT as f,PROPS_BY_SIZE as h}from'./default-constants.js';import v from'./images/success.module.svg.js';import{Root as j,LoaderIcon as P}from'./style.js';import{jsx as g,jsxs as b,Fragment as N}from'react/jsx-runtime';var x=["size","inline","rounded","color","fontColor","textProps","iconProps","as","className","children","content","fontWeight","icon","innerRef"];var S='Button';var y=n(e(((e,n)=>{var{size:p="m",inline:d=!0,rounded:u=!0,color:f="accent",fontColor:S="white",textProps:y={},iconProps:I={},as:E,className:R,children:_,content:C,fontWeight:T,icon:B,innerRef:L}=e,w=o(e,x);var z=s();if('default'===w.preset&&'string'==typeof p&&!w.round){var A;var O=null!==(A=h[p])&&void 0!==A?A:{};w=r(r({},O),w)}w.href&&(E='a'),w.to&&(E=t),w.primary&&(f='primary'),w.secondary&&(f='atlantis');var Z=a("Button",R);var k=a("Button");var D=c(z,w);var M=l(E,w);var[U,F]=Array.isArray(B)?B:[B];w.success&&(U=g(v,{}),F=null),'brand'===w.preset&&w.loading&&(U=g(P,{}),F=null);var W={as:'span',size:'inherit',color:'inherit',weight:null!=T?T:'brand'===w.preset?800:600,lineHeight:'brand'===w.preset?1.2:1,marginLeft:U?'0.25em':void 0,marginRight:F?'0.25em':void 0};var H={as:'span',color:'inherit'};return g(j,r(r(r({},w),M),{},{size:p,inline:d,color:f,fontColor:S,rounded:u,rel:D,as:E,className:Z,ref:null!=n?n:L,children:'function'==typeof _?_({baseTextProps:W,textProps:y,iconBaseProps:H,iconProps:I,icon:[U,F]}):b(N,{children:[U&&g(i,r(r({className:"icon",icon:U},H),I)),(_||C)&&g(m,r(r(r({className:"".concat(k,"__content")},W),y),{},{children:_||C})),F&&g(i,r(r({className:"icon",icon:F},H),I))]})}))})),{displayName:"Button",sizes:r=>{var o='brand'===r.preset?p:u;return r.round&&(o='brand'===r.preset?d:f),o}});export{y as Button,S as COMPONENT_NAME};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { Link } from 'react-router-dom'\nimport { useClassname } from 'hooks/useClassname'\nimport { withMergedProps } 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 } from './constants'\nimport { SIZES_DEFAULT, SIZES_ROUND_DEFAULT, PROPS_BY_SIZE } from './default-constants'\nimport SuccessIcon from './images/success.module.svg'\nimport type { ButtonProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Button'\n\n/**\n *\n * Component accepts all \\<button\\> attributes.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [ButtonProps](https://github.com/foxford/ui/blob/master/src/components/Button/types.ts)\n */\nconst Button: React.ForwardRefExoticComponent<ButtonProps> = withMergedProps<ButtonProps, HTMLButtonElement>(\n forwardRef((props, ref) => {\n let {\n size = 'm',\n inline = true,\n rounded = true,\n color = 'accent',\n fontColor = 'white',\n textProps = {},\n iconProps = {},\n as: _as,\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] ?? {}\n restProps = { ...propsBySize, ...restProps }\n }\n\n if (restProps.href) _as = 'a'\n if (restProps.to) _as = Link\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 if (restProps.success) {\n before = <SuccessIcon />\n after = null\n }\n\n if (restProps.preset === 'brand' && restProps.loading) {\n before = <Styled.LoaderIcon />\n after = null\n }\n\n const baseTextProps: TextProps = {\n as: 'span',\n size: 'inherit',\n color: 'inherit',\n weight: fontWeight ?? (restProps.preset === 'brand' ? 800 : 600),\n lineHeight: restProps.preset === 'brand' ? 1.2 : 1,\n marginLeft: before ? '0.25em' : undefined,\n marginRight: after ? '0.25em' : undefined,\n }\n\n const iconBaseProps: IconProps = { as: 'span', color: 'inherit' }\n\n return (\n <Styled.Root\n {...restProps}\n {...linkProps}\n size={size}\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({\n baseTextProps,\n textProps,\n iconBaseProps,\n iconProps,\n icon: [before, after],\n })\n ) : (\n <>\n {before && <Icon className='icon' icon={before} {...iconBaseProps} {...iconProps} />}\n {(
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { Link } from 'react-router-dom'\nimport { useClassname } from 'hooks/useClassname'\nimport { withMergedProps } 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 } from './constants'\nimport { SIZES_DEFAULT, SIZES_ROUND_DEFAULT, PROPS_BY_SIZE } from './default-constants'\nimport SuccessIcon from './images/success.module.svg'\nimport type { ButtonProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Button'\n\n/**\n *\n * Component accepts all \\<button\\> attributes.\n *\n * Responsive \"size\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [ButtonProps](https://github.com/foxford/ui/blob/master/src/components/Button/types.ts)\n */\nconst Button: React.ForwardRefExoticComponent<ButtonProps> = withMergedProps<ButtonProps, HTMLButtonElement>(\n forwardRef((props, ref) => {\n let {\n size = 'm',\n inline = true,\n rounded = true,\n color = 'accent',\n fontColor = 'white',\n textProps = {},\n iconProps = {},\n as: _as,\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] ?? {}\n restProps = { ...propsBySize, ...restProps }\n }\n\n if (restProps.href) _as = 'a'\n if (restProps.to) _as = Link\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 if (restProps.success) {\n before = <SuccessIcon />\n after = null\n }\n\n if (restProps.preset === 'brand' && restProps.loading) {\n before = <Styled.LoaderIcon />\n after = null\n }\n\n const baseTextProps: TextProps = {\n as: 'span',\n size: 'inherit',\n color: 'inherit',\n weight: fontWeight ?? (restProps.preset === 'brand' ? 800 : 600),\n lineHeight: restProps.preset === 'brand' ? 1.2 : 1,\n marginLeft: before ? '0.25em' : undefined,\n marginRight: after ? '0.25em' : undefined,\n }\n\n const iconBaseProps: IconProps = { as: 'span', color: 'inherit' }\n\n return (\n <Styled.Root\n {...restProps}\n {...linkProps}\n size={size}\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({\n baseTextProps,\n textProps,\n iconBaseProps,\n iconProps,\n icon: [before, after],\n })\n ) : (\n <>\n {before && <Icon className='icon' icon={before} {...iconBaseProps} {...iconProps} />}\n {(children || content) && (\n <Text className={`${textClassName}__content`} {...baseTextProps} {...textProps}>\n {children || content}\n </Text>\n )}\n {after && <Icon className='icon' icon={after} {...iconBaseProps} {...iconProps} />}\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 }\n\nexport type { ButtonProps }\n"],"names":["COMPONENT_NAME","Button","withMergedProps","forwardRef","props","ref","size","inline","rounded","color","fontColor","textProps","iconProps","as","_as","className","children","content","fontWeight","icon","innerRef","restProps","_excluded","theme","useTheme","preset","round","_PROPS_BY_SIZE$size","propsBySize","PROPS_BY_SIZE","href","to","Link","primary","secondary","rootClassName","useClassname","textClassName","rel","useComputedRel","linkProps","useComputedLinkProps","before","after","Array","isArray","success","_jsx","SuccessIcon","loading","Styled.LoaderIcon","baseTextProps","weight","lineHeight","marginLeft","marginRight","iconBaseProps","Styled.Root","_jsxs","_Fragment","Icon","_objectSpread","Text","displayName","sizes","SIZES","SIZES_DEFAULT","SIZES_ROUND","SIZES_ROUND_DEFAULT"],"mappings":"g+BAgBMA,IAAAA,EAAiB,SAYjBC,IAAAA,EAAuDC,EAC3DC,GAAW,CAACC,EAAOC,KACjB,IAAIC,KACFA,EAAO,IADLC,OAEFA,GAAAA,EAFEC,QAGFA,GAAAA,EAHEC,MAIFA,EAAQ,SAJNC,UAKFA,EAAY,QALVC,UAMFA,EAAY,GANVC,UAOFA,EAAY,GACZC,GAAIC,EARFC,UASFA,EATEC,SAUFA,EAVEC,QAWFA,EAXEC,WAYFA,EAZEC,KAaFA,EAbEC,SAcFA,GAEEhB,EADCiB,IACDjB,EAhBJkB,GAkBA,IAAMC,EAAQC,IAEd,GAAyB,YAArBH,EAAUI,QAAwC,iBAATnB,IAAsBe,EAAUK,MAAO,CAAA,IAAAC,EAClF,IAAMC,UAAcC,EAAAA,EAAcvB,kBAAS,GAC3Ce,EAAiBO,EAAAA,EAAAA,GAAAA,GAAgBP,GAG/BA,EAAUS,OAAMhB,EAAM,KACtBO,EAAUU,KAAIjB,EAAMkB,GAEpBX,EAAUY,UAASxB,EAAQ,WAC3BY,EAAUa,YAAWzB,EAAQ,YAEjC,IAAM0B,EAAgBC,EA7CH,SA6CgCrB,GACnD,IAAMsB,EAAgBD,EA9CH,UA+CnB,IAAME,EAAMC,EAAehB,EAAOF,GAClC,IAAMmB,EAAYC,EAAqB3B,EAAKO,GAE5C,IAAKqB,EAAQC,GAASC,MAAMC,QAAQ1B,GAAQA,EAAO,CAACA,GAEhDE,EAAUyB,UACZJ,EAASK,EAACC,EAAV,IACAL,EAAQ,MAGe,UAArBtB,EAAUI,QAAsBJ,EAAU4B,UAC5CP,EAASK,EAACG,EAAV,IACAP,EAAQ,MAGV,IAAMQ,EAA2B,CAC/BtC,GAAI,OACJP,KAAM,UACNG,MAAO,UACP2C,OAAQlC,MAAAA,EAAAA,EAAoC,UAArBG,EAAUI,OAAqB,IAAM,IAC5D4B,WAAiC,UAArBhC,EAAUI,OAAqB,IAAM,EACjD6B,WAAYZ,EAAS,cAAA,EACrBa,YAAaZ,EAAQ,iBAGvB,IAAMa,EAA2B,CAAE3C,GAAI,OAAQJ,MAAO,WAEtD,OACEsC,EAACU,EACKpC,EAAAA,EAAAA,EAAAA,GAAAA,GACAmB,GAFN,GAAA,CAGElC,KAAMA,EACNC,OAAQA,EACRE,MAAOA,EACPC,UAAWA,EACXF,QAASA,EACT8B,IAAKA,EACLzB,GAAIC,EACJC,UAAWoB,EACX9B,IAAKA,MAAAA,EAAAA,EAAOe,EAXdJ,SAauB,mBAAbA,EACNA,EAAS,CACPmC,cAAAA,EACAxC,UAAAA,EACA6C,cAAAA,EACA5C,UAAAA,EACAO,KAAM,CAACuB,EAAQC,KAGjBe,EAAAC,EAAA,CAAA3C,SACG0B,CAAAA,GAAUK,EAACa,EAADC,EAAAA,EAAA,CAAM9C,UAAU,OAAOI,KAAMuB,GAAYc,GAAmB5C,KACrEI,GAAYC,IACZ8B,EAACe,EAADD,EAAAA,EAAAA,EAAA,CAAM9C,oBAAcsB,EAAL,cAAmCc,GAAmBxC,GAArE,GAAA,CAAAK,SACGA,GAAYC,KAGhB0B,GAASI,EAACa,EAADC,EAAAA,EAAA,CAAM9C,UAAU,OAAOI,KAAMwB,GAAWa,GAAmB5C,aAM/E,CACEmD,YA/GmB,SAgHnBC,MAAQ5D,IACN,IAAI4D,EAAyB,UAAjB5D,EAAMqB,OAAqBwC,EAAQC,EAG/C,OAFI9D,EAAMsB,QAAOsC,EAAyB,UAAjB5D,EAAMqB,OAAqB0C,EAAcC,GAE3DJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{DefaultColorNames as e}from'../../theme/colors.js';import{Text as t}from'../Text/Text.js';import{RootItem as s}from'./style.js';import{jsxs as a,jsx as o}from'react/jsx-runtime';var r=e=>(e.preventDefault(),e.preventDefault(),e.stopPropagation(),!1);function i(i){var{children:
|
|
1
|
+
import{DefaultColorNames as e}from'../../theme/colors.js';import{Text as t}from'../Text/Text.js';import{RootItem as s}from'./style.js';import{jsxs as a,jsx as o}from'react/jsx-runtime';var r=e=>(e.preventDefault(),e.preventDefault(),e.stopPropagation(),!1);function i(i){var{children:l,id:n,content:m,active:c,disabled:d,onClick:p,className:f,style:x}=i;return a(s,{style:x,className:f,active:c,disabled:d,onClick:d?r:p,"data-id":n,children:[l,o(t,{size:"s",lineHeight:"s",color:e.mineShaft,children:m})]})}i.displayName='ContextMenu.Item';export{i as ContextMenuItem};
|
|
2
2
|
//# sourceMappingURL=Item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.js","sources":["../../../../src/components/ContextMenu/Item.tsx"],"sourcesContent":["import { BaseProps } from 'shared/interfaces'\nimport { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nconst disabledHandler = (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault()\n e.preventDefault()\n e.stopPropagation()\n\n return false\n}\n\nexport interface ContextMenuItemProps extends BaseProps {\n /**\n * Children react node\n */\n children?: React.ReactNode\n content?: string\n active?: boolean\n disabled?: boolean\n onClick?: React.MouseEventHandler<HTMLDivElement>\n id?: string | number\n}\n\nContextMenuItem.displayName = 'ContextMenu.Item'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n */\nexport function ContextMenuItem({\n children,\n id,\n content,\n active,\n disabled,\n onClick,\n className,\n style,\n}: ContextMenuItemProps) {\n return (\n <Styled.RootItem\n style={style}\n className={className}\n active={active}\n disabled={disabled}\n onClick={disabled ? disabledHandler : onClick}\n data-id={id}\n >\n {children}\n <Text size='s' lineHeight='s' color={DefaultColorNames.mineShaft}
|
|
1
|
+
{"version":3,"file":"Item.js","sources":["../../../../src/components/ContextMenu/Item.tsx"],"sourcesContent":["import { BaseProps } from 'shared/interfaces'\nimport { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nconst disabledHandler = (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault()\n e.preventDefault()\n e.stopPropagation()\n\n return false\n}\n\nexport interface ContextMenuItemProps extends BaseProps {\n /**\n * Children react node\n */\n children?: React.ReactNode\n content?: string\n active?: boolean\n disabled?: boolean\n onClick?: React.MouseEventHandler<HTMLDivElement>\n id?: string | number\n}\n\nContextMenuItem.displayName = 'ContextMenu.Item'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n */\nexport function ContextMenuItem({\n children,\n id,\n content,\n active,\n disabled,\n onClick,\n className,\n style,\n}: ContextMenuItemProps) {\n return (\n <Styled.RootItem\n style={style}\n className={className}\n active={active}\n disabled={disabled}\n onClick={disabled ? disabledHandler : onClick}\n data-id={id}\n >\n {children}\n <Text size='s' lineHeight='s' color={DefaultColorNames.mineShaft}>\n {content}\n </Text>\n </Styled.RootItem>\n )\n}\n"],"names":["disabledHandler","e","preventDefault","stopPropagation","ContextMenuItem","_ref","children","id","content","active","disabled","onClick","className","style","_jsxs","Styled.RootItem","_jsx","Text","size","lineHeight","color","DefaultColorNames","mineShaft","displayName"],"mappings":"yLAKA,IAAMA,EAAmBC,IACvBA,EAAEC,iBACFD,EAAEC,iBACFD,EAAEE,mBAAAA,GAuBG,SAASC,EASSC,GAAA,IATOC,SAC9BA,EAD8BC,GAE9BA,EAF8BC,QAG9BA,EAH8BC,OAI9BA,EAJ8BC,SAK9BA,EAL8BC,QAM9BA,EAN8BC,UAO9BA,EAP8BC,MAQ9BA,GACuBR,EACvB,OACES,EAACC,EAAD,CACEF,MAAOA,EACPD,UAAWA,EACXH,OAAQA,EACRC,SAAUA,EACVC,QAASD,EAAWV,EAAkBW,EACtC,UAASJ,EANXD,SAQGA,CAAAA,EACDU,EAACC,EAAD,CAAMC,KAAK,IAAIC,WAAW,IAAIC,MAAOC,EAAkBC,UAAvDhB,SACGE,OA3BTJ,EAAgBmB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{DefaultColorNames as o}from'../../theme/colors.js';import{Text as e}from'../Text/Text.js';import{ControlsRoot as
|
|
1
|
+
import{DefaultColorNames as o}from'../../theme/colors.js';import{Text as e}from'../Text/Text.js';import{ControlsRoot as l,ControlsItem as s}from'./style.js';import{jsxs as r,jsx as t}from'react/jsx-runtime';function n(n){var{cancel:c,confirm:i,className:a,style:m}=n;return r(l,{className:a,style:m,children:[c?t(s,{className:"cancel",role:"button",onClick:c.onClick,children:t(e,{size:"m",lineHeight:"s",color:c.color||o.silver,children:c.content})}):null,i?t(s,{className:"confirm",role:"button",onClick:i.onClick,children:t(e,{size:"m",lineHeight:"s",color:i.color||o.accent,children:i.content})}):null]})}export{n as Controls};
|
|
2
2
|
//# sourceMappingURL=Controls.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Controls.js","sources":["../../../../src/components/ContextMenu.Multilevel/Controls.tsx"],"sourcesContent":["import { BaseProps } from 'shared/interfaces'\nimport { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport { MultiLevelControls } from './ContextMenu.Multilevel'\nimport * as Styled from './style'\n\nexport interface ControlsProps extends BaseProps {\n /** Cancel Text element props */\n cancel?: MultiLevelControls['cancel']\n /** Confirm Text element props */\n confirm?: MultiLevelControls['confirm']\n}\n\nexport function Controls({ cancel, confirm, className, style }: ControlsProps) {\n return (\n <Styled.ControlsRoot className={className} style={style}>\n {cancel ? (\n <Styled.ControlsItem className='cancel' role='button' onClick={cancel.onClick}>\n <Text size='m' lineHeight='s'
|
|
1
|
+
{"version":3,"file":"Controls.js","sources":["../../../../src/components/ContextMenu.Multilevel/Controls.tsx"],"sourcesContent":["import { BaseProps } from 'shared/interfaces'\nimport { DefaultColorNames } from 'theme/colors'\nimport { Text } from '../Text'\nimport { MultiLevelControls } from './ContextMenu.Multilevel'\nimport * as Styled from './style'\n\nexport interface ControlsProps extends BaseProps {\n /** Cancel Text element props */\n cancel?: MultiLevelControls['cancel']\n /** Confirm Text element props */\n confirm?: MultiLevelControls['confirm']\n}\n\nexport function Controls({ cancel, confirm, className, style }: ControlsProps) {\n return (\n <Styled.ControlsRoot className={className} style={style}>\n {cancel ? (\n <Styled.ControlsItem className='cancel' role='button' onClick={cancel.onClick}>\n <Text size='m' lineHeight='s' color={cancel.color || DefaultColorNames.silver}>\n {cancel.content}\n </Text>\n </Styled.ControlsItem>\n ) : null}\n {confirm ? (\n <Styled.ControlsItem className='confirm' role='button' onClick={confirm.onClick}>\n <Text size='m' lineHeight='s' color={confirm.color || DefaultColorNames.accent}>\n {confirm.content}\n </Text>\n </Styled.ControlsItem>\n ) : null}\n </Styled.ControlsRoot>\n )\n}\n"],"names":["Controls","_ref","cancel","confirm","className","style","_jsxs","Styled.ControlsRoot","children","_jsx","Styled.ControlsItem","role","onClick","Text","size","lineHeight","color","DefaultColorNames","silver","content","accent"],"mappings":"+MAaO,SAASA,EAA+DC,GAAA,IAAtDC,OAAEA,EAAFC,QAAUA,EAAVC,UAAmBA,EAAnBC,MAA8BA,GAAwBJ,EAC7E,OACEK,EAACC,EAAD,CAAqBH,UAAWA,EAAWC,MAAOA,EAAlDG,SAAA,CACGN,EACCO,EAACC,EAAD,CAAqBN,UAAU,SAASO,KAAK,SAASC,QAASV,EAAOU,QAAtEJ,SACEC,EAACI,EAAD,CAAMC,KAAK,IAAIC,WAAW,IAAIC,MAAOd,EAAOc,OAASC,EAAkBC,OAAvEV,SACGN,EAAOiB,YAGV,KACHhB,EACCM,EAACC,EAAD,CAAqBN,UAAU,UAAUO,KAAK,SAASC,QAAST,EAAQS,QAAxEJ,SACEC,EAACI,EAAD,CAAMC,KAAK,IAAIC,WAAW,IAAIC,MAAOb,EAAQa,OAASC,EAAkBG,OAAxEZ,SACGL,EAAQgB,YAGX"}
|
package/components/Icon/Icon.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useClassname as s}from'../../hooks/useClassname.js';import{Root as e}from'./style.js';import{defaultIcons as i}from'./icons.js';export{IconNames}from'./icons.js';import{jsxs as o,jsx as a}from'react/jsx-runtime';function
|
|
1
|
+
import{useClassname as s}from'../../hooks/useClassname.js';import{Root as e}from'./style.js';import{defaultIcons as i}from'./icons.js';export{IconNames}from'./icons.js';import{jsxs as o,jsx as a}from'react/jsx-runtime';function r(n){var{as:l,name:m,icon:t,pointer:c,color:z,size:p,sizeXS:f,sizeS:j,sizeM:u,sizeL:d,sizeXL:y,className:L,style:N,vAlign:S,children:X}=n;var v=s(r.displayName,L);return o(e,m&&i[m]?{as:l,vAlign:S,color:z,pointer:c,className:v,size:p,sizeXS:f,sizeS:j,sizeM:u,sizeL:d,sizeXL:y,style:N,children:[a(i[m],{}),X]}:{as:l,vAlign:S,color:z,pointer:c,className:v,size:p,sizeXS:f,sizeS:j,sizeM:u,sizeL:d,sizeXL:y,style:N,children:[t||null,X]})}r.displayName='Icon';export{r as Icon};
|
|
2
2
|
//# sourceMappingURL=Icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { ColorProperty } from 'mixins/color'\nimport { VAlign } from 'mixins/vAlign'\nimport { ResponsiveNamedProperty } from 'mixins/responsive-property'\nimport { BaseProps } from 'shared/interfaces'\nimport { useClassname } from 'hooks/useClassname'\nimport * as Styled from './style'\n\nimport { defaultIcons, IconNames } from './icons'\n\nexport interface IconProps extends BaseProps, ColorProperty, VAlign, ResponsiveNamedProperty<'size'> {\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Name of default icon\n */\n name?: keyof typeof IconNames\n /**\n * Object with icon's svg. Use for custom icon insertion
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { ColorProperty } from 'mixins/color'\nimport { VAlign } from 'mixins/vAlign'\nimport { ResponsiveNamedProperty } from 'mixins/responsive-property'\nimport { BaseProps } from 'shared/interfaces'\nimport { useClassname } from 'hooks/useClassname'\nimport * as Styled from './style'\n\nimport { defaultIcons, IconNames } from './icons'\n\nexport interface IconProps extends BaseProps, ColorProperty, VAlign, ResponsiveNamedProperty<'size'> {\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Name of default icon\n */\n name?: keyof typeof IconNames\n /**\n * Object with icon's svg. Use for custom icon insertion\n */\n icon?: React.ReactNode\n /**\n * Show pointer cursor on hover?\n */\n pointer?: boolean\n /** Root node polymorphic type */\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n as?: React.ElementType<any>\n}\n\nIcon.displayName = 'Icon'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`VAlign`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'fontColor'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport function Icon(props: IconProps) {\n const {\n as,\n name,\n icon,\n pointer,\n color,\n size,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n className,\n style,\n vAlign,\n children,\n } = props\n\n const _className = useClassname(Icon.displayName, className)\n\n if (name && defaultIcons[name]) {\n const Icon = defaultIcons[name]\n return (\n <Styled.Root\n as={as}\n vAlign={vAlign}\n color={color}\n pointer={pointer}\n className={_className}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n style={style}\n >\n <Icon />\n {children}\n </Styled.Root>\n )\n }\n\n return (\n <Styled.Root\n as={as}\n vAlign={vAlign}\n color={color}\n pointer={pointer}\n className={_className}\n size={size}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n style={style}\n >\n {icon || null}\n {children}\n </Styled.Root>\n )\n}\n\nexport { IconNames }\n"],"names":["Icon","props","as","name","icon","pointer","color","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","className","style","vAlign","children","_className","useClassname","displayName","_jsxs","Styled.Root","defaultIcons","_jsx"],"mappings":"2NAyCO,SAASA,EAAKC,GACnB,IAAMC,GACJA,EADIC,KAEJA,EAFIC,KAGJA,EAHIC,QAIJA,EAJIC,MAKJA,EALIC,KAMJA,EANIC,OAOJA,EAPIC,MAQJA,EARIC,MASJA,EATIC,MAUJA,EAVIC,OAWJA,EAXIC,UAYJA,EAZIC,MAaJA,EAbIC,OAcJA,EAdIC,SAeJA,GACEf,EAEJ,IAAMgB,EAAaC,EAAalB,EAAKmB,YAAaN,GAElD,OAGIO,EAACC,EAHDlB,GAAQmB,EAAanB,GAGrB,CACED,GAAIA,EACJa,OAAQA,EACRT,MAAOA,EACPD,QAASA,EACTQ,UAAWI,EACXV,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRE,MAAOA,EAZTE,SAAA,CAcEO,EAhBSD,EAAanB,GAExB,IAeGa,IAML,CACEd,GAAIA,EACJa,OAAQA,EACRT,MAAOA,EACPD,QAASA,EACTQ,UAAWI,EACXV,KAAMA,EACNC,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,EACRE,MAAOA,EAZTE,SAAA,CAcGZ,GAAQ,KACRY,KAtEPhB,EAAKmB,YAAc"}
|
package/components/Icon/style.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import i,{css as s}from'styled-components';import{vAlign as e}from'../../mixins/vAlign.js';import{color as o}from'../../mixins/color.js';import{property as r,responsiveNamedProperty as l}from'../../mixins/responsive-property.js';var n={xxxl:42,xxl:38,xl:34,lm:32,l:30,m:26,s:22,xs:18,xxs:14,xxxs:10};var t=s(["cursor:pointer;"]);var a=i=>'string'==typeof i?n[i]:i;var p=i.div.withConfig({shouldForwardProp:i=>['children','className','style'
|
|
1
|
+
import i,{css as s}from'styled-components';import{vAlign as e}from'../../mixins/vAlign.js';import{color as o}from'../../mixins/color.js';import{property as r,responsiveNamedProperty as l}from'../../mixins/responsive-property.js';var n={xxxl:42,xxl:38,xl:34,lm:32,l:30,m:26,s:22,xs:18,xxs:14,xxxs:10};var t=s(["cursor:pointer;"]);var a=i=>'string'==typeof i?n[i]:i;var p=i.div.withConfig({shouldForwardProp:i=>['children','className','style'].includes(i)}).withConfig({componentId:"fox-ui__sc-yfeniy-0"})(["display:inline-block;flex-shrink:0;vertical-align:baseline;width:1em;height:1em;svg{display:block;width:100%;height:100%;fill:currentColor;}"," "," "," "," ",""],(i=>i.pointer?t:null),(i=>i.vAlign?e(i.vAlign):null),(i=>i.color?o(i.color):null),(i=>i.size?r(a(i.size),'font-size'):null),(i=>{var{sizeXS:s,sizeS:e,sizeM:o,sizeL:r,sizeXL:n}=i;return l({sizes:{sizeXS:s,sizeS:e,sizeM:o,sizeL:r,sizeXL:n},cssProperty:'font-size',customSizeHandler:a})}));export{p as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Icon/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { vAlign } from 'mixins/vAlign'\nimport { color } from 'mixins/color'\nimport { responsiveNamedProperty, property } from 'mixins/responsive-property'\nimport { IconProps } from './Icon'\n\nconst SIZES = {\n xxxl: 42,\n xxl: 38,\n xl: 34,\n lm: 32,\n l: 30,\n m: 26,\n s: 22,\n xs: 18,\n xxs: 14,\n xxxs: 10,\n}\n\nconst pointerStyle = css`\n cursor: pointer;\n`\n\nconst calcFontSize = (size: IconProps['size']) => {\n return typeof size === 'string' ? SIZES[size] : size\n}\n\nexport const Root = styled.div.withConfig<IconProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style'
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Icon/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { vAlign } from 'mixins/vAlign'\nimport { color } from 'mixins/color'\nimport { responsiveNamedProperty, property } from 'mixins/responsive-property'\nimport { IconProps } from './Icon'\n\nconst SIZES = {\n xxxl: 42,\n xxl: 38,\n xl: 34,\n lm: 32,\n l: 30,\n m: 26,\n s: 22,\n xs: 18,\n xxs: 14,\n xxxs: 10,\n}\n\nconst pointerStyle = css`\n cursor: pointer;\n`\n\nconst calcFontSize = (size: IconProps['size']) => {\n return typeof size === 'string' ? SIZES[size] : size\n}\n\nexport const Root = styled.div.withConfig<IconProps>({\n shouldForwardProp: (prop) => ['children', 'className', 'style'].includes(prop),\n})`\n display: inline-block;\n flex-shrink: 0;\n vertical-align: baseline;\n width: 1em;\n height: 1em;\n svg {\n display: block;\n width: 100%;\n height: 100%;\n fill: currentColor;\n }\n ${(props) => (props.pointer ? pointerStyle : null)}\n ${(props) => (props.vAlign ? vAlign(props.vAlign) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n ${(props) => (props.size ? property(calcFontSize(props.size), 'font-size') : null)}\n ${({ sizeXS, sizeS, sizeM, sizeL, sizeXL }) =>\n responsiveNamedProperty({\n sizes: { sizeXS, sizeS, sizeM, sizeL, sizeXL },\n cssProperty: 'font-size',\n customSizeHandler: calcFontSize,\n })}\n`\n"],"names":["SIZES","xxxl","xxl","xl","lm","l","m","s","xs","xxs","xxxs","pointerStyle","css","calcFontSize","size","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","pointer","vAlign","color","property","_ref","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveNamedProperty","sizes","cssProperty","customSizeHandler"],"mappings":"qOAMA,IAAMA,EAAQ,CACZC,KAAM,GACNC,IAAK,GACLC,GAAI,GACJC,GAAI,GACJC,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,GACJC,IAAK,GACLC,KAAM,IAGR,IAAMC,EAAeC,EAArB,CAAA,oBAIA,IAAMC,EAAgBC,GACG,iBAATA,EAAoBd,EAAMc,GAAQA,EAG3C,IAAMC,EAAOC,EAAOC,IAAIC,WAAsB,CACnDC,kBAAoBC,GAAS,CAAC,WAAY,YAAa,SAASC,SAASD,KAD1DF,WAAA,CAAAI,YAAA,uBAAGN,CAcfO,CAAAA,+IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,KAAAA,GAAWA,EAAMC,QAAUb,EAAe,OAC1CY,GAAWA,EAAME,OAASA,EAAOF,EAAME,QAAU,OACjDF,GAAWA,EAAMG,MAAQA,EAAMH,EAAMG,OAAS,OAC9CH,GAAWA,EAAMT,KAAOa,EAASd,EAAaU,EAAMT,MAAO,aAAe,OAC3Ec,IAAA,IAACC,OAAEA,EAAFC,MAAUA,EAAVC,MAAiBA,EAAjBC,MAAwBA,EAAxBC,OAA+BA,GAAhCL,EAAA,OACAM,EAAwB,CACtBC,MAAO,CAAEN,OAAAA,EAAQC,MAAAA,EAAOC,MAAAA,EAAOC,MAAAA,EAAOC,OAAAA,GACtCG,YAAa,YACbC,kBAAmBxB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{PureComponent as r}from'react';import{Root as e,Content as s}from'./style.js';import{jsxs as t,jsx as o}from'react/jsx-runtime';function a(r,e,s,t){var o=(t-90)*Math.PI/180;return{x:r+s*Math.cos(o),y:e+s*Math.sin(o)}}function i(r,e,s,t,o,i){var n=arguments.length>5&&void 0!==i&&i;var c=a(r,e,s,o);var l=a(r,e,s,t);var d=o-t;var h=d<0?-d:d;var g=h<=180?'1':'0';var p=n?+!+g:g;return['M',c.x,c.y,'A',s,s,0,p,0,l.x,l.y].join(' ')}class n extends r{constructor(r){super(r),this.renderSvg=()=>{var{size:r,progress:e,strokeLineWidth:s,strokeBGWidth:t,progressStartAngle:o}=this.props;var a=s>t?s:t;var n=r/2+a/2;var c=o;var l=c-.5;var d=n-a/2;var h=n-a/2;var g=n-a;var p=c-l;var v=i(d,h,g,o,o-.5+ +e/100*360,!0);var u=i(d,h,g,c,l);this.setState({describeArcProgress:v,describeArcBg:u,bgAngleDiff:p<0?-p:p})},this.state={bgAngleDiff:0,describeArcProgress:null,describeArcBg:null}}componentDidMount(){this.renderSvg()}componentDidUpdate(r){var{progress:e,size:s}=this.props;var{progress:t,size:o}=r;e===t&&s===o||this.renderSvg()}render(){var{size:r,
|
|
1
|
+
import{PureComponent as r}from'react';import{Root as e,Content as s}from'./style.js';import{jsxs as t,jsx as o}from'react/jsx-runtime';function a(r,e,s,t){var o=(t-90)*Math.PI/180;return{x:r+s*Math.cos(o),y:e+s*Math.sin(o)}}function i(r,e,s,t,o,i){var n=arguments.length>5&&void 0!==i&&i;var c=a(r,e,s,o);var l=a(r,e,s,t);var d=o-t;var h=d<0?-d:d;var g=h<=180?'1':'0';var p=n?+!+g:g;return['M',c.x,c.y,'A',s,s,0,p,0,l.x,l.y].join(' ')}class n extends r{constructor(r){super(r),this.renderSvg=()=>{var{size:r,progress:e,strokeLineWidth:s,strokeBGWidth:t,progressStartAngle:o}=this.props;var a=s>t?s:t;var n=r/2+a/2;var c=o;var l=c-.5;var d=n-a/2;var h=n-a/2;var g=n-a;var p=c-l;var v=i(d,h,g,o,o-.5+ +e/100*360,!0);var u=i(d,h,g,c,l);this.setState({describeArcProgress:v,describeArcBg:u,bgAngleDiff:p<0?-p:p})},this.state={bgAngleDiff:0,describeArcProgress:null,describeArcBg:null}}componentDidMount(){this.renderSvg()}componentDidUpdate(r){var{progress:e,size:s}=this.props;var{progress:t,size:o}=r;e===t&&s===o||this.renderSvg()}render(){var{size:r,children:a,content:i,strokeLineWidth:n,strokeBGWidth:c,resultColor:l,strokeBGColor:d,status:h,progress:g,className:p,style:v}=this.props;var{bgAngleDiff:u,describeArcProgress:m,describeArcBg:f}=this.state;return t(e,{className:p,style:v,size:r,strokeBGColor:d,resultColor:l,status:h,children:[o("svg",{width:r,height:r,viewBox:"0 0 ".concat(r," ").concat(r),children:t("g",{className:'pathBox',children:[o("path",{className:"bg",d:u<360&&f?f:'',fill:"none",strokeWidth:c,strokeLinecap:"round"}),o("path",{className:"line",d:Boolean(+g)&&m?m:'',strokeWidth:n,strokeLinecap:"round"})]})}),(a||i)&&o(s,{children:a||i})]})}}n.displayName='Progress.Circle',n.defaultProps={size:84,progress:0,strokeLineWidth:2,strokeBGWidth:2,resultColor:'accent',progressStartAngle:180};export{n as ProgressCircle};
|
|
2
2
|
//# sourceMappingURL=Progress.Circle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.Circle.js","sources":["../../../../src/components/Progress.Circle/Progress.Circle.tsx"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport { PureComponent } from 'react'\nimport { ColorProperty } from 'mixins/color'\nimport { BaseProps } from 'shared/interfaces'\nimport * as Styled from './style'\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0\n\n return {\n x: centerX + radius * Math.cos(angleInRadians),\n y: centerY + radius * Math.sin(angleInRadians),\n }\n}\n\nfunction describeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, reverse = false) {\n const start = polarToCartesian(x, y, radius, endAngle)\n const end = polarToCartesian(x, y, radius, startAngle)\n\n const diff = endAngle - startAngle\n const angleDiff = diff < 0 ? -diff : diff\n\n const sweep = angleDiff <= 180 ? '1' : '0'\n const arcSweep = reverse ? +!+sweep : sweep\n\n return ['M', start.x, start.y, 'A', radius, radius, 0, arcSweep, 0, end.x, end.y].join(' ')\n}\n\nexport interface ProgressCircleProps extends BaseProps, ColorProperty<'resultColor'>, ColorProperty<'strokeBGColor'> {\n /**\n * status ['fail', 'success', 'started']\n */\n status?: 'fail' | 'success' | 'started'\n /**\n * progress percent\n */\n progress?: number\n /**\n * width and height\n */\n size?: number\n /**\n *
|
|
1
|
+
{"version":3,"file":"Progress.Circle.js","sources":["../../../../src/components/Progress.Circle/Progress.Circle.tsx"],"sourcesContent":["/* eslint-disable no-use-before-define */\nimport { PureComponent } from 'react'\nimport { ColorProperty } from 'mixins/color'\nimport { BaseProps } from 'shared/interfaces'\nimport * as Styled from './style'\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0\n\n return {\n x: centerX + radius * Math.cos(angleInRadians),\n y: centerY + radius * Math.sin(angleInRadians),\n }\n}\n\nfunction describeArc(x: number, y: number, radius: number, startAngle: number, endAngle: number, reverse = false) {\n const start = polarToCartesian(x, y, radius, endAngle)\n const end = polarToCartesian(x, y, radius, startAngle)\n\n const diff = endAngle - startAngle\n const angleDiff = diff < 0 ? -diff : diff\n\n const sweep = angleDiff <= 180 ? '1' : '0'\n const arcSweep = reverse ? +!+sweep : sweep\n\n return ['M', start.x, start.y, 'A', radius, radius, 0, arcSweep, 0, end.x, end.y].join(' ')\n}\n\nexport interface ProgressCircleProps extends BaseProps, ColorProperty<'resultColor'>, ColorProperty<'strokeBGColor'> {\n /**\n * status ['fail', 'success', 'started']\n */\n status?: 'fail' | 'success' | 'started'\n /**\n * progress percent\n */\n progress?: number\n /**\n * width and height\n */\n size?: number\n /**\n * React children\n */\n children?: React.ReactNode\n /**\n * width progress line\n */\n strokeLineWidth?: number\n /**\n * width background line\n */\n strokeBGWidth?: number\n /**\n * start angle of progress\n */\n progressStartAngle?: number\n /**\n * @ignore @deprecated Use children\n */\n content?: string | number\n}\n\ninterface ProgressCircleState {\n bgAngleDiff: number\n describeArcProgress: string | null\n describeArcBg: string | null\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color<'resultColor'>`](#/Миксины)\n * - [`Color<'strokeBGColor'>`](#/Миксины)\n */\nexport class ProgressCircle extends PureComponent<\n typeof ProgressCircle.defaultProps & ProgressCircleProps,\n ProgressCircleState\n> {\n static displayName = 'Progress.Circle'\n static defaultProps = {\n size: 84,\n progress: 0,\n strokeLineWidth: 2,\n strokeBGWidth: 2,\n resultColor: 'accent',\n progressStartAngle: 180,\n }\n\n constructor(props: typeof ProgressCircle.defaultProps & ProgressCircleProps) {\n super(props)\n this.state = {\n bgAngleDiff: 0,\n describeArcProgress: null,\n describeArcBg: null,\n }\n }\n\n componentDidMount() {\n this.renderSvg()\n }\n\n componentDidUpdate(prevProps: ProgressCircleProps) {\n const { progress, size } = this.props\n const { progress: prevProgress, size: prevSize } = prevProps\n\n if (progress !== prevProgress || size !== prevSize) {\n this.renderSvg()\n }\n }\n\n renderSvg = () => {\n const { size, progress, strokeLineWidth, strokeBGWidth, progressStartAngle } = this.props\n\n const thickness = strokeLineWidth > strokeBGWidth ? strokeLineWidth : strokeBGWidth\n\n const center = size / 2 + thickness / 2\n const progressGap = 0.5\n const progressEndAngle = progressStartAngle - progressGap + (+progress / 100) * 360\n const bgStartAngle = progressStartAngle\n const bgEndAngle = bgStartAngle - progressGap\n\n const centerX = center - thickness / 2\n const centerY = center - thickness / 2\n const radius = center - thickness\n const diff = bgStartAngle - bgEndAngle\n\n const describeArcProgress = describeArc(centerX, centerY, radius, progressStartAngle, progressEndAngle, true)\n\n const describeArcBg = describeArc(centerX, centerY, radius, bgStartAngle, bgEndAngle)\n\n const bgAngleDiff = diff < 0 ? -diff : diff\n\n this.setState({\n describeArcProgress,\n describeArcBg,\n bgAngleDiff,\n })\n }\n\n render() {\n const {\n size,\n children,\n content,\n strokeLineWidth,\n strokeBGWidth,\n resultColor,\n strokeBGColor,\n status,\n progress,\n className,\n style,\n } = this.props\n\n const { bgAngleDiff, describeArcProgress, describeArcBg } = this.state\n\n return (\n <Styled.Root\n className={className}\n style={style}\n size={size}\n strokeBGColor={strokeBGColor}\n resultColor={resultColor}\n status={status}\n >\n <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>\n <g className={'pathBox'}>\n <path\n className='bg'\n d={bgAngleDiff < 360 && describeArcBg ? describeArcBg : ''}\n fill='none'\n strokeWidth={strokeBGWidth}\n strokeLinecap='round'\n />\n <path\n className='line'\n d={Boolean(+progress) && describeArcProgress ? describeArcProgress : ''}\n strokeWidth={strokeLineWidth}\n strokeLinecap='round'\n />\n </g>\n </svg>\n {(children || content) && <Styled.Content>{children || content}</Styled.Content>}\n </Styled.Root>\n )\n }\n}\n"],"names":["polarToCartesian","centerX","centerY","radius","angleInDegrees","angleInRadians","Math","PI","x","cos","y","sin","describeArc","startAngle","endAngle","a","reverse","start","end","diff","angleDiff","sweep","arcSweep","join","ProgressCircle","PureComponent","constructor","props","super","this","renderSvg","size","progress","strokeLineWidth","strokeBGWidth","progressStartAngle","thickness","center","bgStartAngle","bgEndAngle","describeArcProgress","describeArcBg","setState","bgAngleDiff","state","componentDidMount","componentDidUpdate","prevProps","prevProgress","prevSize","render","children","content","resultColor","strokeBGColor","status","className","style","_jsxs","Styled.Root","_jsx","width","height","viewBox","d","fill","strokeWidth","strokeLinecap","Boolean","Styled.Content","displayName","defaultProps"],"mappings":"uIAMA,SAASA,EAAiBC,EAAiBC,EAAiBC,EAAgBC,GAC1E,IAAMC,GAAmBD,EAAiB,IAAME,KAAKC,GAAM,IAE3D,MAAO,CACLC,EAAGP,EAAUE,EAASG,KAAKG,IAAIJ,GAC/BK,EAAGR,EAAUC,EAASG,KAAKK,IAAIN,IAInC,SAASO,EAAYJ,EAAWE,EAAWP,EAAgBU,EAAoBC,EAA/EC,GAAkH,IAAjBC,+BAAjGD,GAAAA,EACE,IAAME,EAAQjB,EAAiBQ,EAAGE,EAAGP,EAAQW,GAC7C,IAAMI,EAAMlB,EAAiBQ,EAAGE,EAAGP,EAAQU,GAE3C,IAAMM,EAAOL,EAAWD,EACxB,IAAMO,EAAYD,EAAO,GAAKA,EAAOA,EAErC,IAAME,EAAQD,GAAa,IAAM,IAAM,IACvC,IAAME,EAAWN,KAAaK,EAAQA,EAEtC,MAAO,CAAC,IAAKJ,EAAMT,EAAGS,EAAMP,EAAG,IAAKP,EAAQA,EAAQ,EAAGmB,EAAU,EAAGJ,EAAIV,EAAGU,EAAIR,GAAGa,KAAK,KAkDlF,MAAMC,UAAuBC,EAclCC,YAAYC,GACVC,MAAMD,GADqEE,KAsB7EC,UAAY,KACV,IAAMC,KAAEA,EAAFC,SAAQA,EAARC,gBAAkBA,EAAlBC,cAAmCA,EAAnCC,mBAAkDA,GAAuBN,KAAKF,MAEpF,IAAMS,EAAYH,EAAkBC,EAAgBD,EAAkBC,EAEtE,IAAMG,EAASN,EAAO,EAAIK,EAAY,EAGtC,IAAME,EAAeH,EACrB,IAAMI,EAAaD,EAHC,GAKpB,IAAMrC,EAAUoC,EAASD,EAAY,EACrC,IAAMlC,EAAUmC,EAASD,EAAY,EACrC,IAAMjC,EAASkC,EAASD,EACxB,IAAMjB,EAAOmB,EAAeC,EAE5B,IAAMC,EAAsB5B,EAAYX,EAASC,EAASC,EAAQgC,EATzCA,EADL,KAC0CH,EAAW,IAAO,QAWhF,IAAMS,EAAgB7B,EAAYX,EAASC,EAASC,EAAQmC,EAAcC,GAI1EV,KAAKa,SAAS,CACZF,oBAAAA,EACAC,cAAAA,EACAE,YALkBxB,EAAO,GAAKA,EAAOA,KAxCvCU,KAAKe,MAAQ,CACXD,YAAa,EACbH,oBAAqB,KACrBC,cAAe,MAInBI,oBACEhB,KAAKC,YAGPgB,mBAAmBC,GACjB,IAAMf,SAAEA,EAAFD,KAAYA,GAASF,KAAKF,MAChC,IAAQK,SAAUgB,EAAcjB,KAAMkB,GAAaF,EAE/Cf,IAAagB,GAAgBjB,IAASkB,GACxCpB,KAAKC,YAiCToB,SACE,IAAMnB,KACJA,EADIoB,SAEJA,EAFIC,QAGJA,EAHInB,gBAIJA,EAJIC,cAKJA,EALImB,YAMJA,EANIC,cAOJA,EAPIC,OAQJA,EARIvB,SASJA,EATIwB,UAUJA,EAVIC,MAWJA,GACE5B,KAAKF,MAET,IAAMgB,YAAEA,EAAFH,oBAAeA,EAAfC,cAAoCA,GAAkBZ,KAAKe,MAEjE,OACEc,EAACC,EAAD,CACEH,UAAWA,EACXC,MAAOA,EACP1B,KAAMA,EACNuB,cAAeA,EACfD,YAAaA,EACbE,OAAQA,EANVJ,SAQE,CAAAS,EAAA,MAAA,CAAKC,MAAO9B,EAAM+B,OAAQ/B,EAAMgC,QAAgBhC,OAAAA,OAAAA,EAAQA,KAAAA,OAAAA,GAAxDoB,SACEO,EAAA,IAAA,CAAGF,UAAW,UAAdL,SACE,CAAAS,EAAA,OAAA,CACEJ,UAAU,KACVQ,EAAGrB,EAAc,KAAOF,EAAgBA,EAAgB,GACxDwB,KAAK,OACLC,YAAahC,EACbiC,cAAc,UAEhBP,EAAA,OAAA,CACEJ,UAAU,OACVQ,EAAGI,SAASpC,IAAaQ,EAAsBA,EAAsB,GACrE0B,YAAajC,EACbkC,cAAc,gBAIlBhB,GAAYC,IAAYQ,EAACS,EAAD,CAAAlB,SAAiBA,GAAYC,QA5GlD5B,EAIJ8C,YAAc,kBAJV9C,EAKJ+C,aAAe,CACpBxC,KAAM,GACNC,SAAU,EACVC,gBAAiB,EACjBC,cAAe,EACfmB,YAAa,SACblB,mBAAoB"}
|
package/components/Text/Text.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectWithoutProperties';import t from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r}from'react';import{withMergedProps as a}from'../../hocs/withMergedProps.js';import{useClassname as s}from'../../hooks/useClassname.js';import{TextHeading as i}from'../Text.Heading/Text.Heading.js';import{TextEllipse as o}from'../Text.Ellipse/Text.Ellipse.js';import{SIZES as n,APPEARANCE as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectWithoutProperties';import t from'@babel/runtime/helpers/objectSpread2';import{forwardRef as r}from'react';import{withMergedProps as a}from'../../hocs/withMergedProps.js';import{useClassname as s}from'../../hooks/useClassname.js';import{TextHeading as i}from'../Text.Heading/Text.Heading.js';import{TextEllipse as o}from'../Text.Ellipse/Text.Ellipse.js';import{SIZES as n,APPEARANCE as m}from'./constants.js';import{SIZES_DEFAULT as l}from'./default-constants.js';import{Root as p}from'./style.js';import{jsx as c}from'react/jsx-runtime';var f=["size","weight","lineHeight","fontStyle","className","content","children"];var h='Text';var d=Object.assign(a(r(((r,a)=>{var i=r.appearance?t(t({},m[r.appearance]),r):r;var{size:o="m",weight:n="normal",lineHeight:l="m",fontStyle:h="normal",className:d,content:g,children:x}=i,j=e(i,f);var T=s("Text",d);return c(p,t(t({},j),{},{size:o,weight:n,lineHeight:l,fontStyle:h,className:T,ref:a,children:x||g}))})),{displayName:"Text",sizes:e=>{var t;return'string'==typeof e.appearance&&null!==(t=n[e.appearance])&&void 0!==t?t:l}}),{Heading:i,Ellipse:o});export{h as COMPONENT_NAME,d as Text};
|
|
2
2
|
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from 'components/Text.Heading'\nimport { TextEllipse } from 'components/Text.Ellipse'\nimport type { TextProps } from './types'\nimport { APPEARANCE, SIZES } from './constants'\nimport { SIZES_DEFAULT } from './default-constants'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Text'\n\n/**\n *\n * Component accepts all \\<div\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [TextProps](https://github.com/foxford/ui/blob/master/src/components/Text/types.ts)\n */\nconst Text: React.ForwardRefExoticComponent<TextProps> & { Heading: typeof TextHeading; Ellipse: typeof TextEllipse } =\n Object.assign(\n withMergedProps<TextProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const textProps = props.appearance ? { ...APPEARANCE[props.appearance], ...props } : props\n\n const {\n size = 'm',\n weight = 'normal',\n lineHeight = 'm',\n fontStyle = 'normal',\n className,\n content,\n children,\n ...restProps\n } = textProps\n\n const textClassName = useClassname(COMPONENT_NAME, className)\n\n
|
|
1
|
+
{"version":3,"file":"Text.js","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { useClassname } from 'hooks/useClassname'\nimport { TextHeading } from 'components/Text.Heading'\nimport { TextEllipse } from 'components/Text.Ellipse'\nimport type { TextProps } from './types'\nimport { APPEARANCE, SIZES } from './constants'\nimport { SIZES_DEFAULT } from './default-constants'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'Text'\n\n/**\n *\n * Component accepts all \\<div\\> attributes.\n *\n * Responsive \"size\", \"margin\" props are supported.\n *\n * Exposed \"ref\" attached to root node.\n *\n * See full [TextProps](https://github.com/foxford/ui/blob/master/src/components/Text/types.ts)\n */\nconst Text: React.ForwardRefExoticComponent<TextProps> & { Heading: typeof TextHeading; Ellipse: typeof TextEllipse } =\n Object.assign(\n withMergedProps<TextProps, HTMLDivElement>(\n forwardRef((props, ref) => {\n const textProps = props.appearance ? { ...APPEARANCE[props.appearance], ...props } : props\n\n const {\n size = 'm',\n weight = 'normal',\n lineHeight = 'm',\n fontStyle = 'normal',\n className,\n content,\n children,\n ...restProps\n } = textProps\n\n const textClassName = useClassname(COMPONENT_NAME, className)\n\n return (\n <Styled.Root\n {...restProps}\n size={size}\n weight={weight}\n lineHeight={lineHeight}\n fontStyle={fontStyle}\n className={textClassName}\n ref={ref}\n >\n {children || content}\n </Styled.Root>\n )\n }),\n {\n displayName: COMPONENT_NAME,\n sizes: (props) => {\n if (typeof props.appearance === 'string') {\n return SIZES[props.appearance] ?? SIZES_DEFAULT\n }\n\n return SIZES_DEFAULT\n },\n }\n ),\n {\n Heading: TextHeading,\n Ellipse: TextEllipse,\n }\n )\n\nexport { Text, COMPONENT_NAME }\n"],"names":["COMPONENT_NAME","Text","Object","assign","withMergedProps","forwardRef","props","ref","textProps","appearance","APPEARANCE","size","weight","lineHeight","fontStyle","className","content","children","restProps","_excluded","textClassName","useClassname","_jsx","Styled.Root","displayName","sizes","_SIZES$props$appearan","SIZES","SIZES_DEFAULT","Heading","TextHeading","Ellipse","TextEllipse"],"mappings":"spBAUMA,IAAAA,EAAiB,OAYvB,IAAMC,EACJC,OAAOC,OACLC,EACEC,GAAW,CAACC,EAAOC,KACjB,IAAMC,EAAYF,EAAMG,WAAkBC,EAAAA,EAAAA,GAAAA,EAAWJ,EAAMG,aAAgBH,GAAUA,EAErF,IAAMK,KACJA,EAAO,IADHC,OAEJA,EAAS,SAFLC,WAGJA,EAAa,IAHTC,UAIJA,EAAY,SAJRC,UAKJA,EALIC,QAMJA,EANIC,SAOJA,GAEET,EADCU,IACDV,EATJW,GAWA,IAAMC,EAAgBC,EA7BP,OA6BoCN,GAEnD,OACEO,EAACC,SACKL,GADN,GAAA,CAEEP,KAAMA,EACNC,OAAQA,EACRC,WAAYA,EACZC,UAAWA,EACXC,UAAWK,EACXb,IAAKA,EAPPU,SASGA,GAAYD,QAInB,CACEQ,YA9Ce,OA+CfC,MAAQnB,IACoC,IAAAoB,EAA1C,MAAgC,iBAArBpB,EAAMG,oBACfiB,EAAOC,EAAMrB,EAAMG,2BAGdmB,KAIb,CACEC,QAASC,EACTC,QAASC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from'@babel/runtime/helpers/objectWithoutProperties';import t from'@babel/runtime/helpers/objectSpread2';import{Component as s}from'react';import{Spacer as i}from'../Spacer/Spacer.js';import{Anchor as r}from'../Anchor/Anchor.js';import{Text as o}from'../Text/Text.js';import{Ul as l,Li as a}from'./style.js';import{jsx as n,jsxs as p}from'react/jsx-runtime';var h=["className","style","moreText","lessText","showToggler"];class c extends s{constructor(e){super(e),this.getContent=e=>{var{content:s,chars:i=0}=this.props;if(!s)return'';var{isEllipsed:r}=this.state;var p='string'==typeof s?'':[];if(this.state.isUnFolded)p=s;else if('string'==typeof p)p=(r=0!==i&&s.length>i)&&0!==i?"".concat(s.slice(0,i),"..."):s;else{var h=i;for(var c=0;c<s.length;c++){if(!(h-s[c].length>0)){r=!0,p[c]="".concat(s[c].slice(0,h),"...");break}h-=s[c].length,p[c]=s[c]}}return this.state.isEllipsed!==r&&setTimeout((()=>this.setState({isEllipsed:r}))),'string'==typeof p?n(o,t(t({},e),{},{children:this.getQuted(p)})):n(l,{children:p.map(((s,i)=>n(a,{children:n(o,t(t({},e),{},{display:"inline",children:s}))},i)))})},this.getQuted=e=>this.props.quoted?"«".concat(e,"»"):e,this.toggle=()=>{this.setState({isUnFolded:!this.state.isUnFolded})},this.state={isUnFolded:!1,isEllipsed:!1}}componentDidUpdate(e){var{content:t}=e;t!==this.props.content&&this.state.isUnFolded&&this.toggle()}render(){var t=this.props,{className:s="",style:o,moreText:l="Читать полностью",lessText:a="Свернуть",showToggler:c=!0}=t,d=e(t,h);var{isUnFolded:m,isEllipsed:g}=this.state;return p("div",{className:s,style:o,children:[this.getContent(d),c&&g&&n(i,{marginTop:16,marginBottom:1,children:n(r,{pseudo:!0,onClick:this.toggle,children:m?a:l})})]})}}c.displayName='Text.Ellipse';export{c as TextEllipse};
|
|
2
2
|
//# sourceMappingURL=Text.Ellipse.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.Ellipse.js","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport type { TextProps } from 'components/Text'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /**
|
|
1
|
+
{"version":3,"file":"Text.Ellipse.js","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport type { TextProps } from 'components/Text'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /** Text content */\n content: string | string[]\n /** Characters quantity for ellipsed text */\n chars?: number\n /** Wrap text in quotes */\n quoted?: boolean\n /** Flag to show toggler */\n showToggler?: boolean\n}\n\ninterface TextEllipseState {\n isUnFolded: boolean\n isEllipsed: boolean\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {\n static displayName = 'Text.Ellipse'\n\n constructor(props: TextEllipseProps) {\n super(props)\n\n this.state = {\n isUnFolded: false,\n isEllipsed: false,\n }\n }\n\n componentDidUpdate({ content }: TextEllipseProps) {\n if (content !== this.props.content && this.state.isUnFolded) {\n this.toggle()\n }\n }\n\n getContent = (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler' | 'content'>) => {\n const { content, chars = 0 } = this.props\n\n if (!content) return ''\n\n let { isEllipsed } = this.state\n let text: string | string[] = typeof content === 'string' ? '' : []\n\n if (!this.state.isUnFolded) {\n if (typeof text === 'string') {\n isEllipsed = chars !== 0 && content.length > chars\n\n text = isEllipsed && chars !== 0 ? `${content.slice(0, chars)}...` : content\n } else {\n let leftChars = chars\n\n for (let index = 0; index < content.length; index++) {\n if (leftChars - content[index].length > 0) {\n leftChars -= content[index].length\n\n text[index] = content[index]\n } else {\n isEllipsed = true\n text[index] = `${content[index].slice(0, leftChars)}...`\n\n break\n }\n }\n }\n } else {\n text = content\n }\n\n if (this.state.isEllipsed !== isEllipsed) setTimeout(() => this.setState({ isEllipsed }))\n\n return typeof text === 'string' ? (\n <Text {...props}>{this.getQuted(text)}</Text>\n ) : (\n <Styled.Ul>\n {text.map((item, index) => (\n <Styled.Li key={index}>\n <Text {...props} display='inline'>\n {item}\n </Text>\n </Styled.Li>\n ))}\n </Styled.Ul>\n )\n }\n\n getQuted = (content: string) => (this.props.quoted ? `«${content}»` : content)\n\n toggle = () => {\n this.setState({ isUnFolded: !this.state.isUnFolded })\n }\n\n render() {\n const {\n className = '',\n style,\n moreText = 'Читать полностью',\n lessText = 'Свернуть',\n showToggler = true,\n ...restProps\n } = this.props\n const { isUnFolded, isEllipsed } = this.state\n\n return (\n <div className={className} style={style}>\n {this.getContent(restProps)}\n {showToggler && isEllipsed && (\n <Spacer marginTop={16} marginBottom={1}>\n <Anchor pseudo onClick={this.toggle}>\n {isUnFolded ? lessText : moreText}\n </Anchor>\n </Spacer>\n )}\n </div>\n )\n }\n}\n"],"names":["TextEllipse","Component","constructor","props","super","this","getContent","content","chars","isEllipsed","state","text","isUnFolded","length","slice","leftChars","index","concat","setTimeout","setState","_jsx","Text","children","getQuted","Styled.Ul","map","item","Styled.Li","_objectSpread","display","quoted","toggle","componentDidUpdate","_ref","render","_this$props","className","style","moreText","lessText","showToggler","restProps","_objectWithoutProperties","_excluded","_jsxs","Spacer","marginTop","marginBottom","Anchor","pseudo","onClick","displayName"],"mappings":"+aAoCO,MAAMA,UAAoBC,EAG/BC,YAAYC,GACVC,MAAMD,GAD6BE,KAerCC,WAAcH,IACZ,IAAMI,QAAEA,EAAFC,MAAWA,EAAQ,GAAMH,KAAKF,MAEpC,IAAKI,EAAS,MAAO,GAErB,IAAIE,WAAEA,GAAeJ,KAAKK,MAC1B,IAAIC,EAA6C,iBAAZJ,EAAuB,GAAK,GAEjE,GAAKF,KAAKK,MAAME,WAsBdD,EAAOJ,OArBP,GAAoB,iBAATI,EAGTA,GAFAF,EAAuB,IAAVD,GAAeD,EAAQM,OAASL,IAEd,IAAVA,EAAiBD,GAAAA,OAAAA,EAAQO,MAAM,EAAGN,UAAcD,MAChE,CACL,IAAIQ,EAAYP,EAEhB,IAAK,IAAIQ,EAAQ,EAAGA,EAAQT,EAAQM,OAAQG,IAAS,CACnD,KAAID,EAAYR,EAAQS,GAAOH,OAAS,GAIjC,CACLJ,KACAE,EAAKK,GAAL,GAAAC,OAAiBV,EAAQS,GAAOF,MAAM,EAAGC,GAAzC,OAEA,MAPAA,GAAaR,EAAQS,GAAOH,OAE5BF,EAAKK,GAAST,EAAQS,IAe9B,OAFIX,KAAKK,MAAMD,aAAeA,GAAYS,YAAAA,IAAiBb,KAAKc,SAAS,CAAEV,WAAAA,MAEpD,iBAATE,EACZS,EAACC,SAASlB,GAAV,GAAA,CAAAmB,SAAkBjB,KAAKkB,SAASZ,MAEhCS,EAACI,EAAD,CAAAF,SACGX,EAAKc,KAAAA,CAAKC,EAAMV,IACfI,EAACO,EAAD,CAAAL,SACEF,EAACC,EAADO,EAAAA,EAAA,GAAUzB,GAAV,GAAA,CAAiB0B,QAAQ,SAAzBP,SACGI,MAFWV,QAvDaX,KAiErCkB,SAAYhB,GAAqBF,KAAKF,MAAM2B,OAAX,IAAAb,OAAwBV,EAAxB,KAAqCA,EAjEjCF,KAmErC0B,OAAS,KACP1B,KAAKc,SAAS,CAAEP,YAAaP,KAAKK,MAAME,cAjExCP,KAAKK,MAAQ,CACXE,YAAAA,EACAH,YAAAA,GAIJuB,mBAAkDC,GAAA,IAA/B1B,QAAEA,GAA6B0B,EAC5C1B,IAAYF,KAAKF,MAAMI,SAAWF,KAAKK,MAAME,YAC/CP,KAAK0B,SA4DTG,SACE,IAAAC,EAOI9B,KAAKF,OAPHiC,UACJA,EAAY,GADRC,MAEJA,EAFIC,SAGJA,EAAW,mBAHPC,SAIJA,EAAW,WAJPC,YAKJA,GAAc,GALhBL,EAMKM,EANLC,EAAAP,EAAAQ,GAQA,IAAM/B,WAAEA,EAAFH,WAAcA,GAAeJ,KAAKK,MAExC,OACEkC,EAAA,MAAA,CAAKR,UAAWA,EAAWC,MAAOA,EAAlCf,SACG,CAAAjB,KAAKC,WAAWmC,GAChBD,GAAe/B,GACdW,EAACyB,EAAD,CAAQC,UAAW,GAAIC,aAAc,EAArCzB,SACEF,EAAC4B,EAAD,CAAQC,UAAOC,QAAS7C,KAAK0B,OAA7BT,SACGV,EAAa2B,EAAWD,UA3F1BtC,EACJmD,YAAc"}
|
package/dts/index.d.ts
CHANGED
|
@@ -923,7 +923,7 @@ interface TextEllipseProps extends Omit<TextProps, 'content'> {
|
|
|
923
923
|
lessText?: string;
|
|
924
924
|
/** Classname */
|
|
925
925
|
className?: string;
|
|
926
|
-
/**
|
|
926
|
+
/** Text content */
|
|
927
927
|
content: string | string[];
|
|
928
928
|
/** Characters quantity for ellipsed text */
|
|
929
929
|
chars?: number;
|
|
@@ -947,7 +947,7 @@ declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState>
|
|
|
947
947
|
static displayName: string;
|
|
948
948
|
constructor(props: TextEllipseProps);
|
|
949
949
|
componentDidUpdate({ content }: TextEllipseProps): void;
|
|
950
|
-
getContent: (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler'>) => "" | JSX.Element;
|
|
950
|
+
getContent: (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler' | 'content'>) => "" | JSX.Element;
|
|
951
951
|
getQuted: (content: string) => string;
|
|
952
952
|
toggle: () => void;
|
|
953
953
|
render(): JSX.Element;
|
|
@@ -1200,10 +1200,6 @@ interface IconProps extends BaseProps, ColorProperty, VAlign, ResponsiveNamedPro
|
|
|
1200
1200
|
* Name of default icon
|
|
1201
1201
|
*/
|
|
1202
1202
|
name?: keyof typeof IconNames;
|
|
1203
|
-
/**
|
|
1204
|
-
* Object with icon's svg. Use for custom icon insertion with dangerouslySetInnerHTML
|
|
1205
|
-
*/
|
|
1206
|
-
svg?: string;
|
|
1207
1203
|
/**
|
|
1208
1204
|
* Object with icon's svg. Use for custom icon insertion
|
|
1209
1205
|
*/
|
|
@@ -1786,7 +1782,7 @@ DisplayProperty, Omit<React.ComponentPropsWithRef<'div'>, 'color' | 'children'>
|
|
|
1786
1782
|
iconProps?: IconProps;
|
|
1787
1783
|
/** Don't use margin-right: 8px; */
|
|
1788
1784
|
resetDefaultMargin?: boolean;
|
|
1789
|
-
/** @deprecated Use children */
|
|
1785
|
+
/** @ignore @deprecated Use children */
|
|
1790
1786
|
content?: string | React.ReactNode;
|
|
1791
1787
|
}
|
|
1792
1788
|
|
|
@@ -2385,9 +2381,9 @@ interface ProgressCircleProps extends BaseProps, ColorProperty<'resultColor'>, C
|
|
|
2385
2381
|
*/
|
|
2386
2382
|
size?: number;
|
|
2387
2383
|
/**
|
|
2388
|
-
*
|
|
2384
|
+
* React children
|
|
2389
2385
|
*/
|
|
2390
|
-
|
|
2386
|
+
children?: React.ReactNode;
|
|
2391
2387
|
/**
|
|
2392
2388
|
* width progress line
|
|
2393
2389
|
*/
|
|
@@ -2401,7 +2397,7 @@ interface ProgressCircleProps extends BaseProps, ColorProperty<'resultColor'>, C
|
|
|
2401
2397
|
*/
|
|
2402
2398
|
progressStartAngle?: number;
|
|
2403
2399
|
/**
|
|
2404
|
-
*
|
|
2400
|
+
* @ignore @deprecated Use children
|
|
2405
2401
|
*/
|
|
2406
2402
|
content?: string | number;
|
|
2407
2403
|
}
|