@foxford/ui 2.0.0-beta-c85e125-20220630 → 2.0.0-beta-b086a52-20220630
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/Button.js +1 -1
- package/components/Button/Button.js.map +1 -1
- package/components/Button/style.js +1 -1
- package/components/Button/style.js.map +1 -1
- package/components/Tabs/style.js +1 -1
- package/components/Tabs/style.js.map +1 -1
- package/dts/index.d.ts +2 -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/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{css as e}from'styled-components';import{screenMaxXs as r,screenMaxS as s,screenMaxM as n,screenMaxL as t,screenMinXl as i}from'./screen.js';import{buildMediaQuery as
|
|
1
|
+
import{css as e}from'styled-components';import{screenMaxXs as r,screenMaxS as s,screenMaxM as n,screenMaxL as t,screenMinXl as i}from'./screen.js';import{buildMediaQuery as a,SIZES_LATIN as o,FONT_SIZES_LATIN as d}from'./shared.js';var p=function(r,s,n){var t=arguments.length>1&&void 0!==s?s:'size';var i=arguments.length>2&&void 0!==n?n:'px';return()=>()=>{return'boolean'==typeof r?'function'==typeof t?t(1):null:(s='font-size'===t?d:o,'function'==typeof t?t('number'==typeof r?r:s[r]):'string'==typeof r&&['auto','initial','inherit'].includes(r)?e(["",":",";"],t,r):e(["",":","",";"],t,'string'==typeof r&&s[r]?s[r]:r,i));var s}};var f={XS:r,S:s,M:n,L:t,XL:i};var u=e=>e.endsWith('XS')?'XS':e.endsWith('S')?'S':e.endsWith('M')?'M':e.endsWith('XL')?'XL':e.endsWith('L')?'L':null;var S=['XL','L','M','S','XS'];var l=(e,r)=>{var s=u(e);var n=u(r);return s&&n?S.findIndex((e=>e===s))<S.findIndex((e=>e===n))?-1:1:0};var c=r=>{var{sizes:s,cssProperty:n="size",sizing:t="px",customSizeHandler:i,sort:o=l}=r;return()=>()=>Object.keys(s).sort(o).map((e=>{if(s[e]){var r='function'==typeof i?i(s[e]):s[e];return a(r,n,(e=>e.endsWith('XS')?f.XS:e.endsWith('S')?f.S:e.endsWith('M')?f.M:e.endsWith('L')?f.L:f.XL)(e),t)}return null})).filter(Boolean).map((r=>e(["",""],r)))};export{l as desktopFirst,p as property,c as responsiveProperty};
|
|
2
2
|
//# sourceMappingURL=responsive-property.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"responsive-property.js","sources":["../../../src/mixins/responsive-property.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SizeLatin } from './enums/sizeLatin'\nimport { screenMaxL, screenMaxM, screenMaxS, screenMaxXs, screenMinXl } from './screen'\nimport { buildMediaQuery, FONT_SIZES_LATIN, SIZES_LATIN } from './shared'\n\n/**\n * Value for breakpoint\n */\nexport type PossibleValues = number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean\n\ntype PropsProperties =\n | 'size'\n | 'fontSize'\n | 'height'\n | 'width'\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'padding'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'margin'\n | 'marginTop'\n | 'marginRight'\n | 'marginBottom'\n | 'marginLeft'\n | 'fluid'\n\nexport type CalcProperty = (_size: number, _sizing?: string) => FlattenSimpleInterpolation | null\ntype CssProperty = string | CalcProperty\ntype ResponsiveKeys = '' | 'XS' | 'S' | 'M' | 'L' | 'XL'\n\nexport type ResponsiveProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {\n /**\n * Size for breakpoint\n */\n [key in `${T}${ResponsiveKeys}`]?: V // eslint-disable-line no-unused-vars\n}\n\nexport const property =\n (value: PossibleValues, cssProperty: CssProperty = 'size', sizing = 'px') =>\n () =>\n () => {\n if (typeof value === 'boolean') {\n return typeof cssProperty === 'function' ? cssProperty(1) : null\n }\n\n let sizeMap\n\n switch (cssProperty) {\n case 'font-size':\n sizeMap = FONT_SIZES_LATIN\n break\n default:\n sizeMap = SIZES_LATIN\n }\n\n if (typeof cssProperty === 'function') {\n return cssProperty(typeof value === 'number' ? value : sizeMap[value])\n }\n\n if (typeof value === 'string' && ['auto', 'initial', 'inherit'].includes(value))\n return css`\n ${cssProperty}: ${value};\n `\n\n return css`\n ${cssProperty}: ${typeof value === 'string' && sizeMap[value] ? sizeMap[value] : value}${sizing};\n `\n }\n\nconst SCREEN_SIZE_MAP: Record<Exclude<ResponsiveKeys, ''>, typeof screenMaxXs> = {\n XS: screenMaxXs,\n S: screenMaxS,\n M: screenMaxM,\n L: screenMaxL,\n XL: screenMinXl,\n}\n\nfunction getScreenFnByResponsiveKey(size: string) {\n if (size.endsWith('XS')) {\n return SCREEN_SIZE_MAP.XS\n } else if (size.endsWith('S')) {\n return SCREEN_SIZE_MAP.S\n } else if (size.endsWith('M')) {\n return SCREEN_SIZE_MAP.M\n } else if (size.endsWith('L')) {\n return SCREEN_SIZE_MAP.L\n } else {\n return SCREEN_SIZE_MAP.XL\n }\n}\n\ninterface ResponsivePropertyPayload<T extends PropsProperties> {\n sizes: ResponsiveProperty<T>\n cssProperty: CssProperty\n sizing?: 'px' | 'rem' | 'em' | '%'\n customSizeHandler?: (_value: PossibleValues) => PossibleValues\n}\n\n/**\n * Миксин для генерации media запросов\n *\n * @param obj.sizes Объект, в качестве ключей брэйкпоинт, в качестве значений - величина\n * @param obj.cssProperty CSS свойство, может быть функцией, возвращающей css`` из styled-components\n * @param obj.sizing значение величины, по умолчанию `px`\n * @param obj.customSizeHandler функция для вычисления кастомных значений величин\n * @returns строки медиазапросов\n */\nexport const responsiveProperty =\n <T extends PropsProperties>({\n sizes,\n cssProperty = 'size',\n sizing = 'px',\n customSizeHandler,\n }: ResponsivePropertyPayload<T>) =>\n () =>\n () => {\n const mediaCssStrArr = Object.keys(sizes)\n .map((size) => {\n if (sizes[size]) {\n const _size = typeof customSizeHandler === 'function' ? customSizeHandler(sizes[size]) : sizes[size]\n return buildMediaQuery(_size, cssProperty, getScreenFnByResponsiveKey(size), sizing)\n }\n return null\n })\n .filter(Boolean)\n .map(\n (item) =>\n css`\n ${item}\n `\n )\n\n return mediaCssStrArr\n }\n"],"names":["property","value","
|
|
1
|
+
{"version":3,"file":"responsive-property.js","sources":["../../../src/mixins/responsive-property.ts"],"sourcesContent":["import { css, FlattenSimpleInterpolation } from 'styled-components'\nimport { SizeLatin } from './enums/sizeLatin'\nimport { screenMaxL, screenMaxM, screenMaxS, screenMaxXs, screenMinXl } from './screen'\nimport { buildMediaQuery, FONT_SIZES_LATIN, SIZES_LATIN } from './shared'\n\n/**\n * Value for breakpoint\n */\nexport type PossibleValues = number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean\n\ntype PropsProperties =\n | 'size'\n | 'fontSize'\n | 'height'\n | 'width'\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'padding'\n | 'paddingTop'\n | 'paddingRight'\n | 'paddingBottom'\n | 'paddingLeft'\n | 'margin'\n | 'marginTop'\n | 'marginRight'\n | 'marginBottom'\n | 'marginLeft'\n | 'fluid'\n\nexport type CalcProperty = (_size: number, _sizing?: string) => FlattenSimpleInterpolation | null\ntype CssProperty = string | CalcProperty\ntype ResponsiveKeys = '' | 'XS' | 'S' | 'M' | 'L' | 'XL'\n\nexport type ResponsiveProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {\n /**\n * Size for breakpoint\n */\n [key in `${T}${ResponsiveKeys}`]?: V // eslint-disable-line no-unused-vars\n}\n\nexport const property =\n (value: PossibleValues, cssProperty: CssProperty = 'size', sizing = 'px') =>\n () =>\n () => {\n if (typeof value === 'boolean') {\n return typeof cssProperty === 'function' ? cssProperty(1) : null\n }\n\n let sizeMap\n\n switch (cssProperty) {\n case 'font-size':\n sizeMap = FONT_SIZES_LATIN\n break\n default:\n sizeMap = SIZES_LATIN\n }\n\n if (typeof cssProperty === 'function') {\n return cssProperty(typeof value === 'number' ? value : sizeMap[value])\n }\n\n if (typeof value === 'string' && ['auto', 'initial', 'inherit'].includes(value))\n return css`\n ${cssProperty}: ${value};\n `\n\n return css`\n ${cssProperty}: ${typeof value === 'string' && sizeMap[value] ? sizeMap[value] : value}${sizing};\n `\n }\n\nconst SCREEN_SIZE_MAP: Record<Exclude<ResponsiveKeys, ''>, typeof screenMaxXs> = {\n XS: screenMaxXs,\n S: screenMaxS,\n M: screenMaxM,\n L: screenMaxL,\n XL: screenMinXl,\n}\n\nfunction getScreenFnByResponsiveKey(size: string) {\n if (size.endsWith('XS')) {\n return SCREEN_SIZE_MAP.XS\n } else if (size.endsWith('S')) {\n return SCREEN_SIZE_MAP.S\n } else if (size.endsWith('M')) {\n return SCREEN_SIZE_MAP.M\n } else if (size.endsWith('L')) {\n return SCREEN_SIZE_MAP.L\n } else {\n return SCREEN_SIZE_MAP.XL\n }\n}\n\nconst getKey = (key: string): 'XS' | 'S' | 'M' | 'L' | 'XL' | null => {\n if (key.endsWith('XS')) return 'XS' // first check XS\n if (key.endsWith('S')) return 'S'\n if (key.endsWith('M')) return 'M'\n if (key.endsWith('XL')) return 'XL' // first check XL\n if (key.endsWith('L')) return 'L'\n return null\n}\n\nconst DEKSTOP_FIRST_KEYS = ['XL', 'L', 'M', 'S', 'XS']\nconst MOBILE_FIRST_KEYS = ['XS', 'S', 'M', 'L', 'XL']\n\n/**\n * Sort keys as desktop first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const desktopFirst = (a: string, b: string): number => {\n const aKey = getKey(a)\n const bKey = getKey(b)\n if (!aKey || !bKey) return 0\n\n const aIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === aKey)\n const bIndex = DEKSTOP_FIRST_KEYS.findIndex((el) => el === bKey)\n\n return aIndex < bIndex ? -1 : 1\n}\n\n/**\n * Sort keys as mobile first\n * @param a key a\n * @param b key b\n * @returns number\n */\nexport const mobileFirst = (a: string, b: string): number => {\n const aKey = getKey(a)\n const bKey = getKey(b)\n if (!aKey || !bKey) return 0\n\n const aIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === aKey)\n const bIndex = MOBILE_FIRST_KEYS.findIndex((el) => el === bKey)\n\n return aIndex < bIndex ? -1 : 1\n}\n\ninterface ResponsivePropertyPayload<T extends PropsProperties> {\n sizes: ResponsiveProperty<T>\n cssProperty: CssProperty\n sizing?: 'px' | 'rem' | 'em' | '%'\n customSizeHandler?: (_value: PossibleValues) => PossibleValues\n sort?: (_a: string, _b: string) => number\n}\n\n/**\n * Миксин для генерации media запросов\n *\n * @param obj.sizes Объект, в качестве ключей брэйкпоинт, в качестве значений - величина\n * @param obj.cssProperty CSS свойство, может быть функцией, возвращающей css`` из styled-components\n * @param obj.sizing значение величины, по умолчанию `px`\n * @param obj.customSizeHandler функция для вычисления кастомных значений величин\n * @returns строки медиазапросов\n */\nexport const responsiveProperty =\n <T extends PropsProperties>({\n sizes,\n cssProperty = 'size',\n sizing = 'px',\n customSizeHandler,\n sort = desktopFirst,\n }: ResponsivePropertyPayload<T>) =>\n () =>\n () => {\n const mediaCssStrArr = Object.keys(sizes)\n .sort(sort)\n .map((size) => {\n if (sizes[size]) {\n const _size = typeof customSizeHandler === 'function' ? customSizeHandler(sizes[size]) : sizes[size]\n return buildMediaQuery(_size, cssProperty, getScreenFnByResponsiveKey(size), sizing)\n }\n return null\n })\n .filter(Boolean)\n .map(\n (item) =>\n css`\n ${item}\n `\n )\n\n return mediaCssStrArr\n }\n"],"names":["property","value","t","r","cssProperty","sizing","sizeMap","FONT_SIZES_LATIN","SIZES_LATIN","includes","css","SCREEN_SIZE_MAP","XS","screenMaxXs","S","screenMaxS","M","screenMaxM","L","screenMaxL","XL","screenMinXl","getKey","key","endsWith","DEKSTOP_FIRST_KEYS","desktopFirst","a","b","aKey","bKey","findIndex","el","responsiveProperty","_ref","sizes","customSizeHandler","sort","Object","keys","map","size","_size","buildMediaQuery","filter","Boolean","item"],"mappings":"4OA0CaA,EACX,SAACC,EAADC,EAAAC,GAAA,IAAwBC,+BAAxBF,EAAAA,EAAmD,OAAnD,IAA2DG,+BAA3DF,EAAAA,EAAoE,KAApE,MACA,IACA,KACE,MAAqB,kBAAVF,EACqB,mBAAhBG,EAA6BA,EAAY,GAAK,MAO1DE,EADG,cADCF,EAEMG,EAGAC,EAGa,mBAAhBJ,EACFA,EAA6B,iBAAVH,EAAqBA,EAAQK,EAAQL,IAG5C,iBAAVA,GAAsB,CAAC,OAAQ,UAAW,WAAWQ,SAASR,GAChES,EAAP,CAAA,GAAA,IAAA,KACIN,EAAgBH,GAGfS,kBACHN,EAAiC,iBAAVH,GAAsBK,EAAQL,GAASK,EAAQL,GAASA,EAAQI,IApB3F,IAAIC,IAwBR,IAAMK,EAA2E,CAC/EC,GAAIC,EACJC,EAAGC,EACHC,EAAGC,EACHC,EAAGC,EACHC,GAAIC,GAiBN,IAAMC,EAAUC,GACVA,EAAIC,SAAS,MAAc,KAC3BD,EAAIC,SAAS,KAAa,IAC1BD,EAAIC,SAAS,KAAa,IAC1BD,EAAIC,SAAS,MAAc,KAC3BD,EAAIC,SAAS,KAAa,IACvB,KAGT,IAAMC,EAAqB,CAAC,KAAM,IAAK,IAAK,IAAK,UASpCC,EAAe,CAACC,EAAWC,KACtC,IAAMC,EAAOP,EAAOK,GACpB,IAAMG,EAAOR,EAAOM,GACpB,OAAKC,GAASC,EAECL,EAAmBM,WAAWC,GAAOA,IAAOH,IAC5CJ,EAAmBM,WAAWC,GAAOA,IAAOF,KAEjC,EAAI,EALH,GA0CtB,IAAMG,EACXC,IAAA,IAA4BC,MAC1BA,EAD0B/B,YAE1BA,EAAc,OAFYC,OAG1BA,EAAS,KAHiB+B,kBAI1BA,EAJ0BC,KAK1BA,EAAOX,GALTQ,EAAA,MAOA,IACA,IACyBI,OAAOC,KAAKJ,GAChCE,KAAKA,GACLG,KAAKC,IACJ,GAAIN,EAAMM,GAAO,CACf,IAAMC,EAAqC,mBAAtBN,EAAmCA,EAAkBD,EAAMM,IAASN,EAAMM,GAC/F,OAAOE,EAAgBD,EAAOtC,EA5FxC,CAAoCqC,GAC9BA,EAAKjB,SAAS,MACTb,EAAgBC,GACd6B,EAAKjB,SAAS,KAChBb,EAAgBG,EACd2B,EAAKjB,SAAS,KAChBb,EAAgBK,EACdyB,EAAKjB,SAAS,KAChBb,EAAgBO,EAEhBP,EAAgBS,GAV3B,CA4FgFqB,GAAOpC,GAE/E,OAAO,QAERuC,OAAOC,SACPL,KACEM,GACCpC,EACIoC,CAAAA,GAAAA,IAAAA"}
|