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

import {
    Grid, TextField, Stack
} 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' }}>
            {label}
        </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"}>
        <Grid item xs={12} md={3} lg={3}
            sx={{ display: 'flex', alignItems: 'center' }}>
            {label}
        </Grid>
        <Grid item xs={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' }}>
            {label}
        </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,
                props
            })}
        </Grid>
    </Grid>;
}

export const getPhoneField = ({ label, valueName, form, disabled }) => {
    form.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)
    }
    return <Grid container alignItems={"center"}>
        <Grid item xs={12} md={3} lg={3}
            sx={{ display: 'flex', alignItems: 'center' }}>
            {label}
        </Grid>
        <Grid item xs={12} md={6} lg={6}>
            <Stack direction="row">
                {initField({
                    type: "tel",
                    valueName: valueName.code,
                    form: form,
                    disabled: disabled,
                    width: '25%'
                })}
                {initField({
                    type: "tel",
                    valueName: valueName.num,
                    form: form,
                    disabled: disabled
                })}
            </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' }}>{label}</Grid>
            </Grid>
            <Grid item xs={12} md={6} lg={6}>
                <Grid item lg={12}>
                    {initField({
                        type: "text",
                        valueName: valueName[0],
                        form: form,
                        disabled: disabled
                    })}
                </Grid>
                <Grid item lg={12}>
                    {initField({
                        type: "text",
                        valueName: valueName[1],
                        form: form,
                        disabled: disabled
                    })}
                </Grid>
                <Grid item lg={12}>
                    {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"}>
            <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
                {label}
            </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, placeholder, inputProps, width, ...props }) => {
    let err = Boolean(form.errors[valueName]);

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