@s_mart/form 2.5.5 → 2.6.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/index.d.ts +15 -2
- package/dist/index.js +14 -14
- package/dist/index.mjs +8 -8
- package/package.json +2 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { UseFormProps, UseFormReturn, ControllerProps } from 'react-hook-form';
|
|
1
|
+
import { UseFormProps, UseFormReturn, ControllerProps, UseControllerProps } from 'react-hook-form';
|
|
2
2
|
import { TextFieldProps as TextFieldProps$1, SelectProps as SelectProps$1, SelectChangeEvent, AutocompleteProps, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SliderProps as SliderProps$1 } from '@mui/material';
|
|
3
|
+
import { DatePickerProps as DatePickerProps$1 } from '@mui/x-date-pickers';
|
|
3
4
|
|
|
4
5
|
interface IFormProps<T> extends UseFormProps {
|
|
5
6
|
onSubmit: (data: T) => void;
|
|
@@ -261,4 +262,16 @@ type SliderProps = SliderProps$1 & ControllerSlider & {
|
|
|
261
262
|
|
|
262
263
|
declare const Slider: ({ name, rules, defaultValue, shouldUnregister, ...rest }: SliderProps) => JSX.Element;
|
|
263
264
|
|
|
264
|
-
|
|
265
|
+
type DatePickerProps = Omit<UseControllerProps, 'control'> & Pick<TextFieldProps$1, 'label' | 'error' | 'helperText' | 'size' | 'fullWidth' | 'variant' | 'autoFocus' | 'placeholder'> & {
|
|
266
|
+
datePickerProps?: Partial<DatePickerProps$1<any, any>>;
|
|
267
|
+
/**
|
|
268
|
+
* Se `true` irá adicionar um asterisco ao label do campo
|
|
269
|
+
*
|
|
270
|
+
* @default false
|
|
271
|
+
*/
|
|
272
|
+
required?: boolean;
|
|
273
|
+
};
|
|
274
|
+
|
|
275
|
+
declare const DatePicker: ({ rules, name, defaultValue, shouldUnregister, datePickerProps, label, required, ...rest }: DatePickerProps) => JSX.Element;
|
|
276
|
+
|
|
277
|
+
export { Checkbox, CheckboxProps, Creatable, CreatableOption, CreatableProps, DatePicker, DatePickerProps, Form, RadioButton, RadioGroup, RadioGroupProps, RadioProps, Searchable, SearchableOption, SearchableProps, Select, SelectOption, SelectProps, Slider, SliderProps, Switch, SwitchProps, TextField };
|
package/dist/index.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var _e=Object.create;var B=Object.defineProperty,Be=Object.defineProperties,je=Object.getOwnPropertyDescriptor,We=Object.getOwnPropertyDescriptors,Ye=Object.getOwnPropertyNames,Y=Object.getOwnPropertySymbols,He=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty,ue=Object.prototype.propertyIsEnumerable;var fe=(e,r,o)=>r in e?B(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,l=(e,r)=>{for(var o in r||(r={}))ne.call(r,o)&&fe(e,o,r[o]);if(Y)for(var o of Y(r))ue.call(r,o)&&fe(e,o,r[o]);return e},h=(e,r)=>Be(e,We(r));var f=(e,r)=>{var o={};for(var i in e)ne.call(e,i)&&r.indexOf(i)<0&&(o[i]=e[i]);if(e!=null&&Y)for(var i of Y(e))r.indexOf(i)<0&&ue.call(e,i)&&(o[i]=e[i]);return o};var Ke=(e,r)=>{for(var o in r)B(e,o,{get:r[o],enumerable:!0})},ce=(e,r,o,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of Ye(r))!ne.call(e,t)&&t!==o&&B(e,t,{get:()=>r[t],enumerable:!(i=je(r,t))||i.enumerable});return e};var xe=(e,r,o)=>(o=e!=null?_e(He(e)):{},ce(r||!e||!e.__esModule?B(o,"default",{value:e,enumerable:!0}):o,e)),Je=e=>ce(B({},"__esModule",{value:!0}),e);var dr={};Ke(dr,{Checkbox:()=>Le,Creatable:()=>Ae,DatePicker:()=>Oe,Form:()=>Fe,RadioButton:()=>Me,RadioGroup:()=>$e,Searchable:()=>Ee,Select:()=>we,Slider:()=>Ie,Switch:()=>qe,TextField:()=>Ce});module.exports=Je(dr);var ye=require("react"),H=require("react-hook-form");var ae=require("react/jsx-runtime");function Qe(i){var t=i,{children:e,onSubmit:r}=t,o=f(t,["children","onSubmit"]);let a=(0,H.useForm)(o);(0,ye.useEffect)(()=>{a.reset(o.defaultValues)},[o.defaultValues,a.reset]);let n=()=>typeof e=="function"?e(h(l({},a),{onSubmit:a.handleSubmit(r)})):e;return(0,ae.jsx)(H.FormProvider,h(l({},a),{children:(0,ae.jsx)("form",{onSubmit:a.handleSubmit(r),children:n()})}))}var Fe=Qe;var Se=require("react"),K=require("react-hook-form"),J=require("phosphor-react"),U=require("@mui/material"),V=xe(require("@s_mart/masks"));var se=require("@mui/material"),be=require("@s_mart/utils"),j=require("react/jsx-runtime"),b=({label:e,required:r,regular:o})=>(0,j.jsxs)("span",{style:{display:"flex",alignItems:"center",gap:(0,be.toRem)(2)},children:[(0,j.jsx)(se.Typography,{variant:"caption",fontWeight:o?400:700,style:{display:"flex",alignItems:"center"},children:e}),r&&(0,j.jsx)(se.Typography,{variant:"caption",fontWeight:900,color:"error",children:"*"})]});var he=require("react-hook-form"),Pe=require("@s_mart/core"),ge=require("react/jsx-runtime"),P=({name:e})=>{var o,i,t;let r=(0,he.useFormContext)();return(i=(o=r==null?void 0:r.formState)==null?void 0:o.errors)!=null&&i[e]?(0,ge.jsx)(Pe.Indicator,{severity:"error",children:(t=r.formState.errors[e])==null?void 0:t.message}):null};var D=require("react/jsx-runtime"),Xe=m=>{var s=m,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,required:a,mask:n,variant:u="outlined",onInputChange:c}=s,d=f(s,["name","rules","defaultValue","shouldUnregister","label","required","mask","variant","onInputChange"]);let S=(0,K.useFormContext)();if(!S)throw new Error("Para usar o <TextField /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let[C,w]=(0,Se.useState)(!1),E=y=>{var p;return n?(p=V==null?void 0:V[n])==null?void 0:p.format(y):y},x=y=>{var p;return n?(p=V==null?void 0:V[n])==null?void 0:p.parse(y):y},I=y=>{if(!y||n!=="porcentagem")return;y==null||y.stopPropagation();let p=(y==null?void 0:y.target).value;if(p){let F=String(p);if(F.length>0){let _=F.indexOf("%");_>-1&&(y.currentTarget.selectionEnd=_)}}};return(0,D.jsx)(K.Controller,{control:S.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:y,onChange:p}})=>(0,D.jsxs)(U.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,D.jsx)(b,{label:t,required:a}),(0,D.jsx)(U.TextField,h(l({size:"small",variant:u,autoComplete:"off",defaultValue:o,value:E(y||""),onChange:F=>{var _;c==null||c(F),p(x((_=F==null?void 0:F.target)==null?void 0:_.value))}},d),{type:d.type==="password"?C?"text":"password":d.type,InputProps:l({onKeyDown:I,endAdornment:d.type==="password"&&(0,D.jsx)(U.InputAdornment,{position:"end",onClick:()=>w(!C),style:{cursor:"pointer"},children:C?(0,D.jsx)(J.Eye,{size:20}):(0,D.jsx)(J.EyeSlash,{size:20})})},d.InputProps)})),(0,D.jsx)(P,{name:e})]})})},Ce=Xe;var Q=require("react-hook-form"),G=require("@mui/material");var T=require("react/jsx-runtime"),Ze=m=>{var s=m,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,required:a,options:n,placeholder:u,onInputChange:c}=s,d=f(s,["name","rules","defaultValue","shouldUnregister","label","required","options","placeholder","onInputChange"]);let S=(0,Q.useFormContext)(),{palette:C}=(0,G.useTheme)();if(!S)throw new Error("Para usar o <Select /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,T.jsx)(Q.Controller,{control:S.control,name:e,rules:r,defaultValue:o||"",shouldUnregister:i,render:({field:{value:w,onChange:E}})=>(0,T.jsxs)(G.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,T.jsx)(b,{label:t,required:a}),(0,T.jsxs)(G.Select,h(l({displayEmpty:Boolean(u),size:"small",variant:"outlined",autoComplete:"off",value:w||"",onChange:x=>{c==null||c(x),E(x.target.value)}},d),{children:[u&&(0,T.jsx)(G.MenuItem,{disabled:!0,value:"",children:(0,T.jsx)("p",{style:{color:C.grey[400]},children:u})}),n==null?void 0:n.map((x,I)=>(0,T.jsx)(G.MenuItem,{value:x.value,children:x.label},I))]})),(0,T.jsx)(P,{name:e})]})})},we=Ze;var X=require("react-hook-form"),v=require("@mui/material");var L=require("react/jsx-runtime"),er=d=>{var m=d,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,required:a,options:n,textFieldProps:u}=m,c=f(m,["name","rules","defaultValue","shouldUnregister","label","required","options","textFieldProps"]);let s=(0,X.useFormContext)();if(!s)throw new Error("Para usar o <Searchable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,L.jsx)(X.Controller,{control:s.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{onChange:S,value:C}})=>(0,L.jsxs)(v.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,L.jsx)(b,{label:t,required:a}),(0,L.jsx)(v.Autocomplete,h(l({size:"small",onChange:(w,E)=>S(E),value:C||null,options:n,noOptionsText:"Nenhuma op\xE7\xE3o encontrada",isOptionEqualToValue:(w,E)=>typeof w=="string"&&typeof E=="string"?w===E:typeof w=="object"&&typeof E=="object"?w.value===E.value:!1},c),{renderInput:w=>(0,L.jsx)(v.TextField,l(l({},w),u))})),(0,L.jsx)(P,{name:e})]})})},Ee=er;var Z=require("react-hook-form"),Re=require("phosphor-react"),q=require("@mui/material");var R=require("@s_mart/utils"),de=xe(require("@emotion/styled")),me=require("@emotion/react"),De=me.css`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
|
-
`,
|
|
5
|
+
`,rr=e=>me.css`
|
|
6
6
|
.MuiAutocomplete-endAdornment {
|
|
7
7
|
position: relative;
|
|
8
8
|
right: 0;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.creatable {
|
|
12
|
-
${
|
|
12
|
+
${De}
|
|
13
13
|
|
|
14
14
|
.divider {
|
|
15
15
|
width: 1px;
|
|
16
|
-
height: ${(0,
|
|
16
|
+
height: ${(0,R.toRem)(20)};
|
|
17
17
|
background-color: ${e.palette.grey[400]};
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -24,9 +24,9 @@
|
|
|
24
24
|
color: ${e.palette.grey[600]};
|
|
25
25
|
border-radius: 50%;
|
|
26
26
|
|
|
27
|
-
margin: 0 ${(0,
|
|
28
|
-
width: ${(0,
|
|
29
|
-
height: ${(0,
|
|
27
|
+
margin: 0 ${(0,R.toRem)(6)};
|
|
28
|
+
width: ${(0,R.toRem)(28)};
|
|
29
|
+
height: ${(0,R.toRem)(28)};
|
|
30
30
|
|
|
31
31
|
&:hover {
|
|
32
32
|
cursor: pointer;
|
|
@@ -35,26 +35,26 @@
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
`,
|
|
38
|
+
`,Te=de.default.div`
|
|
39
39
|
display: flex;
|
|
40
40
|
|
|
41
41
|
div.endAdornments {
|
|
42
42
|
position: absolute;
|
|
43
43
|
right: 0;
|
|
44
44
|
|
|
45
|
-
${
|
|
45
|
+
${De}
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
${({hideAddButton:e,theme:r})=>!e&&
|
|
49
|
-
`,
|
|
48
|
+
${({hideAddButton:e,theme:r})=>!e&&rr(r)}
|
|
49
|
+
`,Ge=de.default.div`
|
|
50
50
|
color: ${({theme:e})=>e.palette.text.primary};
|
|
51
51
|
|
|
52
|
-
padding: ${(0,
|
|
53
|
-
margin: ${(0,
|
|
52
|
+
padding: ${(0,R.toRem)(6)} ${(0,R.toRem)(16)};
|
|
53
|
+
margin: ${(0,R.toRem)(-6)} ${(0,R.toRem)(-16)};
|
|
54
54
|
|
|
55
55
|
&:hover {
|
|
56
56
|
cursor: pointer;
|
|
57
57
|
transition: background-color 0.2s ease-in-out;
|
|
58
58
|
background-color: ${({theme:e})=>e.palette.grey[100]};
|
|
59
59
|
}
|
|
60
|
-
`;var
|
|
60
|
+
`;var g=require("react/jsx-runtime"),or=S=>{var C=S,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,required:a,options:n,onCreateOption:u,textFieldProps:c,hideAddButton:d,onInputChange:m}=C,s=f(C,["name","rules","defaultValue","shouldUnregister","label","required","options","onCreateOption","textFieldProps","hideAddButton","onInputChange"]);let w=(0,Z.useFormContext)();if(!w)throw new Error("Para usar o <Creatable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let E=x=>{u?u(x):console.error("onCreateOption n\xE3o foi definido")};return(0,g.jsx)(Z.Controller,{control:w.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:x,onChange:I}})=>{let y=(x==null?void 0:x.label)||(x==null?void 0:x.value)||x;return(0,g.jsxs)(q.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,g.jsx)(b,{label:t,required:a}),(0,g.jsx)(Te,{hideAddButton:d,children:(0,g.jsx)(q.Autocomplete,h(l({size:"small",fullWidth:!0,onChange:(p,F)=>(m==null||m(F),I(F)),options:n,value:x||null,noOptionsText:(0,g.jsx)(Ge,{onClick:()=>E(x),children:(0,g.jsxs)(q.Typography,{children:["Adicionar ",y&&`"${y}"`]})}),isOptionEqualToValue:(p,F)=>F?typeof p=="string"&&typeof F=="string"?p===F:typeof p=="object"&&typeof F=="object"?p.value===F.value:typeof p=="object"&&typeof F=="string":!1},s),{renderInput:p=>{let F=d?p.InputProps:h(l({},p.InputProps),{endAdornment:(0,g.jsxs)("div",{className:"endAdornments",children:[p.InputProps.endAdornment,(0,g.jsxs)("div",{className:"creatable",children:[(0,g.jsx)("div",{className:"divider"}),(0,g.jsx)("div",{className:"button",onClick:()=>E(x),children:(0,g.jsx)(Re.Plus,{size:18,weight:"bold"})})]})]})});return(0,g.jsx)(q.TextField,l(h(l({},p),{onChange:I,InputProps:F}),c))}}))}),(0,g.jsx)(P,{name:e})]})}})},Ae=or;var ee=require("react-hook-form"),N=require("@mui/material");var M=require("react/jsx-runtime"),tr=c=>{var d=c,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,labelPlacement:a,required:n}=d,u=f(d,["name","rules","defaultValue","shouldUnregister","label","labelPlacement","required"]);let m=(0,ee.useFormContext)();if(!m)throw new Error("Para usar o <Checkbox /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,M.jsx)(ee.Controller,{control:m.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:s,onChange:S}})=>(0,M.jsxs)(N.Grid,{display:"flex",flexDirection:"column",children:[(0,M.jsx)(N.FormControlLabel,{control:(0,M.jsx)(N.Checkbox,l({value:s!=null?s:"",defaultValue:s,onChange:S},u)),label:(0,M.jsx)(b,{label:t,required:n,regular:!0}),labelPlacement:a||"end"}),(0,M.jsx)(P,{name:e})]})})},Le=tr;var re=require("react-hook-form"),z=require("@mui/material");var $=require("react/jsx-runtime"),ir=u=>{var c=u,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,labelPlacement:a}=c,n=f(c,["name","rules","defaultValue","shouldUnregister","label","labelPlacement"]);let d=(0,re.useFormContext)();if(!d)throw new Error("Para usar o <Switch /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,$.jsx)(re.Controller,{control:d.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:m,onChange:s}})=>(0,$.jsxs)(z.Grid,{display:"flex",flexDirection:"column",children:[(0,$.jsx)(z.FormControlLabel,{control:(0,$.jsx)(z.Switch,l({value:m!=null?m:"",defaultValue:m,onChange:s},n)),label:(0,$.jsx)(b,{label:t}),labelPlacement:a||"end"}),(0,$.jsx)(P,{name:e})]})})},qe=ir;var O=require("@mui/material");var W=require("react/jsx-runtime"),lr=i=>{var t=i,{label:e,labelPlacement:r}=t,o=f(t,["label","labelPlacement"]);return(0,W.jsx)(O.Grid,{display:"flex",flexDirection:"column",children:(0,W.jsx)(O.FormControlLabel,{control:(0,W.jsx)(O.Radio,l({},o)),label:(0,W.jsx)(b,{label:e}),labelPlacement:r||"end"})})},Me=lr;var oe=require("react-hook-form"),te=require("@mui/material");var k=require("react/jsx-runtime"),nr=d=>{var m=d,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,required:a,children:n,orientation:u="row"}=m,c=f(m,["name","rules","defaultValue","shouldUnregister","label","required","children","orientation"]);let s=(0,oe.useFormContext)();if(!s)throw new Error("Para usar o <RadioGroup /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,k.jsx)(oe.Controller,{control:s.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:S,onChange:C}})=>(0,k.jsxs)(te.Grid,{display:"flex",flexDirection:"column",children:[t&&(0,k.jsx)(b,{label:t,required:a}),(0,k.jsx)(te.RadioGroup,h(l({value:S||"",onChange:C,name:e},c),{style:{display:"flex",flexDirection:u},children:n})),(0,k.jsx)(P,{name:e})]})})},$e=nr;var ie=require("react-hook-form"),ke=require("@mui/material");var pe=require("react/jsx-runtime"),ar=a=>{var n=a,{name:e,rules:r,defaultValue:o,shouldUnregister:i}=n,t=f(n,["name","rules","defaultValue","shouldUnregister"]);let u=(0,ie.useFormContext)();if(!u)throw new Error("Para usar o <Slider /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,pe.jsx)(ie.Controller,{control:u.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:c,onChange:d}})=>(0,pe.jsx)(ke.Slider,l({value:c||(t==null?void 0:t.min)||0,onChange:d,valueLabelDisplay:"auto"},t))})},Ie=ar;var le=require("react-hook-form"),Ve=require("@s_mart/core"),Ue=require("@mui/material"),ve=require("@mui/x-date-pickers/DatePicker"),Ne=require("@mui/x-date-pickers/AdapterDayjs"),ze=require("@mui/x-date-pickers/LocalizationProvider");var A=require("react/jsx-runtime"),sr=c=>{var d=c,{rules:e,name:r,defaultValue:o,shouldUnregister:i,datePickerProps:t,label:a,required:n}=d,u=f(d,["rules","name","defaultValue","shouldUnregister","datePickerProps","label","required"]);let m=(0,le.useFormContext)();if(!m)throw new Error("Para usar o <DataPicker /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return(0,A.jsx)(ze.LocalizationProvider,{dateAdapter:Ne.AdapterDayjs,children:(0,A.jsx)(le.Controller,{control:m.control,name:r,rules:e,defaultValue:o,shouldUnregister:i,render:({field:{value:s,onChange:S}})=>(0,A.jsxs)(Ve.Grid,{display:"flex",flexDirection:"column",children:[a&&(0,A.jsx)(b,{label:a,required:n}),(0,A.jsx)(ve.DatePicker,h(l({},t),{value:s!=null?s:null,inputFormat:(t==null?void 0:t.inputFormat)||"DD/MM/YYYY",onChange:S,renderInput:C=>(0,A.jsx)(Ue.TextField,l(l({size:"small",variant:"outlined"},C),u))})),(0,A.jsx)(P,{name:r})]})})})},Oe=sr;0&&(module.exports={Checkbox,Creatable,DatePicker,Form,RadioButton,RadioGroup,Searchable,Select,Slider,Switch,TextField});
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var ee=Object.defineProperty,re=Object.defineProperties;var oe=Object.getOwnPropertyDescriptors;var I=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var N=(e,r,o)=>r in e?ee(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,l=(e,r)=>{for(var o in r||(r={}))z.call(r,o)&&N(e,o,r[o]);if(I)for(var o of I(r))O.call(r,o)&&N(e,o,r[o]);return e},h=(e,r)=>re(e,oe(r));var f=(e,r)=>{var o={};for(var i in e)z.call(e,i)&&r.indexOf(i)<0&&(o[i]=e[i]);if(e!=null&&I)for(var i of I(e))r.indexOf(i)<0&&O.call(e,i)&&(o[i]=e[i]);return o};import{useEffect as te}from"react";import{FormProvider as ie,useForm as le}from"react-hook-form";import{jsx as _}from"react/jsx-runtime";function ne(i){var t=i,{children:e,onSubmit:r}=t,o=f(t,["children","onSubmit"]);let a=le(o);te(()=>{a.reset(o.defaultValues)},[o.defaultValues,a.reset]);let n=()=>typeof e=="function"?e(h(l({},a),{onSubmit:a.handleSubmit(r)})):e;return _(ie,h(l({},a),{children:_("form",{onSubmit:a.handleSubmit(r),children:n()})}))}var ae=ne;import{useState as ue}from"react";import{Controller as ce,useFormContext as xe}from"react-hook-form";import{Eye as ye,EyeSlash as Fe}from"phosphor-react";import{Grid as be,InputAdornment as he,TextField as Pe}from"@mui/material";import*as R from"@s_mart/masks";import{Typography as B}from"@mui/material";import{toRem as se}from"@s_mart/utils";import{jsx as j,jsxs as de}from"react/jsx-runtime";var b=({label:e,required:r,regular:o})=>de("span",{style:{display:"flex",alignItems:"center",gap:se(2)},children:[j(B,{variant:"caption",fontWeight:o?400:700,style:{display:"flex",alignItems:"center"},children:e}),r&&j(B,{variant:"caption",fontWeight:900,color:"error",children:"*"})]});import{useFormContext as me}from"react-hook-form";import{Indicator as pe}from"@s_mart/core";import{jsx as fe}from"react/jsx-runtime";var P=({name:e})=>{var o,i,t;let r=me();return(i=(o=r==null?void 0:r.formState)==null?void 0:o.errors)!=null&&i[e]?fe(pe,{severity:"error",children:(t=r.formState.errors[e])==null?void 0:t.message}):null};import{jsx as T,jsxs as Ce}from"react/jsx-runtime";var ge=m=>{var s=m,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,required:a,mask:n,variant:u="outlined",onInputChange:c}=s,d=f(s,["name","rules","defaultValue","shouldUnregister","label","required","mask","variant","onInputChange"]);let g=xe();if(!g)throw new Error("Para usar o <TextField /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let[S,C]=ue(!1),w=y=>{var p;return n?(p=R==null?void 0:R[n])==null?void 0:p.format(y):y},x=y=>{var p;return n?(p=R==null?void 0:R[n])==null?void 0:p.parse(y):y},G=y=>{if(!y||n!=="porcentagem")return;y==null||y.stopPropagation();let p=(y==null?void 0:y.target).value;if(p){let F=String(p);if(F.length>0){let q=F.indexOf("%");q>-1&&(y.currentTarget.selectionEnd=q)}}};return T(ce,{control:g.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:y,onChange:p}})=>Ce(be,{display:"flex",flexDirection:"column",children:[t&&T(b,{label:t,required:a}),T(Pe,h(l({size:"small",variant:u,autoComplete:"off",defaultValue:o,value:w(y||""),onChange:F=>{var q;c==null||c(F),p(x((q=F==null?void 0:F.target)==null?void 0:q.value))}},d),{type:d.type==="password"?S?"text":"password":d.type,InputProps:l({onKeyDown:G,endAdornment:d.type==="password"&&T(he,{position:"end",onClick:()=>C(!S),style:{cursor:"pointer"},children:S?T(ye,{size:20}):T(Fe,{size:20})})},d.InputProps)})),T(P,{name:e})]})})},Se=ge;import{Controller as we,useFormContext as Ee}from"react-hook-form";import{Grid as De,Select as Te,MenuItem as W,useTheme as Ge}from"@mui/material";import{jsx as A,jsxs as Y}from"react/jsx-runtime";var Re=m=>{var s=m,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,required:a,options:n,placeholder:u,onInputChange:c}=s,d=f(s,["name","rules","defaultValue","shouldUnregister","label","required","options","placeholder","onInputChange"]);let g=Ee(),{palette:S}=Ge();if(!g)throw new Error("Para usar o <Select /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return A(we,{control:g.control,name:e,rules:r,defaultValue:o||"",shouldUnregister:i,render:({field:{value:C,onChange:w}})=>Y(De,{display:"flex",flexDirection:"column",children:[t&&A(b,{label:t,required:a}),Y(Te,h(l({displayEmpty:Boolean(u),size:"small",variant:"outlined",autoComplete:"off",value:C||"",onChange:x=>{c==null||c(x),w(x.target.value)}},d),{children:[u&&A(W,{disabled:!0,value:"",children:A("p",{style:{color:S.grey[400]},children:u})}),n==null?void 0:n.map((x,G)=>A(W,{value:x.value,children:x.label},G))]})),A(P,{name:e})]})})},Ae=Re;import{Controller as Le,useFormContext as qe}from"react-hook-form";import{Grid as Me,Autocomplete as $e,TextField as ke}from"@mui/material";import{jsx as M,jsxs as Ue}from"react/jsx-runtime";var Ie=d=>{var m=d,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,required:a,options:n,textFieldProps:u}=m,c=f(m,["name","rules","defaultValue","shouldUnregister","label","required","options","textFieldProps"]);let s=qe();if(!s)throw new Error("Para usar o <Searchable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return M(Le,{control:s.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{onChange:g,value:S}})=>Ue(Me,{display:"flex",flexDirection:"column",children:[t&&M(b,{label:t,required:a}),M($e,h(l({size:"small",onChange:(C,w)=>g(w),value:S||null,options:n,noOptionsText:"Nenhuma op\xE7\xE3o encontrada",isOptionEqualToValue:(C,w)=>typeof C=="string"&&typeof w=="string"?C===w:typeof C=="object"&&typeof w=="object"?C.value===w.value:!1},c),{renderInput:C=>M(ke,l(l({},C),u))})),M(P,{name:e})]})})},Ve=Ie;import{Controller as Ne,useFormContext as ze}from"react-hook-form";import{Plus as Oe}from"phosphor-react";import{Grid as _e,Autocomplete as Be,TextField as je,Typography as We}from"@mui/material";import{toRem as D}from"@s_mart/utils";import H from"@emotion/styled";import{css as K}from"@emotion/react";var J=K`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
@@ -13,7 +13,7 @@ var Z=Object.defineProperty,ee=Object.defineProperties;var re=Object.getOwnPrope
|
|
|
13
13
|
|
|
14
14
|
.divider {
|
|
15
15
|
width: 1px;
|
|
16
|
-
height: ${
|
|
16
|
+
height: ${D(20)};
|
|
17
17
|
background-color: ${e.palette.grey[400]};
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -24,9 +24,9 @@ var Z=Object.defineProperty,ee=Object.defineProperties;var re=Object.getOwnPrope
|
|
|
24
24
|
color: ${e.palette.grey[600]};
|
|
25
25
|
border-radius: 50%;
|
|
26
26
|
|
|
27
|
-
margin: 0 ${
|
|
28
|
-
width: ${
|
|
29
|
-
height: ${
|
|
27
|
+
margin: 0 ${D(6)};
|
|
28
|
+
width: ${D(28)};
|
|
29
|
+
height: ${D(28)};
|
|
30
30
|
|
|
31
31
|
&:hover {
|
|
32
32
|
cursor: pointer;
|
|
@@ -49,12 +49,12 @@ var Z=Object.defineProperty,ee=Object.defineProperties;var re=Object.getOwnPrope
|
|
|
49
49
|
`,X=H.div`
|
|
50
50
|
color: ${({theme:e})=>e.palette.text.primary};
|
|
51
51
|
|
|
52
|
-
padding: ${
|
|
53
|
-
margin: ${
|
|
52
|
+
padding: ${D(6)} ${D(16)};
|
|
53
|
+
margin: ${D(-6)} ${D(-16)};
|
|
54
54
|
|
|
55
55
|
&:hover {
|
|
56
56
|
cursor: pointer;
|
|
57
57
|
transition: background-color 0.2s ease-in-out;
|
|
58
58
|
background-color: ${({theme:e})=>e.palette.grey[100]};
|
|
59
59
|
}
|
|
60
|
-
`;import{jsx as E,jsxs as V}from"react/jsx-runtime";var
|
|
60
|
+
`;import{jsx as E,jsxs as V}from"react/jsx-runtime";var Ye=g=>{var S=g,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,required:a,options:n,onCreateOption:u,textFieldProps:c,hideAddButton:d,onInputChange:m}=S,s=f(S,["name","rules","defaultValue","shouldUnregister","label","required","options","onCreateOption","textFieldProps","hideAddButton","onInputChange"]);let C=ze();if(!C)throw new Error("Para usar o <Creatable /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");let w=x=>{u?u(x):console.error("onCreateOption n\xE3o foi definido")};return E(Ne,{control:C.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:x,onChange:G}})=>{let y=(x==null?void 0:x.label)||(x==null?void 0:x.value)||x;return V(_e,{display:"flex",flexDirection:"column",children:[t&&E(b,{label:t,required:a}),E(Q,{hideAddButton:d,children:E(Be,h(l({size:"small",fullWidth:!0,onChange:(p,F)=>(m==null||m(F),G(F)),options:n,value:x||null,noOptionsText:E(X,{onClick:()=>w(x),children:V(We,{children:["Adicionar ",y&&`"${y}"`]})}),isOptionEqualToValue:(p,F)=>F?typeof p=="string"&&typeof F=="string"?p===F:typeof p=="object"&&typeof F=="object"?p.value===F.value:typeof p=="object"&&typeof F=="string":!1},s),{renderInput:p=>{let F=d?p.InputProps:h(l({},p.InputProps),{endAdornment:V("div",{className:"endAdornments",children:[p.InputProps.endAdornment,V("div",{className:"creatable",children:[E("div",{className:"divider"}),E("div",{className:"button",onClick:()=>w(x),children:E(Oe,{size:18,weight:"bold"})})]})]})});return E(je,l(h(l({},p),{onChange:G,InputProps:F}),c))}}))}),E(P,{name:e})]})}})},He=Ye;import{Controller as Ke,useFormContext as Je}from"react-hook-form";import{Grid as Qe,Checkbox as Xe,FormControlLabel as Ze}from"@mui/material";import{jsx as $,jsxs as or}from"react/jsx-runtime";var er=c=>{var d=c,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,labelPlacement:a,required:n}=d,u=f(d,["name","rules","defaultValue","shouldUnregister","label","labelPlacement","required"]);let m=Je();if(!m)throw new Error("Para usar o <Checkbox /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return $(Ke,{control:m.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:s,onChange:g}})=>or(Qe,{display:"flex",flexDirection:"column",children:[$(Ze,{control:$(Xe,l({value:s!=null?s:"",defaultValue:s,onChange:g},u)),label:$(b,{label:t,required:n,regular:!0}),labelPlacement:a||"end"}),$(P,{name:e})]})})},rr=er;import{Controller as tr,useFormContext as ir}from"react-hook-form";import{Grid as lr,Switch as nr,FormControlLabel as ar}from"@mui/material";import{jsx as k,jsxs as mr}from"react/jsx-runtime";var sr=u=>{var c=u,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,labelPlacement:a}=c,n=f(c,["name","rules","defaultValue","shouldUnregister","label","labelPlacement"]);let d=ir();if(!d)throw new Error("Para usar o <Switch /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return k(tr,{control:d.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:m,onChange:s}})=>mr(lr,{display:"flex",flexDirection:"column",children:[k(ar,{control:k(nr,l({value:m!=null?m:"",defaultValue:m,onChange:s},n)),label:k(b,{label:t}),labelPlacement:a||"end"}),k(P,{name:e})]})})},dr=sr;import{Grid as pr,Radio as fr,FormControlLabel as ur}from"@mui/material";import{jsx as U}from"react/jsx-runtime";var cr=i=>{var t=i,{label:e,labelPlacement:r}=t,o=f(t,["label","labelPlacement"]);return U(pr,{display:"flex",flexDirection:"column",children:U(ur,{control:U(fr,l({},o)),label:U(b,{label:e}),labelPlacement:r||"end"})})},xr=cr;import{Controller as yr,useFormContext as Fr}from"react-hook-form";import{Grid as br,RadioGroup as hr}from"@mui/material";import{jsx as v,jsxs as Sr}from"react/jsx-runtime";var Pr=d=>{var m=d,{name:e,rules:r,defaultValue:o,shouldUnregister:i,label:t,required:a,children:n,orientation:u="row"}=m,c=f(m,["name","rules","defaultValue","shouldUnregister","label","required","children","orientation"]);let s=Fr();if(!s)throw new Error("Para usar o <RadioGroup /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return v(yr,{control:s.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:g,onChange:S}})=>Sr(br,{display:"flex",flexDirection:"column",children:[t&&v(b,{label:t,required:a}),v(hr,h(l({value:g||"",onChange:S,name:e},c),{style:{display:"flex",flexDirection:u},children:n})),v(P,{name:e})]})})},gr=Pr;import{Controller as Cr,useFormContext as wr}from"react-hook-form";import{Slider as Er}from"@mui/material";import{jsx as Z}from"react/jsx-runtime";var Dr=a=>{var n=a,{name:e,rules:r,defaultValue:o,shouldUnregister:i}=n,t=f(n,["name","rules","defaultValue","shouldUnregister"]);let u=wr();if(!u)throw new Error("Para usar o <Slider /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return Z(Cr,{control:u.control,name:e,rules:r,defaultValue:o,shouldUnregister:i,render:({field:{value:c,onChange:d}})=>Z(Er,l({value:c||(t==null?void 0:t.min)||0,onChange:d,valueLabelDisplay:"auto"},t))})},Tr=Dr;import{Controller as Gr,useFormContext as Rr}from"react-hook-form";import{Grid as Ar}from"@s_mart/core";import{TextField as Lr}from"@mui/material";import{DatePicker as qr}from"@mui/x-date-pickers/DatePicker";import{AdapterDayjs as Mr}from"@mui/x-date-pickers/AdapterDayjs";import{LocalizationProvider as $r}from"@mui/x-date-pickers/LocalizationProvider";import{jsx as L,jsxs as Vr}from"react/jsx-runtime";var kr=c=>{var d=c,{rules:e,name:r,defaultValue:o,shouldUnregister:i,datePickerProps:t,label:a,required:n}=d,u=f(d,["rules","name","defaultValue","shouldUnregister","datePickerProps","label","required"]);let m=Rr();if(!m)throw new Error("Para usar o <DataPicker /> \xE9 necess\xE1rio que ele esteja dentro de um <Form />");return L($r,{dateAdapter:Mr,children:L(Gr,{control:m.control,name:r,rules:e,defaultValue:o,shouldUnregister:i,render:({field:{value:s,onChange:g}})=>Vr(Ar,{display:"flex",flexDirection:"column",children:[a&&L(b,{label:a,required:n}),L(qr,h(l({},t),{value:s!=null?s:null,inputFormat:(t==null?void 0:t.inputFormat)||"DD/MM/YYYY",onChange:g,renderInput:S=>L(Lr,l(l({size:"small",variant:"outlined"},S),u))})),L(P,{name:r})]})})})},Ir=kr;export{rr as Checkbox,He as Creatable,Ir as DatePicker,ae as Form,xr as RadioButton,gr as RadioGroup,Ve as Searchable,Ae as Select,Tr as Slider,dr as Switch,Se as TextField};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@s_mart/form",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
"@types/react-dom": ">=18.0.6",
|
|
37
37
|
"@emotion/react": ">=11.10.4",
|
|
38
38
|
"@emotion/styled": ">=11.10.4",
|
|
39
|
+
"@mui/x-date-pickers": ">=5.0.13",
|
|
39
40
|
"@s_mart/core": ">=2.1.0",
|
|
40
41
|
"phosphor-react": ">=1.4.1"
|
|
41
42
|
},
|