PNSPS-frontend-MaterialUI/src/utils/FieldUtils.js

import {
    Grid, TextField, Stack, Typography
} from '@mui/material';

import Combo from "./Combo";

export const notNullFieldLabel = (label) => {
    return (<>{label}<span style={{ "color": "red" }}>*</span></>)
}


export const getDateField = ({ label, valueName, form, disabled }) => {
    return <Grid container alignItems={"center"}>
        <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
            <Typography variant="h5">{label}</Typography>
        </Grid>
        <Grid item xs={12} md={6} lg={6}>
            {initField({
                type: "date",
                valueName: valueName,
                form: form,
                disabled: disabled
            })}
        </Grid>
    </Grid>;
}

export const getTextField = ({ label, valueName, form, disabled }) => {
    return <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{mb:2}}>
        <Grid item xs={12} sm={12} md={3} lg={3}
            sx={{ display: 'flex', alignItems: 'center' }}>
            <Typography variant="h5">{label}</Typography>
        </Grid>
        <Grid item xs={12} sm={12} md={6} lg={6}>
            {initField({
                type: "text",
                valueName: valueName,
                form: form,
                disabled: disabled
            })}
        </Grid>
    </Grid>;
}

export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...props }) => {
    return <Grid container alignItems={"center"}>
        <Grid item xs={12} md={3} lg={3}
            sx={{ display: 'flex', alignItems: 'center' }}>
            <Typography variant="h5">{label}</Typography>
        </Grid>
        <Grid item xs={12} md={6} lg={6}>
            {initField({
                type: "text",
                valueName: valueName,
                form: form,
                disabled: disabled,
                multiline: true,
                row: 10,
                minRows: 4,
                maxRows: 4,
                inputProps: inputProps,
                InputProps: {
                    style: { minHeight:'42.5px', maxHeight: '50vh',height: 'auto'  },
                },
                props
            })}
        </Grid>
    </Grid>;
}

export const getPhoneField = ({ label, valueName, form, disabled }) => {

    return <Grid container alignItems={"center"} sx={{mb:2}}>
        <Grid item xs={12} md={3} lg={3}
            sx={{ display: 'flex', alignItems: 'center' }}>
            <Typography variant="h5">{label}</Typography>
        </Grid>
        <Grid item xs={12} md={6} lg={6}>
            <Stack direction="row">
                {initField({
                    type: "tel",
                    valueName: valueName.code,
                    form: form,
                    disabled: disabled,
                    width: '35%',
                    handleChange: (event) => {
                        const value = event.target.value;
                        const name = event.target.name;
                        if (value.match(/[^0-9]/)) {
                            return event.preventDefault();
                        }
                        if (valueName.code === name) form.setFieldValue(valueName.code, value)
                        if (valueName.num === name) form.setFieldValue(valueName.num, value)
                    }
                })}
                {initField({
                    type: "tel",
                    valueName: valueName.num,
                    form: form,
                    disabled: disabled,
                    handleChange: (event) => {
                        const value = event.target.value;
                        const name = event.target.name;
                        if (value.match(/[^0-9]/)) {
                            return event.preventDefault();
                        }
                        if (valueName.code === name) form.setFieldValue(valueName.code, value)
                        if (valueName.num === name) form.setFieldValue(valueName.num, value)
                    }
                })}
            </Stack>
        </Grid>
    </Grid>;
}


export const getAddressField = ({ label, valueName, form, disabled }) => {
    return <Grid container alignItems={"top"}>
        <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'top' }}>
            <Grid item lg={12} sx={{ alignItems: 'center' }}>
                <Typography variant="h5">{label}</Typography>
            </Grid>
        </Grid>
        <Grid item xs={12} md={6} lg={6}>
            <Grid item lg={12} sx={{mb:2}}>
                {initField({
                    type: "text",
                    valueName: valueName[0],
                    form: form,
                    disabled: disabled
                })}
            </Grid>
            <Grid item lg={12} sx={{mb:2}}>
                {initField({
                    type: "text",
                    valueName: valueName[1],
                    form: form,
                    disabled: disabled
                })}
            </Grid>
            <Grid item lg={12} sx={{mb:2}}>
                {initField({
                    type: "text",
                    valueName: valueName[2],
                    form: form,
                    disabled: disabled
                })}
            </Grid>
        </Grid>
    </Grid>;
}

export const getComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => {
    return <Grid container alignItems={"center"} sx={{mb:2}}>
        <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
        <Typography variant="h5">{label}</Typography>
        </Grid>
        <Grid item xs={12} md={6} lg={6}>
            <Combo
                valueName={valueName}
                disabled={disabled}
                dataList={dataList}
                form={form}
                filterOptions={filterOptions}
                getOptionLabel={getOptionLabel}
                onInputChange={onInputChange}
                onChange={onChange}
                {...props}
            />

        </Grid>
    </Grid>;
}

export const initField = ({ type, valueName, form, disabled, multiline, handleChange, placeholder, inputProps, InputProps, width, ...props }) => {
    let err = Boolean(form.errors[valueName]);

    return <TextField
        fullWidth
        multiline={multiline}
        id={valueName}
        name={valueName}
        type={type}
        placeholder={placeholder}
        inputProps={inputProps}
        InputProps={InputProps}
        error={err}
        helperText={form.errors[valueName] ? form.errors[valueName] : ''}
        onChange={handleChange ? handleChange : form.handleChange}
        value={form.values[valueName]}
        disabled={disabled}
        sx={{
            "& .MuiInputBase-input.Mui-disabled": {
                WebkitTextFillColor: "#000000",
                background: "#f8f8f8",
            },
            width: width ? width : '100%'
        }}
        {...props}
    />
}