@salutejs/plasma-new-hope 0.88.0-canary.1249.9498396051.0 → 0.88.0-canary.1252.9517095860.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Segment/SegmentProvider/SegmentProvider.js +4 -1
- package/cjs/components/Segment/SegmentProvider/SegmentProvider.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +9 -2
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
- package/es/components/Segment/SegmentProvider/SegmentProvider.js +4 -1
- package/es/components/Segment/SegmentProvider/SegmentProvider.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +9 -2
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.js.map +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Button/Button.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +7 -2
- package/styled-components/cjs/components/Segment/SegmentProvider/SegmentProvider.js +4 -1
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.js +9 -2
- package/styled-components/es/components/Button/Button.template-doc.mdx +3 -3
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +7 -2
- package/styled-components/es/components/Segment/SegmentProvider/SegmentProvider.js +4 -1
- package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.js +9 -2
- package/types/components/Segment/SegmentProvider/SegmentProvider.d.ts.map +1 -1
- package/types/components/Segment/SegmentProvider/SegmentProvider.types.d.ts +4 -3
- package/types/components/Segment/SegmentProvider/SegmentProvider.types.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts +2 -0
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts +5 -0
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Segment/Segment.d.ts +1 -0
- package/types/examples/plasma_b2c/components/Segment/Segment.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Segment/Segment.d.ts +1 -0
- package/types/examples/plasma_web/components/Segment/Segment.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Segment/Segment.d.ts +1 -0
- package/types/examples/sds_engineer/components/Segment/Segment.d.ts.map +1 -1
@@ -49,6 +49,7 @@ var SegmentProvider = function SegmentProvider(_ref) {
|
|
49
49
|
}, [selectionMode, setSelectedSegmentItems]);
|
50
50
|
var contextValue = {
|
51
51
|
selectedSegmentItems: selectedSegmentItems,
|
52
|
+
setSelectedSegmentItems: setSelectedSegmentItems,
|
52
53
|
handleSelect: handleSelect,
|
53
54
|
selectionMode: selectionMode,
|
54
55
|
setSelectionMode: setSelectionMode,
|
@@ -56,7 +57,9 @@ var SegmentProvider = function SegmentProvider(_ref) {
|
|
56
57
|
setDisabledGroup: setDisabledGroup
|
57
58
|
};
|
58
59
|
React.useEffect(function () {
|
59
|
-
|
60
|
+
if (selectionMode === 'single' && (selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.length) > 0) {
|
61
|
+
setSelectedSegmentItems([selectedSegmentItems[0]]);
|
62
|
+
}
|
60
63
|
}, [selectionMode]);
|
61
64
|
return /*#__PURE__*/React.createElement(SegmentContext.Provider, {
|
62
65
|
value: contextValue
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentProvider.js","sources":["../../../../src/components/Segment/SegmentProvider/SegmentProvider.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { SegmentContextType, SegmentSelectionMode } from './SegmentProvider.types';\n\nexport const SegmentContext = createContext<SegmentContextType | undefined>(undefined);\n\nexport const useSegmentInner = () => {\n const context = useContext(SegmentContext);\n if (!context) {\n throw new Error('useSegment must be used within a SegmentProvider');\n }\n return context;\n};\n\nexport const useSegment = () => {\n const { selectedSegmentItems } = useSegmentInner();\n return { selectedSegmentItems };\n};\n\nexport const SegmentProvider: FC<PropsWithChildren> = ({ children }) => {\n const [selectedSegmentItems, setSelectedSegmentItems] = useState<string[]>([]);\n const [selectionMode, setSelectionMode] = useState<SegmentSelectionMode>('single');\n const [disabledGroup, setDisabledGroup] = useState(false);\n\n const handleSelect = useCallback(\n (label: string) => {\n if (selectionMode !== 'multiple') {\n setSelectedSegmentItems((prevSelected) => (prevSelected.includes(label) ? [] : [label]));\n return;\n }\n\n setSelectedSegmentItems((prevSelected) =>\n prevSelected.includes(label) ? prevSelected.filter((item) => item !== label) : [...prevSelected, label],\n );\n },\n [selectionMode, setSelectedSegmentItems],\n );\n\n const contextValue: SegmentContextType = {\n selectedSegmentItems,\n handleSelect,\n selectionMode,\n setSelectionMode,\n disabledGroup,\n setDisabledGroup,\n };\n\n useEffect(() => {\n setSelectedSegmentItems([]);\n }, [selectionMode]);\n\n return <SegmentContext.Provider value={contextValue}>{children}</SegmentContext.Provider>;\n};\n"],"names":["SegmentContext","createContext","undefined","useSegmentInner","context","useContext","Error","useSegment","_useSegmentInner","selectedSegmentItems","SegmentProvider","_ref","children","_useState","useState","_useState2","_slicedToArray","setSelectedSegmentItems","_useState3","_useState4","selectionMode","setSelectionMode","_useState5","_useState6","disabledGroup","setDisabledGroup","handleSelect","useCallback","label","prevSelected","includes","filter","item","concat","_toConsumableArray","contextValue","useEffect","React","createElement","Provider","value"],"mappings":";;;;;;;IAKaA,cAAc,gBAAGC,mBAAa,CAAiCC,SAAS,EAAC;IAEzEC,eAAe,GAAG,SAAlBA,eAAeA,GAAS;AACjC,EAAA,IAAMC,OAAO,GAAGC,gBAAU,CAACL,cAAc,CAAC,CAAA;EAC1C,IAAI,CAACI,OAAO,EAAE;AACV,IAAA,MAAM,IAAIE,KAAK,CAAC,kDAAkD,CAAC,CAAA;AACvE,GAAA;AACA,EAAA,OAAOF,OAAO,CAAA;AAClB,EAAC;IAEYG,UAAU,GAAG,SAAbA,UAAUA,GAAS;AAC5B,EAAA,IAAAC,gBAAA,GAAiCL,eAAe,EAAE;IAA1CM,oBAAoB,GAAAD,gBAAA,CAApBC,oBAAoB,CAAA;EAC5B,OAAO;AAAEA,IAAAA,oBAAoB,EAApBA,oBAAAA;GAAsB,CAAA;AACnC,EAAC;IAEYC,eAAsC,GAAG,SAAzCA,eAAsCA,CAAAC,IAAA,EAAqB;AAAA,EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ,CAAA;AAC7D,EAAA,IAAAC,SAAA,GAAwDC,cAAQ,CAAW,EAAE,CAAC;IAAAC,UAAA,GAAAC,uCAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAvEJ,IAAAA,oBAAoB,GAAAM,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,uBAAuB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AACpD,EAAA,IAAAG,UAAA,GAA0CJ,cAAQ,CAAuB,QAAQ,CAAC;IAAAK,UAAA,GAAAH,uCAAA,CAAAE,UAAA,EAAA,CAAA,CAAA;AAA3EE,IAAAA,aAAa,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,gBAAgB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AACtC,EAAA,IAAAG,UAAA,GAA0CR,cAAQ,CAAC,KAAK,CAAC;IAAAS,UAAA,GAAAP,uCAAA,CAAAM,UAAA,EAAA,CAAA,CAAA;AAAlDE,IAAAA,aAAa,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,gBAAgB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AAEtC,EAAA,IAAMG,YAAY,GAAGC,iBAAW,CAC5B,UAACC,KAAa,EAAK;IACf,IAAIR,aAAa,KAAK,UAAU,EAAE;MAC9BH,uBAAuB,CAAC,UAACY,YAAY,EAAA;QAAA,OAAMA,YAAY,CAACC,QAAQ,CAACF,KAAK,CAAC,GAAG,EAAE,GAAG,CAACA,KAAK,CAAC,CAAA;AAAA,OAAC,CAAC,CAAA;AACxF,MAAA,OAAA;AACJ,KAAA;IAEAX,uBAAuB,CAAC,UAACY,YAAY,EAAA;AAAA,MAAA,OACjCA,YAAY,CAACC,QAAQ,CAACF,KAAK,CAAC,GAAGC,YAAY,CAACE,MAAM,CAAC,UAACC,IAAI,EAAA;QAAA,OAAKA,IAAI,KAAKJ,KAAK,CAAA;OAAC,CAAA,GAAA,EAAA,CAAAK,MAAA,CAAAC,2CAAA,CAAOL,YAAY,CAAA,EAAA,CAAED,KAAK,CAAC,CAAA,CAAA;AAAA,KAC3G,CAAC,CAAA;AACL,GAAC,EACD,CAACR,aAAa,EAAEH,uBAAuB,CAC3C,CAAC,CAAA;AAED,EAAA,IAAMkB,YAAgC,GAAG;AACrC1B,IAAAA,oBAAoB,EAApBA,oBAAoB;
|
1
|
+
{"version":3,"file":"SegmentProvider.js","sources":["../../../../src/components/Segment/SegmentProvider/SegmentProvider.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { SegmentContextType, SegmentSelectionMode } from './SegmentProvider.types';\n\nexport const SegmentContext = createContext<SegmentContextType | undefined>(undefined);\n\nexport const useSegmentInner = () => {\n const context = useContext(SegmentContext);\n if (!context) {\n throw new Error('useSegment must be used within a SegmentProvider');\n }\n return context;\n};\n\nexport const useSegment = () => {\n const { selectedSegmentItems } = useSegmentInner();\n return { selectedSegmentItems };\n};\n\nexport const SegmentProvider: FC<PropsWithChildren> = ({ children }) => {\n const [selectedSegmentItems, setSelectedSegmentItems] = useState<string[]>([]);\n const [selectionMode, setSelectionMode] = useState<SegmentSelectionMode>('single');\n const [disabledGroup, setDisabledGroup] = useState(false);\n\n const handleSelect = useCallback(\n (label: string) => {\n if (selectionMode !== 'multiple') {\n setSelectedSegmentItems((prevSelected) => (prevSelected.includes(label) ? [] : [label]));\n return;\n }\n\n setSelectedSegmentItems((prevSelected) =>\n prevSelected.includes(label) ? prevSelected.filter((item) => item !== label) : [...prevSelected, label],\n );\n },\n [selectionMode, setSelectedSegmentItems],\n );\n\n const contextValue: SegmentContextType = {\n selectedSegmentItems,\n setSelectedSegmentItems,\n handleSelect,\n selectionMode,\n setSelectionMode,\n disabledGroup,\n setDisabledGroup,\n };\n\n useEffect(() => {\n if (selectionMode === 'single' && selectedSegmentItems?.length > 0) {\n setSelectedSegmentItems([selectedSegmentItems[0]]);\n }\n }, [selectionMode]);\n\n return <SegmentContext.Provider value={contextValue}>{children}</SegmentContext.Provider>;\n};\n"],"names":["SegmentContext","createContext","undefined","useSegmentInner","context","useContext","Error","useSegment","_useSegmentInner","selectedSegmentItems","SegmentProvider","_ref","children","_useState","useState","_useState2","_slicedToArray","setSelectedSegmentItems","_useState3","_useState4","selectionMode","setSelectionMode","_useState5","_useState6","disabledGroup","setDisabledGroup","handleSelect","useCallback","label","prevSelected","includes","filter","item","concat","_toConsumableArray","contextValue","useEffect","length","React","createElement","Provider","value"],"mappings":"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"}
|
@@ -19,7 +19,7 @@ var base$5 = require('./variations/_filledBackgound/base.js');
|
|
19
19
|
var base$4 = require('./variations/_stretch/base.js');
|
20
20
|
var SegmentGroup_styles = require('./SegmentGroup.styles.js');
|
21
21
|
|
22
|
-
var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children"];
|
22
|
+
var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children", "defaultSelected"];
|
23
23
|
var segmentGroupRoot = function segmentGroupRoot(Root) {
|
24
24
|
return /*#__PURE__*/React.forwardRef(function (props, outerRef) {
|
25
25
|
var id = props.id,
|
@@ -33,10 +33,12 @@ var segmentGroupRoot = function segmentGroupRoot(Root) {
|
|
33
33
|
size = props.size,
|
34
34
|
view = props.view,
|
35
35
|
children = props.children,
|
36
|
+
defaultSelected = props.defaultSelected,
|
36
37
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
|
37
38
|
var _useSegmentInner = SegmentProvider.useSegmentInner(),
|
38
39
|
setSelectionMode = _useSegmentInner.setSelectionMode,
|
39
|
-
setDisabledGroup = _useSegmentInner.setDisabledGroup
|
40
|
+
setDisabledGroup = _useSegmentInner.setDisabledGroup,
|
41
|
+
setSelectedSegmentItems = _useSegmentInner.setSelectedSegmentItems;
|
40
42
|
var _useState = React.useState(0),
|
41
43
|
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
42
44
|
index$1 = _useState2[0],
|
@@ -120,6 +122,11 @@ var segmentGroupRoot = function segmentGroupRoot(Root) {
|
|
120
122
|
selectionMode && setSelectionMode(selectionMode);
|
121
123
|
setDisabledGroup(disabled);
|
122
124
|
}, [selectionMode, disabled]);
|
125
|
+
React.useEffect(function () {
|
126
|
+
if (defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.length) {
|
127
|
+
setSelectedSegmentItems(defaultSelected);
|
128
|
+
}
|
129
|
+
}, [defaultSelected]);
|
123
130
|
React.useEffect(function () {
|
124
131
|
var _trackRef$current;
|
125
132
|
// Intersection observer для первого сегмента
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentGroup.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, Children, useEffect } from 'react';\nimport type { SetStateAction, RefObject, MutableRefObject } from 'react';\nimport { safeUseId, useCarousel } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';\nimport { classes, tokens } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as filledBackgroundCSS } from './variations/_filledBackgound/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport type { SegmentGroupProps } from './SegmentGroup.types';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './SegmentGroup.styles';\n\nexport const segmentGroupRoot = (Root: RootProps<HTMLDivElement, SegmentGroupProps>) =>\n forwardRef<HTMLDivElement, SegmentGroupProps>((props, outerRef) => {\n const {\n id,\n selectionMode,\n pilled,\n stretch,\n filledBackground = false,\n disabled = false,\n size,\n view,\n children,\n ...rest\n } = props;\n\n const { setSelectionMode, setDisabledGroup } = useSegmentInner();\n\n const [index, setIndex] = useState(0);\n const [firstItemVisible, setFirstItemVisible] = useState(false);\n const [lastItemVisible, setLastItemVisible] = useState(false);\n\n const uniqId = safeUseId();\n const segmentGroupId = id || uniqId;\n\n const pilledAttr = view !== 'clear' && pilled;\n const filledBackgroundAttr = view !== 'clear' && filledBackground;\n const pilledClass = pilledAttr ? classes.segmentPilled : undefined;\n const filledClass = filledBackgroundAttr ? classes.segmentGroupFilledBackground : undefined;\n const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.segmentStretch : undefined;\n\n const items = Children?.map(children, (child) => child) || [];\n\n const onPrev = useCallback(() => {\n !disabled && setIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : 0));\n }, [disabled]);\n\n const onNext = useCallback(() => {\n !disabled && setIndex((prevIndex) => (prevIndex < items.length - 1 ? prevIndex + 1 : prevIndex));\n }, [disabled]);\n\n const onIntersecting = (setVisible: (value: SetStateAction<boolean>) => void) => (\n entries: IntersectionObserverEntry[],\n ) => {\n /*\n * Пробегаемся по элементам на которых есть слушатель события появления.\n * Если элемент находится в зоне видимости или выходит из нее, меняем значение флага видимости\n */\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setVisible(true);\n } else {\n setVisible(false);\n }\n });\n };\n\n const { scrollRef, trackRef } = useCarousel({\n index,\n axis: 'x',\n scrollAlign: 'start',\n detectActive: true,\n debounceMs: 250,\n onIndexChange: setIndex,\n });\n\n const PreviousButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Предыдущий сегмент\"\n onClick={onPrev}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n >\n <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onPrev],\n );\n\n const NextButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Следующий сегмент\"\n onClick={onNext}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n >\n <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onNext],\n );\n\n useEffect(() => {\n selectionMode && setSelectionMode(selectionMode);\n setDisabledGroup(disabled);\n }, [selectionMode, disabled]);\n\n useEffect(() => {\n // Intersection observer для первого сегмента\n const observeFirstItem = new IntersectionObserver(onIntersecting(setFirstItemVisible), {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n });\n\n // Intersection observer для последнего сегмента\n const observeLastItem = new IntersectionObserver(onIntersecting(setLastItemVisible), {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n });\n\n // получаем список сегментов внутри SegmentGroup\n const childrenArray = Array.from(trackRef.current?.children || []) as Array<Element>;\n if (childrenArray.length) {\n // подписываемся на событие появление внутри SegmentGroup\n observeFirstItem.observe(childrenArray[0]);\n observeLastItem.observe(childrenArray[childrenArray.length - 1]);\n }\n\n return () => {\n // отписываемся от события появления внутри SegmentGroup\n observeFirstItem.disconnect();\n observeLastItem.disconnect();\n };\n }, [children]);\n\n return (\n <Root\n view={view}\n size={size}\n id={segmentGroupId}\n ref={outerRef}\n filledBackground={filledBackgroundAttr}\n disabled={disabled}\n pilled={pilledAttr}\n className={cx(pilledClass, filledClass, stretchClass)}\n {...rest}\n >\n {!firstItemVisible && PreviousButton}\n <StyledContentWrapper ref={scrollRef as RefObject<HTMLDivElement>}>\n <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>{children}</StyledContent>\n </StyledContentWrapper>\n {!lastItemVisible && NextButton}\n </Root>\n );\n });\n\nexport const segmentGroupConfig = {\n name: 'SegmentGroup',\n tag: 'div',\n layout: segmentGroupRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n attrs: true,\n },\n stretch: {\n css: stretchCSS,\n attrs: true,\n },\n filledBackground: {\n css: filledBackgroundCSS,\n attrs: true,\n },\n },\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n};\n"],"names":["segmentGroupRoot","Root","forwardRef","props","outerRef","id","selectionMode","pilled","stretch","_props$filledBackgrou","filledBackground","_props$disabled","disabled","size","view","children","rest","_objectWithoutProperties","_excluded","_useSegmentInner","useSegmentInner","setSelectionMode","setDisabledGroup","_useState","useState","_useState2","_slicedToArray","index","setIndex","_useState3","_useState4","firstItemVisible","setFirstItemVisible","_useState5","_useState6","lastItemVisible","setLastItemVisible","uniqId","safeUseId","segmentGroupId","pilledAttr","filledBackgroundAttr","pilledClass","classes","segmentPilled","undefined","filledClass","segmentGroupFilledBackground","stretchClass","segmentStretch","items","Children","map","child","onPrev","useCallback","prevIndex","onNext","length","onIntersecting","setVisible","entries","forEach","entry","isIntersecting","_useCarousel","useCarousel","axis","scrollAlign","detectActive","debounceMs","onIndexChange","scrollRef","trackRef","PreviousButton","useMemo","React","createElement","StyledArrow","type","onClick","tabIndex","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","useEffect","_trackRef$current","observeFirstItem","IntersectionObserver","root","rootMargin","threshold","observeLastItem","childrenArray","Array","from","current","observe","disconnect","_extends","ref","className","cx","StyledContentWrapper","StyledContent","segmentGroupConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","stretchCSS","filledBackgroundCSS","defaults"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"SegmentGroup.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, Children, useEffect } from 'react';\nimport type { SetStateAction, RefObject, MutableRefObject } from 'react';\nimport { safeUseId, useCarousel } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';\nimport { classes, tokens } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as filledBackgroundCSS } from './variations/_filledBackgound/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport type { SegmentGroupProps } from './SegmentGroup.types';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './SegmentGroup.styles';\n\nexport const segmentGroupRoot = (Root: RootProps<HTMLDivElement, SegmentGroupProps>) =>\n forwardRef<HTMLDivElement, SegmentGroupProps>((props, outerRef) => {\n const {\n id,\n selectionMode,\n pilled,\n stretch,\n filledBackground = false,\n disabled = false,\n size,\n view,\n children,\n defaultSelected,\n ...rest\n } = props;\n\n const { setSelectionMode, setDisabledGroup, setSelectedSegmentItems } = useSegmentInner();\n\n const [index, setIndex] = useState(0);\n const [firstItemVisible, setFirstItemVisible] = useState(false);\n const [lastItemVisible, setLastItemVisible] = useState(false);\n\n const uniqId = safeUseId();\n const segmentGroupId = id || uniqId;\n\n const pilledAttr = view !== 'clear' && pilled;\n const filledBackgroundAttr = view !== 'clear' && filledBackground;\n const pilledClass = pilledAttr ? classes.segmentPilled : undefined;\n const filledClass = filledBackgroundAttr ? classes.segmentGroupFilledBackground : undefined;\n const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.segmentStretch : undefined;\n\n const items = Children?.map(children, (child) => child) || [];\n\n const onPrev = useCallback(() => {\n !disabled && setIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : 0));\n }, [disabled]);\n\n const onNext = useCallback(() => {\n !disabled && setIndex((prevIndex) => (prevIndex < items.length - 1 ? prevIndex + 1 : prevIndex));\n }, [disabled]);\n\n const onIntersecting = (setVisible: (value: SetStateAction<boolean>) => void) => (\n entries: IntersectionObserverEntry[],\n ) => {\n /*\n * Пробегаемся по элементам на которых есть слушатель события появления.\n * Если элемент находится в зоне видимости или выходит из нее, меняем значение флага видимости\n */\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setVisible(true);\n } else {\n setVisible(false);\n }\n });\n };\n\n const { scrollRef, trackRef } = useCarousel({\n index,\n axis: 'x',\n scrollAlign: 'start',\n detectActive: true,\n debounceMs: 250,\n onIndexChange: setIndex,\n });\n\n const PreviousButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Предыдущий сегмент\"\n onClick={onPrev}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n >\n <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onPrev],\n );\n\n const NextButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Следующий сегмент\"\n onClick={onNext}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n >\n <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onNext],\n );\n\n useEffect(() => {\n selectionMode && setSelectionMode(selectionMode);\n setDisabledGroup(disabled);\n }, [selectionMode, disabled]);\n\n useEffect(() => {\n if (defaultSelected?.length) {\n setSelectedSegmentItems(defaultSelected);\n }\n }, [defaultSelected]);\n\n useEffect(() => {\n // Intersection observer для первого сегмента\n const observeFirstItem = new IntersectionObserver(onIntersecting(setFirstItemVisible), {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n });\n\n // Intersection observer для последнего сегмента\n const observeLastItem = new IntersectionObserver(onIntersecting(setLastItemVisible), {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n });\n\n // получаем список сегментов внутри SegmentGroup\n const childrenArray = Array.from(trackRef.current?.children || []) as Array<Element>;\n if (childrenArray.length) {\n // подписываемся на событие появление внутри SegmentGroup\n observeFirstItem.observe(childrenArray[0]);\n observeLastItem.observe(childrenArray[childrenArray.length - 1]);\n }\n\n return () => {\n // отписываемся от события появления внутри SegmentGroup\n observeFirstItem.disconnect();\n observeLastItem.disconnect();\n };\n }, [children]);\n\n return (\n <Root\n view={view}\n size={size}\n id={segmentGroupId}\n ref={outerRef}\n filledBackground={filledBackgroundAttr}\n disabled={disabled}\n pilled={pilledAttr}\n className={cx(pilledClass, filledClass, stretchClass)}\n {...rest}\n >\n {!firstItemVisible && PreviousButton}\n <StyledContentWrapper ref={scrollRef as RefObject<HTMLDivElement>}>\n <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>{children}</StyledContent>\n </StyledContentWrapper>\n {!lastItemVisible && NextButton}\n </Root>\n );\n });\n\nexport const segmentGroupConfig = {\n name: 'SegmentGroup',\n tag: 'div',\n layout: segmentGroupRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n attrs: true,\n },\n stretch: {\n css: stretchCSS,\n attrs: true,\n },\n filledBackground: {\n css: filledBackgroundCSS,\n attrs: true,\n },\n },\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n};\n"],"names":["segmentGroupRoot","Root","forwardRef","props","outerRef","id","selectionMode","pilled","stretch","_props$filledBackgrou","filledBackground","_props$disabled","disabled","size","view","children","defaultSelected","rest","_objectWithoutProperties","_excluded","_useSegmentInner","useSegmentInner","setSelectionMode","setDisabledGroup","setSelectedSegmentItems","_useState","useState","_useState2","_slicedToArray","index","setIndex","_useState3","_useState4","firstItemVisible","setFirstItemVisible","_useState5","_useState6","lastItemVisible","setLastItemVisible","uniqId","safeUseId","segmentGroupId","pilledAttr","filledBackgroundAttr","pilledClass","classes","segmentPilled","undefined","filledClass","segmentGroupFilledBackground","stretchClass","segmentStretch","items","Children","map","child","onPrev","useCallback","prevIndex","onNext","length","onIntersecting","setVisible","entries","forEach","entry","isIntersecting","_useCarousel","useCarousel","axis","scrollAlign","detectActive","debounceMs","onIndexChange","scrollRef","trackRef","PreviousButton","useMemo","React","createElement","StyledArrow","type","onClick","tabIndex","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","useEffect","_trackRef$current","observeFirstItem","IntersectionObserver","root","rootMargin","threshold","observeLastItem","childrenArray","Array","from","current","observe","disconnect","_extends","ref","className","cx","StyledContentWrapper","StyledContent","segmentGroupConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","stretchCSS","filledBackgroundCSS","defaults"],"mappings":"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"}
|
@@ -45,6 +45,7 @@ var SegmentProvider = function SegmentProvider(_ref) {
|
|
45
45
|
}, [selectionMode, setSelectedSegmentItems]);
|
46
46
|
var contextValue = {
|
47
47
|
selectedSegmentItems: selectedSegmentItems,
|
48
|
+
setSelectedSegmentItems: setSelectedSegmentItems,
|
48
49
|
handleSelect: handleSelect,
|
49
50
|
selectionMode: selectionMode,
|
50
51
|
setSelectionMode: setSelectionMode,
|
@@ -52,7 +53,9 @@ var SegmentProvider = function SegmentProvider(_ref) {
|
|
52
53
|
setDisabledGroup: setDisabledGroup
|
53
54
|
};
|
54
55
|
useEffect(function () {
|
55
|
-
|
56
|
+
if (selectionMode === 'single' && (selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.length) > 0) {
|
57
|
+
setSelectedSegmentItems([selectedSegmentItems[0]]);
|
58
|
+
}
|
56
59
|
}, [selectionMode]);
|
57
60
|
return /*#__PURE__*/React.createElement(SegmentContext.Provider, {
|
58
61
|
value: contextValue
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentProvider.js","sources":["../../../../src/components/Segment/SegmentProvider/SegmentProvider.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { SegmentContextType, SegmentSelectionMode } from './SegmentProvider.types';\n\nexport const SegmentContext = createContext<SegmentContextType | undefined>(undefined);\n\nexport const useSegmentInner = () => {\n const context = useContext(SegmentContext);\n if (!context) {\n throw new Error('useSegment must be used within a SegmentProvider');\n }\n return context;\n};\n\nexport const useSegment = () => {\n const { selectedSegmentItems } = useSegmentInner();\n return { selectedSegmentItems };\n};\n\nexport const SegmentProvider: FC<PropsWithChildren> = ({ children }) => {\n const [selectedSegmentItems, setSelectedSegmentItems] = useState<string[]>([]);\n const [selectionMode, setSelectionMode] = useState<SegmentSelectionMode>('single');\n const [disabledGroup, setDisabledGroup] = useState(false);\n\n const handleSelect = useCallback(\n (label: string) => {\n if (selectionMode !== 'multiple') {\n setSelectedSegmentItems((prevSelected) => (prevSelected.includes(label) ? [] : [label]));\n return;\n }\n\n setSelectedSegmentItems((prevSelected) =>\n prevSelected.includes(label) ? prevSelected.filter((item) => item !== label) : [...prevSelected, label],\n );\n },\n [selectionMode, setSelectedSegmentItems],\n );\n\n const contextValue: SegmentContextType = {\n selectedSegmentItems,\n handleSelect,\n selectionMode,\n setSelectionMode,\n disabledGroup,\n setDisabledGroup,\n };\n\n useEffect(() => {\n setSelectedSegmentItems([]);\n }, [selectionMode]);\n\n return <SegmentContext.Provider value={contextValue}>{children}</SegmentContext.Provider>;\n};\n"],"names":["SegmentContext","createContext","undefined","useSegmentInner","context","useContext","Error","useSegment","_useSegmentInner","selectedSegmentItems","SegmentProvider","_ref","children","_useState","useState","_useState2","_slicedToArray","setSelectedSegmentItems","_useState3","_useState4","selectionMode","setSelectionMode","_useState5","_useState6","disabledGroup","setDisabledGroup","handleSelect","useCallback","label","prevSelected","includes","filter","item","concat","_toConsumableArray","contextValue","useEffect","React","createElement","Provider","value"],"mappings":";;;IAKaA,cAAc,gBAAGC,aAAa,CAAiCC,SAAS,EAAC;IAEzEC,eAAe,GAAG,SAAlBA,eAAeA,GAAS;AACjC,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACL,cAAc,CAAC,CAAA;EAC1C,IAAI,CAACI,OAAO,EAAE;AACV,IAAA,MAAM,IAAIE,KAAK,CAAC,kDAAkD,CAAC,CAAA;AACvE,GAAA;AACA,EAAA,OAAOF,OAAO,CAAA;AAClB,EAAC;IAEYG,UAAU,GAAG,SAAbA,UAAUA,GAAS;AAC5B,EAAA,IAAAC,gBAAA,GAAiCL,eAAe,EAAE;IAA1CM,oBAAoB,GAAAD,gBAAA,CAApBC,oBAAoB,CAAA;EAC5B,OAAO;AAAEA,IAAAA,oBAAoB,EAApBA,oBAAAA;GAAsB,CAAA;AACnC,EAAC;IAEYC,eAAsC,GAAG,SAAzCA,eAAsCA,CAAAC,IAAA,EAAqB;AAAA,EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ,CAAA;AAC7D,EAAA,IAAAC,SAAA,GAAwDC,QAAQ,CAAW,EAAE,CAAC;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAvEJ,IAAAA,oBAAoB,GAAAM,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,uBAAuB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AACpD,EAAA,IAAAG,UAAA,GAA0CJ,QAAQ,CAAuB,QAAQ,CAAC;IAAAK,UAAA,GAAAH,cAAA,CAAAE,UAAA,EAAA,CAAA,CAAA;AAA3EE,IAAAA,aAAa,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,gBAAgB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AACtC,EAAA,IAAAG,UAAA,GAA0CR,QAAQ,CAAC,KAAK,CAAC;IAAAS,UAAA,GAAAP,cAAA,CAAAM,UAAA,EAAA,CAAA,CAAA;AAAlDE,IAAAA,aAAa,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,gBAAgB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AAEtC,EAAA,IAAMG,YAAY,GAAGC,WAAW,CAC5B,UAACC,KAAa,EAAK;IACf,IAAIR,aAAa,KAAK,UAAU,EAAE;MAC9BH,uBAAuB,CAAC,UAACY,YAAY,EAAA;QAAA,OAAMA,YAAY,CAACC,QAAQ,CAACF,KAAK,CAAC,GAAG,EAAE,GAAG,CAACA,KAAK,CAAC,CAAA;AAAA,OAAC,CAAC,CAAA;AACxF,MAAA,OAAA;AACJ,KAAA;IAEAX,uBAAuB,CAAC,UAACY,YAAY,EAAA;AAAA,MAAA,OACjCA,YAAY,CAACC,QAAQ,CAACF,KAAK,CAAC,GAAGC,YAAY,CAACE,MAAM,CAAC,UAACC,IAAI,EAAA;QAAA,OAAKA,IAAI,KAAKJ,KAAK,CAAA;OAAC,CAAA,GAAA,EAAA,CAAAK,MAAA,CAAAC,kBAAA,CAAOL,YAAY,CAAA,EAAA,CAAED,KAAK,CAAC,CAAA,CAAA;AAAA,KAC3G,CAAC,CAAA;AACL,GAAC,EACD,CAACR,aAAa,EAAEH,uBAAuB,CAC3C,CAAC,CAAA;AAED,EAAA,IAAMkB,YAAgC,GAAG;AACrC1B,IAAAA,oBAAoB,EAApBA,oBAAoB;
|
1
|
+
{"version":3,"file":"SegmentProvider.js","sources":["../../../../src/components/Segment/SegmentProvider/SegmentProvider.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport type { FC, PropsWithChildren } from 'react';\n\nimport { SegmentContextType, SegmentSelectionMode } from './SegmentProvider.types';\n\nexport const SegmentContext = createContext<SegmentContextType | undefined>(undefined);\n\nexport const useSegmentInner = () => {\n const context = useContext(SegmentContext);\n if (!context) {\n throw new Error('useSegment must be used within a SegmentProvider');\n }\n return context;\n};\n\nexport const useSegment = () => {\n const { selectedSegmentItems } = useSegmentInner();\n return { selectedSegmentItems };\n};\n\nexport const SegmentProvider: FC<PropsWithChildren> = ({ children }) => {\n const [selectedSegmentItems, setSelectedSegmentItems] = useState<string[]>([]);\n const [selectionMode, setSelectionMode] = useState<SegmentSelectionMode>('single');\n const [disabledGroup, setDisabledGroup] = useState(false);\n\n const handleSelect = useCallback(\n (label: string) => {\n if (selectionMode !== 'multiple') {\n setSelectedSegmentItems((prevSelected) => (prevSelected.includes(label) ? [] : [label]));\n return;\n }\n\n setSelectedSegmentItems((prevSelected) =>\n prevSelected.includes(label) ? prevSelected.filter((item) => item !== label) : [...prevSelected, label],\n );\n },\n [selectionMode, setSelectedSegmentItems],\n );\n\n const contextValue: SegmentContextType = {\n selectedSegmentItems,\n setSelectedSegmentItems,\n handleSelect,\n selectionMode,\n setSelectionMode,\n disabledGroup,\n setDisabledGroup,\n };\n\n useEffect(() => {\n if (selectionMode === 'single' && selectedSegmentItems?.length > 0) {\n setSelectedSegmentItems([selectedSegmentItems[0]]);\n }\n }, [selectionMode]);\n\n return <SegmentContext.Provider value={contextValue}>{children}</SegmentContext.Provider>;\n};\n"],"names":["SegmentContext","createContext","undefined","useSegmentInner","context","useContext","Error","useSegment","_useSegmentInner","selectedSegmentItems","SegmentProvider","_ref","children","_useState","useState","_useState2","_slicedToArray","setSelectedSegmentItems","_useState3","_useState4","selectionMode","setSelectionMode","_useState5","_useState6","disabledGroup","setDisabledGroup","handleSelect","useCallback","label","prevSelected","includes","filter","item","concat","_toConsumableArray","contextValue","useEffect","length","React","createElement","Provider","value"],"mappings":";;;IAKaA,cAAc,gBAAGC,aAAa,CAAiCC,SAAS,EAAC;IAEzEC,eAAe,GAAG,SAAlBA,eAAeA,GAAS;AACjC,EAAA,IAAMC,OAAO,GAAGC,UAAU,CAACL,cAAc,CAAC,CAAA;EAC1C,IAAI,CAACI,OAAO,EAAE;AACV,IAAA,MAAM,IAAIE,KAAK,CAAC,kDAAkD,CAAC,CAAA;AACvE,GAAA;AACA,EAAA,OAAOF,OAAO,CAAA;AAClB,EAAC;IAEYG,UAAU,GAAG,SAAbA,UAAUA,GAAS;AAC5B,EAAA,IAAAC,gBAAA,GAAiCL,eAAe,EAAE;IAA1CM,oBAAoB,GAAAD,gBAAA,CAApBC,oBAAoB,CAAA;EAC5B,OAAO;AAAEA,IAAAA,oBAAoB,EAApBA,oBAAAA;GAAsB,CAAA;AACnC,EAAC;IAEYC,eAAsC,GAAG,SAAzCA,eAAsCA,CAAAC,IAAA,EAAqB;AAAA,EAAA,IAAfC,QAAQ,GAAAD,IAAA,CAARC,QAAQ,CAAA;AAC7D,EAAA,IAAAC,SAAA,GAAwDC,QAAQ,CAAW,EAAE,CAAC;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAvEJ,IAAAA,oBAAoB,GAAAM,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,uBAAuB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AACpD,EAAA,IAAAG,UAAA,GAA0CJ,QAAQ,CAAuB,QAAQ,CAAC;IAAAK,UAAA,GAAAH,cAAA,CAAAE,UAAA,EAAA,CAAA,CAAA;AAA3EE,IAAAA,aAAa,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,gBAAgB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AACtC,EAAA,IAAAG,UAAA,GAA0CR,QAAQ,CAAC,KAAK,CAAC;IAAAS,UAAA,GAAAP,cAAA,CAAAM,UAAA,EAAA,CAAA,CAAA;AAAlDE,IAAAA,aAAa,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,gBAAgB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AAEtC,EAAA,IAAMG,YAAY,GAAGC,WAAW,CAC5B,UAACC,KAAa,EAAK;IACf,IAAIR,aAAa,KAAK,UAAU,EAAE;MAC9BH,uBAAuB,CAAC,UAACY,YAAY,EAAA;QAAA,OAAMA,YAAY,CAACC,QAAQ,CAACF,KAAK,CAAC,GAAG,EAAE,GAAG,CAACA,KAAK,CAAC,CAAA;AAAA,OAAC,CAAC,CAAA;AACxF,MAAA,OAAA;AACJ,KAAA;IAEAX,uBAAuB,CAAC,UAACY,YAAY,EAAA;AAAA,MAAA,OACjCA,YAAY,CAACC,QAAQ,CAACF,KAAK,CAAC,GAAGC,YAAY,CAACE,MAAM,CAAC,UAACC,IAAI,EAAA;QAAA,OAAKA,IAAI,KAAKJ,KAAK,CAAA;OAAC,CAAA,GAAA,EAAA,CAAAK,MAAA,CAAAC,kBAAA,CAAOL,YAAY,CAAA,EAAA,CAAED,KAAK,CAAC,CAAA,CAAA;AAAA,KAC3G,CAAC,CAAA;AACL,GAAC,EACD,CAACR,aAAa,EAAEH,uBAAuB,CAC3C,CAAC,CAAA;AAED,EAAA,IAAMkB,YAAgC,GAAG;AACrC1B,IAAAA,oBAAoB,EAApBA,oBAAoB;AACpBQ,IAAAA,uBAAuB,EAAvBA,uBAAuB;AACvBS,IAAAA,YAAY,EAAZA,YAAY;AACZN,IAAAA,aAAa,EAAbA,aAAa;AACbC,IAAAA,gBAAgB,EAAhBA,gBAAgB;AAChBG,IAAAA,aAAa,EAAbA,aAAa;AACbC,IAAAA,gBAAgB,EAAhBA,gBAAAA;GACH,CAAA;AAEDW,EAAAA,SAAS,CAAC,YAAM;AACZ,IAAA,IAAIhB,aAAa,KAAK,QAAQ,IAAI,CAAAX,oBAAoB,KAAA,IAAA,IAApBA,oBAAoB,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAApBA,oBAAoB,CAAE4B,MAAM,IAAG,CAAC,EAAE;AAChEpB,MAAAA,uBAAuB,CAAC,CAACR,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AACtD,KAAA;AACJ,GAAC,EAAE,CAACW,aAAa,CAAC,CAAC,CAAA;AAEnB,EAAA,oBAAOkB,KAAA,CAAAC,aAAA,CAACvC,cAAc,CAACwC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEN,YAAAA;AAAa,GAAA,EAAEvB,QAAkC,CAAC,CAAA;AAC7F;;;;"}
|
@@ -15,7 +15,7 @@ import { base as base$6 } from './variations/_filledBackgound/base.js';
|
|
15
15
|
import { base as base$5 } from './variations/_stretch/base.js';
|
16
16
|
import { StyledArrow, StyledContentWrapper, StyledContent, base } from './SegmentGroup.styles.js';
|
17
17
|
|
18
|
-
var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children"];
|
18
|
+
var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children", "defaultSelected"];
|
19
19
|
var segmentGroupRoot = function segmentGroupRoot(Root) {
|
20
20
|
return /*#__PURE__*/forwardRef(function (props, outerRef) {
|
21
21
|
var id = props.id,
|
@@ -29,10 +29,12 @@ var segmentGroupRoot = function segmentGroupRoot(Root) {
|
|
29
29
|
size = props.size,
|
30
30
|
view = props.view,
|
31
31
|
children = props.children,
|
32
|
+
defaultSelected = props.defaultSelected,
|
32
33
|
rest = _objectWithoutProperties(props, _excluded);
|
33
34
|
var _useSegmentInner = useSegmentInner(),
|
34
35
|
setSelectionMode = _useSegmentInner.setSelectionMode,
|
35
|
-
setDisabledGroup = _useSegmentInner.setDisabledGroup
|
36
|
+
setDisabledGroup = _useSegmentInner.setDisabledGroup,
|
37
|
+
setSelectedSegmentItems = _useSegmentInner.setSelectedSegmentItems;
|
36
38
|
var _useState = useState(0),
|
37
39
|
_useState2 = _slicedToArray(_useState, 2),
|
38
40
|
index = _useState2[0],
|
@@ -116,6 +118,11 @@ var segmentGroupRoot = function segmentGroupRoot(Root) {
|
|
116
118
|
selectionMode && setSelectionMode(selectionMode);
|
117
119
|
setDisabledGroup(disabled);
|
118
120
|
}, [selectionMode, disabled]);
|
121
|
+
useEffect(function () {
|
122
|
+
if (defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.length) {
|
123
|
+
setSelectedSegmentItems(defaultSelected);
|
124
|
+
}
|
125
|
+
}, [defaultSelected]);
|
119
126
|
useEffect(function () {
|
120
127
|
var _trackRef$current;
|
121
128
|
// Intersection observer для первого сегмента
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentGroup.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, Children, useEffect } from 'react';\nimport type { SetStateAction, RefObject, MutableRefObject } from 'react';\nimport { safeUseId, useCarousel } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';\nimport { classes, tokens } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as filledBackgroundCSS } from './variations/_filledBackgound/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport type { SegmentGroupProps } from './SegmentGroup.types';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './SegmentGroup.styles';\n\nexport const segmentGroupRoot = (Root: RootProps<HTMLDivElement, SegmentGroupProps>) =>\n forwardRef<HTMLDivElement, SegmentGroupProps>((props, outerRef) => {\n const {\n id,\n selectionMode,\n pilled,\n stretch,\n filledBackground = false,\n disabled = false,\n size,\n view,\n children,\n ...rest\n } = props;\n\n const { setSelectionMode, setDisabledGroup } = useSegmentInner();\n\n const [index, setIndex] = useState(0);\n const [firstItemVisible, setFirstItemVisible] = useState(false);\n const [lastItemVisible, setLastItemVisible] = useState(false);\n\n const uniqId = safeUseId();\n const segmentGroupId = id || uniqId;\n\n const pilledAttr = view !== 'clear' && pilled;\n const filledBackgroundAttr = view !== 'clear' && filledBackground;\n const pilledClass = pilledAttr ? classes.segmentPilled : undefined;\n const filledClass = filledBackgroundAttr ? classes.segmentGroupFilledBackground : undefined;\n const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.segmentStretch : undefined;\n\n const items = Children?.map(children, (child) => child) || [];\n\n const onPrev = useCallback(() => {\n !disabled && setIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : 0));\n }, [disabled]);\n\n const onNext = useCallback(() => {\n !disabled && setIndex((prevIndex) => (prevIndex < items.length - 1 ? prevIndex + 1 : prevIndex));\n }, [disabled]);\n\n const onIntersecting = (setVisible: (value: SetStateAction<boolean>) => void) => (\n entries: IntersectionObserverEntry[],\n ) => {\n /*\n * Пробегаемся по элементам на которых есть слушатель события появления.\n * Если элемент находится в зоне видимости или выходит из нее, меняем значение флага видимости\n */\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setVisible(true);\n } else {\n setVisible(false);\n }\n });\n };\n\n const { scrollRef, trackRef } = useCarousel({\n index,\n axis: 'x',\n scrollAlign: 'start',\n detectActive: true,\n debounceMs: 250,\n onIndexChange: setIndex,\n });\n\n const PreviousButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Предыдущий сегмент\"\n onClick={onPrev}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n >\n <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onPrev],\n );\n\n const NextButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Следующий сегмент\"\n onClick={onNext}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n >\n <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onNext],\n );\n\n useEffect(() => {\n selectionMode && setSelectionMode(selectionMode);\n setDisabledGroup(disabled);\n }, [selectionMode, disabled]);\n\n useEffect(() => {\n // Intersection observer для первого сегмента\n const observeFirstItem = new IntersectionObserver(onIntersecting(setFirstItemVisible), {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n });\n\n // Intersection observer для последнего сегмента\n const observeLastItem = new IntersectionObserver(onIntersecting(setLastItemVisible), {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n });\n\n // получаем список сегментов внутри SegmentGroup\n const childrenArray = Array.from(trackRef.current?.children || []) as Array<Element>;\n if (childrenArray.length) {\n // подписываемся на событие появление внутри SegmentGroup\n observeFirstItem.observe(childrenArray[0]);\n observeLastItem.observe(childrenArray[childrenArray.length - 1]);\n }\n\n return () => {\n // отписываемся от события появления внутри SegmentGroup\n observeFirstItem.disconnect();\n observeLastItem.disconnect();\n };\n }, [children]);\n\n return (\n <Root\n view={view}\n size={size}\n id={segmentGroupId}\n ref={outerRef}\n filledBackground={filledBackgroundAttr}\n disabled={disabled}\n pilled={pilledAttr}\n className={cx(pilledClass, filledClass, stretchClass)}\n {...rest}\n >\n {!firstItemVisible && PreviousButton}\n <StyledContentWrapper ref={scrollRef as RefObject<HTMLDivElement>}>\n <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>{children}</StyledContent>\n </StyledContentWrapper>\n {!lastItemVisible && NextButton}\n </Root>\n );\n });\n\nexport const segmentGroupConfig = {\n name: 'SegmentGroup',\n tag: 'div',\n layout: segmentGroupRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n attrs: true,\n },\n stretch: {\n css: stretchCSS,\n attrs: true,\n },\n filledBackground: {\n css: filledBackgroundCSS,\n attrs: true,\n },\n },\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n};\n"],"names":["segmentGroupRoot","Root","forwardRef","props","outerRef","id","selectionMode","pilled","stretch","_props$filledBackgrou","filledBackground","_props$disabled","disabled","size","view","children","rest","_objectWithoutProperties","_excluded","_useSegmentInner","useSegmentInner","setSelectionMode","setDisabledGroup","_useState","useState","_useState2","_slicedToArray","index","setIndex","_useState3","_useState4","firstItemVisible","setFirstItemVisible","_useState5","_useState6","lastItemVisible","setLastItemVisible","uniqId","safeUseId","segmentGroupId","pilledAttr","filledBackgroundAttr","pilledClass","classes","segmentPilled","undefined","filledClass","segmentGroupFilledBackground","stretchClass","segmentStretch","items","Children","map","child","onPrev","useCallback","prevIndex","onNext","length","onIntersecting","setVisible","entries","forEach","entry","isIntersecting","_useCarousel","useCarousel","axis","scrollAlign","detectActive","debounceMs","onIndexChange","scrollRef","trackRef","PreviousButton","useMemo","React","createElement","StyledArrow","type","onClick","tabIndex","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","useEffect","_trackRef$current","observeFirstItem","IntersectionObserver","root","rootMargin","threshold","observeLastItem","childrenArray","Array","from","current","observe","disconnect","_extends","ref","className","cx","StyledContentWrapper","StyledContent","segmentGroupConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","stretchCSS","filledBackgroundCSS","defaults"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"SegmentGroup.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useState, Children, useEffect } from 'react';\nimport type { SetStateAction, RefObject, MutableRefObject } from 'react';\nimport { safeUseId, useCarousel } from '@salutejs/plasma-core';\n\nimport type { RootProps } from '../../../../engines/types';\nimport { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';\nimport { classes, tokens } from '../../tokens';\nimport { cx } from '../../../../utils';\nimport { useSegmentInner } from '../../SegmentProvider/SegmentProvider';\n\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as disabledCSS } from './variations/_disabled/base';\nimport { base as pilledCSS } from './variations/_pilled/base';\nimport { base as filledBackgroundCSS } from './variations/_filledBackgound/base';\nimport { base as stretchCSS } from './variations/_stretch/base';\nimport type { SegmentGroupProps } from './SegmentGroup.types';\nimport { StyledArrow, StyledContent, StyledContentWrapper, base } from './SegmentGroup.styles';\n\nexport const segmentGroupRoot = (Root: RootProps<HTMLDivElement, SegmentGroupProps>) =>\n forwardRef<HTMLDivElement, SegmentGroupProps>((props, outerRef) => {\n const {\n id,\n selectionMode,\n pilled,\n stretch,\n filledBackground = false,\n disabled = false,\n size,\n view,\n children,\n defaultSelected,\n ...rest\n } = props;\n\n const { setSelectionMode, setDisabledGroup, setSelectedSegmentItems } = useSegmentInner();\n\n const [index, setIndex] = useState(0);\n const [firstItemVisible, setFirstItemVisible] = useState(false);\n const [lastItemVisible, setLastItemVisible] = useState(false);\n\n const uniqId = safeUseId();\n const segmentGroupId = id || uniqId;\n\n const pilledAttr = view !== 'clear' && pilled;\n const filledBackgroundAttr = view !== 'clear' && filledBackground;\n const pilledClass = pilledAttr ? classes.segmentPilled : undefined;\n const filledClass = filledBackgroundAttr ? classes.segmentGroupFilledBackground : undefined;\n const stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.segmentStretch : undefined;\n\n const items = Children?.map(children, (child) => child) || [];\n\n const onPrev = useCallback(() => {\n !disabled && setIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : 0));\n }, [disabled]);\n\n const onNext = useCallback(() => {\n !disabled && setIndex((prevIndex) => (prevIndex < items.length - 1 ? prevIndex + 1 : prevIndex));\n }, [disabled]);\n\n const onIntersecting = (setVisible: (value: SetStateAction<boolean>) => void) => (\n entries: IntersectionObserverEntry[],\n ) => {\n /*\n * Пробегаемся по элементам на которых есть слушатель события появления.\n * Если элемент находится в зоне видимости или выходит из нее, меняем значение флага видимости\n */\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n setVisible(true);\n } else {\n setVisible(false);\n }\n });\n };\n\n const { scrollRef, trackRef } = useCarousel({\n index,\n axis: 'x',\n scrollAlign: 'start',\n detectActive: true,\n debounceMs: 250,\n onIndexChange: setIndex,\n });\n\n const PreviousButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Предыдущий сегмент\"\n onClick={onPrev}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n >\n <IconDisclosureLeft color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onPrev],\n );\n\n const NextButton = useMemo(\n () => (\n <StyledArrow\n type=\"button\"\n aria-label=\"Следующий сегмент\"\n onClick={onNext}\n tabIndex={disabled ? -1 : 0}\n disabled={disabled}\n >\n <IconDisclosureRight color={`var(${tokens.arrowColor})`} />\n </StyledArrow>\n ),\n [onNext],\n );\n\n useEffect(() => {\n selectionMode && setSelectionMode(selectionMode);\n setDisabledGroup(disabled);\n }, [selectionMode, disabled]);\n\n useEffect(() => {\n if (defaultSelected?.length) {\n setSelectedSegmentItems(defaultSelected);\n }\n }, [defaultSelected]);\n\n useEffect(() => {\n // Intersection observer для первого сегмента\n const observeFirstItem = new IntersectionObserver(onIntersecting(setFirstItemVisible), {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n });\n\n // Intersection observer для последнего сегмента\n const observeLastItem = new IntersectionObserver(onIntersecting(setLastItemVisible), {\n root: null,\n rootMargin: '0px',\n threshold: 0.5,\n });\n\n // получаем список сегментов внутри SegmentGroup\n const childrenArray = Array.from(trackRef.current?.children || []) as Array<Element>;\n if (childrenArray.length) {\n // подписываемся на событие появление внутри SegmentGroup\n observeFirstItem.observe(childrenArray[0]);\n observeLastItem.observe(childrenArray[childrenArray.length - 1]);\n }\n\n return () => {\n // отписываемся от события появления внутри SegmentGroup\n observeFirstItem.disconnect();\n observeLastItem.disconnect();\n };\n }, [children]);\n\n return (\n <Root\n view={view}\n size={size}\n id={segmentGroupId}\n ref={outerRef}\n filledBackground={filledBackgroundAttr}\n disabled={disabled}\n pilled={pilledAttr}\n className={cx(pilledClass, filledClass, stretchClass)}\n {...rest}\n >\n {!firstItemVisible && PreviousButton}\n <StyledContentWrapper ref={scrollRef as RefObject<HTMLDivElement>}>\n <StyledContent ref={trackRef as MutableRefObject<HTMLDivElement | null>}>{children}</StyledContent>\n </StyledContentWrapper>\n {!lastItemVisible && NextButton}\n </Root>\n );\n });\n\nexport const segmentGroupConfig = {\n name: 'SegmentGroup',\n tag: 'div',\n layout: segmentGroupRoot,\n base,\n variations: {\n size: {\n css: sizeCSS,\n },\n view: {\n css: viewCSS,\n },\n disabled: {\n css: disabledCSS,\n attrs: true,\n },\n pilled: {\n css: pilledCSS,\n attrs: true,\n },\n stretch: {\n css: stretchCSS,\n attrs: true,\n },\n filledBackground: {\n css: filledBackgroundCSS,\n attrs: true,\n },\n },\n defaults: {\n view: 'clear',\n size: 'xs',\n },\n};\n"],"names":["segmentGroupRoot","Root","forwardRef","props","outerRef","id","selectionMode","pilled","stretch","_props$filledBackgrou","filledBackground","_props$disabled","disabled","size","view","children","defaultSelected","rest","_objectWithoutProperties","_excluded","_useSegmentInner","useSegmentInner","setSelectionMode","setDisabledGroup","setSelectedSegmentItems","_useState","useState","_useState2","_slicedToArray","index","setIndex","_useState3","_useState4","firstItemVisible","setFirstItemVisible","_useState5","_useState6","lastItemVisible","setLastItemVisible","uniqId","safeUseId","segmentGroupId","pilledAttr","filledBackgroundAttr","pilledClass","classes","segmentPilled","undefined","filledClass","segmentGroupFilledBackground","stretchClass","segmentStretch","items","Children","map","child","onPrev","useCallback","prevIndex","onNext","length","onIntersecting","setVisible","entries","forEach","entry","isIntersecting","_useCarousel","useCarousel","axis","scrollAlign","detectActive","debounceMs","onIndexChange","scrollRef","trackRef","PreviousButton","useMemo","React","createElement","StyledArrow","type","onClick","tabIndex","IconDisclosureLeft","color","concat","tokens","arrowColor","NextButton","IconDisclosureRight","useEffect","_trackRef$current","observeFirstItem","IntersectionObserver","root","rootMargin","threshold","observeLastItem","childrenArray","Array","from","current","observe","disconnect","_extends","ref","className","cx","StyledContentWrapper","StyledContent","segmentGroupConfig","name","tag","layout","base","variations","css","sizeCSS","viewCSS","disabledCSS","attrs","pilledCSS","stretchCSS","filledBackgroundCSS","defaults"],"mappings":"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"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.88.0-canary.
|
3
|
+
"version": "0.88.0-canary.1252.9517095860.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -103,5 +103,5 @@
|
|
103
103
|
"react-popper": "2.3.0",
|
104
104
|
"storeon": "3.1.5"
|
105
105
|
},
|
106
|
-
"gitHead": "
|
106
|
+
"gitHead": "ffd3946e08d57669c89ec19d7cb4bc8c23e6c85e"
|
107
107
|
}
|
@@ -86,7 +86,7 @@ import { Button } from '@salutejs/{{package}}';
|
|
86
86
|
|
87
87
|
export function App() {
|
88
88
|
return (
|
89
|
-
<div style
|
89
|
+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
90
90
|
<Button text="Button" stretching="fixed" />
|
91
91
|
<Button text="Button" stretching="auto" />
|
92
92
|
<Button text="Button" stretching="filled" />
|
@@ -99,7 +99,7 @@ export function App() {
|
|
99
99
|
Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
|
100
100
|
Возможные значения свойства `contentPlacing`:
|
101
101
|
+ `default` – контент центрируется;
|
102
|
-
+ `relaxed` – контент
|
102
|
+
+ `relaxed` – контент распологается по краям.
|
103
103
|
|
104
104
|
```tsx live
|
105
105
|
import React from 'react';
|
@@ -107,7 +107,7 @@ import { Button } from '@salutejs/{{package}}';
|
|
107
107
|
|
108
108
|
export function App() {
|
109
109
|
return (
|
110
|
-
<div style
|
110
|
+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
111
111
|
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
|
112
112
|
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
|
113
113
|
</div>
|
@@ -24,6 +24,11 @@ import { PropsTable, Description } from '@site/src/components';
|
|
24
24
|
Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem.
|
25
25
|
Внутри данного провайдера есть доступ к хуку `useSegment`.
|
26
26
|
|
27
|
+
### Выбранные по умолчанию SegmentItem
|
28
|
+
|
29
|
+
Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`.
|
30
|
+
Оно передается в `SegmentGroup`, в виде массива `value` элеметов.
|
31
|
+
|
27
32
|
```tsx live
|
28
33
|
import React from 'react';
|
29
34
|
import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
|
@@ -37,7 +42,7 @@ export function App() {
|
|
37
42
|
return (
|
38
43
|
<>
|
39
44
|
<div>Выбранные элементы: {selectedSegmentItems.join(', ')}</div>
|
40
|
-
<SegmentGroup
|
45
|
+
<SegmentGroup defaultSelected={['label_1']} view='filled' selectionMode='multiple' filledBackground pilled>
|
41
46
|
{items.map((_, i) => (
|
42
47
|
<SegmentItem
|
43
48
|
label={`Label ${i}`}
|
@@ -53,7 +58,7 @@ export function App() {
|
|
53
58
|
}
|
54
59
|
|
55
60
|
return (
|
56
|
-
<div style
|
61
|
+
<div style={{ display: "block" }} >
|
57
62
|
<SegmentProvider>
|
58
63
|
<SegmentTemplate/>
|
59
64
|
</SegmentProvider>
|
@@ -62,6 +62,7 @@ var SegmentProvider = exports.SegmentProvider = function SegmentProvider(_ref) {
|
|
62
62
|
}, [selectionMode, setSelectedSegmentItems]);
|
63
63
|
var contextValue = {
|
64
64
|
selectedSegmentItems: selectedSegmentItems,
|
65
|
+
setSelectedSegmentItems: setSelectedSegmentItems,
|
65
66
|
handleSelect: handleSelect,
|
66
67
|
selectionMode: selectionMode,
|
67
68
|
setSelectionMode: setSelectionMode,
|
@@ -69,7 +70,9 @@ var SegmentProvider = exports.SegmentProvider = function SegmentProvider(_ref) {
|
|
69
70
|
setDisabledGroup: setDisabledGroup
|
70
71
|
};
|
71
72
|
(0, _react.useEffect)(function () {
|
72
|
-
|
73
|
+
if (selectionMode === 'single' && (selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.length) > 0) {
|
74
|
+
setSelectedSegmentItems([selectedSegmentItems[0]]);
|
75
|
+
}
|
73
76
|
}, [selectionMode]);
|
74
77
|
return /*#__PURE__*/_react["default"].createElement(SegmentContext.Provider, {
|
75
78
|
value: contextValue
|
@@ -18,7 +18,7 @@ var _base4 = /*#__PURE__*/require("./variations/_pilled/base");
|
|
18
18
|
var _base5 = /*#__PURE__*/require("./variations/_filledBackgound/base");
|
19
19
|
var _base6 = /*#__PURE__*/require("./variations/_stretch/base");
|
20
20
|
var _SegmentGroup = /*#__PURE__*/require("./SegmentGroup.styles");
|
21
|
-
var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children"];
|
21
|
+
var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children", "defaultSelected"];
|
22
22
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
23
23
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
24
24
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -43,10 +43,12 @@ var segmentGroupRoot = exports.segmentGroupRoot = function segmentGroupRoot(Root
|
|
43
43
|
size = props.size,
|
44
44
|
view = props.view,
|
45
45
|
children = props.children,
|
46
|
+
defaultSelected = props.defaultSelected,
|
46
47
|
rest = _objectWithoutProperties(props, _excluded);
|
47
48
|
var _useSegmentInner = (0, _SegmentProvider.useSegmentInner)(),
|
48
49
|
setSelectionMode = _useSegmentInner.setSelectionMode,
|
49
|
-
setDisabledGroup = _useSegmentInner.setDisabledGroup
|
50
|
+
setDisabledGroup = _useSegmentInner.setDisabledGroup,
|
51
|
+
setSelectedSegmentItems = _useSegmentInner.setSelectedSegmentItems;
|
50
52
|
var _useState = (0, _react.useState)(0),
|
51
53
|
_useState2 = _slicedToArray(_useState, 2),
|
52
54
|
index = _useState2[0],
|
@@ -130,6 +132,11 @@ var segmentGroupRoot = exports.segmentGroupRoot = function segmentGroupRoot(Root
|
|
130
132
|
selectionMode && setSelectionMode(selectionMode);
|
131
133
|
setDisabledGroup(disabled);
|
132
134
|
}, [selectionMode, disabled]);
|
135
|
+
(0, _react.useEffect)(function () {
|
136
|
+
if (defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.length) {
|
137
|
+
setSelectedSegmentItems(defaultSelected);
|
138
|
+
}
|
139
|
+
}, [defaultSelected]);
|
133
140
|
(0, _react.useEffect)(function () {
|
134
141
|
var _trackRef$current;
|
135
142
|
// Intersection observer для первого сегмента
|
@@ -86,7 +86,7 @@ import { Button } from '@salutejs/{{package}}';
|
|
86
86
|
|
87
87
|
export function App() {
|
88
88
|
return (
|
89
|
-
<div style
|
89
|
+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
90
90
|
<Button text="Button" stretching="fixed" />
|
91
91
|
<Button text="Button" stretching="auto" />
|
92
92
|
<Button text="Button" stretching="filled" />
|
@@ -99,7 +99,7 @@ export function App() {
|
|
99
99
|
Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
|
100
100
|
Возможные значения свойства `contentPlacing`:
|
101
101
|
+ `default` – контент центрируется;
|
102
|
-
+ `relaxed` – контент
|
102
|
+
+ `relaxed` – контент распологается по краям.
|
103
103
|
|
104
104
|
```tsx live
|
105
105
|
import React from 'react';
|
@@ -107,7 +107,7 @@ import { Button } from '@salutejs/{{package}}';
|
|
107
107
|
|
108
108
|
export function App() {
|
109
109
|
return (
|
110
|
-
<div style
|
110
|
+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
111
111
|
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
|
112
112
|
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
|
113
113
|
</div>
|
@@ -24,6 +24,11 @@ import { PropsTable, Description } from '@site/src/components';
|
|
24
24
|
Оберните в `SegmentProvider` компонент, в котором будут использованы SegmentGroup с SegmentItem.
|
25
25
|
Внутри данного провайдера есть доступ к хуку `useSegment`.
|
26
26
|
|
27
|
+
### Выбранные по умолчанию SegmentItem
|
28
|
+
|
29
|
+
Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`.
|
30
|
+
Оно передается в `SegmentGroup`, в виде массива `value` элеметов.
|
31
|
+
|
27
32
|
```tsx live
|
28
33
|
import React from 'react';
|
29
34
|
import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
|
@@ -37,7 +42,7 @@ export function App() {
|
|
37
42
|
return (
|
38
43
|
<>
|
39
44
|
<div>Выбранные элементы: {selectedSegmentItems.join(', ')}</div>
|
40
|
-
<SegmentGroup
|
45
|
+
<SegmentGroup defaultSelected={['label_1']} view='filled' selectionMode='multiple' filledBackground pilled>
|
41
46
|
{items.map((_, i) => (
|
42
47
|
<SegmentItem
|
43
48
|
label={`Label ${i}`}
|
@@ -53,7 +58,7 @@ export function App() {
|
|
53
58
|
}
|
54
59
|
|
55
60
|
return (
|
56
|
-
<div style
|
61
|
+
<div style={{ display: "block" }} >
|
57
62
|
<SegmentProvider>
|
58
63
|
<SegmentTemplate/>
|
59
64
|
</SegmentProvider>
|
@@ -53,6 +53,7 @@ export var SegmentProvider = function SegmentProvider(_ref) {
|
|
53
53
|
}, [selectionMode, setSelectedSegmentItems]);
|
54
54
|
var contextValue = {
|
55
55
|
selectedSegmentItems: selectedSegmentItems,
|
56
|
+
setSelectedSegmentItems: setSelectedSegmentItems,
|
56
57
|
handleSelect: handleSelect,
|
57
58
|
selectionMode: selectionMode,
|
58
59
|
setSelectionMode: setSelectionMode,
|
@@ -60,7 +61,9 @@ export var SegmentProvider = function SegmentProvider(_ref) {
|
|
60
61
|
setDisabledGroup: setDisabledGroup
|
61
62
|
};
|
62
63
|
useEffect(function () {
|
63
|
-
|
64
|
+
if (selectionMode === 'single' && (selectedSegmentItems === null || selectedSegmentItems === void 0 ? void 0 : selectedSegmentItems.length) > 0) {
|
65
|
+
setSelectedSegmentItems([selectedSegmentItems[0]]);
|
66
|
+
}
|
64
67
|
}, [selectionMode]);
|
65
68
|
return /*#__PURE__*/React.createElement(SegmentContext.Provider, {
|
66
69
|
value: contextValue
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children"];
|
1
|
+
var _excluded = ["id", "selectionMode", "pilled", "stretch", "filledBackground", "disabled", "size", "view", "children", "defaultSelected"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
4
4
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
@@ -34,10 +34,12 @@ export var segmentGroupRoot = function segmentGroupRoot(Root) {
|
|
34
34
|
size = props.size,
|
35
35
|
view = props.view,
|
36
36
|
children = props.children,
|
37
|
+
defaultSelected = props.defaultSelected,
|
37
38
|
rest = _objectWithoutProperties(props, _excluded);
|
38
39
|
var _useSegmentInner = useSegmentInner(),
|
39
40
|
setSelectionMode = _useSegmentInner.setSelectionMode,
|
40
|
-
setDisabledGroup = _useSegmentInner.setDisabledGroup
|
41
|
+
setDisabledGroup = _useSegmentInner.setDisabledGroup,
|
42
|
+
setSelectedSegmentItems = _useSegmentInner.setSelectedSegmentItems;
|
41
43
|
var _useState = useState(0),
|
42
44
|
_useState2 = _slicedToArray(_useState, 2),
|
43
45
|
index = _useState2[0],
|
@@ -121,6 +123,11 @@ export var segmentGroupRoot = function segmentGroupRoot(Root) {
|
|
121
123
|
selectionMode && setSelectionMode(selectionMode);
|
122
124
|
setDisabledGroup(disabled);
|
123
125
|
}, [selectionMode, disabled]);
|
126
|
+
useEffect(function () {
|
127
|
+
if (defaultSelected !== null && defaultSelected !== void 0 && defaultSelected.length) {
|
128
|
+
setSelectedSegmentItems(defaultSelected);
|
129
|
+
}
|
130
|
+
}, [defaultSelected]);
|
124
131
|
useEffect(function () {
|
125
132
|
var _trackRef$current;
|
126
133
|
// Intersection observer для первого сегмента
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Segment/SegmentProvider/SegmentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAwB,MAAM,yBAAyB,CAAC;AAEnF,eAAO,MAAM,cAAc,+CAA2D,CAAC;AAEvF,eAAO,MAAM,eAAe,0BAM3B,CAAC;AAEF,eAAO,MAAM,UAAU;;CAGtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,iBAAiB,
|
1
|
+
{"version":3,"file":"SegmentProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Segment/SegmentProvider/SegmentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAwB,MAAM,yBAAyB,CAAC;AAEnF,eAAO,MAAM,cAAc,+CAA2D,CAAC;AAEvF,eAAO,MAAM,eAAe,0BAM3B,CAAC;AAEF,eAAO,MAAM,UAAU;;CAGtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,iBAAiB,CAoCjD,CAAC"}
|
@@ -1,11 +1,12 @@
|
|
1
|
-
import type { SetStateAction } from 'react';
|
1
|
+
import type { Dispatch, SetStateAction } from 'react';
|
2
2
|
export declare type SegmentSelectionMode = 'single' | 'multiple';
|
3
3
|
export declare type SegmentContextType = {
|
4
4
|
disabledGroup: boolean;
|
5
|
-
setDisabledGroup:
|
5
|
+
setDisabledGroup: Dispatch<SetStateAction<boolean>>;
|
6
6
|
selectedSegmentItems: string[];
|
7
|
+
setSelectedSegmentItems: Dispatch<SetStateAction<string[]>>;
|
7
8
|
handleSelect: (label: string) => void;
|
8
9
|
selectionMode: SegmentSelectionMode;
|
9
|
-
setSelectionMode:
|
10
|
+
setSelectionMode: Dispatch<SetStateAction<SegmentSelectionMode>>;
|
10
11
|
};
|
11
12
|
//# sourceMappingURL=SegmentProvider.types.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentProvider.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Segment/SegmentProvider/SegmentProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"SegmentProvider.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Segment/SegmentProvider/SegmentProvider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtD,oBAAY,oBAAoB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEzD,oBAAY,kBAAkB,GAAG;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,oBAAoB,EAAE,MAAM,EAAE,CAAC;IAC/B,uBAAuB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAC5D,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,oBAAoB,CAAC;IACpC,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC,CAAC;CACpE,CAAC"}
|
@@ -3,6 +3,7 @@ import type { RootProps } from '../../../../engines/types';
|
|
3
3
|
import type { SegmentGroupProps } from './SegmentGroup.types';
|
4
4
|
export declare const segmentGroupRoot: (Root: RootProps<HTMLDivElement, SegmentGroupProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
5
5
|
selectionMode?: "multiple" | "single" | undefined;
|
6
|
+
defaultSelected?: string[] | undefined;
|
6
7
|
disabled?: boolean | undefined;
|
7
8
|
stretch?: boolean | undefined;
|
8
9
|
pilled?: boolean | undefined;
|
@@ -15,6 +16,7 @@ export declare const segmentGroupConfig: {
|
|
15
16
|
tag: string;
|
16
17
|
layout: (Root: RootProps<HTMLDivElement, SegmentGroupProps>) => React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
|
17
18
|
selectionMode?: "multiple" | "single" | undefined;
|
19
|
+
defaultSelected?: string[] | undefined;
|
18
20
|
disabled?: boolean | undefined;
|
19
21
|
stretch?: boolean | undefined;
|
20
22
|
pilled?: boolean | undefined;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAC;AAI/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAY3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,eAAO,MAAM,gBAAgB,SAAU,UAAU,cAAc,EAAE,iBAAiB,CAAC
|
1
|
+
{"version":3,"file":"SegmentGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0E,MAAM,OAAO,CAAC;AAI/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAY3D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,eAAO,MAAM,gBAAgB,SAAU,UAAU,cAAc,EAAE,iBAAiB,CAAC;;;;;;;;;wCA4J7E,CAAC;AAEP,eAAO,MAAM,kBAAkB;;;mBA9JQ,UAAU,cAAc,EAAE,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+LlF,CAAC"}
|
@@ -4,6 +4,11 @@ declare type CustomSegmentGroupProps = {
|
|
4
4
|
* Сегмент множественного или одиночного выбора
|
5
5
|
*/
|
6
6
|
selectionMode?: 'multiple' | 'single';
|
7
|
+
/**
|
8
|
+
* Выбранные по умолчанию сегменты.
|
9
|
+
* Передается массив value сегментов, выбранных по умолчанию
|
10
|
+
*/
|
11
|
+
defaultSelected?: Array<string>;
|
7
12
|
/**
|
8
13
|
* Группа сегментов неактивна
|
9
14
|
*/
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentGroup.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,aAAK,uBAAuB,GAAG;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,uBAAuB,CAAC"}
|
1
|
+
{"version":3,"file":"SegmentGroup.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,aAAK,uBAAuB,GAAG;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACtC;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,uBAAuB,CAAC"}
|
@@ -24,6 +24,7 @@ export declare const SegmentGroup: import("react").FunctionComponent<import("../
|
|
24
24
|
};
|
25
25
|
}> & import("react").HTMLAttributes<HTMLDivElement> & {
|
26
26
|
selectionMode?: "multiple" | "single" | undefined;
|
27
|
+
defaultSelected?: string[] | undefined;
|
27
28
|
disabled?: boolean | undefined;
|
28
29
|
stretch?: boolean | undefined;
|
29
30
|
pilled?: boolean | undefined;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Segment/Segment.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,YAAY
|
1
|
+
{"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Segment/Segment.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAAsC,CAAC;AAChE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;oDAAqC,CAAC"}
|
@@ -21,6 +21,7 @@ export declare const SegmentGroup: import("react").FunctionComponent<import("../
|
|
21
21
|
};
|
22
22
|
}> & import("react").HTMLAttributes<HTMLDivElement> & {
|
23
23
|
selectionMode?: "multiple" | "single" | undefined;
|
24
|
+
defaultSelected?: string[] | undefined;
|
24
25
|
disabled?: boolean | undefined;
|
25
26
|
stretch?: boolean | undefined;
|
26
27
|
pilled?: boolean | undefined;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Segment/Segment.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,YAAY
|
1
|
+
{"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Segment/Segment.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAAsC,CAAC;AAChE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;oDAAqC,CAAC"}
|
@@ -21,6 +21,7 @@ export declare const SegmentGroup: import("react").FunctionComponent<import("../
|
|
21
21
|
};
|
22
22
|
}> & import("react").HTMLAttributes<HTMLDivElement> & {
|
23
23
|
selectionMode?: "multiple" | "single" | undefined;
|
24
|
+
defaultSelected?: string[] | undefined;
|
24
25
|
disabled?: boolean | undefined;
|
25
26
|
stretch?: boolean | undefined;
|
26
27
|
pilled?: boolean | undefined;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Segment/Segment.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,YAAY
|
1
|
+
{"version":3,"file":"Segment.d.ts","sourceRoot":"","sources":["../../../../../src/examples/sds_engineer/components/Segment/Segment.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAAsC,CAAC;AAChE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;oDAAqC,CAAC"}
|