Skip to content

Commit

Permalink
feat: React Vanilla text cell password support
Browse files Browse the repository at this point in the history
The UI Schema option "format: 'password'" can be used to render a React
Vanilla text cell of type password.
  • Loading branch information
adammation authored and sdirix committed Jan 22, 2024
1 parent 01b08f0 commit a4ff972
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 1 deletion.
2 changes: 1 addition & 1 deletion packages/vanilla-renderers/src/cells/TextCell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const TextCell = (props: CellProps & VanillaRendererProps) => {
const appliedUiSchemaOptions = merge({}, config, uischema.options);
return (
<input
type='text'
type={appliedUiSchemaOptions.format === 'password' ? 'password' : 'text'}
value={data || ''}
onChange={(ev) =>
handleChange(path, ev.target.value === '' ? undefined : ev.target.value)
Expand Down
33 changes: 33 additions & 0 deletions packages/vanilla-renderers/test/renderers/TextCell.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -593,4 +593,37 @@ describe('Text cell', () => {
expect(input.maxLength).toBe(defaultMaxLength);
expect(input.size).toBe(defaultSize);
});

test('default type is text', () => {
const uischema: ControlElement = {
type: 'Control',
scope: '#/properties/name',
};
const core = initCore(fixture.schema, uischema, fixture.data);
wrapper = mount(
<JsonFormsStateProvider initState={{ core }}>
<TextCell schema={fixture.schema} uischema={uischema} path='name' />
</JsonFormsStateProvider>
);
const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
expect(input.type).toBe('text');
});

test('change type to password', () => {
const uischema: ControlElement = {
type: 'Control',
scope: '#/properties/name',
options: {
format: 'password',
},
};
const core = initCore(fixture.schema, uischema, fixture.data);
wrapper = mount(
<JsonFormsStateProvider initState={{ core }}>
<TextCell schema={fixture.schema} uischema={uischema} path='name' />
</JsonFormsStateProvider>
);
const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
expect(input.type).toBe('password');
});
});

0 comments on commit a4ff972

Please sign in to comment.