@jigowatts/jigowatts-ui 2.3.0 → 2.3.1
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/README.md +3 -0
- package/dist/components/NumericFieldController/index.cjs.js +1 -1
- package/dist/components/NumericFieldController/index.cjs.js.map +1 -1
- package/dist/components/NumericFieldController/index.d.ts +5 -0
- package/dist/components/NumericFieldController/index.es.js +54 -50
- package/dist/components/NumericFieldController/index.es.js.map +1 -1
- package/dist/components/NumericFieldController/index.test.cjs.js +1 -1
- package/dist/components/NumericFieldController/index.test.cjs.js.map +1 -1
- package/dist/components/NumericFieldController/index.test.es.js +113 -11
- package/dist/components/NumericFieldController/index.test.es.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),F=require("react"),h=require("@mui/icons-material"),g=require("@mui/material"),x=require("react-hook-form"),V=require("react-number-format"),N=(a,t)=>{if(!a)return t??null},T=F.forwardRef(function(t,c){const{valueType:u,defaultValue:v,onChange:l,allowLeadingZeros:s,formEmptyValue:d,...m}=t,i=d;return o.jsx(V.NumericFormat,{...m,getInputRef:c,allowLeadingZeros:u==="STRING"||s,onValueChange:(e,n)=>{if(!l||!n.event)return;let r;switch(u){case"STRING":r=e.value;break;case"FORMATTED_STRING":r=e.formattedValue;break;default:r=e.floatValue??i}const p={...n.event,target:{...n.event.target,name:t.name,value:r}};l(p)}})}),C=a=>{const{inputProps:t,config:c,defaultValue:u,emptyValue:v,optional:l,...s}=a,{textFieldProps:d}=t??{},m=N(l,v),i=e=>e==null||e==="";return o.jsx(x.Controller,{control:s.control,defaultValue:u,name:s.name,render:({field:e,fieldState:n})=>{var r;return o.jsx(g.TextField,{...d,name:e.name,value:i(e.value)?"":e.value,onChange:p=>{e.onChange(p)},error:!!n.error,helperText:(r=n.error)==null?void 0:r.message,onBlur:e.onBlur,InputProps:{inputComponent:T,endAdornment:i(e.value)?void 0:o.jsx(g.InputAdornment,{position:"end",children:o.jsx(g.IconButton,{onClick:()=>{e.onChange(m)},edge:"end",children:o.jsx(h.Clear,{})})}),inputProps:{...c,formEmptyValue:m}}})}})};exports.NumericFieldController=C;exports.default=C;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/NumericFieldController/index.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport { forwardRef, type JSX } from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n IconButton,\n InputAdornment,\n InputBaseComponentProps,\n TextField,\n TextFieldProps,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n FieldValues,\n PathValue,\n UseControllerProps,\n} from \"react-hook-form\";\nimport { NumericFormat } from \"react-number-format\";\n\n/** NumericFormat に渡さない（DOM にも出さない）内部用 */\ntype NumericFormatEmptyProps = {\n /** 数値が無いときに RHF
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/NumericFieldController/index.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport { forwardRef, type JSX } from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n IconButton,\n InputAdornment,\n InputBaseComponentProps,\n TextField,\n TextFieldProps,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n FieldValues,\n PathValue,\n UseControllerProps,\n} from \"react-hook-form\";\nimport { NumericFormat } from \"react-number-format\";\n\n/** NumericFormat に渡さない（DOM にも出さない）内部用 */\ntype NumericFormatEmptyProps = {\n /** 数値が無いときに RHF に渡す値 */\n formEmptyValue?: number | string | null | undefined;\n};\n\ntype MuiNumericFieldConfig = {\n displayErrorMessage?: boolean;\n /**\n *\n * @exmaple\n * - FLOAT: `1000`\n * - STRING: `'1000'`\n * - FORMATTED_STRING: `'1,000'`\n * @defaultValue `'FLOAT'`\n */\n valueType?: \"FLOAT\" | \"STRING\" | \"FORMATTED_STRING\";\n thousandSeparator?: boolean | string;\n decimalSeparator?: string;\n allowedDecimalSeparators?: Array<string>;\n thousandsGroupStyle?: \"thousand\" | \"lakh\" | \"wan\" | \"none\";\n decimalScale?: number;\n fixedDecimalScale?: boolean;\n allowNegative?: boolean;\n allowLeadingZeros?: boolean;\n suffix?: string;\n prefix?: string;\n};\n\ntype MuiNumericFieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = UseControllerProps<TFieldValues, TName> & {\n /** Additional settings */\n config?: MuiNumericFieldConfig;\n /** Settings for MUI elements */\n inputProps?: {\n /**\n * Settings for TextField inside MuiTextField\n *\n * API: {@link https://mui.com/material-ui/api/text-field/}\n */\n textFieldProps?: TextFieldProps;\n };\n defaultValue: PathValue<FieldValues, FieldPath<FieldValues>>;\n /**\n * z.number().optional() 向け。\n * true のとき空値は undefined。未指定時は nullable 向けに null。\n */\n optional?: boolean;\n emptyValue?: 0 | \"\" | null | undefined;\n};\n\nconst resolveFormEmptyValue = (\n optional?: boolean,\n emptyValue?: 0 | \"\" | null | undefined,\n): number | string | null | undefined => {\n if (optional) {\n return undefined;\n }\n\n return emptyValue ?? null;\n};\n\n/**\n * 数値入力の表示フォーマット\n */\nconst NumberFormatCustom = forwardRef<\n HTMLInputElement,\n InputBaseComponentProps & MuiNumericFieldConfig & NumericFormatEmptyProps\n>(function NumberFormatBase(props, ref) {\n // 不要なプロパティを除くためdestructureする\n /* eslint-disable @typescript-eslint/no-unused-vars -- NumericFormat に渡さない */\n const {\n valueType,\n defaultValue,\n onChange,\n allowLeadingZeros,\n formEmptyValue,\n ...others\n } = props;\n /* eslint-enable @typescript-eslint/no-unused-vars */\n\n const resolvedFormEmpty = formEmptyValue;\n\n return (\n <NumericFormat\n {...others}\n getInputRef={ref}\n allowLeadingZeros={valueType === \"STRING\" || allowLeadingZeros}\n onValueChange={(values, sourceInfo) => {\n if (!onChange || !sourceInfo.event) return;\n let value: string | number | undefined | null;\n switch (valueType) {\n case \"STRING\":\n value = values.value;\n break;\n case \"FORMATTED_STRING\":\n value = values.formattedValue;\n break;\n default:\n value = values.floatValue ?? resolvedFormEmpty;\n }\n const event = {\n ...(sourceInfo.event as React.SyntheticEvent<HTMLInputElement>),\n target: {\n ...sourceInfo.event.target,\n name: props.name,\n value,\n },\n };\n onChange(event);\n }}\n />\n );\n});\n\n/**\n * React hook formとreact-number-formatで管理される数値入力コンポーネントです。\n * @typeParam TFieldValues - Type of the form.\n * @typeParam TName - Field name.\n * @example\n * ```\n *\n * <MuiNumericField<FormData, \"assets\">\n * name=\"assets\"\n * control={control}\n * defaultValue={undefined}\n * muiProps={{\n * textFieldProps: {\n * label: 'Assets',\n * fullWidth: true\n * }\n * }}\n * />\n * ```\n */\nexport const NumericFieldController: <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(\n props: MuiNumericFieldProps<TFieldValues, TName>,\n) => JSX.Element = (props) => {\n const {\n inputProps: muiProps,\n config,\n defaultValue,\n emptyValue,\n optional,\n ...others\n } = props;\n const { textFieldProps } = muiProps ?? {};\n const formEmptyValue = resolveFormEmptyValue(optional, emptyValue);\n\n const isEmptyValue = (value: string | number | undefined | null) => {\n return value === null || value === undefined || value === \"\";\n };\n return (\n <Controller\n control={others.control}\n defaultValue={defaultValue}\n name={others.name}\n render={({ field, fieldState }) => (\n <TextField\n {...textFieldProps}\n name={field.name}\n value={isEmptyValue(field.value) ? \"\" : field.value}\n onChange={(e) => {\n field.onChange(e);\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n onBlur={field.onBlur}\n InputProps={{\n inputComponent: NumberFormatCustom,\n endAdornment: !isEmptyValue(field.value) ? (\n <InputAdornment position=\"end\">\n <IconButton\n onClick={() => {\n field.onChange(formEmptyValue);\n }}\n edge=\"end\"\n >\n <Clear />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n inputProps: {\n ...config,\n formEmptyValue,\n },\n }}\n />\n )}\n />\n );\n};\n\nexport default NumericFieldController;\n"],"names":["resolveFormEmptyValue","optional","emptyValue","NumberFormatCustom","forwardRef","props","ref","valueType","defaultValue","onChange","allowLeadingZeros","formEmptyValue","others","resolvedFormEmpty","jsx","NumericFormat","values","sourceInfo","value","event","NumericFieldController","muiProps","config","textFieldProps","isEmptyValue","Controller","field","fieldState","TextField","e","_a","InputAdornment","IconButton","Clear"],"mappings":"8RAwEMA,EAAwB,CAC5BC,EACAC,IACuC,CACvC,GAAI,CAAAD,EAIJ,OAAOC,GAAc,IACvB,EAKMC,EAAqBC,EAAAA,WAGzB,SAA0BC,EAAOC,EAAK,CAGtC,KAAM,CACJ,UAAAC,EACA,aAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,eAAAC,EACA,GAAGC,CAAA,EACDP,EAGEQ,EAAoBF,EAE1B,OACEG,EAAAA,IAACC,EAAAA,cAAA,CACE,GAAGH,EACJ,YAAaN,EACb,kBAAmBC,IAAc,UAAYG,EAC7C,cAAe,CAACM,EAAQC,IAAe,CACrC,GAAI,CAACR,GAAY,CAACQ,EAAW,MAAO,OACpC,IAAIC,EACJ,OAAQX,EAAA,CACN,IAAK,SACHW,EAAQF,EAAO,MACf,MACF,IAAK,mBACHE,EAAQF,EAAO,eACf,MACF,QACEE,EAAQF,EAAO,YAAcH,CAAA,CAEjC,MAAMM,EAAQ,CACZ,GAAIF,EAAW,MACf,OAAQ,CACN,GAAGA,EAAW,MAAM,OACpB,KAAMZ,EAAM,KACZ,MAAAa,CAAA,CACF,EAEFT,EAASU,CAAK,CAChB,CAAA,CAAA,CAGN,CAAC,EAsBYC,EAKOf,GAAU,CAC5B,KAAM,CACJ,WAAYgB,EACZ,OAAAC,EACA,aAAAd,EACA,WAAAN,EACA,SAAAD,EACA,GAAGW,CAAA,EACDP,EACE,CAAE,eAAAkB,GAAmBF,GAAY,CAAA,EACjCV,EAAiBX,EAAsBC,EAAUC,CAAU,EAE3DsB,EAAgBN,GACbA,GAAU,MAA+BA,IAAU,GAE5D,OACEJ,EAAAA,IAACW,EAAAA,WAAA,CACC,QAASb,EAAO,QAChB,aAAAJ,EACA,KAAMI,EAAO,KACb,OAAQ,CAAC,CAAE,MAAAc,EAAO,WAAAC,KAAW,OAC3Bb,OAAAA,EAAAA,IAACc,EAAAA,UAAA,CACE,GAAGL,EACJ,KAAMG,EAAM,KACZ,MAAOF,EAAaE,EAAM,KAAK,EAAI,GAAKA,EAAM,MAC9C,SAAWG,GAAM,CACfH,EAAM,SAASG,CAAC,CAClB,EACA,MAAO,CAAC,CAACF,EAAW,MACpB,YAAYG,EAAAH,EAAW,QAAX,YAAAG,EAAkB,QAC9B,OAAQJ,EAAM,OACd,WAAY,CACV,eAAgBvB,EAChB,aAAeqB,EAAaE,EAAM,KAAK,EAWnC,OAVFZ,MAACiB,EAAAA,eAAA,CAAe,SAAS,MACvB,SAAAjB,EAAAA,IAACkB,EAAAA,WAAA,CACC,QAAS,IAAM,CACbN,EAAM,SAASf,CAAc,CAC/B,EACA,KAAK,MAEL,eAACsB,EAAAA,MAAA,CAAA,CAAM,CAAA,CAAA,EAEX,EAEF,WAAY,CACV,GAAGX,EACH,eAAAX,CAAA,CACF,CACF,CAAA,EACF,CAAA,CAIR"}
|
|
@@ -37,6 +37,11 @@ type MuiNumericFieldProps<TFieldValues extends FieldValues = FieldValues, TName
|
|
|
37
37
|
textFieldProps?: TextFieldProps;
|
|
38
38
|
};
|
|
39
39
|
defaultValue: PathValue<FieldValues, FieldPath<FieldValues>>;
|
|
40
|
+
/**
|
|
41
|
+
* z.number().optional() 向け。
|
|
42
|
+
* true のとき空値は undefined。未指定時は nullable 向けに null。
|
|
43
|
+
*/
|
|
44
|
+
optional?: boolean;
|
|
40
45
|
emptyValue?: 0 | "" | null | undefined;
|
|
41
46
|
};
|
|
42
47
|
/**
|
|
@@ -1,92 +1,96 @@
|
|
|
1
1
|
import { jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as f } from "react";
|
|
3
|
-
import { Clear as
|
|
4
|
-
import { TextField as
|
|
3
|
+
import { Clear as v } from "@mui/icons-material";
|
|
4
|
+
import { TextField as h, InputAdornment as C, IconButton as V } from "@mui/material";
|
|
5
5
|
import { Controller as F } from "react-hook-form";
|
|
6
6
|
import { NumericFormat as T } from "react-number-format";
|
|
7
|
-
const
|
|
7
|
+
const y = (a, r) => {
|
|
8
|
+
if (!a)
|
|
9
|
+
return r ?? null;
|
|
10
|
+
}, N = f(function(r, i) {
|
|
8
11
|
const {
|
|
9
|
-
valueType:
|
|
10
|
-
defaultValue:
|
|
11
|
-
onChange:
|
|
12
|
-
allowLeadingZeros:
|
|
13
|
-
formEmptyValue:
|
|
12
|
+
valueType: m,
|
|
13
|
+
defaultValue: g,
|
|
14
|
+
onChange: l,
|
|
15
|
+
allowLeadingZeros: u,
|
|
16
|
+
formEmptyValue: c,
|
|
14
17
|
...p
|
|
15
|
-
} =
|
|
18
|
+
} = r, s = c;
|
|
16
19
|
return /* @__PURE__ */ n(
|
|
17
20
|
T,
|
|
18
21
|
{
|
|
19
22
|
...p,
|
|
20
|
-
getInputRef:
|
|
21
|
-
allowLeadingZeros:
|
|
22
|
-
onValueChange: (
|
|
23
|
-
if (!
|
|
24
|
-
let
|
|
25
|
-
switch (
|
|
23
|
+
getInputRef: i,
|
|
24
|
+
allowLeadingZeros: m === "STRING" || u,
|
|
25
|
+
onValueChange: (e, t) => {
|
|
26
|
+
if (!l || !t.event) return;
|
|
27
|
+
let o;
|
|
28
|
+
switch (m) {
|
|
26
29
|
case "STRING":
|
|
27
|
-
|
|
30
|
+
o = e.value;
|
|
28
31
|
break;
|
|
29
32
|
case "FORMATTED_STRING":
|
|
30
|
-
|
|
33
|
+
o = e.formattedValue;
|
|
31
34
|
break;
|
|
32
35
|
default:
|
|
33
|
-
|
|
36
|
+
o = e.floatValue ?? s;
|
|
34
37
|
}
|
|
35
|
-
const
|
|
36
|
-
...
|
|
38
|
+
const d = {
|
|
39
|
+
...t.event,
|
|
37
40
|
target: {
|
|
38
|
-
...
|
|
39
|
-
name:
|
|
40
|
-
value:
|
|
41
|
+
...t.event.target,
|
|
42
|
+
name: r.name,
|
|
43
|
+
value: o
|
|
41
44
|
}
|
|
42
45
|
};
|
|
43
|
-
|
|
46
|
+
l(d);
|
|
44
47
|
}
|
|
45
48
|
}
|
|
46
49
|
);
|
|
47
|
-
}),
|
|
50
|
+
}), w = (a) => {
|
|
48
51
|
const {
|
|
49
|
-
inputProps:
|
|
50
|
-
config:
|
|
51
|
-
defaultValue:
|
|
52
|
-
emptyValue:
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
inputProps: r,
|
|
53
|
+
config: i,
|
|
54
|
+
defaultValue: m,
|
|
55
|
+
emptyValue: g,
|
|
56
|
+
optional: l,
|
|
57
|
+
...u
|
|
58
|
+
} = a, { textFieldProps: c } = r ?? {}, p = y(l, g), s = (e) => e == null || e === "";
|
|
55
59
|
return /* @__PURE__ */ n(
|
|
56
60
|
F,
|
|
57
61
|
{
|
|
58
|
-
control:
|
|
59
|
-
defaultValue:
|
|
60
|
-
name:
|
|
61
|
-
render: ({ field: e, fieldState:
|
|
62
|
-
var
|
|
62
|
+
control: u.control,
|
|
63
|
+
defaultValue: m,
|
|
64
|
+
name: u.name,
|
|
65
|
+
render: ({ field: e, fieldState: t }) => {
|
|
66
|
+
var o;
|
|
63
67
|
return /* @__PURE__ */ n(
|
|
64
|
-
|
|
68
|
+
h,
|
|
65
69
|
{
|
|
66
|
-
...
|
|
70
|
+
...c,
|
|
67
71
|
name: e.name,
|
|
68
|
-
value:
|
|
69
|
-
onChange: (
|
|
70
|
-
e.onChange(
|
|
72
|
+
value: s(e.value) ? "" : e.value,
|
|
73
|
+
onChange: (d) => {
|
|
74
|
+
e.onChange(d);
|
|
71
75
|
},
|
|
72
|
-
error: !!
|
|
73
|
-
helperText: (
|
|
76
|
+
error: !!t.error,
|
|
77
|
+
helperText: (o = t.error) == null ? void 0 : o.message,
|
|
74
78
|
onBlur: e.onBlur,
|
|
75
79
|
InputProps: {
|
|
76
80
|
inputComponent: N,
|
|
77
|
-
endAdornment:
|
|
81
|
+
endAdornment: s(e.value) ? void 0 : /* @__PURE__ */ n(C, { position: "end", children: /* @__PURE__ */ n(
|
|
78
82
|
V,
|
|
79
83
|
{
|
|
80
84
|
onClick: () => {
|
|
81
|
-
e.onChange(
|
|
85
|
+
e.onChange(p);
|
|
82
86
|
},
|
|
83
87
|
edge: "end",
|
|
84
|
-
children: /* @__PURE__ */ n(
|
|
88
|
+
children: /* @__PURE__ */ n(v, {})
|
|
85
89
|
}
|
|
86
90
|
) }),
|
|
87
91
|
inputProps: {
|
|
88
|
-
...
|
|
89
|
-
formEmptyValue:
|
|
92
|
+
...i,
|
|
93
|
+
formEmptyValue: p
|
|
90
94
|
}
|
|
91
95
|
}
|
|
92
96
|
}
|
|
@@ -96,7 +100,7 @@ const N = f(function(m, s) {
|
|
|
96
100
|
);
|
|
97
101
|
};
|
|
98
102
|
export {
|
|
99
|
-
|
|
100
|
-
|
|
103
|
+
w as NumericFieldController,
|
|
104
|
+
w as default
|
|
101
105
|
};
|
|
102
106
|
//# sourceMappingURL=index.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/NumericFieldController/index.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport { forwardRef, type JSX } from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n IconButton,\n InputAdornment,\n InputBaseComponentProps,\n TextField,\n TextFieldProps,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n FieldValues,\n PathValue,\n UseControllerProps,\n} from \"react-hook-form\";\nimport { NumericFormat } from \"react-number-format\";\n\n/** NumericFormat に渡さない（DOM にも出さない）内部用 */\ntype NumericFormatEmptyProps = {\n /** 数値が無いときに RHF
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/NumericFieldController/index.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\nimport { forwardRef, type JSX } from \"react\";\nimport { Clear } from \"@mui/icons-material\";\nimport {\n IconButton,\n InputAdornment,\n InputBaseComponentProps,\n TextField,\n TextFieldProps,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n FieldValues,\n PathValue,\n UseControllerProps,\n} from \"react-hook-form\";\nimport { NumericFormat } from \"react-number-format\";\n\n/** NumericFormat に渡さない（DOM にも出さない）内部用 */\ntype NumericFormatEmptyProps = {\n /** 数値が無いときに RHF に渡す値 */\n formEmptyValue?: number | string | null | undefined;\n};\n\ntype MuiNumericFieldConfig = {\n displayErrorMessage?: boolean;\n /**\n *\n * @exmaple\n * - FLOAT: `1000`\n * - STRING: `'1000'`\n * - FORMATTED_STRING: `'1,000'`\n * @defaultValue `'FLOAT'`\n */\n valueType?: \"FLOAT\" | \"STRING\" | \"FORMATTED_STRING\";\n thousandSeparator?: boolean | string;\n decimalSeparator?: string;\n allowedDecimalSeparators?: Array<string>;\n thousandsGroupStyle?: \"thousand\" | \"lakh\" | \"wan\" | \"none\";\n decimalScale?: number;\n fixedDecimalScale?: boolean;\n allowNegative?: boolean;\n allowLeadingZeros?: boolean;\n suffix?: string;\n prefix?: string;\n};\n\ntype MuiNumericFieldProps<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = UseControllerProps<TFieldValues, TName> & {\n /** Additional settings */\n config?: MuiNumericFieldConfig;\n /** Settings for MUI elements */\n inputProps?: {\n /**\n * Settings for TextField inside MuiTextField\n *\n * API: {@link https://mui.com/material-ui/api/text-field/}\n */\n textFieldProps?: TextFieldProps;\n };\n defaultValue: PathValue<FieldValues, FieldPath<FieldValues>>;\n /**\n * z.number().optional() 向け。\n * true のとき空値は undefined。未指定時は nullable 向けに null。\n */\n optional?: boolean;\n emptyValue?: 0 | \"\" | null | undefined;\n};\n\nconst resolveFormEmptyValue = (\n optional?: boolean,\n emptyValue?: 0 | \"\" | null | undefined,\n): number | string | null | undefined => {\n if (optional) {\n return undefined;\n }\n\n return emptyValue ?? null;\n};\n\n/**\n * 数値入力の表示フォーマット\n */\nconst NumberFormatCustom = forwardRef<\n HTMLInputElement,\n InputBaseComponentProps & MuiNumericFieldConfig & NumericFormatEmptyProps\n>(function NumberFormatBase(props, ref) {\n // 不要なプロパティを除くためdestructureする\n /* eslint-disable @typescript-eslint/no-unused-vars -- NumericFormat に渡さない */\n const {\n valueType,\n defaultValue,\n onChange,\n allowLeadingZeros,\n formEmptyValue,\n ...others\n } = props;\n /* eslint-enable @typescript-eslint/no-unused-vars */\n\n const resolvedFormEmpty = formEmptyValue;\n\n return (\n <NumericFormat\n {...others}\n getInputRef={ref}\n allowLeadingZeros={valueType === \"STRING\" || allowLeadingZeros}\n onValueChange={(values, sourceInfo) => {\n if (!onChange || !sourceInfo.event) return;\n let value: string | number | undefined | null;\n switch (valueType) {\n case \"STRING\":\n value = values.value;\n break;\n case \"FORMATTED_STRING\":\n value = values.formattedValue;\n break;\n default:\n value = values.floatValue ?? resolvedFormEmpty;\n }\n const event = {\n ...(sourceInfo.event as React.SyntheticEvent<HTMLInputElement>),\n target: {\n ...sourceInfo.event.target,\n name: props.name,\n value,\n },\n };\n onChange(event);\n }}\n />\n );\n});\n\n/**\n * React hook formとreact-number-formatで管理される数値入力コンポーネントです。\n * @typeParam TFieldValues - Type of the form.\n * @typeParam TName - Field name.\n * @example\n * ```\n *\n * <MuiNumericField<FormData, \"assets\">\n * name=\"assets\"\n * control={control}\n * defaultValue={undefined}\n * muiProps={{\n * textFieldProps: {\n * label: 'Assets',\n * fullWidth: true\n * }\n * }}\n * />\n * ```\n */\nexport const NumericFieldController: <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(\n props: MuiNumericFieldProps<TFieldValues, TName>,\n) => JSX.Element = (props) => {\n const {\n inputProps: muiProps,\n config,\n defaultValue,\n emptyValue,\n optional,\n ...others\n } = props;\n const { textFieldProps } = muiProps ?? {};\n const formEmptyValue = resolveFormEmptyValue(optional, emptyValue);\n\n const isEmptyValue = (value: string | number | undefined | null) => {\n return value === null || value === undefined || value === \"\";\n };\n return (\n <Controller\n control={others.control}\n defaultValue={defaultValue}\n name={others.name}\n render={({ field, fieldState }) => (\n <TextField\n {...textFieldProps}\n name={field.name}\n value={isEmptyValue(field.value) ? \"\" : field.value}\n onChange={(e) => {\n field.onChange(e);\n }}\n error={!!fieldState.error}\n helperText={fieldState.error?.message}\n onBlur={field.onBlur}\n InputProps={{\n inputComponent: NumberFormatCustom,\n endAdornment: !isEmptyValue(field.value) ? (\n <InputAdornment position=\"end\">\n <IconButton\n onClick={() => {\n field.onChange(formEmptyValue);\n }}\n edge=\"end\"\n >\n <Clear />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n inputProps: {\n ...config,\n formEmptyValue,\n },\n }}\n />\n )}\n />\n );\n};\n\nexport default NumericFieldController;\n"],"names":["resolveFormEmptyValue","optional","emptyValue","NumberFormatCustom","forwardRef","props","ref","valueType","defaultValue","onChange","allowLeadingZeros","formEmptyValue","others","resolvedFormEmpty","jsx","NumericFormat","values","sourceInfo","value","event","NumericFieldController","muiProps","config","textFieldProps","isEmptyValue","Controller","field","fieldState","TextField","e","_a","InputAdornment","IconButton","Clear"],"mappings":";;;;;;AAwEA,MAAMA,IAAwB,CAC5BC,GACAC,MACuC;AACvC,MAAI,CAAAD;AAIJ,WAAOC,KAAc;AACvB,GAKMC,IAAqBC,EAGzB,SAA0BC,GAAOC,GAAK;AAGtC,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GAGEQ,IAAoBF;AAE1B,SACE,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,aAAaN;AAAA,MACb,mBAAmBC,MAAc,YAAYG;AAAA,MAC7C,eAAe,CAACM,GAAQC,MAAe;AACrC,YAAI,CAACR,KAAY,CAACQ,EAAW,MAAO;AACpC,YAAIC;AACJ,gBAAQX,GAAA;AAAA,UACN,KAAK;AACH,YAAAW,IAAQF,EAAO;AACf;AAAA,UACF,KAAK;AACH,YAAAE,IAAQF,EAAO;AACf;AAAA,UACF;AACE,YAAAE,IAAQF,EAAO,cAAcH;AAAA,QAAA;AAEjC,cAAMM,IAAQ;AAAA,UACZ,GAAIF,EAAW;AAAA,UACf,QAAQ;AAAA,YACN,GAAGA,EAAW,MAAM;AAAA,YACpB,MAAMZ,EAAM;AAAA,YACZ,OAAAa;AAAA,UAAA;AAAA,QACF;AAEF,QAAAT,EAASU,CAAK;AAAA,MAChB;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAsBYC,IAKM,CAACf,MAAU;AAC5B,QAAM;AAAA,IACJ,YAAYgB;AAAA,IACZ,QAAAC;AAAA,IACA,cAAAd;AAAA,IACA,YAAAN;AAAA,IACA,UAAAD;AAAA,IACA,GAAGW;AAAA,EAAA,IACDP,GACE,EAAE,gBAAAkB,MAAmBF,KAAY,CAAA,GACjCV,IAAiBX,EAAsBC,GAAUC,CAAU,GAE3DsB,IAAe,CAACN,MACbA,KAAU,QAA+BA,MAAU;AAE5D,SACE,gBAAAJ;AAAA,IAACW;AAAA,IAAA;AAAA,MACC,SAASb,EAAO;AAAA,MAChB,cAAAJ;AAAA,MACA,MAAMI,EAAO;AAAA,MACb,QAAQ,CAAC,EAAE,OAAAc,GAAO,YAAAC,QAAW;;AAC3B,+BAAAb;AAAA,UAACc;AAAA,UAAA;AAAA,YACE,GAAGL;AAAA,YACJ,MAAMG,EAAM;AAAA,YACZ,OAAOF,EAAaE,EAAM,KAAK,IAAI,KAAKA,EAAM;AAAA,YAC9C,UAAU,CAACG,MAAM;AACf,cAAAH,EAAM,SAASG,CAAC;AAAA,YAClB;AAAA,YACA,OAAO,CAAC,CAACF,EAAW;AAAA,YACpB,aAAYG,IAAAH,EAAW,UAAX,gBAAAG,EAAkB;AAAA,YAC9B,QAAQJ,EAAM;AAAA,YACd,YAAY;AAAA,cACV,gBAAgBvB;AAAA,cAChB,cAAeqB,EAAaE,EAAM,KAAK,IAWnC,SAVF,gBAAAZ,EAACiB,GAAA,EAAe,UAAS,OACvB,UAAA,gBAAAjB;AAAA,gBAACkB;AAAA,gBAAA;AAAA,kBACC,SAAS,MAAM;AACb,oBAAAN,EAAM,SAASf,CAAc;AAAA,kBAC/B;AAAA,kBACA,MAAK;AAAA,kBAEL,4BAACsB,GAAA,CAAA,CAAM;AAAA,gBAAA;AAAA,cAAA,GAEX;AAAA,cAEF,YAAY;AAAA,gBACV,GAAGX;AAAA,gBACH,gBAAAX;AAAA,cAAA;AAAA,YACF;AAAA,UACF;AAAA,QAAA;AAAA;AAAA,IACF;AAAA,EAAA;AAIR;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const
|
|
1
|
+
"use strict";const s=require("react/jsx-runtime"),t=require("../../react.esm-DGuy6Rn3.cjs"),u=require("../../index-BoenezD8.cjs"),i=require("react-hook-form"),d=require("./index.cjs.js"),a=({optional:n,emptyValue:e,onValuesChange:l})=>{const{control:o,watch:r}=i.useForm({defaultValues:{amount:void 0}});return l(r()),s.jsx(d.NumericFieldController,{control:o,name:"amount",defaultValue:void 0,optional:n,emptyValue:e,inputProps:{textFieldProps:{placeholder:"Numeric Placeholder"}}})};describe("NumericFieldController component",()=>{it("renders a numeric field with the correct placeholder text",()=>{const e=t.renderHook(()=>i.useForm().control).result.current,l="TestNumericField",o="Numeric Placeholder";t.render(s.jsx(d.NumericFieldController,{control:e,name:l,defaultValue:"",inputProps:{textFieldProps:{placeholder:o}}}));const c=t.screen.getByPlaceholderText(o);expect(c).toBeInTheDocument(),expect(c).toHaveAttribute("type","text"),expect(c).toHaveAttribute("name",l),expect(c).toHaveAttribute("placeholder",o)}),it("sets null when clear button is clicked by default",async()=>{const n=u.userEvent.setup();let e={};const{rerender:l}=t.render(s.jsx(a,{onValuesChange:r=>{e=r}})),o=t.screen.getByPlaceholderText("Numeric Placeholder");await n.type(o,"1000"),l(s.jsx(a,{onValuesChange:r=>{e=r}})),await n.click(t.screen.getByRole("button")),await t.waitForWrapper(()=>{expect(e.amount).toBeNull()})}),it("sets undefined when optional is true",async()=>{const n=u.userEvent.setup();let e={};const{rerender:l}=t.render(s.jsx(a,{optional:!0,onValuesChange:r=>{e=r}})),o=t.screen.getByPlaceholderText("Numeric Placeholder");await n.type(o,"1000"),l(s.jsx(a,{optional:!0,onValuesChange:r=>{e=r}})),await n.click(t.screen.getByRole("button")),await t.waitForWrapper(()=>{expect(e.amount).toBeUndefined()})}),it("respects emptyValue={null}",async()=>{const n=u.userEvent.setup();let e={};const{rerender:l}=t.render(s.jsx(a,{emptyValue:null,onValuesChange:r=>{e=r}})),o=t.screen.getByPlaceholderText("Numeric Placeholder");await n.type(o,"1000"),l(s.jsx(a,{emptyValue:null,onValuesChange:r=>{e=r}})),await n.click(t.screen.getByRole("button")),await t.waitForWrapper(()=>{expect(e.amount).toBeNull()})})});
|
|
2
2
|
//# sourceMappingURL=index.test.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/NumericFieldController/index.test.tsx"],"sourcesContent":["import { render, renderHook, screen } from \"@testing-library/react\";\nimport { useForm } from \"react-hook-form\";\n\nimport NumericFieldController from \".\";\n\ndescribe(\"NumericFieldController component\", () => {\n it(\"renders a numeric field with the correct placeholder text\", () => {\n const controlResult = renderHook(() => {\n const methods = useForm();\n return methods.control;\n });\n const control = controlResult.result.current;\n const testName = \"TestNumericField\";\n const placeholder = \"Numeric Placeholder\";\n const defaultValue = \"\";\n\n render(\n <NumericFieldController\n control={control}\n name={testName}\n defaultValue={defaultValue}\n inputProps={{\n textFieldProps: { placeholder: placeholder },\n }}\n />,\n );\n\n const input = screen.getByPlaceholderText(placeholder);\n expect(input).toBeInTheDocument();\n expect(input).toHaveAttribute(\"type\", \"text\");\n expect(input).toHaveAttribute(\"name\", testName);\n expect(input).toHaveAttribute(\"placeholder\", placeholder);\n });\n\n
|
|
1
|
+
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/NumericFieldController/index.test.tsx"],"sourcesContent":["import { render, renderHook, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { useForm } from \"react-hook-form\";\n\nimport NumericFieldController from \".\";\n\ntype FormValues = {\n amount?: number | null;\n};\n\nconst TestForm = ({\n optional,\n emptyValue,\n onValuesChange,\n}: {\n optional?: boolean;\n emptyValue?: 0 | \"\" | null | undefined;\n onValuesChange: (values: FormValues) => void;\n}) => {\n const { control, watch } = useForm<FormValues>({\n defaultValues: { amount: undefined },\n });\n\n onValuesChange(watch());\n\n return (\n <NumericFieldController\n control={control}\n name=\"amount\"\n defaultValue={undefined}\n optional={optional}\n emptyValue={emptyValue}\n inputProps={{\n textFieldProps: { placeholder: \"Numeric Placeholder\" },\n }}\n />\n );\n};\n\ndescribe(\"NumericFieldController component\", () => {\n it(\"renders a numeric field with the correct placeholder text\", () => {\n const controlResult = renderHook(() => {\n const methods = useForm();\n return methods.control;\n });\n const control = controlResult.result.current;\n const testName = \"TestNumericField\";\n const placeholder = \"Numeric Placeholder\";\n const defaultValue = \"\";\n\n render(\n <NumericFieldController\n control={control}\n name={testName}\n defaultValue={defaultValue}\n inputProps={{\n textFieldProps: { placeholder: placeholder },\n }}\n />,\n );\n\n const input = screen.getByPlaceholderText(placeholder);\n expect(input).toBeInTheDocument();\n expect(input).toHaveAttribute(\"type\", \"text\");\n expect(input).toHaveAttribute(\"name\", testName);\n expect(input).toHaveAttribute(\"placeholder\", placeholder);\n });\n\n it(\"sets null when clear button is clicked by default\", async () => {\n const user = userEvent.setup();\n let latestValues: FormValues = {};\n\n const { rerender } = render(\n <TestForm\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n const input = screen.getByPlaceholderText(\"Numeric Placeholder\");\n await user.type(input, \"1000\");\n rerender(\n <TestForm\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n await user.click(screen.getByRole(\"button\"));\n\n await waitFor(() => {\n expect(latestValues.amount).toBeNull();\n });\n });\n\n it(\"sets undefined when optional is true\", async () => {\n const user = userEvent.setup();\n let latestValues: FormValues = {};\n\n const { rerender } = render(\n <TestForm\n optional\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n const input = screen.getByPlaceholderText(\"Numeric Placeholder\");\n await user.type(input, \"1000\");\n rerender(\n <TestForm\n optional\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n await user.click(screen.getByRole(\"button\"));\n\n await waitFor(() => {\n expect(latestValues.amount).toBeUndefined();\n });\n });\n\n it(\"respects emptyValue={null}\", async () => {\n const user = userEvent.setup();\n let latestValues: FormValues = {};\n\n const { rerender } = render(\n <TestForm\n emptyValue={null}\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n const input = screen.getByPlaceholderText(\"Numeric Placeholder\");\n await user.type(input, \"1000\");\n rerender(\n <TestForm\n emptyValue={null}\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n await user.click(screen.getByRole(\"button\"));\n\n await waitFor(() => {\n expect(latestValues.amount).toBeNull();\n });\n });\n});\n"],"names":["TestForm","optional","emptyValue","onValuesChange","control","watch","useForm","jsx","NumericFieldController","renderHook","testName","placeholder","render","input","screen","user","userEvent","latestValues","rerender","values","waitFor"],"mappings":"2LAUMA,EAAW,CAAC,CAChB,SAAAC,EACA,WAAAC,EACA,eAAAC,CACF,IAIM,CACJ,KAAM,CAAE,QAAAC,EAAS,MAAAC,CAAA,EAAUC,UAAoB,CAC7C,cAAe,CAAE,OAAQ,MAAA,CAAU,CACpC,EAED,OAAAH,EAAeE,GAAO,EAGpBE,EAAAA,IAACC,EAAAA,uBAAA,CACC,QAAAJ,EACA,KAAK,SACL,aAAc,OACd,SAAAH,EACA,WAAAC,EACA,WAAY,CACV,eAAgB,CAAE,YAAa,qBAAA,CAAsB,CACvD,CAAA,CAGN,EAEA,SAAS,mCAAoC,IAAM,CACjD,GAAG,4DAA6D,IAAM,CAKpE,MAAME,EAJgBK,EAAAA,WAAW,IACfH,EAAAA,QAAA,EACD,OAChB,EAC6B,OAAO,QAC/BI,EAAW,mBACXC,EAAc,sBAGpBC,EAAAA,OACEL,EAAAA,IAACC,EAAAA,uBAAA,CACC,QAAAJ,EACA,KAAMM,EACN,aANiB,GAOjB,WAAY,CACV,eAAgB,CAAE,YAAAC,CAAA,CAAyB,CAC7C,CAAA,CACF,EAGF,MAAME,EAAQC,EAAAA,OAAO,qBAAqBH,CAAW,EACrD,OAAOE,CAAK,EAAE,kBAAA,EACd,OAAOA,CAAK,EAAE,gBAAgB,OAAQ,MAAM,EAC5C,OAAOA,CAAK,EAAE,gBAAgB,OAAQH,CAAQ,EAC9C,OAAOG,CAAK,EAAE,gBAAgB,cAAeF,CAAW,CAC1D,CAAC,EAED,GAAG,oDAAqD,SAAY,CAClE,MAAMI,EAAOC,EAAAA,UAAU,MAAA,EACvB,IAAIC,EAA2B,CAAA,EAE/B,KAAM,CAAE,SAAAC,GAAaN,EAAAA,OACnBL,EAAAA,IAACP,EAAA,CACC,eAAiBmB,GAAW,CAC1BF,EAAeE,CACjB,CAAA,CAAA,CACF,EAGIN,EAAQC,EAAAA,OAAO,qBAAqB,qBAAqB,EAC/D,MAAMC,EAAK,KAAKF,EAAO,MAAM,EAC7BK,EACEX,EAAAA,IAACP,EAAA,CACC,eAAiBmB,GAAW,CAC1BF,EAAeE,CACjB,CAAA,CAAA,CACF,EAGF,MAAMJ,EAAK,MAAMD,EAAAA,OAAO,UAAU,QAAQ,CAAC,EAE3C,MAAMM,EAAAA,eAAQ,IAAM,CAClB,OAAOH,EAAa,MAAM,EAAE,SAAA,CAC9B,CAAC,CACH,CAAC,EAED,GAAG,uCAAwC,SAAY,CACrD,MAAMF,EAAOC,EAAAA,UAAU,MAAA,EACvB,IAAIC,EAA2B,CAAA,EAE/B,KAAM,CAAE,SAAAC,GAAaN,EAAAA,OACnBL,EAAAA,IAACP,EAAA,CACC,SAAQ,GACR,eAAiBmB,GAAW,CAC1BF,EAAeE,CACjB,CAAA,CAAA,CACF,EAGIN,EAAQC,EAAAA,OAAO,qBAAqB,qBAAqB,EAC/D,MAAMC,EAAK,KAAKF,EAAO,MAAM,EAC7BK,EACEX,EAAAA,IAACP,EAAA,CACC,SAAQ,GACR,eAAiBmB,GAAW,CAC1BF,EAAeE,CACjB,CAAA,CAAA,CACF,EAGF,MAAMJ,EAAK,MAAMD,EAAAA,OAAO,UAAU,QAAQ,CAAC,EAE3C,MAAMM,EAAAA,eAAQ,IAAM,CAClB,OAAOH,EAAa,MAAM,EAAE,cAAA,CAC9B,CAAC,CACH,CAAC,EAED,GAAG,6BAA8B,SAAY,CAC3C,MAAMF,EAAOC,EAAAA,UAAU,MAAA,EACvB,IAAIC,EAA2B,CAAA,EAE/B,KAAM,CAAE,SAAAC,GAAaN,EAAAA,OACnBL,EAAAA,IAACP,EAAA,CACC,WAAY,KACZ,eAAiBmB,GAAW,CAC1BF,EAAeE,CACjB,CAAA,CAAA,CACF,EAGIN,EAAQC,EAAAA,OAAO,qBAAqB,qBAAqB,EAC/D,MAAMC,EAAK,KAAKF,EAAO,MAAM,EAC7BK,EACEX,EAAAA,IAACP,EAAA,CACC,WAAY,KACZ,eAAiBmB,GAAW,CAC1BF,EAAeE,CACjB,CAAA,CAAA,CACF,EAGF,MAAMJ,EAAK,MAAMD,EAAAA,OAAO,UAAU,QAAQ,CAAC,EAE3C,MAAMM,EAAAA,eAAQ,IAAM,CAClB,OAAOH,EAAa,MAAM,EAAE,SAAA,CAC9B,CAAC,CACH,CAAC,CACH,CAAC"}
|
|
@@ -1,25 +1,127 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { a as
|
|
3
|
-
import {
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { a as h, r as s, s as n, w as i } from "../../react.esm-BBESb8eI.js";
|
|
3
|
+
import { u as p } from "../../index-sarAILcU.js";
|
|
4
|
+
import { useForm as d } from "react-hook-form";
|
|
4
5
|
import { NumericFieldController as m } from "./index.es.js";
|
|
6
|
+
const u = ({
|
|
7
|
+
optional: o,
|
|
8
|
+
emptyValue: e,
|
|
9
|
+
onValuesChange: a
|
|
10
|
+
}) => {
|
|
11
|
+
const { control: l, watch: t } = d({
|
|
12
|
+
defaultValues: { amount: void 0 }
|
|
13
|
+
});
|
|
14
|
+
return a(t()), /* @__PURE__ */ r(
|
|
15
|
+
m,
|
|
16
|
+
{
|
|
17
|
+
control: l,
|
|
18
|
+
name: "amount",
|
|
19
|
+
defaultValue: void 0,
|
|
20
|
+
optional: o,
|
|
21
|
+
emptyValue: e,
|
|
22
|
+
inputProps: {
|
|
23
|
+
textFieldProps: { placeholder: "Numeric Placeholder" }
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
};
|
|
5
28
|
describe("NumericFieldController component", () => {
|
|
6
29
|
it("renders a numeric field with the correct placeholder text", () => {
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
/* @__PURE__ */
|
|
30
|
+
const e = h(() => d().control).result.current, a = "TestNumericField", l = "Numeric Placeholder";
|
|
31
|
+
s(
|
|
32
|
+
/* @__PURE__ */ r(
|
|
10
33
|
m,
|
|
11
34
|
{
|
|
12
|
-
control:
|
|
13
|
-
name:
|
|
35
|
+
control: e,
|
|
36
|
+
name: a,
|
|
14
37
|
defaultValue: "",
|
|
15
38
|
inputProps: {
|
|
16
|
-
textFieldProps: { placeholder:
|
|
39
|
+
textFieldProps: { placeholder: l }
|
|
17
40
|
}
|
|
18
41
|
}
|
|
19
42
|
)
|
|
20
43
|
);
|
|
21
|
-
const
|
|
22
|
-
expect(
|
|
44
|
+
const c = n.getByPlaceholderText(l);
|
|
45
|
+
expect(c).toBeInTheDocument(), expect(c).toHaveAttribute("type", "text"), expect(c).toHaveAttribute("name", a), expect(c).toHaveAttribute("placeholder", l);
|
|
46
|
+
}), it("sets null when clear button is clicked by default", async () => {
|
|
47
|
+
const o = p.setup();
|
|
48
|
+
let e = {};
|
|
49
|
+
const { rerender: a } = s(
|
|
50
|
+
/* @__PURE__ */ r(
|
|
51
|
+
u,
|
|
52
|
+
{
|
|
53
|
+
onValuesChange: (t) => {
|
|
54
|
+
e = t;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
)
|
|
58
|
+
), l = n.getByPlaceholderText("Numeric Placeholder");
|
|
59
|
+
await o.type(l, "1000"), a(
|
|
60
|
+
/* @__PURE__ */ r(
|
|
61
|
+
u,
|
|
62
|
+
{
|
|
63
|
+
onValuesChange: (t) => {
|
|
64
|
+
e = t;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
)
|
|
68
|
+
), await o.click(n.getByRole("button")), await i(() => {
|
|
69
|
+
expect(e.amount).toBeNull();
|
|
70
|
+
});
|
|
71
|
+
}), it("sets undefined when optional is true", async () => {
|
|
72
|
+
const o = p.setup();
|
|
73
|
+
let e = {};
|
|
74
|
+
const { rerender: a } = s(
|
|
75
|
+
/* @__PURE__ */ r(
|
|
76
|
+
u,
|
|
77
|
+
{
|
|
78
|
+
optional: !0,
|
|
79
|
+
onValuesChange: (t) => {
|
|
80
|
+
e = t;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
)
|
|
84
|
+
), l = n.getByPlaceholderText("Numeric Placeholder");
|
|
85
|
+
await o.type(l, "1000"), a(
|
|
86
|
+
/* @__PURE__ */ r(
|
|
87
|
+
u,
|
|
88
|
+
{
|
|
89
|
+
optional: !0,
|
|
90
|
+
onValuesChange: (t) => {
|
|
91
|
+
e = t;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
)
|
|
95
|
+
), await o.click(n.getByRole("button")), await i(() => {
|
|
96
|
+
expect(e.amount).toBeUndefined();
|
|
97
|
+
});
|
|
98
|
+
}), it("respects emptyValue={null}", async () => {
|
|
99
|
+
const o = p.setup();
|
|
100
|
+
let e = {};
|
|
101
|
+
const { rerender: a } = s(
|
|
102
|
+
/* @__PURE__ */ r(
|
|
103
|
+
u,
|
|
104
|
+
{
|
|
105
|
+
emptyValue: null,
|
|
106
|
+
onValuesChange: (t) => {
|
|
107
|
+
e = t;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
)
|
|
111
|
+
), l = n.getByPlaceholderText("Numeric Placeholder");
|
|
112
|
+
await o.type(l, "1000"), a(
|
|
113
|
+
/* @__PURE__ */ r(
|
|
114
|
+
u,
|
|
115
|
+
{
|
|
116
|
+
emptyValue: null,
|
|
117
|
+
onValuesChange: (t) => {
|
|
118
|
+
e = t;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
)
|
|
122
|
+
), await o.click(n.getByRole("button")), await i(() => {
|
|
123
|
+
expect(e.amount).toBeNull();
|
|
124
|
+
});
|
|
23
125
|
});
|
|
24
126
|
});
|
|
25
127
|
//# sourceMappingURL=index.test.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.es.js","sources":["../../../src/components/NumericFieldController/index.test.tsx"],"sourcesContent":["import { render, renderHook, screen } from \"@testing-library/react\";\nimport { useForm } from \"react-hook-form\";\n\nimport NumericFieldController from \".\";\n\ndescribe(\"NumericFieldController component\", () => {\n it(\"renders a numeric field with the correct placeholder text\", () => {\n const controlResult = renderHook(() => {\n const methods = useForm();\n return methods.control;\n });\n const control = controlResult.result.current;\n const testName = \"TestNumericField\";\n const placeholder = \"Numeric Placeholder\";\n const defaultValue = \"\";\n\n render(\n <NumericFieldController\n control={control}\n name={testName}\n defaultValue={defaultValue}\n inputProps={{\n textFieldProps: { placeholder: placeholder },\n }}\n />,\n );\n\n const input = screen.getByPlaceholderText(placeholder);\n expect(input).toBeInTheDocument();\n expect(input).toHaveAttribute(\"type\", \"text\");\n expect(input).toHaveAttribute(\"name\", testName);\n expect(input).toHaveAttribute(\"placeholder\", placeholder);\n });\n\n
|
|
1
|
+
{"version":3,"file":"index.test.es.js","sources":["../../../src/components/NumericFieldController/index.test.tsx"],"sourcesContent":["import { render, renderHook, screen, waitFor } from \"@testing-library/react\";\nimport userEvent from \"@testing-library/user-event\";\nimport { useForm } from \"react-hook-form\";\n\nimport NumericFieldController from \".\";\n\ntype FormValues = {\n amount?: number | null;\n};\n\nconst TestForm = ({\n optional,\n emptyValue,\n onValuesChange,\n}: {\n optional?: boolean;\n emptyValue?: 0 | \"\" | null | undefined;\n onValuesChange: (values: FormValues) => void;\n}) => {\n const { control, watch } = useForm<FormValues>({\n defaultValues: { amount: undefined },\n });\n\n onValuesChange(watch());\n\n return (\n <NumericFieldController\n control={control}\n name=\"amount\"\n defaultValue={undefined}\n optional={optional}\n emptyValue={emptyValue}\n inputProps={{\n textFieldProps: { placeholder: \"Numeric Placeholder\" },\n }}\n />\n );\n};\n\ndescribe(\"NumericFieldController component\", () => {\n it(\"renders a numeric field with the correct placeholder text\", () => {\n const controlResult = renderHook(() => {\n const methods = useForm();\n return methods.control;\n });\n const control = controlResult.result.current;\n const testName = \"TestNumericField\";\n const placeholder = \"Numeric Placeholder\";\n const defaultValue = \"\";\n\n render(\n <NumericFieldController\n control={control}\n name={testName}\n defaultValue={defaultValue}\n inputProps={{\n textFieldProps: { placeholder: placeholder },\n }}\n />,\n );\n\n const input = screen.getByPlaceholderText(placeholder);\n expect(input).toBeInTheDocument();\n expect(input).toHaveAttribute(\"type\", \"text\");\n expect(input).toHaveAttribute(\"name\", testName);\n expect(input).toHaveAttribute(\"placeholder\", placeholder);\n });\n\n it(\"sets null when clear button is clicked by default\", async () => {\n const user = userEvent.setup();\n let latestValues: FormValues = {};\n\n const { rerender } = render(\n <TestForm\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n const input = screen.getByPlaceholderText(\"Numeric Placeholder\");\n await user.type(input, \"1000\");\n rerender(\n <TestForm\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n await user.click(screen.getByRole(\"button\"));\n\n await waitFor(() => {\n expect(latestValues.amount).toBeNull();\n });\n });\n\n it(\"sets undefined when optional is true\", async () => {\n const user = userEvent.setup();\n let latestValues: FormValues = {};\n\n const { rerender } = render(\n <TestForm\n optional\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n const input = screen.getByPlaceholderText(\"Numeric Placeholder\");\n await user.type(input, \"1000\");\n rerender(\n <TestForm\n optional\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n await user.click(screen.getByRole(\"button\"));\n\n await waitFor(() => {\n expect(latestValues.amount).toBeUndefined();\n });\n });\n\n it(\"respects emptyValue={null}\", async () => {\n const user = userEvent.setup();\n let latestValues: FormValues = {};\n\n const { rerender } = render(\n <TestForm\n emptyValue={null}\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n const input = screen.getByPlaceholderText(\"Numeric Placeholder\");\n await user.type(input, \"1000\");\n rerender(\n <TestForm\n emptyValue={null}\n onValuesChange={(values) => {\n latestValues = values;\n }}\n />,\n );\n\n await user.click(screen.getByRole(\"button\"));\n\n await waitFor(() => {\n expect(latestValues.amount).toBeNull();\n });\n });\n});\n"],"names":["TestForm","optional","emptyValue","onValuesChange","control","watch","useForm","jsx","NumericFieldController","renderHook","testName","placeholder","render","input","screen","user","userEvent","latestValues","rerender","values","waitFor"],"mappings":"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"}
|