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

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

import Combo from "./Combo";

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

export const getTextField=({label, valueName, form, disabled})=>{
    return <Grid item lg={4} >
        <Grid container alignItems={"center"}>
            <Grid item xs={4} s={4} md={4} lg={4}
                    sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                {label}
            </Grid>
            <Grid item xs={7} s={7} md={7} lg={6}>
            {initField({
                    type:"text", 
                    valueName:valueName, 
                    form:form, 
                    disabled:disabled
                    })}
            </Grid>
        </Grid>
    </Grid>;
}

export const getPhoneField=({label, valueName, form, disabled})=>{
    return <Grid item lg={4}>
    <Grid container alignItems={"center"}>
        <Grid item xs={4} s={4} md={4} lg={4}
              sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
            {label}
        </Grid>
        <Grid item xs={2}>
        {initField({
                    type:"tel", 
                    valueName:valueName.code, 
                    form:form, 
                    disabled:disabled
                    })}
        </Grid>
        <Grid item xs={4}>
        {initField({
                    type:"tel", 
                    valueName:valueName.num, 
                    form:form, 
                    disabled:disabled
                    })}
        </Grid>
    </Grid>
</Grid>;
}


export const getAddressField=({label, valueName, form, disabled})=>{
    return <Grid item lg={4} >
    <Grid container alignItems={"top"}>
        <Grid item xs={4} s={4} md={4} lg={4}
              sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'top'}}>
                <Grid item lg={12}  sx={{alignItems: 'center'}}>{label}</Grid>
        </Grid> 
        <Grid item 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>
</Grid>;
}

export const getComboField=({label,dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props})=>{
    return <Grid item lg={4} >
            <Grid container alignItems={"center"}>
                <Grid item xs={4} s={4} md={4} lg={4}
                        sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                    {label}
                </Grid>
                <Grid item xs={7} s={7} md={7} lg={6}>
                    <Combo 
                        valueName={valueName}
                        disabled={disabled}
                        dataList={dataList}
                        form={form}
                        filterOptions={filterOptions}
                        getOptionLabel={getOptionLabel}
                        onInputChange={onInputChange}
                        onChange={onChange}
                        {...props}
                    />
                {/* <Autocomplete
                        id={key}
                        name={key}
                        disabled={disabled}
                        options={dataList}
                        value={form.values[key]|| null}
                        getOptionLabel={option =>  option?(displayField?option[displayField]:option):""}
                        onChange={(e, val) => {
                                console.log(val);
                                let v = val;
                                if(valueKey){
                                    v = val[valueKey];
                                }
                                form.setFieldValue(key, v);
                            }}
                        renderInput={params => (
                            <TextField
                                fullWidth
                                name={key}
                                {...params}
                            />
                        )}
                    /> */}
                </Grid>
            </Grid>
        </Grid>;
}

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

    return <TextField
        fullWidth
        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",
            },
          }}
    />
}