@popsure/dirty-swan 0.41.4 → 0.41.6
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/dist/cjs/index.js +6 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/input/currency/index.d.ts +7 -6
- package/dist/cjs/lib/components/input/currency/input.stories.d.ts +83 -0
- package/dist/cjs/lib/index.d.ts +1 -1
- package/dist/esm/components/input/currency/index.js +5 -2
- package/dist/esm/components/input/currency/index.js.map +1 -1
- package/dist/esm/components/input/currency/index.test.js +1 -1
- package/dist/esm/components/input/currency/index.test.js.map +1 -1
- package/dist/esm/components/input/currency/input.stories.js +32 -0
- package/dist/esm/components/input/currency/input.stories.js.map +1 -0
- package/dist/esm/components/input/input.stories.js +1 -55
- package/dist/esm/components/input/input.stories.js.map +1 -1
- package/dist/esm/components/multiDropzone/index.js +2 -3
- package/dist/esm/components/multiDropzone/index.js.map +1 -1
- package/dist/esm/components/multiDropzone/index.test.js +0 -5
- package/dist/esm/components/multiDropzone/index.test.js.map +1 -1
- package/dist/esm/config-56f12c98.js +57 -0
- package/dist/esm/config-56f12c98.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/lib/components/input/currency/index.d.ts +7 -6
- package/dist/esm/lib/components/input/currency/input.stories.d.ts +83 -0
- package/dist/esm/lib/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/lib/components/input/currency/index.test.tsx +1 -1
- package/src/lib/components/input/currency/index.tsx +11 -7
- package/src/lib/components/input/currency/input.stories.tsx +48 -0
- package/src/lib/components/multiDropzone/index.test.tsx +0 -7
- package/src/lib/components/multiDropzone/index.tsx +3 -7
- package/src/lib/index.tsx +1 -1
- package/src/lib/components/input/currency/index.stories.mdx +0 -33
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { InputProps } from '..';
|
|
2
|
-
declare
|
|
3
|
-
value?: number | undefined;
|
|
4
|
-
placeholder?: string
|
|
5
|
-
onChange?: (
|
|
6
|
-
} & Omit<InputProps,
|
|
7
|
-
|
|
2
|
+
export declare type CurrencyInputProps = {
|
|
3
|
+
value?: number | null | undefined;
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
onChange?: (value: number | null) => void;
|
|
6
|
+
} & Omit<InputProps, 'onChange' | 'value' | 'ref'>;
|
|
7
|
+
declare const CurrencyInput: ({ value, onChange, type, ...props }: CurrencyInputProps) => JSX.Element;
|
|
8
|
+
export { CurrencyInput };
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { CurrencyInputProps } from '.';
|
|
2
|
+
declare const story: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: ({ value, onChange, type, ...props }: CurrencyInputProps) => JSX.Element;
|
|
5
|
+
argTypes: {
|
|
6
|
+
value: {
|
|
7
|
+
defaultValue: string;
|
|
8
|
+
description: string;
|
|
9
|
+
control: {
|
|
10
|
+
type: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
className: {
|
|
14
|
+
description: string;
|
|
15
|
+
defaultValue: string;
|
|
16
|
+
control: {
|
|
17
|
+
type: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
placeholder: {
|
|
21
|
+
description: string;
|
|
22
|
+
defaultValue: string;
|
|
23
|
+
control: {
|
|
24
|
+
type: string;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
label: {
|
|
28
|
+
description: string;
|
|
29
|
+
defaultValue: string;
|
|
30
|
+
control: {
|
|
31
|
+
type: string;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
hideLabel: {
|
|
35
|
+
description: string;
|
|
36
|
+
defaultValue: boolean;
|
|
37
|
+
control: {
|
|
38
|
+
type: string;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
prefix: {
|
|
42
|
+
description: string;
|
|
43
|
+
defaultValue: string;
|
|
44
|
+
control: {
|
|
45
|
+
type: string;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
id: {
|
|
49
|
+
description: string;
|
|
50
|
+
defaultValue: string;
|
|
51
|
+
control: {
|
|
52
|
+
type: string;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
error: {
|
|
56
|
+
description: string;
|
|
57
|
+
defaultValue: string;
|
|
58
|
+
control: {
|
|
59
|
+
type: string;
|
|
60
|
+
};
|
|
61
|
+
table: {
|
|
62
|
+
type: {
|
|
63
|
+
summary: string;
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
onChange: {
|
|
68
|
+
description: string;
|
|
69
|
+
action: boolean;
|
|
70
|
+
table: {
|
|
71
|
+
category: string;
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
parameters: {
|
|
76
|
+
componentSubtitle: string;
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
export declare const CurrencyInputStory: {
|
|
80
|
+
({ onChange, className, placeholder, value, label, hideLabel, prefix, error }: CurrencyInputProps): JSX.Element;
|
|
81
|
+
storyName: string;
|
|
82
|
+
};
|
|
83
|
+
export default story;
|
package/dist/cjs/lib/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { MultiDropzone, FileType, MultiDropzoneProps, UploadedFile, UploadStatus
|
|
|
6
6
|
import { DownloadButton } from './components/downloadButton';
|
|
7
7
|
import { InformationBox } from './components/informationBox';
|
|
8
8
|
import IbanInput from './components/input/iban';
|
|
9
|
-
import CurrencyInput from './components/input/currency';
|
|
9
|
+
import { CurrencyInput } from './components/input/currency';
|
|
10
10
|
import { Badge } from './components/badge';
|
|
11
11
|
import { Checkbox } from './components/input/checkbox';
|
|
12
12
|
import { Radio } from './components/input/radio';
|
|
@@ -41,7 +41,10 @@ var CurrencyInput = function (_a) {
|
|
|
41
41
|
// eslint-disable-next-line
|
|
42
42
|
}, [value]);
|
|
43
43
|
useEffect(function () {
|
|
44
|
-
if (shadowValue) {
|
|
44
|
+
if (shadowValue === '' && value) {
|
|
45
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(null);
|
|
46
|
+
}
|
|
47
|
+
else if (shadowValue) {
|
|
45
48
|
onChange === null || onChange === void 0 ? void 0 : onChange(reverseFormatInput(shadowValue));
|
|
46
49
|
}
|
|
47
50
|
// eslint-disable-next-line
|
|
@@ -61,5 +64,5 @@ var CurrencyInput = function (_a) {
|
|
|
61
64
|
} }, props), void 0));
|
|
62
65
|
};
|
|
63
66
|
|
|
64
|
-
export
|
|
67
|
+
export { CurrencyInput };
|
|
65
68
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/currency/format/index.ts","../../../../../../src/lib/components/input/currency/index.tsx"],"sourcesContent":["export const formatInput = (input: string): string => {\n const decimalSeparator = input.includes(',') ? ',' : '.';\n const parts = input.split(decimalSeparator);\n const floor = parts[0];\n const ceiling = parts[1];\n parts[0] = floor.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ' ');\n if (ceiling) {\n parts[1] = ceiling.slice(0, Math.min(ceiling.length, 2));\n }\n return parts.join('.');\n};\n\nexport function reverseFormatInput(input: string): number {\n return Number(input.replace(/,/, '.').replace(/\\s/g, ''));\n}\n","import { useEffect, useRef, useState } from 'react';\n\nimport { formatInput, reverseFormatInput } from './format';\nimport { Input, InputProps } from '..';\n\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/currency/format/index.ts","../../../../../../src/lib/components/input/currency/index.tsx"],"sourcesContent":["export const formatInput = (input: string): string => {\n const decimalSeparator = input.includes(',') ? ',' : '.';\n const parts = input.split(decimalSeparator);\n const floor = parts[0];\n const ceiling = parts[1];\n parts[0] = floor.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ' ');\n if (ceiling) {\n parts[1] = ceiling.slice(0, Math.min(ceiling.length, 2));\n }\n return parts.join('.');\n};\n\nexport function reverseFormatInput(input: string): number {\n return Number(input.replace(/,/, '.').replace(/\\s/g, ''));\n}\n","import { useEffect, useRef, useState } from 'react';\n\nimport { formatInput, reverseFormatInput } from './format';\nimport { Input, InputProps } from '..';\n\nexport type CurrencyInputProps = {\n value?: number | null | undefined;\n placeholder?: string;\n onChange?: (value: number | null) => void;\n} & Omit<InputProps, 'onChange' | 'value' | 'ref'>\n\nconst CurrencyInput = ({\n value,\n onChange,\n type,\n ...props\n}: CurrencyInputProps) => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n const [cursor, setCursor] = useState<number | null>(null);\n const [shadowValue, setShadowValue] = useState('');\n\n const formattedShadowValue = formatInput(\n shadowValue\n .replace(/ /g, '') // remove all whitespace\n .replace(',', '.') // change commas to dot for decimal separator\n .replace('.', 'DECIMAL_SEPARATOR') // Gymnastic to remove all the but the first decimal separators 🤸\n .replace(/\\./g, '')\n .replace('DECIMAL_SEPARATOR', '.') // End of the Gymnastic 🤸\n .replace(/[^\\d\\\\.]/g, '') // remove all non decimal and dot\n );\n\n useEffect(() => {\n if (value && value !== reverseFormatInput(shadowValue)) {\n setShadowValue(formatInput(value.toString()));\n }\n // eslint-disable-next-line\n }, [value]);\n\n useEffect(() => {\n if (shadowValue === '' && value) {\n onChange?.(null)\n } else if (shadowValue) {\n onChange?.(reverseFormatInput(shadowValue));\n }\n // eslint-disable-next-line\n }, [shadowValue]);\n\n useEffect(() => {\n if (!inputRef.current || !cursor) {\n return;\n }\n\n const cursorDiff =\n String(formattedShadowValue).length - String(shadowValue).length;\n const newCursor = cursorDiff + cursor;\n\n inputRef.current.selectionStart = newCursor;\n inputRef.current.selectionEnd = newCursor;\n }, [cursor, formattedShadowValue, shadowValue]);\n\n return (\n <Input\n prefix=\"€\"\n ref={inputRef}\n type=\"string\"\n value={formattedShadowValue}\n onChange={(e) => {\n setCursor(e.target.selectionStart);\n setShadowValue(e.target.value);\n }}\n {...props}\n />\n );\n};\n\nexport { CurrencyInput };\n"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { b as __awaiter, c as __generator, _ as __assign } from '../../../tslib.es6-5bc94358.js';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { c as customRender } from '../../../customRender-9fd06f5b.js';
|
|
4
|
-
import CurrencyInput from './index.js';
|
|
4
|
+
import { CurrencyInput } from './index.js';
|
|
5
5
|
import 'react';
|
|
6
6
|
import 'react-dom';
|
|
7
7
|
import '../../../_commonjsHelpers-e7f67fd8.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.js","sources":["../../../../../../src/lib/components/input/currency/index.test.tsx"],"sourcesContent":["import { render } from '../../../util/testUtils';\n\nimport CurrencyInput from '.';\n\nconst setup = () => {\n const utils = render(<CurrencyInput />);\n const input = utils.getByTestId('ds-input-input') as HTMLInputElement;\n return {\n input,\n ...utils,\n };\n};\n\ndescribe('Currency input component', () => {\n it('Should correctly space thousands separators', async () => {\n const { input, user } = setup();\n await user.type(input, '1234567');\n expect(input.value).toBe('1 234 567');\n });\n\n it('Should remove non numerical values', async () => {\n const { input, user } = setup();\n await user.type(input, '123asdf4567');\n expect(input.value).toBe('1 234 567');\n });\n\n it('Should remove non numerical values', async () => {\n const { input, user } = setup();\n await user.type(input, '123asdf4567');\n expect(input.value).toBe('1 234 567');\n });\n\n it('Should allow decimal separator', async () => {\n const { input, user } = setup();\n await user.type(input, '1234567.34');\n expect(input.value).toBe('1 234 567.34');\n });\n\n it('Should replace comma decimal seprator with a dot', async () => {\n const { input, user } = setup();\n await user.type(input, '1234567,34');\n expect(input.value).toBe('1 234 567.34');\n });\n\n it('Should only allow one decimal separator', async () => {\n const { input, user } = setup();\n await user.type(input, '1234567..34');\n expect(input.value).toBe('1 234 567.34');\n });\n\n it('Should only allow one decimal separator after a sequence of number', async () => {\n const { input, user } = setup();\n await user.type(input, '1234567..34.4');\n expect(input.value).toBe('1 234 567.34');\n });\n\n it('Should have correct selection start when no spaces are added', async () => {\n const { input, user } = setup();\n\n await user.type(input, '123');\n // Should be: 123|\n expect(input.selectionStart).toBe(3);\n });\n\n it('Should have correct selection start when spaces are added', async () => {\n const { input, user } = setup();\n\n await user.type(input, '1234');\n // Should be: 123 4|\n expect(input.selectionStart).toBe(5);\n });\n\n it('Should have correct selection start when typing in middle of input', async () => {\n const { input, user } = setup();\n\n await user.type(input, '123{arrowleft}4');\n\n // Should be: 1 24|3\n expect(input.selectionStart).toBe(4);\n });\n\n it('Should have correct selection start when typing in beginning of input', async () => {\n const { input, user } = setup();\n\n await user.type(input, '123{arrowleft}{arrowleft}{arrowleft}4');\n\n // Should be: 4 |123\n expect(input.selectionStart).toBe(2);\n });\n\n it('Should have correct selection start when typing in input and has currency values', async () => {\n const { input, user } = setup();\n\n await user.type(input, '123.2{arrowleft}{arrowleft}{arrowleft}24');\n\n // Should be: 12 24|3.2\n expect(input.selectionStart).toBe(5);\n });\n\n it('Should have correct selection start when deleting', async () => {\n const { input, user } = setup();\n\n await user.type(input, '12345{arrowleft}{backspace}67');\n\n // Should be: 123 67|5\n expect(input.selectionStart).toBe(6);\n });\n});\n"],"names":["render","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.test.js","sources":["../../../../../../src/lib/components/input/currency/index.test.tsx"],"sourcesContent":["import { render } from '../../../util/testUtils';\n\nimport { CurrencyInput } from '.';\n\nconst setup = () => {\n const utils = render(<CurrencyInput />);\n const input = utils.getByTestId('ds-input-input') as HTMLInputElement;\n return {\n input,\n ...utils,\n };\n};\n\ndescribe('Currency input component', () => {\n it('Should correctly space thousands separators', async () => {\n const { input, user } = setup();\n await user.type(input, '1234567');\n expect(input.value).toBe('1 234 567');\n });\n\n it('Should remove non numerical values', async () => {\n const { input, user } = setup();\n await user.type(input, '123asdf4567');\n expect(input.value).toBe('1 234 567');\n });\n\n it('Should remove non numerical values', async () => {\n const { input, user } = setup();\n await user.type(input, '123asdf4567');\n expect(input.value).toBe('1 234 567');\n });\n\n it('Should allow decimal separator', async () => {\n const { input, user } = setup();\n await user.type(input, '1234567.34');\n expect(input.value).toBe('1 234 567.34');\n });\n\n it('Should replace comma decimal seprator with a dot', async () => {\n const { input, user } = setup();\n await user.type(input, '1234567,34');\n expect(input.value).toBe('1 234 567.34');\n });\n\n it('Should only allow one decimal separator', async () => {\n const { input, user } = setup();\n await user.type(input, '1234567..34');\n expect(input.value).toBe('1 234 567.34');\n });\n\n it('Should only allow one decimal separator after a sequence of number', async () => {\n const { input, user } = setup();\n await user.type(input, '1234567..34.4');\n expect(input.value).toBe('1 234 567.34');\n });\n\n it('Should have correct selection start when no spaces are added', async () => {\n const { input, user } = setup();\n\n await user.type(input, '123');\n // Should be: 123|\n expect(input.selectionStart).toBe(3);\n });\n\n it('Should have correct selection start when spaces are added', async () => {\n const { input, user } = setup();\n\n await user.type(input, '1234');\n // Should be: 123 4|\n expect(input.selectionStart).toBe(5);\n });\n\n it('Should have correct selection start when typing in middle of input', async () => {\n const { input, user } = setup();\n\n await user.type(input, '123{arrowleft}4');\n\n // Should be: 1 24|3\n expect(input.selectionStart).toBe(4);\n });\n\n it('Should have correct selection start when typing in beginning of input', async () => {\n const { input, user } = setup();\n\n await user.type(input, '123{arrowleft}{arrowleft}{arrowleft}4');\n\n // Should be: 4 |123\n expect(input.selectionStart).toBe(2);\n });\n\n it('Should have correct selection start when typing in input and has currency values', async () => {\n const { input, user } = setup();\n\n await user.type(input, '123.2{arrowleft}{arrowleft}{arrowleft}24');\n\n // Should be: 12 24|3.2\n expect(input.selectionStart).toBe(5);\n });\n\n it('Should have correct selection start when deleting', async () => {\n const { input, user } = setup();\n\n await user.type(input, '12345{arrowleft}{backspace}67');\n\n // Should be: 123 67|5\n expect(input.selectionStart).toBe(6);\n });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;;;;AAIA,IAAM,KAAK,GAAG;IACZ,IAAM,KAAK,GAAGA,YAAM,CAACC,IAAC,aAAa,aAAG,CAAC,CAAC;IACxC,IAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAqB,CAAC;IACtE,kBACE,KAAK,OAAA,IACF,KAAK,EACR;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,0BAA0B,EAAE;IACnC,EAAE,CAAC,6CAA6C,EAAE;;;;;oBAC1C,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAChC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,EAAA;;oBAAjC,SAAiC,CAAC;oBAClC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;;;;SACvC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE;;;;;oBACjC,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAChC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,EAAA;;oBAArC,SAAqC,CAAC;oBACtC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;;;;SACvC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE;;;;;oBACjC,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAChC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,EAAA;;oBAArC,SAAqC,CAAC;oBACtC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;;;;SACvC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE;;;;;oBAC7B,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAChC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,EAAA;;oBAApC,SAAoC,CAAC;oBACrC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;;;;SAC1C,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE;;;;;oBAC/C,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAChC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,EAAA;;oBAApC,SAAoC,CAAC;oBACrC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;;;;SAC1C,CAAC,CAAC;IAEH,EAAE,CAAC,yCAAyC,EAAE;;;;;oBACtC,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAChC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,EAAA;;oBAArC,SAAqC,CAAC;oBACtC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;;;;SAC1C,CAAC,CAAC;IAEH,EAAE,CAAC,oEAAoE,EAAE;;;;;oBACjE,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAChC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,EAAA;;oBAAvC,SAAuC,CAAC;oBACxC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;;;;SAC1C,CAAC,CAAC;IAEH,EAAE,CAAC,8DAA8D,EAAE;;;;;oBAC3D,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAEhC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,EAAA;;oBAA7B,SAA6B,CAAC;;oBAE9B,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;;;;SACtC,CAAC,CAAC;IAEH,EAAE,CAAC,2DAA2D,EAAE;;;;;oBACxD,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAEhC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,EAAA;;oBAA9B,SAA8B,CAAC;;oBAE/B,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;;;;SACtC,CAAC,CAAC;IAEH,EAAE,CAAC,oEAAoE,EAAE;;;;;oBACjE,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAEhC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAA;;oBAAzC,SAAyC,CAAC;;oBAG1C,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;;;;SACtC,CAAC,CAAC;IAEH,EAAE,CAAC,uEAAuE,EAAE;;;;;oBACpE,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAEhC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,uCAAuC,CAAC,EAAA;;oBAA/D,SAA+D,CAAC;;oBAGhE,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;;;;SACtC,CAAC,CAAC;IAEH,EAAE,CAAC,kFAAkF,EAAE;;;;;oBAC/E,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAEhC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,0CAA0C,CAAC,EAAA;;oBAAlE,SAAkE,CAAC;;oBAGnE,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;;;;SACtC,CAAC,CAAC;IAEH,EAAE,CAAC,mDAAmD,EAAE;;;;;oBAChD,KAAkB,KAAK,EAAE,EAAvB,KAAK,WAAA,EAAE,IAAI,UAAA,CAAa;oBAEhC,qBAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,+BAA+B,CAAC,EAAA;;oBAAvD,SAAuD,CAAC;;oBAGxD,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;;;;SACtC,CAAC,CAAC;AACL,CAAC,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { CurrencyInput } from './index.js';
|
|
4
|
+
import { s as sharedConfig } from '../../../config-56f12c98.js';
|
|
5
|
+
import '../../../tslib.es6-5bc94358.js';
|
|
6
|
+
import '../index.js';
|
|
7
|
+
import '../../../index-6ea95111.js';
|
|
8
|
+
import '../../../index-fb46adf9.js';
|
|
9
|
+
import '../../../style-inject.es-1f59c1d0.js';
|
|
10
|
+
|
|
11
|
+
var story = {
|
|
12
|
+
title: 'JSX/Inputs',
|
|
13
|
+
component: CurrencyInput,
|
|
14
|
+
argTypes: sharedConfig,
|
|
15
|
+
parameters: {
|
|
16
|
+
componentSubtitle: 'The default input component is used to gather informations from the user.'
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
var CurrencyInputStory = function (_a) {
|
|
20
|
+
var onChange = _a.onChange, className = _a.className, placeholder = _a.placeholder; _a.value; var label = _a.label, hideLabel = _a.hideLabel, prefix = _a.prefix, error = _a.error;
|
|
21
|
+
var _b = useState(Number), newValue = _b[0], setValue = _b[1];
|
|
22
|
+
var handleOnChange = function (value) {
|
|
23
|
+
setValue(value);
|
|
24
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(value);
|
|
25
|
+
};
|
|
26
|
+
return (jsx(CurrencyInput, { onChange: handleOnChange, value: newValue, className: className, placeholder: placeholder, label: label, hideLabel: hideLabel, prefix: prefix, error: error }, void 0));
|
|
27
|
+
};
|
|
28
|
+
CurrencyInputStory.storyName = 'CurrencyInput';
|
|
29
|
+
|
|
30
|
+
export default story;
|
|
31
|
+
export { CurrencyInputStory };
|
|
32
|
+
//# sourceMappingURL=input.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.stories.js","sources":["../../../../../../src/lib/components/input/currency/input.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { CurrencyInput, CurrencyInputProps } from '.';\nimport sharedConfig from '../stories/config';\n\nconst story = {\n title: 'JSX/Inputs',\n component: CurrencyInput,\n argTypes: sharedConfig,\n parameters: {\n componentSubtitle: 'The default input component is used to gather informations from the user.'\n }\n};\n\nexport const CurrencyInputStory = ({ \n onChange,\n className,\n placeholder,\n value,\n label,\n hideLabel,\n prefix,\n error\n}: CurrencyInputProps) => {\n const [newValue, setValue] = useState<number | null>(Number);\n\n const handleOnChange = (value: number | null) => {\n setValue(value)\n onChange?.(value);\n }\n\n return (\n <CurrencyInput \n onChange={handleOnChange}\n value={newValue}\n className={className}\n placeholder={placeholder}\n label={label}\n hideLabel={hideLabel}\n prefix={prefix}\n error={error}\n />\n );\n};\n\nCurrencyInputStory.storyName = 'CurrencyInput';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;IAKM,KAAK,GAAG;IACZ,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE,YAAY;IACtB,UAAU,EAAE;QACV,iBAAiB,EAAE,2EAA2E;KAC/F;EACD;IAEW,kBAAkB,GAAG,UAAC,EASd;QARnB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,WAAW,iBAAA,UACN,MACL,KAAK,WAAA,EACL,SAAS,eAAA,EACT,MAAM,YAAA,EACN,KAAK;IAEC,IAAA,KAAuB,QAAQ,CAAgB,MAAM,CAAC,EAArD,QAAQ,QAAA,EAAE,QAAQ,QAAmC,CAAC;IAE7D,IAAM,cAAc,GAAG,UAAC,KAAoB;QAC1C,QAAQ,CAAC,KAAK,CAAC,CAAA;QACf,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;KACnB,CAAA;IAED,QACEA,IAAC,aAAa,IACZ,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,WACZ,EACF;AACJ,EAAE;AAEF,kBAAkB,CAAC,SAAS,GAAG,eAAe;;;;;"}
|
|
@@ -1,66 +1,12 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { Input } from './index.js';
|
|
4
|
+
import { s as sharedConfig } from '../../config-56f12c98.js';
|
|
4
5
|
import '../../tslib.es6-5bc94358.js';
|
|
5
6
|
import '../../index-6ea95111.js';
|
|
6
7
|
import '../../index-fb46adf9.js';
|
|
7
8
|
import '../../style-inject.es-1f59c1d0.js';
|
|
8
9
|
|
|
9
|
-
var sharedConfig = {
|
|
10
|
-
value: {
|
|
11
|
-
defaultValue: '',
|
|
12
|
-
description: 'Current input value.',
|
|
13
|
-
control: { type: 'text' }
|
|
14
|
-
},
|
|
15
|
-
className: {
|
|
16
|
-
description: 'Wrapper classNames for custom styling',
|
|
17
|
-
defaultValue: '',
|
|
18
|
-
control: { type: 'text' }
|
|
19
|
-
},
|
|
20
|
-
placeholder: {
|
|
21
|
-
description: 'Placeholder for DirtySwan Input component',
|
|
22
|
-
defaultValue: 'Placeholder',
|
|
23
|
-
control: { type: 'text' }
|
|
24
|
-
},
|
|
25
|
-
label: {
|
|
26
|
-
description: 'Label of the Input component',
|
|
27
|
-
defaultValue: 'Input Label',
|
|
28
|
-
control: { type: 'text' }
|
|
29
|
-
},
|
|
30
|
-
hideLabel: {
|
|
31
|
-
description: 'Whether or not a label should be hidden.. This is needed for accessibility purposes and a label should always be provided',
|
|
32
|
-
defaultValue: false,
|
|
33
|
-
control: { type: 'boolean' }
|
|
34
|
-
},
|
|
35
|
-
prefix: {
|
|
36
|
-
description: 'A prefix that can be displayed on the left of the input. Specially useful for currencies.',
|
|
37
|
-
defaultValue: '£',
|
|
38
|
-
control: { type: 'text' }
|
|
39
|
-
},
|
|
40
|
-
id: {
|
|
41
|
-
description: 'Unique ID identifier of the input. Relevant for accessibility.',
|
|
42
|
-
defaultValue: '1234567890',
|
|
43
|
-
control: { type: 'text' }
|
|
44
|
-
},
|
|
45
|
-
error: {
|
|
46
|
-
description: 'Error message that will also make input show on error state.',
|
|
47
|
-
defaultValue: '',
|
|
48
|
-
control: { type: 'text' },
|
|
49
|
-
table: {
|
|
50
|
-
type: {
|
|
51
|
-
summary: 'string | boolean'
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
onChange: {
|
|
56
|
-
description: 'Function that is called when value of current input changes',
|
|
57
|
-
action: true,
|
|
58
|
-
table: {
|
|
59
|
-
category: "Callbacks",
|
|
60
|
-
},
|
|
61
|
-
},
|
|
62
|
-
};
|
|
63
|
-
|
|
64
10
|
var story = {
|
|
65
11
|
title: 'JSX/Inputs/Input',
|
|
66
12
|
component: Input,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.stories.js","sources":["../../../../../src/lib/components/input/
|
|
1
|
+
{"version":3,"file":"input.stories.js","sources":["../../../../../src/lib/components/input/input.stories.tsx"],"sourcesContent":["\nimport { ChangeEvent, useState } from 'react';\nimport { Input, InputProps } from '.';\nimport sharedConfig from './stories/config';\n\nconst story = {\n title: 'JSX/Inputs/Input',\n component: Input,\n argTypes: sharedConfig,\n parameters: {\n componentSubtitle: 'The default input component is used to gather informations from the user.'\n }\n};\n\nexport const InputStory = ({ \n onChange,\n className,\n placeholder,\n value,\n label,\n hideLabel,\n prefix,\n error\n}: InputProps) => {\n const [newValue, setValue] = useState(value);\n\n const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value)\n onChange?.(event);\n }\n\n return (\n <Input \n onChange={handleOnChange}\n value={newValue}\n className={className}\n placeholder={placeholder}\n label={label}\n hideLabel={hideLabel}\n prefix={prefix}\n error={error}\n />\n );\n};\n\nInputStory.storyName = 'Input';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;IAKM,KAAK,GAAG;IACZ,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,YAAY;IACtB,UAAU,EAAE;QACV,iBAAiB,EAAE,2EAA2E;KAC/F;EACD;IAEW,UAAU,GAAG,UAAC,EASd;QARX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,KAAK,WAAA,EACL,SAAS,eAAA,EACT,MAAM,YAAA,EACN,KAAK,WAAA;IAEC,IAAA,KAAuB,QAAQ,CAAC,KAAK,CAAC,EAArC,QAAQ,QAAA,EAAE,QAAQ,QAAmB,CAAC;IAE7C,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC5B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;KACnB,CAAA;IAED,QACEA,IAAC,KAAK,IACJ,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,WACZ,EACF;AACJ,EAAE;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO;;;;;"}
|
|
@@ -2843,12 +2843,11 @@ var MultiDropzone = function (_a) {
|
|
|
2843
2843
|
maxSize: maxSize,
|
|
2844
2844
|
onDrop: onDrop,
|
|
2845
2845
|
}), getRootProps = _f.getRootProps, getInputProps = _f.getInputProps;
|
|
2846
|
-
var uniqueId = useRef(generateId());
|
|
2847
2846
|
return (jsxs("div", __assign({ className: styles.container }, { children: [jsxs("div", __assign({ className: classNames("w100 ta-center br8 c-pointer " + styles.dropzoneContainer, (_b = {},
|
|
2848
2847
|
_b[styles['dropzoneContainerDisabled']] = uploading,
|
|
2849
|
-
_b)) }, getRootProps(), { children: [jsx("input", __assign({ "data-testid": "ds-drop-input"
|
|
2848
|
+
_b)) }, getRootProps(), { children: [jsx("input", __assign({ "data-testid": "ds-drop-input" }, getInputProps()), void 0),
|
|
2850
2849
|
jsx(UploadCloudIcon, { className: isCondensed ? styles.img : '', size: isCondensed ? 24 : 64, color: 'purple-500' }, void 0),
|
|
2851
|
-
jsx("
|
|
2850
|
+
jsx("div", __assign({ className: "p-h4 mt8 d-block c-pointer " + (isCondensed ? styles.textInline : '') }, { children: uploading
|
|
2852
2851
|
? (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.currentlyUploadingText) ||
|
|
2853
2852
|
'Please wait while uploading file...'
|
|
2854
2853
|
: (textOverrides === null || textOverrides === void 0 ? void 0 : textOverrides.instructionsText) || 'Choose file or drag & drop' }), void 0),
|