@transferwise/components 46.20.0 → 46.21.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/build/i18n/cs.json +2 -2
- package/build/i18n/de.json +2 -2
- package/build/i18n/en.json +2 -2
- package/build/i18n/es.json +2 -2
- package/build/i18n/fr.json +2 -2
- package/build/i18n/hu.json +2 -2
- package/build/i18n/id.json +2 -2
- package/build/i18n/it.json +2 -2
- package/build/i18n/ja.json +2 -2
- package/build/i18n/pl.json +2 -2
- package/build/i18n/pt.json +2 -2
- package/build/i18n/ro.json +2 -2
- package/build/i18n/ru.json +2 -2
- package/build/i18n/th.json +2 -2
- package/build/i18n/tr.json +2 -2
- package/build/i18n/zh-CN.json +2 -2
- package/build/i18n/zh-HK.json +2 -2
- package/build/index.esm.js +91 -127
- package/build/index.esm.js.map +1 -1
- package/build/index.js +92 -128
- package/build/index.js.map +1 -1
- package/build/types/circularButton/CircularButton.d.ts +2 -2
- package/build/types/circularButton/CircularButton.d.ts.map +1 -1
- package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
- package/build/types/common/index.d.ts +0 -1
- package/build/types/index.d.ts +2 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/types/promoCard/PromoCard.d.ts.map +1 -1
- package/build/types/slidingPanel/SlidingPanel.d.ts +12 -17
- package/build/types/slidingPanel/SlidingPanel.d.ts.map +1 -1
- package/build/types/slidingPanel/index.d.ts +2 -1
- package/build/types/slidingPanel/index.d.ts.map +1 -1
- package/build/types/sticky/Sticky.d.ts +9 -14
- package/build/types/sticky/Sticky.d.ts.map +1 -1
- package/build/types/sticky/index.d.ts +2 -1
- package/build/types/sticky/index.d.ts.map +1 -1
- package/build/types/upload/Upload.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/circularButton/CircularButton.tsx +2 -2
- package/src/common/bottomSheet/BottomSheet.tsx +47 -41
- package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap +37 -33
- package/src/common/index.js +0 -1
- package/src/i18n/cs.json +2 -2
- package/src/i18n/de.json +2 -2
- package/src/i18n/en.json +2 -2
- package/src/i18n/es.json +2 -2
- package/src/i18n/fr.json +2 -2
- package/src/i18n/hu.json +2 -2
- package/src/i18n/id.json +2 -2
- package/src/i18n/it.json +2 -2
- package/src/i18n/ja.json +2 -2
- package/src/i18n/pl.json +2 -2
- package/src/i18n/pt.json +2 -2
- package/src/i18n/ro.json +2 -2
- package/src/i18n/ru.json +2 -2
- package/src/i18n/th.json +2 -2
- package/src/i18n/tr.json +2 -2
- package/src/i18n/zh-CN.json +2 -2
- package/src/i18n/zh-HK.json +2 -2
- package/src/index.ts +2 -0
- package/src/promoCard/PromoCard.tsx +5 -3
- package/src/select/Select.spec.js +1 -1
- package/src/slidingPanel/SlidingPanel.spec.js +9 -19
- package/src/slidingPanel/SlidingPanel.tsx +62 -0
- package/src/slidingPanel/index.ts +2 -0
- package/src/sticky/Sticky.spec.js +0 -1
- package/src/sticky/{Sticky.story.js → Sticky.story.tsx} +2 -3
- package/src/sticky/Sticky.tsx +16 -0
- package/src/sticky/index.ts +2 -0
- package/src/upload/Upload.js +8 -2
- package/src/upload/Upload.messages.js +2 -2
- package/src/upload/Upload.story.js +1 -1
- package/build/types/common/randomId.d.ts +0 -13
- package/build/types/common/randomId.d.ts.map +0 -1
- package/src/common/randomId.ts +0 -14
- package/src/slidingPanel/SlidingPanel.js +0 -73
- package/src/slidingPanel/index.js +0 -1
- package/src/sticky/Sticky.js +0 -23
- package/src/sticky/index.js +0 -1
- /package/src/slidingPanel/{SlidingPanel.story.js → SlidingPanel.story.tsx} +0 -0
package/src/i18n/pt.json
CHANGED
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"neptune.Upload.csButtonText": "Enviar outro documento?",
|
|
30
30
|
"neptune.Upload.csFailureText": "Falha no envio. Por favor, tente novamente",
|
|
31
31
|
"neptune.Upload.csSuccessText": "Envio concluído!",
|
|
32
|
-
"neptune.Upload.csTooLargeMessage": "Por favor, envie um arquivo com menos de
|
|
32
|
+
"neptune.Upload.csTooLargeMessage": "Por favor, envie um arquivo com menos de {maxSize}MB",
|
|
33
33
|
"neptune.Upload.csWrongTypeMessage": "Não trabalhamos com este tipo de arquivo. Por favor, tente novamente com um arquivo diferente",
|
|
34
34
|
"neptune.Upload.psButtonText": "Cancelar",
|
|
35
35
|
"neptune.Upload.psProcessingText": "Enviando...",
|
|
36
36
|
"neptune.Upload.usButtonText": "Ou escolha um arquivo",
|
|
37
37
|
"neptune.Upload.usDropMessage": "Arraste o arquivo para iniciar o envio",
|
|
38
|
-
"neptune.Upload.usPlaceholder": "Arraste e envie um arquivo menor que
|
|
38
|
+
"neptune.Upload.usPlaceholder": "Arraste e envie um arquivo menor que {maxSize}MB",
|
|
39
39
|
"neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
|
|
40
40
|
"neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
|
|
41
41
|
"neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",
|
package/src/i18n/ro.json
CHANGED
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"neptune.Upload.csButtonText": "Încarci un alt fișier?",
|
|
30
30
|
"neptune.Upload.csFailureText": "Încărcare eșuată. Te rugăm să încerci din nou",
|
|
31
31
|
"neptune.Upload.csSuccessText": "Încărcare completă!",
|
|
32
|
-
"neptune.Upload.csTooLargeMessage": "Te rugăm să furnizezi un fișier mai mic de
|
|
32
|
+
"neptune.Upload.csTooLargeMessage": "Te rugăm să furnizezi un fișier mai mic de {maxSize} MB",
|
|
33
33
|
"neptune.Upload.csWrongTypeMessage": "Tipul de fișier nu a fost acceptat. Te rugăm să încerci din nou cu un alt fișier",
|
|
34
34
|
"neptune.Upload.psButtonText": "Anulează",
|
|
35
35
|
"neptune.Upload.psProcessingText": "Se încarcă...",
|
|
36
36
|
"neptune.Upload.usButtonText": "Sau selectează un fișier",
|
|
37
37
|
"neptune.Upload.usDropMessage": "Atașează fișierul pentru a începe încărcarea",
|
|
38
|
-
"neptune.Upload.usPlaceholder": "Glisează și atașează un fișier de
|
|
38
|
+
"neptune.Upload.usPlaceholder": "Glisează și atașează un fișier mai mic de {maxSize} MB",
|
|
39
39
|
"neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
|
|
40
40
|
"neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
|
|
41
41
|
"neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",
|
package/src/i18n/ru.json
CHANGED
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"neptune.Upload.csButtonText": "Загрузить другой файл?",
|
|
30
30
|
"neptune.Upload.csFailureText": "Загрузка не удалась. Пожалуйста, попробуйте снова",
|
|
31
31
|
"neptune.Upload.csSuccessText": "Загрузка завершена!",
|
|
32
|
-
"neptune.Upload.csTooLargeMessage": "Пожалуйста, загрузите файл размером менее
|
|
32
|
+
"neptune.Upload.csTooLargeMessage": "Пожалуйста, загрузите файл размером менее {maxSize} Мб",
|
|
33
33
|
"neptune.Upload.csWrongTypeMessage": "Тип файла не поддерживается. Пожалуйста, попробуйте еще раз с другим файлом",
|
|
34
34
|
"neptune.Upload.psButtonText": "Отменить",
|
|
35
35
|
"neptune.Upload.psProcessingText": "Загружаем...",
|
|
36
36
|
"neptune.Upload.usButtonText": "Или выберите файл",
|
|
37
37
|
"neptune.Upload.usDropMessage": "Перетащите файл, чтобы начать загрузку",
|
|
38
|
-
"neptune.Upload.usPlaceholder": "Перетащите файл не
|
|
38
|
+
"neptune.Upload.usPlaceholder": "Перетащите файл размером не более {maxSize} Mб",
|
|
39
39
|
"neptune.UploadButton.allFileTypes": "Все типы файлов",
|
|
40
40
|
"neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
|
|
41
41
|
"neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",
|
package/src/i18n/th.json
CHANGED
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"neptune.Upload.csButtonText": "อัพโหลดไฟล์อื่นหรือไม่",
|
|
30
30
|
"neptune.Upload.csFailureText": "การอัปโหลดล้มเหลว กรุณาลองอีกครั้ง",
|
|
31
31
|
"neptune.Upload.csSuccessText": "อัปโหลดเสร็จสมบูรณ์!",
|
|
32
|
-
"neptune.Upload.csTooLargeMessage": "กรุณาใช้ไฟล์ที่มีขนาดเล็กกว่า
|
|
32
|
+
"neptune.Upload.csTooLargeMessage": "กรุณาใช้ไฟล์ที่มีขนาดเล็กกว่า {maxSize}MB",
|
|
33
33
|
"neptune.Upload.csWrongTypeMessage": "ไม่รองรับประเภทไฟล์ โปรดลองอีกครั้งโดยใช้ไฟล์อื่น",
|
|
34
34
|
"neptune.Upload.psButtonText": "ยกเลิก",
|
|
35
35
|
"neptune.Upload.psProcessingText": "กำลังอัปโหลด...",
|
|
36
36
|
"neptune.Upload.usButtonText": "หรือเลือกไฟล์",
|
|
37
37
|
"neptune.Upload.usDropMessage": "วางไฟล์เพื่อเริ่มการอัปโหลด",
|
|
38
|
-
"neptune.Upload.usPlaceholder": "ลากและวางไฟล์ที่มีขนาดไม่เกิน
|
|
38
|
+
"neptune.Upload.usPlaceholder": "ลากและวางไฟล์ที่มีขนาดไม่เกิน {maxSize}MB",
|
|
39
39
|
"neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
|
|
40
40
|
"neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
|
|
41
41
|
"neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size}MB",
|
package/src/i18n/tr.json
CHANGED
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"neptune.Upload.csButtonText": "Başka bir dosya yükleyin?",
|
|
30
30
|
"neptune.Upload.csFailureText": "Yükleme başarısız. Lütfen yine deneyin",
|
|
31
31
|
"neptune.Upload.csSuccessText": "Yükleme tamamlandı!",
|
|
32
|
-
"neptune.Upload.csTooLargeMessage": "Lütfen
|
|
32
|
+
"neptune.Upload.csTooLargeMessage": "Lütfen {maxSize} MB'den küçük bir dosya sağlayın",
|
|
33
33
|
"neptune.Upload.csWrongTypeMessage": "Desteklenmeyen dosya biçimi. Lütfen başka bir dosyayla tekrar deneyin",
|
|
34
34
|
"neptune.Upload.psButtonText": "İptal edin",
|
|
35
35
|
"neptune.Upload.psProcessingText": "Yükleniyor...",
|
|
36
36
|
"neptune.Upload.usButtonText": "Veya bir dosya seçin",
|
|
37
37
|
"neptune.Upload.usDropMessage": "Yüklemeyi başlatmak için dosyayı bırakın",
|
|
38
|
-
"neptune.Upload.usPlaceholder": "
|
|
38
|
+
"neptune.Upload.usPlaceholder": "{maxSize} MB'den küçük bir dosya sürükleyin ve bırakın",
|
|
39
39
|
"neptune.UploadButton.allFileTypes": "Tüm belge tipleri",
|
|
40
40
|
"neptune.UploadButton.dropFiles": "Yüklemeyi başlatmak için dosyayı bırakın",
|
|
41
41
|
"neptune.UploadButton.instructions": "{fileTypes}, en fazla {size}MB",
|
package/src/i18n/zh-CN.json
CHANGED
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"neptune.Upload.csButtonText": "上传另一个文件?",
|
|
30
30
|
"neptune.Upload.csFailureText": "上传失败。请重试",
|
|
31
31
|
"neptune.Upload.csSuccessText": "上传完毕!",
|
|
32
|
-
"neptune.Upload.csTooLargeMessage": "请提供小于
|
|
32
|
+
"neptune.Upload.csTooLargeMessage": "请提供小于 {maxSize}MB 的文件",
|
|
33
33
|
"neptune.Upload.csWrongTypeMessage": "不支持该文件类型,请试试其他文件",
|
|
34
34
|
"neptune.Upload.psButtonText": "取消",
|
|
35
35
|
"neptune.Upload.psProcessingText": "正在上传…",
|
|
36
36
|
"neptune.Upload.usButtonText": "或选择文件",
|
|
37
37
|
"neptune.Upload.usDropMessage": "拖放文件开始上传",
|
|
38
|
-
"neptune.Upload.usPlaceholder": "拖放小于
|
|
38
|
+
"neptune.Upload.usPlaceholder": "拖放小于 {maxSize}MB 的文件",
|
|
39
39
|
"neptune.UploadButton.allFileTypes": "所有文件类型",
|
|
40
40
|
"neptune.UploadButton.dropFiles": "拖放文件开始上传",
|
|
41
41
|
"neptune.UploadButton.instructions": "{fileTypes},小于 {size} MB",
|
package/src/i18n/zh-HK.json
CHANGED
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"neptune.Upload.csButtonText": "上載另一個檔案?",
|
|
30
30
|
"neptune.Upload.csFailureText": "上載失敗,請重試。",
|
|
31
31
|
"neptune.Upload.csSuccessText": "上載完成!",
|
|
32
|
-
"neptune.Upload.csTooLargeMessage": "請提供小於
|
|
32
|
+
"neptune.Upload.csTooLargeMessage": "請提供小於{maxSize}MB的檔案",
|
|
33
33
|
"neptune.Upload.csWrongTypeMessage": "不支持檔案類型,請使用其他檔案重試",
|
|
34
34
|
"neptune.Upload.psButtonText": "取消",
|
|
35
35
|
"neptune.Upload.psProcessingText": "上載中...",
|
|
36
36
|
"neptune.Upload.usButtonText": "或者選擇一個檔案",
|
|
37
37
|
"neptune.Upload.usDropMessage": "拖放檔案以開始上載",
|
|
38
|
-
"neptune.Upload.usPlaceholder": "拖放不超過
|
|
38
|
+
"neptune.Upload.usPlaceholder": "拖放不超過{maxSize}MB的檔案",
|
|
39
39
|
"neptune.UploadButton.allFileTypes": "所有檔案類型",
|
|
40
40
|
"neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
|
|
41
41
|
"neptune.UploadButton.instructions": "{fileTypes},小於{size}MB",
|
package/src/index.ts
CHANGED
|
@@ -28,6 +28,7 @@ export type { RadioGroupProps, RadioGroupRadio } from './radioGroup';
|
|
|
28
28
|
export type { RadioOptionProps } from './radioOption';
|
|
29
29
|
export type { SnackbarProps } from './snackbar/Snackbar';
|
|
30
30
|
export type { SnackbarContextType } from './snackbar/SnackbarContext';
|
|
31
|
+
export type { StickyProps } from './sticky';
|
|
31
32
|
export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
|
|
32
33
|
export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
|
|
33
34
|
export type { MarkdownProps } from './markdown';
|
|
@@ -38,6 +39,7 @@ export type {
|
|
|
38
39
|
CurrencyOptionItem,
|
|
39
40
|
MoneyInputProps,
|
|
40
41
|
} from './moneyInput';
|
|
42
|
+
export type { SlidingPanelProps } from './slidingPanel';
|
|
41
43
|
export type {
|
|
42
44
|
LayoutDirection,
|
|
43
45
|
TypographyTypes,
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
+
import { useId } from '@radix-ui/react-id';
|
|
1
2
|
import { Check } from '@transferwise/icons';
|
|
2
3
|
import classNames from 'classnames';
|
|
3
|
-
import React, { forwardRef, FunctionComponent,
|
|
4
|
+
import React, { forwardRef, FunctionComponent, useEffect, useState } from 'react';
|
|
4
5
|
|
|
5
6
|
import Body from '../body';
|
|
6
|
-
import { Typography
|
|
7
|
+
import { Typography } from '../common';
|
|
7
8
|
import Card, { CardProps } from '../common/card';
|
|
8
9
|
import Display from '../display';
|
|
9
10
|
import Image from '../image/Image';
|
|
@@ -230,7 +231,8 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
|
|
|
230
231
|
}
|
|
231
232
|
};
|
|
232
233
|
|
|
233
|
-
const
|
|
234
|
+
const fallbackId = useId();
|
|
235
|
+
const componentId = id || fallbackId;
|
|
234
236
|
|
|
235
237
|
// Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
|
|
236
238
|
// `'download'` if `download` is truthy. If neither condition is true, set
|
|
@@ -278,7 +278,7 @@ describe('Select', () => {
|
|
|
278
278
|
|
|
279
279
|
const bottomSheet = await screen.findByRole('dialog');
|
|
280
280
|
|
|
281
|
-
expect(bottomSheet).
|
|
281
|
+
expect(bottomSheet).toBeInTheDocument();
|
|
282
282
|
});
|
|
283
283
|
|
|
284
284
|
it('show list of options in Drawer when on mobile and search in enabled', async () => {
|
|
@@ -24,17 +24,7 @@ describe('SlidingPanel', () => {
|
|
|
24
24
|
|
|
25
25
|
expect(cssTransition()).toHaveLength(1);
|
|
26
26
|
|
|
27
|
-
expect(cssTransition().props()).
|
|
28
|
-
in: true,
|
|
29
|
-
appear: true,
|
|
30
|
-
timeout: {
|
|
31
|
-
enter: 0,
|
|
32
|
-
exit: EXIT_ANIMATION,
|
|
33
|
-
},
|
|
34
|
-
classNames: 'sliding-panel--open-left sliding-panel',
|
|
35
|
-
unmountOnExit: true,
|
|
36
|
-
});
|
|
37
|
-
expect(cssTransition().props().children.props).toStrictEqual({
|
|
27
|
+
expect(cssTransition().props()).toStrictEqual({
|
|
38
28
|
className: 'sliding-panel sliding-panel--open-left',
|
|
39
29
|
children: null,
|
|
40
30
|
});
|
|
@@ -42,24 +32,24 @@ describe('SlidingPanel', () => {
|
|
|
42
32
|
|
|
43
33
|
it('adds fixed class', () => {
|
|
44
34
|
component = shallow(<SlidingPanel {...props} slidingPanelPositionFixed />);
|
|
45
|
-
expect(cssTransition().prop('
|
|
46
|
-
'sliding-panel--open-left sliding-panel--fixed
|
|
35
|
+
expect(cssTransition().prop('className')).toBe(
|
|
36
|
+
'sliding-panel sliding-panel--open-left sliding-panel--fixed',
|
|
47
37
|
);
|
|
48
38
|
});
|
|
49
39
|
|
|
50
40
|
it('adds border classes if showSlidingPanelBorder is set to true', () => {
|
|
51
41
|
component = shallow(<SlidingPanel {...props} showSlidingPanelBorder />);
|
|
52
|
-
expect(cssTransition().prop('
|
|
53
|
-
'sliding-panel--open-left sliding-panel--border-left
|
|
42
|
+
expect(cssTransition().prop('className')).toBe(
|
|
43
|
+
'sliding-panel sliding-panel--open-left sliding-panel--border-left',
|
|
54
44
|
);
|
|
55
45
|
component = shallow(<SlidingPanel {...props} showSlidingPanelBorder={false} position="left" />);
|
|
56
|
-
expect(cssTransition().prop('
|
|
46
|
+
expect(cssTransition().prop('className')).toBe('sliding-panel sliding-panel--open-left');
|
|
57
47
|
|
|
58
48
|
component = shallow(<SlidingPanel {...props} showSlidingPanelBorder position="top" />);
|
|
59
|
-
expect(cssTransition().prop('
|
|
60
|
-
'sliding-panel--open-top sliding-panel--border-top
|
|
49
|
+
expect(cssTransition().prop('className')).toBe(
|
|
50
|
+
'sliding-panel sliding-panel--open-top sliding-panel--border-top',
|
|
61
51
|
);
|
|
62
52
|
});
|
|
63
53
|
|
|
64
|
-
const cssTransition = () => component.find('
|
|
54
|
+
const cssTransition = () => component.find('div');
|
|
65
55
|
});
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import classNames from 'classnames';
|
|
2
|
+
import { forwardRef, useRef } from 'react';
|
|
3
|
+
import mergeRefs from 'react-merge-refs';
|
|
4
|
+
import { CSSTransition } from 'react-transition-group';
|
|
5
|
+
|
|
6
|
+
import { Position } from '../common';
|
|
7
|
+
|
|
8
|
+
export const EXIT_ANIMATION = 350;
|
|
9
|
+
|
|
10
|
+
export interface SlidingPanelProps
|
|
11
|
+
extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {
|
|
12
|
+
position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;
|
|
13
|
+
open: boolean;
|
|
14
|
+
showSlidingPanelBorder?: boolean;
|
|
15
|
+
slidingPanelPositionFixed?: boolean;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const SlidingPanel = forwardRef(
|
|
19
|
+
(
|
|
20
|
+
{
|
|
21
|
+
position = 'left',
|
|
22
|
+
open,
|
|
23
|
+
showSlidingPanelBorder,
|
|
24
|
+
slidingPanelPositionFixed,
|
|
25
|
+
className,
|
|
26
|
+
children,
|
|
27
|
+
...rest
|
|
28
|
+
}: Omit<SlidingPanelProps, 'ref'>,
|
|
29
|
+
reference: React.ForwardedRef<HTMLDivElement>,
|
|
30
|
+
) => {
|
|
31
|
+
const localReference = useRef<HTMLDivElement>(null);
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<CSSTransition
|
|
35
|
+
{...rest}
|
|
36
|
+
key={`sliding-panel--open-${position}`}
|
|
37
|
+
nodeRef={localReference}
|
|
38
|
+
in={open}
|
|
39
|
+
// Wait for animation to finish before unmount.
|
|
40
|
+
timeout={{ enter: 0, exit: EXIT_ANIMATION }}
|
|
41
|
+
classNames="sliding-panel"
|
|
42
|
+
appear
|
|
43
|
+
unmountOnExit
|
|
44
|
+
>
|
|
45
|
+
<div
|
|
46
|
+
ref={mergeRefs([reference, localReference])}
|
|
47
|
+
className={classNames(
|
|
48
|
+
'sliding-panel',
|
|
49
|
+
`sliding-panel--open-${position}`,
|
|
50
|
+
showSlidingPanelBorder && `sliding-panel--border-${position}`,
|
|
51
|
+
slidingPanelPositionFixed && 'sliding-panel--fixed',
|
|
52
|
+
className,
|
|
53
|
+
)}
|
|
54
|
+
>
|
|
55
|
+
{children}
|
|
56
|
+
</div>
|
|
57
|
+
</CSSTransition>
|
|
58
|
+
);
|
|
59
|
+
},
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
export default SlidingPanel;
|
|
@@ -9,10 +9,9 @@ export default {
|
|
|
9
9
|
|
|
10
10
|
export const Basic = () => {
|
|
11
11
|
const open = boolean('open', false);
|
|
12
|
-
const position = select('position', ['top', '
|
|
13
|
-
const fullParentWidth = boolean('fullParentWidth', true);
|
|
12
|
+
const position = select('position', ['top', 'bottom'], 'bottom');
|
|
14
13
|
return (
|
|
15
|
-
<Sticky open={open} position={position}
|
|
14
|
+
<Sticky open={open} position={position}>
|
|
16
15
|
<div className="d-flex justify-content-start align-items-start flex-wrap p-x-4 p-y-4">
|
|
17
16
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
|
|
18
17
|
been the industry standard dummy text ever since the 1500s, when an unknown printer took a
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Position } from '../common';
|
|
2
|
+
import SlidingPanel from '../slidingPanel';
|
|
3
|
+
|
|
4
|
+
export interface StickyProps {
|
|
5
|
+
open?: boolean;
|
|
6
|
+
position?: `${Position.TOP | Position.BOTTOM}`;
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default function Sticky({ open = true, position = 'bottom', children }: StickyProps) {
|
|
11
|
+
return (
|
|
12
|
+
<SlidingPanel open={open} position={position} slidingPanelPositionFixed showSlidingPanelBorder>
|
|
13
|
+
{children}
|
|
14
|
+
</SlidingPanel>
|
|
15
|
+
);
|
|
16
|
+
}
|
package/src/upload/Upload.js
CHANGED
|
@@ -47,7 +47,10 @@ class Upload extends Component {
|
|
|
47
47
|
switch (status) {
|
|
48
48
|
case 413:
|
|
49
49
|
return (
|
|
50
|
-
this.props.csTooLargeMessage ||
|
|
50
|
+
this.props.csTooLargeMessage ||
|
|
51
|
+
this.props.intl.formatMessage(messages.csTooLargeMessage, {
|
|
52
|
+
maxSize: this.props.maxSize / 1000000,
|
|
53
|
+
})
|
|
51
54
|
);
|
|
52
55
|
case 415:
|
|
53
56
|
return (
|
|
@@ -312,7 +315,10 @@ class Upload extends Component {
|
|
|
312
315
|
usDisabled={usDisabled}
|
|
313
316
|
usHelpImage={usHelpImage}
|
|
314
317
|
usLabel={usLabel}
|
|
315
|
-
usPlaceholder={
|
|
318
|
+
usPlaceholder={
|
|
319
|
+
usPlaceholder ||
|
|
320
|
+
intl.formatMessage(messages.usPlaceholder, { maxSize: this.props.maxSize / 1000000 })
|
|
321
|
+
}
|
|
316
322
|
/>
|
|
317
323
|
)}
|
|
318
324
|
|
|
@@ -15,7 +15,7 @@ export default defineMessages({
|
|
|
15
15
|
},
|
|
16
16
|
csTooLargeMessage: {
|
|
17
17
|
id: 'neptune.Upload.csTooLargeMessage',
|
|
18
|
-
defaultMessage: 'Please provide a file smaller than
|
|
18
|
+
defaultMessage: 'Please provide a file smaller than {maxSize}MB',
|
|
19
19
|
},
|
|
20
20
|
csWrongTypeMessage: {
|
|
21
21
|
id: 'neptune.Upload.csWrongTypeMessage',
|
|
@@ -39,6 +39,6 @@ export default defineMessages({
|
|
|
39
39
|
},
|
|
40
40
|
usPlaceholder: {
|
|
41
41
|
id: 'neptune.Upload.usPlaceholder',
|
|
42
|
-
defaultMessage: 'Drag and drop a file less than
|
|
42
|
+
defaultMessage: 'Drag and drop a file less than {maxSize}MB',
|
|
43
43
|
},
|
|
44
44
|
});
|
|
@@ -10,7 +10,7 @@ export default {
|
|
|
10
10
|
|
|
11
11
|
export const Basic = () => {
|
|
12
12
|
const size = select('size', ['sm', 'md', 'lg'], 'md');
|
|
13
|
-
const maxSize = number('max file size',
|
|
13
|
+
const maxSize = number('max file size', 4000000);
|
|
14
14
|
const usAccept = text('accepted format', '*');
|
|
15
15
|
const usDisabled = boolean('disabled', false);
|
|
16
16
|
const psButtonDisabled = boolean('psButtonDisabled', false);
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* generateRandomId() function
|
|
3
|
-
*
|
|
4
|
-
* This function generates a random string of characters that can be used as
|
|
5
|
-
* an ID.
|
|
6
|
-
*
|
|
7
|
-
* @returns {string} A random string of characters.
|
|
8
|
-
* @example
|
|
9
|
-
* const id = generateRandomId();
|
|
10
|
-
* // id will be a random string of characters, such as "id-4711".
|
|
11
|
-
*/
|
|
12
|
-
export declare const generateRandomId: () => string;
|
|
13
|
-
//# sourceMappingURL=randomId.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"randomId.d.ts","sourceRoot":"","sources":["../../../src/common/randomId.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,QAAO,MAEnC,CAAC"}
|
package/src/common/randomId.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* generateRandomId() function
|
|
3
|
-
*
|
|
4
|
-
* This function generates a random string of characters that can be used as
|
|
5
|
-
* an ID.
|
|
6
|
-
*
|
|
7
|
-
* @returns {string} A random string of characters.
|
|
8
|
-
* @example
|
|
9
|
-
* const id = generateRandomId();
|
|
10
|
-
* // id will be a random string of characters, such as "id-4711".
|
|
11
|
-
*/
|
|
12
|
-
export const generateRandomId = (): string => {
|
|
13
|
-
return `id-${Math.random().toString(36).slice(7)}`;
|
|
14
|
-
};
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import classNames from 'classnames';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import { forwardRef, RefObject, useRef } from 'react';
|
|
4
|
-
import mergeRefs from 'react-merge-refs';
|
|
5
|
-
import { CSSTransition } from 'react-transition-group';
|
|
6
|
-
|
|
7
|
-
export const EXIT_ANIMATION = 350;
|
|
8
|
-
|
|
9
|
-
const SlidingPanel = forwardRef(
|
|
10
|
-
(
|
|
11
|
-
{
|
|
12
|
-
children,
|
|
13
|
-
className,
|
|
14
|
-
open,
|
|
15
|
-
position,
|
|
16
|
-
showSlidingPanelBorder,
|
|
17
|
-
slidingPanelPositionFixed,
|
|
18
|
-
...rest
|
|
19
|
-
},
|
|
20
|
-
reference,
|
|
21
|
-
) => {
|
|
22
|
-
/** @type {RefObject<HTMLDivElement>} */
|
|
23
|
-
const localReference = useRef(null);
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<CSSTransition
|
|
27
|
-
{...rest}
|
|
28
|
-
key={`sliding-panel--open-${position}`}
|
|
29
|
-
nodeRef={localReference}
|
|
30
|
-
in={open}
|
|
31
|
-
// Wait for animation to finish before unmount.
|
|
32
|
-
timeout={{ enter: 0, exit: EXIT_ANIMATION }}
|
|
33
|
-
classNames={classNames(
|
|
34
|
-
`sliding-panel--open-${position}`,
|
|
35
|
-
showSlidingPanelBorder && `sliding-panel--border-${position}`,
|
|
36
|
-
{
|
|
37
|
-
'sliding-panel--fixed': slidingPanelPositionFixed,
|
|
38
|
-
},
|
|
39
|
-
'sliding-panel',
|
|
40
|
-
)}
|
|
41
|
-
appear
|
|
42
|
-
unmountOnExit
|
|
43
|
-
>
|
|
44
|
-
<div
|
|
45
|
-
ref={mergeRefs([reference, localReference])}
|
|
46
|
-
className={classNames('sliding-panel', `sliding-panel--open-${position}`, className)}
|
|
47
|
-
>
|
|
48
|
-
{children}
|
|
49
|
-
</div>
|
|
50
|
-
</CSSTransition>
|
|
51
|
-
);
|
|
52
|
-
},
|
|
53
|
-
);
|
|
54
|
-
|
|
55
|
-
SlidingPanel.propTypes = {
|
|
56
|
-
children: PropTypes.node,
|
|
57
|
-
className: PropTypes.string,
|
|
58
|
-
open: PropTypes.bool,
|
|
59
|
-
position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
|
|
60
|
-
showSlidingPanelBorder: PropTypes.bool,
|
|
61
|
-
slidingPanelPositionFixed: PropTypes.bool,
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
SlidingPanel.defaultProps = {
|
|
65
|
-
children: null,
|
|
66
|
-
className: undefined,
|
|
67
|
-
open: false,
|
|
68
|
-
position: 'left',
|
|
69
|
-
showSlidingPanelBorder: false,
|
|
70
|
-
slidingPanelPositionFixed: false,
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
export default SlidingPanel;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './SlidingPanel';
|
package/src/sticky/Sticky.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
|
-
|
|
3
|
-
import SlidingPanel from '../slidingPanel';
|
|
4
|
-
|
|
5
|
-
const Sticky = ({ open, position, children }) => (
|
|
6
|
-
<SlidingPanel open={open} position={position} slidingPanelPositionFixed showSlidingPanelBorder>
|
|
7
|
-
{children}
|
|
8
|
-
</SlidingPanel>
|
|
9
|
-
);
|
|
10
|
-
|
|
11
|
-
Sticky.propTypes = {
|
|
12
|
-
open: PropTypes.bool,
|
|
13
|
-
position: PropTypes.oneOf(['top', 'bottom']),
|
|
14
|
-
children: PropTypes.node,
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
Sticky.defaultProps = {
|
|
18
|
-
open: true,
|
|
19
|
-
position: 'bottom',
|
|
20
|
-
children: null,
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export default Sticky;
|
package/src/sticky/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './Sticky';
|
|
File without changes
|