@skbkontur/react-ui 4.6.0 → 4.7.0
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 +36 -0
- package/cjs/components/ComboBox/ComboBox.d.ts +15 -0
- package/cjs/components/ComboBox/ComboBox.js +16 -0
- package/cjs/components/ComboBox/ComboBox.js.map +1 -1
- package/cjs/components/ComboBox/ComboBox.md +10 -1
- package/cjs/components/DropdownMenu/DropdownMenu.md +11 -9
- package/cjs/components/FileUploader/FileUploader.d.ts +9 -1
- package/cjs/components/FileUploader/FileUploader.js +67 -18
- package/cjs/components/FileUploader/FileUploader.js.map +1 -1
- package/cjs/components/FileUploader/FileUploader.mixins.d.ts +1 -0
- package/cjs/components/FileUploader/FileUploader.mixins.js +10 -0
- package/cjs/components/FileUploader/FileUploader.mixins.js.map +1 -0
- package/cjs/components/FileUploader/FileUploader.styles.d.ts +12 -1
- package/cjs/components/FileUploader/FileUploader.styles.js +119 -22
- package/cjs/components/FileUploader/FileUploader.styles.js.map +1 -1
- package/cjs/components/Hint/Hint.d.ts +1 -0
- package/cjs/components/Hint/Hint.js +6 -2
- package/cjs/components/Hint/Hint.js.map +1 -1
- package/cjs/components/Paging/Paging.js +20 -15
- package/cjs/components/Paging/Paging.js.map +1 -1
- package/cjs/components/Paging/Paging.md +13 -0
- package/cjs/components/Paging/Paging.styles.d.ts +6 -2
- package/cjs/components/Paging/Paging.styles.js +40 -15
- package/cjs/components/Paging/Paging.styles.js.map +1 -1
- package/cjs/components/Select/Select.js +5 -3
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +0 -1
- package/cjs/components/SidePage/SidePage.js +0 -2
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/SidePage/SidePageBody.d.ts +0 -1
- package/cjs/components/SidePage/SidePageBody.js +6 -11
- package/cjs/components/SidePage/SidePageBody.js.map +1 -1
- package/cjs/components/Toggle/Toggle.js +2 -1
- package/cjs/components/Toggle/Toggle.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxMenu.d.ts +1 -0
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js +3 -1
- package/cjs/internal/CustomComboBox/ComboBoxMenu.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.d.ts +1 -0
- package/cjs/internal/CustomComboBox/ComboBoxView.js +3 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.d.ts +1 -0
- package/cjs/internal/CustomComboBox/CustomComboBox.js +3 -1
- package/cjs/internal/CustomComboBox/CustomComboBox.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js +4 -1
- package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderControlContext.d.ts +2 -0
- package/cjs/internal/FileUploaderControl/FileUploaderControlContext.js +2 -0
- package/cjs/internal/FileUploaderControl/FileUploaderControlContext.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderControlProvider.js +4 -1
- package/cjs/internal/FileUploaderControl/FileUploaderControlProvider.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +3 -0
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.js +46 -11
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.styles.d.ts +7 -0
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.styles.js +54 -7
- package/cjs/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.styles.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.d.ts +2 -0
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.js +15 -3
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.js.map +1 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.d.ts +3 -0
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.js +19 -1
- package/cjs/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.js.map +1 -1
- package/cjs/internal/FileUploaderControl/hooks/useFileUploaderSize.d.ts +2 -0
- package/cjs/internal/FileUploaderControl/hooks/useFileUploaderSize.js +18 -0
- package/cjs/internal/FileUploaderControl/hooks/useFileUploaderSize.js.map +1 -0
- package/cjs/internal/Popup/Popup.d.ts +5 -0
- package/cjs/internal/Popup/Popup.js +10 -2
- package/cjs/internal/Popup/Popup.js.map +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/themes/DarkTheme.d.ts +1 -0
- package/cjs/internal/themes/DarkTheme.js +2 -1
- package/cjs/internal/themes/DarkTheme.js.map +1 -1
- package/cjs/internal/themes/DefaultTheme.d.ts +16 -0
- package/cjs/internal/themes/DefaultTheme.js +41 -1
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/cjs/lib/utils.d.ts +2 -3
- package/cjs/lib/utils.js +1 -2
- package/cjs/lib/utils.js.map +1 -1
- package/components/ComboBox/ComboBox/ComboBox.js.map +1 -1
- package/components/ComboBox/ComboBox.d.ts +15 -0
- package/components/ComboBox/ComboBox.md +10 -1
- package/components/DropdownMenu/DropdownMenu.md +11 -9
- package/components/FileUploader/FileUploader/FileUploader.js +56 -20
- package/components/FileUploader/FileUploader/FileUploader.js.map +1 -1
- package/components/FileUploader/FileUploader.d.ts +9 -1
- package/components/FileUploader/FileUploader.mixins/FileUploader.mixins.js +8 -0
- package/components/FileUploader/FileUploader.mixins/FileUploader.mixins.js.map +1 -0
- package/components/FileUploader/FileUploader.mixins/package.json +6 -0
- package/components/FileUploader/FileUploader.mixins.d.ts +1 -0
- package/components/FileUploader/FileUploader.styles/FileUploader.styles.js +51 -17
- package/components/FileUploader/FileUploader.styles/FileUploader.styles.js.map +1 -1
- package/components/FileUploader/FileUploader.styles.d.ts +12 -1
- package/components/Hint/Hint/Hint.js +13 -5
- package/components/Hint/Hint/Hint.js.map +1 -1
- package/components/Hint/Hint.d.ts +1 -0
- package/components/Paging/Paging/Paging.js +12 -9
- package/components/Paging/Paging/Paging.js.map +1 -1
- package/components/Paging/Paging.md +13 -0
- package/components/Paging/Paging.styles/Paging.styles.js +27 -15
- package/components/Paging/Paging.styles/Paging.styles.js.map +1 -1
- package/components/Paging/Paging.styles.d.ts +6 -2
- package/components/Select/Select/Select.js +5 -5
- package/components/Select/Select/Select.js.map +1 -1
- package/components/SidePage/SidePage/SidePage.js +0 -1
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +0 -1
- package/components/SidePage/SidePageBody/SidePageBody.js +1 -9
- package/components/SidePage/SidePageBody/SidePageBody.js.map +1 -1
- package/components/SidePage/SidePageBody.d.ts +0 -1
- package/components/Toggle/Toggle/Toggle.js +2 -1
- package/components/Toggle/Toggle/Toggle.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js +3 -1
- package/internal/CustomComboBox/ComboBoxMenu/ComboBoxMenu.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxMenu.d.ts +1 -0
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +3 -1
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxView.d.ts +1 -0
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js +1 -0
- package/internal/CustomComboBox/CustomComboBox/CustomComboBox.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBox.d.ts +1 -0
- package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js +5 -1
- package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderControlContext/FileUploaderControlContext.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderControlContext.d.ts +2 -0
- package/internal/FileUploaderControl/FileUploaderControlProvider/FileUploaderControlProvider.js +7 -1
- package/internal/FileUploaderControl/FileUploaderControlProvider/FileUploaderControlProvider.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile/FileUploaderFile.js +38 -13
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile/FileUploaderFile.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.d.ts +3 -0
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.styles/FileUploaderFile.styles.js +26 -5
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.styles/FileUploaderFile.styles.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFile/FileUploaderFile.styles.d.ts +7 -0
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList/FileUploaderFileList.js +13 -3
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList/FileUploaderFileList.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.d.ts +2 -0
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles/FileUploaderFileList.styles.js +10 -1
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles/FileUploaderFileList.styles.js.map +1 -1
- package/internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList.styles.d.ts +3 -0
- package/internal/FileUploaderControl/hooks/useFileUploaderSize/package.json +6 -0
- package/internal/FileUploaderControl/hooks/useFileUploaderSize/useFileUploaderSize.js +21 -0
- package/internal/FileUploaderControl/hooks/useFileUploaderSize/useFileUploaderSize.js.map +1 -0
- package/internal/FileUploaderControl/hooks/useFileUploaderSize.d.ts +2 -0
- package/internal/Popup/Popup/Popup.js +5 -1
- package/internal/Popup/Popup/Popup.js.map +1 -1
- package/internal/Popup/Popup.d.ts +5 -0
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/themes/DarkTheme/DarkTheme.js +1 -0
- package/internal/themes/DarkTheme/DarkTheme.js.map +1 -1
- package/internal/themes/DarkTheme.d.ts +1 -0
- package/internal/themes/DefaultTheme/DefaultTheme.js +64 -0
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/internal/themes/DefaultTheme.d.ts +16 -0
- package/lib/utils/utils.js.map +1 -1
- package/lib/utils.d.ts +2 -3
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,42 @@
|
|
|
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
|
+
# [4.7.0](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.6.1...@skbkontur/react-ui@4.7.0) (2022-10-31)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **FileUploader:** new prop size, remove min-width ([#2961](https://github.com/skbkontur/retail-ui/issues/2961)) ([841aa48](https://github.com/skbkontur/retail-ui/commit/841aa48d70258844986b862ac6aba9f32cee3042))
|
|
12
|
+
* **Hint:** text alignment at bottom center and top center positions ([#3009](https://github.com/skbkontur/retail-ui/issues/3009)) ([7c26321](https://github.com/skbkontur/retail-ui/commit/7c263214ee6cc88ff370da33d50e9ca44a6523f2))
|
|
13
|
+
* **Paging:** visual appearance of disabled state ([#3020](https://github.com/skbkontur/retail-ui/issues/3020)) ([801d630](https://github.com/skbkontur/retail-ui/commit/801d630883f2d3f7723a3ddd32cd9270f96a185f))
|
|
14
|
+
* **Select:** restore work of onFocus, onBlur and ref props ([#3000](https://github.com/skbkontur/retail-ui/issues/3000)) ([72600b6](https://github.com/skbkontur/retail-ui/commit/72600b61c59417f3f170d4c319e843759071df42))
|
|
15
|
+
* **toggle:** improve a11y of toggle component ([#3014](https://github.com/skbkontur/retail-ui/issues/3014)) ([e7d97df](https://github.com/skbkontur/retail-ui/commit/e7d97dfa419051bb542e2538bfa6cc85d69826e9))
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* **ComboBox:** add prop `itemWrapper` ([#3016](https://github.com/skbkontur/retail-ui/issues/3016)) ([bdb48bb](https://github.com/skbkontur/retail-ui/commit/bdb48bbfa425e743ebbafb4f0d079b0979ccdee7))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## [4.6.1](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.6.0...@skbkontur/react-ui@4.6.1) (2022-10-06)
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### Bug Fixes
|
|
30
|
+
|
|
31
|
+
* **Combobox:** fix list display logic when using "add" button ([#2999](https://github.com/skbkontur/retail-ui/issues/2999)) ([a48d69e](https://github.com/skbkontur/retail-ui/commit/a48d69e152f28af6ec82ee43f5f7808f69186710))
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
### Reverts
|
|
35
|
+
|
|
36
|
+
* Revert "feat(SidePage): update layout on resize SidePageBody (#3007)" (#3011) ([ff11a24](https://github.com/skbkontur/retail-ui/commit/ff11a24d1056c5e818125e4eb2fe871fb59800b2)), closes [#3007](https://github.com/skbkontur/retail-ui/issues/3007) [#3011](https://github.com/skbkontur/retail-ui/issues/3011)
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
6
42
|
# [4.6.0](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.5.3...@skbkontur/react-ui@4.6.0) (2022-10-04)
|
|
7
43
|
|
|
8
44
|
|
|
@@ -76,6 +76,21 @@ export interface ComboBoxProps<T> extends CommonProps {
|
|
|
76
76
|
* @default item => item.label
|
|
77
77
|
*/
|
|
78
78
|
renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;
|
|
79
|
+
/**
|
|
80
|
+
* Компонент, заменяющий собой обёртку элементов результата поиска.
|
|
81
|
+
*
|
|
82
|
+
* По умолчанию все элементы результата поиска оборачиваются в тег `<button />`.
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* itemWrapper={(item) => {
|
|
86
|
+
* if (item.value === 3) {
|
|
87
|
+
* return (props) => {
|
|
88
|
+
* return <a {...props} />
|
|
89
|
+
* }
|
|
90
|
+
* }
|
|
91
|
+
* }}
|
|
92
|
+
*/
|
|
93
|
+
itemWrapper?: (item?: T) => React.ComponentType<unknown>;
|
|
79
94
|
/**
|
|
80
95
|
* Функция для отрисовки сообщения о пустом результате поиска
|
|
81
96
|
* Если есть renderAddButton - не работает
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ComboBox.tsx"],"names":["ComboBox","rootNode","getProps","defaultProps","comboboxElement","customComboBoxRef","element","setRootNode","focus","blur","search","query","cancelSearch","open","close","selectInputText","reset","render","React","Component","__KONTUR_REACT_UI__","itemToValue","item","value","valueToString","label","renderValue","renderItem","menuAlign","searchOnFocus","drawArrow"],"mappings":"sUAAA;;AAEA;;;;;AAKA;AACA,gE
|
|
1
|
+
{"version":3,"sources":["ComboBox.tsx"],"names":["ComboBox","rootNode","getProps","defaultProps","comboboxElement","customComboBoxRef","element","setRootNode","focus","blur","search","query","cancelSearch","open","close","selectInputText","reset","render","React","Component","__KONTUR_REACT_UI__","itemToValue","item","value","valueToString","label","renderValue","renderItem","menuAlign","searchOnFocus","drawArrow"],"mappings":"sUAAA;;AAEA;;;;;AAKA;AACA,gE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyLaA,Q,OADZC,kB;;;;;;;;;;;;;AAcSC,IAAAA,Q,GAAW,0CAAkBF,QAAQ,CAACG,YAA3B,C;;AAEXC,IAAAA,e,GAA+C,I;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqF/CC,IAAAA,iB,GAAoB,UAACC,OAAD,EAA0C;AACpE,YAAKC,WAAL,CAAiBD,OAAjB;AACA,YAAKF,eAAL,GAAuBE,OAAvB;AACD,K,gDArFD;AACF;AACA,K,OACSE,K,GAAP,iBAAe,CACb,IAAI,KAAKJ,eAAT,EAA0B,CACxB,KAAKA,eAAL,CAAqBI,KAArB,GACD,CACF,C,CAED;AACF;AACA,K,QACSC,I,GAAP,gBAAc,CACZ,IAAI,KAAKL,eAAT,EAA0B,CACxB,KAAKA,eAAL,CAAqBK,IAArB,GACD,CACF,C,CAED;AACF;AACA;AACA;AACA;AACA;AACA,K,QACSC,M,GAAP,gBAAcC,KAAd,EAA8B,CAC5B,IAAI,KAAKP,eAAT,EAA0B,CACxB,KAAKA,eAAL,CAAqBM,MAArB,CAA4BC,KAA5B,EACD,CACF,C,CAED;AACF;AACA,K,QACSC,Y,GAAP,wBAAsB,CACpB,IAAI,KAAKR,eAAT,EAA0B,CACxB,KAAKA,eAAL,CAAqBQ,YAArB,GACD,CACF,C,CAED;AACF;AACA,K,QACSC,I,GAAP,gBAAc,CACZ,IAAI,KAAKT,eAAT,EAA0B,CACxB,KAAKA,eAAL,CAAqBS,IAArB,GACD,CACF,C,CAED;AACF;AACA,K,QACSC,K,GAAP,iBAAe,CACb,IAAI,KAAKV,eAAT,EAA0B,CACxB,KAAKA,eAAL,CAAqBU,KAArB,GACD,CACF,C,CAED;AACF;AACA;AACA,K,QACSC,e,GAAP,2BAAyB,CACvB,IAAI,KAAKX,eAAT,EAA0B,CACxB,KAAKA,eAAL,CAAqBW,eAArB,GACD,CACF,C,CAED;AACF;AACA;AACA,K,QACSC,K,GAAP,iBAAe,CACb,IAAI,KAAKZ,eAAT,EAA0B,CACxB,KAAKA,eAAL,CAAqBY,KAArB,GACD,CACF,C,QAEMC,M,GAAP,kBAAgB,CACd,oBAAO,6BAAC,8BAAD,6BAAoB,KAAKf,QAAL,EAApB,IAAqC,GAAG,EAAE,KAAKG,iBAA/C,IAAP,CACD,C,mBAlG6Ca,eAAMC,S,WACtCC,mB,GAAsB,U,UAEtBjB,Y,GAAkC,EAC9CkB,WAAW,EAAE,qBAACC,IAAD,UAAwBA,IAAI,CAACC,KAA7B,EADiC,EAE9CC,aAAa,EAAE,uBAACF,IAAD,UAAwBA,IAAI,CAACG,KAA7B,EAF+B,EAG9CC,WAAW,EAAE,qBAACJ,IAAD,UAAwBA,IAAI,CAACG,KAA7B,EAHiC,EAI9CE,UAAU,EAAE,oBAACL,IAAD,UAAwBA,IAAI,CAACG,KAA7B,EAJkC,EAK9CG,SAAS,EAAE,MALmC,EAM9CC,aAAa,EAAE,IAN+B,EAO9CC,SAAS,EAAE,IAPmC,E","sourcesContent":["import React from 'react';\n\nimport { CustomComboBox } from '../../internal/CustomComboBox';\nimport { Nullable } from '../../typings/utility-types';\nimport { MenuItemState } from '../MenuItem';\nimport { InputIconType } from '../Input';\nimport { CommonProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nexport interface ComboBoxProps<T> extends CommonProps {\n align?: 'left' | 'center' | 'right';\n /**\n * Вызывает функцию поиска `getItems` при фокусе и очистке поля ввода\n * @default true\n */\n searchOnFocus?: boolean;\n /**\n * Рисует справа иконку в виде стрелки\n * @default true\n */\n drawArrow?: boolean;\n\n autoFocus?: boolean;\n\n borderless?: boolean;\n\n /**\n * Не использовать Portal для рендеринга меню.\n * См. https://github.com/skbkontur/retail-ui/issues/15\n * @default false\n */\n disablePortal?: boolean;\n\n disabled?: boolean;\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n\n leftIcon?: InputIconType;\n\n rightIcon?: InputIconType;\n\n /**\n * Функция поиска элементов, должна возвращать Promise с массивом элементов.\n * По умолчанию ожидаются объекты с типом `{ value: string, label: string }`.\n *\n * Элементы могут быть любого типа. В этом случае необходимо определить\n * свойства `itemToValue`, `renderValue`, `renderItem`, `valueToString`\n */\n getItems: (query: string) => Promise<T[]>;\n\n /**\n * Необходим для сравнения полученных результатов с `value`\n * @default item => item.label\n */\n itemToValue?: (item: T) => string | number;\n\n maxLength?: number;\n\n menuAlign?: 'left' | 'right';\n\n onBlur?: () => void;\n\n /** Вызывается при изменении `value` */\n onValueChange?: (value: T) => void;\n\n onFocus?: () => void;\n\n /**\n * Вызывается при изменении текста в поле ввода,\n * если результатом функции будет строка,\n * то она станет следующим состоянием полем ввода\n */\n onInputValueChange?: (value: string) => Nullable<string> | void;\n\n /**\n * Функция для обработки ситуации, когда была введена\n * строка в инпут и был потерян фокус с элемента.\n *\n * Если при потере фокуса в выпадающем списке будет только один\n * элемент и результат `renderValue` с этим элементом будет\n * совпадать со значение в текстовом поле, то\n * сработает onValueChange со значением данного элемента\n *\n * Сама функция также может вернуть значение,\n * неравное `undefined`,\n * с которым будет вызван onValueChange.\n */\n onUnexpectedInput?: (value: string) => void | null | T;\n\n placeholder?: string;\n\n /**\n * Функция отрисовки элементов результата поиска.\n * Не применяется если элемент является функцией или React-элементом\n * @default item => item.label\n */\n renderItem?: (item: T, state?: MenuItemState) => React.ReactNode;\n\n /**\n * Компонент, заменяющий собой обёртку элементов результата поиска.\n *\n * По умолчанию все элементы результата поиска оборачиваются в тег `<button />`.\n *\n * @example\n * itemWrapper={(item) => {\n * if (item.value === 3) {\n * return (props) => {\n * return <a {...props} />\n * }\n * }\n * }}\n */\n itemWrapper?: (item?: T) => React.ComponentType<unknown>;\n\n /**\n * Функция для отрисовки сообщения о пустом результате поиска\n * Если есть renderAddButton - не работает\n */\n renderNotFound?: () => React.ReactNode;\n\n /**\n * Функция отображающая сообщение об общем количестве элементов.\n * `found` учитывает только компонент `MenuItem`. Им \"оборачиваются\" элементы, возвращаемые `getItems()`.\n */\n renderTotalCount?: (found: number, total: number) => React.ReactNode;\n\n /**\n * Функция отрисовки выбранного значения\n * @default item => item.label\n */\n renderValue?: (item: T) => React.ReactNode;\n\n /**\n * Функция отрисовки кнопки добавления в выпадающем списке\n */\n renderAddButton?: (query?: string) => React.ReactNode;\n\n /**\n * Общее количество элементов.\n * Необходим для работы `renderTotalCount`\n */\n totalCount?: number;\n\n /**\n * Выбранное значение\n * Ожидается, что `value` того же типа что и элементы в массиве,\n * возвращаемом в `getItems`\n */\n value?: Nullable<T>;\n\n /**\n * Необходим для преобразования `value` в строку при фокусировке\n * @default item => item.label\n */\n valueToString?: (item: T) => string;\n\n size?: 'small' | 'medium' | 'large';\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n\n width?: string | number;\n\n maxMenuHeight?: number | string;\n\n onMouseEnter?: (e: React.MouseEvent) => void;\n\n onMouseOver?: (e: React.MouseEvent) => void;\n\n onMouseLeave?: (e: React.MouseEvent) => void;\n\n onInputKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;\n\n inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];\n}\n\nexport interface ComboBoxItem {\n value: string;\n label: string;\n}\n\ntype DefaultProps<T> = Required<\n Pick<\n ComboBoxProps<T>,\n 'itemToValue' | 'valueToString' | 'renderValue' | 'renderItem' | 'menuAlign' | 'searchOnFocus' | 'drawArrow'\n >\n>;\n\n@rootNode\nexport class ComboBox<T = ComboBoxItem> extends React.Component<ComboBoxProps<T>> {\n public static __KONTUR_REACT_UI__ = 'ComboBox';\n\n public static defaultProps: DefaultProps<any> = {\n itemToValue: (item: ComboBoxItem) => item.value,\n valueToString: (item: ComboBoxItem) => item.label,\n renderValue: (item: ComboBoxItem) => item.label,\n renderItem: (item: ComboBoxItem) => item.label,\n menuAlign: 'left',\n searchOnFocus: true,\n drawArrow: true,\n };\n\n private getProps = createPropsGetter(ComboBox.defaultProps);\n\n private comboboxElement: Nullable<CustomComboBox<T>> = null;\n private setRootNode!: TSetRootNode;\n\n /**\n * @public\n */\n public focus() {\n if (this.comboboxElement) {\n this.comboboxElement.focus();\n }\n }\n\n /**\n * @public\n */\n public blur() {\n if (this.comboboxElement) {\n this.comboboxElement.blur();\n }\n }\n\n /**\n * Открывает выпадающий список и запускает поиск элементов\n *\n * @public\n * @param {string} [query] Текст поиска. По умолчанию берется\n * текст из инпута или результат `valueToString(value)`\n */\n public search(query?: string) {\n if (this.comboboxElement) {\n this.comboboxElement.search(query);\n }\n }\n\n /**\n * @public\n */\n public cancelSearch() {\n if (this.comboboxElement) {\n this.comboboxElement.cancelSearch();\n }\n }\n\n /**\n * @public Открывает выпадающий список\n */\n public open() {\n if (this.comboboxElement) {\n this.comboboxElement.open();\n }\n }\n\n /**\n * @public Закрывает выпадающий список\n */\n public close() {\n if (this.comboboxElement) {\n this.comboboxElement.close();\n }\n }\n\n /**\n * Выделяет текст внутри input\n * @public\n */\n public selectInputText() {\n if (this.comboboxElement) {\n this.comboboxElement.selectInputText();\n }\n }\n\n /**\n * Сбрасывает введенное пользователем значение\n * @public\n */\n public reset() {\n if (this.comboboxElement) {\n this.comboboxElement.reset();\n }\n }\n\n public render() {\n return <CustomComboBox {...this.getProps()} ref={this.customComboBoxRef} />;\n }\n\n private customComboBoxRef = (element: Nullable<CustomComboBox<T>>) => {\n this.setRootNode(element);\n this.comboboxElement = element;\n };\n}\n"]}
|
|
@@ -147,7 +147,7 @@ let renderItem = item => (
|
|
|
147
147
|
/>;
|
|
148
148
|
```
|
|
149
149
|
|
|
150
|
-
Переопределение renderValue и
|
|
150
|
+
Переопределение `renderValue`, `renderItem` и `itemWrapper`:
|
|
151
151
|
|
|
152
152
|
```jsx harmony
|
|
153
153
|
import OkIcon from '@skbkontur/react-icons/Ok';
|
|
@@ -226,6 +226,14 @@ const customRenderItem = item => (
|
|
|
226
226
|
</div>
|
|
227
227
|
);
|
|
228
228
|
|
|
229
|
+
const customItemWrapper = item => {
|
|
230
|
+
if (item.value === 3) {
|
|
231
|
+
return (props) => <div {...props} />;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
return (props) => <button {...props} />
|
|
235
|
+
}
|
|
236
|
+
|
|
229
237
|
const customRenderValue = item => (
|
|
230
238
|
<div
|
|
231
239
|
style={{
|
|
@@ -261,6 +269,7 @@ const customRenderValue = item => (
|
|
|
261
269
|
placeholder="Enter number"
|
|
262
270
|
value={selected}
|
|
263
271
|
renderItem={customRenderItem}
|
|
272
|
+
itemWrapper={customItemWrapper}
|
|
264
273
|
renderValue={customRenderValue}
|
|
265
274
|
width="400px"
|
|
266
275
|
/>
|
|
@@ -126,7 +126,7 @@ import { MenuItem } from '@skbkontur/react-ui';
|
|
|
126
126
|
Пример с чекбоксом внутри MenuItem.
|
|
127
127
|
|
|
128
128
|
```jsx harmony
|
|
129
|
-
import { MenuItem, Checkbox, Button } from '@skbkontur/react-ui';
|
|
129
|
+
import { MenuItem, Checkbox, Button, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
|
|
130
130
|
|
|
131
131
|
const [checked, setChecked] = React.useState(false);
|
|
132
132
|
|
|
@@ -143,14 +143,16 @@ const renderCaption = ({ openMenu, closeMenu }) => {
|
|
|
143
143
|
|
|
144
144
|
<DropdownMenu caption={renderCaption}>
|
|
145
145
|
<MenuItem onClick={(e) => e.preventDefault()}>Просто пункт</MenuItem>
|
|
146
|
-
<
|
|
147
|
-
|
|
148
|
-
e
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
146
|
+
<ThemeContext.Provider value={ThemeFactory.create({ menuItemHoverBg: 'initial' })}>
|
|
147
|
+
<MenuItem
|
|
148
|
+
onClick={(e) => {
|
|
149
|
+
e.preventDefault();
|
|
150
|
+
setChecked(!checked);
|
|
151
|
+
}}
|
|
152
|
+
>
|
|
153
|
+
<Checkbox checked={checked}>с чекбоксом</Checkbox>
|
|
154
|
+
</MenuItem>
|
|
155
|
+
</ThemeContext.Provider>
|
|
154
156
|
<MenuItem
|
|
155
157
|
onClick={(e) => {
|
|
156
158
|
e.preventDefault();
|
|
@@ -4,13 +4,21 @@ import { InstanceWithRootNode } from '../../lib/rootNode';
|
|
|
4
4
|
import { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';
|
|
5
5
|
import { CommonProps } from '../../internal/CommonWrapper';
|
|
6
6
|
import { Nullable } from '../../typings/utility-types';
|
|
7
|
-
|
|
7
|
+
export declare type FileUploaderSize = 'small' | 'medium' | 'large';
|
|
8
|
+
declare type FileUploaderOverriddenProps = 'size';
|
|
9
|
+
interface _FileUploaderProps extends CommonProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, FileUploaderOverriddenProps> {
|
|
8
10
|
/** Состояние ошибки всего контрола */
|
|
9
11
|
error?: boolean;
|
|
10
12
|
/** Состояние предупреждения всего контрола */
|
|
11
13
|
warning?: boolean;
|
|
12
14
|
/** Свойство ширины. */
|
|
13
15
|
width?: React.CSSProperties['width'];
|
|
16
|
+
/**
|
|
17
|
+
* Задаёт размер контрола.
|
|
18
|
+
*
|
|
19
|
+
* **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
|
|
20
|
+
*/
|
|
21
|
+
size?: FileUploaderSize;
|
|
14
22
|
/** Свойство, скрывающее отображение файлов. */
|
|
15
23
|
hideFiles?: boolean;
|
|
16
24
|
/** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */
|
|
@@ -19,8 +19,9 @@ var _client = require("../../lib/client");
|
|
|
19
19
|
var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
20
20
|
|
|
21
21
|
var _FileUploaderFileValidationResult = require("../../internal/FileUploaderControl/FileUploaderFileValidationResult");
|
|
22
|
+
var _useFileUploaderSize = require("../../internal/FileUploaderControl/hooks/useFileUploaderSize");
|
|
22
23
|
|
|
23
|
-
var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "renderFile"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
|
|
24
|
+
var _FileUploader2 = require("./FileUploader.styles");var _excluded = ["disabled", "error", "warning", "multiple", "width", "hideFiles", "onBlur", "onFocus", "onChange", "request", "validateBeforeUpload", "onRequestSuccess", "onRequestError", "size", "renderFile"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
|
|
24
25
|
|
|
25
26
|
var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
|
|
26
27
|
|
|
@@ -49,6 +50,18 @@ var stopPropagation = function stopPropagation(e) {return e.stopPropagation();};
|
|
|
49
50
|
|
|
50
51
|
|
|
51
52
|
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
52
65
|
|
|
53
66
|
|
|
54
67
|
|
|
@@ -70,7 +83,7 @@ var FileUploaderDataTids = {
|
|
|
70
83
|
|
|
71
84
|
var defaultRenderFile = function defaultRenderFile(file, fileNode) {return fileNode;};
|
|
72
85
|
|
|
73
|
-
var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {var _cx, _cx2, _cx3, _cx4;
|
|
86
|
+
var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {var _cx, _cx2, _cx3, _cx4, _cx5;
|
|
74
87
|
var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
|
|
75
88
|
|
|
76
89
|
var
|
|
@@ -89,17 +102,21 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
89
102
|
|
|
90
103
|
|
|
91
104
|
|
|
92
|
-
props.disabled,error = props.error,warning = props.warning,_props$multiple = props.multiple,multiple = _props$multiple === void 0 ? false : _props$multiple,_props$width = props.width,width = _props$width === void 0 ? theme.fileUploaderWidth : _props$width,_props$hideFiles = props.hideFiles,hideFiles = _props$hideFiles === void 0 ? false : _props$hideFiles,onBlur = props.onBlur,onFocus = props.onFocus,onChange = props.onChange,request = props.request,validateBeforeUpload = props.validateBeforeUpload,onRequestSuccess = props.onRequestSuccess,onRequestError = props.onRequestError,_props$renderFile = props.renderFile,renderFile = _props$renderFile === void 0 ? defaultRenderFile : _props$renderFile,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
93
105
|
|
|
94
|
-
|
|
106
|
+
props.disabled,error = props.error,warning = props.warning,_props$multiple = props.multiple,multiple = _props$multiple === void 0 ? false : _props$multiple,_props$width = props.width,width = _props$width === void 0 ? theme.fileUploaderWidth : _props$width,_props$hideFiles = props.hideFiles,hideFiles = _props$hideFiles === void 0 ? false : _props$hideFiles,onBlur = props.onBlur,onFocus = props.onFocus,onChange = props.onChange,request = props.request,validateBeforeUpload = props.validateBeforeUpload,onRequestSuccess = props.onRequestSuccess,onRequestError = props.onRequestError,_props$size = props.size,size = _props$size === void 0 ? 'small' : _props$size,_props$renderFile = props.renderFile,renderFile = _props$renderFile === void 0 ? defaultRenderFile : _props$renderFile,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
107
|
+
|
|
108
|
+
var _useContext =
|
|
109
|
+
(0, _react.useContext)(_FileUploaderControlContext.FileUploaderControlContext),files = _useContext.files,setFiles = _useContext.setFiles,removeFile = _useContext.removeFile,reset = _useContext.reset,setFileValidationResult = _useContext.setFileValidationResult,isMinLengthReached = _useContext.isMinLengthReached;
|
|
95
110
|
|
|
96
111
|
var locale = (0, _useControlLocale.useControlLocale)();
|
|
97
112
|
|
|
98
113
|
var inputRef = (0, _react.useRef)(null);
|
|
114
|
+
var fileDivRef = (0, _react.useRef)(null);
|
|
99
115
|
|
|
100
116
|
var isAsync = !!request;
|
|
101
117
|
var isSingleMode = !multiple;
|
|
102
118
|
|
|
119
|
+
var _useState = (0, _react.useState)(true),isLinkVisible = _useState[0],setIsLinkVisible = _useState[1];
|
|
103
120
|
var upload = (0, _useUpload.useUpload)(request, onRequestSuccess, onRequestError);
|
|
104
121
|
|
|
105
122
|
var tryValidateAndUpload = (0, _react.useCallback)(
|
|
@@ -117,6 +134,24 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
117
134
|
[validateBeforeUpload, isAsync, upload, setFileValidationResult]);
|
|
118
135
|
|
|
119
136
|
|
|
137
|
+
var sizeClassName = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
|
|
138
|
+
small: (0, _Emotion.cx)(_FileUploader2.jsStyles.sizeSmall(theme)),
|
|
139
|
+
medium: (0, _Emotion.cx)(_FileUploader2.jsStyles.sizeMedium(theme)),
|
|
140
|
+
large: (0, _Emotion.cx)(_FileUploader2.jsStyles.sizeLarge(theme)) });
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
var sizeIconClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
|
|
144
|
+
small: _FileUploader2.jsStyles.iconSmall(theme),
|
|
145
|
+
medium: _FileUploader2.jsStyles.iconMedium(theme),
|
|
146
|
+
large: _FileUploader2.jsStyles.iconLarge(theme) });
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
var contentInnerClass = (0, _useFileUploaderSize.useFileUploaderSize)(size, {
|
|
150
|
+
small: _FileUploader2.jsStyles.contentInnerSmall(theme),
|
|
151
|
+
medium: _FileUploader2.jsStyles.contentInnerMedium(theme),
|
|
152
|
+
large: _FileUploader2.jsStyles.contentInnerLarge(theme) });
|
|
153
|
+
|
|
154
|
+
|
|
120
155
|
/** common part **/
|
|
121
156
|
var handleChange = (0, _react.useCallback)(
|
|
122
157
|
function (newFiles) {
|
|
@@ -184,7 +219,7 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
184
219
|
reset]);
|
|
185
220
|
|
|
186
221
|
|
|
187
|
-
var
|
|
222
|
+
var _useState2 = (0, _react.useState)(false),focusedByTab = _useState2[0],setFocusedByTab = _useState2[1];
|
|
188
223
|
var handleInputChange = function handleInputChange(event) {
|
|
189
224
|
onChange == null ? void 0 : onChange(event);
|
|
190
225
|
handleChange(event.target.files);
|
|
@@ -210,7 +245,7 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
210
245
|
}
|
|
211
246
|
};
|
|
212
247
|
|
|
213
|
-
var
|
|
248
|
+
var _useState3 = (0, _react.useState)(false),hovered = _useState3[0],setHovered = _useState3[1];
|
|
214
249
|
|
|
215
250
|
var uploadButtonClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.uploadButton(theme), (_cx = {}, _cx[
|
|
216
251
|
_FileUploader2.jsStyles.uploadButtonFocus(theme)] = focusedByTab, _cx[
|
|
@@ -218,7 +253,8 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
218
253
|
_FileUploader2.jsStyles.hovered(theme)] = !disabled && hovered, _cx[
|
|
219
254
|
_FileUploader2.jsStyles.warning(theme)] = !!warning, _cx[
|
|
220
255
|
_FileUploader2.jsStyles.error(theme)] = !!error, _cx[
|
|
221
|
-
_FileUploader2.jsStyles.dragOver(theme)] = isDraggable && !disabled, _cx
|
|
256
|
+
_FileUploader2.jsStyles.dragOver(theme)] = isDraggable && !disabled, _cx[
|
|
257
|
+
sizeClassName] = true, _cx));
|
|
222
258
|
|
|
223
259
|
|
|
224
260
|
var uploadButtonWrapperClassNames = (0, _Emotion.cx)((_cx2 = {}, _cx2[
|
|
@@ -226,17 +262,26 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
226
262
|
|
|
227
263
|
|
|
228
264
|
var uploadButtonIconClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.icon(theme), (_cx3 = {}, _cx3[
|
|
229
|
-
_FileUploader2.jsStyles.iconDisabled(theme)] = disabled, _cx3
|
|
265
|
+
_FileUploader2.jsStyles.iconDisabled(theme)] = disabled, _cx3[
|
|
266
|
+
sizeIconClass] = true, _cx3));
|
|
230
267
|
|
|
231
268
|
|
|
232
269
|
var hasOneFile = files.length === 1;
|
|
233
270
|
var hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;
|
|
234
271
|
|
|
235
|
-
var
|
|
236
|
-
_FileUploader2.jsStyles.
|
|
237
|
-
|
|
272
|
+
var contentClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.content(), (_cx4 = {}, _cx4[
|
|
273
|
+
_FileUploader2.jsStyles.contentWithFiles()] = hasOneFileForSingle, _cx4));
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
var linkClassNames = (0, _Emotion.cx)(_FileUploader2.jsStyles.link(theme), (_cx5 = {}, _cx5[
|
|
277
|
+
_FileUploader2.jsStyles.linkHovered(theme)] = !disabled && hovered, _cx5[
|
|
278
|
+
_FileUploader2.jsStyles.linkDisabled(theme)] = disabled, _cx5));
|
|
238
279
|
|
|
239
280
|
|
|
281
|
+
(0, _react.useEffect)(function () {
|
|
282
|
+
setIsLinkVisible(hasOneFileForSingle ? !isMinLengthReached : true);
|
|
283
|
+
}, [isMinLengthReached, hasOneFileForSingle]);
|
|
284
|
+
|
|
240
285
|
var rootNodeRef = (0, _react.useRef)(null);
|
|
241
286
|
|
|
242
287
|
return /*#__PURE__*/(
|
|
@@ -247,7 +292,7 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
247
292
|
style: (0, _useMemoObject.useMemoObject)({ width: width }),
|
|
248
293
|
ref: rootNodeRef },
|
|
249
294
|
|
|
250
|
-
!hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/_react.default.createElement(_FileUploaderFileList.FileUploaderFileList, { renderFile: renderFile }), /*#__PURE__*/
|
|
295
|
+
!hideFiles && !isSingleMode && !!files.length && /*#__PURE__*/_react.default.createElement(_FileUploaderFileList.FileUploaderFileList, { renderFile: renderFile, size: size }), /*#__PURE__*/
|
|
251
296
|
_react.default.createElement("div", { className: uploadButtonWrapperClassNames }, /*#__PURE__*/
|
|
252
297
|
_react.default.createElement("label", {
|
|
253
298
|
onMouseEnter: function onMouseEnter() {return setHovered(true);},
|
|
@@ -255,21 +300,25 @@ var _FileUploader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
|
|
|
255
300
|
ref: labelRef,
|
|
256
301
|
className: uploadButtonClassNames }, /*#__PURE__*/
|
|
257
302
|
|
|
258
|
-
_react.default.createElement("div", {
|
|
303
|
+
_react.default.createElement("div", { className: contentInnerClass }, /*#__PURE__*/
|
|
304
|
+
_react.default.createElement("div", { "data-tid": FileUploaderDataTids.content, className: contentClassNames },
|
|
305
|
+
isLinkVisible && /*#__PURE__*/
|
|
259
306
|
_react.default.createElement("span", { "data-tid": FileUploaderDataTids.link, className: linkClassNames },
|
|
260
|
-
hasOneFileForSingle ? locale.choosedFile : locale.chooseFile),
|
|
307
|
+
hasOneFileForSingle ? locale.choosedFile : locale.chooseFile),
|
|
261
308
|
|
|
262
309
|
|
|
263
|
-
|
|
310
|
+
isLinkVisible && String.fromCharCode(0xa0) /* */, /*#__PURE__*/
|
|
311
|
+
_react.default.createElement("div", { className: hasOneFileForSingle ? _FileUploader2.jsStyles.afterLinkText_HasFiles() : _FileUploader2.jsStyles.afterLinkText() },
|
|
264
312
|
hasOneFileForSingle ? /*#__PURE__*/
|
|
265
|
-
_react.default.createElement("div", { className: _FileUploader2.jsStyles.singleFile() },
|
|
266
|
-
renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: files[0] }))) : /*#__PURE__*/
|
|
313
|
+
_react.default.createElement("div", { ref: fileDivRef, className: _FileUploader2.jsStyles.singleFile() },
|
|
314
|
+
renderFile(files[0], /*#__PURE__*/_react.default.createElement(_FileUploaderFile.FileUploaderFile, { file: files[0], size: size }))) : /*#__PURE__*/
|
|
267
315
|
|
|
268
316
|
|
|
269
317
|
_react.default.createElement(_react.default.Fragment, null,
|
|
270
318
|
locale.orDragHere, "\xA0", /*#__PURE__*/
|
|
271
319
|
_react.default.createElement("div", { className: uploadButtonIconClassNames }, /*#__PURE__*/
|
|
272
|
-
_react.default.createElement(_px.UploadIcon, null))))), /*#__PURE__*/
|
|
320
|
+
_react.default.createElement(_px.UploadIcon, null)))))), /*#__PURE__*/
|
|
321
|
+
|
|
273
322
|
|
|
274
323
|
|
|
275
324
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FileUploader.tsx"],"names":["stopPropagation","e","FileUploaderDataTids","root","content","link","defaultRenderFile","file","fileNode","_FileUploader","React","forwardRef","props","ref","theme","ThemeContext","disabled","error","warning","multiple","width","fileUploaderWidth","hideFiles","onBlur","onFocus","onChange","request","validateBeforeUpload","onRequestSuccess","onRequestError","renderFile","inputProps","FileUploaderControlContext","files","setFiles","removeFile","reset","setFileValidationResult","locale","inputRef","isAsync","isSingleMode","upload","tryValidateAndUpload","forEach","validationMessage","id","FileUploaderFileValidationResult","handleChange","newFiles","filesArray","Array","from","attachedFiles","map","getAttachedFile","length","handleDrop","event","dataTransfer","clearData","onDrop","isDraggable","labelRef","isWindowDraggable","windowRef","isBrowser","current","window","document","focus","keyListener","isTabPressed","blur","getRootNode","rootNodeRef","focusedByTab","setFocusedByTab","handleInputChange","target","handleFocus","requestAnimationFrame","handleBlur","hovered","setHovered","uploadButtonClassNames","jsStyles","uploadButton","uploadButtonFocus","dragOver","uploadButtonWrapperClassNames","windowDragOver","uploadButtonIconClassNames","icon","iconDisabled","hasOneFile","hasOneFileForSingle","linkClassNames","linkHovered","linkDisabled","choosedFile","chooseFile","afterLinkText","singleFile","orDragHere","fileInput","FileUploader","memo","displayName"],"mappings":"4jBAAA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,sD;;AAEA,IAAMA,eAAwC,GAAG,SAA3CA,eAA2C,CAACC,CAAD,UAAOA,CAAC,CAACD,eAAF,EAAP,EAAjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,IAAME,oBAAoB,GAAG;AAClCC,EAAAA,IAAI,EAAE,oBAD4B;AAElCC,EAAAA,OAAO,EAAE,uBAFyB;AAGlCC,EAAAA,IAAI,EAAE,oBAH4B,EAA7B,C;;;AAMP,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,IAAD,EAAiCC,QAAjC,UAAkEA,QAAlE,EAA1B;;AAEA,IAAMC,aAAa,gBAAGC,eAAMC,UAAN,CAAsD,UAACC,KAAD,EAA4BC,GAA5B,EAAoC;AAC9G,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACEC,EAAAA,QADF;;;;;;;;;;;;;;;AAgBIJ,EAAAA,KAhBJ,CACEI,QADF,CAEEC,KAFF,GAgBIL,KAhBJ,CAEEK,KAFF,CAGEC,OAHF,GAgBIN,KAhBJ,CAGEM,OAHF,mBAgBIN,KAhBJ,CAIEO,QAJF,CAIEA,QAJF,gCAIa,KAJb,kCAgBIP,KAhBJ,CAKEQ,KALF,CAKEA,KALF,6BAKUN,KAAK,CAACO,iBALhB,mCAgBIT,KAhBJ,CAMEU,SANF,CAMEA,SANF,iCAMc,KANd,oBAOEC,MAPF,GAgBIX,KAhBJ,CAOEW,MAPF,CAQEC,OARF,GAgBIZ,KAhBJ,CAQEY,OARF,CASEC,QATF,GAgBIb,KAhBJ,CASEa,QATF,CAUEC,OAVF,GAgBId,KAhBJ,CAUEc,OAVF,CAWEC,oBAXF,GAgBIf,KAhBJ,CAWEe,oBAXF,CAYEC,gBAZF,GAgBIhB,KAhBJ,CAYEgB,gBAZF,CAaEC,cAbF,GAgBIjB,KAhBJ,CAaEiB,cAbF,qBAgBIjB,KAhBJ,CAcEkB,UAdF,CAcEA,UAdF,kCAcexB,iBAdf,qBAeKyB,UAfL,+CAgBInB,KAhBJ;;AAkBA,oBAAwE,uBAAWoB,sDAAX,CAAxE,CAAQC,KAAR,eAAQA,KAAR,CAAeC,QAAf,eAAeA,QAAf,CAAyBC,UAAzB,eAAyBA,UAAzB,CAAqCC,KAArC,eAAqCA,KAArC,CAA4CC,uBAA5C,eAA4CA,uBAA5C;;AAEA,MAAMC,MAAM,GAAG,yCAAf;;AAEA,MAAMC,QAAQ,GAAG,mBAAyB,IAAzB,CAAjB;;AAEA,MAAMC,OAAO,GAAG,CAAC,CAACd,OAAlB;AACA,MAAMe,YAAY,GAAG,CAACtB,QAAtB;;AAEA,MAAMuB,MAAM,GAAG,0BAAUhB,OAAV,EAAmBE,gBAAnB,EAAqCC,cAArC,CAAf;;AAEA,MAAMc,oBAAoB,GAAG;AAC3B,YAACV,KAAD,EAAuC;AACrCA,IAAAA,KAAK,CAACW,OAAN,+GAAc,iBAAOrC,IAAP;AACcoB,gBAAAA,oBADd,sEAC6CA,oBAAoB,CAACpB,IAAD,CADjE,2CACNsC,iBADM;;AAGZ,oBAAI,CAACA,iBAAL,EAAwB;AACtBL,kBAAAA,OAAO,IAAIE,MAAM,CAACnC,IAAD,CAAjB;AACD,iBAFD,MAEO;AACL8B,kBAAAA,uBAAuB,CAAC9B,IAAI,CAACuC,EAAN,EAAUC,mEAAiC9B,KAAjC,CAAuC4B,iBAAvC,CAAV,CAAvB;AACD,iBAPW,wDAAd;;AASD,GAX0B;AAY3B,GAAClB,oBAAD,EAAuBa,OAAvB,EAAgCE,MAAhC,EAAwCL,uBAAxC,CAZ2B,CAA7B;;;AAeA;AACA,MAAMW,YAAY,GAAG;AACnB,YAACC,QAAD,EAA+B;AAC7B,QAAI,CAACA,QAAL,EAAe;AACb;AACD;;AAED,QAAIC,UAAU,GAAGC,KAAK,CAACC,IAAN,CAAWH,QAAX,CAAjB;;AAEA,QAAIR,YAAJ,EAAkB;AAChBS,MAAAA,UAAU,GAAG,CAACA,UAAU,CAAC,CAAD,CAAX,CAAb;AACD;;AAED,QAAMG,aAAa,GAAGH,UAAU,CAACI,GAAX,CAAeC,0BAAf,CAAtB;;AAEA,QAAId,YAAY,IAAIY,aAAa,CAACG,MAA9B,IAAwCvB,KAAK,CAACuB,MAAlD,EAA0D;AACxDrB,MAAAA,UAAU,CAACF,KAAK,CAAC,CAAD,CAAL,CAASa,EAAV,CAAV;AACD;;AAED,QAAIO,aAAa,CAACG,MAAlB,EAA0B;AACxBtB,MAAAA,QAAQ,CAACmB,aAAD,CAAR;AACAV,MAAAA,oBAAoB,CAACU,aAAD,CAApB;AACD;AACF,GAtBkB;AAuBnB,GAACV,oBAAD,EAAuBT,QAAvB,EAAiCO,YAAjC,EAA+CR,KAA/C,EAAsDE,UAAtD,CAvBmB,CAArB;;;AA0BA,MAAMsB,UAAU,GAAG;AACjB,YAACC,KAAD,EAAW;AACT,QAAI1C,QAAJ,EAAc;AACZ;AACD;;AAED,QAAQ2C,YAAR,GAAyBD,KAAzB,CAAQC,YAAR;AACA,QAAQ1B,KAAR,GAAkB0B,YAAlB,CAAQ1B,KAAR;;AAEA,QAAI,CAAAA,KAAK,QAAL,YAAAA,KAAK,CAAEuB,MAAP,IAAgB,CAApB,EAAuB;AACrBR,MAAAA,YAAY,CAACf,KAAD,CAAZ;AACA0B,MAAAA,YAAY,CAACC,SAAb;AACD;AACF,GAbgB;AAcjB,GAACZ,YAAD,EAAehC,QAAf,CAdiB,CAAnB;;;AAiBA,iBAAuC,uBAA0B,EAAE6C,MAAM,EAAEJ,UAAV,EAA1B,CAAvC,CAAQK,WAAR,YAAQA,WAAR,CAA0BC,QAA1B,YAAqBlD,GAArB;AACA,kBAA2D,wBAA3D,CAAqBmD,iBAArB,aAAQF,WAAR,CAA6CG,SAA7C,aAAwCpD,GAAxC;;AAEA,MAAIqD,iBAAJ,EAAe;AACbD,IAAAA,SAAS,CAACE,OAAV,GAAoBC,MAAM,CAACC,QAA3B;AACD;;AAED,MAAMC,KAAK,GAAG,wBAAY,YAAM;AAC9BC,6BAAYC,YAAZ,GAA2B,IAA3B;AACA,yBAAAjC,QAAQ,CAAC4B,OAAT,uCAAkBG,KAAlB;AACD,GAHa,EAGX,EAHW,CAAd;;AAKA,MAAMG,IAAI,GAAG,wBAAY,YAAM;AAC7B,0BAAAlC,QAAQ,CAAC4B,OAAT,wCAAkBM,IAAlB;AACD,GAFY,EAEV,EAFU,CAAb;;AAIA,kCAAoB5D,GAApB,EAAyB,oBAAO,EAAEyD,KAAK,EAALA,KAAF,EAASG,IAAI,EAAJA,IAAT,EAAerC,KAAK,EAALA,KAAf,EAAsBsC,WAAW,EAAE,+BAAMC,WAAW,CAACR,OAAlB,EAAnC,EAAP,EAAzB,EAAiG;AAC/FtD,EAAAA,GAD+F;AAE/F4D,EAAAA,IAF+F;AAG/FH,EAAAA,KAH+F;AAI/FlC,EAAAA,KAJ+F,CAAjG;;;AAOA,kBAAwC,qBAAS,KAAT,CAAxC,CAAOwC,YAAP,gBAAqBC,eAArB;AACA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACpB,KAAD,EAAgD;AACxEjC,IAAAA,QAAQ,QAAR,YAAAA,QAAQ,CAAGiC,KAAH,CAAR;AACAV,IAAAA,YAAY,CAACU,KAAK,CAACqB,MAAN,CAAa9C,KAAd,CAAZ;AACD,GAHD;;AAKA,MAAM+C,WAAW,GAAG,SAAdA,WAAc,CAAC/E,CAAD,EAA2C;AAC7D,QAAI,CAACe,QAAL,EAAe;AACb;AACA;AACAiE,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAIV,yBAAYC,YAAhB,EAA8B;AAC5BK,UAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,OAJoB,CAArB;AAKArD,MAAAA,OAAO,QAAP,YAAAA,OAAO,CAAGvB,CAAH,CAAP;AACD;AACF,GAXD;;AAaA,MAAMiF,UAAU,GAAG,SAAbA,UAAa,CAACjF,CAAD,EAA2C;AAC5D4E,IAAAA,eAAe,CAAC,KAAD,CAAf;AACA,QAAI,CAAC7D,QAAL,EAAe;AACbO,MAAAA,MAAM,QAAN,YAAAA,MAAM,CAAGtB,CAAH,CAAN;AACD;AACF,GALD;;AAOA,mBAA8B,qBAAS,KAAT,CAA9B,CAAOkF,OAAP,iBAAgBC,UAAhB;;AAEA,MAAMC,sBAAsB,GAAG,iBAAGC,wBAASC,YAAT,CAAsBzE,KAAtB,CAAH;AAC5BwE,0BAASE,iBAAT,CAA2B1E,KAA3B,CAD4B,IACQ8D,YADR;AAE5BU,0BAAStE,QAAT,CAAkBF,KAAlB,CAF4B,IAEDE,QAFC;AAG5BsE,0BAASH,OAAT,CAAiBrE,KAAjB,CAH4B,IAGF,CAACE,QAAD,IAAamE,OAHX;AAI5BG,0BAASpE,OAAT,CAAiBJ,KAAjB,CAJ4B,IAIF,CAAC,CAACI,OAJA;AAK5BoE,0BAASrE,KAAT,CAAeH,KAAf,CAL4B,IAKJ,CAAC,CAACG,KALE;AAM5BqE,0BAASG,QAAT,CAAkB3E,KAAlB,CAN4B,IAMDgD,WAAW,IAAI,CAAC9C,QANf,OAA/B;;;AASA,MAAM0E,6BAA6B,GAAG;AACnCJ,0BAASK,cAAT,CAAwB7E,KAAxB,CADmC,IACFkD,iBAAiB,IAAI,CAAChD,QADpB,QAAtC;;;AAIA,MAAM4E,0BAA0B,GAAG,iBAAGN,wBAASO,IAAT,CAAc/E,KAAd,CAAH;AAChCwE,0BAASQ,YAAT,CAAsBhF,KAAtB,CADgC,IACDE,QADC,QAAnC;;;AAIA,MAAM+E,UAAU,GAAG9D,KAAK,CAACuB,MAAN,KAAiB,CAApC;AACA,MAAMwC,mBAAmB,GAAGvD,YAAY,IAAIsD,UAAhB,IAA8B,CAACzE,SAA3D;;AAEA,MAAM2E,cAAc,GAAG,iBAAGX,wBAASjF,IAAT,CAAcS,KAAd,CAAH;AACpBwE,0BAASY,WAAT,CAAqBpF,KAArB,CADoB,IACU,CAACE,QAAD,IAAamE,OADvB;AAEpBG,0BAASa,YAAT,CAAsBrF,KAAtB,CAFoB,IAEWE,QAFX,QAAvB;;;AAKA,MAAM2D,WAAW,GAAG,mBAAO,IAAP,CAApB;;AAEA;AACE,iCAAC,4BAAD,EAAmB/D,KAAnB;AACE;AACE,kBAAUV,oBAAoB,CAACC,IADjC;AAEE,MAAA,SAAS,EAAEmF,wBAASnF,IAAT,CAAcW,KAAd,CAFb;AAGE,MAAA,KAAK,EAAE,kCAAc,EAAEM,KAAK,EAALA,KAAF,EAAd,CAHT;AAIE,MAAA,GAAG,EAAEuD,WAJP;;AAMG,KAACrD,SAAD,IAAc,CAACmB,YAAf,IAA+B,CAAC,CAACR,KAAK,CAACuB,MAAvC,iBAAiD,6BAAC,0CAAD,IAAsB,UAAU,EAAE1B,UAAlC,GANpD;AAOE,0CAAK,SAAS,EAAE4D,6BAAhB;AACE;AACE,MAAA,YAAY,EAAE,gCAAMN,UAAU,CAAC,IAAD,CAAhB,EADhB;AAEE,MAAA,YAAY,EAAE,gCAAMA,UAAU,CAAC,KAAD,CAAhB,EAFhB;AAGE,MAAA,GAAG,EAAErB,QAHP;AAIE,MAAA,SAAS,EAAEsB,sBAJb;;AAME,0CAAK,YAAUnF,oBAAoB,CAACE,OAApC,EAA6C,SAAS,EAAEkF,wBAASlF,OAAT,EAAxD;AACE,2CAAM,YAAUF,oBAAoB,CAACG,IAArC,EAA2C,SAAS,EAAE4F,cAAtD;AACGD,IAAAA,mBAAmB,GAAG1D,MAAM,CAAC8D,WAAV,GAAwB9D,MAAM,CAAC+D,UADrD,CADF;;;AAKE,0CAAK,SAAS,EAAEf,wBAASgB,aAAT,EAAhB;AACGN,IAAAA,mBAAmB;AAClB,0CAAK,SAAS,EAAEV,wBAASiB,UAAT,EAAhB;AACGzE,IAAAA,UAAU,CAACG,KAAK,CAAC,CAAD,CAAN,eAAW,6BAAC,kCAAD,IAAkB,IAAI,EAAEA,KAAK,CAAC,CAAD,CAA7B,GAAX,CADb,CADkB;;;AAKlB;AACGK,IAAAA,MAAM,CAACkE,UADV;AAEE,0CAAK,SAAS,EAAEZ,0BAAhB;AACE,iCAAC,cAAD,OADF,CAFF,CANJ,CALF,CANF;;;;;;AA0BE;AACM7D,IAAAA,UADN;AAEE,MAAA,GAAG,EAAEQ,QAFP;AAGE,MAAA,QAAQ,EAAEvB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAH5B;AAIE,MAAA,IAAI,EAAC,MAJP;AAKE,MAAA,QAAQ,EAAEA,QALZ;AAME,MAAA,QAAQ,EAAEG,QANZ;AAOE,MAAA,SAAS,EAAEmE,wBAASmB,SAAT,EAPb;AAQE,MAAA,OAAO,EAAEzG,eARX;AASE,MAAA,QAAQ,EAAE8E,iBATZ;AAUE,MAAA,OAAO,EAAEE,WAVX;AAWE,MAAA,MAAM,EAAEE;AACR;AAZF,QAaE,KAAK,EAAE,EAbT,IA1BF,CADF,CAPF,CADF,CADF;;;;;;;AAwDD,CAjOqB,CAAtB;;;;AAqOO,IAAMwB,YAAY,GAAG;AAC1BhG,eAAMiG,IAAN,CAAWlG,aAAX,CAD0B,CAArB,C;;AAGPiG,YAAY,CAACE,WAAb,GAA2B,cAA3B","sourcesContent":["import React, { useCallback, useContext, useImperativeHandle, useRef, useState } from 'react';\n\nimport { FileUploaderAttachedFile, getAttachedFile } from '../../internal/FileUploaderControl/fileUtils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { InstanceWithRootNode } from '../../lib/rootNode';\nimport { useMemoObject } from '../../hooks/useMemoObject';\nimport { FileUploaderControlContext } from '../../internal/FileUploaderControl/FileUploaderControlContext';\nimport { useControlLocale } from '../../internal/FileUploaderControl/hooks/useControlLocale';\nimport { useUpload } from '../../internal/FileUploaderControl/hooks/useUpload';\nimport { useDrop } from '../../hooks/useDrop';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { UploadIcon } from '../../internal/icons/16px';\nimport { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';\nimport { withFileUploaderControlProvider } from '../../internal/FileUploaderControl/withFileUploaderControlProvider';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { FileUploaderFile } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';\nimport { FileUploaderFileList } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';\nimport { isBrowser } from '../../lib/client';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';\n\nimport { jsStyles } from './FileUploader.styles';\n\nconst stopPropagation: React.ReactEventHandler = (e) => e.stopPropagation();\n\ninterface _FileUploaderProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {\n /** Состояние ошибки всего контрола */\n error?: boolean;\n /** Состояние предупреждения всего контрола */\n warning?: boolean;\n /** Свойство ширины. */\n width?: React.CSSProperties['width'];\n /** Свойство, скрывающее отображение файлов. */\n hideFiles?: boolean;\n\n /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */\n request?: (file: FileUploaderAttachedFile) => Promise<void>;\n /** Срабатывает при удачной попытке отправки через request */\n onRequestSuccess?: (fileId: string) => void;\n /** Срабатывает при неудачной попытке отправки через request */\n onRequestError?: (fileId: string) => void;\n\n /**\n * Функция валидации каждого файла.\n * Срабатывает после выбора файлов и перед попыткой отправить в request.\n * Чтобы вывести валидацию ошибки, промис должен вернуть строку.\n * */\n validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;\n\n /**\n * Функция, позволяющая кастомизировать файлы.\n * Через нее можно вешать кастомные валидации на каждый файл.\n * */\n renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;\n}\n\nexport interface FileUploaderRef extends InstanceWithRootNode {\n focus: () => void;\n blur: () => void;\n /** Сбрасывает выбранные файлы */\n reset: () => void;\n}\n\nexport const FileUploaderDataTids = {\n root: 'FileUploader__root',\n content: 'FileUploader__content',\n link: 'FileUploader__link',\n} as const;\n\nconst defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;\n\nconst _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {\n const theme = useContext(ThemeContext);\n\n const {\n disabled,\n error,\n warning,\n multiple = false,\n width = theme.fileUploaderWidth,\n hideFiles = false,\n onBlur,\n onFocus,\n onChange,\n request,\n validateBeforeUpload,\n onRequestSuccess,\n onRequestError,\n renderFile = defaultRenderFile,\n ...inputProps\n } = props;\n\n const { files, setFiles, removeFile, reset, setFileValidationResult } = useContext(FileUploaderControlContext);\n\n const locale = useControlLocale();\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const isAsync = !!request;\n const isSingleMode = !multiple;\n\n const upload = useUpload(request, onRequestSuccess, onRequestError);\n\n const tryValidateAndUpload = useCallback(\n (files: FileUploaderAttachedFile[]) => {\n files.forEach(async (file) => {\n const validationMessage = validateBeforeUpload && (await validateBeforeUpload(file));\n\n if (!validationMessage) {\n isAsync && upload(file);\n } else {\n setFileValidationResult(file.id, FileUploaderFileValidationResult.error(validationMessage));\n }\n });\n },\n [validateBeforeUpload, isAsync, upload, setFileValidationResult],\n );\n\n /** common part **/\n const handleChange = useCallback(\n (newFiles: FileList | null) => {\n if (!newFiles) {\n return;\n }\n\n let filesArray = Array.from(newFiles);\n\n if (isSingleMode) {\n filesArray = [filesArray[0]];\n }\n\n const attachedFiles = filesArray.map(getAttachedFile);\n\n if (isSingleMode && attachedFiles.length && files.length) {\n removeFile(files[0].id);\n }\n\n if (attachedFiles.length) {\n setFiles(attachedFiles);\n tryValidateAndUpload(attachedFiles);\n }\n },\n [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile],\n );\n\n const handleDrop = useCallback(\n (event) => {\n if (disabled) {\n return;\n }\n\n const { dataTransfer } = event;\n const { files } = dataTransfer;\n\n if (files?.length > 0) {\n handleChange(files);\n dataTransfer.clearData();\n }\n },\n [handleChange, disabled],\n );\n\n const { isDraggable, ref: labelRef } = useDrop<HTMLLabelElement>({ onDrop: handleDrop });\n const { isDraggable: isWindowDraggable, ref: windowRef } = useDrop<Document>();\n\n if (isBrowser) {\n windowRef.current = window.document;\n }\n\n const focus = useCallback(() => {\n keyListener.isTabPressed = true;\n inputRef.current?.focus();\n }, []);\n\n const blur = useCallback(() => {\n inputRef.current?.blur();\n }, []);\n\n useImperativeHandle(ref, () => ({ focus, blur, reset, getRootNode: () => rootNodeRef.current }), [\n ref,\n blur,\n focus,\n reset,\n ]);\n\n const [focusedByTab, setFocusedByTab] = useState(false);\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n handleChange(event.target.files);\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (!disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n onFocus?.(e);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedByTab(false);\n if (!disabled) {\n onBlur?.(e);\n }\n };\n\n const [hovered, setHovered] = useState(false);\n\n const uploadButtonClassNames = cx(jsStyles.uploadButton(theme), {\n [jsStyles.uploadButtonFocus(theme)]: focusedByTab,\n [jsStyles.disabled(theme)]: disabled,\n [jsStyles.hovered(theme)]: !disabled && hovered,\n [jsStyles.warning(theme)]: !!warning,\n [jsStyles.error(theme)]: !!error,\n [jsStyles.dragOver(theme)]: isDraggable && !disabled,\n });\n\n const uploadButtonWrapperClassNames = cx({\n [jsStyles.windowDragOver(theme)]: isWindowDraggable && !disabled,\n });\n\n const uploadButtonIconClassNames = cx(jsStyles.icon(theme), {\n [jsStyles.iconDisabled(theme)]: disabled,\n });\n\n const hasOneFile = files.length === 1;\n const hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;\n\n const linkClassNames = cx(jsStyles.link(theme), {\n [jsStyles.linkHovered(theme)]: !disabled && hovered,\n [jsStyles.linkDisabled(theme)]: disabled,\n });\n\n const rootNodeRef = useRef(null);\n\n return (\n <CommonWrapper {...props}>\n <div\n data-tid={FileUploaderDataTids.root}\n className={jsStyles.root(theme)}\n style={useMemoObject({ width })}\n ref={rootNodeRef}\n >\n {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} />}\n <div className={uploadButtonWrapperClassNames}>\n <label\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n ref={labelRef}\n className={uploadButtonClassNames}\n >\n <div data-tid={FileUploaderDataTids.content} className={jsStyles.content()}>\n <span data-tid={FileUploaderDataTids.link} className={linkClassNames}>\n {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}\n </span>\n \n <div className={jsStyles.afterLinkText()}>\n {hasOneFileForSingle ? (\n <div className={jsStyles.singleFile()}>\n {renderFile(files[0], <FileUploaderFile file={files[0]} />)}\n </div>\n ) : (\n <>\n {locale.orDragHere} \n <div className={uploadButtonIconClassNames}>\n <UploadIcon />\n </div>\n </>\n )}\n </div>\n </div>\n <input\n {...inputProps}\n ref={inputRef}\n tabIndex={disabled ? -1 : 0}\n type=\"file\"\n disabled={disabled}\n multiple={multiple}\n className={jsStyles.fileInput()}\n onClick={stopPropagation}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд\n value={''}\n />\n </label>\n </div>\n </div>\n </CommonWrapper>\n );\n});\n\nexport interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {}\n\nexport const FileUploader = withFileUploaderControlProvider<FileUploaderProps, FileUploaderRef>(\n React.memo(_FileUploader),\n);\nFileUploader.displayName = 'FileUploader';\n"]}
|
|
1
|
+
{"version":3,"sources":["FileUploader.tsx"],"names":["stopPropagation","e","FileUploaderDataTids","root","content","link","defaultRenderFile","file","fileNode","_FileUploader","React","forwardRef","props","ref","theme","ThemeContext","disabled","error","warning","multiple","width","fileUploaderWidth","hideFiles","onBlur","onFocus","onChange","request","validateBeforeUpload","onRequestSuccess","onRequestError","size","renderFile","inputProps","FileUploaderControlContext","files","setFiles","removeFile","reset","setFileValidationResult","isMinLengthReached","locale","inputRef","fileDivRef","isAsync","isSingleMode","isLinkVisible","setIsLinkVisible","upload","tryValidateAndUpload","forEach","validationMessage","id","FileUploaderFileValidationResult","sizeClassName","small","jsStyles","sizeSmall","medium","sizeMedium","large","sizeLarge","sizeIconClass","iconSmall","iconMedium","iconLarge","contentInnerClass","contentInnerSmall","contentInnerMedium","contentInnerLarge","handleChange","newFiles","filesArray","Array","from","attachedFiles","map","getAttachedFile","length","handleDrop","event","dataTransfer","clearData","onDrop","isDraggable","labelRef","isWindowDraggable","windowRef","isBrowser","current","window","document","focus","keyListener","isTabPressed","blur","getRootNode","rootNodeRef","focusedByTab","setFocusedByTab","handleInputChange","target","handleFocus","requestAnimationFrame","handleBlur","hovered","setHovered","uploadButtonClassNames","uploadButton","uploadButtonFocus","dragOver","uploadButtonWrapperClassNames","windowDragOver","uploadButtonIconClassNames","icon","iconDisabled","hasOneFile","hasOneFileForSingle","contentClassNames","contentWithFiles","linkClassNames","linkHovered","linkDisabled","choosedFile","chooseFile","String","fromCharCode","afterLinkText_HasFiles","afterLinkText","singleFile","orDragHere","fileInput","FileUploader","memo","displayName"],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { FileUploaderAttachedFile, getAttachedFile } from '../../internal/FileUploaderControl/fileUtils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { InstanceWithRootNode } from '../../lib/rootNode';\nimport { useMemoObject } from '../../hooks/useMemoObject';\nimport { FileUploaderControlContext } from '../../internal/FileUploaderControl/FileUploaderControlContext';\nimport { useControlLocale } from '../../internal/FileUploaderControl/hooks/useControlLocale';\nimport { useUpload } from '../../internal/FileUploaderControl/hooks/useUpload';\nimport { useDrop } from '../../hooks/useDrop';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { UploadIcon } from '../../internal/icons/16px';\nimport { FileUploaderControlProviderProps } from '../../internal/FileUploaderControl/FileUploaderControlProvider';\nimport { withFileUploaderControlProvider } from '../../internal/FileUploaderControl/withFileUploaderControlProvider';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { FileUploaderFile } from '../../internal/FileUploaderControl/FileUploaderFile/FileUploaderFile';\nimport { FileUploaderFileList } from '../../internal/FileUploaderControl/FileUploaderFileList/FileUploaderFileList';\nimport { isBrowser } from '../../lib/client';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { FileUploaderFileValidationResult } from '../../internal/FileUploaderControl/FileUploaderFileValidationResult';\nimport { useFileUploaderSize } from '../../internal/FileUploaderControl/hooks/useFileUploaderSize';\n\nimport { jsStyles } from './FileUploader.styles';\n\nconst stopPropagation: React.ReactEventHandler = (e) => e.stopPropagation();\n\nexport type FileUploaderSize = 'small' | 'medium' | 'large';\n\ntype FileUploaderOverriddenProps = 'size';\n\ninterface _FileUploaderProps\n extends CommonProps,\n Omit<React.InputHTMLAttributes<HTMLInputElement>, FileUploaderOverriddenProps> {\n /** Состояние ошибки всего контрола */\n error?: boolean;\n /** Состояние предупреждения всего контрола */\n warning?: boolean;\n /** Свойство ширины. */\n width?: React.CSSProperties['width'];\n /**\n * Задаёт размер контрола.\n *\n * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n */\n size?: FileUploaderSize;\n /** Свойство, скрывающее отображение файлов. */\n hideFiles?: boolean;\n\n /** Функция, через которую отправляем файлы. Используется для отслеживания статуса загрузки файла. */\n request?: (file: FileUploaderAttachedFile) => Promise<void>;\n /** Срабатывает при удачной попытке отправки через request */\n onRequestSuccess?: (fileId: string) => void;\n /** Срабатывает при неудачной попытке отправки через request */\n onRequestError?: (fileId: string) => void;\n\n /**\n * Функция валидации каждого файла.\n * Срабатывает после выбора файлов и перед попыткой отправить в request.\n * Чтобы вывести валидацию ошибки, промис должен вернуть строку.\n * */\n validateBeforeUpload?: (file: FileUploaderAttachedFile) => Promise<Nullable<string>>;\n\n /**\n * Функция, позволяющая кастомизировать файлы.\n * Через нее можно вешать кастомные валидации на каждый файл.\n * */\n renderFile?: (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => React.ReactNode;\n}\n\nexport interface FileUploaderRef extends InstanceWithRootNode {\n focus: () => void;\n blur: () => void;\n /** Сбрасывает выбранные файлы */\n reset: () => void;\n}\n\nexport const FileUploaderDataTids = {\n root: 'FileUploader__root',\n content: 'FileUploader__content',\n link: 'FileUploader__link',\n} as const;\n\nconst defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;\n\nconst _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {\n const theme = useContext(ThemeContext);\n\n const {\n disabled,\n error,\n warning,\n multiple = false,\n width = theme.fileUploaderWidth,\n hideFiles = false,\n onBlur,\n onFocus,\n onChange,\n request,\n validateBeforeUpload,\n onRequestSuccess,\n onRequestError,\n size = 'small',\n renderFile = defaultRenderFile,\n ...inputProps\n } = props;\n\n const { files, setFiles, removeFile, reset, setFileValidationResult, isMinLengthReached } =\n useContext(FileUploaderControlContext);\n\n const locale = useControlLocale();\n\n const inputRef = useRef<HTMLInputElement>(null);\n const fileDivRef = useRef<HTMLDivElement>(null);\n\n const isAsync = !!request;\n const isSingleMode = !multiple;\n\n const [isLinkVisible, setIsLinkVisible] = useState(true);\n const upload = useUpload(request, onRequestSuccess, onRequestError);\n\n const tryValidateAndUpload = useCallback(\n (files: FileUploaderAttachedFile[]) => {\n files.forEach(async (file) => {\n const validationMessage = validateBeforeUpload && (await validateBeforeUpload(file));\n\n if (!validationMessage) {\n isAsync && upload(file);\n } else {\n setFileValidationResult(file.id, FileUploaderFileValidationResult.error(validationMessage));\n }\n });\n },\n [validateBeforeUpload, isAsync, upload, setFileValidationResult],\n );\n\n const sizeClassName = useFileUploaderSize(size, {\n small: cx(jsStyles.sizeSmall(theme)),\n medium: cx(jsStyles.sizeMedium(theme)),\n large: cx(jsStyles.sizeLarge(theme)),\n });\n\n const sizeIconClass = useFileUploaderSize(size, {\n small: jsStyles.iconSmall(theme),\n medium: jsStyles.iconMedium(theme),\n large: jsStyles.iconLarge(theme),\n });\n\n const contentInnerClass = useFileUploaderSize(size, {\n small: jsStyles.contentInnerSmall(theme),\n medium: jsStyles.contentInnerMedium(theme),\n large: jsStyles.contentInnerLarge(theme),\n });\n\n /** common part **/\n const handleChange = useCallback(\n (newFiles: FileList | null) => {\n if (!newFiles) {\n return;\n }\n\n let filesArray = Array.from(newFiles);\n\n if (isSingleMode) {\n filesArray = [filesArray[0]];\n }\n\n const attachedFiles = filesArray.map(getAttachedFile);\n\n if (isSingleMode && attachedFiles.length && files.length) {\n removeFile(files[0].id);\n }\n\n if (attachedFiles.length) {\n setFiles(attachedFiles);\n tryValidateAndUpload(attachedFiles);\n }\n },\n [tryValidateAndUpload, setFiles, isSingleMode, files, removeFile],\n );\n\n const handleDrop = useCallback(\n (event) => {\n if (disabled) {\n return;\n }\n\n const { dataTransfer } = event;\n const { files } = dataTransfer;\n\n if (files?.length > 0) {\n handleChange(files);\n dataTransfer.clearData();\n }\n },\n [handleChange, disabled],\n );\n\n const { isDraggable, ref: labelRef } = useDrop<HTMLLabelElement>({ onDrop: handleDrop });\n const { isDraggable: isWindowDraggable, ref: windowRef } = useDrop<Document>();\n\n if (isBrowser) {\n windowRef.current = window.document;\n }\n\n const focus = useCallback(() => {\n keyListener.isTabPressed = true;\n inputRef.current?.focus();\n }, []);\n\n const blur = useCallback(() => {\n inputRef.current?.blur();\n }, []);\n\n useImperativeHandle(ref, () => ({ focus, blur, reset, getRootNode: () => rootNodeRef.current }), [\n ref,\n blur,\n focus,\n reset,\n ]);\n\n const [focusedByTab, setFocusedByTab] = useState(false);\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n handleChange(event.target.files);\n };\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n if (!disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n onFocus?.(e);\n }\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n setFocusedByTab(false);\n if (!disabled) {\n onBlur?.(e);\n }\n };\n\n const [hovered, setHovered] = useState(false);\n\n const uploadButtonClassNames = cx(jsStyles.uploadButton(theme), {\n [jsStyles.uploadButtonFocus(theme)]: focusedByTab,\n [jsStyles.disabled(theme)]: disabled,\n [jsStyles.hovered(theme)]: !disabled && hovered,\n [jsStyles.warning(theme)]: !!warning,\n [jsStyles.error(theme)]: !!error,\n [jsStyles.dragOver(theme)]: isDraggable && !disabled,\n [sizeClassName]: true,\n });\n\n const uploadButtonWrapperClassNames = cx({\n [jsStyles.windowDragOver(theme)]: isWindowDraggable && !disabled,\n });\n\n const uploadButtonIconClassNames = cx(jsStyles.icon(theme), {\n [jsStyles.iconDisabled(theme)]: disabled,\n [sizeIconClass]: true,\n });\n\n const hasOneFile = files.length === 1;\n const hasOneFileForSingle = isSingleMode && hasOneFile && !hideFiles;\n\n const contentClassNames = cx(jsStyles.content(), {\n [jsStyles.contentWithFiles()]: hasOneFileForSingle,\n });\n\n const linkClassNames = cx(jsStyles.link(theme), {\n [jsStyles.linkHovered(theme)]: !disabled && hovered,\n [jsStyles.linkDisabled(theme)]: disabled,\n });\n\n useEffect(() => {\n setIsLinkVisible(hasOneFileForSingle ? !isMinLengthReached : true);\n }, [isMinLengthReached, hasOneFileForSingle]);\n\n const rootNodeRef = useRef(null);\n\n return (\n <CommonWrapper {...props}>\n <div\n data-tid={FileUploaderDataTids.root}\n className={jsStyles.root(theme)}\n style={useMemoObject({ width })}\n ref={rootNodeRef}\n >\n {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} size={size} />}\n <div className={uploadButtonWrapperClassNames}>\n <label\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n ref={labelRef}\n className={uploadButtonClassNames}\n >\n <div className={contentInnerClass}>\n <div data-tid={FileUploaderDataTids.content} className={contentClassNames}>\n {isLinkVisible && (\n <span data-tid={FileUploaderDataTids.link} className={linkClassNames}>\n {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}\n </span>\n )}\n {isLinkVisible && String.fromCharCode(0xa0) /* */}\n <div className={hasOneFileForSingle ? jsStyles.afterLinkText_HasFiles() : jsStyles.afterLinkText()}>\n {hasOneFileForSingle ? (\n <div ref={fileDivRef} className={jsStyles.singleFile()}>\n {renderFile(files[0], <FileUploaderFile file={files[0]} size={size} />)}\n </div>\n ) : (\n <>\n {locale.orDragHere} \n <div className={uploadButtonIconClassNames}>\n <UploadIcon />\n </div>\n </>\n )}\n </div>\n </div>\n </div>\n <input\n {...inputProps}\n ref={inputRef}\n tabIndex={disabled ? -1 : 0}\n type=\"file\"\n disabled={disabled}\n multiple={multiple}\n className={jsStyles.fileInput()}\n onClick={stopPropagation}\n onChange={handleInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n // для того, чтобы срабатывало событие change при выборе одного и того же файла подряд\n value={''}\n />\n </label>\n </div>\n </div>\n </CommonWrapper>\n );\n});\n\nexport interface FileUploaderProps extends _FileUploaderProps, FileUploaderControlProviderProps {}\n\nexport const FileUploader = withFileUploaderControlProvider<FileUploaderProps, FileUploaderRef>(\n React.memo(_FileUploader),\n);\nFileUploader.displayName = 'FileUploader';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const fileUploaderSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => string;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.fileUploaderSizeMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
|
|
2
|
+
|
|
3
|
+
var fileUploaderSizeMixin = function fileUploaderSizeMixin(fontSize, lineHeight, paddingX, paddingY) {
|
|
4
|
+
return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n font-size: ", ";\n box-sizing: border-box;\n padding: ", " ", ";\n line-height: ", ";\n "])),
|
|
5
|
+
fontSize,
|
|
6
|
+
|
|
7
|
+
paddingY, paddingX,
|
|
8
|
+
lineHeight);
|
|
9
|
+
|
|
10
|
+
};exports.fileUploaderSizeMixin = fileUploaderSizeMixin;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["FileUploader.mixins.ts"],"names":["fileUploaderSizeMixin","fontSize","lineHeight","paddingX","paddingY","css"],"mappings":"2RAAA,oD;;AAEO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,QAAD,EAAmBC,UAAnB,EAAuCC,QAAvC,EAAyDC,QAAzD,EAA8E;AACjH,aAAOC,YAAP;AACeJ,EAAAA,QADf;;AAGaG,EAAAA,QAHb,EAGyBD,QAHzB;AAIiBD,EAAAA,UAJjB;;AAMD,CAPM,C","sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nexport const fileUploaderSizeMixin = (fontSize: string, lineHeight: string, paddingX: string, paddingY: string) => {\n return css`\n font-size: ${fontSize};\n box-sizing: border-box;\n padding: ${paddingY} ${paddingX};\n line-height: ${lineHeight};\n `;\n};\n"]}
|
|
@@ -7,16 +7,27 @@ export declare const jsStyles: {
|
|
|
7
7
|
dragOver(t: Theme): string;
|
|
8
8
|
windowDragOver(t: Theme): string;
|
|
9
9
|
content(): string;
|
|
10
|
+
contentWithFiles(): string;
|
|
11
|
+
contentInnerSmall(t: Theme): string;
|
|
12
|
+
contentInnerMedium(t: Theme): string;
|
|
13
|
+
contentInnerLarge(t: Theme): string;
|
|
10
14
|
fileInput(): string;
|
|
11
15
|
afterLinkText(): string;
|
|
16
|
+
afterLinkText_HasFiles(): string;
|
|
12
17
|
warning(t: Theme): string;
|
|
13
18
|
error(t: Theme): string;
|
|
14
19
|
hovered(t: Theme): string;
|
|
20
|
+
linkHovered(t: Theme): string;
|
|
15
21
|
disabled(t: Theme): string;
|
|
16
22
|
icon(t: Theme): string;
|
|
17
23
|
iconDisabled(t: Theme): string;
|
|
18
24
|
link(t: Theme): string;
|
|
19
|
-
linkHovered(t: Theme): string;
|
|
20
25
|
linkDisabled(t: Theme): string;
|
|
21
26
|
singleFile(): string;
|
|
27
|
+
sizeSmall(t: Theme): string;
|
|
28
|
+
sizeMedium(t: Theme): string;
|
|
29
|
+
sizeLarge(t: Theme): string;
|
|
30
|
+
iconSmall(t: Theme): string;
|
|
31
|
+
iconMedium(t: Theme): string;
|
|
32
|
+
iconLarge(t: Theme): string;
|
|
22
33
|
};
|