@foxford/ui 2.0.0-beta-79fe53a-20220829 → 2.0.0-beta-6e701d1-20220905
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/components/Checkbox/style.js +1 -1
- package/components/Checkbox/style.js.map +1 -1
- package/components/Textarea/Textarea.js +1 -1
- package/components/Textarea/Textarea.js.map +1 -1
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import i,{keyframes as n,css as t}from'styled-components';import r from'tinycolor2';import{property as o,responsiveNamedProperty as a}from'../../mixins/responsive-property.js';import{color as e}from'../../mixins/color.js';import{display as d}from'../../mixins/display.js';import{chooseWidthValue as g}from'./helpers.js';var p={l:52,m:48,s:40,xs:32};var l=n(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var s=t(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],l);var m=t(["border-radius:",";"],(i=>i.theme.borderRadius));var h=t(["cursor:not-allowed;background-color:",";color:",";"],(i=>i.theme.colors.mercury),(i=>i.theme.colors.silver));var c=t(["&:active{box-shadow:inset 0 4px 0px 0px rgba(0,0,0,0.14);}&:hover{","}",""],(i=>i.color&&i.fontColor?t(["color:",";background-color:",";"],i.fontColor,r(i.theme.colors[i.color]).saturate(-5).lighten(-8).toString()):null),(i=>(i.inverted||i.basic)&&i.fontColor&&i.color?t(["&:not(:hover){border:1px solid ",";}&:hover{border:1px solid ",";}"],i.theme.colors[i.color],i.theme.colors[i.color]):null));var u=function(i,n){var r=arguments.length>1&&void 0!==n?n:'px';return t(["width:","",";height:","",";font-size:","",";line-height:","",";padding:","",";"],i,r,i,r,.44*i,r,.44*i,r,.28*i,r)};var f=()=>t(["min-width:initial;width:100%;"]);var L=i.span.withConfig({componentId:"fox-ui__sc-16o31r2-0"})(["display:inline-block;line-height:1;vertical-align:middle;"]);var S=i.div.withConfig({shouldForwardProp:i=>['children','className','style','target','to','id','href','ref','onClick','type','onMouseEnter','onMouseLeave'].includes(i)||i.includes('data')}).withConfig({componentId:"fox-ui__sc-16o31r2-1"})(["-webkit-box-sizing:border-box !important;-moz-box-sizing:border-box !important;-ms-box-sizing:border-box !important;box-sizing:border-box !important;position:relative;overflow:hidden;border:none;cursor:pointer;user-select:none;font-weight:600;padding-top:0;padding-bottom:0;text-decoration:none;justify-content:center;align-items:center;text-align:center;transition:0.2s all;white-space:nowrap;appearance:none;vertical-align:top;& + &{margin-left:1em;","}"," "," "," "," "," "," "," &:focus{outline:0;}"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],(i=>i.noSpacing?t(["margin-left:auto;"]):null),(i=>i.display?d(i.display):null),(i=>i.loading?s:null),(i=>i.rounded?m:null),(i=>i.color?e(i.color,i.inverted||i.basic?'color':'background-color'):null),(i=>i.fontColor?e(i.fontColor,i.inverted||i.basic?'background-color':'color'):null),(i=>i.basic?t(["background-color:transparent;"]):null),(i=>i.round?t(["border-radius:100%;letter-spacing:0.5px;& > *{display:inline-block !important;vertical-align:middle !important;}.icon{vertical-align:middle;& > *{vertical-align:middle !important;}svg{vertical-align:middle;}}"]):t([".icon{display:inline-block;font-size:inherit;line-height:0;vertical-align:middle;& > *{vertical-align:baseline !important;}& + ","{margin-left:10px;}}"],L)),(i=>i.padding?o(i.padding,'padding'):null),(i=>i.paddingTop?o(i.paddingTop,'padding-top'):null),(i=>i.paddingRight?o(i.paddingRight,'padding-right'):null),(i=>i.paddingBottom?o(i.paddingBottom,'padding-bottom'):null),(i=>i.paddingLeft?o(i.paddingLeft,'padding-left'):null),(i=>i.margin?o(i.margin,'margin'):null),(i=>i.marginTop?o(i.marginTop,'margin-top'):null),(i=>i.marginRight?o(i.marginRight,'margin-right'):null),(i=>i.marginBottom?o(i.marginBottom,'margin-bottom'):null),(i=>i.marginLeft?o(i.marginLeft,'margin-left'):null),(i=>{var{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e}=i;return a({sizes:{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e},cssProperty:'padding'})}),(i=>{var{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e}=i;return a({sizes:{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e},cssProperty:'padding-top'})}),(i=>{var{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e}=i;return a({sizes:{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e},cssProperty:'padding-right'})}),(i=>{var{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e}=i;return a({sizes:{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e},cssProperty:'padding-bottom'})}),(i=>{var{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e}=i;return a({sizes:{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e},cssProperty:'padding-left'})}),(i=>{var{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e}=i;return a({sizes:{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e},cssProperty:'margin'})}),(i=>{var{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e}=i;return a({sizes:{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e},cssProperty:'margin-top'})}),(i=>{var{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e}=i;return a({sizes:{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e},cssProperty:'margin-right'})}),(i=>{var{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e}=i;return a({sizes:{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e},cssProperty:'margin-bottom'})}),(i=>{var{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e}=i;return a({sizes:{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e},cssProperty:'margin-left'})}),(i=>i.fontSize?o(i.fontSize,'font-size'):null),(i=>{var{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e}=i;return a({sizes:{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e},cssProperty:'font-size'})}),(i=>i.height?o(i.height,'height'):null),(i=>{var{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e}=i;return a({sizes:{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e},cssProperty:'height'})}),(i=>i.width?o(g(i.width),i.fluid&&'auto'!==i.width?'max-width':'width'):null),(i=>{var{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e,fluid:d,width:p}=i;return a({sizes:{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e},cssProperty:d&&'auto'!==p?'max-width':'width',customSizeHandler:g})}),(i=>i.round&&i.size?o('string'==typeof i.size&&p[i.size]?p[i.size]:i.size,u):null),(i=>i.fluid?o(i.fluid,f):null),(i=>{var{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e}=i;return a({sizes:{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e},cssProperty:f})}),(i=>i.disabled?h:null),(i=>i.disabled||i.loading?null:c));export{L as Content,S as Root};
|
|
1
|
+
import i,{keyframes as n,css as t}from'styled-components';import r from'tinycolor2';import{property as o,responsiveNamedProperty as a}from'../../mixins/responsive-property.js';import{color as e}from'../../mixins/color.js';import{display as d}from'../../mixins/display.js';import{chooseWidthValue as g}from'./helpers.js';var p={l:52,m:48,s:40,xs:32};var l=n(["0%{background-position:0 0;}100%{background-position:50px 50px;}"]);var s=t(["background-image:linear-gradient( -45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent );background-size:25px 25px;animation:"," 2s linear infinite;cursor:progress;"],l);var m=t(["border-radius:",";"],(i=>i.theme.borderRadius));var h=t(["cursor:not-allowed;background-color:",";color:",";"],(i=>i.theme.colors.mercury),(i=>i.theme.colors.silver));var c=t(["&:active{box-shadow:inset 0 4px 0px 0px rgba(0,0,0,0.14);}&:hover{","}",""],(i=>i.color&&i.fontColor?t(["color:",";background-color:",";"],i.fontColor,r(i.theme.colors[i.color]).saturate(-5).lighten(-8).toString()):null),(i=>(i.inverted||i.basic)&&i.fontColor&&i.color?t(["&:not(:hover){border:1px solid ",";}&:hover{border:1px solid ",";}"],i.theme.colors[i.color],i.theme.colors[i.color]):null));var u=function(i,n){var r=arguments.length>1&&void 0!==n?n:'px';return t(["width:","",";height:","",";font-size:","",";line-height:","",";padding:","",";"],i,r,i,r,.44*i,r,.44*i,r,.28*i,r)};var f=()=>t(["min-width:initial;width:100%;"]);var L=i.span.withConfig({componentId:"fox-ui__sc-16o31r2-0"})(["display:inline-block;line-height:1;vertical-align:middle;"]);var S=i.div.withConfig({shouldForwardProp:i=>['children','className','style','target','to','id','href','ref','onClick','type','onMouseEnter','onMouseLeave','form'].includes(i)||i.includes('data')}).withConfig({componentId:"fox-ui__sc-16o31r2-1"})(["-webkit-box-sizing:border-box !important;-moz-box-sizing:border-box !important;-ms-box-sizing:border-box !important;box-sizing:border-box !important;position:relative;overflow:hidden;border:none;cursor:pointer;user-select:none;font-weight:600;padding-top:0;padding-bottom:0;text-decoration:none;justify-content:center;align-items:center;text-align:center;transition:0.2s all;white-space:nowrap;appearance:none;vertical-align:top;& + &{margin-left:1em;","}"," "," "," "," "," "," "," &:focus{outline:0;}"," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",""],(i=>i.noSpacing?t(["margin-left:auto;"]):null),(i=>i.display?d(i.display):null),(i=>i.loading?s:null),(i=>i.rounded?m:null),(i=>i.color?e(i.color,i.inverted||i.basic?'color':'background-color'):null),(i=>i.fontColor?e(i.fontColor,i.inverted||i.basic?'background-color':'color'):null),(i=>i.basic?t(["background-color:transparent;"]):null),(i=>i.round?t(["border-radius:100%;letter-spacing:0.5px;& > *{display:inline-block !important;vertical-align:middle !important;}.icon{vertical-align:middle;& > *{vertical-align:middle !important;}svg{vertical-align:middle;}}"]):t([".icon{display:inline-block;font-size:inherit;line-height:0;vertical-align:middle;& > *{vertical-align:baseline !important;}& + ","{margin-left:10px;}}"],L)),(i=>i.padding?o(i.padding,'padding'):null),(i=>i.paddingTop?o(i.paddingTop,'padding-top'):null),(i=>i.paddingRight?o(i.paddingRight,'padding-right'):null),(i=>i.paddingBottom?o(i.paddingBottom,'padding-bottom'):null),(i=>i.paddingLeft?o(i.paddingLeft,'padding-left'):null),(i=>i.margin?o(i.margin,'margin'):null),(i=>i.marginTop?o(i.marginTop,'margin-top'):null),(i=>i.marginRight?o(i.marginRight,'margin-right'):null),(i=>i.marginBottom?o(i.marginBottom,'margin-bottom'):null),(i=>i.marginLeft?o(i.marginLeft,'margin-left'):null),(i=>{var{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e}=i;return a({sizes:{paddingXS:n,paddingS:t,paddingM:r,paddingL:o,paddingXL:e},cssProperty:'padding'})}),(i=>{var{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e}=i;return a({sizes:{paddingTopXS:n,paddingTopS:t,paddingTopM:r,paddingTopL:o,paddingTopXL:e},cssProperty:'padding-top'})}),(i=>{var{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e}=i;return a({sizes:{paddingRightXS:n,paddingRightS:t,paddingRightM:r,paddingRightL:o,paddingRightXL:e},cssProperty:'padding-right'})}),(i=>{var{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e}=i;return a({sizes:{paddingBottomXS:n,paddingBottomS:t,paddingBottomM:r,paddingBottomL:o,paddingBottomXL:e},cssProperty:'padding-bottom'})}),(i=>{var{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e}=i;return a({sizes:{paddingLeftXS:n,paddingLeftS:t,paddingLeftM:r,paddingLeftL:o,paddingLeftXL:e},cssProperty:'padding-left'})}),(i=>{var{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e}=i;return a({sizes:{marginXS:n,marginS:t,marginM:r,marginL:o,marginXL:e},cssProperty:'margin'})}),(i=>{var{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e}=i;return a({sizes:{marginTopXS:n,marginTopS:t,marginTopM:r,marginTopL:o,marginTopXL:e},cssProperty:'margin-top'})}),(i=>{var{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e}=i;return a({sizes:{marginRightXS:n,marginRightS:t,marginRightM:r,marginRightL:o,marginRightXL:e},cssProperty:'margin-right'})}),(i=>{var{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e}=i;return a({sizes:{marginBottomXS:n,marginBottomS:t,marginBottomM:r,marginBottomL:o,marginBottomXL:e},cssProperty:'margin-bottom'})}),(i=>{var{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e}=i;return a({sizes:{marginLeftXS:n,marginLeftS:t,marginLeftM:r,marginLeftL:o,marginLeftXL:e},cssProperty:'margin-left'})}),(i=>i.fontSize?o(i.fontSize,'font-size'):null),(i=>{var{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e}=i;return a({sizes:{fontSizeXS:n,fontSizeS:t,fontSizeM:r,fontSizeL:o,fontSizeXL:e},cssProperty:'font-size'})}),(i=>i.height?o(i.height,'height'):null),(i=>{var{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e}=i;return a({sizes:{heightXS:n,heightS:t,heightM:r,heightL:o,heightXL:e},cssProperty:'height'})}),(i=>i.width?o(g(i.width),i.fluid&&'auto'!==i.width?'max-width':'width'):null),(i=>{var{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e,fluid:d,width:p}=i;return a({sizes:{widthXS:n,widthS:t,widthM:r,widthL:o,widthXL:e},cssProperty:d&&'auto'!==p?'max-width':'width',customSizeHandler:g})}),(i=>i.round&&i.size?o('string'==typeof i.size&&p[i.size]?p[i.size]:i.size,u):null),(i=>i.fluid?o(i.fluid,f):null),(i=>{var{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e}=i;return a({sizes:{fluidXS:n,fluidS:t,fluidM:r,fluidL:o,fluidXL:e},cssProperty:f})}),(i=>i.disabled?h:null),(i=>i.disabled||i.loading?null:c));export{L as Content,S as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport { CalcProperty, property, responsiveNamedProperty } from '../../mixins/responsive-property'\nimport { color } from '../../mixins/color'\nimport { display } from '../../mixins/display'\nimport { ButtonProps } from './Button'\nimport { chooseWidthValue } from './helpers'\n\nconst ROUND_SIZE: Record<Exclude<ButtonProps['size'], undefined>, number> = {\n l: 52,\n m: 48,\n s: 40,\n xs: 32,\n}\n\nconst loadingAnimation = keyframes`\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n`\n\nconst loading = css`\n background-image: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.2) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.2) 50%,\n rgba(255, 255, 255, 0.2) 75%,\n transparent 75%,\n transparent\n );\n background-size: 25px 25px;\n animation: ${loadingAnimation} 2s linear infinite;\n /* pointer-events: none; */\n cursor: progress;\n`\n\nconst rounded = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nconst disabled = css`\n cursor: not-allowed;\n background-color: ${(props) => props.theme.colors.mercury};\n color: ${(props) => props.theme.colors.silver};\n`\n\nconst active = css`\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n ${(props: ButtonProps & { theme: DefaultTheme }) => {\n if (!props.color || !props.fontColor) return null\n\n return css`\n color: ${props.fontColor};\n background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n `\n }}\n }\n ${(props) =>\n (props.inverted || props.basic) && props.fontColor && props.color\n ? css`\n &:not(:hover) {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n &:hover {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n `\n : null}\n`\n\nconst roundSize: CalcProperty = (size, sizing = 'px') => {\n return css`\n width: ${size as number}${sizing};\n height: ${size as number}${sizing};\n font-size: ${0.44 * (size as number)}${sizing};\n line-height: ${0.44 * (size as number)}${sizing};\n padding: ${0.28 * (size as number)}${sizing};\n `\n}\n\nconst fluid: CalcProperty = () => {\n return css`\n min-width: initial;\n width: 100%;\n `\n}\n\nexport const Content = styled.span`\n display: inline-block;\n line-height: 1;\n vertical-align: middle;\n`\n\nexport const Root = styled.div.withConfig<ButtonProps>({\n shouldForwardProp: (prop) =>\n [\n 'children',\n 'className',\n 'style',\n 'target',\n 'to',\n 'id',\n 'href',\n 'ref',\n 'onClick',\n 'type',\n 'onMouseEnter',\n 'onMouseLeave',\n ].includes(prop) || prop.includes('data'),\n})`\n -webkit-box-sizing: border-box !important;\n -moz-box-sizing: border-box !important;\n -ms-box-sizing: border-box !important;\n box-sizing: border-box !important;\n position: relative;\n overflow: hidden;\n border: none;\n cursor: pointer;\n user-select: none;\n font-weight: 600;\n padding-top: 0;\n padding-bottom: 0;\n text-decoration: none;\n justify-content: center;\n align-items: center;\n text-align: center;\n transition: 0.2s all;\n white-space: nowrap;\n appearance: none;\n vertical-align: top;\n & + & {\n margin-left: 1em;\n ${(props) =>\n props.noSpacing\n ? css`\n margin-left: auto;\n `\n : null}\n }\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.loading ? loading : null)}\n ${(props) => (props.rounded ? rounded : null)}\n ${(props) => (props.color ? color(props.color, props.inverted || props.basic ? 'color' : 'background-color') : null)}\n ${(props) =>\n props.fontColor ? color(props.fontColor, props.inverted || props.basic ? 'background-color' : 'color') : null}\n ${(props) =>\n props.basic\n ? css`\n background-color: transparent;\n `\n : null}\n\n ${(props) =>\n props.round\n ? css`\n border-radius: 100%;\n letter-spacing: 0.5px;\n & > * {\n display: inline-block !important;\n vertical-align: middle !important;\n }\n .icon {\n vertical-align: middle;\n\n & > * {\n vertical-align: middle !important;\n }\n svg {\n vertical-align: middle;\n }\n }\n `\n : css`\n .icon {\n display: inline-block;\n font-size: inherit;\n line-height: 0;\n vertical-align: middle;\n & > * {\n vertical-align: baseline !important;\n }\n & + ${Content} {\n margin-left: 10px;\n }\n }\n `}\n\n &:focus {\n outline: 0;\n }\n\n /** BEGIN paddings */\n ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n /** END paddings */ \n\n /** BEGIN margins */\n ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n /** END margins */ \n\n /** BEGIN Responsive paddings */\n ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) =>\n responsiveNamedProperty({ sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL }, cssProperty: 'padding' })}\n ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) =>\n responsiveNamedProperty({\n sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n cssProperty: 'padding-top',\n })}\n ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) =>\n responsiveNamedProperty({\n sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n cssProperty: 'padding-right',\n })}\n ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) =>\n responsiveNamedProperty({\n sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n cssProperty: 'padding-bottom',\n })}\n ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) =>\n responsiveNamedProperty({\n sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n cssProperty: 'padding-left',\n })}\n /** END Responsive paddings */ \n\n /** BEGIN Responsive margins */\n ${({ marginXS, marginS, marginM, marginL, marginXL }) =>\n responsiveNamedProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })}\n ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) =>\n responsiveNamedProperty({\n sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n cssProperty: 'margin-top',\n })}\n ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) =>\n responsiveNamedProperty({\n sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n cssProperty: 'margin-right',\n })}\n ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) =>\n responsiveNamedProperty({\n sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n cssProperty: 'margin-bottom',\n })}\n ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) =>\n responsiveNamedProperty({\n sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n cssProperty: 'margin-left',\n })}\n /** END Responsive margins */\n\n /** BEGIN Responsive font-size */\n ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n return responsiveNamedProperty({\n sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n cssProperty: 'font-size',\n })\n }}\n /** END Responsive font-size */\n\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n ${(props) =>\n props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${({ widthXS, widthS, widthM, widthL, widthXL, fluid, width }) =>\n responsiveNamedProperty({\n sizes: { widthXS, widthS, widthM, widthL, widthXL },\n cssProperty: fluid && width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n \n\n ${(props) =>\n props.round && props.size\n ? property(\n typeof props.size === 'string' && ROUND_SIZE[props.size] ? ROUND_SIZE[props.size] : props.size,\n roundSize\n )\n : null}\n \n\n ${(props) => (props.fluid ? property(props.fluid, fluid) : null)}\n ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) =>\n responsiveNamedProperty({ sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL }, cssProperty: fluid })}\n\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (!props.disabled && !props.loading ? active : null)}\n`\n"],"names":["ROUND_SIZE","l","m","s","xs","loadingAnimation","keyframes","loading","css","rounded","props","theme","borderRadius","disabled","colors","mercury","silver","active","color","fontColor","tiny","saturate","lighten","toString","inverted","basic","roundSize","size","n","sizing","fluid","Content","styled","span","withConfig","componentId","Root","div","shouldForwardProp","prop","includes","noSpacing","display","round","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveNamedProperty","sizes","cssProperty","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","fontSize","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","height","_ref12","heightXS","heightS","heightM","heightL","heightXL","width","chooseWidthValue","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL"],"mappings":"gUAQA,IAAMA,EAAsE,CAC1EC,EAAG,GACHC,EAAG,GACHC,EAAG,GACHC,GAAI,IAGN,IAAMC,EAAmBC,EAAzB,CAAA,qEASA,IAAMC,EAAUC,EAAH,CAAA,4NAAA,wCAYEH,GAKf,IAAMI,EAAUD,EACIE,CAAAA,iBAAAA,MAAAA,GAAUA,EAAMC,MAAMC,eAG1C,IAAMC,EAAWL,EAAH,CAAA,uCAAA,UAAA,MAESE,GAAUA,EAAMC,MAAMG,OAAOC,UACxCL,GAAUA,EAAMC,MAAMG,OAAOE,SAGzC,IAAMC,EAAST,EAAH,CAAA,qEAAA,IAAA,KAKLE,GACIA,EAAMQ,OAAUR,EAAMS,UAEpBX,EAAP,CAAA,SAAA,qBAAA,KACWE,EAAMS,UACKC,EAAKV,EAAMC,MAAMG,OAAOJ,EAAMQ,QAAQG,UAAU,GAAGC,SAAS,GAAGC,YAJxC,OAQ9Cb,IACAA,EAAMc,UAAYd,EAAMe,QAAUf,EAAMS,WAAaT,EAAMQ,MACxDV,EADJ,CAAA,kCAAA,8BAAA,MAG4BE,EAAMC,MAAMG,OAAOJ,EAAMQ,OAGzBR,EAAMC,MAAMG,OAAOJ,EAAMQ,QAGjD,OAGR,IAAMQ,EAA0B,SAACC,EAADC,GAAyB,IAAlBC,+BAAPD,EAAAA,EAAgB,KAC9C,OAAOpB,qFACImB,EAAiBE,EAChBF,EAAiBE,EACd,IAAQF,EAAkBE,EACxB,IAAQF,EAAkBE,EAC9B,IAAQF,EAAkBE,IAIzC,IAAMC,EAAsB,IACnBtB,EAAP,CAAA,kCAMWuB,IAAAA,EAAUC,EAAOC,KAAVC,WAAA,CAAAC,YAAA,wBAAGH,CAAhB,CAAA,8DAMA,IAAMI,EAAOJ,EAAOK,IAAIH,WAAwB,CACrDI,kBAAoBC,GAClB,CACE,WACA,YACA,QACA,SACA,KACA,KACA,OACA,MACA,UACA,OACA,eACA,gBACAC,SAASD,IAASA,EAAKC,SAAS,UAfrBN,WAAA,CAAAC,YAAA,wBAAGH,CAAH,CAAA,scAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,uBAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KAuCVtB,GACDA,EAAM+B,UACFjC,EAGA,CAAA,sBAAA,OAELE,GAAWA,EAAMgC,QAAUA,EAAQhC,EAAMgC,SAAW,OACpDhC,GAAWA,EAAMH,QAAUA,EAAU,OACrCG,GAAWA,EAAMD,QAAUA,EAAU,OACrCC,GAAWA,EAAMQ,MAAQA,EAAMR,EAAMQ,MAAOR,EAAMc,UAAYd,EAAMe,MAAQ,QAAU,oBAAsB,OAC5Gf,GACDA,EAAMS,UAAYD,EAAMR,EAAMS,UAAWT,EAAMc,UAAYd,EAAMe,MAAQ,mBAAqB,SAAW,OACxGf,GACDA,EAAMe,MACFjB,EAGA,CAAA,kCAAA,OAEHE,GACDA,EAAMiC,MACFnC,EADJ,CAAA,qNAmBIA,EAnBJ,CAAA,kIAAA,wBA4BcuB,KAWbrB,GAAWA,EAAMkC,QAAUC,EAASnC,EAAMkC,QAAS,WAAa,OAChElC,GAAWA,EAAMoC,WAAaD,EAASnC,EAAMoC,WAAY,eAAiB,OAC1EpC,GAAWA,EAAMqC,aAAeF,EAASnC,EAAMqC,aAAc,iBAAmB,OAChFrC,GAAWA,EAAMsC,cAAgBH,EAASnC,EAAMsC,cAAe,kBAAoB,OACnFtC,GAAWA,EAAMuC,YAAcJ,EAASnC,EAAMuC,YAAa,gBAAkB,OAI7EvC,GAAWA,EAAMwC,OAASL,EAASnC,EAAMwC,OAAQ,UAAY,OAC7DxC,GAAWA,EAAMyC,UAAYN,EAASnC,EAAMyC,UAAW,cAAgB,OACvEzC,GAAWA,EAAM0C,YAAcP,EAASnC,EAAM0C,YAAa,gBAAkB,OAC7E1C,GAAWA,EAAM2C,aAAeR,EAASnC,EAAM2C,aAAc,iBAAmB,OAChF3C,GAAWA,EAAM4C,WAAaT,EAASnC,EAAM4C,WAAY,eAAiB,OAI3EC,IAAA,IAACC,UAAEA,EAAFC,SAAaA,EAAbC,SAAuBA,EAAvBC,SAAiCA,EAAjCC,UAA2CA,GAA5CL,EAAA,OACAM,EAAwB,CAAEC,MAAO,CAAEN,UAAAA,EAAWC,SAAAA,EAAUC,SAAAA,EAAUC,SAAAA,EAAUC,UAAAA,GAAaG,YAAa,eACtGC,IAAA,IAACC,aAAEA,EAAFC,YAAgBA,EAAhBC,YAA6BA,EAA7BC,YAA0CA,EAA1CC,aAAuDA,GAAxDL,EAAA,OACAH,EAAwB,CACtBC,MAAO,CAAEG,aAAAA,EAAcC,YAAAA,EAAaC,YAAAA,EAAaC,YAAAA,EAAaC,aAAAA,GAC9DN,YAAa,mBAEfO,IAAA,IAACC,eAAEA,EAAFC,cAAkBA,EAAlBC,cAAiCA,EAAjCC,cAAgDA,EAAhDC,eAA+DA,GAAhEL,EAAA,OACAT,EAAwB,CACtBC,MAAO,CAAES,eAAAA,EAAgBC,cAAAA,EAAeC,cAAAA,EAAeC,cAAAA,EAAeC,eAAAA,GACtEZ,YAAa,qBAEfa,IAAA,IAACC,gBAAEA,EAAFC,eAAmBA,EAAnBC,eAAmCA,EAAnCC,eAAmDA,EAAnDC,gBAAmEA,GAApEL,EAAA,OACAf,EAAwB,CACtBC,MAAO,CAAEe,gBAAAA,EAAiBC,eAAAA,EAAgBC,eAAAA,EAAgBC,eAAAA,EAAgBC,gBAAAA,GAC1ElB,YAAa,sBAEfmB,IAAA,IAACC,cAAEA,EAAFC,aAAiBA,EAAjBC,aAA+BA,EAA/BC,aAA6CA,EAA7CC,cAA2DA,GAA5DL,EAAA,OACArB,EAAwB,CACtBC,MAAO,CAAEqB,cAAAA,EAAeC,aAAAA,EAAcC,aAAAA,EAAcC,aAAAA,EAAcC,cAAAA,GAClExB,YAAa,oBAKfyB,IAAA,IAACC,SAAEA,EAAFC,QAAYA,EAAZC,QAAqBA,EAArBC,QAA8BA,EAA9BC,SAAuCA,GAAxCL,EAAA,OACA3B,EAAwB,CAAEC,MAAO,CAAE2B,SAAAA,EAAUC,QAAAA,EAASC,QAAAA,EAASC,QAAAA,EAASC,SAAAA,GAAY9B,YAAa,cACjG+B,IAAA,IAACC,YAAEA,EAAFC,WAAeA,EAAfC,WAA2BA,EAA3BC,WAAuCA,EAAvCC,YAAmDA,GAApDL,EAAA,OACAjC,EAAwB,CACtBC,MAAO,CAAEiC,YAAAA,EAAaC,WAAAA,EAAYC,WAAAA,EAAYC,WAAAA,EAAYC,YAAAA,GAC1DpC,YAAa,kBAEfqC,IAAA,IAACC,cAAEA,EAAFC,aAAiBA,EAAjBC,aAA+BA,EAA/BC,aAA6CA,EAA7CC,cAA2DA,GAA5DL,EAAA,OACAvC,EAAwB,CACtBC,MAAO,CAAEuC,cAAAA,EAAeC,aAAAA,EAAcC,aAAAA,EAAcC,aAAAA,EAAcC,cAAAA,GAClE1C,YAAa,oBAEf2C,IAAA,IAACC,eAAEA,EAAFC,cAAkBA,EAAlBC,cAAiCA,EAAjCC,cAAgDA,EAAhDC,eAA+DA,GAAhEL,EAAA,OACA7C,EAAwB,CACtBC,MAAO,CAAE6C,eAAAA,EAAgBC,cAAAA,EAAeC,cAAAA,EAAeC,cAAAA,EAAeC,eAAAA,GACtEhD,YAAa,qBAEfiD,IAAA,IAACC,aAAEA,EAAFC,YAAgBA,EAAhBC,YAA6BA,EAA7BC,YAA0CA,EAA1CC,aAAuDA,GAAxDL,EAAA,OACAnD,EAAwB,CACtBC,MAAO,CAAEmD,aAAAA,EAAcC,YAAAA,EAAaC,YAAAA,EAAaC,YAAAA,EAAaC,aAAAA,GAC9DtD,YAAa,mBAKdrD,GAAWA,EAAM4G,SAAWzE,EAASnC,EAAM4G,SAAU,aAAe,OACrEC,IAAiE,IAAhEC,WAAEA,EAAFC,UAAcA,EAAdC,UAAyBA,EAAzBC,UAAoCA,EAApCC,WAA+CA,GAAiBL,EACjE,OAAO1D,EAAwB,CAC7BC,MAAO,CAAE0D,WAAAA,EAAYC,UAAAA,EAAWC,UAAAA,EAAWC,UAAAA,EAAWC,WAAAA,GACtD7D,YAAa,iBAKdrD,GAAWA,EAAMmH,OAAShF,EAASnC,EAAMmH,OAAQ,UAAY,OAC9DC,IAAA,IAACC,SAAEA,EAAFC,QAAYA,EAAZC,QAAqBA,EAArBC,QAA8BA,EAA9BC,SAAuCA,GAAxCL,EAAA,OACAjE,EAAwB,CAAEC,MAAO,CAAEiE,SAAAA,EAAUC,QAAAA,EAASC,QAAAA,EAASC,QAAAA,EAASC,SAAAA,GAAYpE,YAAa,cAEhGrD,GACDA,EAAM0H,MACFvF,EAASwF,EAAiB3H,EAAM0H,OAAQ1H,EAAMoB,OAAyB,SAAhBpB,EAAM0H,MAAmB,YAAc,SAC9F,OACJE,IAAA,IAACC,QAAEA,EAAFC,OAAWA,EAAXC,OAAmBA,EAAnBC,OAA2BA,EAA3BC,QAAmCA,EAAnC7G,MAA4CA,EAA5CsG,MAAmDA,GAApDE,EAAA,OACAzE,EAAwB,CACtBC,MAAO,CAAEyE,QAAAA,EAASC,OAAAA,EAAQC,OAAAA,EAAQC,OAAAA,EAAQC,QAAAA,GAC1C5E,YAAajC,GAAmB,SAAVsG,EAAmB,YAAc,QACvDQ,kBAAmBP,OAIpB3H,GACDA,EAAMiC,OAASjC,EAAMiB,KACjBkB,EACwB,iBAAfnC,EAAMiB,MAAqB3B,EAAWU,EAAMiB,MAAQ3B,EAAWU,EAAMiB,MAAQjB,EAAMiB,KAC1FD,GAEF,OAGHhB,GAAWA,EAAMoB,MAAQe,EAASnC,EAAMoB,MAAOA,GAAS,OACzD+G,IAAA,IAACC,QAAEA,EAAFC,OAAWA,EAAXC,OAAmBA,EAAnBC,OAA2BA,EAA3BC,QAAmCA,GAApCL,EAAA,OACAhF,EAAwB,CAAEC,MAAO,CAAEgF,QAAAA,EAASC,OAAAA,EAAQC,OAAAA,EAAQC,OAAAA,EAAQC,QAAAA,GAAWnF,YAAajC,OAE3FpB,GAAWA,EAAMG,SAAWA,EAAW,OACvCH,GAAYA,EAAMG,UAAaH,EAAMH,QAAmB,KAATU"}
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Button/style.ts"],"sourcesContent":["import styled, { css, DefaultTheme, keyframes } from 'styled-components'\nimport tiny from 'tinycolor2'\nimport { CalcProperty, property, responsiveNamedProperty } from '../../mixins/responsive-property'\nimport { color } from '../../mixins/color'\nimport { display } from '../../mixins/display'\nimport { ButtonProps } from './Button'\nimport { chooseWidthValue } from './helpers'\n\nconst ROUND_SIZE: Record<Exclude<ButtonProps['size'], undefined>, number> = {\n l: 52,\n m: 48,\n s: 40,\n xs: 32,\n}\n\nconst loadingAnimation = keyframes`\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 50px 50px;\n }\n`\n\nconst loading = css`\n background-image: linear-gradient(\n -45deg,\n rgba(255, 255, 255, 0.2) 25%,\n transparent 25%,\n transparent 50%,\n rgba(255, 255, 255, 0.2) 50%,\n rgba(255, 255, 255, 0.2) 75%,\n transparent 75%,\n transparent\n );\n background-size: 25px 25px;\n animation: ${loadingAnimation} 2s linear infinite;\n /* pointer-events: none; */\n cursor: progress;\n`\n\nconst rounded = css`\n border-radius: ${(props) => props.theme.borderRadius};\n`\n\nconst disabled = css`\n cursor: not-allowed;\n background-color: ${(props) => props.theme.colors.mercury};\n color: ${(props) => props.theme.colors.silver};\n`\n\nconst active = css`\n &:active {\n box-shadow: inset 0 4px 0px 0px rgba(0, 0, 0, 0.14);\n }\n &:hover {\n ${(props: ButtonProps & { theme: DefaultTheme }) => {\n if (!props.color || !props.fontColor) return null\n\n return css`\n color: ${props.fontColor};\n background-color: ${tiny(props.theme.colors[props.color]).saturate(-5).lighten(-8).toString()};\n `\n }}\n }\n ${(props) =>\n (props.inverted || props.basic) && props.fontColor && props.color\n ? css`\n &:not(:hover) {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n &:hover {\n border: 1px solid ${props.theme.colors[props.color]};\n }\n `\n : null}\n`\n\nconst roundSize: CalcProperty = (size, sizing = 'px') => {\n return css`\n width: ${size as number}${sizing};\n height: ${size as number}${sizing};\n font-size: ${0.44 * (size as number)}${sizing};\n line-height: ${0.44 * (size as number)}${sizing};\n padding: ${0.28 * (size as number)}${sizing};\n `\n}\n\nconst fluid: CalcProperty = () => {\n return css`\n min-width: initial;\n width: 100%;\n `\n}\n\nexport const Content = styled.span`\n display: inline-block;\n line-height: 1;\n vertical-align: middle;\n`\n\nexport const Root = styled.div.withConfig<ButtonProps>({\n shouldForwardProp: (prop) =>\n [\n 'children',\n 'className',\n 'style',\n 'target',\n 'to',\n 'id',\n 'href',\n 'ref',\n 'onClick',\n 'type',\n 'onMouseEnter',\n 'onMouseLeave',\n 'form',\n ].includes(prop) || prop.includes('data'),\n})`\n -webkit-box-sizing: border-box !important;\n -moz-box-sizing: border-box !important;\n -ms-box-sizing: border-box !important;\n box-sizing: border-box !important;\n position: relative;\n overflow: hidden;\n border: none;\n cursor: pointer;\n user-select: none;\n font-weight: 600;\n padding-top: 0;\n padding-bottom: 0;\n text-decoration: none;\n justify-content: center;\n align-items: center;\n text-align: center;\n transition: 0.2s all;\n white-space: nowrap;\n appearance: none;\n vertical-align: top;\n & + & {\n margin-left: 1em;\n ${(props) =>\n props.noSpacing\n ? css`\n margin-left: auto;\n `\n : null}\n }\n ${(props) => (props.display ? display(props.display) : null)}\n ${(props) => (props.loading ? loading : null)}\n ${(props) => (props.rounded ? rounded : null)}\n ${(props) => (props.color ? color(props.color, props.inverted || props.basic ? 'color' : 'background-color') : null)}\n ${(props) =>\n props.fontColor ? color(props.fontColor, props.inverted || props.basic ? 'background-color' : 'color') : null}\n ${(props) =>\n props.basic\n ? css`\n background-color: transparent;\n `\n : null}\n\n ${(props) =>\n props.round\n ? css`\n border-radius: 100%;\n letter-spacing: 0.5px;\n & > * {\n display: inline-block !important;\n vertical-align: middle !important;\n }\n .icon {\n vertical-align: middle;\n\n & > * {\n vertical-align: middle !important;\n }\n svg {\n vertical-align: middle;\n }\n }\n `\n : css`\n .icon {\n display: inline-block;\n font-size: inherit;\n line-height: 0;\n vertical-align: middle;\n & > * {\n vertical-align: baseline !important;\n }\n & + ${Content} {\n margin-left: 10px;\n }\n }\n `}\n\n &:focus {\n outline: 0;\n }\n\n /** BEGIN paddings */\n ${(props) => (props.padding ? property(props.padding, 'padding') : null)}\n ${(props) => (props.paddingTop ? property(props.paddingTop, 'padding-top') : null)}\n ${(props) => (props.paddingRight ? property(props.paddingRight, 'padding-right') : null)}\n ${(props) => (props.paddingBottom ? property(props.paddingBottom, 'padding-bottom') : null)}\n ${(props) => (props.paddingLeft ? property(props.paddingLeft, 'padding-left') : null)}\n /** END paddings */ \n\n /** BEGIN margins */\n ${(props) => (props.margin ? property(props.margin, 'margin') : null)}\n ${(props) => (props.marginTop ? property(props.marginTop, 'margin-top') : null)}\n ${(props) => (props.marginRight ? property(props.marginRight, 'margin-right') : null)}\n ${(props) => (props.marginBottom ? property(props.marginBottom, 'margin-bottom') : null)}\n ${(props) => (props.marginLeft ? property(props.marginLeft, 'margin-left') : null)}\n /** END margins */ \n\n /** BEGIN Responsive paddings */\n ${({ paddingXS, paddingS, paddingM, paddingL, paddingXL }) =>\n responsiveNamedProperty({ sizes: { paddingXS, paddingS, paddingM, paddingL, paddingXL }, cssProperty: 'padding' })}\n ${({ paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL }) =>\n responsiveNamedProperty({\n sizes: { paddingTopXS, paddingTopS, paddingTopM, paddingTopL, paddingTopXL },\n cssProperty: 'padding-top',\n })}\n ${({ paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL }) =>\n responsiveNamedProperty({\n sizes: { paddingRightXS, paddingRightS, paddingRightM, paddingRightL, paddingRightXL },\n cssProperty: 'padding-right',\n })}\n ${({ paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL }) =>\n responsiveNamedProperty({\n sizes: { paddingBottomXS, paddingBottomS, paddingBottomM, paddingBottomL, paddingBottomXL },\n cssProperty: 'padding-bottom',\n })}\n ${({ paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL }) =>\n responsiveNamedProperty({\n sizes: { paddingLeftXS, paddingLeftS, paddingLeftM, paddingLeftL, paddingLeftXL },\n cssProperty: 'padding-left',\n })}\n /** END Responsive paddings */ \n\n /** BEGIN Responsive margins */\n ${({ marginXS, marginS, marginM, marginL, marginXL }) =>\n responsiveNamedProperty({ sizes: { marginXS, marginS, marginM, marginL, marginXL }, cssProperty: 'margin' })}\n ${({ marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL }) =>\n responsiveNamedProperty({\n sizes: { marginTopXS, marginTopS, marginTopM, marginTopL, marginTopXL },\n cssProperty: 'margin-top',\n })}\n ${({ marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL }) =>\n responsiveNamedProperty({\n sizes: { marginRightXS, marginRightS, marginRightM, marginRightL, marginRightXL },\n cssProperty: 'margin-right',\n })}\n ${({ marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL }) =>\n responsiveNamedProperty({\n sizes: { marginBottomXS, marginBottomS, marginBottomM, marginBottomL, marginBottomXL },\n cssProperty: 'margin-bottom',\n })}\n ${({ marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL }) =>\n responsiveNamedProperty({\n sizes: { marginLeftXS, marginLeftS, marginLeftM, marginLeftL, marginLeftXL },\n cssProperty: 'margin-left',\n })}\n /** END Responsive margins */\n\n /** BEGIN Responsive font-size */\n ${(props) => (props.fontSize ? property(props.fontSize, 'font-size') : null)}\n ${({ fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL }) => {\n return responsiveNamedProperty({\n sizes: { fontSizeXS, fontSizeS, fontSizeM, fontSizeL, fontSizeXL },\n cssProperty: 'font-size',\n })\n }}\n /** END Responsive font-size */\n\n ${(props) => (props.height ? property(props.height, 'height') : null)}\n ${({ heightXS, heightS, heightM, heightL, heightXL }) =>\n responsiveNamedProperty({ sizes: { heightXS, heightS, heightM, heightL, heightXL }, cssProperty: 'height' })}\n\n ${(props) =>\n props.width\n ? property(chooseWidthValue(props.width), props.fluid && props.width !== 'auto' ? 'max-width' : 'width')\n : null}\n ${({ widthXS, widthS, widthM, widthL, widthXL, fluid, width }) =>\n responsiveNamedProperty({\n sizes: { widthXS, widthS, widthM, widthL, widthXL },\n cssProperty: fluid && width !== 'auto' ? 'max-width' : 'width',\n customSizeHandler: chooseWidthValue,\n })}\n \n\n ${(props) =>\n props.round && props.size\n ? property(\n typeof props.size === 'string' && ROUND_SIZE[props.size] ? ROUND_SIZE[props.size] : props.size,\n roundSize\n )\n : null}\n \n\n ${(props) => (props.fluid ? property(props.fluid, fluid) : null)}\n ${({ fluidXS, fluidS, fluidM, fluidL, fluidXL }) =>\n responsiveNamedProperty({ sizes: { fluidXS, fluidS, fluidM, fluidL, fluidXL }, cssProperty: fluid })}\n\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (!props.disabled && !props.loading ? active : null)}\n`\n"],"names":["ROUND_SIZE","l","m","s","xs","loadingAnimation","keyframes","loading","css","rounded","props","theme","borderRadius","disabled","colors","mercury","silver","active","color","fontColor","tiny","saturate","lighten","toString","inverted","basic","roundSize","size","n","sizing","fluid","Content","styled","span","withConfig","componentId","Root","div","shouldForwardProp","prop","includes","noSpacing","display","round","padding","property","paddingTop","paddingRight","paddingBottom","paddingLeft","margin","marginTop","marginRight","marginBottom","marginLeft","_ref","paddingXS","paddingS","paddingM","paddingL","paddingXL","responsiveNamedProperty","sizes","cssProperty","_ref2","paddingTopXS","paddingTopS","paddingTopM","paddingTopL","paddingTopXL","_ref3","paddingRightXS","paddingRightS","paddingRightM","paddingRightL","paddingRightXL","_ref4","paddingBottomXS","paddingBottomS","paddingBottomM","paddingBottomL","paddingBottomXL","_ref5","paddingLeftXS","paddingLeftS","paddingLeftM","paddingLeftL","paddingLeftXL","_ref6","marginXS","marginS","marginM","marginL","marginXL","_ref7","marginTopXS","marginTopS","marginTopM","marginTopL","marginTopXL","_ref8","marginRightXS","marginRightS","marginRightM","marginRightL","marginRightXL","_ref9","marginBottomXS","marginBottomS","marginBottomM","marginBottomL","marginBottomXL","_ref10","marginLeftXS","marginLeftS","marginLeftM","marginLeftL","marginLeftXL","fontSize","_ref11","fontSizeXS","fontSizeS","fontSizeM","fontSizeL","fontSizeXL","height","_ref12","heightXS","heightS","heightM","heightL","heightXL","width","chooseWidthValue","_ref13","widthXS","widthS","widthM","widthL","widthXL","customSizeHandler","_ref14","fluidXS","fluidS","fluidM","fluidL","fluidXL"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/taggedTemplateLiteral';import i,{css as r}from'styled-components';import o from'tinycolor2';import{screenMaxS as
|
|
1
|
+
import e from'@babel/runtime/helpers/taggedTemplateLiteral';import i,{css as r}from'styled-components';import o from'tinycolor2';import{screenMaxS as t}from'../../mixins/screen.js';import{responsiveProperty as n}from'../../mixins/responsive-property.js';var l;var s=function(e){var i=arguments.length>0&&void 0!==e?e:14;return r(["font-size:","px;svg{width:","px;height:","px;}"],i,i,i)};var a=r(["cursor:not-allowed;color:#d4d4d4;svg{circle:nth-child(1){stroke:#d4d4d4;}circle:nth-child(2){fill:#d4d4d4;}}& > span{cursor:not-allowed;}"]);var p=r(["svg{> rect{fill:",";stroke:",";}g > rect{fill:",";}}& input:checked:disabled + svg rect{fill:",";stroke:",";}"],(e=>o(e.theme.colors.pomegranate).setAlpha(.1).toString()),(e=>e.theme.colors.pomegranate),(e=>e.theme.colors.pomegranate),(e=>o(e.theme.colors.pomegranate).setAlpha(.2).toString()),(e=>o(e.theme.colors.pomegranate).setAlpha(.3).toString()));var d=i.label.withConfig({shouldForwardProp:e=>['children','htmlFor'].includes(e)}).withConfig({componentId:"fox-ui__sc-9s6oap-0"})(["display:inline-flex;align-items:baseline;user-select:none;cursor:pointer;width:auto;svg{position:relative;top:2px;flex-shrink:0;g{opacity:0;transition:all 0.2s ease;}}& + &{margin-left:15px;}input{display:none;appearance:none;&:checked + svg{g{opacity:1;transform:scale(1);}}&:checked:disabled + svg rect{fill:#d4d4d4;stroke:#b8b8b8;}}> span{margin-left:10px;cursor:pointer;}"," "," "," "," "," "," "," ",""],(e=>'small'===e.size||'s'===e.size?s(14):null),(e=>'medium'===e.size||'m'===e.size?s(16):null),(e=>'large'===e.size||'l'===e.size?s(18):null),(e=>'extraLarge'===e.size||'xl'===e.size?s(20):null),(e=>e.disabled?a:null),(e=>e.error?p:null),(e=>n('width',e.fluid&&'auto'!==e.width&&!Array.isArray(e.width)?'max-width':'width')),(e=>e.fluid?r(["width:100%;"]):null));var c=i.div.withConfig({shouldForwardProp:e=>'inline'!==e}).withConfig({componentId:"fox-ui__sc-9s6oap-1"})(["display:flex;flex-direction:column;line-height:normal;> ","{margin-left:0;&:not(:first-child){margin-top:15px;}}",""],d,(i=>i.inline?r(["flex-direction:row;&&& > ","{margin-top:0;}> "," + ","{margin-left:15px;}",""],d,d,d,t()(l||(l=e(["\n flex-direction: column;\n > &{Root} {\n margin-top: 0;\n }\n > "," + "," {\n margin-left: 0;\n margin-top: 15px;\n }\n "])),d,d)):null));export{c as Group,d as Root};
|
|
2
2
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from '../../mixins/responsive-property'\nimport { CheckboxGroupProps } from './Group'\nimport { CheckboxProps } from './Checkbox'\n\nconst sizeCheckbox = (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 {\n cursor: not-allowed;\n }\n`\n\nconst error = css`\n svg {\n > rect {\n fill: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n stroke: ${(props) => props.theme.colors.pomegranate};\n }\n g > rect {\n fill: ${(props) => props.theme.colors.pomegranate};\n }\n }\n`\n\nexport const Root = styled.label.withConfig<CheckboxProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor'].includes(prop),\n})`\n display: inline-flex;\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 g {\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 g {\n opacity: 1;\n transform: scale(1);\n }\n }\n }\n > span {\n margin-left: 10px;\n cursor: pointer;\n }\n ${(props) => (props.size === 'small' || props.size === 's' ? sizeCheckbox(14) : null)}\n ${(props) => (props.size === 'medium' || props.size === 'm' ? sizeCheckbox(16) : null)}\n ${(props) => (props.size === 'large' || props.size === 'l' ? sizeCheckbox(18) : null)}\n ${(props) => (props.size === 'extraLarge' || props.size === 'xl' ? sizeCheckbox(20) : null)}\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (props.error ? error : null)}\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) =>\n props.fluid\n ? css`\n width: 100%;\n `\n : null}\n`\n\nexport const Group = styled.div.withConfig<CheckboxGroupProps>({\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":["sizeCheckbox","
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Checkbox/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport tinycolor from 'tinycolor2'\nimport { screenMaxS } from 'mixins/screen'\nimport { responsiveProperty } from '../../mixins/responsive-property'\nimport { CheckboxGroupProps } from './Group'\nimport { CheckboxProps } from './Checkbox'\n\nconst sizeCheckbox = (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 {\n cursor: not-allowed;\n }\n`\n\nconst error = css`\n svg {\n > rect {\n fill: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.1).toString()};\n stroke: ${(props) => props.theme.colors.pomegranate};\n }\n g > rect {\n fill: ${(props) => props.theme.colors.pomegranate};\n }\n }\n & input:checked:disabled + svg rect {\n fill: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.2).toString()};\n stroke: ${(props) => tinycolor(props.theme.colors.pomegranate).setAlpha(0.3).toString()};\n }\n`\n\nexport const Root = styled.label.withConfig<CheckboxProps>({\n shouldForwardProp: (prop) => ['children', 'htmlFor'].includes(prop),\n})`\n display: inline-flex;\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 g {\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 g {\n opacity: 1;\n transform: scale(1);\n }\n }\n &:checked:disabled + svg rect {\n fill: #d4d4d4;\n stroke: #b8b8b8;\n }\n }\n > span {\n margin-left: 10px;\n cursor: pointer;\n }\n ${(props) => (props.size === 'small' || props.size === 's' ? sizeCheckbox(14) : null)}\n ${(props) => (props.size === 'medium' || props.size === 'm' ? sizeCheckbox(16) : null)}\n ${(props) => (props.size === 'large' || props.size === 'l' ? sizeCheckbox(18) : null)}\n ${(props) => (props.size === 'extraLarge' || props.size === 'xl' ? sizeCheckbox(20) : null)}\n ${(props) => (props.disabled ? disabled : null)}\n ${(props) => (props.error ? error : null)}\n ${(props) =>\n responsiveProperty(\n 'width',\n props.fluid && props.width !== 'auto' && !Array.isArray(props.width) ? 'max-width' : 'width'\n )}\n ${(props) =>\n props.fluid\n ? css`\n width: 100%;\n `\n : null}\n`\n\nexport const Group = styled.div.withConfig<CheckboxGroupProps>({\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":["sizeCheckbox","e","size","css","disabled","error","props","tinycolor","theme","colors","pomegranate","setAlpha","toString","Root","styled","label","withConfig","shouldForwardProp","prop","includes","componentId","responsiveProperty","fluid","width","Array","isArray","Group","div","inline","screenMaxS","_templateObject","_taggedTemplateLiteral"],"mappings":"oQAOA,IAAMA,EAAe,SAAAC,GAAA,IAACC,+BAADD,EAAAA,EAAQ,GAAR,OAAeE,EACrBD,CAAAA,aAAAA,gBAAAA,aAAAA,QAAAA,EAEFA,EACCA,IAId,IAAME,EAAWD,EAAjB,CAAA,8IAgBA,IAAME,EAAQF,EAGCG,CAAAA,mBAAAA,WAAAA,mBAAAA,+CAAAA,WAAAA,OAAAA,GAAUC,EAAUD,EAAME,MAAMC,OAAOC,aAAaC,SAAS,IAAKC,aAChEN,GAAUA,EAAME,MAAMC,OAAOC,cAG/BJ,GAAUA,EAAME,MAAMC,OAAOC,cAI/BJ,GAAUC,EAAUD,EAAME,MAAMC,OAAOC,aAAaC,SAAS,IAAKC,aAChEN,GAAUC,EAAUD,EAAME,MAAMC,OAAOC,aAAaC,SAAS,IAAKC,aAI1E,IAAMC,EAAOC,EAAOC,MAAMC,WAA0B,CACzDC,kBAAoBC,GAAS,CAAC,WAAY,WAAWC,SAASD,KAD/CF,WAAA,CAAAI,YAAA,uBAAGN,CAAH,CAAA,0XAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,IAAA,KAsCZR,GAA0B,UAAfA,EAAMJ,MAAmC,MAAfI,EAAMJ,KAAeF,EAAa,IAAM,OAC7EM,GAA0B,WAAfA,EAAMJ,MAAoC,MAAfI,EAAMJ,KAAeF,EAAa,IAAM,OAC9EM,GAA0B,UAAfA,EAAMJ,MAAmC,MAAfI,EAAMJ,KAAeF,EAAa,IAAM,OAC7EM,GAA0B,eAAfA,EAAMJ,MAAwC,OAAfI,EAAMJ,KAAgBF,EAAa,IAAM,OACnFM,GAAWA,EAAMF,SAAWA,EAAW,OACvCE,GAAWA,EAAMD,MAAQA,EAAQ,OACjCC,GACDe,EACE,QACAf,EAAMgB,OAAyB,SAAhBhB,EAAMiB,QAAqBC,MAAMC,QAAQnB,EAAMiB,OAAS,YAAc,WAEtFjB,GACDA,EAAMgB,MACFnB,EADJ,CAAA,gBAII,OAGD,IAAMuB,EAAQZ,EAAOa,IAAIX,WAA+B,CAC7DC,kBAAoBC,GAAkB,WAATA,IADbF,WAAA,CAAAI,YAAA,uBAAGN,CAMfD,CAAAA,2DAAAA,wDAAAA,IAAAA,GAMDP,GACDA,EAAMsB,OACFzB,EADJ,CAAA,4BAAA,oBAAA,MAAA,sBAAA,IAGcU,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 r from'@babel/runtime/helpers/objectWithoutProperties';import{useState as o,useCallback as
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import r from'@babel/runtime/helpers/objectWithoutProperties';import{useState as o,useRef as a,useCallback as t,useEffect as l}from'react';import{useTheme as s}from'styled-components';import{Root as n}from'./style.js';import{jsx as i}from'react/jsx-runtime';var d=["cols","disabled","error","fluid","name","onChange","maxLength","placeholder","required","rounded","rows","tabIndex","value","className","style","children","autosize","maxRows","color","placeholderColor"];function c(c){var{cols:u,disabled:h,error:m,fluid:p,name:f,onChange:g,maxLength:v,placeholder:x,required:b,rounded:C,rows:w,tabIndex:y,value:R,className:j,style:H,children:I,autosize:T,maxRows:L,color:N,placeholderColor:S}=c,q=r(c,d);var[z,B]=o(w);var E=a();var M=s();var{width:P=M.defaultInputControlsWidth}=q;var W=t((e=>{var{target:r}=e;if(r instanceof HTMLTextAreaElement&&T){var o=r.getBoundingClientRect();r.scrollHeight>o.height&&z<L?B(z+1):r.value&&''!==r.value||B(w)}'function'==typeof g&&g(e)}),[g,z,L,T]);return l((()=>{if(E&&E.current){var e=E.current;var r=e.getBoundingClientRect();if(e.scrollHeight>r.height){var o=parseInt(getComputedStyle(e).lineHeight,10);var a=Math.floor(e.scrollHeight/o);a<=L&&a>w&&B(a)}}}),[]),i(n,e(e({ref:E,className:j,style:H,onChange:W,cols:u,disabled:h,maxLength:v,name:f,placeholder:x,required:b,rows:z,tabIndex:y,value:R,color:N,rounded:C,placeholderColor:S,fluid:p,error:m,width:P},q),{},{children:I}))}c.defaultProps={onChange:e=>console.log(e,e.target.value),rounded:!0,color:'mineShaft',placeholderColor:'silver',cols:20,maxRows:30,rows:2,autosize:!0},c.displayName='Textarea';export{c 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 { 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":"
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, 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 textarea = useRef() as React.MutableRefObject<HTMLTextAreaElement>\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 useEffect(() => {\n if (!textarea || !textarea.current) return\n\n const el = textarea.current\n const rect = el.getBoundingClientRect()\n if (el.scrollHeight > rect.height) {\n const lh = parseInt(getComputedStyle(el).lineHeight, 10)\n const numberOfLines = Math.floor(el.scrollHeight / lh)\n if (numberOfLines <= maxRows && numberOfLines > rows) {\n setRows(numberOfLines)\n }\n }\n }, [])\n\n return (\n <Styled.Root\n ref={textarea}\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","textarea","useRef","theme","useTheme","width","defaultInputControlsWidth","onChangeHandler","useCallback","event","target","HTMLTextAreaElement","rect","getBoundingClientRect","scrollHeight","height","useEffect","current","el","lh","parseInt","getComputedStyle","lineHeight","numberOfLines","Math","floor","_jsx","Styled.Root","_objectSpread","ref","defaultProps","e","console","log","displayName"],"mappings":"0gBAyDO,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,EAAWC,IACjB,IAAMC,EAAQC,IAEd,IAAMC,MAAEA,EAAQF,EAAMG,2BAA8BX,EAEpD,IAAMY,EAAiEC,GACpEC,IACC,IAAMC,OAAEA,GAAWD,EAEnB,GAAIC,aAAkBC,qBAAuBpB,EAAU,CACrD,IAAMqB,EAAOF,EAAOG,wBAEhBH,EAAOI,aAAeF,EAAKG,QAAUjB,EAAQN,EAC/CO,EAAQD,EAAQ,GACNY,EAAOvB,OAA0B,KAAjBuB,EAAOvB,OACjCY,EAAQd,GAIY,mBAAbL,GACTA,EAAS6B,KAGb,CAAC7B,EAAUkB,EAAON,EAASD,IAiB7B,OAdAyB,GAAAA,KACE,GAAKf,GAAaA,EAASgB,QAA3B,CAEA,IAAMC,EAAKjB,EAASgB,QACpB,IAAML,EAAOM,EAAGL,wBAChB,GAAIK,EAAGJ,aAAeF,EAAKG,OAAQ,CACjC,IAAMI,EAAKC,SAASC,iBAAiBH,GAAII,WAAY,IACrD,IAAMC,EAAgBC,KAAKC,MAAMP,EAAGJ,aAAeK,GAC/CI,GAAiB/B,GAAW+B,EAAgBtC,GAC9Cc,EAAQwB,OAGX,IAGDG,EAACC,EAADC,EAAAA,EAAA,CACEC,IAAK5B,EACLb,UAAWA,EACXC,MAAOA,EACPT,SAAU2B,EACVhC,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,EACP4B,MAAOA,GACHV,GApBN,GAAA,CAAAL,SAsBGA,KA1GPjB,EAASyD,aAAe,CACtBlD,SAAWmD,GAA8CC,QAAQC,IAAIF,EAAGA,EAAErB,OAAOvB,OACjFH,SAAAA,EACAS,MAAO,YACPC,iBAAkB,SAClBnB,KAAM,GACNiB,QAAS,GACTP,KAAM,EACNM,UAAAA,GAGFlB,EAAS6D,YAAc"}
|