@skbkontur/react-ui 6.4.1-8cb58.0 → 6.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/components/FileUploader/FileUploaderFile.js +2 -2
- package/components/FileUploader/FileUploaderFile.js.map +1 -1
- package/components/Hint/Hint.d.ts +10 -1
- package/components/Hint/Hint.js +44 -16
- package/components/Hint/Hint.js.map +1 -1
- package/components/Hint/HintDelayController.d.ts +11 -0
- package/components/Hint/HintDelayController.js +50 -0
- package/components/Hint/HintDelayController.js.map +1 -0
- package/components/Toast/Toast.js +8 -5
- package/components/Toast/Toast.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,31 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [6.4.2](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.4.1...@skbkontur/react-ui@6.4.2) (2026-09-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **FileUploader:** make loading files neutral ([f54e971](https://github.com/skbkontur/retail-ui/commit/f54e97169dac3f57abf18ef5236dead9d06e3ca8))
|
|
12
|
+
* **Hint:** show next hint immediate after fast hover, add prop `delayBeforeShow` ([574784d](https://github.com/skbkontur/retail-ui/commit/574784dc56f41794243eabe9d36d611a30dc59af))
|
|
13
|
+
* **Toast:** reset transition ref on repeated display ([2c9a115](https://github.com/skbkontur/retail-ui/commit/2c9a1152964bd71f2683a97bd3f0253ad235c52c))
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
## [6.4.1](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.4.0...@skbkontur/react-ui@6.4.1) (2026-09-17)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Bug Fixes
|
|
23
|
+
|
|
24
|
+
* **docs:** load Context7 widget asynchronously ([bee0d02](https://github.com/skbkontur/retail-ui/commit/bee0d02dd552a9237e93a3c3beaa92e4178d521d))
|
|
25
|
+
* **Tooltip:** keep hover trigger on zoomed desktop ([82e91a9](https://github.com/skbkontur/retail-ui/commit/82e91a952178a924c2172abe55357d3e09324897))
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
6
31
|
# [6.4.0](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@6.3.4...@skbkontur/react-ui@6.4.0) (2026-09-09)
|
|
7
32
|
|
|
8
33
|
|
|
@@ -180,7 +180,7 @@ export var FileUploaderFile = forwardRefAndName('FileUploaderFile', function (pr
|
|
|
180
180
|
medium: jsStyles.sizeMedium(theme),
|
|
181
181
|
large: jsStyles.sizeLarge(theme),
|
|
182
182
|
});
|
|
183
|
-
var sizeClassNames = cx(jsStyles.size(theme), sizeClassName, jsViewStyles.size(theme), isTileView && disabled && jsTileStyles.sizeDisabled(theme));
|
|
183
|
+
var sizeClassNames = cx(jsStyles.size(theme), sizeClassName, jsViewStyles.size(theme), isTileView && (disabled || isLoading) && jsTileStyles.sizeDisabled(theme));
|
|
184
184
|
var sizeFileTypeIconClass = useFileUploaderSize(size, {
|
|
185
185
|
small: jsViewStyles.fileTypeIconSmall(theme),
|
|
186
186
|
medium: jsViewStyles.fileTypeIconMedium(theme),
|
|
@@ -194,7 +194,7 @@ export var FileUploaderFile = forwardRefAndName('FileUploaderFile', function (pr
|
|
|
194
194
|
_c[jsTileStyles.warningFileTypeIcon(theme)] = isWarning,
|
|
195
195
|
_c[jsTileStyles.errorFileTypeIcon(theme)] = isError,
|
|
196
196
|
_c), multiple && jsStyles.fileTypeIconMultiple());
|
|
197
|
-
var nameBlockClassNames = cx(sizeNameBlockClass, sizeViewNameBlockClass, jsStyles.nameBlock(), disabled && jsViewStyles.disabled(theme), jsViewStyles.nameBlock());
|
|
197
|
+
var nameBlockClassNames = cx(sizeNameBlockClass, sizeViewNameBlockClass, jsStyles.nameBlock(), (disabled || isLoading) && jsViewStyles.disabled(theme), jsViewStyles.nameBlock());
|
|
198
198
|
var fileType = getFileUploaderTypeIcon(file.originalFile, isError, isWarning && !!withWarningIcon);
|
|
199
199
|
var icon = isTileView && isLoading ? (React.createElement(LoadingIcon, { size: size })) : ((fileTypeIcon !== null && fileTypeIcon !== void 0 ? fileTypeIcon : React.createElement(FileUploaderFileTypeIcon, { type: fileType, size: size, view: view })));
|
|
200
200
|
var splitTruncatedFileName = truncatedFileName && splitFileNameAndExtension(truncatedFileName);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileUploaderFile.js","sourceRoot":"","sources":["FileUploaderFile.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { type CommonProps, CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { LoadingIcon } from '../../internal/icons2022/LoadingIcon.js';\nimport type { PopupPositionsType, ShortPopupPositionsType } from '../../internal/Popup/index.js';\nimport { TextWidthHelper } from '../../internal/TextWidthHelper/TextWidthHelper.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { isKeyEnter } from '../../lib/events/keyboard/identifiers.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { LocaleContext } from '../../lib/locale/LocaleContext.js';\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { truncate } from '../../lib/stringUtils.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { formatBytes } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { Hint } from '../Hint/index.js';\nimport { Tooltip } from '../Tooltip/index.js';\nimport { getJsRowStyles, getJsStyles, getJsTileStyles } from './FileUploaderFile.styles.js';\nimport { FileUploaderFileStatusIcon } from './FileUploaderFileStatusIcon.js';\nimport { FileUploaderFileTypeIcon } from './FileUploaderFileTypeIcon.js';\nimport type { FileUploaderAttachedFile, FileUploaderIconType, FileUploaderView } from './fileUtils.js';\nimport { FileUploaderFileStatus, getFileUploaderTypeIcon } from './fileUtils.js';\nimport { useFileUploaderSize } from './hooks/useFileUploaderSize.js';\n\nexport interface FileUploaderFileProps extends CommonProps {\n /** Данные файла и статусы из контекста `FileUploader`. */\n file: FileUploaderAttachedFile;\n /** Включает отображение размера файла рядом с именем. */\n showSize?: boolean;\n /** Фон превью в плиточном виде (URL изображения). */\n previewImg?: string;\n /** Включает мультивыбор файлов. */\n multiple?: boolean;\n /** Блокирует строку файла. */\n disabled?: boolean;\n /** Переводит строку файла в состояние \"наведенное\". */\n hovered?: boolean;\n /** Переводит строку файла в состояние \"фокус\". */\n focused?: boolean;\n /** Размер контрола и вложенных элементов.\n * @default small */\n size: SizeProp;\n /** Внешний вид: строка (`row`) или плитка (`tile`).\n * @default row\n */\n view?: FileUploaderView;\n /** Переводит строку файла в состояние ошибки. */\n error?: boolean;\n /** Переводит строку файла в состояние предупреждения. */\n warning?: boolean;\n /** Включает отображение текста валидации во всплывающей подсказке (и в плитке по умолчанию). */\n withValidationTooltip?: boolean;\n /** Расположение тултипа с текстом валидации. */\n validationTooltipPosition?: ShortPopupPositionsType | PopupPositionsType;\n /** Включает отображение иконки предупреждения (восклицательный знак) при статусе предупреждения у файла. */\n withWarningIcon?: boolean;\n /** Удаляет файл по `id`. */\n onRemove(id: string): void;\n /**\n * Замена стандартной иконки типа файла.\n */\n fileTypeIcon?: React.ReactElement;\n /**\n * Включает отображение подсказки с полным именем при обрезке текста (через `Hint`).\n * @default true\n */\n showFilenameHint?: boolean;\n}\n\nconst splitFileNameAndExtension = (filename: string): { name: string; extension: string } => {\n const lastDotIndex = filename.lastIndexOf('.');\n if (lastDotIndex === -1) {\n return { name: filename, extension: '' };\n }\n const name = filename.substring(0, lastDotIndex);\n const extension = filename.substring(lastDotIndex + 1);\n return { name, extension };\n};\n\nconst getTruncatedName = (fileNameWidth: number, fileNameElementWidth: number, name: string, isTileView = false) => {\n if (!fileNameWidth && !fileNameElementWidth) {\n return null;\n }\n\n if (fileNameWidth <= fileNameElementWidth) {\n return name;\n }\n\n const charWidth = Math.ceil(fileNameWidth / name.length);\n const maxCharsCountInSpan = Math.ceil(fileNameElementWidth / charWidth);\n\n if (isTileView) {\n const splitFileName = splitFileNameAndExtension(name);\n return `${truncate(splitFileName.name, maxCharsCountInSpan)}.${splitFileName.extension}`;\n }\n\n return truncate(name, maxCharsCountInSpan);\n};\n\nconst calcTruncatedName = (\n textHelperRef: React.RefObject<TextWidthHelper | null>,\n fileNameElementRef: React.RefObject<HTMLSpanElement | null>,\n name: string,\n isTileView = false,\n) => {\n const fileNameWidth = textHelperRef.current?.getTextWidth() || 0;\n const fileNameElementWidth = isTileView\n ? // даем возможность занять 2 строки с погрешностью в 50%\n getDOMRect(fileNameElementRef.current).width * 1.5\n : getDOMRect(fileNameElementRef.current).width;\n\n return getTruncatedName(fileNameWidth, fileNameElementWidth, name, isTileView);\n};\n\nexport const FileUploaderFileDataTids = {\n file: 'FileUploader__file',\n fileTooltip: 'FileUploader__fileTooltip',\n fileName: 'FileUploader__fileName',\n fileSize: 'FileUploader__fileSize',\n fileIcon: 'FileUploader__fileIcon',\n fileTypeIcon: 'FileUploader__fileTypeIcon',\n} as const;\n\n/**\n * `FileUploaderFile` показывает одну строку файла внутри `FileUploader`: имя, тип, размер, статусы и удаление.\n */\nexport const FileUploaderFile = forwardRefAndName<HTMLDivElement, FileUploaderFileProps>(\n 'FileUploaderFile',\n (props, ref) => {\n const {\n file,\n showSize = false,\n previewImg,\n error,\n warning,\n multiple,\n disabled = false,\n hovered = false,\n focused = false,\n size,\n view = 'row',\n withValidationTooltip,\n validationTooltipPosition,\n withWarningIcon,\n onRemove,\n showFilenameHint: showFullFilename = true,\n fileTypeIcon,\n ...rest\n } = props;\n const { id, originalFile, status, validationResult } = file;\n const { name, size: fileSize } = originalFile;\n\n const [hoveredFile, setHoveredFile] = useState<boolean>(hovered || false);\n const [focusedByTab, setFocusedByTab] = useState(focused || false);\n const [truncatedFileName, setTruncatedFileName] = useState<Nullable<string>>(null);\n\n const textHelperRef = useRef<TextWidthHelper>(null);\n const fileNameElementRef = useRef<HTMLSpanElement>(null);\n\n const { langCode } = useContext(LocaleContext);\n const theme = useContext(ThemeContext);\n const globalObject = useGlobal();\n\n const { cx } = useEmotion();\n const keyListener = useKeyListener();\n const jsStyles = useStyles(getJsStyles);\n const jsRowStyles = useStyles(getJsRowStyles);\n const jsTileStyles = useStyles(getJsTileStyles);\n\n const isLoading = status === FileUploaderFileStatus.Loading;\n const isTileView = view === 'tile';\n const jsViewStyles = isTileView ? jsTileStyles : jsRowStyles;\n const validationTooltipPositionByView = validationTooltipPosition || (isTileView ? 'top center' : 'top left');\n\n const formattedSize = useMemo(() => formatBytes(fileSize, 1, langCode), [fileSize, langCode]);\n\n useEffect(() => {\n const truncatedName = calcTruncatedName(textHelperRef, fileNameElementRef, name, isTileView);\n\n setTruncatedFileName(truncatedName);\n });\n\n const handleRemove = useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n event.preventDefault();\n event.stopPropagation();\n onRemove(id);\n },\n [id, onRemove],\n );\n\n const { isValid, message } = validationResult;\n\n const isError = file.status === FileUploaderFileStatus.Error || error;\n const isWarning = file.status === FileUploaderFileStatus.Warning || warning;\n const isInvalid = isError || !isValid;\n\n const sizeIconClass = useFileUploaderSize(size, {\n small: jsViewStyles.iconSmall(theme),\n medium: jsViewStyles.iconMedium(theme),\n large: jsViewStyles.iconLarge(theme),\n });\n\n const renderTooltipContent = useCallback((): ReactNode => {\n return !isValid && !error && message ? message : null;\n }, [isValid, error, message]);\n\n const sizeNameBlockClass = useFileUploaderSize(size, {\n small: jsStyles.contentSmall(theme),\n medium: jsStyles.contentMedium(theme),\n large: jsStyles.contentLarge(theme),\n });\n\n const sizeViewNameBlockClass = useFileUploaderSize(size, {\n small: jsViewStyles.contentSmall(theme),\n medium: jsViewStyles.contentMedium(theme),\n large: jsViewStyles.contentLarge(theme),\n });\n\n const validationTextClassName = cx({\n [jsStyles.validationTextWarning(theme)]: isWarning,\n [jsStyles.validationTextError(theme)]: isError,\n });\n\n const contentClassNames = cx(jsStyles.content(), jsViewStyles.content());\n const nameTextClassNames = cx(jsViewStyles.name(), isTileView && !disabled && validationTextClassName);\n\n const handleMouseEnter = useCallback(() => {\n setHoveredFile(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setHoveredFile(false);\n }, []);\n\n const handleFocus = useCallback(() => {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n }, []);\n\n const handleBlur = useCallback(() => {\n setFocusedByTab(false);\n }, []);\n\n const handleIconKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (isKeyEnter(e)) {\n onRemove(id);\n }\n },\n [onRemove, id],\n );\n\n const iconClassNames = cx(jsStyles.icon(theme), {\n [sizeIconClass]: true,\n [jsTileStyles.iconAction(theme)]: isTileView,\n [jsTileStyles.iconActionShow()]: isTileView && !disabled && (hovered || hoveredFile || focused || focusedByTab),\n });\n\n const sizeClassName = useFileUploaderSize(size, {\n small: jsStyles.sizeSmall(theme),\n medium: jsStyles.sizeMedium(theme),\n large: jsStyles.sizeLarge(theme),\n });\n\n const sizeClassNames = cx(\n jsStyles.size(theme),\n sizeClassName,\n jsViewStyles.size(theme),\n isTileView && disabled && jsTileStyles.sizeDisabled(theme),\n );\n\n const sizeFileTypeIconClass = useFileUploaderSize(size, {\n small: jsViewStyles.fileTypeIconSmall(theme),\n medium: jsViewStyles.fileTypeIconMedium(theme),\n large: jsViewStyles.fileTypeIconLarge(theme),\n });\n\n const isTruncated = truncatedFileName !== name;\n\n const fileTypeIconClassName = cx(\n sizeFileTypeIconClass,\n disabled && jsStyles.disabledFileTypeIconSvg(theme),\n isTileView && {\n [jsTileStyles.fileTypeIcon(theme)]: true,\n [jsTileStyles.fileTypeIconPreview()]: !!previewImg,\n [jsTileStyles.disabledFileTypeIcon(theme)]: disabled,\n [jsTileStyles.warningFileTypeIcon(theme)]: isWarning,\n [jsTileStyles.errorFileTypeIcon(theme)]: isError,\n },\n multiple && jsStyles.fileTypeIconMultiple(),\n );\n\n const nameBlockClassNames = cx(\n sizeNameBlockClass,\n sizeViewNameBlockClass,\n jsStyles.nameBlock(),\n disabled && jsViewStyles.disabled(theme),\n jsViewStyles.nameBlock(),\n );\n\n const fileType: FileUploaderIconType = getFileUploaderTypeIcon(\n file.originalFile,\n isError,\n isWarning && !!withWarningIcon,\n );\n const icon =\n isTileView && isLoading ? (\n <LoadingIcon size={size} />\n ) : (\n (fileTypeIcon ?? <FileUploaderFileTypeIcon type={fileType} size={size} view={view} />)\n );\n\n const splitTruncatedFileName = truncatedFileName && splitFileNameAndExtension(truncatedFileName);\n\n return (\n <CommonWrapper {...rest}>\n <div\n data-tid={FileUploaderFileDataTids.file}\n className={jsStyles.root()}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={ref}\n >\n <Tooltip\n data-tid={FileUploaderFileDataTids.fileTooltip}\n pos={validationTooltipPositionByView}\n render={() => (withValidationTooltip || isTileView ? renderTooltipContent() : null)}\n >\n <div className={contentClassNames}>\n {\n <div\n data-tid={FileUploaderFileDataTids.fileTypeIcon}\n className={fileTypeIconClassName}\n style={previewImg ? { backgroundImage: `url(${previewImg})` } : undefined}\n >\n {(!isTileView || !previewImg) && icon}\n </div>\n }\n <div className={nameBlockClassNames}>\n <TextWidthHelper ref={textHelperRef} text={name} />\n <Hint maxWidth={'100%'} text={showFullFilename && isTruncated ? name : null}>\n <span\n data-tid={FileUploaderFileDataTids.fileName}\n ref={fileNameElementRef}\n className={nameTextClassNames}\n >\n {splitTruncatedFileName && (\n <>\n {splitTruncatedFileName.name}\n {splitTruncatedFileName.extension && <span>.{splitTruncatedFileName.extension}</span>}\n </>\n )}\n </span>\n </Hint>\n {!(withValidationTooltip || isTileView) && (\n <span className={validationTextClassName}>{renderTooltipContent()}</span>\n )}\n </div>\n {showSize && formattedSize && (\n <span data-tid={FileUploaderFileDataTids.fileSize} className={sizeClassNames}>\n {formattedSize}\n </span>\n )}\n <div\n className={iconClassNames}\n data-tid={FileUploaderFileDataTids.fileIcon}\n tabIndex={0}\n onClick={handleRemove}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleIconKeyDown}\n >\n <FileUploaderFileStatusIcon\n isTileView={isTileView}\n status={status}\n disabled={disabled}\n hovered={hovered || hoveredFile}\n focusedByTab={focused || focusedByTab}\n isInvalid={isInvalid}\n hasValidation={isError || isWarning}\n size={size}\n />\n </div>\n </div>\n </Tooltip>\n </div>\n </CommonWrapper>\n );\n },\n);\n"]}
|
|
1
|
+
{"version":3,"file":"FileUploaderFile.js","sourceRoot":"","sources":["FileUploaderFile.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { type CommonProps, CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { LoadingIcon } from '../../internal/icons2022/LoadingIcon.js';\nimport type { PopupPositionsType, ShortPopupPositionsType } from '../../internal/Popup/index.js';\nimport { TextWidthHelper } from '../../internal/TextWidthHelper/TextWidthHelper.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport { isKeyEnter } from '../../lib/events/keyboard/identifiers.js';\nimport { useKeyListener } from '../../lib/events/keyListener.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { LocaleContext } from '../../lib/locale/LocaleContext.js';\nimport { useEmotion, useGlobal, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { truncate } from '../../lib/stringUtils.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport { formatBytes } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { Hint } from '../Hint/index.js';\nimport { Tooltip } from '../Tooltip/index.js';\nimport { getJsRowStyles, getJsStyles, getJsTileStyles } from './FileUploaderFile.styles.js';\nimport { FileUploaderFileStatusIcon } from './FileUploaderFileStatusIcon.js';\nimport { FileUploaderFileTypeIcon } from './FileUploaderFileTypeIcon.js';\nimport type { FileUploaderAttachedFile, FileUploaderIconType, FileUploaderView } from './fileUtils.js';\nimport { FileUploaderFileStatus, getFileUploaderTypeIcon } from './fileUtils.js';\nimport { useFileUploaderSize } from './hooks/useFileUploaderSize.js';\n\nexport interface FileUploaderFileProps extends CommonProps {\n /** Данные файла и статусы из контекста `FileUploader`. */\n file: FileUploaderAttachedFile;\n /** Включает отображение размера файла рядом с именем. */\n showSize?: boolean;\n /** Фон превью в плиточном виде (URL изображения). */\n previewImg?: string;\n /** Включает мультивыбор файлов. */\n multiple?: boolean;\n /** Блокирует строку файла. */\n disabled?: boolean;\n /** Переводит строку файла в состояние \"наведенное\". */\n hovered?: boolean;\n /** Переводит строку файла в состояние \"фокус\". */\n focused?: boolean;\n /** Размер контрола и вложенных элементов.\n * @default small */\n size: SizeProp;\n /** Внешний вид: строка (`row`) или плитка (`tile`).\n * @default row\n */\n view?: FileUploaderView;\n /** Переводит строку файла в состояние ошибки. */\n error?: boolean;\n /** Переводит строку файла в состояние предупреждения. */\n warning?: boolean;\n /** Включает отображение текста валидации во всплывающей подсказке (и в плитке по умолчанию). */\n withValidationTooltip?: boolean;\n /** Расположение тултипа с текстом валидации. */\n validationTooltipPosition?: ShortPopupPositionsType | PopupPositionsType;\n /** Включает отображение иконки предупреждения (восклицательный знак) при статусе предупреждения у файла. */\n withWarningIcon?: boolean;\n /** Удаляет файл по `id`. */\n onRemove(id: string): void;\n /**\n * Замена стандартной иконки типа файла.\n */\n fileTypeIcon?: React.ReactElement;\n /**\n * Включает отображение подсказки с полным именем при обрезке текста (через `Hint`).\n * @default true\n */\n showFilenameHint?: boolean;\n}\n\nconst splitFileNameAndExtension = (filename: string): { name: string; extension: string } => {\n const lastDotIndex = filename.lastIndexOf('.');\n if (lastDotIndex === -1) {\n return { name: filename, extension: '' };\n }\n const name = filename.substring(0, lastDotIndex);\n const extension = filename.substring(lastDotIndex + 1);\n return { name, extension };\n};\n\nconst getTruncatedName = (fileNameWidth: number, fileNameElementWidth: number, name: string, isTileView = false) => {\n if (!fileNameWidth && !fileNameElementWidth) {\n return null;\n }\n\n if (fileNameWidth <= fileNameElementWidth) {\n return name;\n }\n\n const charWidth = Math.ceil(fileNameWidth / name.length);\n const maxCharsCountInSpan = Math.ceil(fileNameElementWidth / charWidth);\n\n if (isTileView) {\n const splitFileName = splitFileNameAndExtension(name);\n return `${truncate(splitFileName.name, maxCharsCountInSpan)}.${splitFileName.extension}`;\n }\n\n return truncate(name, maxCharsCountInSpan);\n};\n\nconst calcTruncatedName = (\n textHelperRef: React.RefObject<TextWidthHelper | null>,\n fileNameElementRef: React.RefObject<HTMLSpanElement | null>,\n name: string,\n isTileView = false,\n) => {\n const fileNameWidth = textHelperRef.current?.getTextWidth() || 0;\n const fileNameElementWidth = isTileView\n ? // даем возможность занять 2 строки с погрешностью в 50%\n getDOMRect(fileNameElementRef.current).width * 1.5\n : getDOMRect(fileNameElementRef.current).width;\n\n return getTruncatedName(fileNameWidth, fileNameElementWidth, name, isTileView);\n};\n\nexport const FileUploaderFileDataTids = {\n file: 'FileUploader__file',\n fileTooltip: 'FileUploader__fileTooltip',\n fileName: 'FileUploader__fileName',\n fileSize: 'FileUploader__fileSize',\n fileIcon: 'FileUploader__fileIcon',\n fileTypeIcon: 'FileUploader__fileTypeIcon',\n} as const;\n\n/**\n * `FileUploaderFile` показывает одну строку файла внутри `FileUploader`: имя, тип, размер, статусы и удаление.\n */\nexport const FileUploaderFile = forwardRefAndName<HTMLDivElement, FileUploaderFileProps>(\n 'FileUploaderFile',\n (props, ref) => {\n const {\n file,\n showSize = false,\n previewImg,\n error,\n warning,\n multiple,\n disabled = false,\n hovered = false,\n focused = false,\n size,\n view = 'row',\n withValidationTooltip,\n validationTooltipPosition,\n withWarningIcon,\n onRemove,\n showFilenameHint: showFullFilename = true,\n fileTypeIcon,\n ...rest\n } = props;\n const { id, originalFile, status, validationResult } = file;\n const { name, size: fileSize } = originalFile;\n\n const [hoveredFile, setHoveredFile] = useState<boolean>(hovered || false);\n const [focusedByTab, setFocusedByTab] = useState(focused || false);\n const [truncatedFileName, setTruncatedFileName] = useState<Nullable<string>>(null);\n\n const textHelperRef = useRef<TextWidthHelper>(null);\n const fileNameElementRef = useRef<HTMLSpanElement>(null);\n\n const { langCode } = useContext(LocaleContext);\n const theme = useContext(ThemeContext);\n const globalObject = useGlobal();\n\n const { cx } = useEmotion();\n const keyListener = useKeyListener();\n const jsStyles = useStyles(getJsStyles);\n const jsRowStyles = useStyles(getJsRowStyles);\n const jsTileStyles = useStyles(getJsTileStyles);\n\n const isLoading = status === FileUploaderFileStatus.Loading;\n const isTileView = view === 'tile';\n const jsViewStyles = isTileView ? jsTileStyles : jsRowStyles;\n const validationTooltipPositionByView = validationTooltipPosition || (isTileView ? 'top center' : 'top left');\n\n const formattedSize = useMemo(() => formatBytes(fileSize, 1, langCode), [fileSize, langCode]);\n\n useEffect(() => {\n const truncatedName = calcTruncatedName(textHelperRef, fileNameElementRef, name, isTileView);\n\n setTruncatedFileName(truncatedName);\n });\n\n const handleRemove = useCallback(\n (event: React.MouseEvent<HTMLElement>) => {\n event.preventDefault();\n event.stopPropagation();\n onRemove(id);\n },\n [id, onRemove],\n );\n\n const { isValid, message } = validationResult;\n\n const isError = file.status === FileUploaderFileStatus.Error || error;\n const isWarning = file.status === FileUploaderFileStatus.Warning || warning;\n const isInvalid = isError || !isValid;\n\n const sizeIconClass = useFileUploaderSize(size, {\n small: jsViewStyles.iconSmall(theme),\n medium: jsViewStyles.iconMedium(theme),\n large: jsViewStyles.iconLarge(theme),\n });\n\n const renderTooltipContent = useCallback((): ReactNode => {\n return !isValid && !error && message ? message : null;\n }, [isValid, error, message]);\n\n const sizeNameBlockClass = useFileUploaderSize(size, {\n small: jsStyles.contentSmall(theme),\n medium: jsStyles.contentMedium(theme),\n large: jsStyles.contentLarge(theme),\n });\n\n const sizeViewNameBlockClass = useFileUploaderSize(size, {\n small: jsViewStyles.contentSmall(theme),\n medium: jsViewStyles.contentMedium(theme),\n large: jsViewStyles.contentLarge(theme),\n });\n\n const validationTextClassName = cx({\n [jsStyles.validationTextWarning(theme)]: isWarning,\n [jsStyles.validationTextError(theme)]: isError,\n });\n\n const contentClassNames = cx(jsStyles.content(), jsViewStyles.content());\n const nameTextClassNames = cx(jsViewStyles.name(), isTileView && !disabled && validationTextClassName);\n\n const handleMouseEnter = useCallback(() => {\n setHoveredFile(true);\n }, []);\n\n const handleMouseLeave = useCallback(() => {\n setHoveredFile(false);\n }, []);\n\n const handleFocus = useCallback(() => {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n }, []);\n\n const handleBlur = useCallback(() => {\n setFocusedByTab(false);\n }, []);\n\n const handleIconKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLElement>) => {\n if (isKeyEnter(e)) {\n onRemove(id);\n }\n },\n [onRemove, id],\n );\n\n const iconClassNames = cx(jsStyles.icon(theme), {\n [sizeIconClass]: true,\n [jsTileStyles.iconAction(theme)]: isTileView,\n [jsTileStyles.iconActionShow()]: isTileView && !disabled && (hovered || hoveredFile || focused || focusedByTab),\n });\n\n const sizeClassName = useFileUploaderSize(size, {\n small: jsStyles.sizeSmall(theme),\n medium: jsStyles.sizeMedium(theme),\n large: jsStyles.sizeLarge(theme),\n });\n\n const sizeClassNames = cx(\n jsStyles.size(theme),\n sizeClassName,\n jsViewStyles.size(theme),\n isTileView && (disabled || isLoading) && jsTileStyles.sizeDisabled(theme),\n );\n\n const sizeFileTypeIconClass = useFileUploaderSize(size, {\n small: jsViewStyles.fileTypeIconSmall(theme),\n medium: jsViewStyles.fileTypeIconMedium(theme),\n large: jsViewStyles.fileTypeIconLarge(theme),\n });\n\n const isTruncated = truncatedFileName !== name;\n\n const fileTypeIconClassName = cx(\n sizeFileTypeIconClass,\n disabled && jsStyles.disabledFileTypeIconSvg(theme),\n isTileView && {\n [jsTileStyles.fileTypeIcon(theme)]: true,\n [jsTileStyles.fileTypeIconPreview()]: !!previewImg,\n [jsTileStyles.disabledFileTypeIcon(theme)]: disabled,\n [jsTileStyles.warningFileTypeIcon(theme)]: isWarning,\n [jsTileStyles.errorFileTypeIcon(theme)]: isError,\n },\n multiple && jsStyles.fileTypeIconMultiple(),\n );\n\n const nameBlockClassNames = cx(\n sizeNameBlockClass,\n sizeViewNameBlockClass,\n jsStyles.nameBlock(),\n (disabled || isLoading) && jsViewStyles.disabled(theme),\n jsViewStyles.nameBlock(),\n );\n\n const fileType: FileUploaderIconType = getFileUploaderTypeIcon(\n file.originalFile,\n isError,\n isWarning && !!withWarningIcon,\n );\n const icon =\n isTileView && isLoading ? (\n <LoadingIcon size={size} />\n ) : (\n (fileTypeIcon ?? <FileUploaderFileTypeIcon type={fileType} size={size} view={view} />)\n );\n\n const splitTruncatedFileName = truncatedFileName && splitFileNameAndExtension(truncatedFileName);\n\n return (\n <CommonWrapper {...rest}>\n <div\n data-tid={FileUploaderFileDataTids.file}\n className={jsStyles.root()}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n ref={ref}\n >\n <Tooltip\n data-tid={FileUploaderFileDataTids.fileTooltip}\n pos={validationTooltipPositionByView}\n render={() => (withValidationTooltip || isTileView ? renderTooltipContent() : null)}\n >\n <div className={contentClassNames}>\n {\n <div\n data-tid={FileUploaderFileDataTids.fileTypeIcon}\n className={fileTypeIconClassName}\n style={previewImg ? { backgroundImage: `url(${previewImg})` } : undefined}\n >\n {(!isTileView || !previewImg) && icon}\n </div>\n }\n <div className={nameBlockClassNames}>\n <TextWidthHelper ref={textHelperRef} text={name} />\n <Hint maxWidth={'100%'} text={showFullFilename && isTruncated ? name : null}>\n <span\n data-tid={FileUploaderFileDataTids.fileName}\n ref={fileNameElementRef}\n className={nameTextClassNames}\n >\n {splitTruncatedFileName && (\n <>\n {splitTruncatedFileName.name}\n {splitTruncatedFileName.extension && <span>.{splitTruncatedFileName.extension}</span>}\n </>\n )}\n </span>\n </Hint>\n {!(withValidationTooltip || isTileView) && (\n <span className={validationTextClassName}>{renderTooltipContent()}</span>\n )}\n </div>\n {showSize && formattedSize && (\n <span data-tid={FileUploaderFileDataTids.fileSize} className={sizeClassNames}>\n {formattedSize}\n </span>\n )}\n <div\n className={iconClassNames}\n data-tid={FileUploaderFileDataTids.fileIcon}\n tabIndex={0}\n onClick={handleRemove}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleIconKeyDown}\n >\n <FileUploaderFileStatusIcon\n isTileView={isTileView}\n status={status}\n disabled={disabled}\n hovered={hovered || hoveredFile}\n focusedByTab={focused || focusedByTab}\n isInvalid={isInvalid}\n hasValidation={isError || isWarning}\n size={size}\n />\n </div>\n </div>\n </Tooltip>\n </div>\n </CommonWrapper>\n );\n },\n);\n"]}
|
|
@@ -22,6 +22,11 @@ export interface HintProps extends CommonProps {
|
|
|
22
22
|
opened?: boolean;
|
|
23
23
|
/** Отключает анимацию. */
|
|
24
24
|
disableAnimations?: boolean;
|
|
25
|
+
/** Задержка в миллисекундах до появления подсказки по наведению.
|
|
26
|
+
* После показа одной подсказки следующие в серии открываются без задержки и анимации
|
|
27
|
+
* в течение примерно 500 мс после ухода курсора.
|
|
28
|
+
* @default 400 */
|
|
29
|
+
delayBeforeShow?: number;
|
|
25
30
|
/** Оборачивает вложенные элементы в `<span />`.
|
|
26
31
|
*
|
|
27
32
|
* _Примечание_: при двух и более вложенных элементах обёртка будет добавлена автоматически. */
|
|
@@ -35,7 +40,7 @@ export interface HintState {
|
|
|
35
40
|
opened: boolean;
|
|
36
41
|
position: PopupPinnablePositionsType;
|
|
37
42
|
}
|
|
38
|
-
type DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;
|
|
43
|
+
type DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper' | 'delayBeforeShow'>>;
|
|
39
44
|
/** Краткая подсказка, которая объясняет контрол, иконку и добавляет контекста.
|
|
40
45
|
* Всплывает при наведении на элемент. */
|
|
41
46
|
export declare class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {
|
|
@@ -51,6 +56,8 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> impl
|
|
|
51
56
|
private styles;
|
|
52
57
|
private emotion;
|
|
53
58
|
private cx;
|
|
59
|
+
private globalObject;
|
|
60
|
+
private disableAnimationsOnOpen;
|
|
54
61
|
private popupRef;
|
|
55
62
|
getAllowedPositions(): string[] | undefined;
|
|
56
63
|
componentDidUpdate(prevProps: HintProps): void;
|
|
@@ -63,5 +70,7 @@ export declare class Hint extends React.PureComponent<HintProps, HintState> impl
|
|
|
63
70
|
private handleMouseEnter;
|
|
64
71
|
private handleMouseLeave;
|
|
65
72
|
private open;
|
|
73
|
+
private closeByHover;
|
|
74
|
+
private clearTimer;
|
|
66
75
|
}
|
|
67
76
|
export {};
|
package/components/Hint/Hint.js
CHANGED
|
@@ -40,6 +40,7 @@ import { rootNode } from '../../lib/rootNode/index.js';
|
|
|
40
40
|
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
|
|
41
41
|
import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
|
|
42
42
|
import { getStyles } from './Hint.styles.js';
|
|
43
|
+
import { getShowDelay, HINT_DEFAULT_DELAY_BEFORE_SHOW, isShowDelaySkipped, markClosed, markDisposed, markOpened, } from './HintDelayController.js';
|
|
43
44
|
var HINT_BORDER_COLOR = 'transparent';
|
|
44
45
|
var isPinnablePosition = function (position) {
|
|
45
46
|
return PopupPinnablePositions.includes(position);
|
|
@@ -55,6 +56,7 @@ var Hint = /** @class */ (function (_super) {
|
|
|
55
56
|
opened: _this.getProps().manual ? !!_this.getProps().opened : false,
|
|
56
57
|
position: DefaultPosition,
|
|
57
58
|
};
|
|
59
|
+
_this.disableAnimationsOnOpen = false;
|
|
58
60
|
_this.popupRef = React.createRef();
|
|
59
61
|
_this.getAnchorElement = function () {
|
|
60
62
|
var _a;
|
|
@@ -64,25 +66,56 @@ var Hint = /** @class */ (function (_super) {
|
|
|
64
66
|
return _this.props.allowedPositions;
|
|
65
67
|
};
|
|
66
68
|
_this.handleMouseEnter = function (e) {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
+
var _a, _b, _c;
|
|
70
|
+
if (!_this.getProps().manual && !_this.timer && !_this.state.opened) {
|
|
71
|
+
var delay = getShowDelay(_this.globalObject, _this.getProps().delayBeforeShow);
|
|
72
|
+
if (delay > 0) {
|
|
73
|
+
_this.timer = (_c = (_b = (_a = _this.globalObject).setTimeout) === null || _b === void 0 ? void 0 : _b.call(_a, _this.open, delay)) !== null && _c !== void 0 ? _c : null;
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
_this.open();
|
|
77
|
+
}
|
|
69
78
|
}
|
|
70
79
|
if (_this.props.onMouseEnter) {
|
|
71
80
|
_this.props.onMouseEnter(e);
|
|
72
81
|
}
|
|
73
82
|
};
|
|
74
83
|
_this.handleMouseLeave = function (e) {
|
|
75
|
-
|
|
76
|
-
clearTimeout(_this.timer);
|
|
77
|
-
_this.timer = null;
|
|
78
|
-
_this.setState({ opened: false });
|
|
79
|
-
}
|
|
84
|
+
_this.closeByHover();
|
|
80
85
|
if (_this.props.onMouseLeave) {
|
|
81
86
|
_this.props.onMouseLeave(e);
|
|
82
87
|
}
|
|
83
88
|
};
|
|
84
89
|
_this.open = function () {
|
|
90
|
+
_this.clearTimer();
|
|
91
|
+
_this.disableAnimationsOnOpen = isShowDelaySkipped(_this.globalObject);
|
|
85
92
|
_this.setState({ opened: true });
|
|
93
|
+
markOpened(_this.globalObject);
|
|
94
|
+
};
|
|
95
|
+
_this.closeByHover = function (isUnmount) {
|
|
96
|
+
if (isUnmount === void 0) { isUnmount = false; }
|
|
97
|
+
if (_this.getProps().manual) {
|
|
98
|
+
_this.clearTimer();
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
var wasOpened = _this.state.opened;
|
|
102
|
+
_this.clearTimer();
|
|
103
|
+
if (!wasOpened) {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
if (isUnmount) {
|
|
107
|
+
markDisposed(_this.globalObject);
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
_this.setState({ opened: false });
|
|
111
|
+
markClosed(_this.globalObject);
|
|
112
|
+
};
|
|
113
|
+
_this.clearTimer = function () {
|
|
114
|
+
var _a, _b;
|
|
115
|
+
if (_this.timer) {
|
|
116
|
+
(_b = (_a = _this.globalObject).clearTimeout) === null || _b === void 0 ? void 0 : _b.call(_a, _this.timer);
|
|
117
|
+
_this.timer = null;
|
|
118
|
+
}
|
|
86
119
|
};
|
|
87
120
|
return _this;
|
|
88
121
|
}
|
|
@@ -95,19 +128,13 @@ var Hint = /** @class */ (function (_super) {
|
|
|
95
128
|
if (!manual) {
|
|
96
129
|
return;
|
|
97
130
|
}
|
|
98
|
-
|
|
99
|
-
clearTimeout(this.timer);
|
|
100
|
-
this.timer = null;
|
|
101
|
-
}
|
|
131
|
+
this.clearTimer();
|
|
102
132
|
if (opened !== prevProps.opened) {
|
|
103
133
|
this.setState({ opened: !!opened });
|
|
104
134
|
}
|
|
105
135
|
};
|
|
106
136
|
Hint.prototype.componentWillUnmount = function () {
|
|
107
|
-
|
|
108
|
-
clearTimeout(this.timer);
|
|
109
|
-
this.timer = null;
|
|
110
|
-
}
|
|
137
|
+
this.closeByHover(true);
|
|
111
138
|
};
|
|
112
139
|
Hint.prototype.render = function () {
|
|
113
140
|
var _this = this;
|
|
@@ -129,7 +156,7 @@ var Hint = /** @class */ (function (_super) {
|
|
|
129
156
|
if (isPinnablePosition(position)) {
|
|
130
157
|
_this.setState({ position: position });
|
|
131
158
|
}
|
|
132
|
-
}, disableAnimations: disableAnimations, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper, ref: this.popupRef, withoutMobile: true }, this.renderContent())));
|
|
159
|
+
}, disableAnimations: disableAnimations || this.disableAnimationsOnOpen, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper, ref: this.popupRef, withoutMobile: true }, this.renderContent())));
|
|
133
160
|
};
|
|
134
161
|
Hint.prototype.renderContent = function () {
|
|
135
162
|
var _a;
|
|
@@ -153,6 +180,7 @@ var Hint = /** @class */ (function (_super) {
|
|
|
153
180
|
maxWidth: 200,
|
|
154
181
|
disableAnimations: isTestEnv,
|
|
155
182
|
useWrapper: false,
|
|
183
|
+
delayBeforeShow: HINT_DEFAULT_DELAY_BEFORE_SHOW,
|
|
156
184
|
};
|
|
157
185
|
Hint = Hint_1 = __decorate([
|
|
158
186
|
withRenderEnvironment,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hint.js","sourceRoot":"","sources":["Hint.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { DefaultPosition, Popup, PopupPinnablePositions } from '../../internal/Popup/index.js';\nimport type {\n PopupPinnablePositionsType,\n PopupPositionsType,\n ShortPopupPositionsType,\n} from '../../internal/Popup/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport type { SafeTimer } from '../../lib/globalObject.js';\nimport type { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { MouseEventType } from '../../typings/event-types.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getStyles } from './Hint.styles.js';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nconst isPinnablePosition = (position: PopupPositionsType): position is PopupPinnablePositionsType => {\n return (PopupPinnablePositions as readonly PopupPositionsType[]).includes(position);\n};\n\nexport interface HintProps extends CommonProps {\n /** @ignore */\n children?: React.ReactNode;\n\n /** Текст подсказки. */\n text: React.ReactNode;\n\n /** Максимальная ширина подсказки. */\n maxWidth?: React.CSSProperties['maxWidth'];\n\n /** Приоритетное расположение подсказки относительно текста. */\n pos?: ShortPopupPositionsType | PopupPinnablePositionsType;\n\n /** Список позиций, которые может занимать подсказка. В списке обязательно должна быть позиция из пропа `pos`. */\n allowedPositions?: PopupPinnablePositionsType[];\n\n /** Переводит отображение подсказки в ручной режим, где состояние контролируется значением пропа `opened`. */\n manual?: boolean;\n\n /** Открывает подсказку. Работает только при `manual=true`. */\n opened?: boolean;\n\n /** Отключает анимацию. */\n disableAnimations?: boolean;\n\n /** Оборачивает вложенные элементы в `<span />`.\n *\n * _Примечание_: при двух и более вложенных элементах обёртка будет добавлена автоматически. */\n useWrapper?: boolean;\n\n /** Вызывается при наведении курсора (событие `onmouseenter`). */\n onMouseEnter?: (event: MouseEventType) => void;\n\n /** Вызывается при уходе курсора с объекта (событие `onmouseleave`). */\n onMouseLeave?: (event: MouseEventType) => void;\n}\n\nexport interface HintState {\n opened: boolean;\n position: PopupPinnablePositionsType;\n}\n\ntype DefaultProps = Required<Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper'>>;\n\n/** Краткая подсказка, которая объясняет контрол, иконку и добавляет контекста.\n * Всплывает при наведении на элемент. */\n@withRenderEnvironment\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n public static __KONTUR_REACT_UI__ = 'Hint';\n public static displayName = 'Hint';\n\n public static defaultProps: DefaultProps = {\n manual: false,\n opened: false,\n maxWidth: 200,\n disableAnimations: isTestEnv,\n useWrapper: false,\n };\n\n private getProps = createPropsGetter(Hint.defaultProps);\n\n public state: HintState = {\n opened: this.getProps().manual ? !!this.getProps().opened : false,\n position: DefaultPosition,\n };\n\n private timer: SafeTimer;\n private theme!: Theme;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private styles!: ReturnType<typeof getStyles>;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n\n private popupRef = React.createRef<Popup>();\n\n public getAllowedPositions(): string[] | undefined {\n return this.props.allowedPositions;\n }\n\n public componentDidUpdate(prevProps: HintProps) {\n const { opened, manual } = this.getProps();\n if (!manual) {\n return;\n }\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n if (opened !== prevProps.opened) {\n this.setState({ opened: !!opened });\n }\n }\n\n public componentWillUnmount() {\n if (this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n }\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupMargin: theme.hintMargin,\n popupBorder: theme.hintBorder,\n popupBorderRadius: theme.hintBorderRadius,\n },\n this.theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain(): React.JSX.Element {\n const { disableAnimations, useWrapper } = this.getProps();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <Popup\n hasPin={false}\n opened={this.state.opened}\n anchorElement={this.props.children}\n positions={this.getPositions()}\n pos={this.props.pos}\n backgroundColor={this.theme.hintBgColor}\n borderColor={HINT_BORDER_COLOR}\n onPositionChange={(position) => {\n if (isPinnablePosition(position)) {\n this.setState({ position });\n }\n }}\n disableAnimations={disableAnimations}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n useWrapper={useWrapper}\n ref={this.popupRef}\n withoutMobile\n >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\n }\n\n public getAnchorElement = (): Nullable<Element> => {\n return this.popupRef.current?.anchorElement;\n };\n\n private renderContent() {\n if (!this.props.text) {\n return null;\n }\n\n const { maxWidth } = this.getProps();\n const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n const className = this.cx({\n [this.styles.content(this.theme)]: true,\n [this.styles.contentCenter(this.theme)]: centerAlignPositions.includes(this.state.position),\n });\n return (\n <div className={className} style={{ maxWidth }}>\n {this.props.text}\n </div>\n );\n }\n\n private getPositions = (): PopupPinnablePositionsType[] | undefined => {\n return this.props.allowedPositions;\n };\n\n private handleMouseEnter = (e: MouseEventType) => {\n if (!this.getProps().manual && !this.timer) {\n this.timer = setTimeout(this.open, 400);\n }\n\n if (this.props.onMouseEnter) {\n this.props.onMouseEnter(e);\n }\n };\n\n private handleMouseLeave = (e: MouseEventType) => {\n if (!this.getProps().manual && this.timer) {\n clearTimeout(this.timer);\n this.timer = null;\n this.setState({ opened: false });\n }\n\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private open = () => {\n this.setState({ opened: true });\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Hint.js","sourceRoot":"","sources":["Hint.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { DefaultPosition, Popup, PopupPinnablePositions } from '../../internal/Popup/index.js';\nimport type {\n PopupPinnablePositionsType,\n PopupPositionsType,\n ShortPopupPositionsType,\n} from '../../internal/Popup/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport type { GlobalObject, SafeTimer } from '../../lib/globalObject.js';\nimport type { InstanceWithAnchorElement } from '../../lib/InstanceWithAnchorElement.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { MouseEventType } from '../../typings/event-types.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getStyles } from './Hint.styles.js';\nimport {\n getShowDelay,\n HINT_DEFAULT_DELAY_BEFORE_SHOW,\n isShowDelaySkipped,\n markClosed,\n markDisposed,\n markOpened,\n} from './HintDelayController.js';\n\nconst HINT_BORDER_COLOR = 'transparent';\n\nconst isPinnablePosition = (position: PopupPositionsType): position is PopupPinnablePositionsType => {\n return (PopupPinnablePositions as readonly PopupPositionsType[]).includes(position);\n};\n\nexport interface HintProps extends CommonProps {\n /** @ignore */\n children?: React.ReactNode;\n\n /** Текст подсказки. */\n text: React.ReactNode;\n\n /** Максимальная ширина подсказки. */\n maxWidth?: React.CSSProperties['maxWidth'];\n\n /** Приоритетное расположение подсказки относительно текста. */\n pos?: ShortPopupPositionsType | PopupPinnablePositionsType;\n\n /** Список позиций, которые может занимать подсказка. В списке обязательно должна быть позиция из пропа `pos`. */\n allowedPositions?: PopupPinnablePositionsType[];\n\n /** Переводит отображение подсказки в ручной режим, где состояние контролируется значением пропа `opened`. */\n manual?: boolean;\n\n /** Открывает подсказку. Работает только при `manual=true`. */\n opened?: boolean;\n\n /** Отключает анимацию. */\n disableAnimations?: boolean;\n\n /** Задержка в миллисекундах до появления подсказки по наведению.\n * После показа одной подсказки следующие в серии открываются без задержки и анимации\n * в течение примерно 500 мс после ухода курсора.\n * @default 400 */\n delayBeforeShow?: number;\n\n /** Оборачивает вложенные элементы в `<span />`.\n *\n * _Примечание_: при двух и более вложенных элементах обёртка будет добавлена автоматически. */\n useWrapper?: boolean;\n\n /** Вызывается при наведении курсора (событие `onmouseenter`). */\n onMouseEnter?: (event: MouseEventType) => void;\n\n /** Вызывается при уходе курсора с объекта (событие `onmouseleave`). */\n onMouseLeave?: (event: MouseEventType) => void;\n}\n\nexport interface HintState {\n opened: boolean;\n position: PopupPinnablePositionsType;\n}\n\ntype DefaultProps = Required<\n Pick<HintProps, 'manual' | 'opened' | 'maxWidth' | 'disableAnimations' | 'useWrapper' | 'delayBeforeShow'>\n>;\n\n/** Краткая подсказка, которая объясняет контрол, иконку и добавляет контекста.\n * Всплывает при наведении на элемент. */\n@withRenderEnvironment\n@rootNode\nexport class Hint extends React.PureComponent<HintProps, HintState> implements InstanceWithAnchorElement {\n public static __KONTUR_REACT_UI__ = 'Hint';\n public static displayName = 'Hint';\n\n public static defaultProps: DefaultProps = {\n manual: false,\n opened: false,\n maxWidth: 200,\n disableAnimations: isTestEnv,\n useWrapper: false,\n delayBeforeShow: HINT_DEFAULT_DELAY_BEFORE_SHOW,\n };\n\n private getProps = createPropsGetter(Hint.defaultProps);\n\n public state: HintState = {\n opened: this.getProps().manual ? !!this.getProps().opened : false,\n position: DefaultPosition,\n };\n\n private timer: SafeTimer;\n private theme!: Theme;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private styles!: ReturnType<typeof getStyles>;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private globalObject!: GlobalObject;\n private disableAnimationsOnOpen = false;\n\n private popupRef = React.createRef<Popup>();\n\n public getAllowedPositions(): string[] | undefined {\n return this.props.allowedPositions;\n }\n\n public componentDidUpdate(prevProps: HintProps) {\n const { opened, manual } = this.getProps();\n if (!manual) {\n return;\n }\n this.clearTimer();\n if (opened !== prevProps.opened) {\n this.setState({ opened: !!opened });\n }\n }\n\n public componentWillUnmount() {\n this.closeByHover(true);\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupMargin: theme.hintMargin,\n popupBorder: theme.hintBorder,\n popupBorderRadius: theme.hintBorderRadius,\n },\n this.theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public renderMain(): React.JSX.Element {\n const { disableAnimations, useWrapper } = this.getProps();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <Popup\n hasPin={false}\n opened={this.state.opened}\n anchorElement={this.props.children}\n positions={this.getPositions()}\n pos={this.props.pos}\n backgroundColor={this.theme.hintBgColor}\n borderColor={HINT_BORDER_COLOR}\n onPositionChange={(position) => {\n if (isPinnablePosition(position)) {\n this.setState({ position });\n }\n }}\n disableAnimations={disableAnimations || this.disableAnimationsOnOpen}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n useWrapper={useWrapper}\n ref={this.popupRef}\n withoutMobile\n >\n {this.renderContent()}\n </Popup>\n </CommonWrapper>\n );\n }\n\n public getAnchorElement = (): Nullable<Element> => {\n return this.popupRef.current?.anchorElement;\n };\n\n private renderContent() {\n if (!this.props.text) {\n return null;\n }\n\n const { maxWidth } = this.getProps();\n const centerAlignPositions = ['top', 'top center', 'bottom', 'bottom center'];\n const className = this.cx({\n [this.styles.content(this.theme)]: true,\n [this.styles.contentCenter(this.theme)]: centerAlignPositions.includes(this.state.position),\n });\n return (\n <div className={className} style={{ maxWidth }}>\n {this.props.text}\n </div>\n );\n }\n\n private getPositions = (): PopupPinnablePositionsType[] | undefined => {\n return this.props.allowedPositions;\n };\n\n private handleMouseEnter = (e: MouseEventType) => {\n if (!this.getProps().manual && !this.timer && !this.state.opened) {\n const delay = getShowDelay(this.globalObject, this.getProps().delayBeforeShow);\n if (delay > 0) {\n this.timer = this.globalObject.setTimeout?.(this.open, delay) ?? null;\n } else {\n this.open();\n }\n }\n\n if (this.props.onMouseEnter) {\n this.props.onMouseEnter(e);\n }\n };\n\n private handleMouseLeave = (e: MouseEventType) => {\n this.closeByHover();\n\n if (this.props.onMouseLeave) {\n this.props.onMouseLeave(e);\n }\n };\n\n private open = () => {\n this.clearTimer();\n this.disableAnimationsOnOpen = isShowDelaySkipped(this.globalObject);\n this.setState({ opened: true });\n markOpened(this.globalObject);\n };\n\n private closeByHover = (isUnmount = false) => {\n if (this.getProps().manual) {\n this.clearTimer();\n return;\n }\n\n const wasOpened = this.state.opened;\n\n this.clearTimer();\n\n if (!wasOpened) {\n return;\n }\n\n if (isUnmount) {\n markDisposed(this.globalObject);\n return;\n }\n\n this.setState({ opened: false });\n markClosed(this.globalObject);\n };\n\n private clearTimer = () => {\n if (this.timer) {\n this.globalObject.clearTimeout?.(this.timer);\n this.timer = null;\n }\n };\n}\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { GlobalObject } from '../../lib/globalObject.js';
|
|
2
|
+
export declare const HINT_DEFAULT_DELAY_BEFORE_SHOW = 400;
|
|
3
|
+
export declare const HINT_SKIP_DELAY_DURATION = 500;
|
|
4
|
+
export declare function getShowDelay(globalObject: GlobalObject, delayBeforeShow: number): number;
|
|
5
|
+
export declare function isShowDelaySkipped(globalObject: GlobalObject): boolean;
|
|
6
|
+
export declare function markOpened(globalObject: GlobalObject): void;
|
|
7
|
+
/** Starts the skip-delay window after a hover close. */
|
|
8
|
+
export declare function markClosed(globalObject: GlobalObject): void;
|
|
9
|
+
/** Drops warm-up state immediately (e.g. unmount). Does not keep the skip-delay window. */
|
|
10
|
+
export declare function markDisposed(globalObject: GlobalObject): void;
|
|
11
|
+
export declare function resetForTests(globalObject: GlobalObject): void;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export var HINT_DEFAULT_DELAY_BEFORE_SHOW = 400;
|
|
2
|
+
export var HINT_SKIP_DELAY_DURATION = 500;
|
|
3
|
+
var states = new WeakMap();
|
|
4
|
+
function getState(globalObject) {
|
|
5
|
+
var state = states.get(globalObject);
|
|
6
|
+
if (!state) {
|
|
7
|
+
state = { isOpenDelayed: true, skipDelayTimer: null };
|
|
8
|
+
states.set(globalObject, state);
|
|
9
|
+
}
|
|
10
|
+
return state;
|
|
11
|
+
}
|
|
12
|
+
function clearSkipDelayTimer(globalObject, state) {
|
|
13
|
+
var _a;
|
|
14
|
+
if (state.skipDelayTimer !== null) {
|
|
15
|
+
(_a = globalObject.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(globalObject, state.skipDelayTimer);
|
|
16
|
+
state.skipDelayTimer = null;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
export function getShowDelay(globalObject, delayBeforeShow) {
|
|
20
|
+
return getState(globalObject).isOpenDelayed ? delayBeforeShow : 0;
|
|
21
|
+
}
|
|
22
|
+
export function isShowDelaySkipped(globalObject) {
|
|
23
|
+
return !getState(globalObject).isOpenDelayed;
|
|
24
|
+
}
|
|
25
|
+
export function markOpened(globalObject) {
|
|
26
|
+
var state = getState(globalObject);
|
|
27
|
+
clearSkipDelayTimer(globalObject, state);
|
|
28
|
+
state.isOpenDelayed = false;
|
|
29
|
+
}
|
|
30
|
+
/** Starts the skip-delay window after a hover close. */
|
|
31
|
+
export function markClosed(globalObject) {
|
|
32
|
+
var _a, _b;
|
|
33
|
+
var state = getState(globalObject);
|
|
34
|
+
clearSkipDelayTimer(globalObject, state);
|
|
35
|
+
state.skipDelayTimer =
|
|
36
|
+
(_b = (_a = globalObject.setTimeout) === null || _a === void 0 ? void 0 : _a.call(globalObject, function () {
|
|
37
|
+
state.isOpenDelayed = true;
|
|
38
|
+
state.skipDelayTimer = null;
|
|
39
|
+
}, HINT_SKIP_DELAY_DURATION)) !== null && _b !== void 0 ? _b : null;
|
|
40
|
+
}
|
|
41
|
+
/** Drops warm-up state immediately (e.g. unmount). Does not keep the skip-delay window. */
|
|
42
|
+
export function markDisposed(globalObject) {
|
|
43
|
+
var state = getState(globalObject);
|
|
44
|
+
clearSkipDelayTimer(globalObject, state);
|
|
45
|
+
states.delete(globalObject);
|
|
46
|
+
}
|
|
47
|
+
export function resetForTests(globalObject) {
|
|
48
|
+
markDisposed(globalObject);
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=HintDelayController.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HintDelayController.js","sourceRoot":"","sources":["HintDelayController.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,8BAA8B,GAAG,GAAG,CAAC;AAClD,MAAM,CAAC,IAAM,wBAAwB,GAAG,GAAG,CAAC;AAO5C,IAAM,MAAM,GAAG,IAAI,OAAO,EAAgC,CAAC;AAE3D,SAAS,QAAQ,CAAC,YAA0B;IAC1C,IAAI,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAErC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,KAAK,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;QACtD,MAAM,CAAC,GAAG,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,mBAAmB,CAAC,YAA0B,EAAE,KAAqB;;IAC5E,IAAI,KAAK,CAAC,cAAc,KAAK,IAAI,EAAE,CAAC;QAClC,MAAA,YAAY,CAAC,YAAY,6DAAG,KAAK,CAAC,cAAc,CAAC,CAAC;QAClD,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC;IAC9B,CAAC;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,YAA0B,EAAE,eAAuB;IAC9E,OAAO,QAAQ,CAAC,YAAY,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;AACpE,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,YAA0B;IAC3D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,aAAa,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,YAA0B;IACnD,IAAM,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACrC,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IACzC,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC;AAC9B,CAAC;AAED,wDAAwD;AACxD,MAAM,UAAU,UAAU,CAAC,YAA0B;;IACnD,IAAM,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACrC,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAEzC,KAAK,CAAC,cAAc;QAClB,MAAA,MAAA,YAAY,CAAC,UAAU,6DAAG;YACxB,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;YAC3B,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC;QAC9B,CAAC,EAAE,wBAAwB,CAAC,mCAAI,IAAI,CAAC;AACzC,CAAC;AAED,2FAA2F;AAC3F,MAAM,UAAU,YAAY,CAAC,YAA0B;IACrD,IAAM,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACrC,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IACzC,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,YAA0B;IACtD,YAAY,CAAC,YAAY,CAAC,CAAC;AAC7B,CAAC","sourcesContent":["import type { GlobalObject, SafeTimer } from '../../lib/globalObject.js';\n\nexport const HINT_DEFAULT_DELAY_BEFORE_SHOW = 400;\nexport const HINT_SKIP_DELAY_DURATION = 500;\n\ninterface HintDelayState {\n isOpenDelayed: boolean;\n skipDelayTimer: SafeTimer;\n}\n\nconst states = new WeakMap<GlobalObject, HintDelayState>();\n\nfunction getState(globalObject: GlobalObject): HintDelayState {\n let state = states.get(globalObject);\n\n if (!state) {\n state = { isOpenDelayed: true, skipDelayTimer: null };\n states.set(globalObject, state);\n }\n\n return state;\n}\n\nfunction clearSkipDelayTimer(globalObject: GlobalObject, state: HintDelayState): void {\n if (state.skipDelayTimer !== null) {\n globalObject.clearTimeout?.(state.skipDelayTimer);\n state.skipDelayTimer = null;\n }\n}\n\nexport function getShowDelay(globalObject: GlobalObject, delayBeforeShow: number): number {\n return getState(globalObject).isOpenDelayed ? delayBeforeShow : 0;\n}\n\nexport function isShowDelaySkipped(globalObject: GlobalObject): boolean {\n return !getState(globalObject).isOpenDelayed;\n}\n\nexport function markOpened(globalObject: GlobalObject): void {\n const state = getState(globalObject);\n clearSkipDelayTimer(globalObject, state);\n state.isOpenDelayed = false;\n}\n\n/** Starts the skip-delay window after a hover close. */\nexport function markClosed(globalObject: GlobalObject): void {\n const state = getState(globalObject);\n clearSkipDelayTimer(globalObject, state);\n\n state.skipDelayTimer =\n globalObject.setTimeout?.(() => {\n state.isOpenDelayed = true;\n state.skipDelayTimer = null;\n }, HINT_SKIP_DELAY_DURATION) ?? null;\n}\n\n/** Drops warm-up state immediately (e.g. unmount). Does not keep the skip-delay window. */\nexport function markDisposed(globalObject: GlobalObject): void {\n const state = getState(globalObject);\n clearSkipDelayTimer(globalObject, state);\n states.delete(globalObject);\n}\n\nexport function resetForTests(globalObject: GlobalObject): void {\n markDisposed(globalObject);\n}\n"]}
|
|
@@ -66,6 +66,7 @@ var Toast = /** @class */ (function (_super) {
|
|
|
66
66
|
* @param {ToastPushConfig} config объект с конфигурацией отображения компонента Toast
|
|
67
67
|
*/
|
|
68
68
|
_this.push = function (notification, config) {
|
|
69
|
+
_this.rootRef = React.createRef();
|
|
69
70
|
if (_this.state.notification) {
|
|
70
71
|
_this.close();
|
|
71
72
|
}
|
|
@@ -92,11 +93,13 @@ var Toast = /** @class */ (function (_super) {
|
|
|
92
93
|
safelyCall(_this.props.onClose, _this.state.notification, _this.state.action);
|
|
93
94
|
_this.setState({ notification: null, action: null });
|
|
94
95
|
};
|
|
95
|
-
_this.setRootRef = function (element) {
|
|
96
|
-
_this.
|
|
96
|
+
_this.setRootRef = function (ref) { return function (element) {
|
|
97
|
+
if (ref === _this.rootRef) {
|
|
98
|
+
_this.setRootNode(element);
|
|
99
|
+
}
|
|
97
100
|
// @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.
|
|
98
|
-
|
|
99
|
-
};
|
|
101
|
+
ref.current = element;
|
|
102
|
+
}; };
|
|
100
103
|
_this._clearTimer = function () {
|
|
101
104
|
if (_this._timeout) {
|
|
102
105
|
clearTimeout(_this._timeout);
|
|
@@ -160,7 +163,7 @@ var Toast = /** @class */ (function (_super) {
|
|
|
160
163
|
enter: 200,
|
|
161
164
|
exit: 150,
|
|
162
165
|
}, enter: !isTestEnv, exit: !isTestEnv, nodeRef: this.rootRef },
|
|
163
|
-
React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootRef }, this.props),
|
|
166
|
+
React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootRef(this.rootRef) }, this.props),
|
|
164
167
|
React.createElement(ToastView, __assign({ ref: this._refToast }, toastProps)))));
|
|
165
168
|
};
|
|
166
169
|
Toast.__KONTUR_REACT_UI__ = 'Toast';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport type { SafeTimer } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getStyles } from './Toast.styles.js';\nimport { ToastView } from './ToastView.js';\nimport type { ToastViewProps } from './ToastView.js';\n\nexport interface Action {\n /** Текст на кнопке действия. */\n label: string;\n /** Выполняется при нажатии на кнопку действия. */\n handler: () => void;\n /** Уточняет доступное имя кнопки для вспомогательных технологий. */\n 'aria-label'?: string;\n}\n\n/**\n * Состояния тоста:\n *\n * - default стиль для отображения по умолчанию\n * - error стиль для отображения ошибок\n **/\nexport type ToastUse = 'default' | 'error';\n\nexport interface ToastState {\n notification: Nullable<React.ReactNode>;\n action: Nullable<Action>;\n id: number;\n showTime: Nullable<number>;\n showCloseIcon?: boolean;\n currentUse: ToastUse;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n /** Событие появления уведомления. */\n onPush?: (notification: string, action?: Action) => void;\n\n /** Событие закрытия уведомления. */\n onClose?: (notification: string, action?: Action) => void;\n\n /** Переменные темы поверх значений из контекста. */\n theme?: ThemeIn;\n}\n\n/** Объект с конфигурацией отображения Toast-а */\nexport interface ToastPushConfig {\n /** Добавляет кнопку действия в тост. */\n action?: Nullable<Action>;\n /** Длительность показа в миллисекундах. */\n showTime?: number;\n /** Показывает кнопку закрытия рядом с текстом. */\n showCloseIcon?: boolean;\n /** Определяет стиль оформления: обычный или ошибка (`error`). */\n use?: ToastUse;\n}\n\nexport type ToastPushApi = (notification: React.ReactNode, config?: ToastPushConfig) => void;\n\nexport type ToastClose = () => void;\n\nexport const ToastDataTids = {\n toastStatic: 'StaticToast',\n toastView: 'ToastView__root',\n action: 'ToastView__action',\n close: 'ToastView__close',\n} as const;\n\n/**\n * Тост — это короткое немодальное уведомление о результате действия пользователя: успех, ошибка или нейтральный статус.\n */\n@withRenderEnvironment\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n public static __KONTUR_REACT_UI__ = 'Toast';\n public static displayName = 'Toast';\n\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private styles!: ReturnType<typeof getStyles>;\n private emotion!: Emotion;\n private theme!: Theme;\n\n public _toast: Nullable<ToastView>;\n private _timeout: SafeTimer;\n private rootRef = React.createRef<HTMLElement>();\n\n constructor(props: ToastProps) {\n super(props);\n this.state = {\n notification: null,\n action: null,\n id: 0,\n showTime: null,\n showCloseIcon: false,\n currentUse: 'default',\n };\n }\n\n public componentWillUnmount() {\n this._clearTimer();\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n return (\n <ThemeContext.Provider value={this.theme}>\n <RenderContainer>\n <TransitionGroup>{this._renderToast()}</TransitionGroup>\n </RenderContainer>\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * Показывает тост с `notification` в качестве сообщения.\n * Тост автоматически скрывается через 3 или 7 секунд,\n * в зависимости от наличия у него кнопки `action` внутри config-а.\n * Время показа можно задать вручную, передав `showTime` внутри config-а.\n *\n * @public\n * @param {React.ReactNode} notification\n * @param {ToastPushConfig} config объект с конфигурацией отображения компонента Toast\n */\n public push: ToastPushApi = (notification: React.ReactNode, config?: ToastPushConfig) => {\n if (this.state.notification) {\n this.close();\n }\n\n safelyCall(this.props.onPush, notification, config?.action);\n\n this.setState(\n ({ id }) => ({\n notification,\n action: config?.action,\n id: id + 1,\n showTime: config?.showTime,\n showCloseIcon: config?.showCloseIcon,\n currentUse: config?.use ?? 'default',\n }),\n this._setTimer,\n );\n };\n\n /**\n * Закрывает текущее уведомление без ожидания таймера.\n *\n * @public\n */\n public close = (): void => {\n safelyCall(this.props.onClose, this.state.notification, this.state.action);\n this.setState({ notification: null, action: null });\n };\n\n private _renderToast() {\n const { notification, action, id, showCloseIcon, currentUse } = this.state;\n\n if (!notification) {\n return null;\n }\n\n const toastProps: ToastViewProps = {\n onMouseEnter: this._clearTimer,\n onMouseLeave: this._setTimer,\n onClose: this.close,\n children: notification,\n 'aria-label': this.props['aria-label'],\n action,\n showCloseIcon,\n use: currentUse,\n };\n\n return (\n <CSSTransition\n key={id}\n classNames={{\n enter: this.styles.enter(),\n enterActive: this.styles.enterActive(),\n exit: this.styles.exit(),\n exitActive: this.styles.exitActive(),\n }}\n timeout={{\n enter: 200,\n exit: 150,\n }}\n enter={!isTestEnv}\n exit={!isTestEnv}\n nodeRef={this.rootRef}\n >\n <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n <ToastView ref={this._refToast} {...toastProps} />\n </CommonWrapper>\n </CSSTransition>\n );\n }\n\n private setRootRef = (element: Nullable<Element>) => {\n this.setRootNode(element);\n // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n this.rootRef.current = element;\n };\n\n private _clearTimer = () => {\n if (this._timeout) {\n clearTimeout(this._timeout);\n this._timeout = null;\n }\n };\n\n private _setTimer = () => {\n this._clearTimer();\n\n let showTime = this.state.action ? 7000 : 3000;\n showTime = this.state.showTime ?? showTime;\n this._timeout = setTimeout(this.close, showTime);\n };\n\n private _refToast = (element: ToastView) => {\n this._toast = element;\n };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n if (fn) {\n fn(...args);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Toast.js","sourceRoot":"","sources":["Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGxE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAwD3C,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,WAAW,EAAE,aAAa;IAC1B,SAAS,EAAE,iBAAiB;IAC5B,MAAM,EAAE,mBAAmB;IAC3B,KAAK,EAAE,kBAAkB;CACjB,CAAC;AAEX;;GAEG;AAGH;IAA2B,yBAAuC;IAchE,eAAY,KAAiB;QAC3B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAHP,aAAO,GAAwC,KAAK,CAAC,SAAS,EAAE,CAAC;QAqCzE;;;;;;;;;WASG;QACI,UAAI,GAAiB,UAAC,YAA6B,EAAE,MAAwB;YAClF,KAAI,CAAC,OAAO,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;YAEjC,IAAI,KAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC5B,KAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC;YAED,UAAU,CAAC,KAAI,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC,CAAC;YAE5D,KAAI,CAAC,QAAQ,CACX,UAAC,EAAM;;oBAAJ,EAAE,QAAA;gBAAO,OAAA,CAAC;oBACX,YAAY,cAAA;oBACZ,MAAM,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM;oBACtB,EAAE,EAAE,EAAE,GAAG,CAAC;oBACV,QAAQ,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ;oBAC1B,aAAa,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa;oBACpC,UAAU,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,mCAAI,SAAS;iBACrC,CAAC,CAAA;aAAA,EACF,KAAI,CAAC,SAAS,CACf,CAAC;QACJ,CAAC,CAAC;QAEF;;;;WAIG;QACI,WAAK,GAAG;YACb,UAAU,CAAC,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,YAAY,EAAE,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC3E,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QACtD,CAAC,CAAC;QA4CM,gBAAU,GAAG,UAAC,GAAwC,IAAK,OAAA,UAAC,OAA0B;YAC5F,IAAI,GAAG,KAAK,KAAI,CAAC,OAAO,EAAE,CAAC;gBACzB,KAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC5B,CAAC;YACD,0FAA0F;YAC1F,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;QACxB,CAAC,EANkE,CAMlE,CAAC;QAEM,iBAAW,GAAG;YACpB,IAAI,KAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,YAAY,CAAC,KAAI,CAAC,QAAQ,CAAC,CAAC;gBAC5B,KAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEM,eAAS,GAAG;;YAClB,KAAI,CAAC,WAAW,EAAE,CAAC;YAEnB,IAAI,QAAQ,GAAG,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;YAC/C,QAAQ,GAAG,MAAA,KAAI,CAAC,KAAK,CAAC,QAAQ,mCAAI,QAAQ,CAAC;YAC3C,KAAI,CAAC,QAAQ,GAAG,UAAU,CAAC,KAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QACnD,CAAC,CAAC;QAEM,eAAS,GAAG,UAAC,OAAkB;YACrC,KAAI,CAAC,MAAM,GAAG,OAAO,CAAC;QACxB,CAAC,CAAC;QA9IA,KAAI,CAAC,KAAK,GAAG;YACX,YAAY,EAAE,IAAI;YAClB,MAAM,EAAE,IAAI;YACZ,EAAE,EAAE,CAAC;YACL,QAAQ,EAAE,IAAI;YACd,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,SAAS;SACtB,CAAC;;IACJ,CAAC;IAEM,oCAAoB,GAA3B;QACE,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEM,sBAAM,GAAb;QAAA,iBAiBC;QAhBC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,KAAI,CAAC,KAAK,CAAC,KAAc,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC9F,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAI,CAAC,KAAK;gBACtC,oBAAC,eAAe;oBACd,oBAAC,eAAe,QAAE,KAAI,CAAC,YAAY,EAAE,CAAmB,CACxC,CACI,CACzB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IA4CO,4BAAY,GAApB;QACQ,IAAA,KAA0D,IAAI,CAAC,KAAK,EAAlE,YAAY,kBAAA,EAAE,MAAM,YAAA,EAAE,EAAE,QAAA,EAAE,aAAa,mBAAA,EAAE,UAAU,gBAAe,CAAC;QAE3E,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAM,UAAU,GAAmB;YACjC,YAAY,EAAE,IAAI,CAAC,WAAW;YAC9B,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,OAAO,EAAE,IAAI,CAAC,KAAK;YACnB,QAAQ,EAAE,YAAY;YACtB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;YACtC,MAAM,QAAA;YACN,aAAa,eAAA;YACb,GAAG,EAAE,UAAU;SAChB,CAAC;QAEF,OAAO,CACL,oBAAC,aAAa,IACZ,GAAG,EAAE,EAAE,EACP,UAAU,EAAE;gBACV,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;gBAC1B,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE;gBACtC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;gBACxB,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;aACrC,EACD,OAAO,EAAE;gBACP,KAAK,EAAE,GAAG;gBACV,IAAI,EAAE,GAAG;aACV,EACD,KAAK,EAAE,CAAC,SAAS,EACjB,IAAI,EAAE,CAAC,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,OAAO;YAErB,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,IAAM,IAAI,CAAC,KAAK;gBACvE,oBAAC,SAAS,aAAC,GAAG,EAAE,IAAI,CAAC,SAAS,IAAM,UAAU,EAAI,CACpC,CACF,CACjB,CAAC;IACJ,CAAC;IAlIa,yBAAmB,GAAG,OAAO,AAAV,CAAW;IAC9B,iBAAW,GAAG,OAAO,AAAV,CAAW;IAFzB,KAAK;QAFjB,qBAAqB;QACrB,QAAQ;OACI,KAAK,CA+JjB;IAAD,YAAC;CAAA,AA/JD,CAA2B,KAAK,CAAC,SAAS,GA+JzC;SA/JY,KAAK;AAiKlB,SAAS,UAAU,CAAC,EAA8B;IAAE,cAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,6BAAc;;IAChE,IAAI,EAAE,EAAE,CAAC;QACP,EAAE,eAAI,IAAI,EAAE;IACd,CAAC;AACH,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport type { SafeTimer } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getStyles } from './Toast.styles.js';\nimport { ToastView } from './ToastView.js';\nimport type { ToastViewProps } from './ToastView.js';\n\nexport interface Action {\n /** Текст на кнопке действия. */\n label: string;\n /** Выполняется при нажатии на кнопку действия. */\n handler: () => void;\n /** Уточняет доступное имя кнопки для вспомогательных технологий. */\n 'aria-label'?: string;\n}\n\n/**\n * Состояния тоста:\n *\n * - default стиль для отображения по умолчанию\n * - error стиль для отображения ошибок\n **/\nexport type ToastUse = 'default' | 'error';\n\nexport interface ToastState {\n notification: Nullable<React.ReactNode>;\n action: Nullable<Action>;\n id: number;\n showTime: Nullable<number>;\n showCloseIcon?: boolean;\n currentUse: ToastUse;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n /** Событие появления уведомления. */\n onPush?: (notification: string, action?: Action) => void;\n\n /** Событие закрытия уведомления. */\n onClose?: (notification: string, action?: Action) => void;\n\n /** Переменные темы поверх значений из контекста. */\n theme?: ThemeIn;\n}\n\n/** Объект с конфигурацией отображения Toast-а */\nexport interface ToastPushConfig {\n /** Добавляет кнопку действия в тост. */\n action?: Nullable<Action>;\n /** Длительность показа в миллисекундах. */\n showTime?: number;\n /** Показывает кнопку закрытия рядом с текстом. */\n showCloseIcon?: boolean;\n /** Определяет стиль оформления: обычный или ошибка (`error`). */\n use?: ToastUse;\n}\n\nexport type ToastPushApi = (notification: React.ReactNode, config?: ToastPushConfig) => void;\n\nexport type ToastClose = () => void;\n\nexport const ToastDataTids = {\n toastStatic: 'StaticToast',\n toastView: 'ToastView__root',\n action: 'ToastView__action',\n close: 'ToastView__close',\n} as const;\n\n/**\n * Тост — это короткое немодальное уведомление о результате действия пользователя: успех, ошибка или нейтральный статус.\n */\n@withRenderEnvironment\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n public static __KONTUR_REACT_UI__ = 'Toast';\n public static displayName = 'Toast';\n\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n private styles!: ReturnType<typeof getStyles>;\n private emotion!: Emotion;\n private theme!: Theme;\n\n public _toast: Nullable<ToastView>;\n private _timeout: SafeTimer;\n private rootRef: React.RefObject<HTMLElement | null> = React.createRef();\n\n constructor(props: ToastProps) {\n super(props);\n this.state = {\n notification: null,\n action: null,\n id: 0,\n showTime: null,\n showCloseIcon: false,\n currentUse: 'default',\n };\n }\n\n public componentWillUnmount() {\n this._clearTimer();\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n return (\n <ThemeContext.Provider value={this.theme}>\n <RenderContainer>\n <TransitionGroup>{this._renderToast()}</TransitionGroup>\n </RenderContainer>\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * Показывает тост с `notification` в качестве сообщения.\n * Тост автоматически скрывается через 3 или 7 секунд,\n * в зависимости от наличия у него кнопки `action` внутри config-а.\n * Время показа можно задать вручную, передав `showTime` внутри config-а.\n *\n * @public\n * @param {React.ReactNode} notification\n * @param {ToastPushConfig} config объект с конфигурацией отображения компонента Toast\n */\n public push: ToastPushApi = (notification: React.ReactNode, config?: ToastPushConfig) => {\n this.rootRef = React.createRef();\n\n if (this.state.notification) {\n this.close();\n }\n\n safelyCall(this.props.onPush, notification, config?.action);\n\n this.setState(\n ({ id }) => ({\n notification,\n action: config?.action,\n id: id + 1,\n showTime: config?.showTime,\n showCloseIcon: config?.showCloseIcon,\n currentUse: config?.use ?? 'default',\n }),\n this._setTimer,\n );\n };\n\n /**\n * Закрывает текущее уведомление без ожидания таймера.\n *\n * @public\n */\n public close = (): void => {\n safelyCall(this.props.onClose, this.state.notification, this.state.action);\n this.setState({ notification: null, action: null });\n };\n\n private _renderToast() {\n const { notification, action, id, showCloseIcon, currentUse } = this.state;\n\n if (!notification) {\n return null;\n }\n\n const toastProps: ToastViewProps = {\n onMouseEnter: this._clearTimer,\n onMouseLeave: this._setTimer,\n onClose: this.close,\n children: notification,\n 'aria-label': this.props['aria-label'],\n action,\n showCloseIcon,\n use: currentUse,\n };\n\n return (\n <CSSTransition\n key={id}\n classNames={{\n enter: this.styles.enter(),\n enterActive: this.styles.enterActive(),\n exit: this.styles.exit(),\n exitActive: this.styles.exitActive(),\n }}\n timeout={{\n enter: 200,\n exit: 150,\n }}\n enter={!isTestEnv}\n exit={!isTestEnv}\n nodeRef={this.rootRef}\n >\n <CommonWrapper rootNodeRef={this.setRootRef(this.rootRef)} {...this.props}>\n <ToastView ref={this._refToast} {...toastProps} />\n </CommonWrapper>\n </CSSTransition>\n );\n }\n\n private setRootRef = (ref: React.RefObject<HTMLElement | null>) => (element: Nullable<Element>) => {\n if (ref === this.rootRef) {\n this.setRootNode(element);\n }\n // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n ref.current = element;\n };\n\n private _clearTimer = () => {\n if (this._timeout) {\n clearTimeout(this._timeout);\n this._timeout = null;\n }\n };\n\n private _setTimer = () => {\n this._clearTimer();\n\n let showTime = this.state.action ? 7000 : 3000;\n showTime = this.state.showTime ?? showTime;\n this._timeout = setTimeout(this.close, showTime);\n };\n\n private _refToast = (element: ToastView) => {\n this._toast = element;\n };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n if (fn) {\n fn(...args);\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skbkontur/react-ui",
|
|
3
|
-
"version": "6.4.
|
|
3
|
+
"version": "6.4.2",
|
|
4
4
|
"description": "UI Components",
|
|
5
5
|
"homepage": "https://tech.skbkontur.ru/kontur-ui",
|
|
6
6
|
"bugs": {
|
|
@@ -274,7 +274,7 @@
|
|
|
274
274
|
"dependencies": {
|
|
275
275
|
"@babel/runtime": "^7.24.6",
|
|
276
276
|
"@emotion/css": "^11.11.2",
|
|
277
|
-
"@skbkontur/colors": "^2.1.
|
|
277
|
+
"@skbkontur/colors": "^2.1.10",
|
|
278
278
|
"@skbkontur/react-imask": "^7.6.5",
|
|
279
279
|
"eventemitter3": "^5.0.1",
|
|
280
280
|
"focus-lock": "^1.3.5",
|