@foxford/ui 2.0.0-beta-5fc258e-20220708 → 2.0.0-beta-7501a7c-20220712

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{Link as r}from'react-router-dom';import{useClassname as t}from'../../hooks/useClassname.js';import{Root as s,Content as o}from'./style.js';import{PROPS_BY_SIZE as i,PRESETS as n}from'./default.js';import{jsxs as l,jsx as m}from'react/jsx-runtime';var d=["children","className","disabled","href","to","as","target","onClick","ref","icon","type","innerRef"];function c(p){var{children:f,className:u,disabled:y,href:b,to:h,as:v,target:j,onClick:N,ref:C,icon:g,type:k,innerRef:x}=p,P=a(p,d);var R=v||(y?'button':b?'a':h?r:'button');var S='a'!==R||y?{}:{href:b||h,target:j};var _='string'==typeof R||y?{}:{to:h||b};var z=P.size&&!P.round&&i[P.size]||{};var B=(e=>e.primary?n.primary:e.secondary?n.secondary:n.default)(p);var E=t(c.displayName,u);var w=t(c.displayName);return l(s,e(e(e(e(e(e({as:R,className:E,type:'button'===R?k:void 0,onClick:y||P.loading?void 0:N},z),S),_),B),P),{},{disabled:y,ref:C||x,children:[g&&m("span",{className:"icon",children:g}),f&&m(o,{className:"".concat(w,"__content"),children:f})]}))}c.defaultProps={size:'m',rounded:!0,display:'inline-flex',type:'button',width:'auto'},c.displayName='Button';export{c as Button};
1
+ import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{Link as r}from'react-router-dom';import{useClassname as t}from'../../hooks/useClassname.js';import{Root as o,Content as s}from'./style.js';import{PROPS_BY_SIZE as n,PRESETS as i}from'./default.js';import{jsxs as l,jsx as m}from'react/jsx-runtime';var d=["children","className","disabled","href","to","as","target","content","onClick","ref","icon","type","innerRef"];function c(p){var{children:f,className:u,disabled:y,href:b,to:h,as:v,target:j,content:N,onClick:C,ref:g,icon:k,type:x,innerRef:P}=p,R=a(p,d);var S=v||(y?'button':b?'a':h?r:'button');var _='a'!==S||y?{}:{href:b||h,target:j};var z='string'==typeof S||y?{}:{to:h||b};var B=R.size&&!R.round&&n[R.size]||{};var E=(e=>e.primary?i.primary:e.secondary?i.secondary:i.default)(p);var w=t(c.displayName,u);var I=t(c.displayName);return l(o,e(e(e(e(e(e({as:S,className:w,type:'button'===S?x:void 0,onClick:y||R.loading?void 0:C},B),_),z),E),R),{},{disabled:y,ref:g||P,children:[k&&m("span",{className:"icon",children:k}),(N||f)&&m(s,{className:"".concat(I,"__content"),children:N||f})]}))}c.defaultProps={size:'m',rounded:!0,display:'inline-flex',type:'button',width:'auto'},c.displayName='Button';export{c 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 { 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 './default'\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 * 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\nButton.defaultProps = {\n size: 'm',\n rounded: true,\n display: 'inline-flex',\n type: 'button',\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 { children, className, disabled, href, to, as, target, onClick, ref, icon, type, innerRef, ...restProps } =\n props\n\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\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 >\n {icon && <span className='icon'>{icon}</span>}\n {children && <Styled.Content className={`${_contentClassName}__content`}>{children}</Styled.Content>}\n </Styled.Root>\n )\n}\n"],"names":["Button","props","children","className","disabled","href","to","as","target","onClick","ref","icon","type","innerRef","restProps","_excluded","_as","Link","aProps","linkProps","propsBySize","size","round","PROPS_BY_SIZE","presetProps","primary","PRESETS","secondary","default","_className","useClassname","displayName","_contentClassName","_jsxs","Styled.Root","_objectSpread","loading","_jsx","Styled.Content","concat","defaultProps","rounded","display","width"],"mappings":"6dA6IO,SAASA,EAAOC,GACrB,IAAMC,SAAEA,EAAFC,UAAYA,EAAZC,SAAuBA,EAAvBC,KAAiCA,EAAjCC,GAAuCA,EAAvCC,GAA2CA,EAA3CC,OAA+CA,EAA/CC,QAAuDA,EAAvDC,IAAgEA,EAAhEC,KAAqEA,EAArEC,KAA2EA,EAA3EC,SAAiFA,GACrFZ,EADkGa,IAClGb,EADFc,GAGA,IAAMC,EAAMT,IAAOH,EAAW,SAAWC,EAAO,IAAMC,EAAKW,EAAO,UAClE,IAAMC,EAAiB,MAARF,GAAgBZ,EAA0C,GAA/B,CAAEC,KAAMA,GAAQC,EAAIE,OAAAA,GAC9D,IAAMW,EAA2B,iBAARH,GAAqBZ,EAAgC,GAArB,CAAEE,GAAIA,GAAMD,GACrE,IAAMe,EACJN,EAAUO,OAASP,EAAUQ,OAAQC,EAAcT,EAAUO,OAAc,GAC7E,IAAMG,EArCsBvB,CAAAA,GACxBA,EAAMwB,QAAgBC,EAAQD,QAC9BxB,EAAM0B,UAAkBD,EAAQC,UAC7BD,EAAQE,QAHa3B,CAqCmCA,GAC/D,IAAM4B,EAAaC,EAAa9B,EAAO+B,YAAa5B,GACpD,IAAM6B,EAAoBF,EAAa9B,EAAO+B,aAE9C,OACEE,EAACC,EAADC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACE5B,GAAIS,EACJb,UAAW0B,EACXjB,KAAc,WAARI,EAAmBJ,OAAAA,EACzBH,QAASL,GAAYU,EAAUsB,eAAsB3B,GACjDW,GACAF,GACAC,GACAK,GACAV,GATN,GAAA,CAUEV,SAAUA,EAEVM,IAAMA,GAAOG,EAZfX,SAAA,CAcGS,GAAQ0B,EAAA,OAAA,CAAMlC,UAAU,OAAhBD,SAAwBS,IAChCT,GAAYmC,EAACC,EAAD,CAAgBnC,UAAS,GAAAoC,OAAKP,EAA9B,aAAA9B,SAA6DA,QAnEhFF,EAAOwC,aAAe,CACpBnB,KAAM,IACNoB,SAAAA,EACAC,QAAS,cACT9B,KAAM,SACN+B,MAAO,QAGT3C,EAAO+B,YAAc"}
1
+ {"version":3,"file":"Button.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Link } from 'react-router-dom'\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 './default'\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 * 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 type: 'button',\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 ...restProps\n } = props\n\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\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 >\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","children","className","disabled","href","to","as","target","content","onClick","ref","icon","type","innerRef","restProps","_excluded","_as","Link","aProps","linkProps","propsBySize","size","round","PROPS_BY_SIZE","presetProps","primary","PRESETS","secondary","default","_className","useClassname","displayName","_contentClassName","_jsxs","Styled.Root","_objectSpread","undefined","loading","_jsx","Styled.Content","concat","defaultProps","rounded","display","width"],"mappings":"ueAkJO,SAASA,EAAOC,GACrB,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,GAEEb,EADCc,IACDd,EAfJe,GAiBA,IAAMC,EAAMV,IAAOH,EAAW,SAAWC,EAAO,IAAMC,EAAKY,EAAO,UAClE,IAAMC,EAAiB,MAARF,GAAgBb,EAA0C,GAA/B,CAAEC,KAAMA,GAAQC,EAAIE,OAAAA,GAC9D,IAAMY,EAA2B,iBAARH,GAAqBb,EAAgC,GAArB,CAAEE,GAAIA,GAAMD,GACrE,IAAMgB,EACJN,EAAUO,OAASP,EAAUQ,OAAQC,EAAcT,EAAUO,OAAc,GAC7E,IAAMG,EAnDsBxB,CAAAA,GACxBA,EAAMyB,QAAgBC,EAAQD,QAC9BzB,EAAM2B,UAAkBD,EAAQC,UAC7BD,EAAQE,QAHa5B,CAmDmCA,GAC/D,IAAM6B,EAAaC,EAAa/B,EAAOgC,YAAa7B,GACpD,IAAM8B,EAAoBF,EAAa/B,EAAOgC,aAE9C,OACEE,EAACC,EAADC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CACE7B,GAAIU,EACJd,UAAW2B,EACXjB,KAAc,WAARI,EAAmBJ,OAAOwB,EAChC3B,QAASN,GAAYW,EAAUuB,aAAAA,EAAsB5B,GACjDW,GACAF,GACAC,GACAK,GACAV,GATN,GAAA,CAUEX,SAAUA,EAEVO,IAAMA,GAAOG,EAZfZ,SAAA,CAcGU,GAAQ2B,EAAA,OAAA,CAAMpC,UAAU,OAAhBD,SAAwBU,KAC/BH,GAAWP,IACXqC,EAACC,EAAD,CAAgBrC,UAAS,GAAAsC,OAAKR,EAA9B,aAAA/B,SAA6DO,GAAWP,QAlFhFF,EAAO0C,aAAe,CACpBpB,KAAM,IACNqB,SAAAA,EACAC,QAAS,cACT/B,KAAM,SACNgC,MAAO,QAGT7C,EAAOgC,YAAc"}
@@ -1,2 +1,2 @@
1
- import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{useState as r,useEffect as t,useCallback as s}from'react';import{SizeInput as i}from'../../shared/enums/sizeInput.js';import{CheckboxGroup as l}from'./Group.js';import{Root as o}from'./style.js';import{jsxs as d,jsx as c}from'react/jsx-runtime';var h=["children","disabled","error","id","name","onChange","size","value","label","fluid","display","width","className","style"];function n(i){var l=void 0===i.checked;var[n,m]=r(l?i.defaultChecked:i.checked);var{children:p,disabled:f,error:u,id:b,name:k,onChange:v,size:x,value:g,label:y,fluid:w,display:C,width:j,className:z,style:N}=i,B=a(i,h);t((()=>{l||n===i.checked||m(i.checked)}),[i.checked]);var G=s((e=>{e.stopPropagation(),'function'==typeof v&&v(e)}),[l]);var P=l?{defaultChecked:n}:{checked:n};return d(o,{className:z,style:N,disabled:f,checked:n,error:u,htmlFor:b||k,size:x,fluid:w,width:j,display:C,children:[c("input",e(e({},B),{},{id:b||k,name:k,type:"checkbox",onChange:G,value:g,disabled:f},P)),d("svg",{viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[c("rect",{x:".455",y:".455",width:"19.091",height:"19.091",rx:"5",transform:"translate(0 0)",fill:"#fff",stroke:"#B8B8B8",strokeWidth:"1"}),d("g",{fill:"none",children:[c("rect",{fill:"#48A1E6",width:"20",height:"20",rx:"5"}),c("path",{stroke:"#fff",strokeWidth:"2",d:"M6 9.99l3 3.01 6-6"})]})]}),(y||p)&&c("span",{className:"label",children:y||p})]})}n.defaultProps={disabled:!1,size:'medium',defaultChecked:!1,display:'inline-flex',width:i.l,onChange:e=>console.log(e,e.target.value)},n.Group=l,n.displayName='Checkbox';export{n as Checkbox};
1
+ import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{useState as r,useEffect as t,useCallback as l}from'react';import{useTheme as s}from'styled-components';import{CheckboxGroup as i}from'./Group.js';import{Root as o}from'./style.js';import{jsxs as d,jsx as c}from'react/jsx-runtime';var h=["children","disabled","error","id","name","onChange","size","value","label","fluid","display","width","className","style"];function n(i){var n=void 0===i.checked;var m=s();var[f,p]=r(n?i.defaultChecked:i.checked);var{children:u,disabled:b,error:k,id:v,name:x,onChange:g,size:y,value:C,label:w,fluid:j,display:N,width:z=m.defaultInputControlsWidth,className:B,style:W}=i,G=a(i,h);t((()=>{n||f===i.checked||p(i.checked)}),[i.checked]);var P=l((e=>{e.stopPropagation(),'function'==typeof g&&g(e)}),[n]);var E=n?{defaultChecked:f}:{checked:f};return d(o,{className:B,style:W,disabled:b,checked:f,error:k,htmlFor:v||x,size:y,fluid:j,width:z,display:N,children:[c("input",e(e({},G),{},{id:v||x,name:x,type:"checkbox",onChange:P,value:C,disabled:b},E)),d("svg",{viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[c("rect",{x:".455",y:".455",width:"19.091",height:"19.091",rx:"5",transform:"translate(0 0)",fill:"#fff",stroke:"#B8B8B8",strokeWidth:"1"}),d("g",{fill:"none",children:[c("rect",{fill:"#48A1E6",width:"20",height:"20",rx:"5"}),c("path",{stroke:"#fff",strokeWidth:"2",d:"M6 9.99l3 3.01 6-6"})]})]}),(w||u)&&c("span",{className:"label",children:w||u})]})}n.defaultProps={disabled:!1,size:'medium',defaultChecked:!1,display:'inline-flex',onChange:e=>console.log(e,e.target.value)},n.Group=i,n.displayName='Checkbox';export{n as Checkbox};
2
2
  //# sourceMappingURL=Checkbox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { SizeInput } from '../../shared/enums/sizeInput'\nimport { BaseProps } from '../../shared/interfaces'\nimport { CheckboxGroup } from './Group'\nimport * as Styled from './style'\n\ntype CheckboxInputHtmlAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'>\n\nexport interface CheckboxProps extends BaseProps, Display, CheckboxInputHtmlAttributes {\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * A checkbox can appear disabled and be unable to change states\n */\n disabled?: boolean\n /**\n * Field can show the data contains errors\n */\n error?: boolean\n /**\n * Whether or not checkbox is checked\n */\n checked?: boolean\n /**\n * Value\n */\n value?: string | number\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * Input element ID\n */\n id?: string\n /**\n * Input element name\n */\n name?: string\n /**\n * Input element label\n */\n label?: string\n /**\n * Checkbox size\n */\n size?: 'small' | 'medium' | 'large' | 'extraLarge' | 's' | 'm' | 'l' | 'xl'\n fluid?: boolean\n width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>\n}\n\nCheckbox.defaultProps = {\n disabled: false,\n size: 'medium',\n defaultChecked: false,\n display: 'inline-flex',\n width: SizeInput.l,\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log(e, e.target.value), // eslint-disable-line no-console\n}\n\nCheckbox.Group = CheckboxGroup\n\nCheckbox.displayName = 'Checkbox'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - `React.InputHTMLAttributes<HTMLInputElement>`\n */\nexport function Checkbox(props: typeof Checkbox.defaultProps & CheckboxProps) {\n const uncontrolled = props.checked === undefined\n const [checkedInput, setChecked] = useState(uncontrolled ? props.defaultChecked : props.checked)\n\n const {\n children,\n disabled,\n error,\n id,\n name,\n onChange,\n size,\n value,\n label,\n fluid,\n display,\n width,\n className,\n style,\n ...anotherProps\n } = props\n\n useEffect(() => {\n if (!uncontrolled && checkedInput !== props.checked) setChecked(props.checked)\n }, [props.checked])\n\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n e.stopPropagation()\n if (typeof onChange === 'function') onChange(e)\n },\n [uncontrolled]\n )\n\n const inputProps = uncontrolled ? { defaultChecked: checkedInput } : { checked: checkedInput }\n\n return (\n <Styled.Root\n className={className}\n style={style}\n disabled={disabled}\n checked={checkedInput}\n error={error}\n htmlFor={id || name}\n size={size}\n fluid={fluid}\n width={width}\n display={display}\n >\n <input\n {...anotherProps}\n id={id || name}\n name={name}\n type='checkbox'\n onChange={handleOnChange}\n value={value}\n disabled={disabled}\n {...inputProps}\n />\n <svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>\n <rect\n x='.455'\n y='.455'\n width='19.091'\n height='19.091'\n rx='5'\n transform='translate(0 0)'\n fill='#fff'\n stroke='#B8B8B8'\n strokeWidth='1'\n />\n <g fill='none'>\n <rect fill='#48A1E6' width='20' height='20' rx='5' />\n <path stroke='#fff' strokeWidth='2' d='M6 9.99l3 3.01 6-6' />\n </g>\n </svg>\n {(label || children) && <span className='label'>{label || children}</span>}\n </Styled.Root>\n )\n}\n"],"names":["Checkbox","props","uncontrolled","undefined","checked","checkedInput","setChecked","useState","defaultChecked","children","disabled","error","id","name","onChange","size","value","label","fluid","display","width","className","style","anotherProps","_excluded","useEffect","handleOnChange","useCallback","e","stopPropagation","inputProps","_jsxs","Styled.Root","htmlFor","_jsx","type","viewBox","xmlns","x","y","height","rx","transform","fill","stroke","strokeWidth","d","defaultProps","SizeInput","l","console","log","target","Group","CheckboxGroup","displayName"],"mappings":"gfAyEO,SAASA,EAASC,GACvB,IAAMC,OAAiCC,IAAlBF,EAAMG,QAC3B,IAAOC,EAAcC,GAAcC,EAASL,EAAeD,EAAMO,eAAiBP,EAAMG,SAExF,IAAMK,SACJA,EADIC,SAEJA,EAFIC,MAGJA,EAHIC,GAIJA,EAJIC,KAKJA,EALIC,SAMJA,EANIC,KAOJA,EAPIC,MAQJA,EARIC,MASJA,EATIC,MAUJA,EAVIC,QAWJA,EAXIC,MAYJA,EAZIC,UAaJA,EAbIC,MAcJA,GAEErB,EADCsB,IACDtB,EAhBJuB,GAkBAC,GAAU,KACHvB,GAAgBG,IAAiBJ,EAAMG,SAASE,EAAWL,EAAMG,WACrE,CAACH,EAAMG,UAEV,IAAMsB,EAA6DC,GAChEC,IACCA,EAAEC,kBACsB,mBAAbf,GAAyBA,EAASc,KAE/C,CAAC1B,IAGH,IAAM4B,EAAa5B,EAAe,CAAEM,eAAgBH,GAAiB,CAAED,QAASC,GAEhF,OACE0B,EAACC,EAAD,CACEX,UAAWA,EACXC,MAAOA,EACPZ,SAAUA,EACVN,QAASC,EACTM,MAAOA,EACPsB,QAASrB,GAAMC,EACfE,KAAMA,EACNG,MAAOA,EACPE,MAAOA,EACPD,QAASA,EAVXV,SAAA,CAYEyB,iBACMX,GADN,GAAA,CAEEX,GAAIA,GAAMC,EACVA,KAAMA,EACNsB,KAAK,WACLrB,SAAUY,EACVV,MAAOA,EACPN,SAAUA,GACNoB,IAENC,EAAA,MAAA,CAAKK,QAAQ,YAAYC,MAAM,6BAA/B5B,SACE,CAAAyB,EAAA,OAAA,CACEI,EAAE,OACFC,EAAE,OACFnB,MAAM,SACNoB,OAAO,SACPC,GAAG,IACHC,UAAU,iBACVC,KAAK,OACLC,OAAO,UACPC,YAAY,MAEdd,EAAA,IAAA,CAAGY,KAAK,OAARlC,SACE,CAAAyB,EAAA,OAAA,CAAMS,KAAK,UAAUvB,MAAM,KAAKoB,OAAO,KAAKC,GAAG,MAC/CP,EAAA,OAAA,CAAMU,OAAO,OAAOC,YAAY,IAAIC,EAAE,8BAGxC7B,GAASR,IAAayB,EAAA,OAAA,CAAMb,UAAU,QAAhBZ,SAAyBQ,GAASR,OA9FhET,EAAS+C,aAAe,CACtBrC,UAAAA,EACAK,KAAM,SACNP,gBAAAA,EACAW,QAAS,cACTC,MAAO4B,EAAUC,EACjBnC,SAAWc,GAA2CsB,QAAQC,IAAIvB,EAAGA,EAAEwB,OAAOpC,QAGhFhB,EAASqD,MAAQC,EAEjBtD,EAASuD,YAAc"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { useTheme } from 'styled-components'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { SizeInput } from '../../shared/enums/sizeInput'\nimport { BaseProps } from '../../shared/interfaces'\nimport { CheckboxGroup } from './Group'\nimport * as Styled from './style'\n\ntype CheckboxInputHtmlAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'>\n\nexport interface CheckboxProps extends BaseProps, Display, CheckboxInputHtmlAttributes {\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * A checkbox can appear disabled and be unable to change states\n */\n disabled?: boolean\n /**\n * Field can show the data contains errors\n */\n error?: boolean\n /**\n * Whether or not checkbox is checked\n */\n checked?: boolean\n /**\n * Value\n */\n value?: string | number\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * Input element ID\n */\n id?: string\n /**\n * Input element name\n */\n name?: string\n /**\n * Input element label\n */\n label?: string\n /**\n * Checkbox size\n */\n size?: 'small' | 'medium' | 'large' | 'extraLarge' | 's' | 'm' | 'l' | 'xl'\n fluid?: boolean\n /**\n * Width of label. Default is `Theme.defaultInputControlsWidth`\n */\n width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>\n}\n\nCheckbox.defaultProps = {\n disabled: false,\n size: 'medium',\n defaultChecked: false,\n display: 'inline-flex',\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log(e, e.target.value), // eslint-disable-line no-console\n}\n\nCheckbox.Group = CheckboxGroup\n\nCheckbox.displayName = 'Checkbox'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - `React.InputHTMLAttributes<HTMLInputElement>`\n */\nexport function Checkbox(props: typeof Checkbox.defaultProps & CheckboxProps) {\n const uncontrolled = props.checked === undefined\n const theme = useTheme()\n const [checkedInput, setChecked] = useState(uncontrolled ? props.defaultChecked : props.checked)\n\n const {\n children,\n disabled,\n error,\n id,\n name,\n onChange,\n size,\n value,\n label,\n fluid,\n display,\n width = theme.defaultInputControlsWidth,\n className,\n style,\n ...anotherProps\n } = props\n\n useEffect(() => {\n if (!uncontrolled && checkedInput !== props.checked) setChecked(props.checked)\n }, [props.checked])\n\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n e.stopPropagation()\n if (typeof onChange === 'function') onChange(e)\n },\n [uncontrolled]\n )\n\n const inputProps = uncontrolled ? { defaultChecked: checkedInput } : { checked: checkedInput }\n\n return (\n <Styled.Root\n className={className}\n style={style}\n disabled={disabled}\n checked={checkedInput}\n error={error}\n htmlFor={id || name}\n size={size}\n fluid={fluid}\n width={width}\n display={display}\n >\n <input\n {...anotherProps}\n id={id || name}\n name={name}\n type='checkbox'\n onChange={handleOnChange}\n value={value}\n disabled={disabled}\n {...inputProps}\n />\n <svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>\n <rect\n x='.455'\n y='.455'\n width='19.091'\n height='19.091'\n rx='5'\n transform='translate(0 0)'\n fill='#fff'\n stroke='#B8B8B8'\n strokeWidth='1'\n />\n <g fill='none'>\n <rect fill='#48A1E6' width='20' height='20' rx='5' />\n <path stroke='#fff' strokeWidth='2' d='M6 9.99l3 3.01 6-6' />\n </g>\n </svg>\n {(label || children) && <span className='label'>{label || children}</span>}\n </Styled.Root>\n )\n}\n"],"names":["Checkbox","props","uncontrolled","undefined","checked","theme","useTheme","checkedInput","setChecked","useState","defaultChecked","children","disabled","error","id","name","onChange","size","value","label","fluid","display","width","defaultInputControlsWidth","className","style","anotherProps","_excluded","useEffect","handleOnChange","useCallback","e","stopPropagation","inputProps","_jsxs","Styled.Root","htmlFor","_jsx","type","viewBox","xmlns","x","y","height","rx","transform","fill","stroke","strokeWidth","d","defaultProps","console","log","target","Group","CheckboxGroup","displayName"],"mappings":"ieA4EO,SAASA,EAASC,GACvB,IAAMC,OAAiCC,IAAlBF,EAAMG,QAC3B,IAAMC,EAAQC,IACd,IAAOC,EAAcC,GAAcC,EAASP,EAAeD,EAAMS,eAAiBT,EAAMG,SAExF,IAAMO,SACJA,EADIC,SAEJA,EAFIC,MAGJA,EAHIC,GAIJA,EAJIC,KAKJA,EALIC,SAMJA,EANIC,KAOJA,EAPIC,MAQJA,EARIC,MASJA,EATIC,MAUJA,EAVIC,QAWJA,EAXIC,MAYJA,EAAQjB,EAAMkB,0BAZVC,UAaJA,EAbIC,MAcJA,GAEExB,EADCyB,IACDzB,EAhBJ0B,GAkBAC,GAAAA,KACO1B,GAAgBK,IAAiBN,EAAMG,SAASI,EAAWP,EAAMG,WACrE,CAACH,EAAMG,UAEV,IAAMyB,EAA6DC,GAChEC,IACCA,EAAEC,kBACsB,mBAAbhB,GAAyBA,EAASe,KAE/C,CAAC7B,IAGH,IAAM+B,EAAa/B,EAAe,CAAEQ,eAAgBH,GAAiB,CAAEH,QAASG,GAEhF,OACE2B,EAACC,EAAD,CACEX,UAAWA,EACXC,MAAOA,EACPb,SAAUA,EACVR,QAASG,EACTM,MAAOA,EACPuB,QAAStB,GAAMC,EACfE,KAAMA,EACNG,MAAOA,EACPE,MAAOA,EACPD,QAASA,EAVXV,SAAA,CAYE0B,iBACMX,GADN,GAAA,CAEEZ,GAAIA,GAAMC,EACVA,KAAMA,EACNuB,KAAK,WACLtB,SAAUa,EACVX,MAAOA,EACPN,SAAUA,GACNqB,IAENC,EAAA,MAAA,CAAKK,QAAQ,YAAYC,MAAM,6BAA/B7B,SACE,CAAA0B,EAAA,OAAA,CACEI,EAAE,OACFC,EAAE,OACFpB,MAAM,SACNqB,OAAO,SACPC,GAAG,IACHC,UAAU,iBACVC,KAAK,OACLC,OAAO,UACPC,YAAY,MAEdd,EAAA,IAAA,CAAGY,KAAK,OAARnC,SACE,CAAA0B,EAAA,OAAA,CAAMS,KAAK,UAAUxB,MAAM,KAAKqB,OAAO,KAAKC,GAAG,MAC/CP,EAAA,OAAA,CAAMU,OAAO,OAAOC,YAAY,IAAIC,EAAE,8BAGxC9B,GAASR,IAAa0B,EAAA,OAAA,CAAMb,UAAU,QAAhBb,SAAyBQ,GAASR,OA9FhEX,EAASkD,aAAe,CACtBtC,UAAAA,EACAK,KAAM,SACNP,gBAAgB,EAChBW,QAAS,cACTL,SAAWe,GAA2CoB,QAAQC,IAAIrB,EAAGA,EAAEsB,OAAOnC,QAGhFlB,EAASsD,MAAQC,EAEjBvD,EAASwD,YAAc"}
