@foxford/ui 2.0.0-beta-b3484ab-20220708 → 2.0.0-beta-d6e6153-20220708
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.map +1 -1
- package/components/Spinner/style.js.map +1 -1
- package/components/Text.Ellipse/Text.Ellipse.js +1 -1
- package/components/Text.Ellipse/Text.Ellipse.js.map +1 -1
- package/dts/index.d.ts +3 -2
- package/index.cjs.js +1 -1
- package/index.cjs.js.map +1 -1
- package/mixins/responsive-property.js +1 -1
- package/mixins/responsive-property.js.map +1 -1
- package/mixins/shared.js +1 -1
- package/mixins/shared.js.map +1 -1
- package/package.json +1 -1
|
@@ -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}${sizing};\n height: ${size}${sizing};\n font-size: ${0.44 * size}${sizing};\n line-height: ${0.44 * size}${sizing};\n padding: ${0.28 * size}${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 'href',\n 'ref',\n 'onClick',\n 'type',\n 'onMouseEnter',\n 'onMouseLeave',\n ].includes(prop),\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
|
+
{"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 'href',\n 'ref',\n 'onClick',\n 'type',\n 'onMouseEnter',\n 'onMouseLeave',\n ].includes(prop),\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Spinner/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport {\n responsiveNamedProperty,\n property,\n ResponsiveNamedProperty,\n CalcProperty,\n} from '../../mixins/responsive-property'\nimport { SpinnerProps } from './Spinner'\n\nconst SIZES = {\n l: 60,\n m: 40,\n s: 20,\n}\n\nconst spinner = keyframes`\n to {\n transform: rotate(360deg);\n }\n`\n\nconst fullscreen = css`\n height: 100vh;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst inline = css`\n display: inline-block;\n vertical-align: middle;\n margin: 0;\n`\n\nconst sizeBuilder: CalcProperty = (size
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Spinner/style.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components'\nimport {\n responsiveNamedProperty,\n property,\n ResponsiveNamedProperty,\n CalcProperty,\n} from '../../mixins/responsive-property'\nimport { SpinnerProps } from './Spinner'\n\nconst SIZES = {\n l: 60,\n m: 40,\n s: 20,\n}\n\nconst spinner = keyframes`\n to {\n transform: rotate(360deg);\n }\n`\n\nconst fullscreen = css`\n height: 100vh;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst inline = css`\n display: inline-block;\n vertical-align: middle;\n margin: 0;\n`\n\nconst sizeBuilder: CalcProperty = (size, sizing = 'px') => css`\n width: ${size as number}${sizing};\n height: ${size as number}${sizing};\n &:before {\n width: ${size as number}${sizing};\n height: ${size as number}${sizing};\n margin-top: -${(size as number) / 2}${sizing};\n margin-left: -${(size as number) / 2}${sizing};\n }\n`\n\nconst getSize = (size: ResponsiveNamedProperty<'size'>['size']): number => {\n if (!size || typeof size === 'boolean') return 0\n if (typeof size === 'number') return size\n if (SIZES[size]) return SIZES[size]\n return 0\n}\n\nexport const Root = styled.div.withConfig<SpinnerProps>({\n shouldForwardProp: (prop) => ['className', 'style'].includes(prop),\n})`\n display: block;\n position: relative;\n display: block;\n margin: 30px auto;\n &:before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n top: 50%;\n left: 50%;\n border-radius: 50%;\n border: 2px solid #eee;\n border-top-color: #459ff3;\n animation: ${spinner} 0.6s linear infinite;\n }\n ${(props) => (props.inline ? inline : null)}\n\n ${(props) => (props.size ? property(SIZES[props.size] || props.size, sizeBuilder) : null)}\n ${({ sizeXS, sizeS, sizeM, sizeL, sizeXL }) => {\n return responsiveNamedProperty({\n sizes: {\n sizeXS: getSize(sizeXS),\n sizeS: getSize(sizeS),\n sizeM: getSize(sizeM),\n sizeL: getSize(sizeL),\n sizeXL: getSize(sizeXL),\n },\n cssProperty: sizeBuilder,\n })\n }}\n\n ${(props) => (props.fullscreen ? fullscreen : null)}\n`\n"],"names":["SIZES","l","m","s","spinner","keyframes","fullscreen","css","inline","sizeBuilder","size","i","sizing","getSize","Root","styled","div","withConfig","shouldForwardProp","prop","includes","componentId","props","property","_ref","sizeXS","sizeS","sizeM","sizeL","sizeXL","responsiveNamedProperty","sizes","cssProperty"],"mappings":"sJASA,IAAMA,EAAQ,CACZC,EAAG,GACHC,EAAG,GACHC,EAAG,IAGL,IAAMC,EAAUC,EAAhB,CAAA,kCAMA,IAAMC,EAAaC,EAAnB,CAAA,uFAQA,IAAMC,EAASD,EAAf,CAAA,yDAMA,IAAME,EAA4B,SAACC,EAADC,GAAA,IAAOC,+BAAPD,EAAAA,EAAgB,KAAhB,OAAyBJ,EAAzB,CAAA,SAAA,GAAA,WAAA,GAAA,mBAAA,GAAA,WAAA,GAAA,gBAAA,GAAA,iBAAA,GAAA,MACvBG,EAAiBE,EAChBF,EAAiBE,EAEhBF,EAAiBE,EAChBF,EAAiBE,EACXF,EAAkB,EAAIE,EACrBF,EAAkB,EAAIE,IAI3C,IAAMC,EAAWH,GACVA,GAAwB,kBAATA,EACA,iBAATA,EAA0BA,EACjCV,EAAMU,GAAcV,EAAMU,GACvB,EAHwC,EAM1C,IAAMI,EAAOC,EAAOC,IAAIC,WAAyB,CACtDC,kBAAoBC,GAAS,CAAC,YAAa,SAASC,SAASD,KAD9CF,WAAA,CAAAI,YAAA,wBAAGN,CAAH,CAAA,0NAAA,0BAAA,IAAA,IAAA,IAAA,IAgBAX,GAEZkB,GAAWA,EAAMd,OAASA,EAAS,OAEnCc,GAAWA,EAAMZ,KAAOa,EAASvB,EAAMsB,EAAMZ,OAASY,EAAMZ,KAAMD,GAAe,OAClFe,IAA6C,IAA5CC,OAAEA,EAAFC,MAAUA,EAAVC,MAAiBA,EAAjBC,MAAwBA,EAAxBC,OAA+BA,GAAaL,EAC7C,OAAOM,EAAwB,CAC7BC,MAAO,CACLN,OAAQZ,EAAQY,GAChBC,MAAOb,EAAQa,GACfC,MAAOd,EAAQc,GACfC,MAAOf,EAAQe,GACfC,OAAQhB,EAAQgB,IAElBG,YAAavB,OAIda,GAAWA,EAAMhB,WAAaA,EAAa"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t from'@babel/runtime/helpers/objectWithoutProperties';import e from'@babel/runtime/helpers/objectSpread2';import{Component as s}from'react';import{Spacer as i}from'../Spacer/Spacer.js';import{Anchor as r}from'../Anchor/Anchor.js';import{Text as o}from'../Text/Text.js';import{Ul as l,Li as n}from'./style.js';import{jsx as a,jsxs as p}from'react/jsx-runtime';var h=["className","style","moreText","lessText","showToggler"];class c extends s{constructor(t){super(t),this.getContent=t=>{var{content:s,chars:i=0}=this.props;if(!s)return'';var{isEllipsed:r}=this.state;var p='string'==typeof s?'':[];if(this.state.isUnFolded)p=s;else if('string'==typeof p)p=(r=s.length>i)?"".concat(s.slice(0,i),"..."):s;else{var h=i;for(var c=0;c<s.length;c++){if(!(h-s[c].length>0)){r=!0,p[c]="".concat(s[c].slice(0,h),"...");break}h-=s[c].length,p[c]=s[c]}}return this.state.isEllipsed!==r&&setTimeout((()=>this.setState({isEllipsed:r}))),'string'==typeof p?a(o,e(e({},t),{},{content:this.getQuted(p)})):a(l,{children:p.map(((s,i)=>a(n,{children:a(o,e(e({},t),{},{display:"inline",content:s}))},i)))})},this.getQuted=t=>this.props.quoted?"«".concat(t,"»"):t,this.toggle=()=>{this.setState({isUnFolded:!this.state.isUnFolded})},this.state={isUnFolded:!1,isEllipsed:!1}}componentDidUpdate(t){var{content:e}=t;e!==this.props.content&&this.state.isUnFolded&&this.toggle()}render(){var e=this.props,{className:s="",style:o,moreText:l="Читать полностью",lessText:n="Свернуть",showToggler:c=!0}=e,d=t(e,h);var{isUnFolded:m,isEllipsed:g}=this.state;return p("div",{className:s,style:o,children:[this.getContent(d),c&&g&&a(i,{marginTop:16,marginBottom:1,children:a(r,{pseudo:!0,onClick:this.toggle,children:m?n:l})})]})}}c.displayName='Text.Ellipse';export{c as TextEllipse};
|
|
2
2
|
//# sourceMappingURL=Text.Ellipse.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.Ellipse.js","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text, TextProps } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /** Html content */\n content: string | string[]\n /** Characters quantity for ellipsed text */\n chars?: number\n /** Wrap text in quotes */\n quoted?: boolean\n /** Flag to show toggler */\n showToggler?: boolean\n}\n\ninterface TextEllipseState {\n isUnFolded: boolean\n isEllipsed: boolean\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {\n static displayName = 'Text.Ellipse'\n\n constructor(props: TextEllipseProps) {\n super(props)\n\n this.state = {\n isUnFolded: false,\n isEllipsed: false,\n }\n }\n\n
|
|
1
|
+
{"version":3,"file":"Text.Ellipse.js","sources":["../../../../src/components/Text.Ellipse/Text.Ellipse.tsx"],"sourcesContent":["import { Component } from 'react'\nimport { Spacer } from '../Spacer/Spacer'\nimport { Anchor } from '../Anchor/Anchor'\nimport { Text, TextProps } from '../Text'\nimport * as Styled from './style'\n\nexport interface TextEllipseProps extends Omit<TextProps, 'content'> {\n /** Toggle text for folded state */\n moreText?: string\n /** Toggle text for unfolded state */\n lessText?: string\n /** Classname */\n className?: string\n /** Html content */\n content: string | string[]\n /** Characters quantity for ellipsed text */\n chars?: number\n /** Wrap text in quotes */\n quoted?: boolean\n /** Flag to show toggler */\n showToggler?: boolean\n}\n\ninterface TextEllipseState {\n isUnFolded: boolean\n isEllipsed: boolean\n}\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Display`](#/Миксины)\n * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)\n */\nexport class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {\n static displayName = 'Text.Ellipse'\n\n constructor(props: TextEllipseProps) {\n super(props)\n\n this.state = {\n isUnFolded: false,\n isEllipsed: false,\n }\n }\n\n componentDidUpdate({ content }: TextEllipseProps) {\n if (content !== this.props.content && this.state.isUnFolded) {\n this.toggle()\n }\n }\n\n getContent = (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler'>) => {\n const { content, chars = 0 } = this.props\n\n if (!content) return ''\n\n let { isEllipsed } = this.state\n let text: string | string[] = typeof content === 'string' ? '' : []\n\n if (!this.state.isUnFolded) {\n if (typeof text === 'string') {\n isEllipsed = content.length > chars\n\n text = isEllipsed ? `${content.slice(0, chars)}...` : content\n } else {\n let leftChars = chars\n\n for (let index = 0; index < content.length; index++) {\n if (leftChars - content[index].length > 0) {\n leftChars -= content[index].length\n\n text[index] = content[index]\n } else {\n isEllipsed = true\n text[index] = `${content[index].slice(0, leftChars)}...`\n\n break\n }\n }\n }\n } else {\n text = content\n }\n\n if (this.state.isEllipsed !== isEllipsed) setTimeout(() => this.setState({ isEllipsed }))\n\n return typeof text === 'string' ? (\n <Text {...props} content={this.getQuted(text)} />\n ) : (\n <Styled.Ul>\n {text.map((item, index) => (\n <Styled.Li key={index}>\n <Text {...props} display='inline' content={item} />\n </Styled.Li>\n ))}\n </Styled.Ul>\n )\n }\n\n getQuted = (content: string) => (this.props.quoted ? `«${content}»` : content)\n\n toggle = () => {\n this.setState({ isUnFolded: !this.state.isUnFolded })\n }\n\n render() {\n const {\n className = '',\n style,\n moreText = 'Читать полностью',\n lessText = 'Свернуть',\n showToggler = true,\n ...restProps\n } = this.props\n const { isUnFolded, isEllipsed } = this.state\n\n return (\n <div className={className} style={style}>\n {this.getContent(restProps)}\n {showToggler && isEllipsed && (\n <Spacer marginTop={16} marginBottom={1}>\n <Anchor pseudo onClick={this.toggle}>\n {isUnFolded ? lessText : moreText}\n </Anchor>\n </Spacer>\n )}\n </div>\n )\n }\n}\n"],"names":["TextEllipse","Component","constructor","props","super","this","getContent","content","chars","isEllipsed","state","text","isUnFolded","length","slice","leftChars","index","concat","setTimeout","setState","_jsx","Text","getQuted","Styled.Ul","children","map","item","Styled.Li","_objectSpread","display","quoted","toggle","componentDidUpdate","_ref","render","_this$props","className","style","moreText","lessText","showToggler","restProps","_objectWithoutProperties","_excluded","_jsxs","Spacer","marginTop","marginBottom","Anchor","pseudo","onClick","displayName"],"mappings":"+aAmCO,MAAMA,UAAoBC,EAG/BC,YAAYC,GACVC,MAAMD,GAD6BE,KAerCC,WAAcH,IACZ,IAAMI,QAAEA,EAAFC,MAAWA,EAAQ,GAAMH,KAAKF,MAEpC,IAAKI,EAAS,MAAO,GAErB,IAAIE,WAAEA,GAAeJ,KAAKK,MAC1B,IAAIC,EAA6C,iBAAZJ,EAAuB,GAAK,GAEjE,GAAKF,KAAKK,MAAME,WAsBdD,EAAOJ,OArBP,GAAoB,iBAATI,EAGTA,GAFAF,EAAaF,EAAQM,OAASL,GAEPD,GAAAA,OAAAA,EAAQO,MAAM,EAAGN,GAAvB,OAAqCD,MACjD,CACL,IAAIQ,EAAYP,EAEhB,IAAK,IAAIQ,EAAQ,EAAGA,EAAQT,EAAQM,OAAQG,IAAS,CACnD,KAAID,EAAYR,EAAQS,GAAOH,OAAS,GAIjC,CACLJ,GAAAA,EACAE,EAAKK,GAAL,GAAAC,OAAiBV,EAAQS,GAAOF,MAAM,EAAGC,GAAzC,OAEA,MAPAA,GAAaR,EAAQS,GAAOH,OAE5BF,EAAKK,GAAST,EAAQS,IAe9B,OAFIX,KAAKK,MAAMD,aAAeA,GAAYS,YAAW,IAAMb,KAAKc,SAAS,CAAEV,WAAAA,MAEpD,iBAATE,EACZS,EAACC,SAASlB,GAAV,GAAA,CAAiBI,QAASF,KAAKiB,SAASX,MAExCS,EAACG,EAAD,CAAAC,SACGb,EAAKc,KAAAA,CAAKC,EAAMV,IACfI,EAACO,EAAD,CAAAH,SACEJ,EAACC,EAADO,EAAAA,EAAA,GAAUzB,GAAV,GAAA,CAAiB0B,QAAQ,SAAStB,QAASmB,MAD7BV,QAvDaX,KA+DrCiB,SAAYf,GAAqBF,KAAKF,MAAM2B,OAAX,IAAAb,OAAwBV,EAAxB,KAAqCA,EA/DjCF,KAiErC0B,OAAS,KACP1B,KAAKc,SAAS,CAAEP,YAAaP,KAAKK,MAAME,cA/DxCP,KAAKK,MAAQ,CACXE,YAAAA,EACAH,YAAAA,GAIJuB,mBAAkDC,GAAA,IAA/B1B,QAAEA,GAA6B0B,EAC5C1B,IAAYF,KAAKF,MAAMI,SAAWF,KAAKK,MAAME,YAC/CP,KAAK0B,SA0DTG,SACE,IAAAC,EAOI9B,KAAKF,OAPHiC,UACJA,EAAY,GADRC,MAEJA,EAFIC,SAGJA,EAAW,mBAHPC,SAIJA,EAAW,WAJPC,YAKJA,GAAAA,GALFL,EAMKM,EANLC,EAAAP,EAAAQ,GAQA,IAAM/B,WAAEA,EAAFH,WAAcA,GAAeJ,KAAKK,MAExC,OACEkC,EAAA,MAAA,CAAKR,UAAWA,EAAWC,MAAOA,EAAlCb,SACG,CAAAnB,KAAKC,WAAWmC,GAChBD,GAAe/B,GACdW,EAACyB,EAAD,CAAQC,UAAW,GAAIC,aAAc,EAArCvB,SACEJ,EAAC4B,EAAD,CAAQC,QAAAA,EAAOC,QAAS7C,KAAK0B,OAA7BP,SACGZ,EAAa2B,EAAWD,UAzF1BtC,EACJmD,YAAc"}
|
package/dts/index.d.ts
CHANGED
|
@@ -225,7 +225,7 @@ declare enum SizeLatin {
|
|
|
225
225
|
*/
|
|
226
226
|
declare type PossibleValues = number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean;
|
|
227
227
|
declare type PropsProperties = 'size' | 'fontSize' | 'height' | 'width' | 'top' | 'right' | 'bottom' | 'left' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'fluid';
|
|
228
|
-
declare type CalcProperty = (_size: number, _sizing?: null | string) => FlattenSimpleInterpolation | null;
|
|
228
|
+
declare type CalcProperty = (_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null;
|
|
229
229
|
declare type CssProperty = string | CalcProperty;
|
|
230
230
|
declare type ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
|
|
231
231
|
declare type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {
|
|
@@ -442,7 +442,7 @@ interface VAlign {
|
|
|
442
442
|
}
|
|
443
443
|
declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
|
|
444
444
|
|
|
445
|
-
declare function buildMediaQuery(value: number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string): ReturnType<typeof css>;
|
|
445
|
+
declare function buildMediaQuery(value: number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string): ReturnType<typeof css>;
|
|
446
446
|
|
|
447
447
|
interface Display {
|
|
448
448
|
display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
|
|
@@ -950,6 +950,7 @@ interface TextEllipseState {
|
|
|
950
950
|
declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {
|
|
951
951
|
static displayName: string;
|
|
952
952
|
constructor(props: TextEllipseProps);
|
|
953
|
+
componentDidUpdate({ content }: TextEllipseProps): void;
|
|
953
954
|
getContent: (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler'>) => "" | JSX.Element;
|
|
954
955
|
getQuted: (content: string) => string;
|
|
955
956
|
toggle: () => void;
|