@foxford/ui 2.0.0-beta-cda2586-20220706 → 2.0.0-beta-ad5fea2-20220706
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/Tabs/Tabs.js +1 -1
- package/components/Tabs/Tabs.js.map +1 -1
- package/components/Tabs/{Tab.js → TabsTab.js} +2 -2
- package/components/Tabs/TabsTab.js.map +1 -0
- package/components/Tabs/style.js.map +1 -1
- package/dts/index.d.ts +3 -3
- package/index.cjs.js.map +1 -1
- package/package.json +1 -1
- package/components/Tabs/Tab.js.map +0 -1
package/components/Tabs/Tabs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{TabsTab as r}from'./TabsTab.js';import{Root as o,Inner as a,Content as s}from'./style.js';import{jsx as e}from'react/jsx-runtime';function l(r){var{children:l,className:n,classNameInner:t,classNameContent:c,borderColor:m,color:d,noBorder:b,style:i}=r;return e(o,{className:n,style:i,borderColor:m,color:d,noBorder:b,children:e(a,{className:t,children:e(s,{noBorder:b,className:c,children:l})})})}l.defaultProps={borderColor:'alto',color:'rgba(247, 247, 247, 1)'},l.Tab=r;export{l as Tabs};
|
|
2
2
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { Color } from '../../mixins/color'\nimport { BaseProps } from '../../shared/interfaces'\nimport {
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { Color } from '../../mixins/color'\nimport { BaseProps } from '../../shared/interfaces'\nimport { TabsTab } from './TabsTab'\nimport * as Styled from './style'\n\nexport interface TabsProps extends BaseProps, Color, Color<'borderColor'> {\n /**\n * Primary content.\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n className?: string\n classNameInner?: string\n classNameContent?: string\n noBorder?: boolean\n}\n\nTabs.defaultProps = {\n borderColor: 'alto',\n color: 'rgba(247, 247, 247, 1)',\n}\n\nTabs.Tab = TabsTab\n\n/**\n * Расширен:\n * - [`BaseProps`](#/Миксины)\n * - [`Color`](#/Миксины)\n * - [`Color<'borderColor'>`](#/Миксины)\n */\nexport function Tabs(props: TabsProps) {\n const { children, className, classNameInner, classNameContent, borderColor, color, noBorder, style } = props\n\n return (\n <Styled.Root className={className} style={style} borderColor={borderColor} color={color} noBorder={noBorder}>\n <Styled.Inner className={classNameInner}>\n <Styled.Content noBorder={noBorder} className={classNameContent}>\n {children}\n </Styled.Content>\n </Styled.Inner>\n </Styled.Root>\n )\n}\n"],"names":["Tabs","props","children","className","classNameInner","classNameContent","borderColor","color","noBorder","style","_jsx","Styled.Root","Styled.Inner","Styled.Content","defaultProps","Tab","TabsTab"],"mappings":"yIAgCO,SAASA,EAAKC,GACnB,IAAMC,SAAEA,EAAFC,UAAYA,EAAZC,eAAuBA,EAAvBC,iBAAuCA,EAAvCC,YAAyDA,EAAzDC,MAAsEA,EAAtEC,SAA6EA,EAA7EC,MAAuFA,GAAUR,EAEvG,OACES,EAACC,EAAD,CAAaR,UAAWA,EAAWM,MAAOA,EAAOH,YAAaA,EAAaC,MAAOA,EAAOC,SAAUA,EAAnGN,SACEQ,EAACE,EAAD,CAAcT,UAAWC,EAAzBF,SACEQ,EAACG,EAAD,CAAgBL,SAAUA,EAAUL,UAAWE,EAA/CH,SACGA,QApBXF,EAAKc,aAAe,CAClBR,YAAa,OACbC,MAAO,0BAGTP,EAAKe,IAAMC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{Tab as r}from'./style.js';import{jsx as t}from'react/jsx-runtime';var s=["as","className","children","theme"];function o(o){var{as:i,className:m,children:l,theme:c}=o,n=a(o,s);return t(r,e(e(e({as:i,className:m,themeKey:c},'string'!=typeof i?{activeClassName:'active'}:{}),n),{},{children:l}))}o.defaultProps={as:'div',activeClassName:'active',borderColor:'alto',color:'mineShaft'};export{o as
|
|
2
|
-
//# sourceMappingURL=
|
|
1
|
+
import e from'@babel/runtime/helpers/objectSpread2';import a from'@babel/runtime/helpers/objectWithoutProperties';import{Tab as r}from'./style.js';import{jsx as t}from'react/jsx-runtime';var s=["as","className","children","theme"];function o(o){var{as:i,className:m,children:l,theme:c}=o,n=a(o,s);return t(r,e(e(e({as:i,className:m,themeKey:c},'string'!=typeof i?{activeClassName:'active'}:{}),n),{},{children:l}))}o.defaultProps={as:'div',activeClassName:'active',borderColor:'alto',color:'mineShaft'};export{o as TabsTab};
|
|
2
|
+
//# sourceMappingURL=TabsTab.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabsTab.js","sources":["../../../../src/components/Tabs/TabsTab.tsx"],"sourcesContent":["import { NavLink } from 'react-router-dom'\nimport { Color } from '../../mixins/color'\nimport * as Styled from './style'\n\nexport interface TabProps extends Color, Color<'borderColor'> {\n /**\n * An element type to render as (string or function).\n */\n as?: 'div' | 'a' | 'button' | 'span' | typeof NavLink\n /**\n * Primary content.\n */\n /**\n * Children react node\n */\n children?: React.ReactNode\n /**\n * Active tab.\n */\n active?: boolean\n /**\n * Active tab.\n */\n activeClassName?: string\n /**\n * Active tab.\n */\n theme?: 'compact' | 'crispy' | 'crispyCompact'\n className?: string\n}\n\nTabsTab.defaultProps = {\n as: 'div',\n activeClassName: 'active',\n borderColor: 'alto',\n color: 'mineShaft',\n}\n\nexport function TabsTab(props: TabProps) {\n const { as, className, children, theme, ...rest } = props\n\n const linkProps = typeof as !== 'string' ? { activeClassName: 'active' } : {}\n\n return (\n <Styled.Tab as={as} className={className} themeKey={theme} {...linkProps} {...rest}>\n {children}\n </Styled.Tab>\n )\n}\n"],"names":["TabsTab","props","as","className","children","theme","rest","_excluded","_jsx","Styled.Tab","_objectSpread","themeKey","activeClassName","defaultProps","borderColor","color"],"mappings":"uOAsCO,SAASA,EAAQC,GACtB,IAAMC,GAAEA,EAAFC,UAAMA,EAANC,SAAiBA,EAAjBC,MAA2BA,GAAmBJ,EAATK,IAASL,EAApDM,GAIA,OACEC,EAACC,EAADC,EAAAA,EAAAA,EAAA,CAAYR,GAAIA,EAAIC,UAAWA,EAAWQ,SAAUN,GAHtB,iBAAPH,EAAkB,CAAEU,gBAAiB,UAAa,IAGKN,GAA9E,GAAA,CAAAF,SACGA,KAdPJ,EAAQa,aAAe,CACrBX,GAAI,MACJU,gBAAiB,SACjBE,YAAa,OACbC,MAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { TabsProps } from './Tabs'\nimport { TabProps } from './
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/Tabs/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { color } from 'mixins/color'\nimport { TabsProps } from './Tabs'\nimport { TabProps } from './TabsTab'\n\nconst BEFORE_AFTER_SHADOW_WIDTH = 20\n\nconst borderColor = (color: string) => css`\n border-bottom: 1px solid ${color};\n`\n\nconst getThemedCss = (theme: TabProps['theme']) => {\n switch (theme) {\n case 'compact':\n return css`\n font-weight: normal;\n & + & {\n margin-left: 20px;\n }\n `\n case 'crispyCompact':\n return css`\n text-transform: uppercase;\n font-size: 12px;\n height: 16px;\n line-height: 16px;\n padding-bottom: 8px;\n border-bottom: 1px solid ${(props) => props.theme.colors.mercury};\n & + & {\n margin-left: 18px;\n }\n `\n case 'crispy':\n return css`\n height: 35px;\n text-transform: uppercase;\n font-size: 12px;\n & + & {\n margin-left: 32px;\n }\n `\n default:\n return null\n }\n}\n\nconst activeTab = css`\n color: ${(props) => props.theme.colors.primary};\n position: relative;\n &:after {\n width: initial;\n opacity: 1;\n }\n`\n\nexport const Root = styled.div.withConfig({\n shouldForwardProp: (prop) => prop === 'children',\n})<Pick<TabsProps, 'noBorder' | 'borderColor' | 'color'>>`\n color: rgba(247, 247, 247, 1);\n display: flex;\n align-items: flex-end;\n justify-content: center;\n flex-direction: row;\n ${(props) => (props.borderColor && !props.noBorder ? color(props.borderColor, borderColor) : null)}\n ${(props) => (props.color ? color(props.color) : null)}\n`\n\nexport const Inner = styled.div`\n position: relative;\n display: block;\n width: auto;\n height: auto;\n padding: 0;\n margin: 0 -20px;\n box-sizing: border-box;\n background: transparent;\n overflow: visible;\n max-width: 100%;\n width: 100%;\n &::before,\n &::after {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n display: block;\n content: '';\n width: ${BEFORE_AFTER_SHADOW_WIDTH}px;\n height: 100%;\n }\n\n &::before {\n left: 0;\n background: linear-gradient(-90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n }\n\n &::after {\n right: 0;\n background: linear-gradient(90deg, rgba(247, 247, 247, 0) 0%, currentColor 100%);\n }\n`\n\nexport const Content = styled.div<Pick<TabsProps, 'noBorder'>>`\n display: block;\n padding: 0;\n margin: 0 auto;\n white-space: nowrap;\n box-sizing: border-box;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n color: ${(props) => props.theme.colors.mineShaft};\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n height: 0;\n background: transparent;\n visibility: hidden;\n }\n\n &::-webkit-scrollbar-thumb {\n height: 0px;\n background: transparent;\n visibility: hidden;\n }\n\n ${(props) =>\n props.noBorder\n ? css`\n display: flex;\n justify-content: space-between;\n width: 100%;\n `\n : null}\n`\n\nexport const Tab = styled.div.withConfig<TabProps & { themeKey: TabProps['theme'] }>({\n shouldForwardProp: (prop) => !['themeKey', 'color', 'borderColor', 'active'].includes(prop),\n})`\n display: inline-block;\n margin-bottom: -1px;\n flex-shrink: 0;\n font-size: 16px;\n font-weight: bold;\n line-height: 20px;\n padding-bottom: 14px;\n text-decoration: none;\n cursor: pointer;\n z-index: 2;\n transition: color 0.2s ease-out;\n ${(props) => (props.color ? color(props.color) : null)}\n ${(props) => (props.borderColor ? color(props.borderColor, borderColor) : null)}\n &:after {\n opacity: 0;\n width: 0;\n content: '';\n height: 3px;\n position: absolute;\n bottom: -1px;\n z-index: 1;\n left: 0;\n right: 0;\n background-color: currentColor;\n transition: opacity 0.2s ease-out;\n }\n &:hover {\n color: ${(props) => props.theme.colors.primary};\n }\n & + & {\n margin-left: 60px;\n }\n ${(props) => (props.themeKey ? getThemedCss(props.themeKey) : null)}\n ${(props) => (props.active ? activeTab : null)}\n &.active {\n ${activeTab}\n }\n`\n"],"names":["borderColor","color","css","activeTab","props","theme","colors","primary","Root","styled","div","withConfig","shouldForwardProp","prop","componentId","noBorder","Inner","Content","mineShaft","Tab","includes","themeKey","mercury","active"],"mappings":"yFAOA,IAAMA,EAAeC,GAAkBC,EAAnB,CAAA,2BAAA,KACSD,GAsC7B,IAAME,EAAYD,EAAH,CAAA,SAAA,yDACHE,GAAUA,EAAMC,MAAMC,OAAOC,UAQlC,IAAMC,EAAOC,EAAOC,IAAIC,WAAW,CACxCC,kBAAoBC,GAAkB,aAATA,IADdF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,yGAAA,IAAA,KAQZL,GAAWA,EAAMJ,cAAgBI,EAAMW,SAAWd,EAAMG,EAAMJ,YAAaA,GAAe,OAC1FI,GAAWA,EAAMH,MAAQA,EAAMG,EAAMH,OAAS,OAGtCe,IAAAA,EAAQP,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,wQAAA,+MA9DgB,IAiGrBQ,IAAAA,EAAUR,EAAOC,IAAVC,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,2JAAA,iLAAA,KASRL,GAAUA,EAAMC,MAAMC,OAAOY,YAepCd,GACDA,EAAMW,SACFb,EADJ,CAAA,2DAMI,OAGD,IAAMiB,EAAMV,EAAOC,IAAIC,WAAuD,CACnFC,kBAAoBC,IAAU,CAAC,WAAY,QAAS,cAAe,UAAUO,SAASP,KADxEF,WAAA,CAAAG,YAAA,uBAAGL,CAAH,CAAA,2MAAA,IAAA,yLAAA,6BAAA,IAAA,aAAA,MAcXL,GAAWA,EAAMH,MAAQA,EAAMG,EAAMH,OAAS,OAC9CG,GAAWA,EAAMJ,YAAcC,EAAMG,EAAMJ,YAAaA,GAAe,OAe9DI,GAAUA,EAAMC,MAAMC,OAAOC,UAKtCH,GAAWA,EAAMiB,SAhKAhB,CAAAA,IACpB,OAAQA,GACN,IAAK,UACH,OAAOH,EAAP,CAAA,gDAMF,IAAK,gBACH,OAAOA,EAMuBE,CAAAA,mHAAAA,8BAAAA,GAAUA,EAAMC,MAAMC,OAAOgB,UAK7D,IAAK,SACH,OAAOpB,EAAP,CAAA,iFAQF,QACE,OAAO,OA/BSG,CAgKwBD,EAAMiB,UAAY,OAC3DjB,GAAWA,EAAMmB,OAASpB,EAAY,MAErCA"}
|
package/dts/index.d.ts
CHANGED
|
@@ -1820,8 +1820,8 @@ interface TabProps extends Color, Color<'borderColor'> {
|
|
|
1820
1820
|
theme?: 'compact' | 'crispy' | 'crispyCompact';
|
|
1821
1821
|
className?: string;
|
|
1822
1822
|
}
|
|
1823
|
-
declare function
|
|
1824
|
-
declare namespace
|
|
1823
|
+
declare function TabsTab(props: TabProps): JSX.Element;
|
|
1824
|
+
declare namespace TabsTab {
|
|
1825
1825
|
var defaultProps: {
|
|
1826
1826
|
as: string;
|
|
1827
1827
|
activeClassName: string;
|
|
@@ -1855,7 +1855,7 @@ declare namespace Tabs {
|
|
|
1855
1855
|
borderColor: string;
|
|
1856
1856
|
color: string;
|
|
1857
1857
|
};
|
|
1858
|
-
var Tab: typeof
|
|
1858
|
+
var Tab: typeof TabsTab;
|
|
1859
1859
|
}
|
|
1860
1860
|
|
|
1861
1861
|
declare type FloaterProps = Parameters<typeof Floater>[0];
|