@@ -1,2 +1,2 @@
1
- import e from'@babel/runtime/helpers/objectSpread2';import{SizeInput as t}from'../../shared/enums/sizeInput.js';import{InputPhone as o}from'../Input.Phone/Input.Phone.js';import{Root as r}from'./style.js';import{jsx as s}from'react/jsx-runtime';function n(t){return s(r,e(e({},t),{},{mask:t.mask||''}))}n.defaultProps={rounded:!0,type:'text',width:t.l,color:'mineShaft',mask:'',placeholderColor:'silver'},n.Phone=o,n.displayName='Input';export{n as Input};
1
+ import t from'@babel/runtime/helpers/objectSpread2';import{useTheme as e}from'styled-components';import{InputPhone as o}from'../Input.Phone/Input.Phone.js';import{Root as r}from'./style.js';import{jsx as s}from'react/jsx-runtime';function n(o){var n=e();var{width:a=n.defaultInputControlsWidth}=o;return s(r,t(t({},o),{},{width:a,mask:o.mask||''}))}n.defaultProps={rounded:!0,type:'text',color:'mineShaft',mask:'',placeholderColor:'silver'},n.Phone=o,n.displayName='Input';export{n as Input};
2
2
  //# sourceMappingURL=Input.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { InputState, MaskOptions } from 'react-input-mask'\nimport { SizeInput } from 'shared/enums/sizeInput'\nimport { InputPhone } from '../../components/Input.Phone'\nimport { BaseProps, InputField } from '../../shared/interfaces'\nimport * as Styled from './style'\n\ntype InputHTMLAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'width'>\n\nexport interface InputProps extends BaseProps, InputField, InputHTMLAttributes {\n /**\n * Mask string. Format characters are:\n * * `9`: `0-9`\n * * `a`: `A-Z, a-z`\n * * `\\*`: `A-Z, a-z, 0-9`\n *\n * Any character can be escaped with backslash, which usually will appear as double backslash in JS strings.\n * For example, German phone mask with unremoveable prefix +49 will look like `mask=\"+4\\\\9 99 999 99\"` or `mask={\"+4\\\\\\\\9 99 999 99\"}`\n */\n mask?: string | Array<string | RegExp>\n /**\n * Character to cover unfilled editable parts of mask. Default character is \"_\". If set to null, unfilled parts will be empty, like in ordinary input.\n */\n maskChar?: string | null\n /**\n * Defines format characters with characters as keys and corresponding RegExp string as values. Default ones:\n * ```\n * {\n * \"9\": \"[0-9]\",\n * \"a\": \"[A-Za-z]\",\n * \"*\": \"[A-Za-z0-9]\"\n * }```\n */\n formatChars?: { [key: string]: string }\n /**\n * Show mask even in empty input without focus.\n */\n alwaysShowMask?: boolean\n /**\n * Use inputRef instead of ref if you need input node to manage focus, selection, etc.\n */\n inputRef?: React.Ref<HTMLInputElement>\n\n /**\n * In case you need to implement more complex masking behavior, you can provide\n * beforeMaskedValueChange function to change masked value and cursor position\n * before it will be applied to the input.\n */\n beforeMaskedValueChange?(\n _newState: InputState,\n _oldState: InputState,\n _userInput: string,\n _maskOptions: MaskOptions\n ): InputState\n /**\n * Input type\n */\n type?: string\n dataset?: Record<string, string>\n}\n\nInput.defaultProps = {\n rounded: true,\n type: 'text',\n width: SizeInput.l,\n color: 'mineShaft',\n mask: '',\n placeholderColor: 'silver',\n}\n\nInput.Phone = InputPhone\nInput.displayName = 'Input'\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`InputField`](#/Миксины)\n * - `React.InputHTMLAttributes<HTMLInputElement>`\n */\nexport function Input(props: InputProps) {\n return <Styled.Root {...props} mask={props.mask || ''} />\n}\n"],"names":["Input","props","_jsx","Styled.Root","mask","defaultProps","rounded","type","width","SizeInput","l","color","placeholderColor","Phone","InputPhone","displayName"],"mappings":"qPA6EO,SAASA,EAAMC,GACpB,OAAOC,EAACC,SAAgBF,GAAjB,GAAA,CAAwBG,KAAMH,EAAMG,MAAQ,MAlBrDJ,EAAMK,aAAe,CACnBC,SAAAA,EACAC,KAAM,OACNC,MAAOC,EAAUC,EACjBC,MAAO,YACPP,KAAM,GACNQ,iBAAkB,UAGpBZ,EAAMa,MAAQC,EACdd,EAAMe,YAAc"}
