@salutejs/plasma-new-hope 0.115.0-canary.1310.10245725953.0 → 0.115.0-canary.1310.10255808867.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/cjs/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js.map +1 -1
- package/cjs/components/Breadcrumbs/utils/index.js +2 -1
- package/cjs/components/Breadcrumbs/utils/index.js.map +1 -1
- package/emotion/cjs/components/Breadcrumbs/utils/index.js +2 -1
- package/emotion/es/components/Breadcrumbs/utils/index.js +2 -1
- package/es/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/es/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.js.map +1 -1
- package/es/components/Breadcrumbs/utils/index.js +2 -1
- package/es/components/Breadcrumbs/utils/index.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Breadcrumbs/utils/index.js +2 -1
- package/styled-components/es/components/Breadcrumbs/utils/index.js +2 -1
- package/types/components/Breadcrumbs/Breadcrumbs.d.ts +2 -2
- package/types/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/types/components/Breadcrumbs/Breadcrumbs.types.d.ts +1 -1
- package/types/components/Breadcrumbs/Breadcrumbs.types.d.ts.map +1 -1
- package/types/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.d.ts.map +1 -1
- package/types/components/Breadcrumbs/utils/index.d.ts +1 -1
- package/types/components/Breadcrumbs/utils/index.d.ts.map +1 -1
- package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts +2 -2
- package/types/examples/plasma_b2c/components/Breadcrumbs/Breadcrumbs.d.ts +1 -1
- package/types/examples/plasma_b2c/components/Header/Header.d.ts +1 -1
- package/types/examples/plasma_web/components/Breadcrumbs/Breadcrumbs.d.ts +1 -1
- package/types/examples/plasma_web/components/Header/Header.d.ts +1 -1
- package/emotion/cjs/components/Breadcrumbs/README.md +0 -78
- package/emotion/es/components/Breadcrumbs/README.md +0 -78
- package/styled-components/cjs/components/Breadcrumbs/README.md +0 -78
- package/styled-components/es/components/Breadcrumbs/README.md +0 -78
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { BreadcrumbsProps } from './Breadcrumbs.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, Separator } from './Breadcrumbs.styles';\nimport { addSeparator, convertIconSize, getRenderItems } from './utils';\n\nexport const breadcrumbsRoot = (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) =>\n forwardRef<HTMLDivElement, BreadcrumbsProps>(\n ({ view, size, separator, items, showItems = items.length, className }, outerRootRef) => {\n const renderSeparator = separator ?? <Separator color=\"inherit\" size={convertIconSize(size)} />;\n const renderItems: ReactNode[] = getRenderItems(items, renderSeparator, showItems);\n const itemsWithSeparator = addSeparator(renderItems, renderSeparator);\n\n return (\n <Root ref={outerRootRef} size={size} view={view} className={cx(className)} items={items}>\n {itemsWithSeparator.map((item) =>
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { BreadcrumbsProps } from './Breadcrumbs.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, Separator } from './Breadcrumbs.styles';\nimport { addSeparator, convertIconSize, getRenderItems } from './utils';\n\nexport const breadcrumbsRoot = (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) =>\n forwardRef<HTMLDivElement, BreadcrumbsProps>(\n ({ view, size, separator, items, showItems = items.length, className }, outerRootRef) => {\n const renderSeparator = separator ?? <Separator color=\"inherit\" size={convertIconSize(size)} />;\n const renderItems: ReactNode[] = getRenderItems(items, renderSeparator, showItems);\n const itemsWithSeparator = addSeparator(renderItems, renderSeparator);\n\n return (\n <Root ref={outerRootRef} size={size} view={view} className={cx(className)} items={items}>\n {itemsWithSeparator.map((item) => item)}\n </Root>\n );\n },\n );\n\nexport const breadcrumbsConfig = {\n name: 'Breadcrumbs',\n tag: 'div',\n layout: breadcrumbsRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n },\n};\n"],"names":["breadcrumbsRoot","Root","forwardRef","_ref","outerRootRef","view","size","separator","items","_ref$showItems","showItems","length","className","renderSeparator","React","createElement","Separator","color","convertIconSize","renderItems","getRenderItems","itemsWithSeparator","addSeparator","ref","cx","map","item","breadcrumbsConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":";;;;;;;;;;;IAWaA,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,IAAiD,EAAA;AAAA,EAAA,oBAC7EC,gBAAU,CACN,UAAAC,IAAA,EAAwEC,YAAY,EAAK;AAAA,IAAA,IAAtFC,IAAI,GAAAF,IAAA,CAAJE,IAAI;MAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;MAAEC,SAAS,GAAAJ,IAAA,CAATI,SAAS;MAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK;MAAAC,cAAA,GAAAN,IAAA,CAAEO,SAAS;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAA,KAAA,CAAA,GAAGD,KAAK,CAACG,MAAM,GAAAF,cAAA;MAAEG,SAAS,GAAAT,IAAA,CAATS,SAAS,CAAA;AAChE,IAAA,IAAMC,eAAe,GAAGN,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAATA,SAAS,gBAAIO,KAAA,CAAAC,aAAA,CAACC,4BAAS,EAAA;AAACC,MAAAA,KAAK,EAAC,SAAS;MAACX,IAAI,EAAEY,qBAAe,CAACZ,IAAI,CAAA;AAAE,KAAE,CAAC,CAAA;IAC/F,IAAMa,WAAwB,GAAGC,oBAAc,CAACZ,KAAK,EAAEK,eAAe,EAAEH,SAAS,CAAC,CAAA;AAClF,IAAA,IAAMW,kBAAkB,GAAGC,kBAAY,CAACH,WAAW,EAAEN,eAAe,CAAC,CAAA;AAErE,IAAA,oBACIC,KAAA,CAAAC,aAAA,CAACd,IAAI,EAAA;AAACsB,MAAAA,GAAG,EAAEnB,YAAa;AAACE,MAAAA,IAAI,EAAEA,IAAK;AAACD,MAAAA,IAAI,EAAEA,IAAK;AAACO,MAAAA,SAAS,EAAEY,UAAE,CAACZ,SAAS,CAAE;AAACJ,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAA,EACnFa,kBAAkB,CAACI,GAAG,CAAC,UAACC,IAAI,EAAA;AAAA,MAAA,OAAKA,IAAI,CAAA;AAAA,KAAA,CACpC,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMC,iBAAiB,GAAG;AAC7BC,EAAAA,IAAI,EAAE,aAAa;AACnBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE9B,eAAe;AACvB+B,EAAAA,IAAI,EAAJA,uBAAI;AACJC,EAAAA,UAAU,EAAE;AACR3B,IAAAA,IAAI,EAAE;AACF4B,MAAAA,GAAG,EAAEC,SAAAA;KACR;AACD5B,IAAAA,IAAI,EAAE;AACF2B,MAAAA,GAAG,EAAEE,WAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACN/B,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAA;AACV,GAAA;AACJ;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbShorter.js","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, useState, KeyboardEvent } from 'react';\n\nimport { addSeparator } from '../../utils';\n\nimport { StyledHidden, StyledRoot, StyledShorter } from './BreadcrumbShorter.styles';\nimport { BreadcrumbShorterProps } from './BreadcrumbShorter.types';\n\nexport const BreadcrumbShorter: React.FC<HTMLAttributes<HTMLDivElement> & BreadcrumbShorterProps> = ({\n children,\n separator,\n}) => {\n const [openShorter, setOpenShorter] = useState(false);\n\n const renderItems: ReactNode[] = addSeparator(children, separator);\n\n const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n event.persist();\n\n if (event.keyCode === 13) {\n setOpenShorter(true);\n }\n };\n\n return (\n <StyledRoot>\n {!openShorter && (\n <StyledShorter tabIndex={0} onClick={() => setOpenShorter(true)} onKeyDown={onKeyPress}>\n ...\n </StyledShorter>\n )}\n {openShorter &&
|
|
1
|
+
{"version":3,"file":"BreadcrumbShorter.js","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, useState, KeyboardEvent } from 'react';\n\nimport { addSeparator } from '../../utils';\n\nimport { StyledHidden, StyledRoot, StyledShorter } from './BreadcrumbShorter.styles';\nimport { BreadcrumbShorterProps } from './BreadcrumbShorter.types';\n\nexport const BreadcrumbShorter: React.FC<HTMLAttributes<HTMLDivElement> & BreadcrumbShorterProps> = ({\n children,\n separator,\n}) => {\n const [openShorter, setOpenShorter] = useState(false);\n\n const renderItems: ReactNode[] = addSeparator(children, separator);\n\n const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n event.persist();\n\n if (event.keyCode === 13) {\n setOpenShorter(true);\n }\n };\n\n return (\n <StyledRoot>\n {!openShorter && (\n <StyledShorter tabIndex={0} onClick={() => setOpenShorter(true)} onKeyDown={onKeyPress}>\n ...\n </StyledShorter>\n )}\n {openShorter && <StyledHidden>{renderItems.map((item) => item)}</StyledHidden>}\n </StyledRoot>\n );\n};\n"],"names":["BreadcrumbShorter","_ref","children","separator","_useState","useState","_useState2","_slicedToArray","openShorter","setOpenShorter","renderItems","addSeparator","onKeyPress","event","persist","keyCode","React","createElement","StyledRoot","StyledShorter","tabIndex","onClick","onKeyDown","StyledHidden","map","item"],"mappings":";;;;;;;;;IAOaA,iBAAoF,GAAG,SAAvFA,iBAAoFA,CAAAC,IAAA,EAG3F;AAAA,EAAA,IAFFC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAA;AAET,EAAA,IAAAC,SAAA,GAAsCC,cAAQ,CAAC,KAAK,CAAC;IAAAC,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA9CI,IAAAA,WAAW,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,cAAc,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAElC,EAAA,IAAMI,WAAwB,GAAGC,kBAAY,CAACT,QAAQ,EAAEC,SAAS,CAAC,CAAA;AAElE,EAAA,IAAMS,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAoC,EAAK;IACzDA,KAAK,CAACC,OAAO,EAAE,CAAA;AAEf,IAAA,IAAID,KAAK,CAACE,OAAO,KAAK,EAAE,EAAE;MACtBN,cAAc,CAAC,IAAI,CAAC,CAAA;AACxB,KAAA;GACH,CAAA;AAED,EAAA,oBACIO,KAAA,CAAAC,aAAA,CAACC,mCAAU,EAAA,IAAA,EACN,CAACV,WAAW,iBACTQ,KAAA,CAAAC,aAAA,CAACE,sCAAa,EAAA;AAACC,IAAAA,QAAQ,EAAE,CAAE;IAACC,OAAO,EAAE,SAAAA,OAAA,GAAA;MAAA,OAAMZ,cAAc,CAAC,IAAI,CAAC,CAAA;KAAC;AAACa,IAAAA,SAAS,EAAEV,UAAAA;AAAW,GAAA,EAAC,KAEzE,CAClB,EACAJ,WAAW,iBAAIQ,KAAA,CAAAC,aAAA,CAACM,qCAAY,QAAEb,WAAW,CAACc,GAAG,CAAC,UAACC,IAAI,EAAA;AAAA,IAAA,OAAKA,IAAI,CAAA;AAAA,GAAA,CAAgB,CACrE,CAAC,CAAA;AAErB;;;;"}
|
|
@@ -29,7 +29,7 @@ var convertIconSize = function convertIconSize(size) {
|
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
var getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
|
|
32
|
-
|
|
32
|
+
var renderItems = shortItems(items.map(function (item) {
|
|
33
33
|
if ('renderItem' in item) {
|
|
34
34
|
return item.renderItem();
|
|
35
35
|
}
|
|
@@ -39,6 +39,7 @@ var getRenderItems = function getRenderItems(items, renderSeparator, showItems)
|
|
|
39
39
|
isHref: Boolean(item.href)
|
|
40
40
|
}, item.title);
|
|
41
41
|
}), renderSeparator, showItems);
|
|
42
|
+
return renderItems;
|
|
42
43
|
};
|
|
43
44
|
var addSeparator = function addSeparator(items, renderSeparator) {
|
|
44
45
|
return items.flatMap(function (item, idx) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Breadcrumbs/utils/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';\nimport { StyledLink } from '../Breadcrumbs.styles';\nimport { BreadcrumbsItem } from '../Breadcrumbs.types';\n\nexport const shortItems = (items: ReactNode[], renderSeparator: ReactNode, showItems?: number) => {\n if (!showItems || showItems < 2 || items.length <= showItems) {\n return items;\n }\n\n const leftSlice = Math.floor(showItems / 2);\n const rightSlice = items.length - leftSlice - (showItems % 2);\n\n const renderItems: ReactNode[] = items.slice(leftSlice, rightSlice);\n const shorter = <BreadcrumbShorter separator={renderSeparator}>{renderItems}</BreadcrumbShorter>;\n items.splice(leftSlice, rightSlice - leftSlice, shorter);\n return items;\n};\n\nexport const convertIconSize = (size?:
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Breadcrumbs/utils/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';\nimport { StyledLink } from '../Breadcrumbs.styles';\nimport { BreadcrumbsItem } from '../Breadcrumbs.types';\n\nexport const shortItems = (items: ReactNode[], renderSeparator: ReactNode, showItems?: number) => {\n if (!showItems || showItems < 2 || items.length <= showItems) {\n return items;\n }\n\n const leftSlice = Math.floor(showItems / 2);\n const rightSlice = items.length - leftSlice - (showItems % 2);\n\n const renderItems: ReactNode[] = items.slice(leftSlice, rightSlice);\n const shorter = <BreadcrumbShorter separator={renderSeparator}>{renderItems}</BreadcrumbShorter>;\n items.splice(leftSlice, rightSlice - leftSlice, shorter);\n return items;\n};\n\nexport const convertIconSize = (size?: string) => {\n switch (size) {\n case 's':\n case 'xs':\n return 'xs';\n default:\n return 's';\n }\n};\n\nexport const getRenderItems = (items: BreadcrumbsItem[], renderSeparator: ReactNode, showItems?: number) => {\n const renderItems = shortItems(\n items.map((item: BreadcrumbsItem) => {\n if ('renderItem' in item) {\n return item.renderItem();\n }\n return (\n <StyledLink tabIndex={0} href={item.href} isHref={Boolean(item.href)}>\n {item.title}\n </StyledLink>\n );\n }),\n renderSeparator,\n showItems,\n );\n\n return renderItems;\n};\n\nexport const addSeparator = (items: ReactNode[], renderSeparator: ReactNode) => {\n return items.flatMap((item, idx) => (idx < items.length - 1 ? [item, renderSeparator] : [item]));\n};\n"],"names":["shortItems","items","renderSeparator","showItems","length","leftSlice","Math","floor","rightSlice","renderItems","slice","shorter","React","createElement","BreadcrumbShorter","separator","splice","convertIconSize","size","getRenderItems","map","item","renderItem","StyledLink","tabIndex","href","isHref","Boolean","title","addSeparator","flatMap","idx"],"mappings":";;;;;;;;AAMO,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAkB,EAAEC,eAA0B,EAAEC,SAAkB,EAAK;AAC9F,EAAA,IAAI,CAACA,SAAS,IAAIA,SAAS,GAAG,CAAC,IAAIF,KAAK,CAACG,MAAM,IAAID,SAAS,EAAE;AAC1D,IAAA,OAAOF,KAAK,CAAA;AAChB,GAAA;EAEA,IAAMI,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACJ,SAAS,GAAG,CAAC,CAAC,CAAA;EAC3C,IAAMK,UAAU,GAAGP,KAAK,CAACG,MAAM,GAAGC,SAAS,GAAIF,SAAS,GAAG,CAAE,CAAA;EAE7D,IAAMM,WAAwB,GAAGR,KAAK,CAACS,KAAK,CAACL,SAAS,EAAEG,UAAU,CAAC,CAAA;AACnE,EAAA,IAAMG,OAAO,gBAAGC,KAAA,CAAAC,aAAA,CAACC,mCAAiB,EAAA;AAACC,IAAAA,SAAS,EAAEb,eAAAA;AAAgB,GAAA,EAAEO,WAA+B,CAAC,CAAA;EAChGR,KAAK,CAACe,MAAM,CAACX,SAAS,EAAEG,UAAU,GAAGH,SAAS,EAAEM,OAAO,CAAC,CAAA;AACxD,EAAA,OAAOV,KAAK,CAAA;AAChB,EAAC;IAEYgB,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,IAAa,EAAK;AAC9C,EAAA,QAAQA,IAAI;AACR,IAAA,KAAK,GAAG,CAAA;AACR,IAAA,KAAK,IAAI;AACL,MAAA,OAAO,IAAI,CAAA;AACf,IAAA;AACI,MAAA,OAAO,GAAG,CAAA;AAClB,GAAA;AACJ,EAAC;AAEM,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAIlB,KAAwB,EAAEC,eAA0B,EAAEC,SAAkB,EAAK;EACxG,IAAMM,WAAW,GAAGT,UAAU,CAC1BC,KAAK,CAACmB,GAAG,CAAC,UAACC,IAAqB,EAAK;IACjC,IAAI,YAAY,IAAIA,IAAI,EAAE;AACtB,MAAA,OAAOA,IAAI,CAACC,UAAU,EAAE,CAAA;AAC5B,KAAA;AACA,IAAA,oBACIV,KAAA,CAAAC,aAAA,CAACU,6BAAU,EAAA;AAACC,MAAAA,QAAQ,EAAE,CAAE;MAACC,IAAI,EAAEJ,IAAI,CAACI,IAAK;AAACC,MAAAA,MAAM,EAAEC,OAAO,CAACN,IAAI,CAACI,IAAI,CAAA;KAC9DJ,EAAAA,IAAI,CAACO,KACE,CAAC,CAAA;AAErB,GAAC,CAAC,EACF1B,eAAe,EACfC,SACJ,CAAC,CAAA;AAED,EAAA,OAAOM,WAAW,CAAA;AACtB,EAAC;AAEM,IAAMoB,YAAY,GAAG,SAAfA,YAAYA,CAAI5B,KAAkB,EAAEC,eAA0B,EAAK;AAC5E,EAAA,OAAOD,KAAK,CAAC6B,OAAO,CAAC,UAACT,IAAI,EAAEU,GAAG,EAAA;AAAA,IAAA,OAAMA,GAAG,GAAG9B,KAAK,CAACG,MAAM,GAAG,CAAC,GAAG,CAACiB,IAAI,EAAEnB,eAAe,CAAC,GAAG,CAACmB,IAAI,CAAC,CAAA;AAAA,GAAC,CAAC,CAAA;AACpG;;;;;;;"}
|
|
@@ -31,7 +31,7 @@ var convertIconSize = exports.convertIconSize = function convertIconSize(size) {
|
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
var getRenderItems = exports.getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
|
|
34
|
-
|
|
34
|
+
var renderItems = shortItems(items.map(function (item) {
|
|
35
35
|
if ('renderItem' in item) {
|
|
36
36
|
return item.renderItem();
|
|
37
37
|
}
|
|
@@ -41,6 +41,7 @@ var getRenderItems = exports.getRenderItems = function getRenderItems(items, ren
|
|
|
41
41
|
isHref: Boolean(item.href)
|
|
42
42
|
}, item.title);
|
|
43
43
|
}), renderSeparator, showItems);
|
|
44
|
+
return renderItems;
|
|
44
45
|
};
|
|
45
46
|
var addSeparator = exports.addSeparator = function addSeparator(items, renderSeparator) {
|
|
46
47
|
return items.flatMap(function (item, idx) {
|
|
@@ -24,7 +24,7 @@ export var convertIconSize = function convertIconSize(size) {
|
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
export var getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
|
|
27
|
-
|
|
27
|
+
var renderItems = shortItems(items.map(function (item) {
|
|
28
28
|
if ('renderItem' in item) {
|
|
29
29
|
return item.renderItem();
|
|
30
30
|
}
|
|
@@ -34,6 +34,7 @@ export var getRenderItems = function getRenderItems(items, renderSeparator, show
|
|
|
34
34
|
isHref: Boolean(item.href)
|
|
35
35
|
}, item.title);
|
|
36
36
|
}), renderSeparator, showItems);
|
|
37
|
+
return renderItems;
|
|
37
38
|
};
|
|
38
39
|
export var addSeparator = function addSeparator(items, renderSeparator) {
|
|
39
40
|
return items.flatMap(function (item, idx) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { BreadcrumbsProps } from './Breadcrumbs.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, Separator } from './Breadcrumbs.styles';\nimport { addSeparator, convertIconSize, getRenderItems } from './utils';\n\nexport const breadcrumbsRoot = (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) =>\n forwardRef<HTMLDivElement, BreadcrumbsProps>(\n ({ view, size, separator, items, showItems = items.length, className }, outerRootRef) => {\n const renderSeparator = separator ?? <Separator color=\"inherit\" size={convertIconSize(size)} />;\n const renderItems: ReactNode[] = getRenderItems(items, renderSeparator, showItems);\n const itemsWithSeparator = addSeparator(renderItems, renderSeparator);\n\n return (\n <Root ref={outerRootRef} size={size} view={view} className={cx(className)} items={items}>\n {itemsWithSeparator.map((item) =>
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\n\nimport type { BreadcrumbsProps } from './Breadcrumbs.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, Separator } from './Breadcrumbs.styles';\nimport { addSeparator, convertIconSize, getRenderItems } from './utils';\n\nexport const breadcrumbsRoot = (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) =>\n forwardRef<HTMLDivElement, BreadcrumbsProps>(\n ({ view, size, separator, items, showItems = items.length, className }, outerRootRef) => {\n const renderSeparator = separator ?? <Separator color=\"inherit\" size={convertIconSize(size)} />;\n const renderItems: ReactNode[] = getRenderItems(items, renderSeparator, showItems);\n const itemsWithSeparator = addSeparator(renderItems, renderSeparator);\n\n return (\n <Root ref={outerRootRef} size={size} view={view} className={cx(className)} items={items}>\n {itemsWithSeparator.map((item) => item)}\n </Root>\n );\n },\n );\n\nexport const breadcrumbsConfig = {\n name: 'Breadcrumbs',\n tag: 'div',\n layout: breadcrumbsRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n },\n};\n"],"names":["breadcrumbsRoot","Root","forwardRef","_ref","outerRootRef","view","size","separator","items","_ref$showItems","showItems","length","className","renderSeparator","React","createElement","Separator","color","convertIconSize","renderItems","getRenderItems","itemsWithSeparator","addSeparator","ref","cx","map","item","breadcrumbsConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":";;;;;;;IAWaA,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,IAAiD,EAAA;AAAA,EAAA,oBAC7EC,UAAU,CACN,UAAAC,IAAA,EAAwEC,YAAY,EAAK;AAAA,IAAA,IAAtFC,IAAI,GAAAF,IAAA,CAAJE,IAAI;MAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;MAAEC,SAAS,GAAAJ,IAAA,CAATI,SAAS;MAAEC,KAAK,GAAAL,IAAA,CAALK,KAAK;MAAAC,cAAA,GAAAN,IAAA,CAAEO,SAAS;AAATA,MAAAA,SAAS,GAAAD,cAAA,KAAA,KAAA,CAAA,GAAGD,KAAK,CAACG,MAAM,GAAAF,cAAA;MAAEG,SAAS,GAAAT,IAAA,CAATS,SAAS,CAAA;AAChE,IAAA,IAAMC,eAAe,GAAGN,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAATA,SAAS,gBAAIO,KAAA,CAAAC,aAAA,CAACC,SAAS,EAAA;AAACC,MAAAA,KAAK,EAAC,SAAS;MAACX,IAAI,EAAEY,eAAe,CAACZ,IAAI,CAAA;AAAE,KAAE,CAAC,CAAA;IAC/F,IAAMa,WAAwB,GAAGC,cAAc,CAACZ,KAAK,EAAEK,eAAe,EAAEH,SAAS,CAAC,CAAA;AAClF,IAAA,IAAMW,kBAAkB,GAAGC,YAAY,CAACH,WAAW,EAAEN,eAAe,CAAC,CAAA;AAErE,IAAA,oBACIC,KAAA,CAAAC,aAAA,CAACd,IAAI,EAAA;AAACsB,MAAAA,GAAG,EAAEnB,YAAa;AAACE,MAAAA,IAAI,EAAEA,IAAK;AAACD,MAAAA,IAAI,EAAEA,IAAK;AAACO,MAAAA,SAAS,EAAEY,EAAE,CAACZ,SAAS,CAAE;AAACJ,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAA,EACnFa,kBAAkB,CAACI,GAAG,CAAC,UAACC,IAAI,EAAA;AAAA,MAAA,OAAKA,IAAI,CAAA;AAAA,KAAA,CACpC,CAAC,CAAA;AAEf,GACJ,CAAC,CAAA;AAAA,EAAA;AAEE,IAAMC,iBAAiB,GAAG;AAC7BC,EAAAA,IAAI,EAAE,aAAa;AACnBC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,MAAM,EAAE9B,eAAe;AACvB+B,EAAAA,IAAI,EAAJA,IAAI;AACJC,EAAAA,UAAU,EAAE;AACR3B,IAAAA,IAAI,EAAE;AACF4B,MAAAA,GAAG,EAAEC,MAAAA;KACR;AACD5B,IAAAA,IAAI,EAAE;AACF2B,MAAAA,GAAG,EAAEE,MAAAA;AACT,KAAA;GACH;AACDC,EAAAA,QAAQ,EAAE;AACN/B,IAAAA,IAAI,EAAE,SAAS;AACfC,IAAAA,IAAI,EAAE,GAAA;AACV,GAAA;AACJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbShorter.js","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, useState, KeyboardEvent } from 'react';\n\nimport { addSeparator } from '../../utils';\n\nimport { StyledHidden, StyledRoot, StyledShorter } from './BreadcrumbShorter.styles';\nimport { BreadcrumbShorterProps } from './BreadcrumbShorter.types';\n\nexport const BreadcrumbShorter: React.FC<HTMLAttributes<HTMLDivElement> & BreadcrumbShorterProps> = ({\n children,\n separator,\n}) => {\n const [openShorter, setOpenShorter] = useState(false);\n\n const renderItems: ReactNode[] = addSeparator(children, separator);\n\n const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n event.persist();\n\n if (event.keyCode === 13) {\n setOpenShorter(true);\n }\n };\n\n return (\n <StyledRoot>\n {!openShorter && (\n <StyledShorter tabIndex={0} onClick={() => setOpenShorter(true)} onKeyDown={onKeyPress}>\n ...\n </StyledShorter>\n )}\n {openShorter &&
|
|
1
|
+
{"version":3,"file":"BreadcrumbShorter.js","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, useState, KeyboardEvent } from 'react';\n\nimport { addSeparator } from '../../utils';\n\nimport { StyledHidden, StyledRoot, StyledShorter } from './BreadcrumbShorter.styles';\nimport { BreadcrumbShorterProps } from './BreadcrumbShorter.types';\n\nexport const BreadcrumbShorter: React.FC<HTMLAttributes<HTMLDivElement> & BreadcrumbShorterProps> = ({\n children,\n separator,\n}) => {\n const [openShorter, setOpenShorter] = useState(false);\n\n const renderItems: ReactNode[] = addSeparator(children, separator);\n\n const onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {\n event.persist();\n\n if (event.keyCode === 13) {\n setOpenShorter(true);\n }\n };\n\n return (\n <StyledRoot>\n {!openShorter && (\n <StyledShorter tabIndex={0} onClick={() => setOpenShorter(true)} onKeyDown={onKeyPress}>\n ...\n </StyledShorter>\n )}\n {openShorter && <StyledHidden>{renderItems.map((item) => item)}</StyledHidden>}\n </StyledRoot>\n );\n};\n"],"names":["BreadcrumbShorter","_ref","children","separator","_useState","useState","_useState2","_slicedToArray","openShorter","setOpenShorter","renderItems","addSeparator","onKeyPress","event","persist","keyCode","React","createElement","StyledRoot","StyledShorter","tabIndex","onClick","onKeyDown","StyledHidden","map","item"],"mappings":";;;;;IAOaA,iBAAoF,GAAG,SAAvFA,iBAAoFA,CAAAC,IAAA,EAG3F;AAAA,EAAA,IAFFC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS,CAAA;AAET,EAAA,IAAAC,SAAA,GAAsCC,QAAQ,CAAC,KAAK,CAAC;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAA9CI,IAAAA,WAAW,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,cAAc,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;AAElC,EAAA,IAAMI,WAAwB,GAAGC,YAAY,CAACT,QAAQ,EAAEC,SAAS,CAAC,CAAA;AAElE,EAAA,IAAMS,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAoC,EAAK;IACzDA,KAAK,CAACC,OAAO,EAAE,CAAA;AAEf,IAAA,IAAID,KAAK,CAACE,OAAO,KAAK,EAAE,EAAE;MACtBN,cAAc,CAAC,IAAI,CAAC,CAAA;AACxB,KAAA;GACH,CAAA;AAED,EAAA,oBACIO,KAAA,CAAAC,aAAA,CAACC,UAAU,EAAA,IAAA,EACN,CAACV,WAAW,iBACTQ,KAAA,CAAAC,aAAA,CAACE,aAAa,EAAA;AAACC,IAAAA,QAAQ,EAAE,CAAE;IAACC,OAAO,EAAE,SAAAA,OAAA,GAAA;MAAA,OAAMZ,cAAc,CAAC,IAAI,CAAC,CAAA;KAAC;AAACa,IAAAA,SAAS,EAAEV,UAAAA;AAAW,GAAA,EAAC,KAEzE,CAClB,EACAJ,WAAW,iBAAIQ,KAAA,CAAAC,aAAA,CAACM,YAAY,QAAEb,WAAW,CAACc,GAAG,CAAC,UAACC,IAAI,EAAA;AAAA,IAAA,OAAKA,IAAI,CAAA;AAAA,GAAA,CAAgB,CACrE,CAAC,CAAA;AAErB;;;;"}
|
|
@@ -25,7 +25,7 @@ var convertIconSize = function convertIconSize(size) {
|
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
var getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
|
|
28
|
-
|
|
28
|
+
var renderItems = shortItems(items.map(function (item) {
|
|
29
29
|
if ('renderItem' in item) {
|
|
30
30
|
return item.renderItem();
|
|
31
31
|
}
|
|
@@ -35,6 +35,7 @@ var getRenderItems = function getRenderItems(items, renderSeparator, showItems)
|
|
|
35
35
|
isHref: Boolean(item.href)
|
|
36
36
|
}, item.title);
|
|
37
37
|
}), renderSeparator, showItems);
|
|
38
|
+
return renderItems;
|
|
38
39
|
};
|
|
39
40
|
var addSeparator = function addSeparator(items, renderSeparator) {
|
|
40
41
|
return items.flatMap(function (item, idx) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Breadcrumbs/utils/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';\nimport { StyledLink } from '../Breadcrumbs.styles';\nimport { BreadcrumbsItem } from '../Breadcrumbs.types';\n\nexport const shortItems = (items: ReactNode[], renderSeparator: ReactNode, showItems?: number) => {\n if (!showItems || showItems < 2 || items.length <= showItems) {\n return items;\n }\n\n const leftSlice = Math.floor(showItems / 2);\n const rightSlice = items.length - leftSlice - (showItems % 2);\n\n const renderItems: ReactNode[] = items.slice(leftSlice, rightSlice);\n const shorter = <BreadcrumbShorter separator={renderSeparator}>{renderItems}</BreadcrumbShorter>;\n items.splice(leftSlice, rightSlice - leftSlice, shorter);\n return items;\n};\n\nexport const convertIconSize = (size?:
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Breadcrumbs/utils/index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { BreadcrumbShorter } from '../ui/BreadcrumbShorter/BreadcrumbShorter';\nimport { StyledLink } from '../Breadcrumbs.styles';\nimport { BreadcrumbsItem } from '../Breadcrumbs.types';\n\nexport const shortItems = (items: ReactNode[], renderSeparator: ReactNode, showItems?: number) => {\n if (!showItems || showItems < 2 || items.length <= showItems) {\n return items;\n }\n\n const leftSlice = Math.floor(showItems / 2);\n const rightSlice = items.length - leftSlice - (showItems % 2);\n\n const renderItems: ReactNode[] = items.slice(leftSlice, rightSlice);\n const shorter = <BreadcrumbShorter separator={renderSeparator}>{renderItems}</BreadcrumbShorter>;\n items.splice(leftSlice, rightSlice - leftSlice, shorter);\n return items;\n};\n\nexport const convertIconSize = (size?: string) => {\n switch (size) {\n case 's':\n case 'xs':\n return 'xs';\n default:\n return 's';\n }\n};\n\nexport const getRenderItems = (items: BreadcrumbsItem[], renderSeparator: ReactNode, showItems?: number) => {\n const renderItems = shortItems(\n items.map((item: BreadcrumbsItem) => {\n if ('renderItem' in item) {\n return item.renderItem();\n }\n return (\n <StyledLink tabIndex={0} href={item.href} isHref={Boolean(item.href)}>\n {item.title}\n </StyledLink>\n );\n }),\n renderSeparator,\n showItems,\n );\n\n return renderItems;\n};\n\nexport const addSeparator = (items: ReactNode[], renderSeparator: ReactNode) => {\n return items.flatMap((item, idx) => (idx < items.length - 1 ? [item, renderSeparator] : [item]));\n};\n"],"names":["shortItems","items","renderSeparator","showItems","length","leftSlice","Math","floor","rightSlice","renderItems","slice","shorter","React","createElement","BreadcrumbShorter","separator","splice","convertIconSize","size","getRenderItems","map","item","renderItem","StyledLink","tabIndex","href","isHref","Boolean","title","addSeparator","flatMap","idx"],"mappings":";;;;AAMO,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAIC,KAAkB,EAAEC,eAA0B,EAAEC,SAAkB,EAAK;AAC9F,EAAA,IAAI,CAACA,SAAS,IAAIA,SAAS,GAAG,CAAC,IAAIF,KAAK,CAACG,MAAM,IAAID,SAAS,EAAE;AAC1D,IAAA,OAAOF,KAAK,CAAA;AAChB,GAAA;EAEA,IAAMI,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACJ,SAAS,GAAG,CAAC,CAAC,CAAA;EAC3C,IAAMK,UAAU,GAAGP,KAAK,CAACG,MAAM,GAAGC,SAAS,GAAIF,SAAS,GAAG,CAAE,CAAA;EAE7D,IAAMM,WAAwB,GAAGR,KAAK,CAACS,KAAK,CAACL,SAAS,EAAEG,UAAU,CAAC,CAAA;AACnE,EAAA,IAAMG,OAAO,gBAAGC,KAAA,CAAAC,aAAA,CAACC,iBAAiB,EAAA;AAACC,IAAAA,SAAS,EAAEb,eAAAA;AAAgB,GAAA,EAAEO,WAA+B,CAAC,CAAA;EAChGR,KAAK,CAACe,MAAM,CAACX,SAAS,EAAEG,UAAU,GAAGH,SAAS,EAAEM,OAAO,CAAC,CAAA;AACxD,EAAA,OAAOV,KAAK,CAAA;AAChB,EAAC;IAEYgB,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,IAAa,EAAK;AAC9C,EAAA,QAAQA,IAAI;AACR,IAAA,KAAK,GAAG,CAAA;AACR,IAAA,KAAK,IAAI;AACL,MAAA,OAAO,IAAI,CAAA;AACf,IAAA;AACI,MAAA,OAAO,GAAG,CAAA;AAClB,GAAA;AACJ,EAAC;AAEM,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAIlB,KAAwB,EAAEC,eAA0B,EAAEC,SAAkB,EAAK;EACxG,IAAMM,WAAW,GAAGT,UAAU,CAC1BC,KAAK,CAACmB,GAAG,CAAC,UAACC,IAAqB,EAAK;IACjC,IAAI,YAAY,IAAIA,IAAI,EAAE;AACtB,MAAA,OAAOA,IAAI,CAACC,UAAU,EAAE,CAAA;AAC5B,KAAA;AACA,IAAA,oBACIV,KAAA,CAAAC,aAAA,CAACU,UAAU,EAAA;AAACC,MAAAA,QAAQ,EAAE,CAAE;MAACC,IAAI,EAAEJ,IAAI,CAACI,IAAK;AAACC,MAAAA,MAAM,EAAEC,OAAO,CAACN,IAAI,CAACI,IAAI,CAAA;KAC9DJ,EAAAA,IAAI,CAACO,KACE,CAAC,CAAA;AAErB,GAAC,CAAC,EACF1B,eAAe,EACfC,SACJ,CAAC,CAAA;AAED,EAAA,OAAOM,WAAW,CAAA;AACtB,EAAC;AAEM,IAAMoB,YAAY,GAAG,SAAfA,YAAYA,CAAI5B,KAAkB,EAAEC,eAA0B,EAAK;AAC5E,EAAA,OAAOD,KAAK,CAAC6B,OAAO,CAAC,UAACT,IAAI,EAAEU,GAAG,EAAA;AAAA,IAAA,OAAMA,GAAG,GAAG9B,KAAK,CAACG,MAAM,GAAG,CAAC,GAAG,CAACiB,IAAI,EAAEnB,eAAe,CAAC,GAAG,CAACmB,IAAI,CAAC,CAAA;AAAA,GAAC,CAAC,CAAA;AACpG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
|
3
|
-
"version": "0.115.0-canary.1310.
|
|
3
|
+
"version": "0.115.0-canary.1310.10255808867.0",
|
|
4
4
|
"description": "Salute Design System blueprint",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -118,5 +118,5 @@
|
|
|
118
118
|
"react-popper": "2.3.0",
|
|
119
119
|
"storeon": "3.1.5"
|
|
120
120
|
},
|
|
121
|
-
"gitHead": "
|
|
121
|
+
"gitHead": "04d63dc2b3f8107206f72988f23eadbd727ecfd4"
|
|
122
122
|
}
|
|
@@ -31,7 +31,7 @@ var convertIconSize = exports.convertIconSize = function convertIconSize(size) {
|
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
var getRenderItems = exports.getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
|
|
34
|
-
|
|
34
|
+
var renderItems = shortItems(items.map(function (item) {
|
|
35
35
|
if ('renderItem' in item) {
|
|
36
36
|
return item.renderItem();
|
|
37
37
|
}
|
|
@@ -41,6 +41,7 @@ var getRenderItems = exports.getRenderItems = function getRenderItems(items, ren
|
|
|
41
41
|
isHref: Boolean(item.href)
|
|
42
42
|
}, item.title);
|
|
43
43
|
}), renderSeparator, showItems);
|
|
44
|
+
return renderItems;
|
|
44
45
|
};
|
|
45
46
|
var addSeparator = exports.addSeparator = function addSeparator(items, renderSeparator) {
|
|
46
47
|
return items.flatMap(function (item, idx) {
|
|
@@ -24,7 +24,7 @@ export var convertIconSize = function convertIconSize(size) {
|
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
export var getRenderItems = function getRenderItems(items, renderSeparator, showItems) {
|
|
27
|
-
|
|
27
|
+
var renderItems = shortItems(items.map(function (item) {
|
|
28
28
|
if ('renderItem' in item) {
|
|
29
29
|
return item.renderItem();
|
|
30
30
|
}
|
|
@@ -34,6 +34,7 @@ export var getRenderItems = function getRenderItems(items, renderSeparator, show
|
|
|
34
34
|
isHref: Boolean(item.href)
|
|
35
35
|
}, item.title);
|
|
36
36
|
}), renderSeparator, showItems);
|
|
37
|
+
return renderItems;
|
|
37
38
|
};
|
|
38
39
|
export var addSeparator = function addSeparator(items, renderSeparator) {
|
|
39
40
|
return items.flatMap(function (item, idx) {
|
|
@@ -3,7 +3,7 @@ import { RootProps } from '../../engines';
|
|
|
3
3
|
import type { BreadcrumbsProps } from './Breadcrumbs.types';
|
|
4
4
|
export declare const breadcrumbsRoot: (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
5
5
|
view?: string | undefined;
|
|
6
|
-
size?:
|
|
6
|
+
size?: string | undefined;
|
|
7
7
|
separator?: React.ReactNode;
|
|
8
8
|
items: import("./Breadcrumbs.types").BreadcrumbsItem[];
|
|
9
9
|
showItems?: number | undefined;
|
|
@@ -13,7 +13,7 @@ export declare const breadcrumbsConfig: {
|
|
|
13
13
|
tag: string;
|
|
14
14
|
layout: (Root: RootProps<HTMLDivElement, BreadcrumbsProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
|
15
15
|
view?: string | undefined;
|
|
16
|
-
size?:
|
|
16
|
+
size?: string | undefined;
|
|
17
17
|
separator?: React.ReactNode;
|
|
18
18
|
items: import("./Breadcrumbs.types").BreadcrumbsItem[];
|
|
19
19
|
showItems?: number | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAM5D,eAAO,MAAM,eAAe,SAAU,UAAU,cAAc,EAAE,gBAAgB,CAAC;;;;;;
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAM5D,eAAO,MAAM,eAAe,SAAU,UAAU,cAAc,EAAE,gBAAgB,CAAC;;;;;;wCAa5E,CAAC;AAEN,eAAO,MAAM,iBAAiB;;;mBAfQ,UAAU,cAAc,EAAE,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;CAgChF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.types.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,oBAAY,eAAe,GACrB;IACI;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACjB,GACD;IACI;;OAEG;IACH,UAAU,EAAE,MAAM,SAAS,CAAC;CAC/B,CAAC;AAER,aAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.types.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumbs/Breadcrumbs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,oBAAY,eAAe,GACrB;IACI;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACjB,GACD;IACI;;OAEG;IACH,UAAU,EAAE,MAAM,SAAS,CAAC;CAC/B,CAAC;AAER,aAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,KAAK,EAAE,eAAe,EAAE,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oBAAY,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,WAAW,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbShorter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAsC,MAAM,OAAO,CAAC;AAKlF,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,sBAAsB,
|
|
1
|
+
{"version":3,"file":"BreadcrumbShorter.d.ts","sourceRoot":"","sources":["../../../../../src/components/Breadcrumbs/ui/BreadcrumbShorter/BreadcrumbShorter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAsC,MAAM,OAAO,CAAC;AAKlF,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,sBAAsB,CA0B/F,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
2
|
import { BreadcrumbsItem } from '../Breadcrumbs.types';
|
|
3
3
|
export declare const shortItems: (items: ReactNode[], renderSeparator: ReactNode, showItems?: number | undefined) => React.ReactNode[];
|
|
4
|
-
export declare const convertIconSize: (size?:
|
|
4
|
+
export declare const convertIconSize: (size?: string | undefined) => "s" | "xs";
|
|
5
5
|
export declare const getRenderItems: (items: BreadcrumbsItem[], renderSeparator: ReactNode, showItems?: number | undefined) => React.ReactNode[];
|
|
6
6
|
export declare const addSeparator: (items: ReactNode[], renderSeparator: ReactNode) => React.ReactNode[];
|
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,eAAO,MAAM,UAAU,UAAW,SAAS,EAAE,mBAAmB,SAAS,sDAYxE,CAAC;AAEF,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,eAAO,MAAM,UAAU,UAAW,SAAS,EAAE,mBAAmB,SAAS,sDAYxE,CAAC;AAEF,eAAO,MAAM,eAAe,2CAQ3B,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,eAAe,EAAE,mBAAmB,SAAS,sDAiBlF,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,SAAS,EAAE,mBAAmB,SAAS,sBAE1E,CAAC"}
|
|
@@ -6,14 +6,14 @@ import type { RootProps } from '../../../../engines';
|
|
|
6
6
|
*/
|
|
7
7
|
export declare const headerArrowRoot: (Root: RootProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>) => React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
8
8
|
arrow?: "back" | "minimize" | undefined;
|
|
9
|
-
iconSize?: "m" | "s" | "
|
|
9
|
+
iconSize?: "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | undefined;
|
|
10
10
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
11
11
|
export declare const headerArrowConfig: {
|
|
12
12
|
name: string;
|
|
13
13
|
tag: string;
|
|
14
14
|
layout: (Root: RootProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>) => React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
15
15
|
arrow?: "back" | "minimize" | undefined;
|
|
16
|
-
iconSize?: "m" | "s" | "
|
|
16
|
+
iconSize?: "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | undefined;
|
|
17
17
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
18
18
|
base: import("@linaria/core").LinariaClassName;
|
|
19
19
|
variations: {
|
|
@@ -11,7 +11,7 @@ export declare const Breadcrumbs: import("react").FunctionComponent<import("../.
|
|
|
11
11
|
};
|
|
12
12
|
}> & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
13
13
|
view?: string | undefined;
|
|
14
|
-
size?:
|
|
14
|
+
size?: string | undefined;
|
|
15
15
|
separator?: import("react").ReactNode;
|
|
16
16
|
items: import("../../../../components/Breadcrumbs/Breadcrumbs.types").BreadcrumbsItem[];
|
|
17
17
|
showItems?: number | undefined;
|
|
@@ -15,7 +15,7 @@ export declare const HeaderRoot: import("react").FunctionComponent<import("../..
|
|
|
15
15
|
export declare const HeaderLogo: import("react").FunctionComponent<import("../../../../engines/types").PropsType<import("../../../../engines/types").Variants> & import("../../../../components/Header").HeaderLogoProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export declare const HeaderArrow: import("react").FunctionComponent<import("../../../../engines/types").PropsType<import("../../../../engines/types").Variants> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
17
17
|
arrow?: "back" | "minimize" | undefined;
|
|
18
|
-
iconSize?: "m" | "s" | "
|
|
18
|
+
iconSize?: "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | undefined;
|
|
19
19
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
20
20
|
export declare const HeaderTitleWrapper: import("react").FunctionComponent<import("../../../../engines/types").PropsType<import("../../../../engines/types").Variants> & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
21
21
|
label?: string | undefined;
|
|
@@ -11,7 +11,7 @@ export declare const Breadcrumbs: import("react").FunctionComponent<import("../.
|
|
|
11
11
|
};
|
|
12
12
|
}> & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
13
13
|
view?: string | undefined;
|
|
14
|
-
size?:
|
|
14
|
+
size?: string | undefined;
|
|
15
15
|
separator?: import("react").ReactNode;
|
|
16
16
|
items: import("../../../../components/Breadcrumbs/Breadcrumbs.types").BreadcrumbsItem[];
|
|
17
17
|
showItems?: number | undefined;
|
|
@@ -15,7 +15,7 @@ export declare const HeaderRoot: import("react").FunctionComponent<import("../..
|
|
|
15
15
|
export declare const HeaderLogo: import("react").FunctionComponent<import("../../../../engines/types").PropsType<import("../../../../engines/types").Variants> & import("../../../../components/Header").HeaderLogoProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export declare const HeaderArrow: import("react").FunctionComponent<import("../../../../engines/types").PropsType<import("../../../../engines/types").Variants> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
17
17
|
arrow?: "back" | "minimize" | undefined;
|
|
18
|
-
iconSize?: "m" | "s" | "
|
|
18
|
+
iconSize?: "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | undefined;
|
|
19
19
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
20
20
|
export declare const HeaderTitleWrapper: import("react").FunctionComponent<import("../../../../engines/types").PropsType<import("../../../../engines/types").Variants> & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
21
21
|
label?: string | undefined;
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
Структура файлов:
|
|
2
|
-
|
|
3
|
-
- Breadcrumbs.types.ts
|
|
4
|
-
- Breadcrumbs.tokens.ts
|
|
5
|
-
- Breadcrumbs.tsx
|
|
6
|
-
- index.ts
|
|
7
|
-
- variants:
|
|
8
|
-
- - \_size:
|
|
9
|
-
- - - base.ts
|
|
10
|
-
- - - tokens.json
|
|
11
|
-
- ui:
|
|
12
|
-
- - BreadcrumbItem:
|
|
13
|
-
- - - BreadcrumbItem.tsx
|
|
14
|
-
- - BreadcrumbShorter:
|
|
15
|
-
- - - BreadcrumbShorter.tsx
|
|
16
|
-
- - BreadcrumbSeparator:
|
|
17
|
-
- - - BreadcrumbSeparator.tsx
|
|
18
|
-
|
|
19
|
-
Логика работы:
|
|
20
|
-
|
|
21
|
-
1. На вход идет 1 обязательный параметр: items
|
|
22
|
-
|
|
23
|
-
```jsx
|
|
24
|
-
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]}></Breadcreumbs>
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
2. Затем генерируется массив элементов хлебных крошек, между ними сепаратор ( если указан пропс, то используется элемент из параметра, иначе стандартный из BreadcrumbSeparator )
|
|
28
|
-
|
|
29
|
-
```jsx
|
|
30
|
-
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]} separator=">"></Breadcreumbs>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
2.1. При генерации BreadcrumbItem, смотрит на href. Если он есть, то добавляется тег a, с указанной ссылкой, иначе ссылка не кликабельна
|
|
34
|
-
|
|
35
|
-
```jsx
|
|
36
|
-
<Breadcrumbs
|
|
37
|
-
items={[
|
|
38
|
-
{ title: 'Главная', href: '/' },
|
|
39
|
-
{ title: 'Контакты' }, // Без ссылки
|
|
40
|
-
]}
|
|
41
|
-
separator=">"
|
|
42
|
-
></Breadcreumbs>
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
3. Можно указать в item, вместо title и href - renderItem. Эта функция, которая возвращает любое, что придумал разработчик. кастомный шортер, определенный функционал для него ( например кнопку )
|
|
46
|
-
|
|
47
|
-
```jsx
|
|
48
|
-
const renderItem = () => {
|
|
49
|
-
return <Button>Контакты</Button>
|
|
50
|
-
}
|
|
51
|
-
<Breadcrumbs
|
|
52
|
-
items={[
|
|
53
|
-
{title: 'Главная', href: '/'},
|
|
54
|
-
{renderItem: renderItem}
|
|
55
|
-
{title: 'Адрес'}
|
|
56
|
-
]}
|
|
57
|
-
separator=">">
|
|
58
|
-
</Breadcreumbs>
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
ТАКЖЕ: Можно указать кол-во видимых элементов через параметр showItems. ShowItems: если указано четное число, например 2 - то распределяется равномерно по 1 с каждой стороны. Если нечетное, например 3 - то две будет справа и 1 слева. Все оставльное сокращается шортером
|
|
62
|
-
|
|
63
|
-
```jsx
|
|
64
|
-
const renderItem = () => {
|
|
65
|
-
return <Button>Контакты</Button>
|
|
66
|
-
}
|
|
67
|
-
<Breadcrumbs
|
|
68
|
-
items={[
|
|
69
|
-
{title: 'Главная', href: '/'},
|
|
70
|
-
{renderItem: renderItem}
|
|
71
|
-
{title: 'Адрес'}
|
|
72
|
-
]}
|
|
73
|
-
showItems={2}
|
|
74
|
-
separator=">">
|
|
75
|
-
</Breadcreumbs>
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
4. Затем все элементы рендерятся и показываются пользователю
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
Структура файлов:
|
|
2
|
-
|
|
3
|
-
- Breadcrumbs.types.ts
|
|
4
|
-
- Breadcrumbs.tokens.ts
|
|
5
|
-
- Breadcrumbs.tsx
|
|
6
|
-
- index.ts
|
|
7
|
-
- variants:
|
|
8
|
-
- - \_size:
|
|
9
|
-
- - - base.ts
|
|
10
|
-
- - - tokens.json
|
|
11
|
-
- ui:
|
|
12
|
-
- - BreadcrumbItem:
|
|
13
|
-
- - - BreadcrumbItem.tsx
|
|
14
|
-
- - BreadcrumbShorter:
|
|
15
|
-
- - - BreadcrumbShorter.tsx
|
|
16
|
-
- - BreadcrumbSeparator:
|
|
17
|
-
- - - BreadcrumbSeparator.tsx
|
|
18
|
-
|
|
19
|
-
Логика работы:
|
|
20
|
-
|
|
21
|
-
1. На вход идет 1 обязательный параметр: items
|
|
22
|
-
|
|
23
|
-
```jsx
|
|
24
|
-
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]}></Breadcreumbs>
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
2. Затем генерируется массив элементов хлебных крошек, между ними сепаратор ( если указан пропс, то используется элемент из параметра, иначе стандартный из BreadcrumbSeparator )
|
|
28
|
-
|
|
29
|
-
```jsx
|
|
30
|
-
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]} separator=">"></Breadcreumbs>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
2.1. При генерации BreadcrumbItem, смотрит на href. Если он есть, то добавляется тег a, с указанной ссылкой, иначе ссылка не кликабельна
|
|
34
|
-
|
|
35
|
-
```jsx
|
|
36
|
-
<Breadcrumbs
|
|
37
|
-
items={[
|
|
38
|
-
{ title: 'Главная', href: '/' },
|
|
39
|
-
{ title: 'Контакты' }, // Без ссылки
|
|
40
|
-
]}
|
|
41
|
-
separator=">"
|
|
42
|
-
></Breadcreumbs>
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
3. Можно указать в item, вместо title и href - renderItem. Эта функция, которая возвращает любое, что придумал разработчик. кастомный шортер, определенный функционал для него ( например кнопку )
|
|
46
|
-
|
|
47
|
-
```jsx
|
|
48
|
-
const renderItem = () => {
|
|
49
|
-
return <Button>Контакты</Button>
|
|
50
|
-
}
|
|
51
|
-
<Breadcrumbs
|
|
52
|
-
items={[
|
|
53
|
-
{title: 'Главная', href: '/'},
|
|
54
|
-
{renderItem: renderItem}
|
|
55
|
-
{title: 'Адрес'}
|
|
56
|
-
]}
|
|
57
|
-
separator=">">
|
|
58
|
-
</Breadcreumbs>
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
ТАКЖЕ: Можно указать кол-во видимых элементов через параметр showItems. ShowItems: если указано четное число, например 2 - то распределяется равномерно по 1 с каждой стороны. Если нечетное, например 3 - то две будет справа и 1 слева. Все оставльное сокращается шортером
|
|
62
|
-
|
|
63
|
-
```jsx
|
|
64
|
-
const renderItem = () => {
|
|
65
|
-
return <Button>Контакты</Button>
|
|
66
|
-
}
|
|
67
|
-
<Breadcrumbs
|
|
68
|
-
items={[
|
|
69
|
-
{title: 'Главная', href: '/'},
|
|
70
|
-
{renderItem: renderItem}
|
|
71
|
-
{title: 'Адрес'}
|
|
72
|
-
]}
|
|
73
|
-
showItems={2}
|
|
74
|
-
separator=">">
|
|
75
|
-
</Breadcreumbs>
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
4. Затем все элементы рендерятся и показываются пользователю
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
Структура файлов:
|
|
2
|
-
|
|
3
|
-
- Breadcrumbs.types.ts
|
|
4
|
-
- Breadcrumbs.tokens.ts
|
|
5
|
-
- Breadcrumbs.tsx
|
|
6
|
-
- index.ts
|
|
7
|
-
- variants:
|
|
8
|
-
- - \_size:
|
|
9
|
-
- - - base.ts
|
|
10
|
-
- - - tokens.json
|
|
11
|
-
- ui:
|
|
12
|
-
- - BreadcrumbItem:
|
|
13
|
-
- - - BreadcrumbItem.tsx
|
|
14
|
-
- - BreadcrumbShorter:
|
|
15
|
-
- - - BreadcrumbShorter.tsx
|
|
16
|
-
- - BreadcrumbSeparator:
|
|
17
|
-
- - - BreadcrumbSeparator.tsx
|
|
18
|
-
|
|
19
|
-
Логика работы:
|
|
20
|
-
|
|
21
|
-
1. На вход идет 1 обязательный параметр: items
|
|
22
|
-
|
|
23
|
-
```jsx
|
|
24
|
-
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]}></Breadcreumbs>
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
2. Затем генерируется массив элементов хлебных крошек, между ними сепаратор ( если указан пропс, то используется элемент из параметра, иначе стандартный из BreadcrumbSeparator )
|
|
28
|
-
|
|
29
|
-
```jsx
|
|
30
|
-
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]} separator=">"></Breadcreumbs>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
2.1. При генерации BreadcrumbItem, смотрит на href. Если он есть, то добавляется тег a, с указанной ссылкой, иначе ссылка не кликабельна
|
|
34
|
-
|
|
35
|
-
```jsx
|
|
36
|
-
<Breadcrumbs
|
|
37
|
-
items={[
|
|
38
|
-
{ title: 'Главная', href: '/' },
|
|
39
|
-
{ title: 'Контакты' }, // Без ссылки
|
|
40
|
-
]}
|
|
41
|
-
separator=">"
|
|
42
|
-
></Breadcreumbs>
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
3. Можно указать в item, вместо title и href - renderItem. Эта функция, которая возвращает любое, что придумал разработчик. кастомный шортер, определенный функционал для него ( например кнопку )
|
|
46
|
-
|
|
47
|
-
```jsx
|
|
48
|
-
const renderItem = () => {
|
|
49
|
-
return <Button>Контакты</Button>
|
|
50
|
-
}
|
|
51
|
-
<Breadcrumbs
|
|
52
|
-
items={[
|
|
53
|
-
{title: 'Главная', href: '/'},
|
|
54
|
-
{renderItem: renderItem}
|
|
55
|
-
{title: 'Адрес'}
|
|
56
|
-
]}
|
|
57
|
-
separator=">">
|
|
58
|
-
</Breadcreumbs>
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
ТАКЖЕ: Можно указать кол-во видимых элементов через параметр showItems. ShowItems: если указано четное число, например 2 - то распределяется равномерно по 1 с каждой стороны. Если нечетное, например 3 - то две будет справа и 1 слева. Все оставльное сокращается шортером
|
|
62
|
-
|
|
63
|
-
```jsx
|
|
64
|
-
const renderItem = () => {
|
|
65
|
-
return <Button>Контакты</Button>
|
|
66
|
-
}
|
|
67
|
-
<Breadcrumbs
|
|
68
|
-
items={[
|
|
69
|
-
{title: 'Главная', href: '/'},
|
|
70
|
-
{renderItem: renderItem}
|
|
71
|
-
{title: 'Адрес'}
|
|
72
|
-
]}
|
|
73
|
-
showItems={2}
|
|
74
|
-
separator=">">
|
|
75
|
-
</Breadcreumbs>
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
4. Затем все элементы рендерятся и показываются пользователю
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
Структура файлов:
|
|
2
|
-
|
|
3
|
-
- Breadcrumbs.types.ts
|
|
4
|
-
- Breadcrumbs.tokens.ts
|
|
5
|
-
- Breadcrumbs.tsx
|
|
6
|
-
- index.ts
|
|
7
|
-
- variants:
|
|
8
|
-
- - \_size:
|
|
9
|
-
- - - base.ts
|
|
10
|
-
- - - tokens.json
|
|
11
|
-
- ui:
|
|
12
|
-
- - BreadcrumbItem:
|
|
13
|
-
- - - BreadcrumbItem.tsx
|
|
14
|
-
- - BreadcrumbShorter:
|
|
15
|
-
- - - BreadcrumbShorter.tsx
|
|
16
|
-
- - BreadcrumbSeparator:
|
|
17
|
-
- - - BreadcrumbSeparator.tsx
|
|
18
|
-
|
|
19
|
-
Логика работы:
|
|
20
|
-
|
|
21
|
-
1. На вход идет 1 обязательный параметр: items
|
|
22
|
-
|
|
23
|
-
```jsx
|
|
24
|
-
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]}></Breadcreumbs>
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
2. Затем генерируется массив элементов хлебных крошек, между ними сепаратор ( если указан пропс, то используется элемент из параметра, иначе стандартный из BreadcrumbSeparator )
|
|
28
|
-
|
|
29
|
-
```jsx
|
|
30
|
-
<Breadcrumbs items={[{ title: 'Главная', href: '/' }]} separator=">"></Breadcreumbs>
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
2.1. При генерации BreadcrumbItem, смотрит на href. Если он есть, то добавляется тег a, с указанной ссылкой, иначе ссылка не кликабельна
|
|
34
|
-
|
|
35
|
-
```jsx
|
|
36
|
-
<Breadcrumbs
|
|
37
|
-
items={[
|
|
38
|
-
{ title: 'Главная', href: '/' },
|
|
39
|
-
{ title: 'Контакты' }, // Без ссылки
|
|
40
|
-
]}
|
|
41
|
-
separator=">"
|
|
42
|
-
></Breadcreumbs>
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
3. Можно указать в item, вместо title и href - renderItem. Эта функция, которая возвращает любое, что придумал разработчик. кастомный шортер, определенный функционал для него ( например кнопку )
|
|
46
|
-
|
|
47
|
-
```jsx
|
|
48
|
-
const renderItem = () => {
|
|
49
|
-
return <Button>Контакты</Button>
|
|
50
|
-
}
|
|
51
|
-
<Breadcrumbs
|
|
52
|
-
items={[
|
|
53
|
-
{title: 'Главная', href: '/'},
|
|
54
|
-
{renderItem: renderItem}
|
|
55
|
-
{title: 'Адрес'}
|
|
56
|
-
]}
|
|
57
|
-
separator=">">
|
|
58
|
-
</Breadcreumbs>
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
ТАКЖЕ: Можно указать кол-во видимых элементов через параметр showItems. ShowItems: если указано четное число, например 2 - то распределяется равномерно по 1 с каждой стороны. Если нечетное, например 3 - то две будет справа и 1 слева. Все оставльное сокращается шортером
|
|
62
|
-
|
|
63
|
-
```jsx
|
|
64
|
-
const renderItem = () => {
|
|
65
|
-
return <Button>Контакты</Button>
|
|
66
|
-
}
|
|
67
|
-
<Breadcrumbs
|
|
68
|
-
items={[
|
|
69
|
-
{title: 'Главная', href: '/'},
|
|
70
|
-
{renderItem: renderItem}
|
|
71
|
-
{title: 'Адрес'}
|
|
72
|
-
]}
|
|
73
|
-
showItems={2}
|
|
74
|
-
separator=">">
|
|
75
|
-
</Breadcreumbs>
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
4. Затем все элементы рендерятся и показываются пользователю
|