@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.
Files changed (80) hide show
  1. package/build/i18n/cs.json +2 -2
  2. package/build/i18n/de.json +2 -2
  3. package/build/i18n/en.json +2 -2
  4. package/build/i18n/es.json +2 -2
  5. package/build/i18n/fr.json +2 -2
  6. package/build/i18n/hu.json +2 -2
  7. package/build/i18n/id.json +2 -2
  8. package/build/i18n/it.json +2 -2
  9. package/build/i18n/ja.json +2 -2
  10. package/build/i18n/pl.json +2 -2
  11. package/build/i18n/pt.json +2 -2
  12. package/build/i18n/ro.json +2 -2
  13. package/build/i18n/ru.json +2 -2
  14. package/build/i18n/th.json +2 -2
  15. package/build/i18n/tr.json +2 -2
  16. package/build/i18n/zh-CN.json +2 -2
  17. package/build/i18n/zh-HK.json +2 -2
  18. package/build/index.esm.js +91 -127
  19. package/build/index.esm.js.map +1 -1
  20. package/build/index.js +92 -128
  21. package/build/index.js.map +1 -1
  22. package/build/types/circularButton/CircularButton.d.ts +2 -2
  23. package/build/types/circularButton/CircularButton.d.ts.map +1 -1
  24. package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
  25. package/build/types/common/index.d.ts +0 -1
  26. package/build/types/index.d.ts +2 -0
  27. package/build/types/index.d.ts.map +1 -1
  28. package/build/types/promoCard/PromoCard.d.ts.map +1 -1
  29. package/build/types/slidingPanel/SlidingPanel.d.ts +12 -17
  30. package/build/types/slidingPanel/SlidingPanel.d.ts.map +1 -1
  31. package/build/types/slidingPanel/index.d.ts +2 -1
  32. package/build/types/slidingPanel/index.d.ts.map +1 -1
  33. package/build/types/sticky/Sticky.d.ts +9 -14
  34. package/build/types/sticky/Sticky.d.ts.map +1 -1
  35. package/build/types/sticky/index.d.ts +2 -1
  36. package/build/types/sticky/index.d.ts.map +1 -1
  37. package/build/types/upload/Upload.d.ts.map +1 -1
  38. package/package.json +3 -3
  39. package/src/circularButton/CircularButton.tsx +2 -2
  40. package/src/common/bottomSheet/BottomSheet.tsx +47 -41
  41. package/src/common/bottomSheet/__snapshots__/BottomSheet.spec.tsx.snap +37 -33
  42. package/src/common/index.js +0 -1
  43. package/src/i18n/cs.json +2 -2
  44. package/src/i18n/de.json +2 -2
  45. package/src/i18n/en.json +2 -2
  46. package/src/i18n/es.json +2 -2
  47. package/src/i18n/fr.json +2 -2
  48. package/src/i18n/hu.json +2 -2
  49. package/src/i18n/id.json +2 -2
  50. package/src/i18n/it.json +2 -2
  51. package/src/i18n/ja.json +2 -2
  52. package/src/i18n/pl.json +2 -2
  53. package/src/i18n/pt.json +2 -2
  54. package/src/i18n/ro.json +2 -2
  55. package/src/i18n/ru.json +2 -2
  56. package/src/i18n/th.json +2 -2
  57. package/src/i18n/tr.json +2 -2
  58. package/src/i18n/zh-CN.json +2 -2
  59. package/src/i18n/zh-HK.json +2 -2
  60. package/src/index.ts +2 -0
  61. package/src/promoCard/PromoCard.tsx +5 -3
  62. package/src/select/Select.spec.js +1 -1
  63. package/src/slidingPanel/SlidingPanel.spec.js +9 -19
  64. package/src/slidingPanel/SlidingPanel.tsx +62 -0
  65. package/src/slidingPanel/index.ts +2 -0
  66. package/src/sticky/Sticky.spec.js +0 -1
  67. package/src/sticky/{Sticky.story.js → Sticky.story.tsx} +2 -3
  68. package/src/sticky/Sticky.tsx +16 -0
  69. package/src/sticky/index.ts +2 -0
  70. package/src/upload/Upload.js +8 -2
  71. package/src/upload/Upload.messages.js +2 -2
  72. package/src/upload/Upload.story.js +1 -1
  73. package/build/types/common/randomId.d.ts +0 -13
  74. package/build/types/common/randomId.d.ts.map +0 -1
  75. package/src/common/randomId.ts +0 -14
  76. package/src/slidingPanel/SlidingPanel.js +0 -73
  77. package/src/slidingPanel/index.js +0 -1
  78. package/src/sticky/Sticky.js +0 -23
  79. package/src/sticky/index.js +0 -1
  80. /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 5MB",
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 5MB",
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 5MB",
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 până în 5MB",
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": "Пожалуйста, загрузите файл размером менее 5MB",
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": "Перетащите файл не больше 5MB",
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": "กรุณาใช้ไฟล์ที่มีขนาดเล็กกว่า 5MB",
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": "ลากและวางไฟล์ที่มีขนาดไม่เกิน 5MB",
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 5 MB'den hüçük bir dosya sağlayın",
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": "5 MB'den küçük bir dosya sürükleyin ve bırakın",
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",
@@ -29,13 +29,13 @@
29
29
  "neptune.Upload.csButtonText": "上传另一个文件?",
