@foxford/ui 2.0.11 → 2.0.12
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/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/dts/index.d.ts +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
- package/shared/utils/rel-builder.js +1 -1
- package/shared/utils/rel-builder.js.map +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import s from'@babel/runtime/helpers/objectWithoutProperties';import{Link as r}from'react-router-dom';import{useTheme as i}from'styled-components';import{useMemo as l}from'react';import{useClassname as o}from'../../hooks/useClassname.js';import{Root as a}from'./style.js';import{jsx as t}from'react/jsx-runtime';var n=["as","to","href","wrapper","className","style","children","content","pseudo","underline","color","display","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","autoRel"];function d(p){var u,m
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import s from'@babel/runtime/helpers/objectWithoutProperties';import{Link as r}from'react-router-dom';import{useTheme as i}from'styled-components';import{useMemo as l}from'react';import{useClassname as o}from'../../hooks/useClassname.js';import{Root as a}from'./style.js';import{jsx as t}from'react/jsx-runtime';var n=["as","to","href","wrapper","className","style","children","content","pseudo","underline","color","display","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","autoRel"];function d(p){var u,z,m;var{as:c,to:h,href:y,wrapper:f,className:v,style:L,children:S,content:X,pseudo:b,underline:M,color:N,display:j,size:w,sizeXS:k,sizeS:g,sizeM:x,sizeL:R,sizeXL:A,autoRel:B=!0}=p,C=s(p,n);var P=o(d.displayName,v);var T=i();var _;var H=l((()=>{var e,s;return B&&null!==(e=T.utils)&&void 0!==e&&e.relBuilder?T.utils.relBuilder(null!==(s=p.href)&&void 0!==s?s:p.to,p.target):p.rel}),[B,p.rel,p.href,p.to,p.target]);_='div'!==c||j?j:'block';var I={};return X&&(I=e(e({},I),{},{dangerouslySetInnerHTML:{__html:X}})),t(a,c?e(e(e({as:c,pseudo:b,wrapper:f,underline:M,href:y,className:P,style:L,color:N,size:w,display:_,sizeXS:k,sizeS:g,sizeM:x,sizeL:R,sizeXL:A},C),I),{},{rel:'a'===c?null!==(u=p.rel)&&void 0!==u?u:H:void 0,children:S}):b?e(e(e({as:"div",pseudo:b,wrapper:f,underline:M,href:y,className:P,color:N,style:L,size:w,display:_,sizeXS:k,sizeS:g,sizeM:x,sizeL:R,sizeXL:A},C),I),{},{children:S}):h?e(e(e({as:r,to:h,pseudo:b,wrapper:f,underline:M,className:P,color:N,size:w,style:L,display:_,sizeXS:k,sizeS:g,sizeM:x,sizeL:R,sizeXL:A},C),I),{},{rel:null!==(z=p.rel)&&void 0!==z?z:H,children:S}):e(e(e({as:"a",href:y,pseudo:b,wrapper:f,underline:M,className:P,color:N,size:w,style:L,display:_,sizeXS:k,sizeS:g,sizeM:x,sizeL:R,sizeXL:A},I),C),{},{rel:null!==(m=p.rel)&&void 0!==m?m:H,children:S}))}d.displayName='Anchor',d.defaultProps={display:'inline-block'};export{d as Anchor};
|
|
2
2
|
//# sourceMappingURL=Anchor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { useMemo } from 'react'\nimport { useClassname } from 'hooks/useClassname'\nimport { BaseProps } from '../../shared/interfaces'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport * as Styled from './style'\n\nexport interface AnchorProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {\n /**\n * Custom CSS class name\n */\n as?: 'div' | 'span' | 'a' | typeof Link\n /**\n * React router link to\n */\n to?: string\n /**\n * Link href\n */\n href?: string\n /**\n * Is display inline\n * */\n wrapper?: boolean\n /**\n * Pseudo link has dashed bottom border\n * */\n pseudo?: boolean\n /**\n * If link should be underlined\n * */\n underline?: boolean\n /**\n * Primary content\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Primary content\n */\n content?: string\n /**\n * Onclick handler\n */\n onClick?: () => void\n target?: string\n rel?: string\n /**\n * Auto-generate rel. You must specify domain inside theme\n */\n autoRel?: boolean\n}\n\nAnchor.displayName = 'Anchor'\nAnchor.defaultProps = {\n display: 'inline-block',\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function Anchor(props: typeof Anchor.defaultProps & AnchorProps) {\n const {\n as,\n to,\n href,\n wrapper,\n className,\n style,\n children,\n content,\n pseudo,\n underline,\n color,\n display,\n size,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n autoRel = true,\n ...rest\n } = props\n\n const _className = useClassname(Anchor.displayName, className)\n const theme = useTheme()\n\n let _display: Display['display']\n const _rel = useMemo(() => {\n return autoRel && theme.utils?.relBuilder
|
|
1
|
+
{"version":3,"file":"Anchor.js","sources":["../../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { useMemo } from 'react'\nimport { useClassname } from 'hooks/useClassname'\nimport { BaseProps } from '../../shared/interfaces'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { Color } from '../../mixins/color'\nimport { Display } from '../../mixins/display'\nimport * as Styled from './style'\n\nexport interface AnchorProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {\n /**\n * Custom CSS class name\n */\n as?: 'div' | 'span' | 'a' | typeof Link\n /**\n * React router link to\n */\n to?: string\n /**\n * Link href\n */\n href?: string\n /**\n * Is display inline\n * */\n wrapper?: boolean\n /**\n * Pseudo link has dashed bottom border\n * */\n pseudo?: boolean\n /**\n * If link should be underlined\n * */\n underline?: boolean\n /**\n * Primary content\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Primary content\n */\n content?: string\n /**\n * Onclick handler\n */\n onClick?: () => void\n target?: string\n rel?: string\n /**\n * Auto-generate rel. You must specify domain inside theme\n */\n autoRel?: boolean\n}\n\nAnchor.displayName = 'Anchor'\nAnchor.defaultProps = {\n display: 'inline-block',\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n * - [`Display`](#/Миксины)\n */\nexport function Anchor(props: typeof Anchor.defaultProps & AnchorProps) {\n const {\n as,\n to,\n href,\n wrapper,\n className,\n style,\n children,\n content,\n pseudo,\n underline,\n color,\n display,\n size,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n autoRel = true,\n ...rest\n } = props\n\n const _className = useClassname(Anchor.displayName, className)\n const theme = useTheme()\n\n let _display: Display['display']\n const _rel = useMemo(() => {\n return autoRel && theme.utils?.relBuilder ? theme.utils.relBuilder(props.href ?? props.to, props.target) : props.rel\n }, [autoRel, props.rel, props.href, props.to, props.target])\n\n if (as === 'div' && !display) _display = 'block'\n else _display = display\n\n let contentProps = {}\n\n if (content) {\n contentProps = {\n ...contentProps,\n dangerouslySetInnerHTML: { __html: content },\n }\n }\n\n if (as)\n return (\n <Styled.Root\n as={as}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n href={href}\n className={_className}\n style={style}\n color={color}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n rel={as === 'a' ? props.rel ?? _rel : undefined}\n >\n {children}\n </Styled.Root>\n )\n\n if (pseudo)\n return (\n <Styled.Root\n as='div'\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n href={href}\n className={_className}\n color={color}\n style={style}\n size={size}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n >\n {children}\n </Styled.Root>\n )\n else if (to)\n return (\n <Styled.Root\n as={Link}\n to={to}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n className={_className}\n color={color}\n size={size}\n style={style}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...rest}\n {...contentProps}\n rel={props.rel ?? _rel}\n >\n {children}\n </Styled.Root>\n )\n else\n return (\n <Styled.Root\n as='a'\n href={href}\n pseudo={pseudo}\n wrapper={wrapper}\n underline={underline}\n className={_className}\n color={color}\n size={size}\n style={style}\n display={_display}\n sizeXS={sizeXS}\n sizeS={sizeS}\n sizeM={sizeM}\n sizeL={sizeL}\n sizeXL={sizeXL}\n {...contentProps}\n {...rest}\n rel={props.rel ?? _rel}\n >\n {children}\n </Styled.Root>\n )\n}\n"],"names":["Anchor","props","_props$rel","_props$rel2","_props$rel3","as","to","href","wrapper","className","style","children","content","pseudo","underline","color","display","size","sizeXS","sizeS","sizeM","sizeL","sizeXL","autoRel","rest","_excluded","_className","useClassname","displayName","theme","useTheme","_display","_rel","useMemo","_theme$utils","_props$href","utils","relBuilder","target","rel","contentProps","dangerouslySetInnerHTML","__html","_jsx","Styled.Root","_objectSpread","Link","defaultProps"],"mappings":"0hBAsEO,SAASA,EAAOC,GAAiD,IAAAC,EAAAC,EAAAC,EACtE,IAAMC,GACJA,EADIC,GAEJA,EAFIC,KAGJA,EAHIC,QAIJA,EAJIC,UAKJA,EALIC,MAMJA,EANIC,SAOJA,EAPIC,QAQJA,EARIC,OASJA,EATIC,UAUJA,EAVIC,MAWJA,EAXIC,QAYJA,EAZIC,KAaJA,EAbIC,OAcJA,EAdIC,MAeJA,EAfIC,MAgBJA,EAhBIC,MAiBJA,EAjBIC,OAkBJA,EAlBIC,QAmBJA,GAAU,GAERtB,EADCuB,IACDvB,EArBJwB,GAuBA,IAAMC,EAAaC,EAAa3B,EAAO4B,YAAanB,GACpD,IAAMoB,EAAQC,IAEd,IAAIC,EACJ,IAAMC,EAAOC,GAAQ,KAAM,IAAAC,EAAAC,EACzB,OAAOZ,GAAO,QAAAW,EAAIL,EAAMO,aAAAA,IAAVF,GAAIA,EAAaG,WAAaR,EAAMO,MAAMC,WAAZ,QAAAF,EAAuBlC,EAAMM,YAAAA,IAA7B4B,EAAAA,EAAqClC,EAAMK,GAAIL,EAAMqC,QAAUrC,EAAMsC,MAChH,CAAChB,EAAStB,EAAMsC,IAAKtC,EAAMM,KAAMN,EAAMK,GAAIL,EAAMqC,SAG/CP,EADM,QAAP1B,GAAiBW,EACLA,EADyB,QAGzC,IAAIwB,EAAe,GASnB,OAPI5B,IACF4B,SACKA,GADO,GAAA,CAEVC,wBAAyB,CAAEC,OAAQ9B,MAMnC+B,EAACC,EAFDvC,EAEAwC,EAAAA,EAAAA,EAAA,CACExC,GAAIA,EACJQ,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXP,KAAMA,EACNE,UAAWiB,EACXhB,MAAOA,EACPK,MAAOA,EACPE,KAAMA,EACND,QAASe,EACTb,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJE,GACAgB,GAjBN,GAAA,CAkBED,IAAY,MAAPlC,EAAA,QAAAH,EAAaD,EAAMsC,WAAnB,IAAArC,EAAAA,EAA0B8B,OAAAA,EAlBjCrB,SAoBGA,IAIHE,EAEAgC,EAAAA,EAAAA,EAAA,CACExC,GAAG,MACHQ,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXP,KAAMA,EACNE,UAAWiB,EACXX,MAAOA,EACPL,MAAOA,EACPO,KAAMA,EACND,QAASe,EACTb,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJE,GACAgB,GAjBN,GAAA,CAAA7B,SAmBGA,IAGEL,EAELuC,EAAAA,EAAAA,EAAA,CACExC,GAAIyC,EACJxC,GAAIA,EACJO,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXL,UAAWiB,EACXX,MAAOA,EACPE,KAAMA,EACNP,MAAOA,EACPM,QAASe,EACTb,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJE,GACAgB,GAjBN,GAAA,CAkBED,YAAKtC,EAAAA,EAAMsC,mBAAOP,EAlBpBrB,SAoBGA,IAKHkC,EAAAA,EAAAA,EAAA,CACExC,GAAG,IACHE,KAAMA,EACNM,OAAQA,EACRL,QAASA,EACTM,UAAWA,EACXL,UAAWiB,EACXX,MAAOA,EACPE,KAAMA,EACNP,MAAOA,EACPM,QAASe,EACTb,OAAQA,EACRC,MAAOA,EACPC,MAAOA,EACPC,MAAOA,EACPC,OAAQA,GACJkB,GACAhB,GAjBN,GAAA,CAkBEe,YAAKtC,EAAAA,EAAMsC,WAAAA,QAAOP,EAlBpBrB,SAoBGA,KAzJTX,EAAO4B,YAAc,SACrB5B,EAAO+C,aAAe,CACpB/B,QAAS"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{Link as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{Link as t}from'react-router-dom';import{useTheme as a}from'styled-components';import{useMemo as o}from'react';import{useClassname as s}from'../../hooks/useClassname.js';import{Root as i,Content as n}from'./style.js';import{PROPS_BY_SIZE as l,PRESETS as m}from'./presets.js';import{jsxs as d,jsx as u}from'react/jsx-runtime';var c=["children","className","disabled","href","to","as","target","content","onClick","ref","icon","type","innerRef","autoRel"];function p(f){var v;var{children:h,className:y,disabled:b,href:j,to:N,as:g,target:R,content:C,onClick:k,ref:x,icon:B,type:P,innerRef:S,autoRel:_=!0}=f,z=r(f,c);var E=a();var T=g||(b?'button':j?'a':N?t:'button');var w='a'!==T||b?{}:{href:j||N,target:R};var I='string'==typeof T||b?{}:{to:N||j};var L=z.size&&!z.round&&l[z.size]||{};var M=(e=>e.primary?m.primary:e.secondary?m.secondary:m.default)(f);var O=s(p.displayName,y);var W=s(p.displayName);var Y=o((()=>{var e,r;return _&&(j||N)&&null!==(e=E.utils)&&void 0!==e&&e.relBuilder?E.utils.relBuilder(null!==(r=f.href)&&void 0!==r?r:f.to,f.target):void 0}),[_,f.href,f.to,f.target]);return d(i,e(e(e(e(e(e({as:T,className:O,type:'button'===T?P:void 0,onClick:b||z.loading?void 0:k},L),w),I),M),z),{},{disabled:b,ref:x||S,rel:j?null!==(v=f.rel)&&void 0!==v?v:Y:void 0,children:[B&&u("span",{className:"icon",children:B}),(C||h)&&u(n,{className:"".concat(W,"__content"),children:C||h})]}))}p.defaultProps={size:'m',rounded:!0,display:'inline-flex',width:'auto'},p.displayName='Button';export{p as Button};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { useMemo } from 'react'\nimport { useClassname } from 'hooks/useClassname'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { BaseProps, Tooltiped } from '../../shared/interfaces'\nimport { Color } from '../../mixins/color'\nimport { Anchor } from '../../components/Anchor'\nimport * as Styled from './style'\nimport { PRESETS, PROPS_BY_SIZE } from './presets'\n\nexport interface ButtonProps\n extends BaseProps,\n Tooltiped,\n Display,\n Color,\n Color<'fontColor'>,\n ResponsiveNamedProperty<'padding'>,\n ResponsiveNamedProperty<'paddingTop'>,\n ResponsiveNamedProperty<'paddingRight'>,\n ResponsiveNamedProperty<'paddingBottom'>,\n ResponsiveNamedProperty<'paddingLeft'>,\n ResponsiveNamedProperty<'margin'>,\n ResponsiveNamedProperty<'marginTop'>,\n ResponsiveNamedProperty<'marginRight'>,\n ResponsiveNamedProperty<'marginBottom'>,\n ResponsiveNamedProperty<'marginLeft'>,\n ResponsiveNamedProperty<'fontSize'>,\n ResponsiveNamedProperty<'fluid', boolean>,\n ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>,\n ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {\n /**\n * Node type\n */\n as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor\n target?: string\n rel?: string\n /**\n * Auto-generate rel. You must specify domain inside theme\n */\n autoRel?: boolean\n /**\n * Link href\n */\n href?: string\n /**\n * React router link to\n */\n to?: string\n /**\n * Type for button element\n */\n type?: 'button' | 'submit' | 'reset'\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Basic button\n */\n basic?: boolean\n /**\n * Disabled\n */\n disabled?: boolean\n /**\n * Is primary\n */\n primary?: boolean\n /**\n * Is secondary\n */\n secondary?: boolean\n /**\n * Is inverted\n */\n inverted?: boolean\n /**\n * Is rounded\n */\n rounded?: boolean\n /**\n * Is round (in a shape of circle)\n */\n round?: boolean\n /**\n * Indicates if there should not be any margin\n * between this button and the previous one\n */\n noSpacing?: boolean\n /**\n * Is in loading state\n */\n loading?: boolean\n /**\n * Button icon\n */\n icon?: React.ReactNode\n /** On click callback */\n onClick?: () => void\n /** Function to make ref */\n ref?: React.LegacyRef<HTMLDivElement>\n /**\n * Size\n */\n size?: keyof typeof PROPS_BY_SIZE\n /**\n * Content of button\n * @deprecated Use children property\n */\n content?: React.ReactNode\n}\n\nButton.defaultProps = {\n size: 'm',\n rounded: true,\n display: 'inline-flex',\n width: 'auto',\n}\n\nButton.displayName = 'Button'\n\nconst extractPresetByProps = (props: ButtonProps): Partial<ButtonProps> => {\n if (props.primary) return PRESETS.primary\n if (props.secondary) return PRESETS.secondary\n return PRESETS.default\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Tooltiped`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'fontColor'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'padding'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingTop'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingRight'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingBottom'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingLeft'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'margin'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginTop'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginRight'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginBottom'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginLeft'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'fontSize'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'fluid', boolean>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n */\nexport function Button(props: ButtonProps) {\n const {\n children,\n className,\n disabled,\n href,\n to,\n as,\n target,\n content,\n onClick,\n ref,\n icon,\n type,\n innerRef,\n autoRel = true,\n ...restProps\n } = props\n const theme = useTheme()\n const _as = as || (disabled ? 'button' : href ? 'a' : to ? Link : 'button')\n const aProps = _as === 'a' && !disabled ? { href: href || to, target } : {}\n const linkProps = typeof _as !== 'string' && !disabled ? { to: to || href } : {}\n const propsBySize: Partial<ButtonProps> =\n restProps.size && !restProps.round ? PROPS_BY_SIZE[restProps.size] || {} : {}\n const presetProps: Partial<ButtonProps> = extractPresetByProps(props)\n const _className = useClassname(Button.displayName, className)\n const _contentClassName = useClassname(Button.displayName)\n const _rel = useMemo(() => {\n return autoRel && (href || to) && theme.utils?.relBuilder
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\nimport { useTheme } from 'styled-components'\nimport { useMemo } from 'react'\nimport { useClassname } from 'hooks/useClassname'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveNamedProperty } from '../../mixins/responsive-property'\nimport { BaseProps, Tooltiped } from '../../shared/interfaces'\nimport { Color } from '../../mixins/color'\nimport { Anchor } from '../../components/Anchor'\nimport * as Styled from './style'\nimport { PRESETS, PROPS_BY_SIZE } from './presets'\n\nexport interface ButtonProps\n extends BaseProps,\n Tooltiped,\n Display,\n Color,\n Color<'fontColor'>,\n ResponsiveNamedProperty<'padding'>,\n ResponsiveNamedProperty<'paddingTop'>,\n ResponsiveNamedProperty<'paddingRight'>,\n ResponsiveNamedProperty<'paddingBottom'>,\n ResponsiveNamedProperty<'paddingLeft'>,\n ResponsiveNamedProperty<'margin'>,\n ResponsiveNamedProperty<'marginTop'>,\n ResponsiveNamedProperty<'marginRight'>,\n ResponsiveNamedProperty<'marginBottom'>,\n ResponsiveNamedProperty<'marginLeft'>,\n ResponsiveNamedProperty<'fontSize'>,\n ResponsiveNamedProperty<'fluid', boolean>,\n ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>,\n ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {\n /**\n * Node type\n */\n as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor\n target?: string\n rel?: string\n /**\n * Auto-generate rel. You must specify domain inside theme\n */\n autoRel?: boolean\n /**\n * Link href\n */\n href?: string\n /**\n * React router link to\n */\n to?: string\n /**\n * Type for button element\n */\n type?: 'button' | 'submit' | 'reset'\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Basic button\n */\n basic?: boolean\n /**\n * Disabled\n */\n disabled?: boolean\n /**\n * Is primary\n */\n primary?: boolean\n /**\n * Is secondary\n */\n secondary?: boolean\n /**\n * Is inverted\n */\n inverted?: boolean\n /**\n * Is rounded\n */\n rounded?: boolean\n /**\n * Is round (in a shape of circle)\n */\n round?: boolean\n /**\n * Indicates if there should not be any margin\n * between this button and the previous one\n */\n noSpacing?: boolean\n /**\n * Is in loading state\n */\n loading?: boolean\n /**\n * Button icon\n */\n icon?: React.ReactNode\n /** On click callback */\n onClick?: () => void\n /** Function to make ref */\n ref?: React.LegacyRef<HTMLDivElement>\n /**\n * Size\n */\n size?: keyof typeof PROPS_BY_SIZE\n /**\n * Content of button\n * @deprecated Use children property\n */\n content?: React.ReactNode\n}\n\nButton.defaultProps = {\n size: 'm',\n rounded: true,\n display: 'inline-flex',\n width: 'auto',\n}\n\nButton.displayName = 'Button'\n\nconst extractPresetByProps = (props: ButtonProps): Partial<ButtonProps> => {\n if (props.primary) return PRESETS.primary\n if (props.secondary) return PRESETS.secondary\n return PRESETS.default\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`Tooltiped`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'fontColor'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'padding'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingTop'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingRight'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingBottom'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'paddingLeft'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'margin'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginTop'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginRight'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginBottom'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'marginLeft'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'fontSize'>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'fluid', boolean>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n * - [`ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number>`](#/Миксины)\n */\nexport function Button(props: ButtonProps) {\n const {\n children,\n className,\n disabled,\n href,\n to,\n as,\n target,\n content,\n onClick,\n ref,\n icon,\n type,\n innerRef,\n autoRel = true,\n ...restProps\n } = props\n const theme = useTheme()\n const _as = as || (disabled ? 'button' : href ? 'a' : to ? Link : 'button')\n const aProps = _as === 'a' && !disabled ? { href: href || to, target } : {}\n const linkProps = typeof _as !== 'string' && !disabled ? { to: to || href } : {}\n const propsBySize: Partial<ButtonProps> =\n restProps.size && !restProps.round ? PROPS_BY_SIZE[restProps.size] || {} : {}\n const presetProps: Partial<ButtonProps> = extractPresetByProps(props)\n const _className = useClassname(Button.displayName, className)\n const _contentClassName = useClassname(Button.displayName)\n const _rel = useMemo(() => {\n return autoRel && (href || to) && theme.utils?.relBuilder\n ? theme.utils.relBuilder(props.href ?? props.to, props.target)\n : undefined\n }, [autoRel, props.href, props.to, props.target])\n\n return (\n <Styled.Root\n as={_as}\n className={_className}\n type={_as === 'button' ? type : undefined}\n onClick={disabled || restProps.loading ? undefined : onClick}\n {...propsBySize}\n {...aProps}\n {...linkProps}\n {...presetProps}\n {...restProps}\n disabled={disabled}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ref={(ref || innerRef) as any}\n rel={href ? props.rel ?? _rel : undefined}\n >\n {icon && <span className='icon'>{icon}</span>}\n {(content || children) && (\n <Styled.Content className={`${_contentClassName}__content`}>{content || children}</Styled.Content>\n )}\n </Styled.Root>\n )\n}\n"],"names":["Button","props","_props$rel","children","className","disabled","href","to","as","target","content","onClick","ref","icon","type","innerRef","autoRel","restProps","_excluded","theme","useTheme","_as","Link","aProps","linkProps","propsBySize","size","round","PROPS_BY_SIZE","presetProps","primary","PRESETS","secondary","default","_className","useClassname","displayName","_contentClassName","_rel","useMemo","_theme$utils","_props$href","utils","relBuilder","_jsxs","Styled.Root","_objectSpread","loading","undefined","rel","_jsx","Styled.Content","concat","defaultProps","rounded","display","width"],"mappings":"8jBAuJO,SAASA,EAAOC,GAAoB,IAAAC,EACzC,IAAMC,SACJA,EADIC,UAEJA,EAFIC,SAGJA,EAHIC,KAIJA,EAJIC,GAKJA,EALIC,GAMJA,EANIC,OAOJA,EAPIC,QAQJA,EARIC,QASJA,EATIC,IAUJA,EAVIC,KAWJA,EAXIC,KAYJA,EAZIC,SAaJA,EAbIC,QAcJA,GAAAA,GAEEf,EADCgB,IACDhB,EAhBJiB,GAiBA,IAAMC,EAAQC,IACd,IAAMC,EAAMb,IAAOH,EAAW,SAAWC,EAAO,IAAMC,EAAKe,EAAO,UAClE,IAAMC,EAAiB,MAARF,GAAgBhB,EAA0C,GAA/B,CAAEC,KAAMA,GAAQC,EAAIE,OAAAA,GAC9D,IAAMe,EAA2B,iBAARH,GAAqBhB,EAAgC,GAArB,CAAEE,GAAIA,GAAMD,GACrE,IAAMmB,EACJR,EAAUS,OAAST,EAAUU,OAAQC,EAAcX,EAAUS,OAAc,GAC7E,IAAMG,EApDsB5B,CAAAA,GACxBA,EAAM6B,QAAgBC,EAAQD,QAC9B7B,EAAM+B,UAAkBD,EAAQC,UAC7BD,EAAQE,QAHahC,CAoDmCA,GAC/D,IAAMiC,EAAaC,EAAanC,EAAOoC,YAAahC,GACpD,IAAMiC,EAAoBF,EAAanC,EAAOoC,aAC9C,IAAME,EAAOC,QAAc,IAAAC,EAAAC,EACzB,OAAOzB,IAAYV,GAAQC,IAApB,QAAAiC,EAA2BrB,EAAMuB,aAAjC,IAAAF,GAA2BA,EAAaG,WAC3CxB,EAAMuB,MAAMC,WAAyB1C,QAArCwC,EAAuBxC,EAAMK,YAAQL,IAAAA,EAAAA,EAAAA,EAAMM,GAAIN,EAAMQ,aAAAA,IAExD,CAACO,EAASf,EAAMK,KAAML,EAAMM,GAAIN,EAAMQ,SAEzC,OACEmC,EAACC,EAADC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACEtC,GAAIa,EACJjB,UAAW8B,EACXpB,KAAc,WAARO,EAAmBP,OAAAA,EACzBH,QAASN,GAAYY,EAAU8B,aAAUC,EAAYrC,GACjDc,GACAF,GACAC,GACAK,GACAZ,GATN,GAAA,CAUEZ,SAAUA,EAEVO,IAAMA,GAAOG,EACbkC,IAAK3C,EAAI,QAAGL,EAAAA,EAAMgD,WAAT,IAAA/C,EAAAA,EAAgBoC,OAAOU,EAblC7C,SAAA,CAeGU,GAAQqC,EAAA,OAAA,CAAM9C,UAAU,OAAhBD,SAAwBU,KAC/BH,GAAWP,IACX+C,EAACC,EAAD,CAAgB/C,UAAS,GAAAgD,OAAKf,EAA9B,aAAAlC,SAA6DO,GAAWP,QAxFhFH,EAAOqD,aAAe,CACpB3B,KAAM,IACN4B,SAAAA,EACAC,QAAS,cACTC,MAAO,QAGTxD,EAAOoC,YAAc"}
|
package/dts/index.d.ts
CHANGED
|
@@ -359,7 +359,7 @@ interface Theme {
|
|
|
359
359
|
defaultInputControlsWidth: number | keyof typeof SizeInput | 'auto';
|
|
360
360
|
domain?: string;
|
|
361
361
|
utils?: {
|
|
362
|
-
relBuilder?: (
|
|
362
|
+
relBuilder?: (_link?: string, _target?: string) => undefined | string;
|
|
363
363
|
};
|
|
364
364
|
}
|
|
365
365
|
|