Pass in parameters to custom field when applying component to AutoField. about uniforms HOT 4 CLOSED

const choices = [
  {key: 'aws', label: 'AWS', checked: false, onChange: (event: React.ChangeEvent<HTMLInputElement>) => {console.log(event.target.checked)}},
  {key: 'gcp', label: 'GCP', checked: false, onChange: (event: React.ChangeEvent<HTMLInputElement>) => {console.log(event.target.checked)}}
];

// custom uniforms component
// <CheckboxList checkboxes={choices} />

export type VaultProps = HTMLFieldProps<string, HTMLDivElement> &
  CheckboxListProps;

export const sourceApplicationLocations: CheckboxListProps = {
  checkboxes: [
    {
      key: "aws",
      label: "AWS",
      checked: false,
      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
        console.log(event.target.checked);
      },
    },
    {
      key: "gcp",
      label: "GCP",
      checked: false,
      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
        console.log(event.target.checked);
      },
    },
  ],
};

const XOptions = connectField<CheckboxListProps, unknown>(CheckboxList);
export default XOptions;

import { Autocomplete, Box, Paper, TextField } from "@mui/material";
import { connectField, HTMLFieldProps } from "uniforms";

export type EnvironmentProps = HTMLFieldProps<string, HTMLDivElement> & {
  environments: string[];
};

function Environment({ value, label, environments }:EnvironmentProps) {

  const CustomPaper = (props: any) => {
    return <Paper elevation={8} {...props} />;
  };
  
  return (
    <Box sx={{ mt: 1, mb: 1 }}>
      <Autocomplete
        multiple
        id="selected-environments-outlined"
        // onChange={onSelectedValuesChange}
        options={environments.map((option) => option)}
        getOptionLabel={(option) => option} 
        isOptionEqualToValue={(a, b) => a === b}
        PaperComponent={CustomPaper}
        filterSelectedOptions
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label={label} // TODO: add props. This has no context
            placeholder={value} // TODO: add props. This has no context
            // onChange={handleOnChange}
          />
        )}
      />
    </Box>
  );
}

export default connectField(Environment);

export type EnvironmentsData = {
    globalPlatform: string[];
};

const schema: JSONSchemaType<EnvironmentsData> = {
    title: 'Environments Required',
    type: 'object',
    properties: {
        globalPlatform: {
            type: 'array',
            minItems: 0,
            items: {
              type: 'string'
            },
            uniforms: { component: EnvironmentField, value: "Desired Platforms", label: 'Global', environments: ['Dev', 'Stage', 'Prod', 'Mgmt'] }
        },
    },
    required: [],
};