30
30
  "neptune.Upload.csFailureText": "上传失败。请重试",
31
31
  "neptune.Upload.csSuccessText": "上传完毕!",
32
- "neptune.Upload.csTooLargeMessage": "请提供小于 5MB 的文件",
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": "拖放小于 5MB 的文件",
38
+ "neptune.Upload.usPlaceholder": "拖放小于 {maxSize}MB 的文件",
39
39
  "neptune.UploadButton.allFileTypes": "所有文件类型",
40
40
  "neptune.UploadButton.dropFiles": "拖放文件开始上传",
41
41
  "neptune.UploadButton.instructions": "{fileTypes},小于 {size} MB",
@@ -29,13 +29,13 @@
29
29
  "neptune.Upload.csButtonText": "上載另一個檔案?",
30
30
  "neptune.Upload.csFailureText": "上載失敗,請重試。",
31
31
  "neptune.Upload.csSuccessText": "上載完成!",
32
- "neptune.Upload.csTooLargeMessage": "請提供小於5MB的檔案",
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": "拖放不超過5MB的檔案",
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, ReactElement, useEffect, useState } from 'react';
4
+ import React, { forwardRef, FunctionComponent, useEffect, useState } from 'react';
4
5
 
5
6
  import Body from '../body';
6
- import { Typography, generateRandomId } from '../common';
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 componentId = `${id || generateRandomId()}`;
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).toHaveClass('np-bottom-sheet');
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()).toMatchObject({
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('classNames')).toBe(
46
- 'sliding-panel--open-left sliding-panel--fixed sliding-panel',
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('classNames')).toBe(
53
- 'sliding-panel--open-left sliding-panel--border-left sliding-panel',
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('classNames')).toBe('sliding-panel--open-left sliding-panel');
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('classNames')).toBe(
60
- 'sliding-panel--open-top sliding-panel--border-top sliding-panel',
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('CSSTransition');
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;
@@ -0,0 +1,2 @@
1
+ export { default } from './SlidingPanel';
2
+ export type { SlidingPanelProps } from './SlidingPanel';
@@ -25,7 +25,6 @@ describe('Sticky', () => {
25
25
 
26
26
  expect(slidingPanel.props()).toStrictEqual({
27
27
  children: null,
28
- className: undefined,
29
28
  open: true,
30
29
  position: 'bottom',
31
30
  showSlidingPanelBorder: true,
@@ -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', 'right', 'bottom', 'left'], 'bottom');
13
- const fullParentWidth = boolean('fullParentWidth', true);
12
+ const position = select('position', ['top', 'bottom'], 'bottom');
14
13
  return (
15
- <Sticky open={open} position={position} fullParentWidth={fullParentWidth}>
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
+ }
@@ -0,0 +1,2 @@
1
+ export { default } from './Sticky';
2
+ export type { StickyProps } from './Sticky';
@@ -47,7 +47,10 @@ class Upload extends Component {
47
47
  switch (status) {
48
48
  case 413:
49
49
  return (
50
- this.props.csTooLargeMessage || this.props.intl.formatMessage(messages.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={usPlaceholder || intl.formatMessage(messages.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 5MB',
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 5MB',
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', 5000000);
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"}
@@ -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';
@@ -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;
@@ -1 +0,0 @@
1
- export { default } from './Sticky';