1
+ {"version":3,"file":"Input.js","sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { InputState, MaskOptions } from 'react-input-mask'\nimport { useTheme } from 'styled-components'\nimport { InputPhone } from '../../components/Input.Phone'\nimport { BaseProps, InputField } from '../../shared/interfaces'\nimport * as Styled from './style'\n\ntype InputHTMLAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'color' | 'width'>\n\nexport interface InputProps extends BaseProps, InputField, InputHTMLAttributes {\n /**\n * Mask string. Format characters are:\n * * `9`: `0-9`\n * * `a`: `A-Z, a-z`\n * * `\\*`: `A-Z, a-z, 0-9`\n *\n * Any character can be escaped with backslash, which usually will appear as double backslash in JS strings.\n * For example, German phone mask with unremoveable prefix +49 will look like `mask=\"+4\\\\9 99 999 99\"` or `mask={\"+4\\\\\\\\9 99 999 99\"}`\n */\n mask?: string | Array<string | RegExp>\n /**\n * Character to cover unfilled editable parts of mask. Default character is \"_\". If set to null, unfilled parts will be empty, like in ordinary input.\n */\n maskChar?: string | null\n /**\n * Defines format characters with characters as keys and corresponding RegExp string as values. Default ones:\n * ```\n * {\n * \"9\": \"[0-9]\",\n * \"a\": \"[A-Za-z]\",\n * \"*\": \"[A-Za-z0-9]\"\n * }```\n */\n formatChars?: { [key: string]: string }\n /**\n * Show mask even in empty input without focus.\n */\n alwaysShowMask?: boolean\n /**\n * Use inputRef instead of ref if you need input node to manage focus, selection, etc.\n */\n inputRef?: React.Ref<HTMLInputElement>\n\n /**\n * In case you need to implement more complex masking behavior, you can provide\n * beforeMaskedValueChange function to change masked value and cursor position\n * before it will be applied to the input.\n */\n beforeMaskedValueChange?(\n _newState: InputState,\n _oldState: InputState,\n _userInput: string,\n _maskOptions: MaskOptions\n ): InputState\n /**\n * Input type\n */\n type?: string\n dataset?: Record<string, string>\n}\n\nInput.defaultProps = {\n rounded: true,\n type: 'text',\n color: 'mineShaft',\n mask: '',\n placeholderColor: 'silver',\n}\n\nInput.Phone = InputPhone\nInput.displayName = 'Input'\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`InputField`](#/Миксины)\n * - `React.InputHTMLAttributes<HTMLInputElement>`\n */\nexport function Input(props: InputProps) {\n const theme = useTheme()\n\n const { width = theme.defaultInputControlsWidth } = props\n\n return <Styled.Root {...props} width={width} mask={props.mask || ''} />\n}\n"],"names":["Input","props","theme","useTheme","width","defaultInputControlsWidth","_jsx","Styled.Root","mask","defaultProps","rounded","type","color","placeholderColor","Phone","InputPhone","displayName"],"mappings":"sOA4EO,SAASA,EAAMC,GACpB,IAAMC,EAAQC,IAEd,IAAMC,MAAEA,EAAQF,EAAMG,2BAA8BJ,EAEpD,OAAOK,EAACC,SAAgBN,GAAjB,GAAA,CAAwBG,MAAOA,EAAOI,KAAMP,EAAMO,MAAQ,MArBnER,EAAMS,aAAe,CACnBC,SAAS,EACTC,KAAM,OACNC,MAAO,YACPJ,KAAM,GACNK,iBAAkB,UAGpBb,EAAMc,MAAQC,EACdf,EAAMgB,YAAc"}
@@ -1,2 +1,2 @@
1
- import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{useState as s,useEffect as r,useCallback as i}from'react';import{useClassname as l}from'../../hooks/useClassname.js';import{SizeInput as o}from'../../shared/enums/sizeInput.js';import{RadioGroup as d}from'./Group.js';import{Root as t}from'./style.js';import{jsxs as c,jsx as n}from'react/jsx-runtime';var m=["children","disabled","error","id","name","onChange","size","value","label","className","width","style","fluid","display"];function p(o){var d=void 0===o.checked;var[h,u]=s(d?o.defaultChecked:o.checked);var{children:f,disabled:b,error:v,id:k,name:y,onChange:g,size:C,value:j,label:w,className:x,width:z,style:N,fluid:R,display:G}=o,P=a(o,m);var S=l(p.displayName,x);r((()=>{d||h===o.checked||u(o.checked)}),[o.checked]);var A=i((e=>{e.stopPropagation(),'function'==typeof g&&g(e)}),[d]);var D=d?{defaultChecked:h}:{checked:h};return c(t,{className:S,style:N,disabled:b,checked:h,error:v,htmlFor:k||y,size:C,width:z,display:G,fluid:R,children:[n("input",e(e({},P),{},{id:k||y,name:y,type:"radio",onChange:A,value:j,disabled:b},D)),c("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:[n("circle",{cx:"10",cy:"10",r:"9",stroke:"#727D8A",strokeWidth:"2",fill:"#fff"}),n("circle",{cx:"10",cy:"10",r:"5",fill:"#727D8A"})]}),(w||f)&&n("span",{className:"label",children:w||f})]})}p.defaultProps={disabled:!1,size:'medium',defaultChecked:!1,display:'inline-flex',width:o.l,onChange:e=>console.log(e,e.target.value)},p.Group=d,p.displayName='Radio';export{p as Radio};
1
+ import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{useState as s,useEffect as r,useCallback as l}from'react';import{useTheme as i}from'styled-components';import{useClassname as o}from'../../hooks/useClassname.js';import{RadioGroup as t}from'./Group.js';import{Root as d}from'./style.js';import{jsxs as c,jsx as n}from'react/jsx-runtime';var m=["children","disabled","error","id","name","onChange","size","value","label","className","width","style","fluid","display"];function p(t){var h=void 0===t.checked;var[u,f]=s(h?t.defaultChecked:t.checked);var v=i();var{children:b,disabled:y,error:k,id:C,name:g,onChange:x,size:j,value:w,label:N,className:z,width:R=v.defaultInputControlsWidth,style:G,fluid:P,display:W}=t,A=a(t,m);var D=o(p.displayName,z);r((()=>{h||u===t.checked||f(t.checked)}),[t.checked]);var S=l((e=>{e.stopPropagation(),'function'==typeof x&&x(e)}),[h]);var B=h?{defaultChecked:u}:{checked:u};return c(d,{className:D,style:G,disabled:y,checked:u,error:k,htmlFor:C||g,size:j,width:R,display:W,fluid:P,children:[n("input",e(e({},A),{},{id:C||g,name:g,type:"radio",onChange:S,value:w,disabled:y},B)),c("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:[n("circle",{cx:"10",cy:"10",r:"9",stroke:"#727D8A",strokeWidth:"2",fill:"#fff"}),n("circle",{cx:"10",cy:"10",r:"5",fill:"#727D8A"})]}),(N||b)&&n("span",{className:"label",children:N||b})]})}p.defaultProps={disabled:!1,size:'medium',defaultChecked:!1,display:'inline-flex',onChange:e=>console.log(e,e.target.value)},p.Group=t,p.displayName='Radio';export{p as Radio};
2
2
  //# sourceMappingURL=Radio.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { useClassname } from 'hooks/useClassname'\nimport { BaseProps } from '../../shared/interfaces'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { SizeInput } from '../../shared/enums/sizeInput'\nimport { Display } from '../../mixins/display'\nimport { RadioGroup } from './Group'\nimport * as Styled from './style'\n\ntype RadioInputHtmlAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'>\n\nexport interface RadioProps extends BaseProps, Display, RadioInputHtmlAttributes {\n /**\n * Field id\n */\n id?: string\n /**\n * Field name\n */\n name?: string\n /**\n * Radio label\n */\n label?: string\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * A Radio can appear disabled and be unable to change states\n */\n disabled?: boolean\n /**\n * Field can show the data contains errors\n */\n error?: boolean\n /**\n * Whether or not Radio is checked\n */\n checked?: boolean\n defaultChecked?: boolean\n /**\n * Checkbox size\n */\n size?: 'small' | 'medium' | 'large'\n /**\n * Value\n */\n value?: string | number\n fluid?: boolean\n width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>\n}\n\nRadio.defaultProps = {\n disabled: false,\n size: 'medium',\n defaultChecked: false,\n display: 'inline-flex',\n width: SizeInput.l,\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log(e, e.target.value), // eslint-disable-line no-console\n}\n\nRadio.Group = RadioGroup\nRadio.displayName = 'Radio'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - `React.InputHTMLAttributes<HTMLInputElement>`\n */\nexport function Radio(props: typeof Radio.defaultProps & RadioProps) {\n const uncontrolled = props.checked === undefined\n const [checkedInput, setChecked] = useState(uncontrolled ? props.defaultChecked : props.checked)\n\n const {\n children,\n disabled,\n error,\n id,\n name,\n onChange,\n size,\n value,\n label,\n className,\n width,\n style,\n fluid,\n display,\n ...anotherProps\n } = props\n const _className = useClassname(Radio.displayName, className)\n\n useEffect(() => {\n if (!uncontrolled && checkedInput !== props.checked) setChecked(props.checked)\n }, [props.checked])\n\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n e.stopPropagation()\n if (typeof onChange === 'function') onChange(e)\n },\n [uncontrolled]\n )\n\n const inputProps = uncontrolled ? { defaultChecked: checkedInput } : { checked: checkedInput }\n\n return (\n <Styled.Root\n className={_className}\n style={style}\n disabled={disabled}\n checked={checkedInput}\n error={error}\n htmlFor={id || name}\n size={size}\n width={width}\n display={display}\n fluid={fluid}\n >\n <input\n {...anotherProps}\n id={id || name}\n name={name}\n type='radio'\n onChange={handleOnChange}\n value={value}\n disabled={disabled}\n {...inputProps}\n />\n <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\n <circle cx='10' cy='10' r='9' stroke='#727D8A' strokeWidth='2' fill='#fff' />\n <circle cx='10' cy='10' r='5' fill='#727D8A' />\n </svg>\n {(label || children) && <span className='label'>{label || children}</span>}\n </Styled.Root>\n )\n}\n"],"names":["Radio","props","uncontrolled","checked","checkedInput","setChecked","useState","defaultChecked","children","disabled","error","id","name","onChange","size","value","label","className","width","style","fluid","display","anotherProps","_excluded","_className","useClassname","displayName","useEffect","handleOnChange","useCallback","e","stopPropagation","inputProps","_jsxs","Styled.Root","htmlFor","_jsx","type","xmlns","viewBox","cx","cy","r","stroke","strokeWidth","fill","defaultProps","SizeInput","l","console","log","target","Group","RadioGroup"],"mappings":"wiBA0EO,SAASA,EAAMC,GACpB,IAAMC,OAAAA,IAAeD,EAAME,QAC3B,IAAOC,EAAcC,GAAcC,EAASJ,EAAeD,EAAMM,eAAiBN,EAAME,SAExF,IAAMK,SACJA,EADIC,SAEJA,EAFIC,MAGJA,EAHIC,GAIJA,EAJIC,KAKJA,EALIC,SAMJA,EANIC,KAOJA,EAPIC,MAQJA,EARIC,MASJA,EATIC,UAUJA,EAVIC,MAWJA,EAXIC,MAYJA,EAZIC,MAaJA,EAbIC,QAcJA,GAEEpB,EADCqB,IACDrB,EAhBJsB,GAiBA,IAAMC,EAAaC,EAAazB,EAAM0B,YAAaT,GAEnDU,GAAAA,KACOzB,GAAgBE,IAAiBH,EAAME,SAASE,EAAWJ,EAAME,WACrE,CAACF,EAAME,UAEV,IAAMyB,EAA6DC,GAChEC,IACCA,EAAEC,kBACsB,mBAAblB,GAAyBA,EAASiB,KAE/C,CAAC5B,IAGH,IAAM8B,EAAa9B,EAAe,CAAEK,eAAgBH,GAAiB,CAAED,QAASC,GAEhF,OACE6B,EAACC,EAAD,CACEjB,UAAWO,EACXL,MAAOA,EACPV,SAAUA,EACVN,QAASC,EACTM,MAAOA,EACPyB,QAASxB,GAAMC,EACfE,KAAMA,EACNI,MAAOA,EACPG,QAASA,EACTD,MAAOA,EAVTZ,SAAA,CAYE4B,iBACMd,GADN,GAAA,CAEEX,GAAIA,GAAMC,EACVA,KAAMA,EACNyB,KAAK,QACLxB,SAAUe,EACVb,MAAOA,EACPN,SAAUA,GACNuB,IAENC,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,YAAhD/B,SACE,CAAA4B,EAAA,SAAA,CAAQI,GAAG,KAAKC,GAAG,KAAKC,EAAE,IAAIC,OAAO,UAAUC,YAAY,IAAIC,KAAK,SACpET,EAAA,SAAA,CAAQI,GAAG,KAAKC,GAAG,KAAKC,EAAE,IAAIG,KAAK,gBAEnC7B,GAASR,IAAa4B,EAAA,OAAA,CAAMnB,UAAU,QAAhBT,SAAyBQ,GAASR,OAjFhER,EAAM8C,aAAe,CACnBrC,UAAU,EACVK,KAAM,SACNP,gBAAgB,EAChBc,QAAS,cACTH,MAAO6B,EAAUC,EACjBnC,SAAWiB,GAA2CmB,QAAQC,IAAIpB,EAAGA,EAAEqB,OAAOpC,QAGhFf,EAAMoD,MAAQC,EACdrD,EAAM0B,YAAc"}
1
+ {"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { useTheme } from 'styled-components'\nimport { useClassname } from 'hooks/useClassname'\nimport { BaseProps } from '../../shared/interfaces'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport { SizeInput } from '../../shared/enums/sizeInput'\nimport { Display } from '../../mixins/display'\nimport { RadioGroup } from './Group'\nimport * as Styled from './style'\n\ntype RadioInputHtmlAttributes = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'>\n\nexport interface RadioProps extends BaseProps, Display, RadioInputHtmlAttributes {\n /**\n * Field id\n */\n id?: string\n /**\n * Field name\n */\n name?: string\n /**\n * Radio label\n */\n label?: string\n /**\n * On change handler\n */\n onChange?(_e: React.ChangeEvent<HTMLInputElement>): void\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * A Radio can appear disabled and be unable to change states\n */\n disabled?: boolean\n /**\n * Field can show the data contains errors\n */\n error?: boolean\n /**\n * Whether or not Radio is checked\n */\n checked?: boolean\n defaultChecked?: boolean\n /**\n * Checkbox size\n */\n size?: 'small' | 'medium' | 'large'\n /**\n * Value\n */\n value?: string | number\n fluid?: boolean\n /**\n * Width of label. Default is `Theme.defaultInputControlsWidth`\n */\n width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>\n}\n\nRadio.defaultProps = {\n disabled: false,\n size: 'medium',\n defaultChecked: false,\n display: 'inline-flex',\n onChange: (e: React.ChangeEvent<HTMLInputElement>) => console.log(e, e.target.value), // eslint-disable-line no-console\n}\n\nRadio.Group = RadioGroup\nRadio.displayName = 'Radio'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - `React.InputHTMLAttributes<HTMLInputElement>`\n */\nexport function Radio(props: typeof Radio.defaultProps & RadioProps) {\n const uncontrolled = props.checked === undefined\n const [checkedInput, setChecked] = useState(uncontrolled ? props.defaultChecked : props.checked)\n const theme = useTheme()\n const {\n children,\n disabled,\n error,\n id,\n name,\n onChange,\n size,\n value,\n label,\n className,\n width = theme.defaultInputControlsWidth,\n style,\n fluid,\n display,\n ...anotherProps\n } = props\n const _className = useClassname(Radio.displayName, className)\n\n useEffect(() => {\n if (!uncontrolled && checkedInput !== props.checked) setChecked(props.checked)\n }, [props.checked])\n\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n e.stopPropagation()\n if (typeof onChange === 'function') onChange(e)\n },\n [uncontrolled]\n )\n\n const inputProps = uncontrolled ? { defaultChecked: checkedInput } : { checked: checkedInput }\n\n return (\n <Styled.Root\n className={_className}\n style={style}\n disabled={disabled}\n checked={checkedInput}\n error={error}\n htmlFor={id || name}\n size={size}\n width={width}\n display={display}\n fluid={fluid}\n >\n <input\n {...anotherProps}\n id={id || name}\n name={name}\n type='radio'\n onChange={handleOnChange}\n value={value}\n disabled={disabled}\n {...inputProps}\n />\n <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\n <circle cx='10' cy='10' r='9' stroke='#727D8A' strokeWidth='2' fill='#fff' />\n <circle cx='10' cy='10' r='5' fill='#727D8A' />\n </svg>\n {(label || children) && <span className='label'>{label || children}</span>}\n </Styled.Root>\n )\n}\n"],"names":["Radio","props","uncontrolled","undefined","checked","checkedInput","setChecked","useState","defaultChecked","theme","useTheme","children","disabled","error","id","name","onChange","size","value","label","className","width","defaultInputControlsWidth","style","fluid","display","anotherProps","_excluded","_className","useClassname","displayName","useEffect","handleOnChange","useCallback","e","stopPropagation","inputProps","_jsxs","Styled.Root","htmlFor","_jsx","type","xmlns","viewBox","cx","cy","r","stroke","strokeWidth","fill","defaultProps","console","log","target","Group","RadioGroup"],"mappings":"yhBA6EO,SAASA,EAAMC,GACpB,IAAMC,OAAiCC,IAAlBF,EAAMG,QAC3B,IAAOC,EAAcC,GAAcC,EAASL,EAAeD,EAAMO,eAAiBP,EAAMG,SACxF,IAAMK,EAAQC,IACd,IAAMC,SACJA,EADIC,SAEJA,EAFIC,MAGJA,EAHIC,GAIJA,EAJIC,KAKJA,EALIC,SAMJA,EANIC,KAOJA,EAPIC,MAQJA,EARIC,MASJA,EATIC,UAUJA,EAVIC,MAWJA,EAAQZ,EAAMa,0BAXVC,MAYJA,EAZIC,MAaJA,EAbIC,QAcJA,GAEExB,EADCyB,IACDzB,EAhBJ0B,GAiBA,IAAMC,EAAaC,EAAa7B,EAAM8B,YAAaV,GAEnDW,GAAAA,KACO7B,GAAgBG,IAAiBJ,EAAMG,SAASE,EAAWL,EAAMG,WACrE,CAACH,EAAMG,UAEV,IAAM4B,EAA6DC,GAChEC,IACCA,EAAEC,kBACsB,mBAAbnB,GAAyBA,EAASkB,KAE/C,CAAChC,IAGH,IAAMkC,EAAalC,EAAe,CAAEM,eAAgBH,GAAiB,CAAED,QAASC,GAEhF,OACEgC,EAACC,EAAD,CACElB,UAAWQ,EACXL,MAAOA,EACPX,SAAUA,EACVR,QAASC,EACTQ,MAAOA,EACP0B,QAASzB,GAAMC,EACfE,KAAMA,EACNI,MAAOA,EACPI,QAASA,EACTD,MAAOA,EAVTb,SAAA,CAYE6B,iBACMd,GADN,GAAA,CAEEZ,GAAIA,GAAMC,EACVA,KAAMA,EACN0B,KAAK,QACLzB,SAAUgB,EACVd,MAAOA,EACPN,SAAUA,GACNwB,IAENC,EAAA,MAAA,CAAKK,MAAM,6BAA6BC,QAAQ,YAAhDhC,SACE,CAAA6B,EAAA,SAAA,CAAQI,GAAG,KAAKC,GAAG,KAAKC,EAAE,IAAIC,OAAO,UAAUC,YAAY,IAAIC,KAAK,SACpET,EAAA,SAAA,CAAQI,GAAG,KAAKC,GAAG,KAAKC,EAAE,IAAIG,KAAK,gBAEnC9B,GAASR,IAAa6B,EAAA,OAAA,CAAMpB,UAAU,QAAhBT,SAAyBQ,GAASR,OAhFhEX,EAAMkD,aAAe,CACnBtC,UAAAA,EACAK,KAAM,SACNT,gBAAAA,EACAiB,QAAS,cACTT,SAAWkB,GAA2CiB,QAAQC,IAAIlB,EAAGA,EAAEmB,OAAOnC,QAGhFlB,EAAMsD,MAAQC,EACdvD,EAAM8B,YAAc"}
@@ -1,2 +1,2 @@
1
- import i from'@babel/runtime/helpers/taggedTemplateLiteral';import l,{css as n}from'styled-components';import{screenMaxS as e}from'../../mixins/screen.js';import{responsiveProperty as r}from'../../mixins/responsive-property.js';import{display as o}from'../../mixins/display.js';var t;var a=function(i){var l=arguments.length>0&&void 0!==i?i:14;return n(["font-size:","px;svg{width:","px;height:","px;}"],l,l,l)};var s=n(["cursor:not-allowed;color:#d4d4d4;svg{circle:nth-child(1){stroke:#d4d4d4;}circle:nth-child(2){fill:#d4d4d4;}}span.label{cursor:not-allowed;}"]);var d=n(["svg{circle{fill:#ffeef0;stroke:#ffa3a3;}circle:nth-child(2){fill:#ffa3a3;}}"]);var p=l.label.withConfig({shouldForwardProp:i=>!['size','error','fluid','width','display'].includes(i)}).withConfig({componentId:"fox-ui__sc-1u0nc40-0"})(["align-items:baseline;user-select:none;cursor:pointer;width:auto;svg{position:relative;top:2px;flex-shrink:0;circle:nth-child(2){opacity:0;transition:all 0.2s ease;}}& + &{margin-left:15px;}input{display:none;appearance:none;&:checked + svg{circle:nth-child(2){opacity:1;transform:scale(1);}}}span.label{margin-left:10px;cursor:pointer;}"," "," "," "," "," "," "," ",""],(i=>'small'===i.size?a(14):null),(i=>'medium'===i.size?a(16):null),(i=>'large'===i.size?a(18):null),(i=>i.disabled?s:null),(i=>i.error?d:null),(i=>i.display?o(i.display):null),(i=>r('width',i.fluid&&'auto'!==i.width?'max-width':'width')),(i=>i.fluid?n(["width:100%;"]):null));var c=l.div.withConfig({shouldForwardProp:i=>'inline'!==i}).withConfig({componentId:"fox-ui__sc-1u0nc40-1"})(["display:flex;flex-direction:column;line-height:normal;> ","{margin-left:0;&:not(:first-child){margin-top:15px;}}",""],p,(l=>l.inline?n(["flex-direction:row;&&& > ","{margin-top:0;}> "," + ","{margin-left:15px;}",""],p,p,p,e()(t||(t=i(["\n flex-direction: column;\n > &{Root} {\n margin-top: 0;\n }\n > "," + "," {\n margin-left: 0;\n margin-top: 15px;\n }\n "])),p,p)):null));export{c as Group,p as Root};
1
+ import i from'@babel/runtime/helpers/taggedTemplateLiteral';import l,{css as e}from'styled-components';import{screenMaxS as n}from'../../mixins/screen.js';import{responsiveProperty as r}from'../../mixins/responsive-property.js';import{display as o}from'../../mixins/display.js';var t;var a=function(i){var l=arguments.length>0&&void 0!==i?i:14;return e(["font-size:","px;svg{width:","px;height:","px;}"],l,l,l)};var s=e(["cursor:not-allowed;color:#d4d4d4;svg{circle:nth-child(1){stroke:#d4d4d4;}circle:nth-child(2){fill:#d4d4d4;}}span.label{cursor:not-allowed;}"]);var d=e(["svg{circle{fill:#ffeef0;stroke:#ffa3a3;}circle:nth-child(2){fill:#ffa3a3;}}"]);var c=l.label.withConfig({shouldForwardProp:i=>!['size','error','fluid','width','display'].includes(i)}).withConfig({componentId:"fox-ui__sc-1u0nc40-0"})(["align-items:baseline;user-select:none;cursor:pointer;width:auto;svg{position:relative;top:2px;flex-shrink:0;circle:nth-child(2){opacity:0;transition:all 0.2s ease;}}& + &{margin-left:15px;}input{display:none;appearance:none;&:checked + svg{circle:nth-child(2){opacity:1;transform:scale(1);}","}}span.label{margin-left:10px;cursor:pointer;}"," "," "," "," "," "," "," ",""],(i=>i.error?null:e(["circle:not(:disabled){stroke:#48a1e6;}circle:not(:disabled):last-child{fill:#48a1e6;}"])),(i=>'small'===i.size?a(14):null),(i=>'medium'===i.size?a(16):null),(i=>'large'===i.size?a(18):null),(i=>i.disabled?s:null),(i=>i.error?d:null),(i=>i.display?o(i.display):null),(i=>r('width',i.fluid&&'auto'!==i.width?'max-width':'width')),(i=>i.fluid?e(["width:100%;"]):null));var p=l.div.withConfig({shouldForwardProp:i=>'inline'!==i}).withConfig({componentId:"fox-ui__sc-1u0nc40-1"})(["display:flex;flex-direction:column;line-height:normal;> ","{margin-left:0;&:not(:first-child){margin-top:15px;}}",""],c,(l=>l.inline?e(["flex-direction:row;&&& > ","{margin-top:0;}> "," + ","{margin-left:15px;}",""],c,c,c,n()(t||(t=i(["\n flex-direction: column;\n > &{Root} {\n margin-top: 0;\n }\n > "," + "," {\n margin-left: 0;\n margin-top: 15px;\n }\n "])),c,c)):null));export{p as Group,c as Root};
2
2
  //# sourceMappingURL=style.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"style.js","sources":["../../../../src/components/Radio/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from '../../mixins/responsive-property'\nimport { display } from '../../mixins/display'\nimport { RadioGroupProps } from './Group'\nimport { RadioProps } from './Radio'\n\nconst sizeRadio = (size = 14) => css`\n font-size: ${size}px;\n svg {\n width: ${size}px;\n height: ${size}px;\n }\n`\n\nconst disabled = css`\n cursor: not-allowed;\n color: #d4d4d4;\n svg {\n circle:nth-child(1) {\n stroke: #d4d4d4;\n }\n circle:nth-child(2) {\n fill: #d4d4d4;\n }\n }\n span.label {\n cursor: not-allowed;\n }\n`\n\nconst error = css`\n svg {\n circle {\n fill: #ffeef0;\n stroke: #ffa3a3;\n }\n circle:nth-child(2) {\n fill: #ffa3a3;\n }\n }\n`\n\nexport const Root = styled.label.withConfig<RadioProps>({\n shouldForwardProp: (prop) => !['size', 'error', 'fluid', 'width', 'display'].includes(prop),\n})`\n align-items: baseline;\n user-select: none;\n cursor: pointer;\n width: auto;\n svg {\n position: relative;\n top: 2px;\n flex-shrink: 0;\n circle:nth-child(2) {\n opacity: 0;\n transition: all 0.2s ease;\n }\n }\n & + & {\n margin-left: 15px;\n }\n input {\n display: none;\n appearance: none;\n &:checked + svg {\n circle:nth-child(2) {\n opacity: 1;\n transform: scale(1);\n }\n }\n }\n span.label {\n margin-left: 10px;\n cursor: pointer;\n }\n ${(props) => (props.size === 'small' ? sizeRadio(14) : null)}\n ${(props) => (props.size === 'medium' ? sizeRadio(16) : null)}\n ${(props) => (props.size === 'large' ? sizeRadio(18) : null)}\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (props.error ? error : null)}\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => responsiveProperty('width', props.fluid && props.width !== 'auto' ? 'max-width' : 'width')}\n ${(props) =>\n props.fluid\n ? css`\n width: 100%;\n `\n : null}\n`\n\nexport const Group = styled.div.withConfig<RadioGroupProps>({\n shouldForwardProp: (prop) => prop !== 'inline',\n})`\n display: flex;\n flex-direction: column;\n line-height: normal;\n > ${Root} {\n margin-left: 0;\n &:not(:first-child) {\n margin-top: 15px;\n }\n }\n ${(props) =>\n props.inline\n ? css`\n flex-direction: row;\n &&& > ${Root} {\n margin-top: 0;\n }\n > ${Root} + ${Root} {\n margin-left: 15px;\n }\n ${screenMaxS()`\n flex-direction: column;\n > &{Root} {\n margin-top: 0;\n }\n > ${Root} + ${Root} {\n margin-left: 0;\n margin-top: 15px;\n }\n `}\n `\n : null}\n`\n"],"names":["sizeRadio","i","size","css","disabled","error","Root","styled","label","withConfig","shouldForwardProp","prop","includes","componentId","props","display","responsiveProperty","fluid","width","Group","div","inline","screenMaxS","_templateObject","_taggedTemplateLiteral"],"mappings":"4RAOA,IAAMA,EAAY,SAAAC,GAAA,IAACC,+BAADD,EAAAA,EAAQ,GAAR,OAAeE,EAClBD,CAAAA,aAAAA,gBAAAA,aAAAA,QAAAA,EAEFA,EACCA,IAId,IAAME,EAAWD,EAAjB,CAAA,gJAgBA,IAAME,EAAQF,EAAd,CAAA,gFAYO,IAAMG,EAAOC,EAAOC,MAAMC,WAAuB,CACtDC,kBAAoBC,IAAU,CAAC,OAAQ,QAAS,QAAS,QAAS,WAAWC,SAASD,KADvEF,WAAA,CAAAI,YAAA,wBAAGN,CAiCfO,CAAAA,mVAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,KAAAA,GAA0B,UAAfA,EAAMZ,KAAmBF,EAAU,IAAM,OACpDc,GAA0B,WAAfA,EAAMZ,KAAoBF,EAAU,IAAM,OACrDc,GAA0B,UAAfA,EAAMZ,KAAmBF,EAAU,IAAM,OACpDc,GAAWA,EAAMV,SAAWA,EAAW,OACvCU,GAAWA,EAAMT,MAAQA,EAAQ,OACjCS,GAAWA,EAAMC,QAAUA,EAAQD,EAAMC,SAAW,OACpDD,GAAUE,EAAmB,QAASF,EAAMG,OAAyB,SAAhBH,EAAMI,MAAmB,YAAc,WAC5FJ,GACDA,EAAMG,MACFd,EAGA,CAAA,gBAAA,OAGD,IAAMgB,EAAQZ,EAAOa,IAAIX,WAA4B,CAC1DC,kBAAoBC,GAAkB,WAATA,IADbF,WAAA,CAAAI,YAAA,wBAAGN,CAMfD,CAAAA,2DAAAA,wDAAAA,IAAAA,GAMDQ,GACDA,EAAMO,OACFlB,EADJ,CAAA,4BAAA,oBAAA,MAAA,sBAAA,IAGcG,EAGJA,EAAUA,EAGZgB,GAAAA,CATRC,IAAAA,EAAAC,EAAA,CAAA,8HAAA,MAAA,mGAcYlB,EAAUA,IAMlB"}
1
+ {"version":3,"file":"style.js","sources":["../../../../src/components/Radio/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from '../../mixins/responsive-property'\nimport { display } from '../../mixins/display'\nimport { RadioGroupProps } from './Group'\nimport { RadioProps } from './Radio'\n\nconst sizeRadio = (size = 14) => css`\n font-size: ${size}px;\n svg {\n width: ${size}px;\n height: ${size}px;\n }\n`\n\nconst disabled = css`\n cursor: not-allowed;\n color: #d4d4d4;\n svg {\n circle:nth-child(1) {\n stroke: #d4d4d4;\n }\n circle:nth-child(2) {\n fill: #d4d4d4;\n }\n }\n span.label {\n cursor: not-allowed;\n }\n`\n\nconst error = css`\n svg {\n circle {\n fill: #ffeef0;\n stroke: #ffa3a3;\n }\n circle:nth-child(2) {\n fill: #ffa3a3;\n }\n }\n`\n\nexport const Root = styled.label.withConfig<RadioProps>({\n shouldForwardProp: (prop) => !['size', 'error', 'fluid', 'width', 'display'].includes(prop),\n})`\n align-items: baseline;\n user-select: none;\n cursor: pointer;\n width: auto;\n svg {\n position: relative;\n top: 2px;\n flex-shrink: 0;\n circle:nth-child(2) {\n opacity: 0;\n transition: all 0.2s ease;\n }\n }\n & + & {\n margin-left: 15px;\n }\n input {\n display: none;\n appearance: none;\n &:checked + svg {\n circle:nth-child(2) {\n opacity: 1;\n transform: scale(1);\n }\n ${(props) =>\n !props.error\n ? css`\n circle:not(:disabled) {\n stroke: #48a1e6;\n }\n circle:not(:disabled):last-child {\n fill: #48a1e6;\n }\n `\n : null}\n }\n }\n span.label {\n margin-left: 10px;\n cursor: pointer;\n }\n ${(props) => (props.size === 'small' ? sizeRadio(14) : null)}\n ${(props) => (props.size === 'medium' ? sizeRadio(16) : null)}\n ${(props) => (props.size === 'large' ? sizeRadio(18) : null)}\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (props.error ? error : null)}\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => responsiveProperty('width', props.fluid && props.width !== 'auto' ? 'max-width' : 'width')}\n ${(props) =>\n props.fluid\n ? css`\n width: 100%;\n `\n : null}\n`\n\nexport const Group = styled.div.withConfig<RadioGroupProps>({\n shouldForwardProp: (prop) => prop !== 'inline',\n})`\n display: flex;\n flex-direction: column;\n line-height: normal;\n > ${Root} {\n margin-left: 0;\n &:not(:first-child) {\n margin-top: 15px;\n }\n }\n ${(props) =>\n props.inline\n ? css`\n flex-direction: row;\n &&& > ${Root} {\n margin-top: 0;\n }\n > ${Root} + ${Root} {\n margin-left: 15px;\n }\n ${screenMaxS()`\n flex-direction: column;\n > &{Root} {\n margin-top: 0;\n }\n > ${Root} + ${Root} {\n margin-left: 0;\n margin-top: 15px;\n }\n `}\n `\n : null}\n`\n"],"names":["sizeRadio","i","size","css","disabled","error","Root","styled","label","withConfig","shouldForwardProp","prop","includes","componentId","props","display","responsiveProperty","fluid","width","Group","div","inline","screenMaxS","_templateObject","_taggedTemplateLiteral"],"mappings":"4RAOA,IAAMA,EAAY,SAAAC,GAAA,IAACC,+BAADD,EAAAA,EAAQ,GAAR,OAAeE,EAClBD,CAAAA,aAAAA,gBAAAA,aAAAA,QAAAA,EAEFA,EACCA,IAId,IAAME,EAAWD,EAAjB,CAAA,gJAgBA,IAAME,EAAQF,EAAd,CAAA,gFAYO,IAAMG,EAAOC,EAAOC,MAAMC,WAAuB,CACtDC,kBAAoBC,IAAU,CAAC,OAAQ,QAAS,QAAS,QAAS,WAAWC,SAASD,KADvEF,WAAA,CAAAI,YAAA,wBAAGN,CA2BXO,CAAAA,qSAAAA,iDAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,IAAAA,KAAAA,GACAA,EAAMT,MASH,KARAF,EADJ,CAAA,4FAgBHW,GAA0B,UAAfA,EAAMZ,KAAmBF,EAAU,IAAM,OACpDc,GAA0B,WAAfA,EAAMZ,KAAoBF,EAAU,IAAM,OACrDc,GAA0B,UAAfA,EAAMZ,KAAmBF,EAAU,IAAM,OACpDc,GAAWA,EAAMV,SAAWA,EAAW,OACvCU,GAAWA,EAAMT,MAAQA,EAAQ,OACjCS,GAAWA,EAAMC,QAAUA,EAAQD,EAAMC,SAAW,OACpDD,GAAUE,EAAmB,QAASF,EAAMG,OAAyB,SAAhBH,EAAMI,MAAmB,YAAc,WAC5FJ,GACDA,EAAMG,MACFd,EAGA,CAAA,gBAAA,OAGD,IAAMgB,EAAQZ,EAAOa,IAAIX,WAA4B,CAC1DC,kBAAoBC,GAAkB,WAATA,IADbF,WAAA,CAAAI,YAAA,wBAAGN,CAMfD,CAAAA,2DAAAA,wDAAAA,IAAAA,GAMDQ,GACDA,EAAMO,OACFlB,EADJ,CAAA,4BAAA,oBAAA,MAAA,sBAAA,IAGcG,EAGJA,EAAUA,EAGZgB,GAAAA,CATRC,IAAAA,EAAAC,EAAA,CAAA,8HAAA,MAAA,mGAcYlB,EAAUA,IAMlB"}
@@ -1,2 +1,2 @@
1
- import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import l,{AsyncCreatable as r,Async as s,Creatable as t}from'react-select';import{useClassname as o}from'../../hooks/useClassname.js';import{SizeInput as i}from'../../shared/enums/sizeInput.js';import{Root as p}from'./style.js';import{jsx as c}from'react/jsx-runtime';var m=["fluid","error","className","style","display","width"];function d(i){var{fluid:n,error:u,className:b,style:h,display:f,width:y}=i,x=a(i,m);var C=o(d.displayName,b);return c(p,{className:C,style:h,error:u,fluid:n,width:y,display:f,children:c(i.loadOptions?i.allowCreate?r:s:i.allowCreate?t:l,e(e({},x),{},{promptTextCreator:e=>"Добавить \"".concat(e,"\"")}))})}d.defaultProps={allowCreate:!1,searchable:!0,clearable:!1,addLabelText:'Добавить "{label}"?',backspaceToRemoveMessage:'Нажмите клавишу Backspace, чтобы удалить {last label}',clearAllText:'Очистить все',clearValueText:'Очистить значение',noResultsText:'Результатов не найдено',placeholder:'Выбрать ...',searchPromptText:'Введите поисковый запрос',loadingPlaceholder:'Загрузка...',autoload:!0,loadOptions:!1,display:'inline-block',width:i.l},d.displayName='Select';export{d as Select};
1
+ import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import l,{AsyncCreatable as r,Async as t,Creatable as s}from'react-select';import{useTheme as o}from'styled-components';import{useClassname as i}from'../../hooks/useClassname.js';import{Root as c}from'./style.js';import{jsx as m}from'react/jsx-runtime';var p=["fluid","error","className","style","display","width"];function d(n){var u=o();var{fluid:b,error:h,className:f,style:y,display:x,width:C=u.defaultInputControlsWidth}=n,T=a(n,p);var j=i(d.displayName,f);return m(c,{className:j,style:y,error:h,fluid:b,width:C,display:x,children:m(n.loadOptions?n.allowCreate?r:t:n.allowCreate?s:l,e(e({},T),{},{promptTextCreator:e=>"Добавить \"".concat(e,"\"")}))})}d.defaultProps={allowCreate:!1,searchable:!0,clearable:!1,addLabelText:'Добавить "{label}"?',backspaceToRemoveMessage:'Нажмите клавишу Backspace, чтобы удалить {last label}',clearAllText:'Очистить все',clearValueText:'Очистить значение',noResultsText:'Результатов не найдено',placeholder:'Выбрать ...',searchPromptText:'Введите поисковый запрос',loadingPlaceholder:'Загрузка...',autoload:!0,loadOptions:!1,display:'inline-block'},d.displayName='Select';export{d as Select};
2
2
  //# sourceMappingURL=Select.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import ReactSelect, { Async, AsyncCreatable, Creatable, ReactSelectProps } from 'react-select'\nimport { useClassname } from 'hooks/useClassname'\nimport { SizeInput } from '../../shared/enums/sizeInput'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport * as Styled from './style'\n\nexport interface SelectProps extends BaseProps, ReactSelectProps, Display {\n fluid?: boolean\n error?: boolean\n width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>\n}\n\nSelect.defaultProps = {\n allowCreate: false,\n searchable: true,\n clearable: false,\n addLabelText: 'Добавить \"{label}\"?',\n backspaceToRemoveMessage: 'Нажмите клавишу Backspace, чтобы удалить {last label}',\n clearAllText: 'Очистить все',\n clearValueText: 'Очистить значение',\n noResultsText: 'Результатов не найдено',\n placeholder: 'Выбрать ...',\n searchPromptText: 'Введите поисковый запрос',\n loadingPlaceholder: 'Загрузка...',\n autoload: true,\n loadOptions: false,\n display: 'inline-block',\n width: SizeInput.l,\n}\n\nSelect.displayName = 'Select'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - `ReactSelectProps`\n */\nexport function Select(props: SelectProps) {\n const { fluid, error, className, style, display, width, ...reactSelectProps } = props\n const _className = useClassname(Select.displayName, className)\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n const SelectElement: typeof ReactSelect & typeof Creatable = props.loadOptions\n ? props.allowCreate\n ? AsyncCreatable\n : Async\n : props.allowCreate\n ? Creatable\n : ReactSelect\n\n return (\n <Styled.Root className={_className} style={style} error={error} fluid={fluid} width={width} display={display}>\n <SelectElement {...reactSelectProps} promptTextCreator={(label: string) => `Добавить \"${label}\"`} />\n </Styled.Root>\n )\n}\n"],"names":["Select","props","fluid","error","className","style","display","width","reactSelectProps","_excluded","_className","useClassname","displayName","_jsx","Styled.Root","children","loadOptions","allowCreate","AsyncCreatable","Async","Creatable","ReactSelect","_objectSpread","promptTextCreator","label","concat","defaultProps","searchable","clearable","addLabelText","backspaceToRemoveMessage","clearAllText","clearValueText","noResultsText","placeholder","searchPromptText","loadingPlaceholder","autoload","SizeInput","l"],"mappings":"4bAuCO,SAASA,EAAOC,GACrB,IAAMC,MAAEA,EAAFC,MAASA,EAATC,UAAgBA,EAAhBC,MAA2BA,EAA3BC,QAAkCA,EAAlCC,MAA2CA,GAA+BN,EAArBO,IAAqBP,EAAhFQ,GACA,IAAMC,EAAaC,EAAaX,EAAOY,YAAaR,GAYpD,OACES,EAACC,EAAD,CAAaV,UAAWM,EAAYL,MAAOA,EAAOF,MAAOA,EAAOD,MAAOA,EAAOK,MAAOA,EAAOD,QAASA,EAArGS,SACEF,EAVyDZ,EAAMe,YAC/Df,EAAMgB,YACJC,EACAC,EACFlB,EAAMgB,YACNG,EACAC,EAIAC,EAAAA,EAAA,GAAmBd,GAAnB,GAAA,CAAqCe,kBAAoBC,GAAD,cAAAC,OAAgCD,EAAhC,WAzC9DxB,EAAO0B,aAAe,CACpBT,aAAa,EACbU,YAAY,EACZC,WAAW,EACXC,aAAc,sBACdC,yBAA0B,wDAC1BC,aAAc,eACdC,eAAgB,oBAChBC,cAAe,yBACfC,YAAa,cACbC,iBAAkB,2BAClBC,mBAAoB,cACpBC,UAAU,EACVrB,aAAa,EACbV,QAAS,eACTC,MAAO+B,EAAUC,GAGnBvC,EAAOY,YAAc"}
1
+ {"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import ReactSelect, { Async, AsyncCreatable, Creatable, ReactSelectProps } from 'react-select'\nimport { useTheme } from 'styled-components'\nimport { useClassname } from 'hooks/useClassname'\nimport { SizeInput } from '../../shared/enums/sizeInput'\nimport { BaseProps } from '../../shared/interfaces'\nimport { Display } from '../../mixins/display'\nimport { ResponsiveProperty } from '../../mixins/responsive-property'\nimport * as Styled from './style'\n\nexport interface SelectProps extends BaseProps, ReactSelectProps, Display {\n fluid?: boolean\n error?: boolean\n /**\n * Width of select. Default is `Theme.defaultInputControlsWidth`\n */\n width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>\n}\n\nSelect.defaultProps = {\n allowCreate: false,\n searchable: true,\n clearable: false,\n addLabelText: 'Добавить \"{label}\"?',\n backspaceToRemoveMessage: 'Нажмите клавишу Backspace, чтобы удалить {last label}',\n clearAllText: 'Очистить все',\n clearValueText: 'Очистить значение',\n noResultsText: 'Результатов не найдено',\n placeholder: 'Выбрать ...',\n searchPromptText: 'Введите поисковый запрос',\n loadingPlaceholder: 'Загрузка...',\n autoload: true,\n loadOptions: false,\n display: 'inline-block',\n}\n\nSelect.displayName = 'Select'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - `ReactSelectProps`\n */\nexport function Select(props: SelectProps) {\n const theme = useTheme()\n const {\n fluid,\n error,\n className,\n style,\n display,\n width = theme.defaultInputControlsWidth,\n ...reactSelectProps\n } = props\n const _className = useClassname(Select.displayName, className)\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n const SelectElement: typeof ReactSelect & typeof Creatable = props.loadOptions\n ? props.allowCreate\n ? AsyncCreatable\n : Async\n : props.allowCreate\n ? Creatable\n : ReactSelect\n\n return (\n <Styled.Root className={_className} style={style} error={error} fluid={fluid} width={width} display={display}>\n <SelectElement {...reactSelectProps} promptTextCreator={(label: string) => `Добавить \"${label}\"`} />\n </Styled.Root>\n )\n}\n"],"names":["Select","props","theme","useTheme","fluid","error","className","style","display","width","defaultInputControlsWidth","reactSelectProps","_excluded","_className","useClassname","displayName","_jsx","Styled.Root","children","loadOptions","allowCreate","AsyncCreatable","Async","Creatable","ReactSelect","_objectSpread","promptTextCreator","label","concat","defaultProps","searchable","clearable","addLabelText","backspaceToRemoveMessage","clearAllText","clearValueText","noResultsText","placeholder","searchPromptText","loadingPlaceholder","autoload"],"mappings":"6aA0CO,SAASA,EAAOC,GACrB,IAAMC,EAAQC,IACd,IAAMC,MACJA,EADIC,MAEJA,EAFIC,UAGJA,EAHIC,MAIJA,EAJIC,QAKJA,EALIC,MAMJA,EAAQP,EAAMQ,2BAEZT,EADCU,IACDV,EARJW,GASA,IAAMC,EAAaC,EAAad,EAAOe,YAAaT,GAYpD,OACEU,EAACC,EAAD,CAAaX,UAAWO,EAAYN,MAAOA,EAAOF,MAAOA,EAAOD,MAAOA,EAAOK,MAAOA,EAAOD,QAASA,EAArGU,SACEF,EAVyDf,EAAMkB,YAC/DlB,EAAMmB,YACJC,EACAC,EACFrB,EAAMmB,YACNG,EACAC,EAIAC,EAAAA,EAAA,GAAmBd,GAAnB,GAAA,CAAqCe,kBAAoBC,GAAD,cAAAC,OAAgCD,EAAhC,WAjD9D3B,EAAO6B,aAAe,CACpBT,aAAa,EACbU,YAAY,EACZC,WAAW,EACXC,aAAc,sBACdC,yBAA0B,wDAC1BC,aAAc,eACdC,eAAgB,oBAChBC,cAAe,yBACfC,YAAa,cACbC,iBAAkB,2BAClBC,mBAAoB,cACpBC,UAAAA,EACArB,aAAAA,EACAX,QAAS,gBAGXR,EAAOe,YAAc"}
@@ -1,2 +1,2 @@
1
- import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{useState as o,useCallback as a}from'react';import{Root as l}from'./style.js';import{jsx as t}from'react/jsx-runtime';var s=["cols","disabled","error","fluid","name","onChange","maxLength","placeholder","required","rounded","rows","tabIndex","value","className","style","children","autosize","maxRows","color","placeholderColor"];function n(n){var{cols:d,disabled:i,error:c,fluid:u,name:m,onChange:h,maxLength:p,placeholder:f,required:x,rounded:g,rows:b,tabIndex:v,value:C,className:w,style:y,children:j,autosize:R,maxRows:L,color:N,placeholderColor:T}=n,q=r(n,s);var[z,I]=o(b);var S=a((e=>{var{target:r}=e;if(r instanceof HTMLTextAreaElement&&R){var o=r.getBoundingClientRect();r.scrollHeight>o.height&&z<L?I(z+1):r.value&&''!==r.value||I(b)}'function'==typeof h&&h(e)}),[h,z,L,R]);return t(l,e(e({className:w,style:y,onChange:S,cols:d,disabled:i,maxLength:p,name:m,placeholder:f,required:x,rows:z,tabIndex:v,value:C,color:N,rounded:g,placeholderColor:T,fluid:u,error:c},q),{},{children:j}))}n.defaultProps={onChange:e=>console.log(e,e.target.value),rounded:!0,width:'l',color:'mineShaft',placeholderColor:'silver',cols:20,maxRows:30,rows:2,autosize:!0},n.displayName='Textarea';export{n as Textarea};
1
+ import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{useState as o,useCallback as a}from'react';import{useTheme as l}from'styled-components';import{Root as t}from'./style.js';import{jsx as s}from'react/jsx-runtime';var n=["cols","disabled","error","fluid","name","onChange","maxLength","placeholder","required","rounded","rows","tabIndex","value","className","style","children","autosize","maxRows","color","placeholderColor"];function d(d){var{cols:i,disabled:c,error:u,fluid:m,name:h,onChange:p,maxLength:f,placeholder:v,required:x,rounded:g,rows:b,tabIndex:C,value:w,className:y,style:j,children:R,autosize:T,maxRows:I,color:L,placeholderColor:N}=d,q=r(d,n);var[z,S]=o(b);var H=l();var{width:P=H.defaultInputControlsWidth}=q;var W=a((e=>{var{target:r}=e;if(r instanceof HTMLTextAreaElement&&T){var o=r.getBoundingClientRect();r.scrollHeight>o.height&&z<I?S(z+1):r.value&&''!==r.value||S(b)}'function'==typeof p&&p(e)}),[p,z,I,T]);return s(t,e(e({className:y,style:j,onChange:W,cols:i,disabled:c,maxLength:f,name:h,placeholder:v,required:x,rows:z,tabIndex:C,value:w,color:L,rounded:g,placeholderColor:N,fluid:m,error:u,width:P},q),{},{children:R}))}d.defaultProps={onChange:e=>console.log(e,e.target.value),rounded:!0,color:'mineShaft',placeholderColor:'silver',cols:20,maxRows:30,rows:2,autosize:!0},d.displayName='Textarea';export{d as Textarea};
2
2
  //# sourceMappingURL=Textarea.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { useCallback, useState } from 'react'\nimport { BaseProps, InputField } from '../../shared/interfaces'\nimport * as Styled from './style'\n\ntype TextAreaHTMLAttributes = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'cols' | 'rows' | 'color'>\n\nexport interface TextareaProps extends BaseProps, InputField, TextAreaHTMLAttributes {\n /**\n * Specifies the visible width of a text area\n */\n cols?: number\n /**\n * Specifies the visible number of lines in a text area\n */\n rows?: number\n /**\n * Specifies the visible max number of lines in a text area\n */\n maxRows?: number\n /**\n * Specifies the maximum number of characters allowed in the text area\n */\n maxLength?: number\n /**\n * On change handler\n */\n onChange?(_event: React.ChangeEvent<HTMLTextAreaElement>): void\n /**\n * Value\n */\n value?: string\n /**\n * Autosize for textarea\n */\n autosize?: boolean\n}\n\nTextarea.defaultProps = {\n onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => console.log(e, e.target.value), // eslint-disable-line no-console\n rounded: true,\n width: 'l',\n color: 'mineShaft',\n placeholderColor: 'silver',\n cols: 20,\n maxRows: 30,\n rows: 2,\n autosize: true,\n}\n\nTextarea.displayName = 'Textarea'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`InputField`](#/Миксины)\n * - `React.TextareaHTMLAttributes<HTMLTextAreaElement>`\n */\nexport function Textarea({\n cols,\n disabled,\n error,\n fluid,\n name,\n onChange,\n maxLength,\n placeholder,\n required,\n rounded,\n rows,\n tabIndex,\n value,\n className,\n style,\n children,\n autosize,\n maxRows,\n color,\n placeholderColor,\n ...props\n}: typeof Textarea.defaultProps & TextareaProps) {\n const [tRows, setRows] = useState(rows)\n\n const onChangeHandler: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(\n (event) => {\n const { target } = event\n\n if (target instanceof HTMLTextAreaElement && autosize) {\n const rect = target.getBoundingClientRect()\n\n if (target.scrollHeight > rect.height && tRows < maxRows) {\n setRows(tRows + 1)\n } else if (!target.value || target.value === '') {\n setRows(rows)\n }\n }\n\n if (typeof onChange === 'function') {\n onChange(event)\n }\n },\n [onChange, tRows, maxRows, autosize]\n )\n\n return (\n <Styled.Root\n className={className}\n style={style}\n onChange={onChangeHandler}\n cols={cols}\n disabled={disabled}\n maxLength={maxLength}\n name={name}\n placeholder={placeholder}\n required={required}\n rows={tRows}\n tabIndex={tabIndex}\n value={value}\n color={color}\n rounded={rounded}\n placeholderColor={placeholderColor}\n fluid={fluid}\n error={error}\n {...props}\n >\n {children}\n </Styled.Root>\n )\n}\n"],"names":["Textarea","_ref","cols","disabled","error","fluid","name","onChange","maxLength","placeholder","required","rounded","rows","tabIndex","value","className","style","children","autosize","maxRows","color","placeholderColor","props","_objectWithoutProperties","_excluded","tRows","setRows","useState","onChangeHandler","useCallback","event","target","HTMLTextAreaElement","rect","getBoundingClientRect","scrollHeight","height","_jsx","Styled.Root","_objectSpread","defaultProps","e","console","log","width","displayName"],"mappings":"kcAyDO,SAASA,EAsBiCC,GAAA,IAtBxBC,KACvBA,EADuBC,SAEvBA,EAFuBC,MAGvBA,EAHuBC,MAIvBA,EAJuBC,KAKvBA,EALuBC,SAMvBA,EANuBC,UAOvBA,EAPuBC,YAQvBA,EARuBC,SASvBA,EATuBC,QAUvBA,EAVuBC,KAWvBA,EAXuBC,SAYvBA,EAZuBC,MAavBA,EAbuBC,UAcvBA,EAduBC,MAevBA,EAfuBC,SAgBvBA,EAhBuBC,SAiBvBA,EAjBuBC,QAkBvBA,EAlBuBC,MAmBvBA,EAnBuBC,iBAoBvBA,GAE+CpB,EAD5CqB,EAC4CC,EAAAtB,EAAAuB,GAC/C,IAAOC,EAAOC,GAAWC,EAASf,GAElC,IAAMgB,EAAiEC,GACpEC,IACC,IAAMC,OAAEA,GAAWD,EAEnB,GAAIC,aAAkBC,qBAAuBd,EAAU,CACrD,IAAMe,EAAOF,EAAOG,wBAEhBH,EAAOI,aAAeF,EAAKG,QAAUX,EAAQN,EAC/CO,EAAQD,EAAQ,GACNM,EAAOjB,OAA0B,KAAjBiB,EAAOjB,OACjCY,EAAQd,GAIY,mBAAbL,GACTA,EAASuB,KAGb,CAACvB,EAAUkB,EAAON,EAASD,IAG7B,OACEmB,EAACC,EAADC,EAAAA,EAAA,CACExB,UAAWA,EACXC,MAAOA,EACPT,SAAUqB,EACV1B,KAAMA,EACNC,SAAUA,EACVK,UAAWA,EACXF,KAAMA,EACNG,YAAaA,EACbC,SAAUA,EACVE,KAAMa,EACNZ,SAAUA,EACVC,MAAOA,EACPM,MAAOA,EACPT,QAASA,EACTU,iBAAkBA,EAClBhB,MAAOA,EACPD,MAAOA,GACHkB,GAlBN,GAAA,CAAAL,SAoBGA,KAvFPjB,EAASwC,aAAe,CACtBjC,SAAWkC,GAA8CC,QAAQC,IAAIF,EAAGA,EAAEV,OAAOjB,OACjFH,WACAiC,MAAO,IACPxB,MAAO,YACPC,iBAAkB,SAClBnB,KAAM,GACNiB,QAAS,GACTP,KAAM,EACNM,UAAU,GAGZlB,EAAS6C,YAAc"}
1
+ {"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { useCallback, useState } from 'react'\nimport { useTheme } from 'styled-components'\nimport { BaseProps, InputField } from '../../shared/interfaces'\nimport * as Styled from './style'\n\ntype TextAreaHTMLAttributes = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'cols' | 'rows' | 'color'>\n\nexport interface TextareaProps extends BaseProps, InputField, TextAreaHTMLAttributes {\n /**\n * Specifies the visible width of a text area\n */\n cols?: number\n /**\n * Specifies the visible number of lines in a text area\n */\n rows?: number\n /**\n * Specifies the visible max number of lines in a text area\n */\n maxRows?: number\n /**\n * Specifies the maximum number of characters allowed in the text area\n */\n maxLength?: number\n /**\n * On change handler\n */\n onChange?(_event: React.ChangeEvent<HTMLTextAreaElement>): void\n /**\n * Value\n */\n value?: string\n /**\n * Autosize for textarea\n */\n autosize?: boolean\n}\n\nTextarea.defaultProps = {\n onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => console.log(e, e.target.value), // eslint-disable-line no-console\n rounded: true,\n color: 'mineShaft',\n placeholderColor: 'silver',\n cols: 20,\n maxRows: 30,\n rows: 2,\n autosize: true,\n}\n\nTextarea.displayName = 'Textarea'\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`InputField`](#/Миксины)\n * - `React.TextareaHTMLAttributes<HTMLTextAreaElement>`\n */\nexport function Textarea({\n cols,\n disabled,\n error,\n fluid,\n name,\n onChange,\n maxLength,\n placeholder,\n required,\n rounded,\n rows,\n tabIndex,\n value,\n className,\n style,\n children,\n autosize,\n maxRows,\n color,\n placeholderColor,\n ...props\n}: typeof Textarea.defaultProps & TextareaProps) {\n const [tRows, setRows] = useState(rows)\n const theme = useTheme()\n\n const { width = theme.defaultInputControlsWidth } = props\n\n const onChangeHandler: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(\n (event) => {\n const { target } = event\n\n if (target instanceof HTMLTextAreaElement && autosize) {\n const rect = target.getBoundingClientRect()\n\n if (target.scrollHeight > rect.height && tRows < maxRows) {\n setRows(tRows + 1)\n } else if (!target.value || target.value === '') {\n setRows(rows)\n }\n }\n\n if (typeof onChange === 'function') {\n onChange(event)\n }\n },\n [onChange, tRows, maxRows, autosize]\n )\n\n return (\n <Styled.Root\n className={className}\n style={style}\n onChange={onChangeHandler}\n cols={cols}\n disabled={disabled}\n maxLength={maxLength}\n name={name}\n placeholder={placeholder}\n required={required}\n rows={tRows}\n tabIndex={tabIndex}\n value={value}\n color={color}\n rounded={rounded}\n placeholderColor={placeholderColor}\n fluid={fluid}\n error={error}\n width={width}\n {...props}\n >\n {children}\n </Styled.Root>\n )\n}\n"],"names":["Textarea","_ref","cols","disabled","error","fluid","name","onChange","maxLength","placeholder","required","rounded","rows","tabIndex","value","className","style","children","autosize","maxRows","color","placeholderColor","props","_objectWithoutProperties","_excluded","tRows","setRows","useState","theme","useTheme","width","defaultInputControlsWidth","onChangeHandler","useCallback","event","target","HTMLTextAreaElement","rect","getBoundingClientRect","scrollHeight","height","_jsx","Styled.Root","_objectSpread","defaultProps","e","console","log","displayName"],"mappings":"+eAyDO,SAASA,EAsBiCC,GAAA,IAtBxBC,KACvBA,EADuBC,SAEvBA,EAFuBC,MAGvBA,EAHuBC,MAIvBA,EAJuBC,KAKvBA,EALuBC,SAMvBA,EANuBC,UAOvBA,EAPuBC,YAQvBA,EARuBC,SASvBA,EATuBC,QAUvBA,EAVuBC,KAWvBA,EAXuBC,SAYvBA,EAZuBC,MAavBA,EAbuBC,UAcvBA,EAduBC,MAevBA,EAfuBC,SAgBvBA,EAhBuBC,SAiBvBA,EAjBuBC,QAkBvBA,EAlBuBC,MAmBvBA,EAnBuBC,iBAoBvBA,GAE+CpB,EAD5CqB,EAC4CC,EAAAtB,EAAAuB,GAC/C,IAAOC,EAAOC,GAAWC,EAASf,GAClC,IAAMgB,EAAQC,IAEd,IAAMC,MAAEA,EAAQF,EAAMG,2BAA8BT,EAEpD,IAAMU,EAAiEC,GACpEC,IACC,IAAMC,OAAEA,GAAWD,EAEnB,GAAIC,aAAkBC,qBAAuBlB,EAAU,CACrD,IAAMmB,EAAOF,EAAOG,wBAEhBH,EAAOI,aAAeF,EAAKG,QAAUf,EAAQN,EAC/CO,EAAQD,EAAQ,GACNU,EAAOrB,OAA0B,KAAjBqB,EAAOrB,OACjCY,EAAQd,GAIY,mBAAbL,GACTA,EAAS2B,KAGb,CAAC3B,EAAUkB,EAAON,EAASD,IAG7B,OACEuB,EAACC,EAADC,EAAAA,EAAA,CACE5B,UAAWA,EACXC,MAAOA,EACPT,SAAUyB,EACV9B,KAAMA,EACNC,SAAUA,EACVK,UAAWA,EACXF,KAAMA,EACNG,YAAaA,EACbC,SAAUA,EACVE,KAAMa,EACNZ,SAAUA,EACVC,MAAOA,EACPM,MAAOA,EACPT,QAASA,EACTU,iBAAkBA,EAClBhB,MAAOA,EACPD,MAAOA,EACP0B,MAAOA,GACHR,GAnBN,GAAA,CAAAL,SAqBGA,KA1FPjB,EAAS4C,aAAe,CACtBrC,SAAWsC,GAA8CC,QAAQC,IAAIF,EAAGA,EAAEV,OAAOrB,OACjFH,SAAS,EACTS,MAAO,YACPC,iBAAkB,SAClBnB,KAAM,GACNiB,QAAS,GACTP,KAAM,EACNM,UAAU,GAGZlB,EAASgD,YAAc"}
package/dts/index.d.ts CHANGED
@@ -12,7 +12,6 @@ import * as type_fest_source_partial_deep from 'type-fest/source/partial-deep';
12
12
  import * as react_floater_lib_types from 'react-floater/lib/types';
13
13
  import Floater from 'react-floater';
14
14
  import { InputState, MaskOptions } from 'react-input-mask';
15
- import { SizeInput as SizeInput$1 } from 'shared/enums/sizeInput';
16
15
  import { ReactSelectProps } from 'react-select';
17
16
 
18
17
  declare enum ColorNames {
@@ -357,6 +356,7 @@ interface Theme {
357
356
  tooltip: number;
358
357
  };
359
358
  classNamePrefix: string;
359
+ defaultInputControlsWidth: number | keyof typeof SizeInput | 'auto';
360
360
  }
361
361
 
362
362
  declare type StyledComponentProps = {
@@ -1107,6 +1107,11 @@ interface ButtonProps extends BaseProps, Tooltiped, Display, Color, Color<'fontC
1107
1107
  * Size
1108
1108
  */
1109
1109
  size?: keyof typeof PROPS_BY_SIZE;
1110
+ /**
1111
+ * Content of button
1112
+ * @deprecated Use children property
1113
+ */
1114
+ content?: React.ReactNode;
1110
1115
  }
1111
1116
  /**
1112
1117
  * Расширен:
@@ -2239,7 +2244,6 @@ declare namespace Textarea {
2239
2244
  var defaultProps: {
2240
2245
  onChange: (e: react.ChangeEvent<HTMLTextAreaElement>) => void;
2241
2246
  rounded: boolean;
2242
- width: string;
2243
2247
  color: string;
2244
2248
  placeholderColor: string;
2245
2249
  cols: number;
@@ -2280,7 +2284,6 @@ declare class InputPhone extends PureComponent<typeof InputPhone.defaultProps &
2280
2284
  static defaultProps: {
2281
2285
  rounded: boolean;
2282
2286
  type: string;
2283
- width: SizeInput;
2284
2287
  color: string;
2285
2288
  mask: string;
2286
2289
  placeholderColor: string;
@@ -2365,7 +2368,6 @@ declare namespace Input {
2365
2368
  var defaultProps: {
2366
2369
  rounded: boolean;
2367
2370
  type: string;
2368
- width: SizeInput$1;
2369
2371
  color: string;
2370
2372
  mask: string;
2371
2373
  placeholderColor: string;
@@ -2432,6 +2434,9 @@ interface RadioProps extends BaseProps, Display, RadioInputHtmlAttributes {
2432
2434
  */
2433
2435
  value?: string | number;
2434
2436
  fluid?: boolean;
2437
+ /**
2438
+ * Width of label. Default is `Theme.defaultInputControlsWidth`
2439
+ */
2435
2440
  width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>;
2436
2441
  }
2437
2442
  /**
@@ -2446,7 +2451,6 @@ declare namespace Radio {
2446
2451
  size: string;
2447
2452
  defaultChecked: boolean;
2448
2453
  display: string;
2449
- width: SizeInput;
2450
2454
  onChange: (e: react.ChangeEvent<HTMLInputElement>) => void;
2451
2455
  };
2452
2456
  var Group: typeof RadioGroup;
@@ -2502,6 +2506,9 @@ interface CheckboxProps extends BaseProps, Display, CheckboxInputHtmlAttributes
2502
2506
  */
2503
2507
  size?: 'small' | 'medium' | 'large' | 'extraLarge' | 's' | 'm' | 'l' | 'xl';
2504
2508
  fluid?: boolean;
2509
+ /**
2510
+ * Width of label. Default is `Theme.defaultInputControlsWidth`
2511
+ */
2505
2512
  width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>;
2506
2513
  }
2507
2514
  /**
@@ -2516,7 +2523,6 @@ declare namespace Checkbox {
2516
2523
  size: string;
2517
2524
  defaultChecked: boolean;
2518
2525
  display: string;
2519
- width: SizeInput;
2520
2526
  onChange: (e: react.ChangeEvent<HTMLInputElement>) => void;
2521
2527
  };
2522
2528
  var Group: typeof CheckboxGroup;
@@ -2526,6 +2532,9 @@ declare namespace Checkbox {
2526
2532
  interface SelectProps extends BaseProps, ReactSelectProps, Display {
2527
2533
  fluid?: boolean;
2528
2534
  error?: boolean;
2535
+ /**
2536
+ * Width of select. Default is `Theme.defaultInputControlsWidth`
2537
+ */
2529
2538
  width?: ResponsiveProperty<'auto' | number | keyof typeof SizeInput>;
2530
2539
  }
2531
2540
  /**
@@ -2550,7 +2559,6 @@ declare namespace Select {
2550
2559
  autoload: boolean;
2551
2560
  loadOptions: boolean;
2552
2561
  display: string;
2553
- width: SizeInput;
2554
2562
  };
2555
2563
  var displayName: string;
2556
2564
  }