@mrshmllw/smores-react 3.5.1 → 4.0.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/dist/CurrencyInput/Collection.d.ts +2 -0
- package/dist/CurrencyInput/Collection.js +65 -0
- package/dist/CurrencyInput/Collection.js.map +1 -0
- package/dist/CurrencyInput/CurrencyInput.d.ts +23 -0
- package/dist/CurrencyInput/CurrencyInput.js +48 -0
- package/dist/CurrencyInput/CurrencyInput.js.map +1 -0
- package/dist/CurrencyInput/CurrencyInput.stories.d.ts +16 -0
- package/dist/CurrencyInput/CurrencyInput.stories.js +33 -0
- package/dist/CurrencyInput/CurrencyInput.stories.js.map +1 -0
- package/dist/CurrencyInput/Example.d.ts +2 -0
- package/dist/CurrencyInput/Example.js +8 -0
- package/dist/CurrencyInput/Example.js.map +1 -0
- package/dist/CurrencyInput/__tests__/CurrencyInput.d.ts +1 -0
- package/dist/CurrencyInput/__tests__/CurrencyInput.js +17 -0
- package/dist/CurrencyInput/__tests__/CurrencyInput.js.map +1 -0
- package/dist/CurrencyInput/index.d.ts +1 -0
- package/dist/CurrencyInput/index.js +2 -0
- package/dist/CurrencyInput/index.js.map +1 -0
- package/dist/NumberInput/Container.js +1 -1
- package/dist/NumberInput/Container.js.map +1 -1
- package/dist/NumberInput/NumberInput.d.ts +0 -1
- package/dist/NumberInput/NumberInput.js +6 -17
- package/dist/NumberInput/NumberInput.js.map +1 -1
- package/dist/NumberInput/__tests__/NumberInput.js +2 -2
- package/dist/NumberInput/__tests__/NumberInput.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
@@ -0,0 +1,65 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { Text } from '../Text';
|
4
|
+
import { Box } from '../Box';
|
5
|
+
import { CurrencyInput } from './CurrencyInput';
|
6
|
+
import { noop } from '../utils/noop';
|
7
|
+
import { SupportMessage } from '../SupportMessage';
|
8
|
+
const variationList = [
|
9
|
+
{
|
10
|
+
id: 'days',
|
11
|
+
placeholder: '200',
|
12
|
+
errorMsg: 'This field is required',
|
13
|
+
label: 'Amount',
|
14
|
+
onChange: noop,
|
15
|
+
onInputChange: noop,
|
16
|
+
onBlur: noop,
|
17
|
+
value: '',
|
18
|
+
},
|
19
|
+
];
|
20
|
+
export const CollectionPage = () => {
|
21
|
+
const [, setValue] = useState('');
|
22
|
+
return (React.createElement(Box, { flex: true, direction: "column" }, variationList.map(({ id, placeholder, errorMsg, label }) => {
|
23
|
+
return (React.createElement(Box, { key: id, flex: true, direction: "column", mb: "32px" },
|
24
|
+
React.createElement(Title, { tag: "span", typo: "header-medium" }, "CurrencyInput variations"),
|
25
|
+
React.createElement(Row, { label: "Generic" },
|
26
|
+
React.createElement(CurrencyInput, { id: id, label: label, value: "", placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
|
27
|
+
React.createElement(Row, { label: "Fallback" },
|
28
|
+
React.createElement(CurrencyInput, { id: id, label: label, value: "", placeholder: placeholder, fallbackStyle: true, error: false, errorMsg: errorMsg, onChange: setValue })),
|
29
|
+
React.createElement(Row, { label: "Disabled" },
|
30
|
+
React.createElement(CurrencyInput, { id: id, label: label, value: "", placeholder: placeholder, disabled: true, error: false, errorMsg: errorMsg, onChange: setValue })),
|
31
|
+
React.createElement(Row, { label: "Required" },
|
32
|
+
React.createElement(CurrencyInput, { id: id, label: label, value: "", required: true, placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
|
33
|
+
React.createElement(Row, { label: "Assistive text" },
|
34
|
+
React.createElement(CurrencyInput, { id: id, label: label, value: "", placeholder: placeholder, assistiveText: "Some assistive text", error: false, errorMsg: errorMsg, onChange: setValue })),
|
35
|
+
React.createElement(Row, { label: "Completed" },
|
36
|
+
React.createElement(CurrencyInput, { id: id, label: label, value: "", placeholder: placeholder, error: false, completed: true, errorMsg: errorMsg, onChange: setValue })),
|
37
|
+
React.createElement(Row, { label: "As title" },
|
38
|
+
React.createElement(CurrencyInput, { id: id, label: label, value: "", renderAsTitle: true, placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
|
39
|
+
React.createElement(Row, { label: "Error" },
|
40
|
+
React.createElement(CurrencyInput, { id: id, label: label, value: "", required: true, placeholder: placeholder, assistiveText: "Some assistive text", error: true, errorMsg: errorMsg, onChange: setValue })),
|
41
|
+
React.createElement(Row, { label: "React element error" },
|
42
|
+
React.createElement(CurrencyInput, { id: id, label: label, required: true, value: "", placeholder: placeholder, error: true, errorMsg: React.createElement(SupportMessage, { type: "warning", description: "error!!" }), onChange: setValue })),
|
43
|
+
React.createElement(Row, { label: "Fallback Error" },
|
44
|
+
React.createElement(CurrencyInput, { id: id, label: label, required: true, value: "", placeholder: placeholder, fallbackStyle: true, error: true, errorMsg: errorMsg, onChange: setValue }))));
|
45
|
+
})));
|
46
|
+
};
|
47
|
+
const Row = ({ label, children, }) => {
|
48
|
+
return (React.createElement(RowWrapper, { mt: "32px" },
|
49
|
+
React.createElement(Box, { width: "140px" },
|
50
|
+
React.createElement(Text, { tag: "span", typo: "label-large" }, label)),
|
51
|
+
children));
|
52
|
+
};
|
53
|
+
const RowWrapper = styled(Box) `
|
54
|
+
display: flex;
|
55
|
+
flex-direction: row;
|
56
|
+
gap: 16px;
|
57
|
+
`;
|
58
|
+
const LABEL_WIDTH = '140px';
|
59
|
+
const Title = styled(Text) `
|
60
|
+
margin-bottom: 12px;
|
61
|
+
font-size: 18px;
|
62
|
+
line-height: 20px;
|
63
|
+
margin-left: ${LABEL_WIDTH};
|
64
|
+
`;
|
65
|
+
//# sourceMappingURL=Collection.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Collection.js","sourceRoot":"","sources":["../../src/CurrencyInput/Collection.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import React, { FocusEvent, FormEvent } from 'react';
|
2
|
+
import { CommonFieldProps } from '../fields/commonFieldTypes';
|
3
|
+
export interface Props extends CommonFieldProps {
|
4
|
+
placeholder: string;
|
5
|
+
name?: string;
|
6
|
+
value: string;
|
7
|
+
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
8
|
+
min?: number;
|
9
|
+
max?: number;
|
10
|
+
}
|
11
|
+
/** on change or on input required */
|
12
|
+
type InputProps = {
|
13
|
+
/** on change is required and on input optional */
|
14
|
+
onChange: (e: string) => void;
|
15
|
+
onInputChange?: (e: FormEvent<HTMLInputElement>) => void;
|
16
|
+
} | {
|
17
|
+
/** on input is required and on change optional */
|
18
|
+
onChange?: (e: string) => void;
|
19
|
+
onInputChange: (e: FormEvent<HTMLInputElement>) => void;
|
20
|
+
};
|
21
|
+
export type CurrencyInputProps = Props & InputProps;
|
22
|
+
export declare const CurrencyInput: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<HTMLInputElement>>;
|
23
|
+
export {};
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import React, { forwardRef, } from 'react';
|
2
|
+
import { Box } from '../Box';
|
3
|
+
import { Field } from '../fields/Field';
|
4
|
+
import { useUniqueId } from '../utils/id';
|
5
|
+
import { Input, StyledFrontIcon, } from '../fields/components/CommonInput';
|
6
|
+
export const CurrencyInput = forwardRef(function CurrencyInput({ id: idProp, placeholder, name, value, onChange, onInputChange, onBlur, min, max, disabled = false, error = false, trailingIcon, fallbackStyle, ...fieldProps }, ref) {
|
7
|
+
const id = useUniqueId(idProp);
|
8
|
+
const frontIcon = "pound-regular";
|
9
|
+
const formatCurrency = (value) => {
|
10
|
+
const decimalIndex = value.indexOf('.');
|
11
|
+
if (decimalIndex >= 0 && value.length > decimalIndex + 1) {
|
12
|
+
const fractionalString = value.substring(decimalIndex + 1).substring(0, 2);
|
13
|
+
return `${value.substring(0, decimalIndex)}.${fractionalString}`;
|
14
|
+
}
|
15
|
+
else {
|
16
|
+
return value;
|
17
|
+
}
|
18
|
+
};
|
19
|
+
const applyMinMax = (value) => {
|
20
|
+
const numberValue = Number(value);
|
21
|
+
if (min && numberValue < min)
|
22
|
+
return min.toString();
|
23
|
+
if (max && numberValue > max)
|
24
|
+
return max.toString();
|
25
|
+
return value;
|
26
|
+
};
|
27
|
+
const handleChange = (value) => {
|
28
|
+
if (onChange === undefined)
|
29
|
+
return;
|
30
|
+
const EMPTY_INPUT = '';
|
31
|
+
if (value === EMPTY_INPUT) {
|
32
|
+
onChange(value);
|
33
|
+
}
|
34
|
+
else {
|
35
|
+
const amount = formatCurrency(value);
|
36
|
+
const normalisedValue = applyMinMax(amount);
|
37
|
+
onChange(normalisedValue);
|
38
|
+
}
|
39
|
+
};
|
40
|
+
return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
|
41
|
+
React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
|
42
|
+
React.createElement(StyledFrontIcon, { disabled: disabled, render: frontIcon, color: "sesame" }),
|
43
|
+
React.createElement(Input, { ref: ref, error: error, disabled: disabled, type: "number", id: id, name: name, placeholder: placeholder, value: value, frontIcon: frontIcon, fallbackStyle: fallbackStyle, onChange: (e) => {
|
44
|
+
onChange && handleChange(e.currentTarget.value);
|
45
|
+
onInputChange && onInputChange(e);
|
46
|
+
}, onBlur: onBlur }))));
|
47
|
+
});
|
48
|
+
//# sourceMappingURL=CurrencyInput.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"CurrencyInput.js","sourceRoot":"","sources":["../../src/CurrencyInput/CurrencyInput.tsx"],"names":[],"mappings":"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"}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { CurrencyInputProps } from './CurrencyInput';
|
3
|
+
declare const _default: {
|
4
|
+
title: string;
|
5
|
+
component: React.ForwardRefExoticComponent<CurrencyInputProps & React.RefAttributes<HTMLInputElement>>;
|
6
|
+
argTypes: {
|
7
|
+
onChange: {
|
8
|
+
action: string;
|
9
|
+
};
|
10
|
+
};
|
11
|
+
};
|
12
|
+
export default _default;
|
13
|
+
export declare const Default: any;
|
14
|
+
export declare const DefaultFallback: any;
|
15
|
+
export declare const Collection: any;
|
16
|
+
export declare const WorkingExample: any;
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { noop } from '../utils/noop';
|
3
|
+
import { CollectionPage } from './Collection';
|
4
|
+
import { CurrencyInput } from './CurrencyInput';
|
5
|
+
import { Example } from './Example';
|
6
|
+
export default {
|
7
|
+
title: 'Currency Input',
|
8
|
+
component: CurrencyInput,
|
9
|
+
argTypes: { onChange: { action: 'changed' } },
|
10
|
+
};
|
11
|
+
const Template = (props) => React.createElement(CurrencyInput, { ...props });
|
12
|
+
export const Default = Template.bind({});
|
13
|
+
Default.args = {
|
14
|
+
id: 'total_amount',
|
15
|
+
label: 'Total Amount',
|
16
|
+
name: 'totalAmount',
|
17
|
+
placeholder: '0',
|
18
|
+
onChange: noop,
|
19
|
+
};
|
20
|
+
export const DefaultFallback = Template.bind({});
|
21
|
+
DefaultFallback.args = {
|
22
|
+
id: 'amount',
|
23
|
+
label: 'Amount',
|
24
|
+
name: 'amount',
|
25
|
+
placeholder: '200',
|
26
|
+
required: true,
|
27
|
+
onChange: noop,
|
28
|
+
fallbackStyle: true,
|
29
|
+
};
|
30
|
+
export const Collection = CollectionPage.bind({});
|
31
|
+
const WorkingExampleTemplate = () => React.createElement(Example, null);
|
32
|
+
export const WorkingExample = WorkingExampleTemplate.bind({});
|
33
|
+
//# sourceMappingURL=CurrencyInput.stories.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"CurrencyInput.stories.js","sourceRoot":"","sources":["../../src/CurrencyInput/CurrencyInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAsB,MAAM,iBAAiB,CAAA;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAyB,EAAE,EAAE,CAAC,oBAAC,aAAa,OAAK,KAAK,GAAI,CAAA;AAE5E,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,cAAc;IAClB,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,aAAa;IACnB,WAAW,EAAE,GAAG;IAChB,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEhD,eAAe,CAAC,IAAI,GAAG;IACrB,EAAE,EAAE,QAAQ;IACZ,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,KAAK;IAClB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,oBAAC,OAAO,OAAG,CAAA;AAEhD,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import { CurrencyInput } from './CurrencyInput';
|
3
|
+
export const Example = () => {
|
4
|
+
const [value, setValue] = useState('');
|
5
|
+
return (React.createElement("form", null,
|
6
|
+
React.createElement(CurrencyInput, { id: "numberInput", label: "Amount paid", name: "numberInput", onChange: (e) => setValue(e), placeholder: "100.00", value: value, min: -200, max: 200, required: true })));
|
7
|
+
};
|
8
|
+
//# sourceMappingURL=Example.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Example.js","sourceRoot":"","sources":["../../src/CurrencyInput/Example.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,OAAO,CACL;QACE,oBAAC,aAAa,IACZ,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,aAAa,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC5B,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,CAAC,GAAG,EACT,GAAG,EAAE,GAAG,EACR,QAAQ,SACR,CACG,CACR,CAAA;AACH,CAAC,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { render } from '@testing-library/react';
|
3
|
+
import 'jest-styled-components';
|
4
|
+
import { CurrencyInput } from '../CurrencyInput';
|
5
|
+
test('renders - number', () => {
|
6
|
+
const { container } = render(React.createElement(CurrencyInput, { type: "number", id: "CurrencyInput", label: "Number", name: "CurrencyInput", value: "", onChange: str => { }, placeholder: "0.00", required: true }));
|
7
|
+
expect(container.firstChild).toMatchSnapshot();
|
8
|
+
});
|
9
|
+
test('renders - error', () => {
|
10
|
+
const { container } = render(React.createElement(CurrencyInput, { type: "number", id: "currencyInput", label: "Currency", name: "currencyInput", value: "200", onChange: str => { }, placeholder: "100.00", strict: true, min: 0, max: 100, error: true, errorMsg: "Oh gosh, this is an error isn't it!" }));
|
11
|
+
expect(container.firstChild).toMatchSnapshot();
|
12
|
+
});
|
13
|
+
test('renders - disabled', () => {
|
14
|
+
const { container } = render(React.createElement(CurrencyInput, { type: "number", id: "currencyInput", label: "Currency", name: "currencyInput", value: "", onChange: str => { }, placeholder: "100.00", disabled: true }));
|
15
|
+
expect(container.firstChild).toMatchSnapshot();
|
16
|
+
});
|
17
|
+
//# sourceMappingURL=CurrencyInput.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"CurrencyInput.js","sourceRoot":"","sources":["../../../src/CurrencyInput/__tests__/CurrencyInput.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAC;AAC9C,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAE/C,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAC5B,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CACxB,oBAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,eAAe,EAClB,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,EAAE,EACR,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAE,CAAC,EACnB,WAAW,EAAC,MAAM,EAClB,QAAQ,EAAE,IAAI,GACd,CACH,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;AACjD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC3B,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CACxB,oBAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,eAAe,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,KAAK,EACX,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAE,CAAC,EACnB,WAAW,EAAC,QAAQ,EACpB,MAAM,EAAE,IAAI,EACZ,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,IAAI,EACX,QAAQ,EAAC,qCAAqC,GAC9C,CACH,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;AACjD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAC9B,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CACxB,oBAAC,aAAa,IACZ,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,eAAe,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,EAAE,EACR,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAE,CAAC,EACnB,WAAW,EAAC,QAAQ,EACpB,QAAQ,EAAE,IAAI,GACd,CACH,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;AACjD,CAAC,CAAC,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export { CurrencyInput } from './CurrencyInput';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/CurrencyInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}
|
@@ -5,6 +5,6 @@ export const Container = () => {
|
|
5
5
|
return (React.createElement("form", null,
|
6
6
|
React.createElement(NumberInput, { id: "numberInput", label: "Amount paid", name: "numberInput",
|
7
7
|
// @ts-expect-error onChange type is too broad and should be handled differently
|
8
|
-
onChange: setValue, placeholder: "100.00",
|
8
|
+
onChange: setValue, placeholder: "100.00", value: value, min: -100, max: 180, step: 10, required: true })));
|
9
9
|
};
|
10
10
|
//# sourceMappingURL=Container.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/NumberInput/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,OAAO,CACL;QACE,oBAAC,WAAW,IACV,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,aAAa;YAClB,gFAAgF;YAChF,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAC,QAAQ,EACpB,
|
1
|
+
{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/NumberInput/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,OAAO,CACL;QACE,oBAAC,WAAW,IACV,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,aAAa;YAClB,gFAAgF;YAChF,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,CAAC,GAAG,EACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,EAAE,EACR,QAAQ,SACR,CACG,CACR,CAAA;AACH,CAAC,CAAA"}
|
@@ -5,7 +5,7 @@ import { Icon } from '../Icon';
|
|
5
5
|
import { Field } from '../fields/Field';
|
6
6
|
import { useUniqueId } from '../utils/id';
|
7
7
|
import { Input, StyledFrontIcon, StyledTrailingIcon, } from '../fields/components/CommonInput';
|
8
|
-
export const NumberInput = forwardRef(function NumberInput({ id: idProp, type = 'number', placeholder, name, value, onChange, onInputChange, onBlur,
|
8
|
+
export const NumberInput = forwardRef(function NumberInput({ id: idProp, type = 'number', placeholder, name, value, onChange, onInputChange, onBlur, min = -999999, max = 999999, step = 0, disabled = false, error = false, frontIcon, trailingIcon, fallbackStyle, ...fieldProps }, ref) {
|
9
9
|
const id = useUniqueId(idProp);
|
10
10
|
// Check whether the min/max value exists is within the specified range
|
11
11
|
const isInRange = (value) => {
|
@@ -21,21 +21,10 @@ export const NumberInput = forwardRef(function NumberInput({ id: idProp, type =
|
|
21
21
|
const roundNumber = (event) => {
|
22
22
|
return Math.round(event * 100) / 100;
|
23
23
|
};
|
24
|
-
const formatCurrency = (event) => {
|
25
|
-
const decimalIndex = event.indexOf('.');
|
26
|
-
if (decimalIndex >= 0 && event.length > decimalIndex + 1) {
|
27
|
-
const fractionalString = event.substring(decimalIndex + 1).substring(0, 2);
|
28
|
-
return `${event.substring(0, decimalIndex)}.${fractionalString}`;
|
29
|
-
}
|
30
|
-
else {
|
31
|
-
return event;
|
32
|
-
}
|
33
|
-
};
|
34
24
|
const applyMinMax = (value) => {
|
35
|
-
|
36
|
-
if (min && number < min)
|
25
|
+
if (min && value < min)
|
37
26
|
return min;
|
38
|
-
if (max &&
|
27
|
+
if (max && value > max)
|
39
28
|
return max;
|
40
29
|
return value;
|
41
30
|
};
|
@@ -47,8 +36,8 @@ export const NumberInput = forwardRef(function NumberInput({ id: idProp, type =
|
|
47
36
|
onChange(event);
|
48
37
|
}
|
49
38
|
else {
|
50
|
-
const
|
51
|
-
const normalisedValue = applyMinMax(
|
39
|
+
const amount = Number(event);
|
40
|
+
const normalisedValue = applyMinMax(amount);
|
52
41
|
onChange(normalisedValue);
|
53
42
|
}
|
54
43
|
};
|
@@ -74,7 +63,7 @@ export const NumberInput = forwardRef(function NumberInput({ id: idProp, type =
|
|
74
63
|
return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
|
75
64
|
React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
|
76
65
|
frontIcon && (React.createElement(StyledFrontIcon, { disabled: disabled, render: frontIcon, color: "sesame" })),
|
77
|
-
React.createElement(Input, { ref: ref, error: error,
|
66
|
+
React.createElement(Input, { ref: ref, error: error, disabled: disabled, type: type, id: id, name: name, placeholder: placeholder, value: value, frontIcon: frontIcon, step: step, fallbackStyle: fallbackStyle, onChange: (e) => {
|
78
67
|
onChange && handleChange(e.currentTarget.value);
|
79
68
|
onInputChange && onInputChange(e);
|
80
69
|
}, onBlur: onBlur }),
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,UAAU,GAGX,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAGvC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EACL,KAAK,EACL,eAAe,EACf,kBAAkB,GACnB,MAAM,kCAAkC,CAAA;
|
1
|
+
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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"}
|
@@ -11,11 +11,11 @@ test('renders - number', () => {
|
|
11
11
|
expect(container.firstChild).toMatchSnapshot();
|
12
12
|
});
|
13
13
|
test('renders - currency', () => {
|
14
|
-
const { container } = render(React.createElement(NumberInput, { type: "number", id: "currencyInput", label: "Currency", name: "currencyInput", value: "50", onChange: str => { }, placeholder: "100.00",
|
14
|
+
const { container } = render(React.createElement(NumberInput, { type: "number", id: "currencyInput", label: "Currency", name: "currencyInput", value: "50", onChange: str => { }, placeholder: "100.00", min: 0, max: 100, step: 10 }));
|
15
15
|
expect(container.firstChild).toMatchSnapshot();
|
16
16
|
});
|
17
17
|
test('renders - error', () => {
|
18
|
-
const { container } = render(React.createElement(NumberInput, { type: "number", id: "currencyInput", label: "Currency", name: "currencyInput", value: "200", onChange: str => { }, placeholder: "100.00",
|
18
|
+
const { container } = render(React.createElement(NumberInput, { type: "number", id: "currencyInput", label: "Currency", name: "currencyInput", value: "200", onChange: str => { }, placeholder: "100.00", min: 0, max: 100, step: 10, error: true, errorMsg: "Oh gosh, this is an error isn't it!" }));
|
19
19
|
expect(container.firstChild).toMatchSnapshot();
|
20
20
|
});
|
21
21
|
test('renders - with trailing icon', () => {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/NumberInput/__tests__/NumberInput.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAC;AAC9C,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3C,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE;IACzB,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CACxB,oBAAC,WAAW,IACV,IAAI,EAAC,KAAK,EACV,EAAE,EAAC,KAAK,EACR,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAC,EAAE,EACR,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAE,CAAC,EACnB,WAAW,EAAC,aAAa,EACzB,MAAM,EAAC,KAAK,EACZ,QAAQ,EAAE,KAAK,EACf,QAAQ,EAAE,KAAK,GACf,CACH,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;AACjD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAC5B,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CACxB,oBAAC,WAAW,IACV,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,EAAE,EACR,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAE,CAAC,EACnB,WAAW,EAAC,MAAM,EAClB,QAAQ,EAAE,IAAI,GACd,CACH,CAAC;IACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;AACjD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAC9B,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CACxB,oBAAC,WAAW,IACV,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,eAAe,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,IAAI,EACV,QAAQ,EAAE,GAAG,CAAC,EAAE,GAAE,CAAC,EACnB,WAAW,EAAC,QAAQ,EACpB,
|
1
|
+
{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/NumberInput/__tests__/NumberInput.js"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}
|