Skip to content
This repository has been archived by the owner on Aug 27, 2018. It is now read-only.

[Field] Adding the possibility to show or hide the label #125

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

[Field] Adding the possibility to show or hide the label #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f91e3c7
Adding some checks for the hasLabel props type
GuenoleK Nov 3, 2016
57be8ad
Now using the textOnly props to display the list without the label
GuenoleK Nov 3, 2016
c3f0e14
Correct merge on field component
GuenoleK Nov 3, 2016
5b22566
Working on the listFor display
GuenoleK Nov 3, 2016
b3c5d1b
Finalizing the field with the new props displayLabel & isRaw
GuenoleK Nov 7, 2016
50287c1
Update listOnly
GuenoleK Nov 7, 2016
55c1b51
fixing the display align
GuenoleK Nov 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 63 additions & 64 deletions src/behaviours/field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@ import get from 'lodash/get';
const FIELD_CONTEXT_TYPE = {
fieldHelpers: PropTypes.object,
components: PropTypes.shape ({
InputComponent: PropTypes.func,
DisplayComponent: PropTypes.func,
SelectComponent: PropTypes.func,
SelectDisplayComponent: PropTypes.func
InputComponent: PropTypes.func,
DisplayComponent: PropTypes.func
})
};

Expand All @@ -25,11 +23,11 @@ const getFieldMetadata = (propertyName, entityPath, definitions, domains) => {
}

const getListFieldMetadata = (propertyName, entityPath = {}, definitions, domains) => {
const propertyDefinition = get(definitions,entityPath)
return {
isRequired: propertyDefinition.isRequired,
...domains[propertyDefinition.domain]
};
const propertyDefinition = get(definitions,entityPath)
return {
isRequired: propertyDefinition.isRequired,
...domains[propertyDefinition.domain]
};
}

const fieldForBuilder = (props, textOnly = false, multiple = false, list = false, fieldForListBuilder) => (propertyName, {FieldComponent = DefaultFieldComponent, redirectEntityPath, entityPath, onBlur: userDefinedOnBlur,onChange: userDefinedOnChange, ...options} = {}) => {
Expand All @@ -53,78 +51,81 @@ const fieldForBuilder = (props, textOnly = false, multiple = false, list = false
if (get(definitions, `${entityPath}.${propertyName}`).validateOnBlur !== false) onInputBlur(propertyName, entityPath, rawInputValue);
if (userDefinedOnBlur) userDefinedOnBlur();
};
const fieldForLine = list ? fieldForListBuilder(entityPath, propertyName)(props): {};
const fieldForLine = list ? fieldForListBuilder(entityPath, propertyName, false, false, options.isRaw, options.listOnly)(props): {};
const selectForLine = list ? fieldForListBuilder(entityPath, propertyName, true)(props): {};
const textForLine = list ? fieldForListBuilder(entityPath, propertyName, false, true)(props): {};

const finalEditing = options.editing !== undefined ? options.editing : editing;
return <FieldComponent {...field}
fieldForLine={fieldForLine}
textForLine={textForLine}
selectForLine={selectForLine}
multiple={multiple}
list={list}
textOnly={textOnly}
editing={finalEditing}
name={propertyName}
onBlur={onBlur}
onChange={onChange}
metadata={{ ...components, ...metadata}}
{...options}/>;
fieldForLine={fieldForLine}
textForLine={textForLine}
selectForLine={selectForLine}
multiple={multiple}
list={list}
textOnly={textOnly}
editing={finalEditing}
name={propertyName}
onBlur={onBlur}
onChange={onChange}
metadata={{ ...components, ...metadata}}
{...options}/>;
}


