%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[113],{1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return k}));var a=n(118),c=n(1100),o=n(1109),l=n(1090),r=n(1117),s=n(1119),i=n(5),m=n(0),d=n(1024),u=n(551),b=n(1087),h=n(1099),j=n(11),p=n(370),x=n(371),f=n(1131),v=n.n(f),O=n(1);const y=Object(d.a)({productionPrefix:"iframe-"});class g extends m.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(p.a)({...Object(u.a)(),plugins:[...Object(u.a)().plugins,Object(x.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(O.jsxs)(O.Fragment,{children:[Object(O.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(O.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(O.jsx)(v.a,{head:this.renderHead(),ref:this.handleRef,className:Object(i.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(O.jsx)(b.b,{jss:this.state.jss,generateClassName:y,sheetsManager:this.state.sheetsManager,children:Object(O.jsx)(h.a,{theme:n,children:Object(m.cloneElement)(e,{container:this.state.container})})}):null})}}var N=Object(j.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(g);function C(e){const[t,n]=Object(m.useState)(e.currentTabIndex),{component:d,raw:u,iframe:b,className:h}=e;return Object(O.jsxs)(o.a,{className:Object(i.a)(h,"shadow"),children:[Object(O.jsx)(c.a,{position:"static",color:"default",className:"shadow-0",children:Object(O.jsxs)(s.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[d&&Object(O.jsx)(r.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(l.a,{children:"remove_red_eye"})}),u&&Object(O.jsx)(r.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(l.a,{children:"code"})})]})}),Object(O.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(O.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:d&&(b?Object(O.jsx)(N,{children:Object(O.jsx)(d,{})}):Object(O.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(O.jsx)(d,{})}))}),Object(O.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:u&&Object(O.jsx)("div",{className:"flex flex-1",children:Object(O.jsx)(a.a,{component:"pre",className:"language-javascript w-full",children:u.default})})})]})]})}C.defaultProps={currentTabIndex:0};var k=C},1165:function(e,t,n){"use strict";var a=n(2),c=n(7),o=n(0),l=n(8),r=n(228),s=n(85),i=Object(s.a)(o.createElement("path",{d:"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"}),"CheckBoxOutlineBlank"),m=Object(s.a)(o.createElement("path",{d:"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"}),"CheckBox"),d=n(31),u=Object(s.a)(o.createElement("path",{d:"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"}),"IndeterminateCheckBox"),b=n(15),h=n(11),j=o.createElement(m,null),p=o.createElement(i,null),x=o.createElement(u,null),f=o.forwardRef((function(e,t){var n=e.checkedIcon,s=void 0===n?j:n,i=e.classes,m=e.color,d=void 0===m?"secondary":m,u=e.icon,h=void 0===u?p:u,f=e.indeterminate,v=void 0!==f&&f,O=e.indeterminateIcon,y=void 0===O?x:O,g=e.inputProps,N=e.size,C=void 0===N?"medium":N,k=Object(c.a)(e,["checkedIcon","classes","color","icon","indeterminate","indeterminateIcon","inputProps","size"]),S=v?y:h,w=v?y:s;return o.createElement(r.a,Object(a.a)({type:"checkbox",classes:{root:Object(l.a)(i.root,i["color".concat(Object(b.a)(d))],v&&i.indeterminate),checked:i.checked,disabled:i.disabled},color:d,inputProps:Object(a.a)({"data-indeterminate":v},g),icon:o.cloneElement(S,{fontSize:void 0===S.props.fontSize&&"small"===C?C:S.props.fontSize}),checkedIcon:o.cloneElement(w,{fontSize:void 0===w.props.fontSize&&"small"===C?C:w.props.fontSize}),ref:t},k))}));t.a=Object(h.a)((function(e){return{root:{color:e.palette.text.secondary},checked:{},disabled:{},indeterminate:{},colorPrimary:{"&$checked":{color:e.palette.primary.main,"&:hover":{backgroundColor:Object(d.a)(e.palette.primary.main,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}}},"&$disabled":{color:e.palette.action.disabled}},colorSecondary:{"&$checked":{color:e.palette.secondary.main,"&:hover":{backgroundColor:Object(d.a)(e.palette.secondary.main,e.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}}},"&$disabled":{color:e.palette.action.disabled}}}}),{name:"MuiCheckbox"})(f)},2448:function(e,t,n){"use strict";n.r(t);var a=n(32),c=n(1337),o=n(1098),l=n(1096),r=n(1165),s=n(1044),i=n(1092),m=n(1095),d=n(1093),u=n(1094),b=n(1120),h=n(194),j=n(1);let p=0;const x=[{value:"chocolate",label:"Chocolate"},{value:"strawberry",label:"Strawberry"},{value:"vanilla",label:"Vanilla"}],f={Native:"",TextField:"",Select:"",ReactSelect:"",Checkbox:!1,switch:!1,RadioGroup:""};t.default=function(){const{handleSubmit:e,register:t,reset:n,control:v,watch:O}=Object(a.f)({defaultValues:f,mode:"onChange"});p++;const y=O();return Object(j.jsxs)("div",{className:"flex w-full max-w-screen-md justify-start items-start",children:[Object(j.jsxs)("form",{className:"w-1/2",onSubmit:e((e=>console.info(e))),children:[Object(j.jsxs)("div",{className:"mt-48 mb-16",children:[Object(j.jsx)(h.a,{className:"mb-24 font-medium text-14",children:"Native Input:"}),Object(j.jsx)("input",{className:"border-1 outline-none rounded-8 p-8",...t("Native")})]}),Object(j.jsxs)("div",{className:"mt-48 mb-16",children:[Object(j.jsx)(h.a,{className:"mb-24 font-medium text-14",children:"MUI Checkbox"}),Object(j.jsx)(a.a,{name:"Checkbox",type:"checkbox",control:v,defaultValue:!1,render:e=>{let{field:{onChange:t,value:n}}=e;return Object(j.jsx)(r.a,{checked:n,onChange:e=>t(e.target.checked)})}})]}),Object(j.jsxs)("div",{className:"mt-48 mb-16",children:[Object(j.jsx)(h.a,{className:"mb-24 font-medium text-14",children:"Radio Group"}),Object(j.jsx)(a.a,{render:e=>{let{field:t}=e;return Object(j.jsxs)(d.a,{...t,"aria-label":"gender",name:"gender1",children:[Object(j.jsx)(u.a,{value:"female",control:Object(j.jsx)(b.a,{}),label:"Female"}),Object(j.jsx)(u.a,{value:"male",control:Object(j.jsx)(b.a,{}),label:"Male"})]})},name:"RadioGroup",control:v})]}),Object(j.jsxs)("div",{className:"mt-48 mb-16",children:[Object(j.jsx)(h.a,{className:"mb-24 font-medium text-14",children:"MUI TextField"}),Object(j.jsx)(a.a,{render:e=>{let{field:t}=e;return Object(j.jsx)(l.a,{...t,variant:"outlined"})},name:"TextField",control:v})]}),Object(j.jsxs)("div",{className:"mt-48 mb-16",children:[Object(j.jsx)(h.a,{className:"mb-24 font-medium text-14",children:"MUI Select"}),Object(j.jsx)(a.a,{render:e=>{let{field:t}=e;return Object(j.jsxs)(s.a,{...t,variant:"outlined",children:[Object(j.jsx)(i.a,{value:10,children:"Ten"}),Object(j.jsx)(i.a,{value:20,children:"Twenty"}),Object(j.jsx)(i.a,{value:30,children:"Thirty"})]})},name:"Select",control:v})]}),Object(j.jsxs)("div",{className:"mt-48 mb-16",children:[Object(j.jsx)(h.a,{className:"mb-24 font-medium text-14",children:"MUI Switch"}),Object(j.jsx)(a.a,{name:"switch",type:"checkbox",control:v,defaultValue:!1,render:e=>{let{field:{onChange:t,value:n}}=e;return Object(j.jsx)(m.a,{checked:n,onChange:e=>t(e.target.checked)})}})]}),Object(j.jsxs)("div",{className:"mt-48 mb-16",children:[Object(j.jsx)(h.a,{className:"mb-24 font-medium text-14",children:"React Select"}),Object(j.jsx)(a.a,{render:e=>{let{field:t}=e;return Object(j.jsx)(c.a,{...t})},options:x,name:"ReactSelect",isClearable:!0,control:v,onChange:e=>{let[t]=e;return{value:t}}})]}),Object(j.jsxs)("div",{className:"flex my-48 items-center",children:[Object(j.jsx)(o.a,{className:"mx-8",variant:"contained",color:"secondary",type:"submit",children:"Submit"}),Object(j.jsx)(o.a,{className:"mx-8",type:"button",onClick:()=>{n(f)},children:"Reset Form"})]})]}),Object(j.jsxs)("div",{className:"w-1/2 my-48 p-24",children:[Object(j.jsx)("pre",{className:"language-js p-24 w-400",children:JSON.stringify(y,null,2)}),Object(j.jsxs)(h.a,{className:"mt-16 font-medium text-12 italic",color:"textSecondary",children:["Render Count: ",p]})]})]})}},2449:function(e,t,n){"use strict";n.r(t),t.default='import {useForm, Controller} from "react-hook-form";\nimport ReactSelect from "react-select";\nimport Button from \'@material-ui/core/Button\';\nimport TextField from "@material-ui/core/TextField"\nimport Checkbox from "@material-ui/core/Checkbox"\nimport Select from "@material-ui/core/Select"\nimport MenuItem from "@material-ui/core/MenuItem"\nimport Switch from "@material-ui/core/Switch"\nimport RadioGroup from "@material-ui/core/RadioGroup"\nimport FormControlLabel from "@material-ui/core/FormControlLabel"\nimport Radio from "@material-ui/core/Radio"\nimport Typography from "@material-ui/core/Typography"\n\nlet renderCount = 0;\n\nconst options = [\n {\n value: "chocolate",\n label: "Chocolate"\n },\n {\n value: "strawberry",\n label: "Strawberry"\n },\n {\n value: "vanilla",\n label: "Vanilla"\n }\n];\n\nconst defaultValues = {\n Native : "",\n TextField : "",\n Select : "",\n ReactSelect: "",\n Checkbox : false,\n switch : false,\n RadioGroup : ""\n};\n\nfunction SimpleFormExample()\n{\n const {\n handleSubmit,\n register,\n reset,\n control,\n watch\n } = useForm({\n defaultValues,\n mode: "onChange"\n });\n renderCount++;\n\n const data = watch();\n\n return (\n <div className="flex w-full max-w-screen-md justify-start items-start">\n <form className="w-1/2" onSubmit={handleSubmit(data => console.info(data))}>\n <div className="mt-48 mb-16">\n <Typography className="mb-24 font-medium text-14">Native Input:</Typography>\n <input className="border-1 outline-none rounded-8 p-8" {...register(\'Native\')} />\n </div>\n\n <div className="mt-48 mb-16">\n <Typography className="mb-24 font-medium text-14">MUI Checkbox</Typography>\n <Controller\n name="Checkbox"\n type="checkbox"\n control={control}\n defaultValue={false}\n render={({ field: {onChange, value} }) => (\n <Checkbox\n checked={value}\n onChange={ev => onChange(ev.target.checked)}\n />\n )}\n />\n </div>\n\n <div className="mt-48 mb-16">\n <Typography className="mb-24 font-medium text-14">Radio Group</Typography>\n <Controller\n render={({ field }) => (\n <RadioGroup {...field} aria-label="gender" name="gender1">\n <FormControlLabel\n value="female"\n control={<Radio/>}\n label="Female"\n />\n <FormControlLabel\n value="male"\n control={<Radio/>}\n label="Male"\n />\n </RadioGroup>\n )}\n name="RadioGroup"\n control={control}\n />\n </div>\n\n <div className="mt-48 mb-16">\n <Typography className="mb-24 font-medium text-14">MUI TextField</Typography>\n <Controller render={({ field }) => <TextField { ...field } variant="outlined"/>} name="TextField" control={control}/>\n </div>\n\n <div className="mt-48 mb-16">\n <Typography className="mb-24 font-medium text-14">MUI Select</Typography>\n <Controller\n render={({ field }) => (\n <Select {...field} variant="outlined">\n <MenuItem value={10}>Ten</MenuItem>\n <MenuItem value={20}>Twenty</MenuItem>\n <MenuItem value={30}>Thirty</MenuItem>\n </Select>\n )}\n name="Select"\n control={control}\n />\n </div>\n\n <div className="mt-48 mb-16">\n <Typography className="mb-24 font-medium text-14">MUI Switch</Typography>\n <Controller\n name="switch"\n type="checkbox"\n control={control}\n defaultValue={false}\n render={({ field: {onChange, value} }) => (\n <Switch\n checked={value}\n onChange={ev => onChange(ev.target.checked)}\n />\n )}\n />\n </div>\n\n <div className="mt-48 mb-16">\n <Typography className="mb-24 font-medium text-14">React Select</Typography>\n <Controller\n render={({ field }) => <ReactSelect {...field}/>}\n options={options}\n name="ReactSelect"\n isClearable\n control={control}\n onChange={([selected]) => {\n return {value: selected};\n }}\n />\n </div>\n\n <div className="flex my-48 items-center">\n\n <Button className="mx-8" variant="contained" color="secondary" type="submit">Submit</Button>\n\n <Button\n className="mx-8"\n type="button"\n onClick={() => {\n reset(defaultValues);\n }}\n >\n Reset Form\n </Button>\n\n </div>\n\n </form>\n\n <div className="w-1/2 my-48 p-24">\n\n <pre className="language-js p-24 w-400">\n {JSON.stringify(data, null, 2)}\n </pre>\n\n <Typography className="mt-16 font-medium text-12 italic" color="textSecondary">Render Count: {renderCount}</Typography>\n </div>\n </div>\n );\n}\n\nexport default SimpleFormExample;\n'},2634:function(e,t,n){"use strict";n.r(t);var a=n(1130),c=n(1098),o=n(1090),l=n(194),r=n(28),s=n(1);t.default=function(){return Object(s.jsxs)(s.Fragment,{children:[Object(s.jsxs)("div",{className:"flex w-full items-center justify-between mb-24",children:[Object(s.jsx)(l.a,{variant:"h4",className:"",children:"React Hook Form"}),Object(s.jsxs)(c.a,{variant:"outlined",component:"a",href:"http://react-hook-form.com",target:"_blank",role:"button",children:[Object(s.jsx)(o.a,{children:"link"}),Object(s.jsx)("span",{className:"mx-4",children:"Reference"})]})]}),Object(s.jsx)(l.a,{className:"mb-16",component:"p",children:"Performant, flexible and extensible forms with easy to use validation."}),Object(s.jsx)("hr",{}),Object(s.jsx)(l.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Example Usages"}),Object(s.jsx)(a.a,{className:"mb-64",component:n(2448).default,raw:n(2449)}),Object(s.jsx)(l.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Demos"}),Object(s.jsx)("ul",{children:Object(s.jsxs)("li",{className:"mb-8",children:[Object(s.jsx)(r.a,{to:"/login",children:"Login page"}),Object(s.jsx)(r.a,{to:"/register",children:"Register page"})]})})]})}}}]);
Zerion Mini Shell 1.0