%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[112],{1130:function(e,n,t){"use strict";t.d(n,"a",(function(){return M}));var a=t(118),l=t(1100),i=t(1109),r=t(1090),s=t(1117),o=t(1119),c=t(5),d=t(0),m=t(1024),u=t(551),b=t(1087),h=t(1099),p=t(11),j=t(370),v=t(371),x=t(1131),f=t.n(x),O=t(1);const g=Object(m.a)({productionPrefix:"iframe-"});class y extends d.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(j.a)({...Object(u.a)(),plugins:[...Object(u.a)().plugins,Object(v.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:n,theme:t}=this.props;return Object(O.jsx)(f.a,{head:this.renderHead(),ref:this.handleRef,className:Object(c.a)(n.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(O.jsx)(b.b,{jss:this.state.jss,generateClassName:g,sheetsManager:this.state.sheetsManager,children:Object(O.jsx)(h.a,{theme:t,children:Object(d.cloneElement)(e,{container:this.state.container})})}):null})}}var N=Object(p.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(y);function F(e){const[n,t]=Object(d.useState)(e.currentTabIndex),{component:m,raw:u,iframe:b,className:h}=e;return Object(O.jsxs)(i.a,{className:Object(c.a)(h,"shadow"),children:[Object(O.jsx)(l.a,{position:"static",color:"default",className:"shadow-0",children:Object(O.jsxs)(o.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:n,onChange:function(e,n){t(n)},children:[m&&Object(O.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(r.a,{children:"remove_red_eye"})}),u&&Object(O.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(O.jsx)(r.a,{children:"code"})})]})}),Object(O.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(O.jsx)("div",{className:0===n?"flex flex-1 max-w-full":"hidden",children:m&&(b?Object(O.jsx)(N,{children:Object(O.jsx)(m,{})}):Object(O.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(O.jsx)(m,{})}))}),Object(O.jsx)("div",{className:1===n?"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})})})]})]})}F.defaultProps={currentTabIndex:0};var M=F},1370:function(e,n,t){"use strict";t.d(n,"a",(function(){return f}));var a=t(1192),l=t(1092),i=t(193),r=t(1072),s=t(65),o=t(1096),c=t(194),d=t(5),m=t(0),u=t(1337),b=t(1331),h=t(1);const p=Object(r.a)((e=>({root:{"& .fuse-chip-select__input":{color:e.palette.text.primary},"&.standard":{"& $placeholder":{},"& $valueContainer":{paddingTop:4}},"&.filled":{"& $placeholder":{left:12},"& $valueContainer":{paddingTop:24,paddingLeft:12},"& $chip":{border:"1px solid rgba(0, 0, 0, 0.12)"}},"&.outlined":{"& $placeholder":{left:12},"& $valueContainer":{paddingLeft:12,paddingTop:12}}},input:{display:"flex",padding:0,height:"auto",minHeight:56},valueContainer:{display:"flex",flexWrap:"wrap",flex:1,alignItems:"center",paddingBottom:4,paddingTop:12,minHeight:40},chip:{margin:"4px 4px 4px 0"},chipFocused:{backgroundColor:Object(s.emphasize)("light"===e.palette.type?e.palette.grey[300]:e.palette.grey[700],.08)},noOptionsMessage:{padding:"".concat(e.spacing(),"px ").concat(e.spacing(2),"px")},singleValue:{fontSize:16},placeholder:{position:"absolute",left:0,fontSize:16,margin:0},paper:{position:"absolute",zIndex:2,marginTop:e.spacing(),left:0,right:0},divider:{height:e.spacing(2)}})));function j(e){let{inputRef:n,...t}=e;return Object(h.jsx)("div",{ref:n,...t})}const v={Control:function(e){const n=p();return Object(h.jsx)(o.a,{fullWidth:!0,className:Object(d.a)(n.root,e.selectProps.textFieldProps.variant),required:e.selectProps.required,error:e.selectProps.error,InputProps:{inputComponent:j,inputProps:{className:n.input,inputRef:e.innerRef,children:e.children,...e.innerProps}},...e.selectProps.textFieldProps})},Menu:function(e){const n=p();return Object(h.jsx)(i.a,{square:!0,className:n.paper,...e.innerProps,children:e.children})},MultiValue:function(e){const n=p();return Object(h.jsx)(a.a,{tabIndex:-1,label:e.children,className:Object(d.a)(n.chip,{[n.chipFocused]:e.isFocused},e.data.class),onDelete:n=>{e.removeProps.onClick(),e.removeProps.onMouseDown(n)}})},NoOptionsMessage:function(e){const n=p();return Object(h.jsx)(c.a,{color:"textSecondary",className:n.noOptionsMessage,...e.innerProps,children:e.children})},Option:function(e){return Object(h.jsx)(l.a,{buttonRef:e.innerRef,selected:e.isFocused,component:"div",style:{fontWeight:e.isSelected?600:400},...e.innerProps,children:e.children})},Placeholder:function(e){const n=p();return Object(h.jsx)(c.a,{color:"textSecondary",className:n.placeholder,...e.innerProps,children:e.children})},SingleValue:function(e){const n=p();return Object(h.jsx)(c.a,{className:n.singleValue,...e.innerProps,children:e.children})},ValueContainer:function(e){const n=p();return Object(h.jsx)("div",{className:n.valueContainer,children:e.children})}};function x(e){const n=n=>{null===n&&(n=[]),e.onChange&&e.onChange(n)};return"fixed"===e.variant?Object(h.jsx)(u.a,{classNamePrefix:"fuse-chip-select",...e,components:v,onChange:n}):Object(h.jsx)(b.a,{classNamePrefix:"fuse-chip-select",...e,components:v,onChange:n})}var f=Object(m.memo)(x)},2454:function(e,n,t){"use strict";t.r(n),n.default='import {\n CheckboxFormsy,\n FuseChipSelectFormsy,\n RadioGroupFormsy,\n SelectFormsy,\n TextFieldFormsy\n} from \'@fuse/core/formsy\';\nimport Button from \'@material-ui/core/Button\';\nimport FormControlLabel from \'@material-ui/core/FormControlLabel\';\nimport MenuItem from \'@material-ui/core/MenuItem\';\nimport Radio from \'@material-ui/core/Radio\';\nimport Typography from \'@material-ui/core/Typography\';\nimport Formsy from \'formsy-react\';\nimport { useRef, useState } from \'react\';\n\nconst suggestions = [\'Sea\', \'Sky\', \'Forest\', \'Aerial\', \'Art\'].map(item => ({\n value: item,\n label: item\n}));\n\nfunction SimpleFormExample()\n{\n const [isFormValid, setIsFormValid] = useState(false);\n const formRef = useRef(null);\n\n function disableButton()\n {\n setIsFormValid(false);\n }\n\n function enableButton()\n {\n setIsFormValid(true);\n }\n\n function handleSubmit(model)\n {\n console.info(\'submit\', model);\n }\n\n return (\n <div className="max-w-sm">\n <Typography className="h2 mb-24">Example Formsy Form</Typography>\n <Formsy\n onValidSubmit={handleSubmit}\n onValid={enableButton}\n onInvalid={disableButton}\n ref={formRef}\n className="flex flex-col justify-center"\n >\n <TextFieldFormsy\n className="mb-16"\n type="text"\n name="name"\n label="Name"\n validations={{\n minLength: 4,\n }}\n validationErrors={{\n minLength: \'Min character length is 4\',\n }}\n required\n />\n\n <TextFieldFormsy\n className="my-16"\n type="text"\n name="email"\n label="Email"\n\t\t\t\t\tvalidations={{\n\t\t\t\t\t\tisEmail: true,\n\t\t\t\t\t}}\n\t\t\t\t\tvalidationErrors={{\n\t\t\t\t\t\tisEmail: "This is not a valid email"\n\t\t\t\t\t}}\n required\n />\n\n <TextFieldFormsy\n className="my-16"\n type="text"\n name="name-outlined"\n label="Name (Outlined)"\n validations={{\n minLength: 4\n }}\n validationErrors={{\n minLength: \'Min character length is 4\'\n }}\n required\n variant="outlined"\n />\n\n <TextFieldFormsy\n className="my-16"\n type="text"\n name="email-outlined"\n label="Email (Outlined)"\n\t\t\t\t\tvalidations={{\n\t\t\t\t\t\tisEmail: true,\n\t\t\t\t\t}}\n\t\t\t\t\tvalidationErrors={{\n\t\t\t\t\t\tisEmail: "This is not a valid email"\n\t\t\t\t\t}}\n required\n variant="outlined"\n />\n\n <TextFieldFormsy\n className="my-16"\n type="text"\n name="name-filled"\n label="Name (Filled)"\n validations={{\n minLength: 4\n }}\n validationErrors={{\n minLength: \'Min character length is 4\'\n }}\n required\n variant="filled"\n />\n\n <TextFieldFormsy\n className="my-16"\n type="text"\n name="email-filled"\n label="Email (Filled)"\n\t\t\t\t\tvalidations={{\n\t\t\t\t\t\tisEmail: true,\n\t\t\t\t\t}}\n\t\t\t\t\tvalidationErrors={{\n\t\t\t\t\t\tisEmail: "This is not a valid email"\n\t\t\t\t\t}}\n required\n variant="filled"\n />\n\n <RadioGroupFormsy\n className="my-16"\n name="gender"\n label="Gender"\n validations="equals:female"\n validationError="Only ladies are accepted"\n required\n >\n <FormControlLabel value="male" control={<Radio color="primary"/>} label="Male"/>\n <FormControlLabel value="female" control={<Radio color="primary"/>} label="Female"/>\n <FormControlLabel value="other" control={<Radio color="primary"/>} label="Other"/>\n <FormControlLabel value="disabled" disabled control={<Radio/>} label="(Disabled option)"/>\n </RadioGroupFormsy>\n\n <SelectFormsy\n className="my-16"\n name="related"\n label="Related with"\n value="none"\n validations="equals:none"\n validationError="Must be None"\n >\n <MenuItem value="none">\n <em>None</em>\n </MenuItem>\n <MenuItem value="hai">Hai</MenuItem>\n <MenuItem value="olivier">Olivier</MenuItem>\n <MenuItem value="kevin">Kevin</MenuItem>\n </SelectFormsy>\n\n <SelectFormsy\n className="my-16"\n name="related-outlined"\n label="Related with (Outlined)"\n value="none"\n validations="equals:none"\n validationError="Must be None"\n variant="outlined"\n >\n <MenuItem value="none">\n <em>None</em>\n </MenuItem>\n <MenuItem value="hai">Hai</MenuItem>\n <MenuItem value="olivier">Olivier</MenuItem>\n <MenuItem value="kevin">Kevin</MenuItem>\n </SelectFormsy>\n\n <SelectFormsy\n className="my-16"\n name="related-filled"\n label="Related with (Filled)"\n value="none"\n validations="equals:none"\n validationError="Must be None"\n variant="filled"\n >\n <MenuItem value="none">\n <em>None</em>\n </MenuItem>\n <MenuItem value="hai">Hai</MenuItem>\n <MenuItem value="olivier">Olivier</MenuItem>\n <MenuItem value="kevin">Kevin</MenuItem>\n </SelectFormsy>\n\n <CheckboxFormsy\n className="my-16"\n name="accept"\n value={false}\n label="Accept"\n\t\t\t\t\tvalidations={{\n\t\t\t\t\t\tequals: true,\n\t\t\t\t\t}}\n\t\t\t\t\tvalidationErrors={{\n\t\t\t\t\t\tequals: "You need to accept"\n\t\t\t\t\t}}\n />\n\n <FuseChipSelectFormsy\n className="my-16"\n name="tags"\n placeholder="Select multiple tags"\n textFieldProps={{\n label : \'Tags\',\n InputLabelProps: {\n shrink: true\n },\n variant : \'standard\'\n }}\n options={suggestions}\n isMulti\n validations={{minLength: 2}}\n validationErrors={{\n minLength: \'You need to select at least two\'\n }}\n required\n />\n\n <Button\n type="submit"\n variant="contained"\n color="primary"\n className="mx-auto mt-32 mb-80"\n aria-label="LOG IN"\n disabled={!isFormValid}\n >\n Can submit\n </Button>\n </Formsy>\n </div>\n );\n}\n\nexport default SimpleFormExample;\n'},2503:function(e,n,t){"use strict";t.r(n);var a=t(10),l=t(1096),i=t(1251),r=t(0),s=t(1);var o=Object(r.memo)(Object(i.b)((function(e){const n=a.a.pick(e,["autoComplete","autoFocus","children","className","defaultValue","disabled","FormHelperTextProps","fullWidth","id","InputLabelProps","inputProps","InputProps","inputRef","label","multiline","name","onBlur","onChange","onFocus","placeholder","required","rows","rowsMax","select","SelectProps","type","variant","color"]),{errorMessage:t}=e,i=e.value||"";return Object(s.jsx)(l.a,{...n,onChange:function(n){e.setValue(n.currentTarget.value),e.onChange&&e.onChange(n)},value:i,error:Boolean(!e.isPristine&&e.showRequired||t),helperText:t})}))),c=t(1165),d=t(1035),m=t(1094),u=t(1039);var b=Object(r.memo)(Object(i.b)((function(e){const n=a.a.pick(e,["checkedIcon","classes","color","disabled","disableRipple","icon","id","indeterminate","indeterminateIcon","inputProps","inputRef","onChange","variant"]),{errorMessage:t,value:l}=e;return Object(s.jsxs)(d.a,{error:Boolean(!e.isPristine&&e.showRequired||t),className:e.className,children:[Object(s.jsx)(m.a,{control:Object(s.jsx)(c.a,{...n,type:"checkbox",checked:l,onChange:function(n){e.setValue(n.target.checked),e.onChange&&e.onChange(n)}}),label:e.label}),Boolean(t)&&Object(s.jsx)(u.a,{children:t})]})}))),h=t(1036),p=t(1093);var j=Object(r.memo)(Object(i.b)((function(e){const n=a.a.pick(e,["children","name","onBlur","onChange","onKeyDown","variant","color"]),{errorMessage:t,value:l}=e;return Object(s.jsx)(d.a,{error:Boolean(!e.isPristine&&e.showRequired||t),className:e.className,children:Object(s.jsxs)(d.a,{component:"fieldset",required:e.required,error:Boolean(t),children:[e.label&&Object(s.jsx)(h.a,{component:"legend",children:e.label}),Object(s.jsx)(p.a,{...n,value:l||null,onChange:function(n,t){e.setValue(t),e.onChange&&e.onChange(n)}}),Boolean(t)&&Object(s.jsx)(u.a,{children:t})]})})}))),v=t(1030),x=t(548),f=t(1038),O=t(1045),g=t(1044);var y=Object(r.memo)(Object(i.b)((function(e){const n=a.a.pick(e,["autoWidth","children","classes","displayEmpty","input","inputProps","MenuProps","multiple","native","onChange","onClose","onOpen","open","renderValue","SelectDisplayProps","value","variant","color"]),{errorMessage:t,value:l}=e;return Object(s.jsxs)(d.a,{error:Boolean(!e.isPristine&&e.showRequired||t),className:e.className,variant:n.variant,children:[e.label&&Object(s.jsx)(f.a,{htmlFor:e.name,children:e.label}),Object(s.jsx)(g.a,{...n,value:l,onChange:function(n){e.setValue(n.target.value),e.onChange&&e.onChange(n)},input:function(){switch(n.variant){case"outlined":return Object(s.jsx)(O.a,{labelWidth:8*e.label.length,id:e.name});case"filled":return Object(s.jsx)(v.a,{id:e.name});default:return Object(s.jsx)(x.a,{id:e.name})}}()}),Boolean(t)&&Object(s.jsx)(u.a,{children:t})]})}))),N=t(1370),F=t(5);var M=Object(r.memo)(Object(i.b)((function(e){const n=a.a.pick(e,["children","classes","className","defaultValue","disabled","fullWidth","id","label","name","onBlur","onChange","onFocus","placeholder","required","textFieldProps","variant","isMulti","options","errorMessage","color"]),{errorMessage:t,value:l}=e;return Object(s.jsxs)(d.a,{error:Boolean(!e.isPristine&&e.showRequired||t),className:Object(F.a)(e.className,"z-10",e.showRequired?"required":"",e.showError?"error":null),variant:n.variant,children:[e.label&&Object(s.jsx)(f.a,{htmlFor:e.name,children:e.label}),Object(s.jsx)(N.a,{...n,value:l,onChange:function(n,t){e.multiple?e.setValue(t.map((e=>e.value))):e.setValue(n)},error:Boolean(!e.isPristine&&e.showRequired||t)}),Boolean(t)&&Object(s.jsx)(u.a,{children:t})]})}))),C=t(1098),E=t(1092),I=t(1120),q=t(194);const w=["Sea","Sky","Forest","Aerial","Art"].map((e=>({value:e,label:e})));n.default=function(){const[e,n]=Object(r.useState)(!1),t=Object(r.useRef)(null);return Object(s.jsxs)("div",{className:"max-w-sm",children:[Object(s.jsx)(q.a,{className:"h2 mb-24",children:"Example Formsy Form"}),Object(s.jsxs)(i.a,{onValidSubmit:function(e){console.info("submit",e)},onValid:function(){n(!0)},onInvalid:function(){n(!1)},ref:t,className:"flex flex-col justify-center",children:[Object(s.jsx)(o,{className:"mb-16",type:"text",name:"name",label:"Name",validations:{minLength:4},validationErrors:{minLength:"Min character length is 4"},required:!0}),Object(s.jsx)(o,{className:"my-16",type:"text",name:"email",label:"Email",validations:{isEmail:!0},validationErrors:{isEmail:"This is not a valid email"},required:!0}),Object(s.jsx)(o,{className:"my-16",type:"text",name:"name-outlined",label:"Name (Outlined)",validations:{minLength:4},validationErrors:{minLength:"Min character length is 4"},required:!0,variant:"outlined"}),Object(s.jsx)(o,{className:"my-16",type:"text",name:"email-outlined",label:"Email (Outlined)",validations:{isEmail:!0},validationErrors:{isEmail:"This is not a valid email"},required:!0,variant:"outlined"}),Object(s.jsx)(o,{className:"my-16",type:"text",name:"name-filled",label:"Name (Filled)",validations:{minLength:4},validationErrors:{minLength:"Min character length is 4"},required:!0,variant:"filled"}),Object(s.jsx)(o,{className:"my-16",type:"text",name:"email-filled",label:"Email (Filled)",validations:{isEmail:!0},validationErrors:{isEmail:"This is not a valid email"},required:!0,variant:"filled"}),Object(s.jsxs)(j,{className:"my-16",name:"gender",label:"Gender",validations:"equals:female",validationError:"Only ladies are accepted",required:!0,children:[Object(s.jsx)(m.a,{value:"male",control:Object(s.jsx)(I.a,{color:"primary"}),label:"Male"}),Object(s.jsx)(m.a,{value:"female",control:Object(s.jsx)(I.a,{color:"primary"}),label:"Female"}),Object(s.jsx)(m.a,{value:"other",control:Object(s.jsx)(I.a,{color:"primary"}),label:"Other"}),Object(s.jsx)(m.a,{value:"disabled",disabled:!0,control:Object(s.jsx)(I.a,{}),label:"(Disabled option)"})]}),Object(s.jsxs)(y,{className:"my-16",name:"related",label:"Related with",value:"none",validations:"equals:none",validationError:"Must be None",children:[Object(s.jsx)(E.a,{value:"none",children:Object(s.jsx)("em",{children:"None"})}),Object(s.jsx)(E.a,{value:"hai",children:"Hai"}),Object(s.jsx)(E.a,{value:"olivier",children:"Olivier"}),Object(s.jsx)(E.a,{value:"kevin",children:"Kevin"})]}),Object(s.jsxs)(y,{className:"my-16",name:"related-outlined",label:"Related with (Outlined)",value:"none",validations:"equals:none",validationError:"Must be None",variant:"outlined",children:[Object(s.jsx)(E.a,{value:"none",children:Object(s.jsx)("em",{children:"None"})}),Object(s.jsx)(E.a,{value:"hai",children:"Hai"}),Object(s.jsx)(E.a,{value:"olivier",children:"Olivier"}),Object(s.jsx)(E.a,{value:"kevin",children:"Kevin"})]}),Object(s.jsxs)(y,{className:"my-16",name:"related-filled",label:"Related with (Filled)",value:"none",validations:"equals:none",validationError:"Must be None",variant:"filled",children:[Object(s.jsx)(E.a,{value:"none",children:Object(s.jsx)("em",{children:"None"})}),Object(s.jsx)(E.a,{value:"hai",children:"Hai"}),Object(s.jsx)(E.a,{value:"olivier",children:"Olivier"}),Object(s.jsx)(E.a,{value:"kevin",children:"Kevin"})]}),Object(s.jsx)(b,{className:"my-16",name:"accept",value:!1,label:"Accept",validations:{equals:!0},validationErrors:{equals:"You need to accept"}}),Object(s.jsx)(M,{className:"my-16",name:"tags",placeholder:"Select multiple tags",textFieldProps:{label:"Tags",InputLabelProps:{shrink:!0},variant:"standard"},options:w,isMulti:!0,validations:{minLength:2},validationErrors:{minLength:"You need to select at least two"},required:!0}),Object(s.jsx)(C.a,{type:"submit",variant:"contained",color:"primary",className:"mx-auto mt-32 mb-80","aria-label":"LOG IN",disabled:!e,children:"Can submit"})]})]})}},2635:function(e,n,t){"use strict";t.r(n);var a=t(1130),l=t(1098),i=t(1090),r=t(194),s=t(1);n.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)(r.a,{variant:"h4",className:"",children:"Formsy"}),Object(s.jsxs)(l.a,{variant:"outlined",component:"a",href:"https://github.com/formsy/formsy-react",target:"_blank",role:"button",children:[Object(s.jsx)(i.a,{children:"link"}),Object(s.jsx)("span",{className:"mx-4",children:"Reference"})]})]}),Object(s.jsxs)(r.a,{className:"mb-16",component:"p",children:[Object(s.jsx)("code",{children:"formsy-react"})," is a form input builder and validator for React."]}),Object(s.jsx)(r.a,{className:"mb-16",component:"p",children:"HOCs are needed for formsy to work. We created for TextField, Select, RadioGroup, Checkbox under @fuse."}),Object(s.jsx)("hr",{}),Object(s.jsx)(r.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Example Usages"}),Object(s.jsx)(a.a,{className:"mb-64",component:t(2503).default,raw:t(2454)})]})}}}]);
Zerion Mini Shell 1.0