const fieldForListBuilder = (entityPathList, propertyNameList, multiple= false, textOnly= false) => {
const fieldForLineBuilder = (connectedComponentProps) => (propertyName, {FieldComponent = DefaultFieldComponent, entityPath, onBlur: userDefinedOnBlur,onChange: userDefinedOnChange, ...options} = {}, index) => {
const {fields, definitions, domains, onInputChange, onInputBlur, entityPathArray, editing, onInputBlurList} = connectedComponentProps;
const {onChange: optionsOnChange, ...otherOptions} = options;
const fieldTab = find(fields, {name: propertyNameList});
if(!isArray(fieldTab.rawInputValue) || !isArray(fieldTab.formattedInputValue) ){
throw new Error(`You must provide an array when calling listFor('${propertyName}') in the DEFAULT_DATA (reducer) or in the service`);
}
const fieldForListBuilder = (entityPathList, propertyNameList, multiple= false, textOnly= false, isRaw, listOnly) => {
const fieldForLineBuilder = (connectedComponentProps) => (propertyName, {FieldComponent = DefaultFieldComponent, entityPath, onBlur: userDefinedOnBlur,onChange: userDefinedOnChange, ...options} = {}, index) => {
const {fields, definitions, domains, onInputChange, onInputBlur, entityPathArray, editing, onInputBlurList} = connectedComponentProps;
const {onChange: optionsOnChange, ...otherOptions} = options;
const fieldTab = find(fields, {name: propertyNameList});
if(!isArray(fieldTab.rawInputValue) || !isArray(fieldTab.formattedInputValue) ){
throw new Error(`You must provide an array when calling listFor('${propertyName}') in the DEFAULT_DATA (reducer) or in the service`);
}

const metadata = getFieldMetadata(propertyName, entityPath, definitions, domains);
const field = {
rawInputValue : fieldTab.rawInputValue[index][propertyName],
formattedInputValue: fieldTab.formattedInputValue[index][propertyName]
}
const onChange = rawValue => {
fieldTab.rawInputValue[index][propertyName] = rawValue;
onInputChange(propertyNameList, entityPathList, fieldTab.rawInputValue);
if (userDefinedOnChange) userDefinedOnChange(rawValue);
}
const onBlur = () => {
if (get(definitions, `${entityPathList}.${propertyNameList}`).validateOnBlur !== false) onInputBlurList(propertyNameList, entityPathList, fieldTab.rawInputValue[index][propertyName], propertyName, index);
if (userDefinedOnBlur) userDefinedOnBlur();
}
const fieldError = fieldTab.error && fieldTab.error[index] ? fieldTab.error[index][propertyName] : undefined;
return <FieldComponent {...field}
error={fieldError}
textOnly={textOnly}
editing={editing}
multiple={multiple}
name={propertyName}
metadata={metadata}
onChange={onChange}
onBlur={onBlur}
fields={fields}
{...connectedComponentProps}
{...options} />;
}
return fieldForLineBuilder;
const metadata = getFieldMetadata(propertyName, entityPath, definitions, domains);
const field = {
rawInputValue : fieldTab.rawInputValue[index][propertyName],
formattedInputValue: fieldTab.formattedInputValue[index][propertyName]
}
const onChange = rawValue => {
fieldTab.rawInputValue[index][propertyName] = rawValue;
onInputChange(propertyNameList, entityPathList, fieldTab.rawInputValue);
if (userDefinedOnChange) userDefinedOnChange(rawValue);
}
const onBlur = () => {
if (get(definitions, `${entityPathList}.${propertyNameList}`).validateOnBlur !== false) onInputBlurList(propertyNameList, entityPathList, fieldTab.rawInputValue[index][propertyName], propertyName, index);
if (userDefinedOnBlur) userDefinedOnBlur();
}
const fieldError = fieldTab.error && fieldTab.error[index] ? fieldTab.error[index][propertyName] : undefined;
return <FieldComponent {...field}
error={fieldError}
textOnly={textOnly}
editing={editing}
multiple={multiple}
name={propertyName}
metadata={metadata}
listOnly={listOnly}
onChange={onChange}
onBlur={onBlur}
fields={fields}
isRaw={isRaw}
{...connectedComponentProps}
{...options} />;
}
return fieldForLineBuilder;

}

export function connect() {
return function connectComponent(ComponentToConnect) {
function FieldConnectedComponent({_behaviours, ...otherProps}, {fieldHelpers, components}) {
const props = {...otherProps, components}
const {InputComponent, DisplayComponent} = components;
const fieldFor = fieldHelpers.fieldForBuilder(props);
const textFor = fieldHelpers.fieldForBuilder(props, true);
const selectFor = fieldHelpers.fieldForBuilder(props, false, true);
const listFor = fieldHelpers.fieldForBuilder(props, false, false, true, fieldHelpers.fieldForListBuilder);
const behaviours = {connectedToFieldHelpers: true, ..._behaviours};
return <ComponentToConnect {...otherProps} _behaviours={behaviours} components={components} fieldFor={fieldFor} selectFor={selectFor} textFor={textFor} listFor={listFor}/>;
return <ComponentToConnect {...otherProps} _behaviours={behaviours} components={components} fieldFor={fieldFor} selectFor={selectFor} textFor={textFor} listFor={listFor}/>;
}
FieldConnectedComponent.displayName = `${ComponentToConnect.displayName}FieldConnected`;
FieldConnectedComponent.contextTypes = FIELD_CONTEXT_TYPE;
Expand All @@ -141,10 +142,8 @@ class FieldProvider extends PureComponent {
fieldForListBuilder
},
components: {
InputComponent : this.props.InputComponent,
DisplayComponent: this.props.DisplayComponent,
SelectComponent: this.props.SelectComponent,
SelectDisplayComponent: this.props.SelectDisplayComponent
InputComponent : this.props.InputComponent,
DisplayComponent: this.props.DisplayComponent
}
}
}
Expand Down
33 changes: 20 additions & 13 deletions src/components/field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,16 @@ import DefaultListComponent from './list';
import DefaultTextComponent from './text';
import DefaultSelectDisplayComponent from './select-display';

const FieldLabelValueComponent = ({editing, isRequired, label, name, valid, ValueComponent, rawValid}) => (
const FieldLabelValueComponent = ({editing, isRequired, label, name, valid, ValueComponent, displayLabel, isRaw, index, listOnly}) => (
<div data-focus='field' className='mdl-grid' data-mode={editing ? 'edit' : 'consult'} data-required={isRequired} data-valid={valid}>
<div data-focus='field-label-container' className='mdl-cell mdl-cell--top mdl-cell--4-col'>
<Label name={name} text={label} />
<div
data-focus='field-label-container'
className={(isRaw && index === undefined && !listOnly && label != undefined) ? ''
: (isRaw && index != undefined || isRaw && listOnly || isRaw && label === undefined) ? 'mdl-cell mdl-cell--top mdl-cell--2-col'
: 'mdl-cell mdl-cell--top mdl-cell--4-col'} style={(index != undefined || isRaw) ? {marginTop: '0px'} : {}}>
{(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'>
<div data-focus='field-value-container' className='mdl-cell mdl-cell--top mdl-cell--8-col' style={(index != undefined || isRaw) ? {marginTop: '0px'} : {}}>
{ValueComponent}
{editing && rawValid && <i className="material-icons">check</i>}
</div>
Expand All @@ -24,25 +28,28 @@ FieldLabelValueComponent.displayName = 'FieldLabelValueComponent';

class Field extends PureComponent {
render() {
const {textOnly, multiple, list, fieldForLine, ...otherProps} = this.props;
const {textOnly, multiple, list, fieldForLine, index, listOnly, ...otherProps} = this.props;
const {
TextComponent = DefaultTextComponent,
DisplayComponent = DefaultDisplayComponent,
InputComponent = DefaultInputComponent,
SelectComponent = DefaultSelectComponent,
SelectDisplayComponent = DefaultSelectDisplayComponent,
ListComponent = DefaultListComponent
} = otherProps.metadata;
const renderConsult = () => list ? <ListComponent fieldForLine={fieldForLine} values={otherProps.formattedInputValue} {...otherProps}/> : (multiple ? <SelectDisplayComponent {...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} {...otherProps} />
SelectComponentDisplay = DefaultSelectDisplayComponent,
ListComponent = DefaultListComponent } = otherProps.metadata;

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} index={index} listOnly={listOnly} {...otherProps} />
}
}

Field.displayName = 'Field';
Field.propTypes = {
error: PropTypes.string,
name: PropTypes.string.isRequired,
multiple: PropTypes.bool
multiple: PropTypes.bool,
displaLabel: PropTypes.bool,
isRaw: PropTypes.bool
};
export default Field;
2 changes: 1 addition & 1 deletion src/components/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {PropTypes} from 'react';


function List({ fieldForLine, selectForLine, textForLine, LineComponent, children, options, error, values, ...otherProps}) {
function List({fieldForLine, selectForLine, textForLine, LineComponent, children, options, error, values, ...otherProps}) {
const renderLine = () => {
return (values ? values.map((element, index) => {
// fieldFor which wrapp the index.
Expand Down