input updates

Author: NoelKova

packages/sn-controls-react/src/fieldcontrols/date-picker.tsx

@@ -35,6 +35,8 @@ const useStyles = makeStyles((theme: Theme) => {
   })
 })
 
+const disabledDateTimes: string[] = ['CreationDate', 'ModificationDate']
+
 const initialValueState = ({
   fieldValue,
   actionName,
@@ -78,6 +80,8 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
 
   const localeCode = locale?.code || window.navigator.language
 
+  const isDisabled = settings.ReadOnly || disabledDateTimes.includes(settings.Name)
+
   const dateFieldValue: Date = new Date(fieldValue as string)
 
   switch (actionName) {
@@ -97,7 +101,7 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 onChange={handleDateChange}
                 name={settings.Name}
                 id={settings.Name}
-                disabled={settings.ReadOnly}
+                disabled={isDisabled}
                 InputLabelProps={{ shrink: true }}
                 required={settings.Compulsory}
                 format="yyyy MMMM dd"
@@ -113,7 +117,7 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 onChange={handleDateChange}
                 name={settings.Name}
                 id={settings.Name}
-                disabled={settings.ReadOnly}
+                disabled={isDisabled}
                 InputLabelProps={{ shrink: true }}
                 required={settings.Compulsory}
                 format="yyyy MMMM dd hh:mm aaaa"

packages/sn-controls-react/src/fieldcontrols/textarea.tsx

@@ -1,7 +1,7 @@
 /**
  * @module FieldControls
  */
-import { TextField, Typography } from '@material-ui/core'
+import { FormHelperText, TextField, Typography } from '@material-ui/core'
 import { deepMerge } from '@sensenet/client-utils'
 import { LongTextFieldSetting } from '@sensenet/default-content-types'
 import React, { useState } from 'react'
@@ -29,23 +29,26 @@ export const Textarea: React.FC<ReactClientFieldSetting<LongTextFieldSetting>> =
     case 'edit':
     case 'new':
       return (
-        <TextField
-          variant="outlined"
-          rows={3}
-          autoFocus={props.autoFocus}
-          onChange={handleChange}
-          name={props.settings.Name}
-          id={props.settings.Name}
-          label={props.settings.DisplayName}
-          placeholder={props.settings.DisplayName}
-          value={value}
-          required={props.settings.Compulsory}
-          disabled={props.settings.ReadOnly}
-          multiline={true}
-          fullWidth={true}
-          helperText={props.hideDescription ? undefined : props.settings.Description}
-          InputLabelProps={{ shrink: true }}
-        />
+        <>
+          <label htmlFor={props.settings.Name} style={{ fontSize: '15px' }}>
+            {`${props.settings.DisplayName} (${props.settings.Name})`}
+          </label>
+          <TextField
+            variant="outlined"
+            autoFocus={props.autoFocus}
+            onChange={handleChange}
+            name={props.settings.Name}
+            id={props.settings.Name}
+            placeholder={props.settings.DisplayName}
+            value={value}
+            required={props.settings.Compulsory}
+            disabled={props.settings.ReadOnly}
+            multiline={true}
+            fullWidth={true}
+            helperText={props.hideDescription ? undefined : props.settings.Description}
+          />
+          {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}
+        </>
       )
     case 'browse':
     default: