@jigowatts/jigowatts-ui 2.1.1 → 2.2.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/components/Button/index.cjs.js.map +1 -1
- package/dist/components/Button/index.d.ts +9 -8
- package/dist/components/Button/index.es.js.map +1 -1
- package/dist/components/InputController/index.cjs.js +1 -1
- package/dist/components/InputController/index.cjs.js.map +1 -1
- package/dist/components/InputController/index.es.js +37 -36
- package/dist/components/InputController/index.es.js.map +1 -1
- package/dist/components/NumericFieldController/index.cjs.js +1 -1
- package/dist/components/NumericFieldController/index.cjs.js.map +1 -1
- package/dist/components/NumericFieldController/index.es.js +51 -43
- package/dist/components/NumericFieldController/index.es.js.map +1 -1
- package/dist/components/ScrollableDialog/index.cjs.js +1 -1
- package/dist/components/ScrollableDialog/index.cjs.js.map +1 -1
- package/dist/components/ScrollableDialog/index.es.js +12 -12
- package/dist/components/ScrollableDialog/index.es.js.map +1 -1
- package/dist/components/SubMenu/index.test.cjs.js +1 -1
- package/dist/components/SubMenu/index.test.cjs.js.map +1 -1
- package/dist/components/SubMenu/index.test.es.js +13 -13
- package/dist/components/SubMenu/index.test.es.js.map +1 -1
- package/dist/components/TwoFaDialog/index.cjs.js +3 -3
- package/dist/components/TwoFaDialog/index.cjs.js.map +1 -1
- package/dist/components/TwoFaDialog/index.es.js +139 -139
- package/dist/components/TwoFaDialog/index.es.js.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import {\n createTheme,\n Button as MuiButton,\n ButtonProps as MuiButtonProps,\n PaletteColorOptions,\n ThemeProvider,\n} from \"@mui/material\";\n\ndeclare module \"@mui/material/styles\" {\n interface
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import {\n createTheme,\n Button as MuiButton,\n ButtonProps as MuiButtonProps,\n PaletteColor,\n PaletteColorOptions,\n ThemeProvider,\n} from \"@mui/material\";\n\ndeclare module \"@mui/material/styles\" {\n interface Palette {\n thirdly: PaletteColor;\n normal: PaletteColor;\n negative: PaletteColor;\n }\n interface PaletteOptions {\n thirdly?: PaletteColorOptions;\n normal?: PaletteColorOptions;\n negative?: PaletteColorOptions;\n }\n}\n\ndeclare module \"@mui/material/Button\" {\n interface ButtonPropsColorOverrides {\n thirdly: true;\n normal: true;\n negative: true;\n }\n}\n\nconst { palette } = createTheme();\nconst { augmentColor } = palette;\nconst createColor = (mainColor: string, contrastText: string = \"#fff\") =>\n augmentColor({ color: { main: mainColor, contrastText: contrastText } });\nconst theme = createTheme({\n palette: {\n primary: createColor(\"#6672E8\"),\n secondary: createColor(\"#00AD79\"),\n thirdly: createColor(\"#1E2D50\"),\n normal: createColor(\"#808181\"),\n negative: createColor(\"#CA0000\"),\n },\n});\n\ntype ButtonProps = MuiButtonProps & {\n color?:\n | \"primary\"\n | \"secondary\"\n | \"thirdly\"\n | \"normal\"\n | \"negative\"\n | \"error\"\n | \"warning\";\n};\n\n/** MuiButtonを継承したプロジェクトのテーマカラーを適用したボタンです。\n * primary, secondary, thirdly , normal, negative\n */\nexport const Button = (props: ButtonProps) => {\n const { children, color = \"primary\", ...buttonProps } = props;\n\n return (\n <ThemeProvider theme={theme}>\n <MuiButton {...buttonProps} color={color}>\n {children}\n </MuiButton>\n </ThemeProvider>\n );\n};\n\nexport default Button;\n"],"names":["palette","createTheme","augmentColor","createColor","mainColor","contrastText","theme","Button","props","children","color","buttonProps","jsx","ThemeProvider","MuiButton"],"mappings":"4KA8BM,CAAE,QAAAA,CAAA,EAAYC,cAAA,EACd,CAAE,aAAAC,GAAiBF,EACnBG,EAAc,CAACC,EAAmBC,EAAuB,SAC7DH,EAAa,CAAE,MAAO,CAAE,KAAME,EAAW,aAAAC,CAAA,EAA8B,EACnEC,EAAQL,EAAAA,YAAY,CACxB,QAAS,CACP,QAASE,EAAY,SAAS,EAC9B,UAAWA,EAAY,SAAS,EAChC,QAASA,EAAY,SAAS,EAC9B,OAAQA,EAAY,SAAS,EAC7B,SAAUA,EAAY,SAAS,CAAA,CAEnC,CAAC,EAgBYI,EAAUC,GAAuB,CAC5C,KAAM,CAAE,SAAAC,EAAU,MAAAC,EAAQ,UAAW,GAAGC,GAAgBH,EAExD,OACEI,EAAAA,IAACC,EAAAA,eAAc,MAAAP,EACb,SAAAM,EAAAA,IAACE,UAAW,GAAGH,EAAa,MAAAD,EACzB,SAAAD,CAAA,CACH,CAAA,CACF,CAEJ"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import { ButtonProps as MuiButtonProps, PaletteColorOptions } from '@mui/material';
|
|
1
|
+
import { ButtonProps as MuiButtonProps, PaletteColor, PaletteColorOptions } from '@mui/material';
|
|
2
2
|
|
|
3
3
|
declare module "@mui/material/styles" {
|
|
4
|
-
interface
|
|
5
|
-
thirdly:
|
|
6
|
-
normal:
|
|
7
|
-
negative:
|
|
4
|
+
interface Palette {
|
|
5
|
+
thirdly: PaletteColor;
|
|
6
|
+
normal: PaletteColor;
|
|
7
|
+
negative: PaletteColor;
|
|
8
8
|
}
|
|
9
|
-
interface
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
interface PaletteOptions {
|
|
10
|
+
thirdly?: PaletteColorOptions;
|
|
11
|
+
normal?: PaletteColorOptions;
|
|
12
|
+
negative?: PaletteColorOptions;
|
|
12
13
|
}
|
|
13
14
|
}
|
|
14
15
|
declare module "@mui/material/Button" {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import {\n createTheme,\n Button as MuiButton,\n ButtonProps as MuiButtonProps,\n PaletteColorOptions,\n ThemeProvider,\n} from \"@mui/material\";\n\ndeclare module \"@mui/material/styles\" {\n interface
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import {\n createTheme,\n Button as MuiButton,\n ButtonProps as MuiButtonProps,\n PaletteColor,\n PaletteColorOptions,\n ThemeProvider,\n} from \"@mui/material\";\n\ndeclare module \"@mui/material/styles\" {\n interface Palette {\n thirdly: PaletteColor;\n normal: PaletteColor;\n negative: PaletteColor;\n }\n interface PaletteOptions {\n thirdly?: PaletteColorOptions;\n normal?: PaletteColorOptions;\n negative?: PaletteColorOptions;\n }\n}\n\ndeclare module \"@mui/material/Button\" {\n interface ButtonPropsColorOverrides {\n thirdly: true;\n normal: true;\n negative: true;\n }\n}\n\nconst { palette } = createTheme();\nconst { augmentColor } = palette;\nconst createColor = (mainColor: string, contrastText: string = \"#fff\") =>\n augmentColor({ color: { main: mainColor, contrastText: contrastText } });\nconst theme = createTheme({\n palette: {\n primary: createColor(\"#6672E8\"),\n secondary: createColor(\"#00AD79\"),\n thirdly: createColor(\"#1E2D50\"),\n normal: createColor(\"#808181\"),\n negative: createColor(\"#CA0000\"),\n },\n});\n\ntype ButtonProps = MuiButtonProps & {\n color?:\n | \"primary\"\n | \"secondary\"\n | \"thirdly\"\n | \"normal\"\n | \"negative\"\n | \"error\"\n | \"warning\";\n};\n\n/** MuiButtonを継承したプロジェクトのテーマカラーを適用したボタンです。\n * primary, secondary, thirdly , normal, negative\n */\nexport const Button = (props: ButtonProps) => {\n const { children, color = \"primary\", ...buttonProps } = props;\n\n return (\n <ThemeProvider theme={theme}>\n <MuiButton {...buttonProps} color={color}>\n {children}\n </MuiButton>\n </ThemeProvider>\n );\n};\n\nexport default Button;\n"],"names":["palette","createTheme","augmentColor","createColor","mainColor","contrastText","theme","Button","props","children","color","buttonProps","jsx","ThemeProvider","MuiButton"],"mappings":";;AA8BA,MAAM,EAAE,SAAAA,EAAA,IAAYC,EAAA,GACd,EAAE,cAAAC,MAAiBF,GACnBG,IAAc,CAACC,GAAmBC,IAAuB,WAC7DH,EAAa,EAAE,OAAO,EAAE,MAAME,GAAW,cAAAC,EAAA,GAA8B,GACnEC,IAAQL,EAAY;AAAA,EACxB,SAAS;AAAA,IACP,SAASE,EAAY,SAAS;AAAA,IAC9B,WAAWA,EAAY,SAAS;AAAA,IAChC,SAASA,EAAY,SAAS;AAAA,IAC9B,QAAQA,EAAY,SAAS;AAAA,IAC7B,UAAUA,EAAY,SAAS;AAAA,EAAA;AAEnC,CAAC,GAgBYI,IAAS,CAACC,MAAuB;AAC5C,QAAM,EAAE,UAAAC,GAAU,OAAAC,IAAQ,WAAW,GAAGC,MAAgBH;AAExD,SACE,gBAAAI,EAACC,KAAc,OAAAP,GACb,UAAA,gBAAAM,EAACE,KAAW,GAAGH,GAAa,OAAAD,GACzB,UAAAD,EAAA,CACH,EAAA,CACF;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),g=require("@mui/icons-material"),n=require("@mui/material"),j=require("react-hook-form"),m=C=>{const{control:x,type:l,textareaOption:r,name:v,autoComplete:p,placeholder:h,defaultValue:a,emptyValue:i,inputProps:e}=C,u=i===void 0&&a!==void 0?null:i;return o.jsx(j.Controller,{control:x,name:v,defaultValue:a,render:({field:t,fieldState:s})=>{var d;return o.jsxs(n.FormControl,{error:s.invalid,children:[o.jsx(n.TextField,{...t,type:l==="textarea"?void 0:l,multiline:l==="textarea",autoComplete:p,placeholder:h,value:t.value??"",onChange:F=>{const c=F.target.value;t.onChange(c||u)},InputProps:{...e,rows:r?r.rows:void 0,minRows:r?r.minRows:void 0,maxRows:r?r.minRows:void 0,endAdornment:t.value&&!(e!=null&&e.readOnly)&&!(e!=null&&e.disabled)?o.jsx(n.InputAdornment,{position:"end",children:o.jsx(n.IconButton,{onClick:()=>t.onChange(u),edge:"end",children:o.jsx(g.Clear,{})})}):void 0},sx:{"& .MuiInput-underline:before":{borderColor:"#CCCCCC"},"& .MuiInputBase-root":{backgroundColor:"#FFFFFF"},"input:-webkit-autofill":{WebkitBoxShadow:"0 0 0 1000px white inset"}},fullWidth:!0}),o.jsx(n.FormHelperText,{children:(d=s.error)==null?void 0:d.message})]})}})};exports.InputController=m;exports.default=m;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/InputController/index.tsx"],"sourcesContent":["import { Clear } from \"@mui/icons-material\";\nimport {\n FilledInputProps,\n FormControl,\n FormHelperText,\n IconButton,\n InputAdornment,\n InputProps,\n OutlinedInputProps,\n TextField,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n PathValue,\n type Control,\n type FieldValues,\n} from \"react-hook-form\";\n\ntype Type = \"search\" | \"text\" | \"number\" | \"email\" | \"tel\" | \"textarea\";\n\ntype MultilineOption = {\n rows?: number;\n minRows?: number;\n maxRows?: number;\n};\n\ntype Props<T extends FieldValues> = {\n control: Control<T>;\n type: Type;\n textareaOption?: MultilineOption;\n name: FieldPath<T>;\n defaultValue?: PathValue<T, FieldPath<T>>;\n emptyValue?: \"\" | null | undefined;\n autoComplete?: string;\n placeholder?: string;\n inputProps?:\n | Partial<FilledInputProps>\n | Partial<OutlinedInputProps>\n | Partial<InputProps>;\n};\n\nexport const InputController = <T extends FieldValues>(props: Props<T>) => {\n const {\n control,\n type,\n textareaOption,\n name,\n autoComplete,\n placeholder,\n defaultValue,\n emptyValue,\n inputProps,\n } = props;\n\n const convertedEmptyValue =\n emptyValue === undefined && defaultValue !== undefined ? null : emptyValue;\n\n return (\n <Controller\n control={control}\n name={name}\n defaultValue={defaultValue}\n render={({ field, fieldState }) => (\n <FormControl error={fieldState.invalid}>\n <TextField\n {...field}\n type={type === \"textarea\" ? undefined : type}\n multiline={type === \"textarea\"}\n autoComplete={autoComplete}\n placeholder={placeholder}\n value={field.value ?? \"\"}\n onChange={(e) => {\n
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/InputController/index.tsx"],"sourcesContent":["import { Clear } from \"@mui/icons-material\";\nimport {\n FilledInputProps,\n FormControl,\n FormHelperText,\n IconButton,\n InputAdornment,\n InputProps,\n OutlinedInputProps,\n TextField,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n PathValue,\n type Control,\n type FieldValues,\n} from \"react-hook-form\";\n\ntype Type = \"search\" | \"text\" | \"number\" | \"email\" | \"tel\" | \"textarea\";\n\ntype MultilineOption = {\n rows?: number;\n minRows?: number;\n maxRows?: number;\n};\n\ntype Props<T extends FieldValues> = {\n control: Control<T>;\n type: Type;\n textareaOption?: MultilineOption;\n name: FieldPath<T>;\n defaultValue?: PathValue<T, FieldPath<T>>;\n emptyValue?: \"\" | null | undefined;\n autoComplete?: string;\n placeholder?: string;\n inputProps?:\n | Partial<FilledInputProps>\n | Partial<OutlinedInputProps>\n | Partial<InputProps>;\n};\n\nexport const InputController = <T extends FieldValues>(props: Props<T>) => {\n const {\n control,\n type,\n textareaOption,\n name,\n autoComplete,\n placeholder,\n defaultValue,\n emptyValue,\n inputProps,\n } = props;\n\n const convertedEmptyValue =\n emptyValue === undefined && defaultValue !== undefined ? null : emptyValue;\n\n return (\n <Controller\n control={control}\n name={name}\n defaultValue={defaultValue}\n render={({ field, fieldState }) => (\n <FormControl error={fieldState.invalid}>\n <TextField\n {...field}\n type={type === \"textarea\" ? undefined : type}\n multiline={type === \"textarea\"}\n autoComplete={autoComplete}\n placeholder={placeholder}\n value={field.value ?? \"\"}\n onChange={(e) => {\n const value = e.target.value;\n field.onChange(value ? value : convertedEmptyValue);\n }}\n InputProps={{\n ...inputProps,\n rows: textareaOption ? textareaOption.rows : undefined,\n minRows: textareaOption ? textareaOption.minRows : undefined,\n maxRows: textareaOption ? textareaOption.minRows : undefined,\n endAdornment:\n field.value &&\n !inputProps?.readOnly &&\n !inputProps?.disabled ? (\n <InputAdornment position=\"end\">\n <IconButton\n onClick={() => field.onChange(convertedEmptyValue)}\n edge=\"end\"\n >\n <Clear />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n }}\n sx={{\n \"& .MuiInput-underline:before\": {\n borderColor: \"#CCCCCC\",\n },\n \"& .MuiInputBase-root\": {\n backgroundColor: \"#FFFFFF\",\n },\n \"input:-webkit-autofill\": {\n WebkitBoxShadow: \"0 0 0 1000px white inset\",\n },\n }}\n fullWidth={true}\n />\n <FormHelperText>{fieldState.error?.message}</FormHelperText>\n </FormControl>\n )}\n />\n );\n};\n\nexport default InputController;\n"],"names":["InputController","props","control","type","textareaOption","name","autoComplete","placeholder","defaultValue","emptyValue","inputProps","convertedEmptyValue","jsx","Controller","field","fieldState","jsxs","FormControl","TextField","e","value","InputAdornment","IconButton","Clear","FormHelperText","_a"],"mappings":"0OA0CaA,EAA0CC,GAAoB,CACzE,KAAM,CACJ,QAAAC,EACA,KAAAC,EACA,eAAAC,EACA,KAAAC,EACA,aAAAC,EACA,YAAAC,EACA,aAAAC,EACA,WAAAC,EACA,WAAAC,CAAA,EACET,EAEEU,EACJF,IAAe,QAAaD,IAAiB,OAAY,KAAOC,EAElE,OACEG,EAAAA,IAACC,EAAAA,WAAA,CACC,QAAAX,EACA,KAAAG,EACA,aAAAG,EACA,OAAQ,CAAC,CAAE,MAAAM,EAAO,WAAAC,YAChBC,OAAAA,EAAAA,KAACC,EAAAA,YAAA,CAAY,MAAOF,EAAW,QAC7B,SAAA,CAAAH,EAAAA,IAACM,EAAAA,UAAA,CACE,GAAGJ,EACJ,KAAMX,IAAS,WAAa,OAAYA,EACxC,UAAWA,IAAS,WACpB,aAAAG,EACA,YAAAC,EACA,MAAOO,EAAM,OAAS,GACtB,SAAWK,GAAM,CACf,MAAMC,EAAQD,EAAE,OAAO,MACvBL,EAAM,SAASM,GAAgBT,CAAmB,CACpD,EACA,WAAY,CACV,GAAGD,EACH,KAAMN,EAAiBA,EAAe,KAAO,OAC7C,QAASA,EAAiBA,EAAe,QAAU,OACnD,QAASA,EAAiBA,EAAe,QAAU,OACnD,aACEU,EAAM,OACN,EAACJ,GAAA,MAAAA,EAAY,WACb,EAACA,GAAA,MAAAA,EAAY,UACXE,EAAAA,IAACS,EAAAA,eAAA,CAAe,SAAS,MACvB,SAAAT,EAAAA,IAACU,EAAAA,WAAA,CACC,QAAS,IAAMR,EAAM,SAASH,CAAmB,EACjD,KAAK,MAEL,eAACY,EAAAA,MAAA,CAAA,CAAM,CAAA,CAAA,EAEX,EACE,MAAA,EAER,GAAI,CACF,+BAAgC,CAC9B,YAAa,SAAA,EAEf,uBAAwB,CACtB,gBAAiB,SAAA,EAEnB,yBAA0B,CACxB,gBAAiB,0BAAA,CACnB,EAEF,UAAW,EAAA,CAAA,EAEbX,EAAAA,IAACY,EAAAA,eAAA,CAAgB,UAAAC,EAAAV,EAAW,QAAX,YAAAU,EAAkB,OAAA,CAAQ,CAAA,CAAA,CAC7C,EAAA,CAAA,CAIR"}
|
|
@@ -1,51 +1,52 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import { Clear as
|
|
3
|
-
import { FormControl as
|
|
4
|
-
import { Controller as
|
|
5
|
-
const
|
|
1
|
+
import { jsx as r, jsxs as h } from "react/jsx-runtime";
|
|
2
|
+
import { Clear as w } from "@mui/icons-material";
|
|
3
|
+
import { FormControl as F, TextField as g, InputAdornment as b, IconButton as I, FormHelperText as y } from "@mui/material";
|
|
4
|
+
import { Controller as f } from "react-hook-form";
|
|
5
|
+
const j = (s) => {
|
|
6
6
|
const {
|
|
7
|
-
control:
|
|
8
|
-
type:
|
|
9
|
-
textareaOption:
|
|
7
|
+
control: C,
|
|
8
|
+
type: n,
|
|
9
|
+
textareaOption: o,
|
|
10
10
|
name: p,
|
|
11
11
|
autoComplete: c,
|
|
12
|
-
placeholder:
|
|
12
|
+
placeholder: v,
|
|
13
13
|
defaultValue: l,
|
|
14
|
-
emptyValue:
|
|
15
|
-
inputProps:
|
|
16
|
-
} =
|
|
14
|
+
emptyValue: a,
|
|
15
|
+
inputProps: e
|
|
16
|
+
} = s, i = a === void 0 && l !== void 0 ? null : a;
|
|
17
17
|
return /* @__PURE__ */ r(
|
|
18
|
-
|
|
18
|
+
f,
|
|
19
19
|
{
|
|
20
|
-
control:
|
|
20
|
+
control: C,
|
|
21
21
|
name: p,
|
|
22
22
|
defaultValue: l,
|
|
23
|
-
render: ({ field:
|
|
24
|
-
var
|
|
25
|
-
return /* @__PURE__ */
|
|
23
|
+
render: ({ field: t, fieldState: d }) => {
|
|
24
|
+
var u;
|
|
25
|
+
return /* @__PURE__ */ h(F, { error: d.invalid, children: [
|
|
26
26
|
/* @__PURE__ */ r(
|
|
27
|
-
|
|
27
|
+
g,
|
|
28
28
|
{
|
|
29
|
-
...
|
|
30
|
-
type:
|
|
31
|
-
multiline:
|
|
29
|
+
...t,
|
|
30
|
+
type: n === "textarea" ? void 0 : n,
|
|
31
|
+
multiline: n === "textarea",
|
|
32
32
|
autoComplete: c,
|
|
33
|
-
placeholder:
|
|
34
|
-
value:
|
|
35
|
-
onChange: (
|
|
36
|
-
|
|
33
|
+
placeholder: v,
|
|
34
|
+
value: t.value ?? "",
|
|
35
|
+
onChange: (x) => {
|
|
36
|
+
const m = x.target.value;
|
|
37
|
+
t.onChange(m || i);
|
|
37
38
|
},
|
|
38
39
|
InputProps: {
|
|
39
|
-
...
|
|
40
|
-
rows:
|
|
41
|
-
minRows:
|
|
42
|
-
maxRows:
|
|
43
|
-
endAdornment:
|
|
44
|
-
|
|
40
|
+
...e,
|
|
41
|
+
rows: o ? o.rows : void 0,
|
|
42
|
+
minRows: o ? o.minRows : void 0,
|
|
43
|
+
maxRows: o ? o.minRows : void 0,
|
|
44
|
+
endAdornment: t.value && !(e != null && e.readOnly) && !(e != null && e.disabled) ? /* @__PURE__ */ r(b, { position: "end", children: /* @__PURE__ */ r(
|
|
45
|
+
I,
|
|
45
46
|
{
|
|
46
|
-
onClick: () =>
|
|
47
|
+
onClick: () => t.onChange(i),
|
|
47
48
|
edge: "end",
|
|
48
|
-
children: /* @__PURE__ */ r(
|
|
49
|
+
children: /* @__PURE__ */ r(w, {})
|
|
49
50
|
}
|
|
50
51
|
) }) : void 0
|
|
51
52
|
},
|
|
@@ -63,14 +64,14 @@ const f = (C) => {
|
|
|
63
64
|
fullWidth: !0
|
|
64
65
|
}
|
|
65
66
|
),
|
|
66
|
-
/* @__PURE__ */ r(
|
|
67
|
+
/* @__PURE__ */ r(y, { children: (u = d.error) == null ? void 0 : u.message })
|
|
67
68
|
] });
|
|
68
69
|
}
|
|
69
70
|
}
|
|
70
71
|
);
|
|
71
72
|
};
|
|
72
73
|
export {
|
|
73
|
-
|
|
74
|
-
|
|
74
|
+
j as InputController,
|
|
75
|
+
j as default
|
|
75
76
|
};
|
|
76
77
|
//# sourceMappingURL=index.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/InputController/index.tsx"],"sourcesContent":["import { Clear } from \"@mui/icons-material\";\nimport {\n FilledInputProps,\n FormControl,\n FormHelperText,\n IconButton,\n InputAdornment,\n InputProps,\n OutlinedInputProps,\n TextField,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n PathValue,\n type Control,\n type FieldValues,\n} from \"react-hook-form\";\n\ntype Type = \"search\" | \"text\" | \"number\" | \"email\" | \"tel\" | \"textarea\";\n\ntype MultilineOption = {\n rows?: number;\n minRows?: number;\n maxRows?: number;\n};\n\ntype Props<T extends FieldValues> = {\n control: Control<T>;\n type: Type;\n textareaOption?: MultilineOption;\n name: FieldPath<T>;\n defaultValue?: PathValue<T, FieldPath<T>>;\n emptyValue?: \"\" | null | undefined;\n autoComplete?: string;\n placeholder?: string;\n inputProps?:\n | Partial<FilledInputProps>\n | Partial<OutlinedInputProps>\n | Partial<InputProps>;\n};\n\nexport const InputController = <T extends FieldValues>(props: Props<T>) => {\n const {\n control,\n type,\n textareaOption,\n name,\n autoComplete,\n placeholder,\n defaultValue,\n emptyValue,\n inputProps,\n } = props;\n\n const convertedEmptyValue =\n emptyValue === undefined && defaultValue !== undefined ? null : emptyValue;\n\n return (\n <Controller\n control={control}\n name={name}\n defaultValue={defaultValue}\n render={({ field, fieldState }) => (\n <FormControl error={fieldState.invalid}>\n <TextField\n {...field}\n type={type === \"textarea\" ? undefined : type}\n multiline={type === \"textarea\"}\n autoComplete={autoComplete}\n placeholder={placeholder}\n value={field.value ?? \"\"}\n onChange={(e) => {\n
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/InputController/index.tsx"],"sourcesContent":["import { Clear } from \"@mui/icons-material\";\nimport {\n FilledInputProps,\n FormControl,\n FormHelperText,\n IconButton,\n InputAdornment,\n InputProps,\n OutlinedInputProps,\n TextField,\n} from \"@mui/material\";\nimport {\n Controller,\n FieldPath,\n PathValue,\n type Control,\n type FieldValues,\n} from \"react-hook-form\";\n\ntype Type = \"search\" | \"text\" | \"number\" | \"email\" | \"tel\" | \"textarea\";\n\ntype MultilineOption = {\n rows?: number;\n minRows?: number;\n maxRows?: number;\n};\n\ntype Props<T extends FieldValues> = {\n control: Control<T>;\n type: Type;\n textareaOption?: MultilineOption;\n name: FieldPath<T>;\n defaultValue?: PathValue<T, FieldPath<T>>;\n emptyValue?: \"\" | null | undefined;\n autoComplete?: string;\n placeholder?: string;\n inputProps?:\n | Partial<FilledInputProps>\n | Partial<OutlinedInputProps>\n | Partial<InputProps>;\n};\n\nexport const InputController = <T extends FieldValues>(props: Props<T>) => {\n const {\n control,\n type,\n textareaOption,\n name,\n autoComplete,\n placeholder,\n defaultValue,\n emptyValue,\n inputProps,\n } = props;\n\n const convertedEmptyValue =\n emptyValue === undefined && defaultValue !== undefined ? null : emptyValue;\n\n return (\n <Controller\n control={control}\n name={name}\n defaultValue={defaultValue}\n render={({ field, fieldState }) => (\n <FormControl error={fieldState.invalid}>\n <TextField\n {...field}\n type={type === \"textarea\" ? undefined : type}\n multiline={type === \"textarea\"}\n autoComplete={autoComplete}\n placeholder={placeholder}\n value={field.value ?? \"\"}\n onChange={(e) => {\n const value = e.target.value;\n field.onChange(value ? value : convertedEmptyValue);\n }}\n InputProps={{\n ...inputProps,\n rows: textareaOption ? textareaOption.rows : undefined,\n minRows: textareaOption ? textareaOption.minRows : undefined,\n maxRows: textareaOption ? textareaOption.minRows : undefined,\n endAdornment:\n field.value &&\n !inputProps?.readOnly &&\n !inputProps?.disabled ? (\n <InputAdornment position=\"end\">\n <IconButton\n onClick={() => field.onChange(convertedEmptyValue)}\n edge=\"end\"\n >\n <Clear />\n </IconButton>\n </InputAdornment>\n ) : undefined,\n }}\n sx={{\n \"& .MuiInput-underline:before\": {\n borderColor: \"#CCCCCC\",\n },\n \"& .MuiInputBase-root\": {\n backgroundColor: \"#FFFFFF\",\n },\n \"input:-webkit-autofill\": {\n WebkitBoxShadow: \"0 0 0 1000px white inset\",\n },\n }}\n fullWidth={true}\n />\n <FormHelperText>{fieldState.error?.message}</FormHelperText>\n </FormControl>\n )}\n />\n );\n};\n\nexport default InputController;\n"],"names":["InputController","props","control","type","textareaOption","name","autoComplete","placeholder","defaultValue","emptyValue","inputProps","convertedEmptyValue","jsx","Controller","field","fieldState","jsxs","FormControl","TextField","e","value","InputAdornment","IconButton","Clear","FormHelperText","_a"],"mappings":";;;;AA0CO,MAAMA,IAAkB,CAAwBC,MAAoB;AACzE,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACET,GAEEU,IACJF,MAAe,UAAaD,MAAiB,SAAY,OAAOC;AAElE,SACE,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAX;AAAA,MACA,MAAAG;AAAA,MACA,cAAAG;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAM,GAAO,YAAAC;;AAChB,+BAAAC,EAACC,GAAA,EAAY,OAAOF,EAAW,SAC7B,UAAA;AAAA,UAAA,gBAAAH;AAAA,YAACM;AAAA,YAAA;AAAA,cACE,GAAGJ;AAAA,cACJ,MAAMX,MAAS,aAAa,SAAYA;AAAA,cACxC,WAAWA,MAAS;AAAA,cACpB,cAAAG;AAAA,cACA,aAAAC;AAAA,cACA,OAAOO,EAAM,SAAS;AAAA,cACtB,UAAU,CAACK,MAAM;AACf,sBAAMC,IAAQD,EAAE,OAAO;AACvB,gBAAAL,EAAM,SAASM,KAAgBT,CAAmB;AAAA,cACpD;AAAA,cACA,YAAY;AAAA,gBACV,GAAGD;AAAA,gBACH,MAAMN,IAAiBA,EAAe,OAAO;AAAA,gBAC7C,SAASA,IAAiBA,EAAe,UAAU;AAAA,gBACnD,SAASA,IAAiBA,EAAe,UAAU;AAAA,gBACnD,cACEU,EAAM,SACN,EAACJ,KAAA,QAAAA,EAAY,aACb,EAACA,KAAA,QAAAA,EAAY,YACX,gBAAAE,EAACS,GAAA,EAAe,UAAS,OACvB,UAAA,gBAAAT;AAAA,kBAACU;AAAA,kBAAA;AAAA,oBACC,SAAS,MAAMR,EAAM,SAASH,CAAmB;AAAA,oBACjD,MAAK;AAAA,oBAEL,4BAACY,GAAA,CAAA,CAAM;AAAA,kBAAA;AAAA,gBAAA,GAEX,IACE;AAAA,cAAA;AAAA,cAER,IAAI;AAAA,gBACF,gCAAgC;AAAA,kBAC9B,aAAa;AAAA,gBAAA;AAAA,gBAEf,wBAAwB;AAAA,kBACtB,iBAAiB;AAAA,gBAAA;AAAA,gBAEnB,0BAA0B;AAAA,kBACxB,iBAAiB;AAAA,gBAAA;AAAA,cACnB;AAAA,cAEF,WAAW;AAAA,YAAA;AAAA,UAAA;AAAA,UAEb,gBAAAX,EAACY,GAAA,EAAgB,WAAAC,IAAAV,EAAW,UAAX,gBAAAU,EAAkB,QAAA,CAAQ;AAAA,QAAA,EAAA,CAC7C;AAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),h=require("react"),F=require("@mui/icons-material"),d=require("@mui/material"),x=require("react-hook-form"),N=require("react-number-format"),T=h.forwardRef(function(u,c){const{valueType:l,defaultValue:g,onChange:a,allowLeadingZeros:i,formEmptyValue:s,...m}=u,e=s??null;return o.jsx(N.NumericFormat,{...m,getInputRef:c,allowLeadingZeros:l==="STRING"||i,onValueChange:(r,t)=>{if(!a||!t.event)return;let n;switch(l){case"STRING":n=r.value;break;case"FORMATTED_STRING":n=r.formattedValue;break;default:n=r.floatValue??e}const C={...t.event,target:{...t.event.target,name:u.name,value:n}};a(C)}})}),v=p=>{const{inputProps:u,config:c,defaultValue:l,emptyValue:g,...a}=p,{textFieldProps:i}=u??{},s=g??null,m=e=>e==null||e==="";return o.jsx(x.Controller,{control:a.control,defaultValue:l,name:a.name,render:({field:e,fieldState:r})=>{var t;return o.jsx(d.TextField,{...i,name:e.name,value:m(e.value)?"":e.value,onChange:n=>{e.onChange(n)},error:!!r.error,helperText:(t=r.error)==null?void 0:t.message,onBlur:e.onBlur,InputProps:{inputComponent:T,endAdornment:m(e.value)?void 0:o.jsx(d.InputAdornment,{position:"end",children:o.jsx(d.IconButton,{onClick:()=>{e.onChange(s)},edge:"end",children:o.jsx(F.Clear,{})})}),inputProps:{...c,formEmptyValue:s}}})}})};exports.NumericFieldController=v;exports.default=v;
|
|
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\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 emptyValue?: 0 | \"\" | null | undefined;\n};\n\n/**\n * 数値入力の表示フォーマット\n */\nconst NumberFormatCustom = forwardRef<\n HTMLInputElement,\n InputBaseComponentProps & MuiNumericFieldConfig\n>(function NumberFormatBase(props, ref) {\n // 不要なプロパティを除くためdestructureする\n
|
|
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 に渡す値（undefined だとクリアが効かないことがあるため null 等に揃える） */\n formEmptyValue?: number | string | null;\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 emptyValue?: 0 | \"\" | null | undefined;\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 ?? null;\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 ...others\n } = props;\n const { textFieldProps } = muiProps ?? {};\n const formEmptyValue = emptyValue ?? null;\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":["NumberFormatCustom","forwardRef","props","ref","valueType","defaultValue","onChange","allowLeadingZeros","formEmptyValue","others","resolvedFormEmpty","jsx","NumericFormat","values","sourceInfo","value","event","NumericFieldController","muiProps","config","emptyValue","textFieldProps","isEmptyValue","Controller","field","fieldState","TextField","e","_a","InputAdornment","IconButton","Clear"],"mappings":"8RAsEMA,EAAqBC,EAAAA,WAGzB,SAA0BC,EAAOC,EAAK,CAGtC,KAAM,CACJ,UAAAC,EACA,aAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,eAAAC,EACA,GAAGC,CAAA,EACDP,EAGEQ,EAAoBF,GAAkB,KAE5C,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,WAAAe,EACA,GAAGX,CAAA,EACDP,EACE,CAAE,eAAAmB,GAAmBH,GAAY,CAAA,EACjCV,EAAiBY,GAAc,KAE/BE,EAAgBP,GACbA,GAAU,MAA+BA,IAAU,GAE5D,OACEJ,EAAAA,IAACY,EAAAA,WAAA,CACC,QAASd,EAAO,QAChB,aAAAJ,EACA,KAAMI,EAAO,KACb,OAAQ,CAAC,CAAE,MAAAe,EAAO,WAAAC,KAAW,OAC3Bd,OAAAA,EAAAA,IAACe,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,eAAgBxB,EAChB,aAAesB,EAAaE,EAAM,KAAK,EAWnC,OAVFb,MAACkB,EAAAA,eAAA,CAAe,SAAS,MACvB,SAAAlB,EAAAA,IAACmB,EAAAA,WAAA,CACC,QAAS,IAAM,CACbN,EAAM,SAAShB,CAAc,CAC/B,EACA,KAAK,MAEL,eAACuB,EAAAA,MAAA,CAAA,CAAM,CAAA,CAAA,EAEX,EAEF,WAAY,CACV,GAAGZ,EACH,eAAAX,CAAA,CACF,CACF,CAAA,EACF,CAAA,CAIR"}
|
|
@@ -1,84 +1,92 @@
|
|
|
1
1
|
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { Clear as
|
|
4
|
-
import { TextField as
|
|
5
|
-
import { Controller as
|
|
2
|
+
import { forwardRef as f } from "react";
|
|
3
|
+
import { Clear as h } from "@mui/icons-material";
|
|
4
|
+
import { TextField as C, InputAdornment as v, IconButton as V } from "@mui/material";
|
|
5
|
+
import { Controller as F } from "react-hook-form";
|
|
6
6
|
import { NumericFormat as T } from "react-number-format";
|
|
7
|
-
const
|
|
8
|
-
const {
|
|
7
|
+
const N = f(function(m, s) {
|
|
8
|
+
const {
|
|
9
|
+
valueType: l,
|
|
10
|
+
defaultValue: d,
|
|
11
|
+
onChange: a,
|
|
12
|
+
allowLeadingZeros: i,
|
|
13
|
+
formEmptyValue: u,
|
|
14
|
+
...p
|
|
15
|
+
} = m, e = u ?? null;
|
|
9
16
|
return /* @__PURE__ */ n(
|
|
10
17
|
T,
|
|
11
18
|
{
|
|
12
|
-
...
|
|
13
|
-
getInputRef:
|
|
14
|
-
allowLeadingZeros:
|
|
15
|
-
onValueChange: (
|
|
16
|
-
if (!
|
|
17
|
-
let
|
|
18
|
-
switch (
|
|
19
|
+
...p,
|
|
20
|
+
getInputRef: s,
|
|
21
|
+
allowLeadingZeros: l === "STRING" || i,
|
|
22
|
+
onValueChange: (o, r) => {
|
|
23
|
+
if (!a || !r.event) return;
|
|
24
|
+
let t;
|
|
25
|
+
switch (l) {
|
|
19
26
|
case "STRING":
|
|
20
|
-
|
|
27
|
+
t = o.value;
|
|
21
28
|
break;
|
|
22
29
|
case "FORMATTED_STRING":
|
|
23
|
-
|
|
30
|
+
t = o.formattedValue;
|
|
24
31
|
break;
|
|
25
32
|
default:
|
|
26
|
-
|
|
33
|
+
t = o.floatValue ?? e;
|
|
27
34
|
}
|
|
28
|
-
const
|
|
29
|
-
...
|
|
35
|
+
const g = {
|
|
36
|
+
...r.event,
|
|
30
37
|
target: {
|
|
31
|
-
...
|
|
32
|
-
name:
|
|
33
|
-
value:
|
|
38
|
+
...r.event.target,
|
|
39
|
+
name: m.name,
|
|
40
|
+
value: t
|
|
34
41
|
}
|
|
35
42
|
};
|
|
36
|
-
|
|
43
|
+
a(g);
|
|
37
44
|
}
|
|
38
45
|
}
|
|
39
46
|
);
|
|
40
|
-
}), b = (
|
|
47
|
+
}), b = (c) => {
|
|
41
48
|
const {
|
|
42
|
-
inputProps:
|
|
43
|
-
config:
|
|
44
|
-
defaultValue:
|
|
45
|
-
emptyValue:
|
|
46
|
-
...
|
|
47
|
-
} =
|
|
49
|
+
inputProps: m,
|
|
50
|
+
config: s,
|
|
51
|
+
defaultValue: l,
|
|
52
|
+
emptyValue: d,
|
|
53
|
+
...a
|
|
54
|
+
} = c, { textFieldProps: i } = m ?? {}, u = d ?? null, p = (e) => e == null || e === "";
|
|
48
55
|
return /* @__PURE__ */ n(
|
|
49
|
-
|
|
56
|
+
F,
|
|
50
57
|
{
|
|
51
|
-
control:
|
|
52
|
-
defaultValue:
|
|
53
|
-
name:
|
|
58
|
+
control: a.control,
|
|
59
|
+
defaultValue: l,
|
|
60
|
+
name: a.name,
|
|
54
61
|
render: ({ field: e, fieldState: o }) => {
|
|
55
62
|
var r;
|
|
56
63
|
return /* @__PURE__ */ n(
|
|
57
|
-
|
|
64
|
+
C,
|
|
58
65
|
{
|
|
59
66
|
...i,
|
|
60
67
|
name: e.name,
|
|
61
|
-
value:
|
|
62
|
-
onChange: (
|
|
63
|
-
e.onChange(
|
|
68
|
+
value: p(e.value) ? "" : e.value,
|
|
69
|
+
onChange: (t) => {
|
|
70
|
+
e.onChange(t);
|
|
64
71
|
},
|
|
65
72
|
error: !!o.error,
|
|
66
73
|
helperText: (r = o.error) == null ? void 0 : r.message,
|
|
67
74
|
onBlur: e.onBlur,
|
|
68
75
|
InputProps: {
|
|
69
|
-
inputComponent:
|
|
70
|
-
endAdornment:
|
|
71
|
-
|
|
76
|
+
inputComponent: N,
|
|
77
|
+
endAdornment: p(e.value) ? void 0 : /* @__PURE__ */ n(v, { position: "end", children: /* @__PURE__ */ n(
|
|
78
|
+
V,
|
|
72
79
|
{
|
|
73
80
|
onClick: () => {
|
|
74
|
-
e.onChange(
|
|
81
|
+
e.onChange(u);
|
|
75
82
|
},
|
|
76
83
|
edge: "end",
|
|
77
|
-
children: /* @__PURE__ */ n(
|
|
84
|
+
children: /* @__PURE__ */ n(h, {})
|
|
78
85
|
}
|
|
79
86
|
) }),
|
|
80
87
|
inputProps: {
|
|
81
|
-
...
|
|
88
|
+
...s,
|
|
89
|
+
formEmptyValue: u
|
|
82
90
|
}
|
|
83
91
|
}
|
|
84
92
|
}
|
|
@@ -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\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 emptyValue?: 0 | \"\" | null | undefined;\n};\n\n/**\n * 数値入力の表示フォーマット\n */\nconst NumberFormatCustom = forwardRef<\n HTMLInputElement,\n InputBaseComponentProps & MuiNumericFieldConfig\n>(function NumberFormatBase(props, ref) {\n // 不要なプロパティを除くためdestructureする\n
|
|
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 に渡す値（undefined だとクリアが効かないことがあるため null 等に揃える） */\n formEmptyValue?: number | string | null;\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 emptyValue?: 0 | \"\" | null | undefined;\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 ?? null;\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 ...others\n } = props;\n const { textFieldProps } = muiProps ?? {};\n const formEmptyValue = emptyValue ?? null;\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":["NumberFormatCustom","forwardRef","props","ref","valueType","defaultValue","onChange","allowLeadingZeros","formEmptyValue","others","resolvedFormEmpty","jsx","NumericFormat","values","sourceInfo","value","event","NumericFieldController","muiProps","config","emptyValue","textFieldProps","isEmptyValue","Controller","field","fieldState","TextField","e","_a","InputAdornment","IconButton","Clear"],"mappings":";;;;;;AAsEA,MAAMA,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,KAAkB;AAE5C,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,YAAAe;AAAA,IACA,GAAGX;AAAA,EAAA,IACDP,GACE,EAAE,gBAAAmB,MAAmBH,KAAY,CAAA,GACjCV,IAAiBY,KAAc,MAE/BE,IAAe,CAACP,MACbA,KAAU,QAA+BA,MAAU;AAE5D,SACE,gBAAAJ;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,SAASd,EAAO;AAAA,MAChB,cAAAJ;AAAA,MACA,MAAMI,EAAO;AAAA,MACb,QAAQ,CAAC,EAAE,OAAAe,GAAO,YAAAC,QAAW;;AAC3B,+BAAAd;AAAA,UAACe;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,gBAAgBxB;AAAA,cAChB,cAAesB,EAAaE,EAAM,KAAK,IAWnC,SAVF,gBAAAb,EAACkB,GAAA,EAAe,UAAS,OACvB,UAAA,gBAAAlB;AAAA,gBAACmB;AAAA,gBAAA;AAAA,kBACC,SAAS,MAAM;AACb,oBAAAN,EAAM,SAAShB,CAAc;AAAA,kBAC/B;AAAA,kBACA,MAAK;AAAA,kBAEL,4BAACuB,GAAA,CAAA,CAAM;AAAA,gBAAA;AAAA,cAAA,GAEX;AAAA,cAEF,YAAY;AAAA,gBACV,GAAGZ;AAAA,gBACH,gBAAAX;AAAA,cAAA;AAAA,YACF;AAAA,UACF;AAAA,QAAA;AAAA;AAAA,IACF;AAAA,EAAA;AAIR;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("@mui/material"),i=o=>{const{dialogTitle:a,dialogContent:
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("@mui/material"),i=o=>{const{dialogTitle:a,dialogContent:r,dialogActions:t,open:s,onCloseDialog:n,...c}=o;return e.jsxs(l.Dialog,{...c,open:s,onClose:()=>n("cancel"),scroll:"paper","aria-labelledby":"scroll-dialog-title","aria-describedby":"scroll-dialog-description",children:[e.jsx(l.DialogTitle,{sx:{display:"flex",gap:"5px",alignItems:"center"},children:a}),e.jsx(l.DialogContent,{dividers:!0,children:e.jsx(l.Box,{component:"div",tabIndex:-1,children:r})}),e.jsx(l.DialogActions,{sx:{gap:"10px"},children:t})]})};exports.ScrollableDialog=i;exports.default=i;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/ScrollableDialog/index.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n Dialog,\n DialogActions,\n DialogContent,\n
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../src/components/ScrollableDialog/index.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n Box,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n DialogProps as MuiDialogProps,\n} from \"@mui/material\";\n\nexport type ConfirmDialogResult = \"confirm\" | \"cancel\";\n\ntype Props = {\n /** ダイアログのタイトル */\n dialogTitle: ReactNode;\n /** ダイアログの内容 */\n dialogContent: ReactNode;\n /** ダイアログの処理ボタン（複数可） */\n dialogActions: ReactNode;\n /** ダイアログの表示状態 */\n open: boolean;\n /** 閉じた時のhandler */\n onCloseDialog: (result: ConfirmDialogResult) => void;\n} & MuiDialogProps;\n\n/** MuiDialogを継承したコンテントのスクロール可能なDialogです。 */\nexport const ScrollableDialog = (props: Props) => {\n const {\n dialogTitle,\n dialogContent,\n dialogActions,\n open,\n onCloseDialog,\n ...dialogProps\n } = props;\n\n return (\n <Dialog\n {...dialogProps}\n open={open}\n onClose={() => onCloseDialog(\"cancel\")}\n scroll={\"paper\"}\n aria-labelledby=\"scroll-dialog-title\"\n aria-describedby=\"scroll-dialog-description\"\n >\n <DialogTitle\n sx={{\n display: \"flex\",\n gap: \"5px\",\n alignItems: \"center\",\n }}\n >\n {dialogTitle}\n </DialogTitle>\n <DialogContent dividers={true}>\n <Box component=\"div\" tabIndex={-1}>\n {dialogContent}\n </Box>\n </DialogContent>\n <DialogActions sx={{ gap: \"10px\" }}>{dialogActions}</DialogActions>\n </Dialog>\n );\n};\n\nexport default ScrollableDialog;\n"],"names":["ScrollableDialog","props","dialogTitle","dialogContent","dialogActions","open","onCloseDialog","dialogProps","jsxs","Dialog","jsx","DialogTitle","DialogContent","Box","DialogActions"],"mappings":"4KA0BaA,EAAoBC,GAAiB,CAChD,KAAM,CACJ,YAAAC,EACA,cAAAC,EACA,cAAAC,EACA,KAAAC,EACA,cAAAC,EACA,GAAGC,CAAA,EACDN,EAEJ,OACEO,EAAAA,KAACC,EAAAA,OAAA,CACE,GAAGF,EACJ,KAAAF,EACA,QAAS,IAAMC,EAAc,QAAQ,EACrC,OAAQ,QACR,kBAAgB,sBAChB,mBAAiB,4BAEjB,SAAA,CAAAI,EAAAA,IAACC,EAAAA,YAAA,CACC,GAAI,CACF,QAAS,OACT,IAAK,MACL,WAAY,QAAA,EAGb,SAAAT,CAAA,CAAA,EAEHQ,EAAAA,IAACE,EAAAA,cAAA,CAAc,SAAU,GACvB,SAAAF,EAAAA,IAACG,EAAAA,IAAA,CAAI,UAAU,MAAM,SAAU,GAC5B,SAAAV,CAAA,CACH,EACF,QACCW,EAAAA,cAAA,CAAc,GAAI,CAAE,IAAK,MAAA,EAAW,SAAAV,CAAA,CAAc,CAAA,CAAA,CAAA,CAGzD"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Dialog as
|
|
3
|
-
const
|
|
1
|
+
import { jsxs as d, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { Dialog as s, DialogTitle as c, DialogContent as g, Box as p, DialogActions as x } from "@mui/material";
|
|
3
|
+
const D = (o) => {
|
|
4
4
|
const {
|
|
5
5
|
dialogTitle: i,
|
|
6
6
|
dialogContent: e,
|
|
7
7
|
dialogActions: a,
|
|
8
8
|
open: r,
|
|
9
|
-
onCloseDialog:
|
|
10
|
-
...
|
|
9
|
+
onCloseDialog: n,
|
|
10
|
+
...t
|
|
11
11
|
} = o;
|
|
12
|
-
return /* @__PURE__ */
|
|
13
|
-
|
|
12
|
+
return /* @__PURE__ */ d(
|
|
13
|
+
s,
|
|
14
14
|
{
|
|
15
|
-
...
|
|
15
|
+
...t,
|
|
16
16
|
open: r,
|
|
17
|
-
onClose: () =>
|
|
17
|
+
onClose: () => n("cancel"),
|
|
18
18
|
scroll: "paper",
|
|
19
19
|
"aria-labelledby": "scroll-dialog-title",
|
|
20
20
|
"aria-describedby": "scroll-dialog-description",
|
|
@@ -30,14 +30,14 @@ const h = (o) => {
|
|
|
30
30
|
children: i
|
|
31
31
|
}
|
|
32
32
|
),
|
|
33
|
-
/* @__PURE__ */ l(g, { dividers: !0, children: /* @__PURE__ */ l(p, { tabIndex: -1, children: e }) }),
|
|
33
|
+
/* @__PURE__ */ l(g, { dividers: !0, children: /* @__PURE__ */ l(p, { component: "div", tabIndex: -1, children: e }) }),
|
|
34
34
|
/* @__PURE__ */ l(x, { sx: { gap: "10px" }, children: a })
|
|
35
35
|
]
|
|
36
36
|
}
|
|
37
37
|
);
|
|
38
38
|
};
|
|
39
39
|
export {
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
D as ScrollableDialog,
|
|
41
|
+
D as default
|
|
42
42
|
};
|
|
43
43
|
//# sourceMappingURL=index.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../src/components/ScrollableDialog/index.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n Dialog,\n DialogActions,\n DialogContent,\n
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../src/components/ScrollableDialog/index.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n Box,\n Dialog,\n DialogActions,\n DialogContent,\n DialogTitle,\n DialogProps as MuiDialogProps,\n} from \"@mui/material\";\n\nexport type ConfirmDialogResult = \"confirm\" | \"cancel\";\n\ntype Props = {\n /** ダイアログのタイトル */\n dialogTitle: ReactNode;\n /** ダイアログの内容 */\n dialogContent: ReactNode;\n /** ダイアログの処理ボタン（複数可） */\n dialogActions: ReactNode;\n /** ダイアログの表示状態 */\n open: boolean;\n /** 閉じた時のhandler */\n onCloseDialog: (result: ConfirmDialogResult) => void;\n} & MuiDialogProps;\n\n/** MuiDialogを継承したコンテントのスクロール可能なDialogです。 */\nexport const ScrollableDialog = (props: Props) => {\n const {\n dialogTitle,\n dialogContent,\n dialogActions,\n open,\n onCloseDialog,\n ...dialogProps\n } = props;\n\n return (\n <Dialog\n {...dialogProps}\n open={open}\n onClose={() => onCloseDialog(\"cancel\")}\n scroll={\"paper\"}\n aria-labelledby=\"scroll-dialog-title\"\n aria-describedby=\"scroll-dialog-description\"\n >\n <DialogTitle\n sx={{\n display: \"flex\",\n gap: \"5px\",\n alignItems: \"center\",\n }}\n >\n {dialogTitle}\n </DialogTitle>\n <DialogContent dividers={true}>\n <Box component=\"div\" tabIndex={-1}>\n {dialogContent}\n </Box>\n </DialogContent>\n <DialogActions sx={{ gap: \"10px\" }}>{dialogActions}</DialogActions>\n </Dialog>\n );\n};\n\nexport default ScrollableDialog;\n"],"names":["ScrollableDialog","props","dialogTitle","dialogContent","dialogActions","open","onCloseDialog","dialogProps","jsxs","Dialog","jsx","DialogTitle","DialogContent","Box","DialogActions"],"mappings":";;AA0BO,MAAMA,IAAmB,CAACC,MAAiB;AAChD,QAAM;AAAA,IACJ,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,MAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDN;AAEJ,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,MAAAF;AAAA,MACA,SAAS,MAAMC,EAAc,QAAQ;AAAA,MACrC,QAAQ;AAAA,MACR,mBAAgB;AAAA,MAChB,oBAAiB;AAAA,MAEjB,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,SAAS;AAAA,cACT,KAAK;AAAA,cACL,YAAY;AAAA,YAAA;AAAA,YAGb,UAAAT;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAQ,EAACE,GAAA,EAAc,UAAU,IACvB,UAAA,gBAAAF,EAACG,GAAA,EAAI,WAAU,OAAM,UAAU,IAC5B,UAAAV,EAAA,CACH,GACF;AAAA,0BACCW,GAAA,EAAc,IAAI,EAAE,KAAK,OAAA,GAAW,UAAAV,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzD;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";const n=require("react/jsx-runtime"),e=require("../../react.esm-DGuy6Rn3.cjs"),x=require("./index.cjs.js");describe("SubMenu component",()=>{test("renders SubMenu component with given menu items and button element",()=>{const c=jest.fn(),o=jest.fn(),
|
|
1
|
+
"use strict";const n=require("react/jsx-runtime"),e=require("../../react.esm-DGuy6Rn3.cjs"),x=require("./index.cjs.js");describe("SubMenu component",()=>{test("renders SubMenu component with given menu items and button element",()=>{const c=jest.fn(),o=jest.fn(),s=jest.fn(),u=[{icon:n.jsx("span",{children:"Icon 1"}),title:"Menu 1",onClick:c,closeWhenClick:!0},{icon:n.jsx("span",{children:"Icon 2"}),title:"Menu 2",onClick:o},{icon:n.jsx("span",{children:"Icon 3"}),title:"Menu 3",onClick:s,closeWhenClick:!1}],i=n.jsx("span",{children:"Menu Button"});e.render(n.jsx(x.SubMenu,{menuItems:u,buttonElement:i}));const t=e.screen.getByText("Menu Button");e.fireEvent.click(t);const l=e.screen.getByText("Menu 1");e.fireEvent.click(l),expect(c).toHaveBeenCalled(),setTimeout(()=>{expect(e.screen.queryByText("Menu 1")).toBeNull()},0),e.fireEvent.click(t);const r=e.screen.getByText("Menu 2");e.fireEvent.click(r),expect(o).toHaveBeenCalled(),setTimeout(()=>{expect(e.screen.queryByText("Menu 2")).toBeNull()},0),e.fireEvent.click(t);const m=e.screen.getByText("Menu 3");e.fireEvent.click(m),expect(s).toHaveBeenCalled(),setTimeout(()=>{expect(e.screen.queryByText("Menu 3")).not.toBeNull()},0)})});
|
|
2
2
|
//# sourceMappingURL=index.test.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/SubMenu/index.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from \"@testing-library/react\";\n\nimport { SubMenu } from \".\";\n\ndescribe(\"SubMenu component\", () => {\n test(\"renders SubMenu component with given menu items and button element\", () => {\n const mockOnClickMenu1 = jest.fn();\n const mockOnClickMenu2 = jest.fn();\n const mockOnClickMenu3 = jest.fn();\n\n const menuItems = [\n {\n icon: <span>Icon 1</span>,\n title: \"Menu 1\",\n onClick: mockOnClickMenu1,\n closeWhenClick: true,\n },\n {\n icon: <span>Icon 2</span>,\n title: \"Menu 2\",\n onClick: mockOnClickMenu2,\n },\n {\n icon: <span>Icon 3</span>,\n title: \"Menu 3\",\n onClick: mockOnClickMenu3,\n closeWhenClick: false,\n },\n ];\n\n const buttonElement = <
|
|
1
|
+
{"version":3,"file":"index.test.cjs.js","sources":["../../../src/components/SubMenu/index.test.tsx"],"sourcesContent":["import { fireEvent, render, screen } from \"@testing-library/react\";\n\nimport { SubMenu } from \".\";\n\ndescribe(\"SubMenu component\", () => {\n test(\"renders SubMenu component with given menu items and button element\", () => {\n const mockOnClickMenu1 = jest.fn();\n const mockOnClickMenu2 = jest.fn();\n const mockOnClickMenu3 = jest.fn();\n\n const menuItems = [\n {\n icon: <span>Icon 1</span>,\n title: \"Menu 1\",\n onClick: mockOnClickMenu1,\n closeWhenClick: true,\n },\n {\n icon: <span>Icon 2</span>,\n title: \"Menu 2\",\n onClick: mockOnClickMenu2,\n },\n {\n icon: <span>Icon 3</span>,\n title: \"Menu 3\",\n onClick: mockOnClickMenu3,\n closeWhenClick: false,\n },\n ];\n\n const buttonElement = <span>Menu Button</span>;\n\n render(<SubMenu menuItems={menuItems} buttonElement={buttonElement} />);\n\n // Menu 1のテスト menuクリック時消えていること\n const button = screen.getByText(\"Menu Button\");\n fireEvent.click(button);\n const menuItem1 = screen.getByText(\"Menu 1\");\n fireEvent.click(menuItem1);\n expect(mockOnClickMenu1).toHaveBeenCalled();\n setTimeout(() => {\n expect(screen.queryByText(\"Menu 1\")).toBeNull();\n }, 0);\n\n // Menu 2のテスト menuクリック時消えていること\n fireEvent.click(button);\n const menuItem2 = screen.getByText(\"Menu 2\");\n fireEvent.click(menuItem2);\n expect(mockOnClickMenu2).toHaveBeenCalled();\n setTimeout(() => {\n expect(screen.queryByText(\"Menu 2\")).toBeNull();\n }, 0);\n\n // Menu 3のテスト menuクリック時消えていないこと\n fireEvent.click(button);\n const menuItem3 = screen.getByText(\"Menu 3\");\n fireEvent.click(menuItem3);\n expect(mockOnClickMenu3).toHaveBeenCalled();\n setTimeout(() => {\n expect(screen.queryByText(\"Menu 3\")).not.toBeNull();\n }, 0);\n });\n});\n"],"names":["mockOnClickMenu1","mockOnClickMenu2","mockOnClickMenu3","menuItems","jsx","buttonElement","render","SubMenu","button","screen","fireEvent","menuItem1","menuItem2","menuItem3"],"mappings":"wHAIA,SAAS,oBAAqB,IAAM,CAClC,KAAK,qEAAsE,IAAM,CAC/E,MAAMA,EAAmB,KAAK,GAAA,EACxBC,EAAmB,KAAK,GAAA,EACxBC,EAAmB,KAAK,GAAA,EAExBC,EAAY,CAChB,CACE,KAAMC,EAAAA,IAAC,OAAA,CAAK,SAAA,QAAA,CAAM,EAClB,MAAO,SACP,QAASJ,EACT,eAAgB,EAAA,EAElB,CACE,KAAMI,EAAAA,IAAC,OAAA,CAAK,SAAA,QAAA,CAAM,EAClB,MAAO,SACP,QAASH,CAAA,EAEX,CACE,KAAMG,EAAAA,IAAC,OAAA,CAAK,SAAA,QAAA,CAAM,EAClB,MAAO,SACP,QAASF,EACT,eAAgB,EAAA,CAClB,EAGIG,EAAgBD,EAAAA,IAAC,OAAA,CAAK,SAAA,aAAA,CAAW,EAEvCE,EAAAA,OAAOF,EAAAA,IAACG,EAAAA,QAAA,CAAQ,UAAAJ,EAAsB,cAAAE,CAAA,CAA8B,CAAE,EAGtE,MAAMG,EAASC,EAAAA,OAAO,UAAU,aAAa,EAC7CC,EAAAA,UAAU,MAAMF,CAAM,EACtB,MAAMG,EAAYF,EAAAA,OAAO,UAAU,QAAQ,EAC3CC,EAAAA,UAAU,MAAMC,CAAS,EACzB,OAAOX,CAAgB,EAAE,iBAAA,EACzB,WAAW,IAAM,CACf,OAAOS,EAAAA,OAAO,YAAY,QAAQ,CAAC,EAAE,SAAA,CACvC,EAAG,CAAC,EAGJC,EAAAA,UAAU,MAAMF,CAAM,EACtB,MAAMI,EAAYH,EAAAA,OAAO,UAAU,QAAQ,EAC3CC,EAAAA,UAAU,MAAME,CAAS,EACzB,OAAOX,CAAgB,EAAE,iBAAA,EACzB,WAAW,IAAM,CACf,OAAOQ,EAAAA,OAAO,YAAY,QAAQ,CAAC,EAAE,SAAA,CACvC,EAAG,CAAC,EAGJC,EAAAA,UAAU,MAAMF,CAAM,EACtB,MAAMK,EAAYJ,EAAAA,OAAO,UAAU,QAAQ,EAC3CC,EAAAA,UAAU,MAAMG,CAAS,EACzB,OAAOX,CAAgB,EAAE,iBAAA,EACzB,WAAW,IAAM,CACf,OAAOO,EAAAA,OAAO,YAAY,QAAQ,CAAC,EAAE,IAAI,SAAA,CAC3C,EAAG,CAAC,CACN,CAAC,CACH,CAAC"}
|