feat: React Vanilla text cell password support

The UI Schema option "format: 'password'" can be used to render a React
Vanilla text cell of type password.

Author: adammation

packages/vanilla-renderers/src/cells/TextCell.tsx

@@ -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)

packages/vanilla-renderers/test/renderers/TextCell.test.tsx

@@ -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');
+  });
 });