I have created a vertical stepper in JSX using a custom renderer, however, the step labels are not working because the ‘t’ prop is coming back undefined. Any thoughts?
import React, { useState, useMemo } from 'react';
import merge from 'lodash/merge';
import { Button, Hidden, Stepper } from '@mui/material';
import PropTypes from 'prop-types';
import { and, categorizationHasCategory, isVisible, optionIs, rankWith, uiTypeIs } from '@jsonforms/core';
import { withJsonFormsLayoutProps, withTranslateProps } from '@jsonforms/react';
import { MaterialLayoutRenderer, withAjvProps } from './materialLayout';
//import MobileStepper from '@mui/material/MobileStepper';
export const materialCategorizationStepperTester = rankWith(
3,
and(uiTypeIs('Categorization'), categorizationHasCategory, optionIs('variant', 'stepper'))
);
export const MaterialCategorizationStepperLayoutRenderer = props => {
const [activeCategory, setActiveCategory] = useState(0);
const handleStep = step => {
setActiveCategory(step);
};
const { data, path, renderers, schema, uischema, visible, cells, config, ajv, t } = props;
console.log(props);
const categorization = uischema;
const appliedUiSchemaOptions = merge({}, config, uischema.options);
const buttonWrapperStyle = {
textAlign: 'right',
width: '100%',
margin: '1em auto'
};
const buttonNextStyle = {
float: 'right'
};
const buttonStyle = {
marginRight: '1em'
};
const categories = useMemo(
() => categorization.elements.filter(category => isVisible(category, data, undefined, ajv)),
[categorization, data, ajv]
);
const childProps = {
elements: categories[activeCategory].elements,
schema,
path,
direction: 'column',
visible,
renderers,
cells
};
const tabLabels = useMemo(() => {
console.log(t);
return categories.map(e => deriveLabelForUISchemaElement(e, t));
}, [categories, t]);
return (
<Hidden xsUp={!visible}>
<Stepper activeStep={activeCategory} orientation="vertical" nonLinear>
{categories.map((_, idx) => (
<Step key={tabLabels[idx]}>
<StepButton onClick={() => handleStep(idx)}>{tabLabels[idx]}</StepButton>
</Step>
))}
</Stepper>
<div>
<MaterialLayoutRenderer {...childProps} />
</div>
{appliedUiSchemaOptions.showNavButtons ? (
<div style={buttonWrapperStyle}>
<Button
style={buttonNextStyle}
variant="contained"
color="primary"
disabled={activeCategory >= categories.length - 1}
onClick={() => handleStep(activeCategory + 1)}>
Next
</Button>
<Button
style={buttonStyle}
color="secondary"
variant="contained"
disabled={activeCategory <= 0}
onClick={() => handleStep(activeCategory - 1)}>
Previous
</Button>
</div>
) : (
<></>
)}
</Hidden>
);
};
MaterialCategorizationStepperLayoutRenderer.propTypes = {
data: PropTypes.any,
path: PropTypes.any,
renderers: PropTypes.any,
schema: PropTypes.any,
uischema: PropTypes.any,
visible: PropTypes.any,
cells: PropTypes.any,
config: PropTypes.any,
ajv: PropTypes.any,
t: PropTypes.any
};
export default withAjvProps(withTranslateProps(withJsonFormsLayoutProps(MaterialCategorizationStepperLayoutRenderer)));