[form-builder] Support readOnly on datetime fields. Fixes #291 (#294)

sanity-io · Oct 20, 2017 · c6e35df · c6e35df
1 parent fe9528d
commit c6e35df
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 23 deletions.
diff --git a/packages/@sanity/form-builder/src/inputs/DateTime/DateTimeInput.js b/packages/@sanity/form-builder/src/inputs/DateTime/DateTimeInput.js
@@ -6,6 +6,7 @@ import 'react-datepicker/dist/react-datepicker-cssmodules.css' // eslint-disable
 import {uniqueId} from 'lodash'
 import React from 'react'
 import FormField from 'part:@sanity/components/formfields/default'
+import TextInput from 'part:@sanity/components/textinputs/default'
 import styles from './styles/DateTimeInput.css'
 import PatchEvent, {set, unset} from '../../PatchEvent'
 
@@ -33,12 +34,12 @@ type Props = {
     title: string,
     description: string,
     options?: SchemaOptions,
+    readOnly?: boolean,
   },
   onChange: PatchEvent => void,
   level: number
 }
 
-
 function parseOptions(options: SchemaOptions = {}): ParsedOptions {
   return {
     dateFormat: options.dateFormat || DEFAULT_DATE_FORMAT,
@@ -99,7 +100,7 @@ export default class DateInput extends React.Component<Props, State> {
   render() {
     const {value, type, level} = this.props
     const {inputValue} = this.state
-    const {title, description} = type
+    const {title, description, readOnly} = type
 
     const momentValue: ?Moment = value ? moment(value) : null
 
@@ -109,27 +110,36 @@ export default class DateInput extends React.Component<Props, State> {
 
     return (
       <FormField labelFor={this.inputId} label={title} level={level} description={description}>
-        <div className={styles.root}>
-          <DatePicker
-            {...options}
-            showMonthDropdown
-            showYearDropdown
-            todayButton={options.calendarTodayLabel}
-            selected={momentValue || undefined}
-            placeholderText={placeholder}
-            calendarClassName={styles.datepicker}
-            className={styles.input}
-            onChange={this.handleChange}
-            onChangeRaw={this.handleInputChange}
-            value={inputValue ? inputValue : (momentValue && momentValue.format(getFormat(options)))}
-            showTimeSelect
-            disabledKeyboardNavigation
-            dateFormat={options.dateFormat}
-            timeFormat={options.timeFormat}
-            timeIntervals={options.timeStep}
-            onBlur={this.handleBlur}
-          />
-        </div>
+        {readOnly
+          ? (
+            <TextInput
+              readOnly
+              value={(momentValue && momentValue.format(getFormat(options)))}
+            />
+          )
+          : (
+            <div className={styles.root}>
+              <DatePicker
+                {...options}
+                showMonthDropdown
+                showYearDropdown
+                todayButton={options.calendarTodayLabel}
+                selected={momentValue || undefined}
+                placeholderText={placeholder}
+                calendarClassName={styles.datepicker}
+                className={styles.input}
+                onChange={this.handleChange}
+                onChangeRaw={this.handleInputChange}
+                value={inputValue ? inputValue : (momentValue && momentValue.format(getFormat(options)))}
+                showTimeSelect
+                disabledKeyboardNavigation
+                dateFormat={options.dateFormat}
+                timeFormat={options.timeFormat}
+                timeIntervals={options.timeStep}
+                onBlur={this.handleBlur}
+              />
+            </div>
+          )}
       </FormField>
     )
   }

diff --git a/packages/test-studio/schemas/datetime.js b/packages/test-studio/schemas/datetime.js
@@ -35,6 +35,12 @@ export default {
         timeFormat: 'hh:mm'
       }
     },
+    {
+      name: 'aReadOnlyDateTime',
+      type: 'datetime',
+      title: 'A read only datetime',
+      readOnly: true
+    },
     {
       name: 'aDateTimeWithCustomDateAndTimeFormat',
       type: 'datetime',