form
user_1617078
javascript
a month ago
9.4 kB
3
Indexable
Never
import React, {useEffect, useMemo} from "react"; import {Button, Col, Form, FormFeedback, FormGroup, Input, Label, Row,} from "reactstrap"; import PropTypes from "prop-types"; import DatePickerWrapper from "common/DatePickerWrapper"; import {Controller, useForm} from "react-hook-form"; import {getMaximumCharacterMessage, onlyAllowSomeSpecialCharacterError, requiredMessage,} from "common/validateMessage"; import {useHistory} from "react-router-dom"; const AlertForm = ({ mode, defaultData, onUpsertAlert, upsertLoading, }) => { const {control, errors, handleSubmit} = useForm({ mode: "onChange", reValidateMode: "onChange", defaultValues: useMemo(() => { return defaultData; }, [defaultData]), }); const history = useHistory(); const handleDateForm = (arg, callback) => { return callback(arg); }; useEffect(() => { console.log("defaultData", defaultData.viContent); }, [defaultData]); return ( <> <Row> {(mode === "create" || mode === "edit") && ( <div className="d-flex justify-content-end w-100 "> <Button className="mr-1" color="danger" onClick={() => { history.push("/alerts"); }} > <i className="fa fa-times mr-1"></i>Hủy </Button> <Button color="primary" onClick={handleSubmit(onUpsertAlert)} disabled={upsertLoading} > <i className="fa fa-save mr-1"></i>Lưu </Button> </div> )} </Row> <Form> {mode === "view" && ( <Row> <h2>{defaultData?.titleVn}</h2> </Row> )} {(mode === "edit" || mode === "create") && ( <Row> <FormGroup className="w-100 required"> <Label for="titleVn" check> Tiêu đề tiếng Việt </Label> <Controller name="titleVn" control={control} rules={{ required: "Vui lòng nhập Tiêu đề tiếng Việt", maxLength: { value: 255, message: getMaximumCharacterMessage(255), }, }} render={({onChange, value}) => ( <Input invalid={!!errors["titleVn"]} id="titleVn" name="titleVn" readOnly={mode === "view"} value={value} onChange={onChange} /> )} /> {errors["titleVn"]?.type && ( <FormFeedback>{errors["titleVn"]?.message}</FormFeedback> )} </FormGroup> </Row> )} {mode === "view" && ( <Row> <h2>{defaultData?.titleEn}</h2> </Row> )} {(mode === "edit" || mode === "create") && ( <Row> <FormGroup className="w-100 required"> <Label for="titleEn" check> Tiêu đề tiếng Anh </Label> <Controller name="titleEn" control={control} rules={{ required: "Vui lòng nhập Tiêu đề tiếng Anh", maxLength: { value: 255, message: getMaximumCharacterMessage(255), }, }} render={({onChange, value}) => ( <Input invalid={!!errors["titleEn"]} id="titleEn" name="titleEn" readOnly={mode === "view"} value={value} onChange={onChange} /> )} /> {errors["titleEn"]?.type && ( <FormFeedback>{errors["titleEn"]?.message}</FormFeedback> )} </FormGroup> </Row> )} <Row> <FormGroup className="w-100 required"> <Label for="viContent">Nội dung Tiếng Việt</Label> <Controller control={control} name="viContent" rules={{ required: "Vui lòng nhập Nội dung thông báo", pattern: { value: /^[\p{Letter}0-9-_/%*()#!:,.;?=+\s]*$/u, message: onlyAllowSomeSpecialCharacterError, }, maxLength: { value: 500, message: getMaximumCharacterMessage(500), }, }} render={({onChange, value}) => ( <Input invalid={!!errors["viContent"]} id="viContent" name="viContent" type="textarea" readOnly={mode === "view"} value={value} onChange={onChange} /> )} /> {errors["viContent"]?.type && ( <FormFeedback>{errors["viContent"]?.message}</FormFeedback> )} </FormGroup> </Row> <Row> <FormGroup className="w-100"> <Label for="enContent">Nội dung Tiếng Anh</Label> <Controller control={control} name="enContent" rules={{ pattern: { value: /^[\w/%*()#!:,.;?=+\s-]*$/u, message: onlyAllowSomeSpecialCharacterError + ", không chấp nhận Tiếng Việt", }, maxLength: { value: 500, message: getMaximumCharacterMessage(500), }, }} render={({onChange, value}) => ( <Input invalid={!!errors["enContent"]} id="enContent" name="enContent" type="textarea" readOnly={mode === "view"} value={value} onChange={onChange} /> )} /> {errors["enContent"]?.type && ( <FormFeedback>{errors["enContent"]?.message}</FormFeedback> )} </FormGroup> </Row> <Row> <FormGroup inline className="required"> <Label>Thời gian áp dụng</Label> <Row> <Col xl={6} className="mb-1"> <Controller control={control} name="fromDate" rules={{ required: requiredMessage, }} defaultValue={new Date()} render={({onChange, value}) => ( <DatePickerWrapper type="date" style={{maxWidth: 300}} readOnly={mode === "view"} selected={value} onChange={(e) => handleDateForm(e, onChange)} className={errors["fromDate"] ? "is-invalid" : ""} /> )} /> {errors["fromDate"]?.type && ( <FormFeedback className="invalid-feedback" style={{display: "block"}} > {errors["fromDate"]?.message} </FormFeedback> )} </Col> <Col xl={6}> <Controller control={control} name="toDate" defaultValue={new Date()} rules={{ required: requiredMessage, }} render={({onChange, value}) => ( <DatePickerWrapper type="date" style={{maxWidth: 300}} readOnly={mode === "view"} selected={value} onChange={onChange} className={errors["toDate"] ? "is-invalid" : ""} /> )} /> {errors["toDate"]?.type && ( <FormFeedback className="invalid-feedback" style={{display: "block"}} > {errors["toDate"]?.message} </FormFeedback> )} </Col> </Row> </FormGroup> </Row> </Form> </> ); }; AlertForm.propTypes = { mode: PropTypes.oneOf(["view", "edit", "create"]), setMode: PropTypes.func, defaultData: PropTypes.object, }; export default AlertForm;
Leave a Comment