@salutejs/plasma-new-hope 0.166.0-canary.1392.11342835439.0 → 0.166.0-canary.1392.11347585113.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Attach/Attach.js +17 -8
- package/cjs/components/Attach/Attach.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/utils/filterItems.js +4 -5
- package/cjs/components/Combobox/ComboboxNew/utils/filterItems.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.css +8 -8
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +9 -9
- package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
- package/cjs/components/Segment/ui/SegmentGroup/{SegmentGroup.styles_1tb4sy2.css → SegmentGroup.styles_zqao76.css} +1 -1
- package/cjs/index.css +8 -8
- package/emotion/cjs/components/Attach/Attach.js +17 -8
- package/emotion/cjs/components/Attach/Attach.template-doc.mdx +69 -0
- package/emotion/cjs/components/Combobox/ComboboxNew/utils/filterItems.js +4 -5
- package/emotion/cjs/components/Segment/Segment.template-doc.mdx +47 -4
- package/emotion/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +8 -8
- package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.js +2 -1
- package/emotion/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +0 -2
- package/emotion/cjs/examples/plasma_b2c/components/Toast/Toast.config.js +5 -5
- package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.js +2 -1
- package/emotion/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +0 -2
- package/emotion/cjs/examples/plasma_web/components/Toast/Toast.config.js +5 -5
- package/emotion/es/components/Attach/Attach.js +17 -8
- package/emotion/es/components/Attach/Attach.template-doc.mdx +69 -0
- package/emotion/es/components/Combobox/ComboboxNew/utils/filterItems.js +4 -5
- package/emotion/es/components/Segment/Segment.template-doc.mdx +47 -4
- package/emotion/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +8 -8
- package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.js +2 -1
- package/emotion/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +0 -2
- package/emotion/es/examples/plasma_b2c/components/Toast/Toast.config.js +5 -5
- package/emotion/es/examples/plasma_web/components/Combobox/Combobox.js +2 -1
- package/emotion/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +0 -2
- package/emotion/es/examples/plasma_web/components/Toast/Toast.config.js +5 -5
- package/es/components/Attach/Attach.js +17 -8
- package/es/components/Attach/Attach.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/utils/filterItems.js +4 -5
- package/es/components/Combobox/ComboboxNew/utils/filterItems.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.css +8 -8
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +9 -9
- package/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map +1 -1
- package/es/components/Segment/ui/SegmentGroup/{SegmentGroup.styles_1tb4sy2.css → SegmentGroup.styles_zqao76.css} +1 -1
- package/es/index.css +8 -8
- package/package.json +2 -2
- package/styled-components/cjs/components/Attach/Attach.js +17 -8
- package/styled-components/cjs/components/Attach/Attach.template-doc.mdx +69 -0
- package/styled-components/cjs/components/Combobox/ComboboxNew/utils/filterItems.js +4 -5
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +47 -4
- package/styled-components/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.js +2 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +0 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.config.js +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.js +2 -1
- package/styled-components/cjs/examples/plasma_web/components/Combobox/Combobox.stories.tsx +0 -2
- package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.config.js +1 -1
- package/styled-components/es/components/Attach/Attach.js +17 -8
- package/styled-components/es/components/Attach/Attach.template-doc.mdx +69 -0
- package/styled-components/es/components/Combobox/ComboboxNew/utils/filterItems.js +4 -5
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +47 -4
- package/styled-components/es/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.js +2 -1
- package/styled-components/es/examples/plasma_b2c/components/Combobox/Combobox.stories.tsx +0 -2
- package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.config.js +1 -1
- package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.js +2 -1
- package/styled-components/es/examples/plasma_web/components/Combobox/Combobox.stories.tsx +0 -2
- package/styled-components/es/examples/plasma_web/components/Toast/Toast.config.js +1 -1
- package/types/components/Attach/Attach.d.ts.map +1 -1
- package/types/components/Attach/Attach.types.d.ts +4 -0
- package/types/components/Attach/Attach.types.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.d.ts +2 -2
- package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +6 -7
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/index.d.ts +2 -0
- package/types/components/Combobox/ComboboxNew/index.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/utils/filterItems.d.ts +2 -2
- package/types/components/Combobox/ComboboxNew/utils/filterItems.d.ts.map +1 -1
- package/types/components/Combobox/index.d.ts +1 -0
- package/types/components/Combobox/index.d.ts.map +1 -1
- package/types/components/Segment/ui/SegmentGroup/SegmentGroup.styles.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts +332 -8
- package/types/examples/plasma_b2c/components/Combobox/Combobox.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Combobox/Combobox.d.ts +332 -8
- package/types/examples/plasma_web/components/Combobox/Combobox.d.ts.map +1 -1
@@ -21,7 +21,7 @@ var addSeparator = require('./utils/addSeparator.js');
|
|
21
21
|
var getFileicon = require('./utils/getFileicon.js');
|
22
22
|
|
23
23
|
var _IconCloseCircleOutli;
|
24
|
-
var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled"];
|
24
|
+
var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled", "id", "name", "onChange", "onClear"];
|
25
25
|
var attachRoot = function attachRoot(Root) {
|
26
26
|
return /*#__PURE__*/React.forwardRef(function (props, outerRef) {
|
27
27
|
var _props$flow = props.flow,
|
@@ -37,6 +37,10 @@ var attachRoot = function attachRoot(Root) {
|
|
37
37
|
style = props.style,
|
38
38
|
isLoading = props.isLoading,
|
39
39
|
disabled = props.disabled,
|
40
|
+
id = props.id,
|
41
|
+
name = props.name,
|
42
|
+
onChange = props.onChange,
|
43
|
+
onClear = props.onClear,
|
40
44
|
rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
|
41
45
|
var innerRef = React.useRef(null);
|
42
46
|
var ref = plasmaCore.useForkRef(outerRef, innerRef);
|
@@ -105,16 +109,22 @@ var attachRoot = function attachRoot(Root) {
|
|
105
109
|
}
|
106
110
|
inputRef.current.click();
|
107
111
|
};
|
108
|
-
var handleChange = function handleChange() {
|
109
|
-
if (!
|
112
|
+
var handleChange = function handleChange(e) {
|
113
|
+
if (!e.target.files) {
|
110
114
|
return;
|
111
115
|
}
|
112
|
-
|
116
|
+
if (onChange) {
|
117
|
+
onChange(e);
|
118
|
+
}
|
119
|
+
setFilename(e.target.files[0].name);
|
113
120
|
};
|
114
121
|
var handleClear = function handleClear() {
|
115
122
|
if (!inputRef.current) {
|
116
123
|
return;
|
117
124
|
}
|
125
|
+
if (onClear) {
|
126
|
+
onClear();
|
127
|
+
}
|
118
128
|
inputRef.current.value = '';
|
119
129
|
setFilename('');
|
120
130
|
setTruncatedFilename('');
|
@@ -129,12 +139,11 @@ var attachRoot = function attachRoot(Root) {
|
|
129
139
|
ref: inputRef,
|
130
140
|
accept: accept,
|
131
141
|
type: "file",
|
132
|
-
id:
|
133
|
-
name:
|
142
|
+
id: id,
|
143
|
+
name: name,
|
134
144
|
onChange: handleChange
|
135
145
|
}), /*#__PURE__*/React.createElement(Attach_styles.StyledHiddenInputHelper, {
|
136
|
-
ref: inputHelperRef
|
137
|
-
id: "attachHiddenInputHelper"
|
146
|
+
ref: inputHelperRef
|
138
147
|
}, filename), /*#__PURE__*/React.createElement(AttachButton.AttachButton, _rollupPluginBabelHelpers.extends({
|
139
148
|
buttonType: buttonType,
|
140
149
|
view: view,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Attach.js","sources":["../../../src/components/Attach/Attach.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { useForkRef, useIsomorphicLayoutEffect } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\nimport { IconCloseCircleOutline } from '../_Icon';\n\nimport { AttachProps } from './Attach.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, StyledHiddenInput, StyledHiddenInputHelper } from './Attach.styles';\nimport { StyledCell } from './ui/Cell/Cell';\nimport { extractExtension, getFileicon, addSeparator, separator } from './utils';\nimport { classes } from './Attach.tokens';\nimport { AttachButton } from './components/AttachButton';\nimport { StyledIconButtonCancel } from './ui/IconButton/IconButton.styles';\n\nexport const attachRoot = (Root: RootProps<HTMLDivElement, AttachProps>) =>\n forwardRef<HTMLDivElement, AttachProps>((props, outerRef) => {\n const {\n flow = 'auto',\n buttonType = 'button',\n hasAttachment = true,\n acceptedFileFormats,\n size,\n view,\n className,\n style,\n isLoading,\n disabled,\n ...rest\n } = props;\n\n const innerRef = useRef<HTMLDivElement>(null);\n const ref = useForkRef(outerRef, innerRef);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const inputHelperRef = useRef<HTMLDivElement | null>(null);\n const cellRef = useRef<HTMLDivElement | null>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n const emptyTextCellWidth = useRef<number | null>(null);\n\n const [filename, setFilename] = useState<string>('');\n const [truncatedFilename, setTruncatedFilename] = useState<string>('');\n\n const horizontalClass = flow === 'horizontal' ? classes.horizontal : undefined;\n const verticalClass = flow === 'vertical' ? classes.vertical : undefined;\n const autoClass = flow === 'auto' ? classes.auto : undefined;\n const cellHiddenClass = truncatedFilename.length === 0 ? classes.cellHidden : undefined;\n\n const accept = acceptedFileFormats?.join(',');\n const extension = extractExtension(filename);\n const cellContentLeft = getFileicon(extension, size);\n\n useEffect(() => {\n emptyTextCellWidth.current = cellRef.current?.offsetWidth || 0;\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n if (\n !cellRef.current ||\n !cellRef.current.parentElement ||\n !inputHelperRef.current ||\n !inputHelperRef.current.textContent ||\n !emptyTextCellWidth.current ||\n !buttonRef.current\n ) {\n return;\n }\n\n const { offsetWidth: textWidth } = inputHelperRef.current;\n const { offsetWidth: buttonWidth } = buttonRef.current;\n const { width: parentWidth, left: parentLeft } = cellRef.current.parentElement.getBoundingClientRect();\n const { left: cellLeft } = cellRef.current.getBoundingClientRect();\n const leftDiff = cellLeft - parentLeft;\n let currentTextWidth = textWidth;\n\n if (\n currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth ||\n currentTextWidth + emptyTextCellWidth.current < buttonWidth\n ) {\n setTruncatedFilename(filename);\n return;\n }\n\n let currFilename = addSeparator(filename, separator);\n for (let i = currFilename.indexOf(separator) - 1; i > 0; i -= 1) {\n if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {\n break;\n }\n\n const left = currFilename.slice(0, i);\n const right = currFilename.slice(i + 1);\n const newFilename = `${left}${right}`;\n inputHelperRef.current.textContent = newFilename;\n currentTextWidth = inputHelperRef.current.offsetWidth;\n\n if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {\n break;\n }\n\n currFilename = newFilename;\n }\n\n inputHelperRef.current.textContent = filename;\n setTruncatedFilename(currFilename);\n });\n\n const handleClick = () => {\n if (!inputRef.current) {\n return;\n }\n\n inputRef.current.click();\n };\n\n const handleChange = () => {\n if (!inputRef.current || !inputRef.current.files) {\n return;\n }\n\n setFilename(inputRef.current.files[0].name);\n };\n\n const handleClear = () => {\n if (!inputRef.current) {\n return;\n }\n\n inputRef.current.value = '';\n setFilename('');\n setTruncatedFilename('');\n };\n\n return (\n <Root\n className={cx(horizontalClass, verticalClass, autoClass, className)}\n style={style}\n size={size}\n view={view}\n ref={ref}\n >\n <StyledHiddenInput\n ref={inputRef}\n accept={accept}\n type=\"file\"\n id=\"attachHiddenInput\"\n name=\"attachHiddenInput\"\n onChange={handleChange}\n />\n <StyledHiddenInputHelper ref={inputHelperRef} id=\"attachHiddenInputHelper\">\n {filename}\n </StyledHiddenInputHelper>\n\n <AttachButton\n buttonType={buttonType}\n view={view}\n size={size}\n onClick={handleClick}\n isLoading={isLoading}\n disabled={disabled}\n ref={buttonRef}\n {...rest}\n />\n {hasAttachment && (\n <StyledCell\n stretching=\"fixed\"\n className={cellHiddenClass}\n ref={cellRef}\n size={size}\n title={truncatedFilename}\n contentLeft={cellContentLeft}\n contentRight={\n <StyledIconButtonCancel view={view} size={size} onClick={handleClear}>\n <IconCloseCircleOutline size=\"xs\" color=\"inherit\" />\n </StyledIconButtonCancel>\n }\n />\n )}\n </Root>\n );\n });\n\nexport const attachConfig = {\n name: 'Attach',\n tag: 'div',\n layout: attachRoot,\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":["attachRoot","Root","forwardRef","props","outerRef","_props$flow","flow","_props$buttonType","buttonType","_props$hasAttachment","hasAttachment","acceptedFileFormats","size","view","className","style","isLoading","disabled","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","inputRef","inputHelperRef","cellRef","buttonRef","emptyTextCellWidth","_useState","useState","_useState2","_slicedToArray","filename","setFilename","_useState3","_useState4","truncatedFilename","setTruncatedFilename","horizontalClass","classes","horizontal","undefined","verticalClass","vertical","autoClass","auto","cellHiddenClass","length","cellHidden","accept","join","extension","extractExtension","cellContentLeft","getFileicon","useEffect","_cellRef$current","current","offsetWidth","useIsomorphicLayoutEffect","parentElement","textContent","textWidth","buttonWidth","_cellRef$current$pare","getBoundingClientRect","parentWidth","width","parentLeft","left","_cellRef$current$getB","cellLeft","leftDiff","currentTextWidth","currFilename","addSeparator","separator","i","indexOf","slice","right","newFilename","concat","handleClick","click","handleChange","files","name","handleClear","value","React","createElement","cx","StyledHiddenInput","type","id","onChange","StyledHiddenInputHelper","AttachButton","_extends","onClick","StyledCell","stretching","title","contentLeft","contentRight","StyledIconButtonCancel","_IconCloseCircleOutli","IconCloseCircleOutline","color","attachConfig","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Attach.js","sources":["../../../src/components/Attach/Attach.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { ChangeEvent } from 'react';\nimport { useForkRef, useIsomorphicLayoutEffect } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\nimport { IconCloseCircleOutline } from '../_Icon';\n\nimport { AttachProps } from './Attach.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, StyledHiddenInput, StyledHiddenInputHelper } from './Attach.styles';\nimport { StyledCell } from './ui/Cell/Cell';\nimport { extractExtension, getFileicon, addSeparator, separator } from './utils';\nimport { classes } from './Attach.tokens';\nimport { AttachButton } from './components/AttachButton';\nimport { StyledIconButtonCancel } from './ui/IconButton/IconButton.styles';\n\nexport const attachRoot = (Root: RootProps<HTMLDivElement, AttachProps>) =>\n forwardRef<HTMLDivElement, AttachProps>((props, outerRef) => {\n const {\n flow = 'auto',\n buttonType = 'button',\n hasAttachment = true,\n acceptedFileFormats,\n size,\n view,\n className,\n style,\n isLoading,\n disabled,\n id,\n name,\n onChange,\n onClear,\n ...rest\n } = props;\n\n const innerRef = useRef<HTMLDivElement>(null);\n const ref = useForkRef(outerRef, innerRef);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const inputHelperRef = useRef<HTMLDivElement | null>(null);\n const cellRef = useRef<HTMLDivElement | null>(null);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n const emptyTextCellWidth = useRef<number | null>(null);\n\n const [filename, setFilename] = useState<string>('');\n const [truncatedFilename, setTruncatedFilename] = useState<string>('');\n\n const horizontalClass = flow === 'horizontal' ? classes.horizontal : undefined;\n const verticalClass = flow === 'vertical' ? classes.vertical : undefined;\n const autoClass = flow === 'auto' ? classes.auto : undefined;\n const cellHiddenClass = truncatedFilename.length === 0 ? classes.cellHidden : undefined;\n\n const accept = acceptedFileFormats?.join(',');\n const extension = extractExtension(filename);\n const cellContentLeft = getFileicon(extension, size);\n\n useEffect(() => {\n emptyTextCellWidth.current = cellRef.current?.offsetWidth || 0;\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n if (\n !cellRef.current ||\n !cellRef.current.parentElement ||\n !inputHelperRef.current ||\n !inputHelperRef.current.textContent ||\n !emptyTextCellWidth.current ||\n !buttonRef.current\n ) {\n return;\n }\n\n const { offsetWidth: textWidth } = inputHelperRef.current;\n const { offsetWidth: buttonWidth } = buttonRef.current;\n const { width: parentWidth, left: parentLeft } = cellRef.current.parentElement.getBoundingClientRect();\n const { left: cellLeft } = cellRef.current.getBoundingClientRect();\n const leftDiff = cellLeft - parentLeft;\n let currentTextWidth = textWidth;\n\n if (\n currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth ||\n currentTextWidth + emptyTextCellWidth.current < buttonWidth\n ) {\n setTruncatedFilename(filename);\n return;\n }\n\n let currFilename = addSeparator(filename, separator);\n for (let i = currFilename.indexOf(separator) - 1; i > 0; i -= 1) {\n if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {\n break;\n }\n\n const left = currFilename.slice(0, i);\n const right = currFilename.slice(i + 1);\n const newFilename = `${left}${right}`;\n inputHelperRef.current.textContent = newFilename;\n currentTextWidth = inputHelperRef.current.offsetWidth;\n\n if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {\n break;\n }\n\n currFilename = newFilename;\n }\n\n inputHelperRef.current.textContent = filename;\n setTruncatedFilename(currFilename);\n });\n\n const handleClick = () => {\n if (!inputRef.current) {\n return;\n }\n\n inputRef.current.click();\n };\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n if (!e.target.files) {\n return;\n }\n\n if (onChange) {\n onChange(e);\n }\n\n setFilename(e.target.files[0].name);\n };\n\n const handleClear = () => {\n if (!inputRef.current) {\n return;\n }\n\n if (onClear) {\n onClear();\n }\n\n inputRef.current.value = '';\n setFilename('');\n setTruncatedFilename('');\n };\n\n return (\n <Root\n className={cx(horizontalClass, verticalClass, autoClass, className)}\n style={style}\n size={size}\n view={view}\n ref={ref}\n >\n <StyledHiddenInput\n ref={inputRef}\n accept={accept}\n type=\"file\"\n id={id}\n name={name}\n onChange={handleChange}\n />\n <StyledHiddenInputHelper ref={inputHelperRef}>{filename}</StyledHiddenInputHelper>\n\n <AttachButton\n buttonType={buttonType}\n view={view}\n size={size}\n onClick={handleClick}\n isLoading={isLoading}\n disabled={disabled}\n ref={buttonRef}\n {...rest}\n />\n {hasAttachment && (\n <StyledCell\n stretching=\"fixed\"\n className={cellHiddenClass}\n ref={cellRef}\n size={size}\n title={truncatedFilename}\n contentLeft={cellContentLeft}\n contentRight={\n <StyledIconButtonCancel view={view} size={size} onClick={handleClear}>\n <IconCloseCircleOutline size=\"xs\" color=\"inherit\" />\n </StyledIconButtonCancel>\n }\n />\n )}\n </Root>\n );\n });\n\nexport const attachConfig = {\n name: 'Attach',\n tag: 'div',\n layout: attachRoot,\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":["attachRoot","Root","forwardRef","props","outerRef","_props$flow","flow","_props$buttonType","buttonType","_props$hasAttachment","hasAttachment","acceptedFileFormats","size","view","className","style","isLoading","disabled","id","name","onChange","onClear","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","inputRef","inputHelperRef","cellRef","buttonRef","emptyTextCellWidth","_useState","useState","_useState2","_slicedToArray","filename","setFilename","_useState3","_useState4","truncatedFilename","setTruncatedFilename","horizontalClass","classes","horizontal","undefined","verticalClass","vertical","autoClass","auto","cellHiddenClass","length","cellHidden","accept","join","extension","extractExtension","cellContentLeft","getFileicon","useEffect","_cellRef$current","current","offsetWidth","useIsomorphicLayoutEffect","parentElement","textContent","textWidth","buttonWidth","_cellRef$current$pare","getBoundingClientRect","parentWidth","width","parentLeft","left","_cellRef$current$getB","cellLeft","leftDiff","currentTextWidth","currFilename","addSeparator","separator","i","indexOf","slice","right","newFilename","concat","handleClick","click","handleChange","e","target","files","handleClear","value","React","createElement","cx","StyledHiddenInput","type","StyledHiddenInputHelper","AttachButton","_extends","onClick","StyledCell","stretching","title","contentLeft","contentRight","StyledIconButtonCancel","_IconCloseCircleOutli","IconCloseCircleOutline","color","attachConfig","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
|
@@ -13,15 +13,15 @@ var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabel
|
|
13
13
|
// Не мутирует исходные данные.
|
14
14
|
var filterItems = function filterItems(items, textValue, currentLabel, customFilter) {
|
15
15
|
if (!textValue || textValue === currentLabel) return items;
|
16
|
-
var defaultFilter = function defaultFilter(
|
17
|
-
return label.toLowerCase().includes(value.toLowerCase());
|
16
|
+
var defaultFilter = function defaultFilter(item, value) {
|
17
|
+
return item.label.toLowerCase().includes(value.toLowerCase());
|
18
18
|
};
|
19
19
|
var filter = customFilter || defaultFilter;
|
20
20
|
var dfs = function dfs(items) {
|
21
21
|
var newItems = [];
|
22
22
|
items.forEach(function (item) {
|
23
23
|
if (item.items) {
|
24
|
-
if (filter(item
|
24
|
+
if (filter(item, textValue)) {
|
25
25
|
newItems.push(item);
|
26
26
|
return;
|
27
27
|
}
|
@@ -31,13 +31,12 @@ var filterItems = function filterItems(items, textValue, currentLabel, customFil
|
|
31
31
|
items: res
|
32
32
|
}));
|
33
33
|
}
|
34
|
-
} else if (filter(item
|
34
|
+
} else if (filter(item, textValue)) {
|
35
35
|
newItems.push(item);
|
36
36
|
}
|
37
37
|
});
|
38
38
|
return newItems;
|
39
39
|
};
|
40
|
-
dfs(items);
|
41
40
|
return dfs(items);
|
42
41
|
};
|
43
42
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"filterItems.js","sources":["../../../../../src/components/Combobox/ComboboxNew/utils/filterItems.ts"],"sourcesContent":["import { ItemOptionTransformed } from '../ui/Inner/ui/Item/Item.types';\n\n// Утилита, возвращающая отфильтрованное дерево items.\n// Фильтрация происходит как по названиям категорий, так и по названиям конечных элементов.\n// По дефолту регистр игнорируется. Но можно прокинуть свою функцию для кастомной фильтрации.\n// Фильтрация отключается в 2 случаях:\n// 1) При пустом инпуте (юзер пока еще не ввел значение или уже очистил);\n// 2) Если значение инпута совпадает с выбранным элементом (когда юзер выбрал айтем, но потом решил снова открыть);\n// Не мутирует исходные данные.\nexport const filterItems = (\n items: Array<ItemOptionTransformed>,\n textValue: string,\n currentLabel: string,\n customFilter?: (
|
1
|
+
{"version":3,"file":"filterItems.js","sources":["../../../../../src/components/Combobox/ComboboxNew/utils/filterItems.ts"],"sourcesContent":["import { ItemOptionTransformed, ItemOption } from '../ui/Inner/ui/Item/Item.types';\n\n// Утилита, возвращающая отфильтрованное дерево items.\n// Фильтрация происходит как по названиям категорий, так и по названиям конечных элементов.\n// По дефолту регистр игнорируется. Но можно прокинуть свою функцию для кастомной фильтрации.\n// Фильтрация отключается в 2 случаях:\n// 1) При пустом инпуте (юзер пока еще не ввел значение или уже очистил);\n// 2) Если значение инпута совпадает с выбранным элементом (когда юзер выбрал айтем, но потом решил снова открыть);\n// Не мутирует исходные данные.\nexport const filterItems = (\n items: Array<ItemOptionTransformed>,\n textValue: string,\n currentLabel: string,\n customFilter?: (item: ItemOption, value: string) => boolean,\n): Array<ItemOptionTransformed> => {\n if (!textValue || textValue === currentLabel) return items;\n\n const defaultFilter = (item: ItemOption, value: string) => item.label.toLowerCase().includes(value.toLowerCase());\n\n const filter = customFilter || defaultFilter;\n\n const dfs = (items: Array<ItemOptionTransformed>) => {\n const newItems: Array<ItemOptionTransformed> = [];\n\n items.forEach((item) => {\n if (item.items) {\n if (filter(item, textValue)) {\n newItems.push(item);\n return;\n }\n\n const res = dfs(item.items);\n\n if (res.length > 0) {\n newItems.push({ ...item, items: res });\n }\n } else if (filter(item, textValue)) {\n newItems.push(item);\n }\n });\n\n return newItems;\n };\n\n return dfs(items);\n};\n"],"names":["filterItems","items","textValue","currentLabel","customFilter","defaultFilter","item","value","label","toLowerCase","includes","filter","dfs","newItems","forEach","push","res","length","_objectSpread"],"mappings":";;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,WAAW,GAAG,SAAdA,WAAWA,CACpBC,KAAmC,EACnCC,SAAiB,EACjBC,YAAoB,EACpBC,YAA2D,EAC5B;EAC/B,IAAI,CAACF,SAAS,IAAIA,SAAS,KAAKC,YAAY,EAAE,OAAOF,KAAK,CAAA;AAE1D,EAAA,IAAMI,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,IAAgB,EAAEC,KAAa,EAAA;AAAA,IAAA,OAAKD,IAAI,CAACE,KAAK,CAACC,WAAW,EAAE,CAACC,QAAQ,CAACH,KAAK,CAACE,WAAW,EAAE,CAAC,CAAA;AAAA,GAAA,CAAA;AAEjH,EAAA,IAAME,MAAM,GAAGP,YAAY,IAAIC,aAAa,CAAA;AAE5C,EAAA,IAAMO,GAAG,GAAG,SAANA,GAAGA,CAAIX,KAAmC,EAAK;IACjD,IAAMY,QAAsC,GAAG,EAAE,CAAA;AAEjDZ,IAAAA,KAAK,CAACa,OAAO,CAAC,UAACR,IAAI,EAAK;MACpB,IAAIA,IAAI,CAACL,KAAK,EAAE;AACZ,QAAA,IAAIU,MAAM,CAACL,IAAI,EAAEJ,SAAS,CAAC,EAAE;AACzBW,UAAAA,QAAQ,CAACE,IAAI,CAACT,IAAI,CAAC,CAAA;AACnB,UAAA,OAAA;AACJ,SAAA;AAEA,QAAA,IAAMU,GAAG,GAAGJ,GAAG,CAACN,IAAI,CAACL,KAAK,CAAC,CAAA;AAE3B,QAAA,IAAIe,GAAG,CAACC,MAAM,GAAG,CAAC,EAAE;AAChBJ,UAAAA,QAAQ,CAACE,IAAI,CAAAG,uCAAA,CAAAA,uCAAA,KAAMZ,IAAI,CAAA,EAAA,EAAA,EAAA;AAAEL,YAAAA,KAAK,EAAEe,GAAAA;AAAG,WAAA,CAAE,CAAC,CAAA;AAC1C,SAAA;OACH,MAAM,IAAIL,MAAM,CAACL,IAAI,EAAEJ,SAAS,CAAC,EAAE;AAChCW,QAAAA,QAAQ,CAACE,IAAI,CAACT,IAAI,CAAC,CAAA;AACvB,OAAA;AACJ,KAAC,CAAC,CAAA;AAEF,IAAA,OAAOO,QAAQ,CAAA;GAClB,CAAA;EAED,OAAOD,GAAG,CAACX,KAAK,CAAC,CAAA;AACrB;;;;"}
|
@@ -14,11 +14,11 @@
|
|
14
14
|
|
15
15
|
.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_spuzt9m__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_sin9wo2__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
|
16
16
|
|
17
|
-
.
|
18
|
-
.
|
19
|
-
.
|
20
|
-
.
|
21
|
-
.
|
22
|
-
.
|
23
|
-
.
|
24
|
-
.
|
17
|
+
.SegmentGroup_styles_zqao76_b2sori2__a2d03c15{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}.SegmentGroup_styles_zqao76_b2sori2__a2d03c15.SegmentGroup_styles_zqao76_segmentVertical__a2d03c15{max-width:none;max-height:100%;}.SegmentGroup_styles_zqao76_b2sori2__a2d03c15:before{border-radius:var(--plasma-segment-group-border-radius);}
|
18
|
+
.SegmentGroup_styles_zqao76_sin9wo2__a2d03c15{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}
|
19
|
+
.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15{position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15::-webkit-scrollbar{display:none;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15 .SegmentGroup_styles_zqao76_sin9wo2__a2d03c15{max-width:none;}
|
20
|
+
.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15.SegmentGroup_styles_zqao76_focusVisible__a2d03c15:focus::before,.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15[disabled]{cursor:not-allowed;}
|
21
|
+
.SegmentGroup_styles_zqao76_s3pgccr__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-arrow-padding);padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;}
|
22
|
+
.SegmentGroup_styles_zqao76_sax6mvm__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-arrow-padding);padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;}
|
23
|
+
.SegmentGroup_styles_zqao76_s1n81rr8__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-bottom:0;margin-bottom:0.1875rem;}
|
24
|
+
.SegmentGroup_styles_zqao76_s7ukuvj__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-top:0;margin-top:0.1875rem;}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import './SegmentGroup.
|
1
|
+
import './SegmentGroup.styles_zqao76.css';
|
2
2
|
'use strict';
|
3
3
|
|
4
4
|
Object.defineProperty(exports, '__esModule', { value: true });
|
@@ -21,34 +21,34 @@ var StyledArrow = /*#__PURE__*/react.styled('button')({
|
|
21
21
|
"class": "s1qf4oye",
|
22
22
|
propsAsIs: false
|
23
23
|
});
|
24
|
-
var
|
24
|
+
var _exp6 = function _exp6() {
|
25
25
|
return StyledArrow;
|
26
26
|
};
|
27
|
-
var StyledLeftArrow = /*#__PURE__*/react.styled(
|
27
|
+
var StyledLeftArrow = /*#__PURE__*/react.styled(_exp6())({
|
28
28
|
name: "StyledLeftArrow",
|
29
29
|
"class": "s3pgccr",
|
30
30
|
propsAsIs: true
|
31
31
|
});
|
32
|
-
var
|
32
|
+
var _exp8 = function _exp8() {
|
33
33
|
return StyledArrow;
|
34
34
|
};
|
35
|
-
var StyledRightArrow = /*#__PURE__*/react.styled(
|
35
|
+
var StyledRightArrow = /*#__PURE__*/react.styled(_exp8())({
|
36
36
|
name: "StyledRightArrow",
|
37
37
|
"class": "sax6mvm",
|
38
38
|
propsAsIs: true
|
39
39
|
});
|
40
|
-
var
|
40
|
+
var _exp10 = function _exp10() {
|
41
41
|
return StyledArrow;
|
42
42
|
};
|
43
|
-
var StyledTopArrow = /*#__PURE__*/react.styled(
|
43
|
+
var StyledTopArrow = /*#__PURE__*/react.styled(_exp10())({
|
44
44
|
name: "StyledTopArrow",
|
45
45
|
"class": "s1n81rr8",
|
46
46
|
propsAsIs: true
|
47
47
|
});
|
48
|
-
var
|
48
|
+
var _exp12 = function _exp12() {
|
49
49
|
return StyledArrow;
|
50
50
|
};
|
51
|
-
var StyledBottomArrow = /*#__PURE__*/react.styled(
|
51
|
+
var StyledBottomArrow = /*#__PURE__*/react.styled(_exp12())({
|
52
52
|
name: "StyledBottomArrow",
|
53
53
|
"class": "s7ukuvj",
|
54
54
|
propsAsIs: true
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SegmentGroup.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { classes, tokens } from '../../tokens';\n\nexport const base = css`\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n\n &:before {\n border-radius: var(${tokens.groupBorderRadius});\n }\n`;\n\nexport const StyledContent = styled.div`\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n max-width: 100%;\n`;\n\nexport const StyledContentWrapper = styled.div`\n position: relative;\n height: 100%;\n width: 100%;\n\n display: flex;\n align-items: center;\n\n &.${classes.segmentGroupClipScroll} {\n overflow: scroll;\n scroll-padding: 0.25rem;\n overscroll-behavior: contain;\n\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n\n ${StyledContent} {\n max-width: none;\n }\n }\n`;\n\nexport const StyledArrow = styled.button`\n display: flex;\n cursor: pointer;\n border: none;\n background-color: transparent;\n outline: none;\n\n ${addFocus({\n outlineSize: '0.063rem',\n outlineOffset: '-0.125rem',\n outlineColor: `var(${tokens.outlineFocusColor})`,\n outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n })};\n\n &[disabled] {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledLeftArrow = styled(StyledArrow)`\n padding: var(${tokens.groupArrowPadding});\n padding-right: 0;\n margin-right: 0.1875rem;\n margin-left: 0.125rem;\n`;\n\nexport const StyledRightArrow = styled(StyledArrow)`\n padding: var(${tokens.groupArrowPadding});\n padding-left: 0;\n margin-left: 0.1875rem;\n margin-right: 0.125rem;\n`;\n\nexport const StyledTopArrow = styled(StyledArrow)`\n padding: var(${tokens.groupVerticalArrowPadding});\n padding-bottom: 0;\n margin-bottom: 0.1875rem;\n`;\n\nexport const StyledBottomArrow = styled(StyledArrow)`\n padding: var(${tokens.groupVerticalArrowPadding});\n padding-top: 0;\n margin-top: 0.1875rem;\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","StyledArrow","
|
1
|
+
{"version":3,"file":"SegmentGroup.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { classes, tokens } from '../../tokens';\n\nexport const base = css`\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n\n &.${classes.segmentVertical} {\n max-width: none;\n max-height: 100%;\n }\n\n &:before {\n border-radius: var(${tokens.groupBorderRadius});\n }\n`;\n\nexport const StyledContent = styled.div`\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n max-width: 100%;\n`;\n\nexport const StyledContentWrapper = styled.div`\n position: relative;\n height: 100%;\n width: 100%;\n\n display: flex;\n align-items: center;\n\n &.${classes.segmentGroupClipScroll} {\n overflow: scroll;\n scroll-padding: 0.25rem;\n overscroll-behavior: contain;\n\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n\n ${StyledContent} {\n max-width: none;\n }\n }\n`;\n\nexport const StyledArrow = styled.button`\n display: flex;\n cursor: pointer;\n border: none;\n background-color: transparent;\n outline: none;\n\n ${addFocus({\n outlineSize: '0.063rem',\n outlineOffset: '-0.125rem',\n outlineColor: `var(${tokens.outlineFocusColor})`,\n outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n })};\n\n &[disabled] {\n cursor: not-allowed;\n }\n`;\n\nexport const StyledLeftArrow = styled(StyledArrow)`\n padding: var(${tokens.groupArrowPadding});\n padding-right: 0;\n margin-right: 0.1875rem;\n margin-left: 0.125rem;\n`;\n\nexport const StyledRightArrow = styled(StyledArrow)`\n padding: var(${tokens.groupArrowPadding});\n padding-left: 0;\n margin-left: 0.1875rem;\n margin-right: 0.125rem;\n`;\n\nexport const StyledTopArrow = styled(StyledArrow)`\n padding: var(${tokens.groupVerticalArrowPadding});\n padding-bottom: 0;\n margin-bottom: 0.1875rem;\n`;\n\nexport const StyledBottomArrow = styled(StyledArrow)`\n padding: var(${tokens.groupVerticalArrowPadding});\n padding-top: 0;\n margin-top: 0.1875rem;\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","StyledArrow","_exp6","StyledLeftArrow","_exp8","StyledRightArrow","_exp10","StyledTopArrow","_exp12","StyledBottomArrow"],"mappings":";;;;;;AAMO,IAAMA,IAAI,GAahB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAsBzC,EAAA;AAEM,IAAME,WAAW,gBAAGL,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAiBhC,EAAA;AAAC,IAAAG,KAAA,GApEgBA,SAoEhBA,KAAAA,GAAA;AAAA,EAAA,OAEoCD,WAAW,CAAA;AAAA,CAAA,CAAA;AAA1C,IAAME,eAAe,gBAAGP,YAAM,CAAAM,KAAA,EAAA,CAAA,CAAA;AAAAL,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAKpC,EAAA;AAAC,IAAAK,KAAA,GA3EgBA,SA2EhBA,KAAAA,GAAA;AAAA,EAAA,OAEqCH,WAAW,CAAA;AAAA,CAAA,CAAA;AAA3C,IAAMI,gBAAgB,gBAAGT,YAAM,CAAAQ,KAAA,EAAA,CAAA,CAAA;AAAAP,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAKrC,EAAA;AAAC,IAAAO,MAAA,GAlFgBA,SAkFhBA,MAAAA,GAAA;AAAA,EAAA,OAEmCL,WAAW,CAAA;AAAA,CAAA,CAAA;AAAzC,IAAMM,cAAc,gBAAGX,YAAM,CAAAU,MAAA,EAAA,CAAA,CAAA;AAAAT,EAAAA,IAAA,EAAA,gBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAInC,EAAA;AAAC,IAAAS,MAAA,GAxFgBA,SAwFhBA,MAAAA,GAAA;AAAA,EAAA,OAEsCP,WAAW,CAAA;AAAA,CAAA,CAAA;AAA5C,IAAMQ,iBAAiB,gBAAGb,YAAM,CAAAY,MAAA,EAAA,CAAA,CAAA;AAAAX,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAItC;;;;;;;;;;;"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
.b2sori2{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}.b2sori2:before{border-radius:var(--plasma-segment-group-border-radius);}
|
1
|
+
.b2sori2{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}.b2sori2.segment-vertical{max-width:none;max-height:100%;}.b2sori2:before{border-radius:var(--plasma-segment-group-border-radius);}
|
2
2
|
.sin9wo2{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}
|
3
3
|
.spuzt9m{position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.spuzt9m.segment-group-clip-scroll{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.spuzt9m.segment-group-clip-scroll::-webkit-scrollbar{display:none;}.spuzt9m.segment-group-clip-scroll .sin9wo2{max-width:none;}
|
4
4
|
.s1qf4oye{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.s1qf4oye::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.s1qf4oye.focus-visible:focus::before,.s1qf4oye[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.s1qf4oye[disabled]{cursor:not-allowed;}
|
package/cjs/index.css
CHANGED
@@ -401,14 +401,14 @@
|
|
401
401
|
|
402
402
|
.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_spuzt9m__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_sin9wo2__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
|
403
403
|
|
404
|
-
.
|
405
|
-
.
|
406
|
-
.
|
407
|
-
.
|
408
|
-
.
|
409
|
-
.
|
410
|
-
.
|
411
|
-
.
|
404
|
+
.SegmentGroup_styles_zqao76_b2sori2__a2d03c15{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}.SegmentGroup_styles_zqao76_b2sori2__a2d03c15.SegmentGroup_styles_zqao76_segmentVertical__a2d03c15{max-width:none;max-height:100%;}.SegmentGroup_styles_zqao76_b2sori2__a2d03c15:before{border-radius:var(--plasma-segment-group-border-radius);}
|
405
|
+
.SegmentGroup_styles_zqao76_sin9wo2__a2d03c15{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}
|
406
|
+
.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15{position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15::-webkit-scrollbar{display:none;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15 .SegmentGroup_styles_zqao76_sin9wo2__a2d03c15{max-width:none;}
|
407
|
+
.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15.SegmentGroup_styles_zqao76_focusVisible__a2d03c15:focus::before,.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15[disabled]{cursor:not-allowed;}
|
408
|
+
.SegmentGroup_styles_zqao76_s3pgccr__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-arrow-padding);padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;}
|
409
|
+
.SegmentGroup_styles_zqao76_sax6mvm__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-arrow-padding);padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;}
|
410
|
+
.SegmentGroup_styles_zqao76_s1n81rr8__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-bottom:0;margin-bottom:0.1875rem;}
|
411
|
+
.SegmentGroup_styles_zqao76_s7ukuvj__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-top:0;margin-top:0.1875rem;}
|
412
412
|
|
413
413
|
.base_7kjuok_b1kyapt7__5060a19f{font-family:var(--plasma-segment-item-font-family);font-size:var(--plasma-segment-item-font-size);font-style:var(--plasma-segment-item-font-style);font-weight:var(--plasma-segment-item-font-weight);-webkit-letter-spacing:var(--plasma-segment-item-letter-spacing);-moz-letter-spacing:var(--plasma-segment-item-letter-spacing);-ms-letter-spacing:var(--plasma-segment-item-letter-spacing);letter-spacing:var(--plasma-segment-item-letter-spacing);line-height:var(--plasma-segment-item-lineheight);--plasma_private-outline-radius:var(--plasma-segment-item-border-radius);border-radius:var(--plasma-segment-item-border-radius);width:var(--plasma-segment-item-width);height:var(--plasma-segment-item-height);padding:var(--plasma-segment-item-padding);}
|
414
414
|
|
@@ -18,7 +18,7 @@ var _Attach2 = /*#__PURE__*/require("./Attach.tokens");
|
|
18
18
|
var _AttachButton = /*#__PURE__*/require("./components/AttachButton");
|
19
19
|
var _IconButton = /*#__PURE__*/require("./ui/IconButton/IconButton.styles");
|
20
20
|
var _IconCloseCircleOutli;
|
21
|
-
var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled"];
|
21
|
+
var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled", "id", "name", "onChange", "onClear"];
|
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); }
|
@@ -45,6 +45,10 @@ var attachRoot = exports.attachRoot = function attachRoot(Root) {
|
|
45
45
|
style = props.style,
|
46
46
|
isLoading = props.isLoading,
|
47
47
|
disabled = props.disabled,
|
48
|
+
id = props.id,
|
49
|
+
name = props.name,
|
50
|
+
onChange = props.onChange,
|
51
|
+
onClear = props.onClear,
|
48
52
|
rest = _objectWithoutProperties(props, _excluded);
|
49
53
|
var innerRef = (0, _react.useRef)(null);
|
50
54
|
var ref = (0, _plasmaCore.useForkRef)(outerRef, innerRef);
|
@@ -113,16 +117,22 @@ var attachRoot = exports.attachRoot = function attachRoot(Root) {
|
|
113
117
|
}
|
114
118
|
inputRef.current.click();
|
115
119
|
};
|
116
|
-
var handleChange = function handleChange() {
|
117
|
-
if (!
|
120
|
+
var handleChange = function handleChange(e) {
|
121
|
+
if (!e.target.files) {
|
118
122
|
return;
|
119
123
|
}
|
120
|
-
|
124
|
+
if (onChange) {
|
125
|
+
onChange(e);
|
126
|
+
}
|
127
|
+
setFilename(e.target.files[0].name);
|
121
128
|
};
|
122
129
|
var handleClear = function handleClear() {
|
123
130
|
if (!inputRef.current) {
|
124
131
|
return;
|
125
132
|
}
|
133
|
+
if (onClear) {
|
134
|
+
onClear();
|
135
|
+
}
|
126
136
|
inputRef.current.value = '';
|
127
137
|
setFilename('');
|
128
138
|
setTruncatedFilename('');
|
@@ -137,12 +147,11 @@ var attachRoot = exports.attachRoot = function attachRoot(Root) {
|
|
137
147
|
ref: inputRef,
|
138
148
|
accept: accept,
|
139
149
|
type: "file",
|
140
|
-
id:
|
141
|
-
name:
|
150
|
+
id: id,
|
151
|
+
name: name,
|
142
152
|
onChange: handleChange
|
143
153
|
}), /*#__PURE__*/_react["default"].createElement(_Attach.StyledHiddenInputHelper, {
|
144
|
-
ref: inputHelperRef
|
145
|
-
id: "attachHiddenInputHelper"
|
154
|
+
ref: inputHelperRef
|
146
155
|
}, filename), /*#__PURE__*/_react["default"].createElement(_AttachButton.AttachButton, _extends({
|
147
156
|
buttonType: buttonType,
|
148
157
|
view: view,
|
@@ -61,3 +61,72 @@ export function App() {
|
|
61
61
|
);
|
62
62
|
}
|
63
63
|
```
|
64
|
+
|
65
|
+
### Пример использования в форме
|
66
|
+
|
67
|
+
```tsx live
|
68
|
+
import React, { useState } from 'react';
|
69
|
+
import { Attach, Button } from '@salutejs/{{ package }}';
|
70
|
+
|
71
|
+
function App() {
|
72
|
+
const ids = ['0', '1', '2'];
|
73
|
+
const [isLoading, setIsLoading] = useState(false);
|
74
|
+
const [attachedFiles, setAttachedFiles] = useState([]);
|
75
|
+
|
76
|
+
const handleAttachFile = (e) => {
|
77
|
+
setAttachedFiles((prevAttachedFiles) => [
|
78
|
+
...prevAttachedFiles,
|
79
|
+
{
|
80
|
+
fileData: e.target.files[0],
|
81
|
+
id: e.target.id,
|
82
|
+
},
|
83
|
+
]);
|
84
|
+
};
|
85
|
+
|
86
|
+
const handleAttachClear = (id) => {
|
87
|
+
setAttachedFiles(attachedFiles.filter((file) => file.id !== id));
|
88
|
+
};
|
89
|
+
|
90
|
+
const handleSubmit = (e) => {
|
91
|
+
e.preventDefault();
|
92
|
+
setIsLoading(true);
|
93
|
+
|
94
|
+
const formData = new FormData(e.target);
|
95
|
+
console.log('formData', Object.fromEntries(formData));
|
96
|
+
|
97
|
+
setTimeout(() => {
|
98
|
+
setAttachedFiles([]);
|
99
|
+
setIsLoading(false);
|
100
|
+
}, 2000);
|
101
|
+
};
|
102
|
+
|
103
|
+
return (
|
104
|
+
<>
|
105
|
+
<span>{isLoading ? 'Форма отправляется' : 'Прикрепленные файлы:'}</span>
|
106
|
+
{!isLoading && attachedFiles.length > 0 && (
|
107
|
+
<div style=\{{ display: 'flex', flexDirection: 'column', gap: '0px' }}>
|
108
|
+
{attachedFiles.map((file) => (
|
109
|
+
<span>{file.fileData.name}</span>
|
110
|
+
))}
|
111
|
+
</div>
|
112
|
+
)}
|
113
|
+
|
114
|
+
{!isLoading && (
|
115
|
+
<form onSubmit={handleSubmit} style=\{{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
|
116
|
+
{ids.map((id) => (
|
117
|
+
<Attach
|
118
|
+
id={id}
|
119
|
+
name={`attach${id}`}
|
120
|
+
text={`Загрузить файл ${id}`}
|
121
|
+
onChange={handleAttachFile}
|
122
|
+
onClear={() => handleAttachClear(id)}
|
123
|
+
/>
|
124
|
+
))}
|
125
|
+
|
126
|
+
<Button type="submit">Отправить</Button>
|
127
|
+
</form>
|
128
|
+
)}
|
129
|
+
</>
|
130
|
+
);
|
131
|
+
}
|
132
|
+
```
|
@@ -19,15 +19,15 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
19
19
|
// Не мутирует исходные данные.
|
20
20
|
var filterItems = exports.filterItems = function filterItems(items, textValue, currentLabel, customFilter) {
|
21
21
|
if (!textValue || textValue === currentLabel) return items;
|
22
|
-
var defaultFilter = function defaultFilter(
|
23
|
-
return label.toLowerCase().includes(value.toLowerCase());
|
22
|
+
var defaultFilter = function defaultFilter(item, value) {
|
23
|
+
return item.label.toLowerCase().includes(value.toLowerCase());
|
24
24
|
};
|
25
25
|
var filter = customFilter || defaultFilter;
|
26
26
|
var dfs = function dfs(items) {
|
27
27
|
var newItems = [];
|
28
28
|
items.forEach(function (item) {
|
29
29
|
if (item.items) {
|
30
|
-
if (filter(item
|
30
|
+
if (filter(item, textValue)) {
|
31
31
|
newItems.push(item);
|
32
32
|
return;
|
33
33
|
}
|
@@ -37,12 +37,11 @@ var filterItems = exports.filterItems = function filterItems(items, textValue, c
|
|
37
37
|
items: res
|
38
38
|
}));
|
39
39
|
}
|
40
|
-
} else if (filter(item
|
40
|
+
} else if (filter(item, textValue)) {
|
41
41
|
newItems.push(item);
|
42
42
|
}
|
43
43
|
});
|
44
44
|
return newItems;
|
45
45
|
};
|
46
|
-
dfs(items);
|
47
46
|
return dfs(items);
|
48
47
|
};
|
@@ -27,7 +27,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
27
27
|
### Выбранные по умолчанию SegmentItem
|
28
28
|
|
29
29
|
Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`.
|
30
|
-
Оно передается в `SegmentProvider`, в виде массива `value`
|
30
|
+
Оно передается в `SegmentProvider`, в виде массива `value` элементов.
|
31
31
|
|
32
32
|
```tsx live
|
33
33
|
import React from 'react';
|
@@ -41,8 +41,9 @@ export function App() {
|
|
41
41
|
|
42
42
|
return (
|
43
43
|
<>
|
44
|
-
<div
|
45
|
-
<
|
44
|
+
<div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
|
45
|
+
<br />
|
46
|
+
<SegmentGroup hasBackground pilled clip={false}>
|
46
47
|
{items.map((_, i) => (
|
47
48
|
<SegmentItem
|
48
49
|
label={`Label ${i}`}
|
@@ -58,7 +59,49 @@ export function App() {
|
|
58
59
|
}
|
59
60
|
|
60
61
|
return (
|
61
|
-
<div style
|
62
|
+
<div style={{ display: "block" }} >
|
63
|
+
<SegmentProvider defaultSelected={['label_1']}>
|
64
|
+
<SegmentTemplate/>
|
65
|
+
</SegmentProvider>
|
66
|
+
</div>
|
67
|
+
);
|
68
|
+
}
|
69
|
+
```
|
70
|
+
|
71
|
+
### Вертикальное отображение
|
72
|
+
|
73
|
+
Для смены ориентации передаем `orientation: 'vertical'`
|
74
|
+
|
75
|
+
```tsx live
|
76
|
+
import React from 'react';
|
77
|
+
import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
|
78
|
+
|
79
|
+
export function App() {
|
80
|
+
const items = Array(8).fill(0);
|
81
|
+
|
82
|
+
const SegmentTemplate = () => {
|
83
|
+
const {selectedSegmentItems} = useSegment();
|
84
|
+
|
85
|
+
return (
|
86
|
+
<>
|
87
|
+
<div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
|
88
|
+
<br />
|
89
|
+
<SegmentGroup hasBackground clip={false}>
|
90
|
+
{items.map((_, i) => (
|
91
|
+
<SegmentItem
|
92
|
+
label={`Label ${i}`}
|
93
|
+
value={`label_${i}`}
|
94
|
+
key={`label_${i}`}
|
95
|
+
view='secondary'
|
96
|
+
/>
|
97
|
+
))}
|
98
|
+
</SegmentGroup>
|
99
|
+
</>
|
100
|
+
)
|
101
|
+
}
|
102
|
+
|
103
|
+
return (
|
104
|
+
<div style={{ display: "block" }} >
|
62
105
|
<SegmentProvider defaultSelected={['label_1']}>
|
63
106
|
<SegmentTemplate/>
|
64
107
|
</SegmentProvider>
|