@foxford/ui 2.0.0-beta-7501a7c-20220712 → 2.0.0-beta-33ae46b-20220713
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
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{useCallback as a}from'react';import{useTheme as t}from'styled-components';import{CheckboxGroup as l}from'./Group.js';import{Root as i}from'./style.js';import{jsxs as s,jsx as o}from'react/jsx-runtime';var d=["children","disabled","error","id","name","onChange","size","value","label","fluid","display","width","className","style"];function n(l){var n=void 0===l.checked;var h=t();var{children:c,disabled:m,error:p,id:f,name:u,onChange:b,size:k,value:v,label:x,fluid:g,display:y,width:C=h.defaultInputControlsWidth,className:w,style:j}=l,N=r(l,d);var z=a((e=>{e.stopPropagation(),'function'==typeof b&&b(e)}),[n]);var B=n?{defaultChecked:l.defaultChecked}:{checked:l.checked};return s(i,{className:w,style:j,disabled:m,error:p,htmlFor:f||u,size:k,fluid:g,width:C,display:y,children:[o("input",e(e({},N),{},{id:f||u,name:u,type:"checkbox",onChange:z,value:v,disabled:m},B)),s("svg",{viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:[o("rect",{x:".455",y:".455",width:"19.091",height:"19.091",rx:"5",transform:"translate(0 0)",fill:"#fff",stroke:"#B8B8B8",strokeWidth:"1"}),s("g",{fill:"none",children:[o("rect",{fill:"#48A1E6",width:"20",height:"20",rx:"5"}),o("path",{stroke:"#fff",strokeWidth:"2",d:"M6 9.99l3 3.01 6-6"})]})]}),(x||c)&&o("span",{className:"label",children:x||c})]})}n.defaultProps={disabled:!1,size:'medium',display:'inline-flex',onChange:e=>console.log(e,e.target.value)},n.Group=l,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
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { useCallback } 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 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\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 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: props.defaultChecked } : { checked: props.checked }\n\n return (\n <Styled.Root\n className={className}\n style={style}\n disabled={disabled}\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","children","disabled","error","id","name","onChange","size","value","label","fluid","display","width","defaultInputControlsWidth","className","style","anotherProps","_excluded","handleOnChange","useCallback","e","stopPropagation","inputProps","defaultChecked","_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":"ocA2EO,SAASA,EAASC,GACvB,IAAMC,OAAiCC,IAAlBF,EAAMG,QAC3B,IAAMC,EAAQC,IAEd,IAAMC,SACJA,EADIC,SAEJA,EAFIC,MAGJA,EAHIC,GAIJA,EAJIC,KAKJA,EALIC,SAMJA,EANIC,KAOJA,EAPIC,MAQJA,EARIC,MASJA,EATIC,MAUJA,EAVIC,QAWJA,EAXIC,MAYJA,EAAQb,EAAMc,0BAZVC,UAaJA,EAbIC,MAcJA,GAEEpB,EADCqB,IACDrB,EAhBJsB,GAkBA,IAAMC,EAA6DC,GAChEC,IACCA,EAAEC,kBACsB,mBAAbf,GAAyBA,EAASc,KAE/C,CAACxB,IAGH,IAAM0B,EAAa1B,EAAe,CAAE2B,eAAgB5B,EAAM4B,gBAAmB,CAAEzB,QAASH,EAAMG,SAE9F,OACE0B,EAACC,EAAD,CACEX,UAAWA,EACXC,MAAOA,EACPb,SAAUA,EACVC,MAAOA,EACPuB,QAAStB,GAAMC,EACfE,KAAMA,EACNG,MAAOA,EACPE,MAAOA,EACPD,QAASA,EATXV,SAAA,CAWE0B,iBACMX,GADN,GAAA,CAEEZ,GAAIA,GAAMC,EACVA,KAAMA,EACNuB,KAAK,WACLtB,SAAUY,EACVV,MAAOA,EACPN,SAAUA,GACNoB,IAENE,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,OAvFhEP,EAAS8C,aAAe,CACtBtC,UAAAA,EACAK,KAAM,SACNI,QAAS,cACTL,SAAWc,GAA2CqB,QAAQC,IAAItB,EAAGA,EAAEuB,OAAOnC,QAGhFd,EAASkD,MAAQC,EAEjBnD,EAASoD,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{useCallback as r}from'react';import{useTheme as s}from'styled-components';import{useClassname as l}from'../../hooks/useClassname.js';import{RadioGroup as i}from'./Group.js';import{Root as o}from'./style.js';import{jsxs as t,jsx as d}from'react/jsx-runtime';var n=["children","disabled","error","id","name","onChange","size","value","label","className","width","style","fluid","display"];function m(i){var c=void 0===i.checked;var p=s();var{children:u,disabled:h,error:f,id:b,name:v,onChange:y,size:g,value:C,label:k,className:x,width:j=p.defaultInputControlsWidth,style:w,fluid:N,display:z}=i,R=a(i,n);var G=l(m.displayName,x);var P=r((e=>{e.stopPropagation(),'function'==typeof y&&y(e)}),[c]);var W=c?{defaultChecked:i.defaultChecked}:{checked:i.checked};return t(o,{className:G,style:w,disabled:h,error:f,htmlFor:b||v,size:g,width:j,display:z,fluid:N,children:[d("input",e(e({},R),{},{id:b||v,name:v,type:"radio",onChange:P,value:C,disabled:h},W)),t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",children:[d("circle",{cx:"10",cy:"10",r:"9",stroke:"#727D8A",strokeWidth:"2",fill:"#fff"}),d("circle",{cx:"10",cy:"10",r:"5",fill:"#727D8A"})]}),(k||u)&&d("span",{className:"label",children:k||u})]})}m.defaultProps={disabled:!1,size:'medium',display:'inline-flex',onChange:e=>console.log(e,e.target.value)},m.Group=i,m.displayName='Radio';export{m 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
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { useCallback } 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 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 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 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: props.defaultChecked } : { checked: props.checked }\n\n return (\n <Styled.Root\n className={_className}\n style={style}\n disabled={disabled}\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","theme","useTheme","children","disabled","error","id","name","onChange","size","value","label","className","width","defaultInputControlsWidth","style","fluid","display","anotherProps","_excluded","_className","useClassname","displayName","handleOnChange","useCallback","e","stopPropagation","inputProps","defaultChecked","_jsxs","Styled.Root","htmlFor","_jsx","type","xmlns","viewBox","cx","cy","r","stroke","strokeWidth","fill","defaultProps","console","log","target","Group","RadioGroup"],"mappings":"4fA4EO,SAASA,EAAMC,GACpB,IAAMC,OAAAA,IAAeD,EAAME,QAC3B,IAAMC,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,GAEEnB,EADCoB,IACDpB,EAhBJqB,GAiBA,IAAMC,EAAaC,EAAaxB,EAAMyB,YAAaV,GAEnD,IAAMW,EAA6DC,GAChEC,IACCA,EAAEC,kBACsB,mBAAblB,GAAyBA,EAASiB,KAE/C,CAAC1B,IAGH,IAAM4B,EAAa5B,EAAe,CAAE6B,eAAgB9B,EAAM8B,gBAAmB,CAAE5B,QAASF,EAAME,SAE9F,OACE6B,EAACC,EAAD,CACElB,UAAWQ,EACXL,MAAOA,EACPX,SAAUA,EACVC,MAAOA,EACP0B,QAASzB,GAAMC,EACfE,KAAMA,EACNI,MAAOA,EACPI,QAASA,EACTD,MAAOA,EATTb,SAAA,CAWE6B,iBACMd,GADN,GAAA,CAEEZ,GAAIA,GAAMC,EACVA,KAAMA,EACN0B,KAAK,QACLzB,SAAUe,EACVb,MAAOA,EACPN,SAAUA,GACNuB,IAENE,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,OAzEhEN,EAAM6C,aAAe,CACnBtC,UAAU,EACVK,KAAM,SACNQ,QAAS,cACTT,SAAWiB,GAA2CkB,QAAQC,IAAInB,EAAGA,EAAEoB,OAAOnC,QAGhFb,EAAMiD,MAAQC,EACdlD,EAAMyB,YAAc"}
|
package/dts/index.d.ts
CHANGED
|
@@ -2449,7 +2449,6 @@ declare namespace Radio {
|
|
|
2449
2449
|
var defaultProps: {
|
|
2450
2450
|
disabled: boolean;
|
|
2451
2451
|
size: string;
|
|
2452
|
-
defaultChecked: boolean;
|
|
2453
2452
|
display: string;
|
|
2454
2453
|
onChange: (e: react.ChangeEvent<HTMLInputElement>) => void;
|
|
2455
2454
|
};
|
|
@@ -2521,7 +2520,6 @@ declare namespace Checkbox {
|
|
|
2521
2520
|
var defaultProps: {
|
|
2522
2521
|
disabled: boolean;
|
|
2523
2522
|
size: string;
|
|
2524
|
-
defaultChecked: boolean;
|
|
2525
2523
|
display: string;
|
|
2526
2524
|
onChange: (e: react.ChangeEvent<HTMLInputElement>) => void;
|
|
2527
2525
|
};
|