feat(SchemaField): Add input elements for number, date-time, boolean …

…and enum types

src/__mocks__/resourceForm.ts

@@ -34,14 +34,21 @@ export const updatePerson = {
     default: {
       forename: 'Test',
       surname: 'Person',
-      date_of_birth: '1985-08-02T23:00:00.000Z'
+      date_of_birth: '1985-08-02T23:00:00.000Z',
+      credits: 33,
+      favourite_colour: 'blue'
     },
     properties: {
       forename: { type: 'string' },
       surname: { type: 'string' },
+      credits: { type: 'number' },
+      enabled: { type: 'boolean' },
       date_of_birth: {
         type: 'string',
         format: 'date-time'
+      },
+      favourite_colour: {
+        enum: ['red', 'green', 'blue']
       }
     }
   }

src/components/SchemaField.spec.tsx

@@ -127,3 +127,36 @@ describe('when `props.showLabel` is false', () => {
     expect(schemaField.find('FormItem').prop('label')).toBeUndefined();
   });
 });
+
+describe('when schema type is `number`', () => {
+  const schemaField = mount(<SchemaField name="credits" />, { context: updateContext });
+
+  it('renders an `<InputNumber/>` element', () => {
+    expect(schemaField.find('InputNumber').exists()).toBe(true);
+  });
+});
+
+describe('when schema type is `date-time`', () => {
+  const schemaField = mount(<SchemaField name="date_of_birth" />, { context: updateContext });
+
+  it('renders a `<DatePicker/>` element', () => {
+    expect(schemaField.find('PickerWrapper').exists()).toBe(true);
+  });
+});
+
+describe('when schema type is `boolean`', () => {
+  const schemaField = mount(<SchemaField name="enabled" />, { context: updateContext });
+
+  it('renders a `<Switch/>` element', () => {
+    expect(schemaField.find('Switch').exists()).toBe(true);
+  });
+});
+
+describe('when schema type is `enum`', () => {
+  const schemaField = mount(<SchemaField name="favourite_colour" />, { context: updateContext });
+
+  it('renders a `<Select/>` element containing possible values', () => {
+    expect(schemaField.find('Select').exists()).toBe(true);
+    expect(schemaField.find('Select')).toMatchSnapshot();
+  });
+});

src/components/SchemaField.tsx

@@ -6,8 +6,14 @@ import moment from 'moment';
 import AntForm from 'antd/lib/form';
 import Input from 'antd/lib/input';
 import 'antd/lib/input/style';
+import InputNumber from 'antd/lib/input-number';
+import 'antd/lib/input-number/style';
 import Switch from 'antd/lib/switch';
 import 'antd/lib/switch/style';
+import DatePicker from 'antd/lib/date-picker';
+import 'antd/lib/date-picker/style';
+import Select from 'antd/lib/select';
+import 'antd/lib/select/style';
 
 import { WrappedFormUtils, GetFieldDecoratorOptions } from 'antd/lib/form/Form';
 import { Property } from '@optics/hal-client/dist/Form';
@@ -59,9 +65,29 @@ export const SchemaField: React.StatelessComponent<Props> = (props, context: Con
   );
 }
 
-const inputElement = (property: Property): React.ReactNode => (
-  <Input />
-);
+const inputElement = (property: Property): React.ReactNode => {
+  if (property.type === 'number') {
+    return <InputNumber />;
+  }
+
+  if (property.format === 'date-time') {
+    return <DatePicker />;
+  }
+
+  if (property.type === 'boolean') {
+    return <Switch />
+  }
+
+  if (property.enum) {
+    const options = property.enum.map(value => (
+      <Select.Option key={value}>{titleCase(value)}</Select.Option>
+    ));
+
+    return <Select>{options}</Select>;
+  }
+
+  return <Input />;
+}
 
 const fieldDecoratorOptions =
   (props: Props, context: Context, element: React.ReactNode, label?: string): GetFieldDecoratorOptions => {