Finalizing the field with the new props displayLabel & isRaw

get-focus · Nov 7, 2016 · 17908f0 · 17908f0
1 parent 5396a73
commit 17908f0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/behaviours/field.js b/src/behaviours/field.js
@@ -51,6 +51,7 @@ const fieldForBuilder = (props, textOnly = false, multiple = false, list = false
         if (get(definitions, `${entityPath}.${propertyName}`).validateOnBlur !== false) onInputBlur(propertyName, entityPath, rawInputValue);
         if (userDefinedOnBlur) userDefinedOnBlur();
     };
+    options.displayLabel === undefined ? options.displayLabel = true : options.displayLabel
     const fieldForLine = list ? fieldForListBuilder(entityPath, propertyName, false, false, options.displayLabel, options.isRaw)(props): {};
     const selectForLine = list ? fieldForListBuilder(entityPath, propertyName, true, false)(props): {};
     const textForLine = list ? fieldForListBuilder(entityPath, propertyName, false, true)(props): {};
@@ -99,6 +100,7 @@ const fieldForListBuilder = (entityPathList, propertyNameList, multiple=false, t
       const fieldError = fieldTab.error && fieldTab.error[index] ? fieldTab.error[index][propertyName] : undefined;
       return <FieldComponent {...field}
                 displayLabel={displayLabel}
+                index={index}
                 isRaw={isRaw}
                 error={fieldError}
                 textOnly={textOnly}

diff --git a/src/components/field.js b/src/components/field.js
@@ -8,14 +8,12 @@ import DefaultListComponent from './list';
 import DefaultTextComponent from './text';
 import DefaultSelectDisplayComponent from './select-display';
 
-const FieldLabelValueComponent = ({editing, isRequired, label, name, valid, ValueComponent, displayLabel, isRaw}) => (
+const FieldLabelValueComponent = ({editing, isRequired, label, name, valid, ValueComponent, displayLabel, isRaw, index}) => (
     <div data-focus='field' className='mdl-grid' data-mode={editing ? 'edit' : 'consult'} data-required={isRequired} data-valid={valid}>
-        {(displayLabel || displayLabel === undefined) &&
-            <div data-focus='field-label-container' className='mdl-cell mdl-cell--top mdl-cell--4-col' style={isRaw ? {width: 'initial'} : {}}>
-                <Label name={name} text={label} />
-            </div>
-        }
-        <div data-focus='field-value-container' className='mdl-cell mdl-cell--top mdl-cell--8-col'>
+        <div data-focus='field-label-container' className={((isRaw && index === undefined) || index != undefined) ? '' : 'mdl-cell mdl-cell--top mdl-cell--4-col'}>
+            {(displayLabel || (displayLabel === false && index != undefined) || displayLabel === undefined) && <Label name={name} text={label} />}
+        </div>
+        <div data-focus='field-value-container' className='mdl-cell mdl-cell--top mdl-cell--8-col' style={(index != undefined || isRaw) ? {marginTop: '0px'} : {}}>
             {ValueComponent}
             {editing && valid && <i className="material-icons">check</i>}
         </div>
@@ -26,7 +24,7 @@ FieldLabelValueComponent.displayName = 'FieldLabelValueComponent';
 
 class Field extends PureComponent {
     render() {
-        const {textOnly, multiple, list, fieldForLine, ...otherProps} = this.props;
+        const {textOnly, multiple, list, fieldForLine, index, ...otherProps} = this.props;
         const {
             TextComponent = DefaultTextComponent,
             DisplayComponent = DefaultDisplayComponent,
@@ -38,7 +36,7 @@ class Field extends PureComponent {
         const renderConsult = () => list ?  <ListComponent fieldForLine={fieldForLine} values={otherProps.formattedInputValue} {...otherProps}/> : (multiple ? <SelectComponentDisplay {...otherProps} /> : <DisplayComponent  {...otherProps} />);
         const renderEdit = () => list ? <ListComponent fieldForLine={fieldForLine} values={otherProps.formattedInputValue} {...otherProps}/> : (multiple ? <SmartSelectComponent SelectComponent={SelectComponent} {...otherProps}/> : <InputComponent {...otherProps}/>);
         const ValueComponent = otherProps.editing ? renderEdit() : renderConsult();
-        return textOnly ? ValueComponent : <FieldLabelValueComponent ValueComponent={ValueComponent} displayLabel={otherProps.displayLabel} isRaw={otherProps.isRaw} {...otherProps} />
+        return textOnly ? ValueComponent : <FieldLabelValueComponent ValueComponent={ValueComponent} displayLabel={otherProps.displayLabel} isRaw={otherProps.isRaw} index={index} {...otherProps} />
 }
 }
 Field.displayName = 'Field';