The portal doesn't allow sharing tsx files but here is the full code.
I think I just figured out what is happening, I just need to fix it now. The doSort parameter is changing from boolean to string somewhere and that is messing with the logic of the interface.
import React, { useContext } from 'react';
import ReactDOM from 'react-dom';
import {
AyxAppWrapper,
Box,
Autocomplete,
Grid,
Checkbox,
FormControl,
FormControlLabel,
InputLabel,
TextField,
RadioGroup,
Radio
} from '@alteryx/ui';
import { Context as UiSdkContext, DesignerApi } from '@alteryx/react-comms';
const App = () => {
const [model, handleUpdateModel] = useContext(UiSdkContext);
const generateData = data => {
return data.map(item => {
item.primary = item.name;
item.value = item.name;
item.label=item.name;
return item;
});
};
const handleNumChange = (e) => {
const newModel = { ...model };
newModel.Configuration.numRecords = e.target.value;
handleUpdateModel(newModel);
}
const handleSortChecked = (e) => {
const newModel = { ...model };
newModel.Configuration.doSort = e.target.checked;
handleUpdateModel(newModel);
console.log(model.Configuration.doSort)
}
const handleOrderChange = (e) => {
const newModel = { ...model };
newModel.Configuration.orderType = e.target.value;
handleUpdateModel(newModel);
}
const handleFieldSelect = (e,val) => {
const newModel = { ...model };
newModel.Configuration.fieldSelect = val.name;
handleUpdateModel(newModel);
console.log(model.Configuration.fieldSelect)
}
return (
<Box p={4}>
<Grid container>
<Grid item md={3} sm={6} xs={12}>
<FormControl>
<InputLabel htmlFor="numRecords">Select the number of records:</InputLabel>
<TextField type="number" id="numRecords" onChange={handleNumChange} value={model.Configuration.numRecords} defaultValue={model.Configuration.numRecords}/>
<Box marginTop={2}>
<FormControlLabel
control={
<Checkbox
checked={model.Configuration.doSort}
color="primary"
onChange={handleSortChecked}
value={model.Configuration.doSort}
defaultValue={model.Configuration.doSort}
/>
}
label="Sort Incoming Data (Optional)"
/>
</Box>
{
model.Configuration.doSort ?
<Box p={2}>
<InputLabel htmlFor="select">Select a field to order by:</InputLabel>
<Autocomplete
id="Autocomplete"
options={generateData(model.Meta?.fields[0][0].fields)}
getOptionLabel= {(option) => option.value ?? option}
getOptionSelected={(option, value) => option === value}
renderInput={(params) => (
<TextField
{...params}
fullWidth
id="ac-meta"
label="Meta Data"
margin="normal"
placeholder="Select Column..."
/>
)}
onChange={handleFieldSelect}
value={model.Configuration.fieldSelect}
defaultValue={model.Configuration.fieldSelect}
/>
<Box marginTop={2}>
<InputLabel htmlFor="radio">Select the order:</InputLabel>
<RadioGroup aria-label="Gender" name="gender1" onChange={handleOrderChange} value={model.Configuration.orderType} defaultValue={model.Configuration.orderType}>
<FormControlLabel control={<Radio />} label="Descending" value="desc" />
<FormControlLabel control={<Radio />} label="Ascending" value="asc" />
</RadioGroup>
</Box>
</Box>
: <Box p={2}></Box>
}
</FormControl>
</Grid>
</Grid>
</Box>
)
}
const Tool = () => {
return (
<DesignerApi messages={{}} defaultConfig={{ Configuration: { numRecords: 0, doSort: false, orderType: 'desc', fieldSelect: '' } }}>
<AyxAppWrapper>
<App />
</AyxAppWrapper>
</DesignerApi>
)
}
ReactDOM.render(
<Tool />,
document.getElementById('app')
);
