diff --git a/src/attach/README.md b/src/attach/README.md index 6dcb5c74db..1141e144e3 100644 --- a/src/attach/README.md +++ b/src/attach/README.md @@ -54,3 +54,22 @@ function handleChange(value) { ``` + +С отображением прогресса загрузки файла +```jsx +function handleChange(value) { + setState({ value }); +} + +
+
+ +
+
+``` \ No newline at end of file diff --git a/src/attach/attach.css b/src/attach/attach.css index 06ea981f3b..7dc91b62f2 100644 --- a/src/attach/attach.css +++ b/src/attach/attach.css @@ -67,6 +67,7 @@ &__no-file { display: inline; margin-left: 0.5em; + text-align: center; } &__clear { @@ -85,6 +86,10 @@ } } + &__progress-bar { + margin-top: var(--gap-2xs); + } + &_disabled &__control { cursor: default; } diff --git a/src/attach/attach.jsx b/src/attach/attach.jsx index 0320bfce9f..b67d6aa73b 100644 --- a/src/attach/attach.jsx +++ b/src/attach/attach.jsx @@ -8,6 +8,7 @@ import Type from 'prop-types'; import Button from '../button/button'; import IconAttachment from '../icon/action/attachment'; +import ProgressBar from '../progress-bar'; import cn from '../cn'; import performance from '../performance'; @@ -119,8 +120,10 @@ class Attach extends React.Component { accept: Type.string, /** Управление возможностью изменения значения компонента */ disabled: Type.bool, - /** Управляет возможностью выбора нескольких файлов */ + /** Управление возможностью выбора нескольких файлов */ multiple: Type.bool, + /** Процент выполнения загрузки файла */ + progressBarPercent: Type.number, /** Размер компонента */ size: Type.oneOf(['s', 'm', 'l', 'xl']), /** Тема компонента */ @@ -280,6 +283,12 @@ class Attach extends React.Component { className={ cn('clear') } onClick={ this.handleClearClick } /> + { typeof this.props.progressBarPercent !== 'undefined' && ( + + ) } ); }