{"version":3,"sources":["Demo/Forms/FormsValidation.js","App/components/AnimatedModal.js"],"names":["MaskWithValidation","props","_this","Object","E_next_react_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_1__","this","E_next_react_node_modules_babel_runtime_helpers_esm_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_3__","E_next_react_node_modules_babel_runtime_helpers_esm_getPrototypeOf__WEBPACK_IMPORTED_MODULE_4__","call","handleChange","e","checkError","onChange","inputRef","React","createRef","current","inputElement","react__WEBPACK_IMPORTED_MODULE_6___default","a","createElement","Fragment","react_text_mask__WEBPACK_IMPORTED_MODULE_13___default","assign","ref","filterProps","displayErrorMessage","displaySuccessMessage","BaseFormControl","FormsValidation","state","firstName","lastName","email","password","confirmPassword","phone","description","url","gear","basic","custom","chkBasic","chkCustom","checkMeSwitch","showModal","handleCheckboxChange","value","_this2","setState","E_next_react_node_modules_babel_runtime_helpers_esm_defineProperty__WEBPACK_IMPORTED_MODULE_0__","target","name","handleSubmit","formData","inputs","preventDefault","handleErrorSubmit","errorInputs","matchPassword","_this3","_hoc_Aux__WEBPACK_IMPORTED_MODULE_15__","react_bootstrap__WEBPACK_IMPORTED_MODULE_7__","react_bootstrap__WEBPACK_IMPORTED_MODULE_8__","react_bootstrap__WEBPACK_IMPORTED_MODULE_9__","Header","Title","as","Body","react_bootstrap4_form_validation__WEBPACK_IMPORTED_MODULE_12__","onSubmit","onErrorSubmit","react_bootstrap__WEBPACK_IMPORTED_MODULE_10__","Row","Group","Col","md","Label","htmlFor","id","placeholder","required","autoComplete","minLength","type","validator","isEmail","errorMessage","pattern","className","successMessage","mask","label","sm","multiline","rows","defaultValue","inline","fileType","maxFileSize","RadioGroup","valueSelected","RadioItem","react_bootstrap__WEBPACK_IMPORTED_MODULE_11__","_App_components_AnimatedModal__WEBPACK_IMPORTED_MODULE_16__","animation","modalClosed","Footer","onClick","Component","AnimatedModal","react__WEBPACK_IMPORTED_MODULE_5___default","_hoc_Aux__WEBPACK_IMPORTED_MODULE_7__","react_animated_modal__WEBPACK_IMPORTED_MODULE_6___default","visible","closemodal","children"],"mappings":"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","file":"static/js/111.109c3c1c.chunk.js","sourcesContent":["import React from 'react';\r\nimport {Row, Col, Card, Form, Button} from 'react-bootstrap';\r\nimport { ValidationForm, TextInput, BaseFormControl, SelectGroup, FileInput, Checkbox, Radio } from 'react-bootstrap4-form-validation';\r\nimport MaskedInput from 'react-text-mask';\r\nimport validator from 'validator';\r\n\r\nimport Aux from \"../../hoc/_Aux\";\r\nimport AnimatedModal from \"../../App/components/AnimatedModal\";\r\n\r\nclass MaskWithValidation extends BaseFormControl {\r\n    constructor(props){\r\n        super(props);\r\n        this.inputRef = React.createRef();\r\n    }\r\n\r\n    getInputRef(){\r\n        return this.inputRef.current.inputElement;\r\n    }\r\n\r\n    handleChange = (e) => {\r\n        this.checkError();\r\n        if(this.props.onChange) this.props.onChange(e);\r\n    };\r\n\r\n    render () {\r\n        return (\r\n            <React.Fragment>\r\n                <MaskedInput ref={this.inputRef} {...this.filterProps()} onChange={this.handleChange}/>\r\n                { this.displayErrorMessage() }\r\n                { this.displaySuccessMessage() }\r\n            </React.Fragment>\r\n        )\r\n    }\r\n}\r\n\r\nclass FormsValidation extends React.Component {\r\n    state = {\r\n        firstName: \"\",\r\n        lastName: \"\",\r\n        email: \"\",\r\n        password: \"\",\r\n        confirmPassword: \"\",\r\n        phone:\"\",\r\n        description: \"\",\r\n        url: \"\",\r\n        gear: \"\",\r\n        basic: \"\",\r\n        custom: \"\",\r\n        chkBasic: false,\r\n        chkCustom: false,\r\n        checkMeSwitch: false,\r\n        showModal: false\r\n    };\r\n\r\n    handleCheckboxChange = (e, value) => {\r\n        this.setState({\r\n            [e.target.name]: value\r\n        })\r\n    };\r\n\r\n    handleChange = (e) => {\r\n        this.setState({\r\n            [e.target.name]: e.target.value\r\n        })\r\n    };\r\n\r\n    handleSubmit = (e, formData, inputs) => {\r\n        e.preventDefault();\r\n        //alert(JSON.stringify(formData, null, 2));\r\n        this.setState({ showModal: true });\r\n    };\r\n\r\n    handleErrorSubmit = (e, formData, errorInputs) => {\r\n        //console.log(errorInputs);\r\n    };\r\n\r\n    matchPassword = (value) => {\r\n        return value && value === this.state.password;\r\n    };\r\n\r\n    render() {\r\n        return (\r\n            <Aux>\r\n                <Row>\r\n                    <Col>\r\n                        <Card>\r\n                            <Card.Header>\r\n                                <Card.Title as=\"h5\">Form Validation</Card.Title>\r\n                            </Card.Header>\r\n                            <Card.Body>\r\n                                <ValidationForm onSubmit={this.handleSubmit} onErrorSubmit={this.handleErrorSubmit}>\r\n                                    <Form.Row>\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"firstName\">First name</Form.Label>\r\n                                            <TextInput\r\n                                                name=\"firstName\"\r\n                                                id=\"firstName\"\r\n                                                placeholder=\"First Name\"\r\n                                                required value={this.state.firstName}\r\n                                                onChange={this.handleChange}\r\n                                                autoComplete=\"off\"\r\n                                            />\r\n                                        </Form.Group>\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"lastName\">Last name</Form.Label>\r\n                                            <TextInput\r\n                                                name=\"lastName\"\r\n                                                id=\"lastName\"\r\n                                                placeholder=\"Last Name\"\r\n                                                minLength=\"4\"\r\n                                                value={this.state.lastName}\r\n                                                onChange={this.handleChange}\r\n                                                autoComplete=\"off\"\r\n                                            />\r\n                                        </Form.Group>\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"email\">Email</Form.Label>\r\n                                            <TextInput\r\n                                                name=\"email\"\r\n                                                id=\"email\"\r\n                                                type=\"email\"\r\n                                                placeholder=\"Email Address\"\r\n                                                validator={validator.isEmail}\r\n                                                errorMessage={{validator:\"Please enter a valid email\"}}\r\n                                                value={this.state.email}\r\n                                                onChange={this.handleChange}\r\n                                                autoComplete=\"off\"\r\n                                            />\r\n                                        </Form.Group>\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"password\">Password</Form.Label>\r\n                                            <TextInput\r\n                                                name=\"password\"\r\n                                                id=\"password\"\r\n                                                type=\"password\"\r\n                                                placeholder=\"Password\"\r\n                                                required\r\n                                                pattern=\"(?=.*[A-Z]).{6,}\"\r\n                                                errorMessage={{required:\"Password is required\", pattern: \"Password should be at least 6 characters and contains at least one upper case letter\"}}\r\n                                                value={this.state.password}\r\n                                                onChange={this.handleChange}\r\n                                                autoComplete=\"off\"\r\n                                            />\r\n                                        </Form.Group>\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"confirmPassword\">Confirm Password</Form.Label>\r\n                                            <TextInput\r\n                                                name=\"confirmPassword\"\r\n                                                id=\"confirmPassword\"\r\n                                                type=\"password\"\r\n                                                placeholder=\"Confirm Password\"\r\n                                                required\r\n                                                validator={this.matchPassword}\r\n                                                errorMessage={{required:\"Confirm password is required\", validator: \"Password does not match\"}}\r\n                                                value={this.state.confirmPassword}\r\n                                                onChange={this.handleChange}\r\n                                                autoComplete=\"off\"\r\n                                            />\r\n                                        </Form.Group>\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"phone\">Phone</Form.Label>\r\n                                            <MaskWithValidation\r\n                                                name=\"phone\"\r\n                                                id=\"phone\"\r\n                                                placeholder=\"Contact Number\"\r\n                                                className=\"form-control\"\r\n                                                required\r\n                                                validator={(value) => value === \"(123) 456-7890\"}\r\n                                                value={this.state.phone}\r\n                                                onChange={this.handleChange}\r\n                                                successMessage=\"Looks good!\"\r\n                                                errorMessage={{validator: \"Please enter (123) 456-7890\"}}\r\n                                                mask={['(', /[1-9]/, /[0-9]/, /[0-9]/, ')', ' ', /[0-9]/, /[0-9]/, /[0-9]/, '-', /[0-9]/, /[0-9]/, /[0-9]/, /[0-9]/]}\r\n                                                autoComplete=\"off\"\r\n                                            />\r\n                                        </Form.Group>\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"url\">URL</Form.Label>\r\n                                            <TextInput\r\n                                                name=\"url\"\r\n                                                id=\"url\"\r\n                                                type=\"url\"\r\n                                                placeholder=\"Website\"\r\n                                                required\r\n                                                pattern=\"^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]@!\\$&'\\(\\)\\*\\+,;=.]+$\"\r\n                                                errorMessage={{required:\"URL is required\", pattern: 'URL is invalid.'}}\r\n                                                value={this.state.url}\r\n                                                onChange={this.handleChange}\r\n                                                autoComplete=\"off\"\r\n                                            />\r\n                                        </Form.Group>\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"gear\">Gear</Form.Label>\r\n                                            <SelectGroup\r\n                                                name=\"gear\"\r\n                                                id=\"gear\"\r\n                                                value={this.state.gear}\r\n                                                required\r\n                                                errorMessage=\"Please select a gear.\"\r\n                                                onChange={this.handleChange}>\r\n                                                <option value=\"\">Please select a gear...</option>\r\n                                                <optgroup label=\"Climbing\">\r\n                                                    <option value=\"pitons\">Pitons</option>\r\n                                                    <option value=\"cams\">Cams</option>\r\n                                                    <option value=\"nuts\">Nuts</option>\r\n                                                    <option value=\"bolts\">Bolts</option>\r\n                                                    <option value=\"stoppers\">Stoppers</option>\r\n                                                    <option value=\"sling\">Sling</option>\r\n                                                </optgroup>\r\n                                                <optgroup label=\"Skiing\">\r\n                                                    <option value=\"skis\">Skis</option>\r\n                                                    <option value=\"skins\">Skins</option>\r\n                                                    <option value=\"poles\">Poles</option>\r\n                                                </optgroup>\r\n                                            </SelectGroup>\r\n                                        </Form.Group>\r\n                                        <Form.Group as={Col} sm=\"12\">\r\n                                            <Form.Label htmlFor=\"description\">Description</Form.Label>\r\n                                            <TextInput\r\n                                                name=\"description\"\r\n                                                id=\"description\"\r\n                                                placeholder=\"About Us\"\r\n                                                multiline\r\n                                                required\r\n                                                value={this.state.description}\r\n                                                onChange={this.handleChange}\r\n                                                rows=\"3\"\r\n                                                autoComplete=\"off\"\r\n                                            />\r\n                                        </Form.Group>\r\n                                        <Form.Group as={Col} sm=\"6\" className=\"mb-5\">\r\n                                            <Form.Label htmlFor=\"description\">Switch</Form.Label>\r\n                                            <div className=\"switch\">\r\n                                                <Checkbox name=\"check-me\" label='' id=\"check-me\" defaultValue={this.state.checkMeSwitch} required inline onChange={this.handleCheckboxChange} />\r\n                                                <Form.Label>Check me</Form.Label>\r\n                                            </div>\r\n                                        </Form.Group>\r\n\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"upload_avatar\">Upload Avatar</Form.Label>\r\n                                            <div className=\"custom-file\">\r\n                                                <FileInput\r\n                                                    name=\"avatar\"\r\n                                                    id=\"avatar\"\r\n                                                    required\r\n                                                    fileType={[\"png\", \"jpg\", \"jpeg\"]}\r\n                                                    maxFileSize=\"100 kb\"\r\n                                                    errorMessage={\r\n                                                        { required: \"Please upload a file\",\r\n                                                            fileType:\"Only .png or .jpg file is allowed\",\r\n                                                            maxFileSize: \"Max file size is 100 kb\"\r\n                                                        }\r\n                                                    }/>\r\n                                            </div>\r\n                                        </Form.Group>\r\n\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"basic\">Radios</Form.Label>\r\n                                            <Radio.RadioGroup\r\n                                                name=\"basic\"\r\n                                                required\r\n                                                valueSelected={this.state.basic}\r\n                                                inline={false}\r\n                                                onChange={this.handleCheckboxChange}>\r\n                                                <Radio.RadioItem id=\"radio1\" label=\"Option one is this and that—be sure to include why it's great\" value=\"1\" />\r\n                                                <Radio.RadioItem id=\"radio2\" label=\"Option two can be something else and selecting it will deselect option one\" value=\"2\" />\r\n                                                <Radio.RadioItem id=\"radio3\" label=\"Option three is disabled\" value=\"3\" />\r\n                                            </Radio.RadioGroup>\r\n                                        </Form.Group>\r\n\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"custom\">Custom Radios</Form.Label>\r\n                                            <div className=\"custom-controls-stacked radio\">\r\n                                                <Radio.RadioGroup\r\n                                                    name=\"custom\"\r\n                                                    required\r\n                                                    valueSelected={this.state.custom}\r\n                                                    inline={false}\r\n                                                    onChange={this.handleChange}>\r\n                                                    <Radio.RadioItem id=\"radio4\" label=\"Option one is this and that—be sure to include why it's great\" value=\"1\" />\r\n                                                    <Radio.RadioItem id=\"radio5\" label=\"Option two can be something else and selecting it will deselect option one\" value=\"2\" />\r\n                                                    <Radio.RadioItem id=\"radio6\" label=\"Option three is disabled\" value=\"3\" />\r\n                                                </Radio.RadioGroup>\r\n                                            </div>\r\n                                        </Form.Group>\r\n\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"chkBasic\">Basic Checkbox</Form.Label>\r\n                                            <Checkbox name=\"chkBasic\" label=\"Check me out\" id=\"chkBasic\" value={this.state.chkBasic} required onChange={this.handleCheckboxChange} />\r\n                                        </Form.Group>\r\n\r\n                                        <Form.Group as={Col} md=\"6\">\r\n                                            <Form.Label htmlFor=\"chkCustom\">Custom Checkbox</Form.Label>\r\n                                            <div className=\"checkbox\">\r\n                                                <Checkbox name=\"chkCustom\" label=\"Check me\" id=\"chkCustom\" value={this.state.chkCustom} required onChange={this.handleCheckboxChange} />\r\n                                            </div>\r\n                                        </Form.Group>\r\n\r\n                                        <Form.Group as={Col} sm={12} className=\"mt-3\">\r\n                                            <Button type=\"submit\">Submit</Button>\r\n                                        </Form.Group>\r\n                                    </Form.Row>\r\n                                </ValidationForm>\r\n                                <AnimatedModal animation='slideInDown' showModal={this.state.showModal} modalClosed={() => this.setState({ showModal: false })}>\r\n                                    <Card>\r\n                                        <Card.Header className=\"bg-c-purple\">\r\n                                            <Card.Title as='h5'>User Information</Card.Title>\r\n                                        </Card.Header>\r\n                                        <Card.Body>\r\n                                            <ul>\r\n                                                <li><strong>Full Name:</strong> {this.state.firstName} {this.state.lastName}</li>\r\n                                                <li><strong>Email:</strong> {this.state.email}</li>\r\n                                                <li><strong>Password:</strong> Yes</li>\r\n                                                <li><strong>Phone:</strong> {this.state.phone}</li>\r\n                                                <li><strong>Website:</strong> {this.state.url}</li>\r\n                                                <li><strong>Gear:</strong> {this.state.gear}</li>\r\n                                                <li><strong>About:</strong> {this.state.description}</li>\r\n                                            </ul>\r\n                                        </Card.Body>\r\n                                        <Card.Footer className=\"text-center\">\r\n                                            <button onClick={() => this.setState({ showModal: false })} className=\"btn btn-theme2 md-close\">Close Me!!</button>\r\n                                        </Card.Footer>\r\n                                    </Card>\r\n                                </AnimatedModal>\r\n                            </Card.Body>\r\n                        </Card>\r\n                    </Col>\r\n                </Row>\r\n            </Aux>\r\n        );\r\n    }\r\n}\r\n\r\nexport default FormsValidation;","import React from 'react';\r\nimport Modal from \"react-animated-modal\";\r\n\r\nimport Aux from \"../../hoc/_Aux\";\r\n\r\nclass AnimatedModal extends React.Component {\r\n\r\n    render() {\r\n        return (\r\n            <Aux>\r\n                <Modal\r\n                    visible={this.props.showModal}\r\n                    closemodal={this.props.modalClosed}\r\n                    type={this.props.animation}\r\n                >\r\n                    {this.props.children}\r\n                </Modal>\r\n            </Aux>\r\n        );\r\n    }\r\n}\r\n\r\nexport default AnimatedModal;"],"sourceRoot":""}