From f91e3c719db50557962221871e9a6f2f59345d32 Mon Sep 17 00:00:00 2001 From: GuenoleK Date: Thu, 3 Nov 2016 15:23:38 +0100 Subject: [PATCH 1/7] Adding some checks for the hasLabel props type --- src/components/field.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/field.js b/src/components/field.js index 6d16602..64bb6e1 100644 --- a/src/components/field.js +++ b/src/components/field.js @@ -43,6 +43,10 @@ Field.displayName = 'Field'; Field.propTypes = { error: PropTypes.string, name: PropTypes.string.isRequired, - multiple: PropTypes.bool + multiple: PropTypes.bool, + hasLabel: PropTypes.bool +}; +Field.defaultProps = { + hasLabel: true }; export default Field; From 57be8adbd1b77a3735e08d4bdfadd9d6ec0f440b Mon Sep 17 00:00:00 2001 From: GuenoleK Date: Thu, 3 Nov 2016 17:35:30 +0100 Subject: [PATCH 2/7] Now using the textOnly props to display the list without the label --- src/behaviours/field.js | 121 ++++++++++++++++++++-------------------- 1 file changed, 59 insertions(+), 62 deletions(-) diff --git a/src/behaviours/field.js b/src/behaviours/field.js index 112d9a4..0fa6600 100644 --- a/src/behaviours/field.js +++ b/src/behaviours/field.js @@ -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 }) }; @@ -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} = {}) => { @@ -59,59 +57,59 @@ const fieldForBuilder = (props, textOnly = false, multiple = false, list = false const finalEditing = options.editing !== undefined ? options.editing : editing; return ; + 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 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 ; - } - 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 ; + } + return fieldForLineBuilder; } @@ -119,12 +117,13 @@ 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 ; + return ; } FieldConnectedComponent.displayName = `${ComponentToConnect.displayName}FieldConnected`; FieldConnectedComponent.contextTypes = FIELD_CONTEXT_TYPE; @@ -141,10 +140,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 } } } From c3f0e14556f45d6dbd64d2031c1d4cdf91d2a470 Mon Sep 17 00:00:00 2001 From: GuenoleK Date: Thu, 3 Nov 2016 18:01:54 +0100 Subject: [PATCH 3/7] Correct merge on field component --- src/components/field.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/field.js b/src/components/field.js index 64bb6e1..6d16602 100644 --- a/src/components/field.js +++ b/src/components/field.js @@ -43,10 +43,6 @@ Field.displayName = 'Field'; Field.propTypes = { error: PropTypes.string, name: PropTypes.string.isRequired, - multiple: PropTypes.bool, - hasLabel: PropTypes.bool -}; -Field.defaultProps = { - hasLabel: true + multiple: PropTypes.bool }; export default Field; From 5b225669242e9252f6195f96fa17949c601801af Mon Sep 17 00:00:00 2001 From: GuenoleK Date: Thu, 3 Nov 2016 20:00:35 +0100 Subject: [PATCH 4/7] Working on the listFor display --- src/behaviours/field.js | 11 +++++++++-- src/components/field.js | 18 +++++++++++------- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/behaviours/field.js b/src/behaviours/field.js index 0fa6600..b274956 100644 --- a/src/behaviours/field.js +++ b/src/behaviours/field.js @@ -51,12 +51,13 @@ 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 selectForLine = list ? fieldForListBuilder(entityPath, propertyName, true)(props): {}; + 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): {}; const finalEditing = options.editing !== undefined ? options.editing : editing; return { +======= +const fieldForListBuilder = (entityPathList, propertyNameList, multiple=false, textOnly=false, displayLabel, isRaw) => { +>>>>>>> Working on the listFor display 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; @@ -97,6 +102,8 @@ const fieldForListBuilder = (entityPathList, propertyNameList, multiple= false, } const fieldError = fieldTab.error && fieldTab.error[index] ? fieldTab.error[index][propertyName] : undefined; return ( +const FieldLabelValueComponent = ({editing, isRequired, label, name, valid, ValueComponent, displayLabel, isRaw}) => (
-
-
+ {(displayLabel || displayLabel === undefined) && +
+
+ }
{ValueComponent} {editing && rawValid && check} @@ -36,13 +38,15 @@ class Field extends PureComponent { const renderConsult = () => list ? : (multiple ? : ); const renderEdit = () => list ? : (multiple ? : ); const ValueComponent = otherProps.editing ? renderEdit() : renderConsult(); - return textOnly ? ValueComponent : - } + return textOnly ? ValueComponent : +} } 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; From b3c5d1b2149c48c3a73eb3e090d7134abaac6443 Mon Sep 17 00:00:00 2001 From: GuenoleK Date: Mon, 7 Nov 2016 14:51:13 +0100 Subject: [PATCH 5/7] Finalizing the field with the new props displayLabel & isRaw --- src/behaviours/field.js | 2 ++ src/components/field.js | 16 +++++++--------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/behaviours/field.js b/src/behaviours/field.js index b274956..cd517c4 100644 --- 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): {}; @@ -103,6 +104,7 @@ const fieldForListBuilder = (entityPathList, propertyNameList, multiple=false, t const fieldError = fieldTab.error && fieldTab.error[index] ? fieldTab.error[index][propertyName] : undefined; return ( +const FieldLabelValueComponent = ({editing, isRequired, label, name, valid, ValueComponent, displayLabel, isRaw, index}) => (
- {(displayLabel || displayLabel === undefined) && -
-
- } -
+
+ {(displayLabel || (displayLabel === false && index != undefined) || displayLabel === undefined) &&
+
{ValueComponent} {editing && rawValid && check}
@@ -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 ? : (multiple ? : ); const renderEdit = () => list ? : (multiple ? : ); const ValueComponent = otherProps.editing ? renderEdit() : renderConsult(); - return textOnly ? ValueComponent : + return textOnly ? ValueComponent : } } Field.displayName = 'Field'; From 50287c14c86666f5f4442e1cb10cf1fab26c68d2 Mon Sep 17 00:00:00 2001 From: GuenoleK Date: Mon, 7 Nov 2016 20:03:13 +0100 Subject: [PATCH 6/7] Update listOnly --- src/behaviours/field.js | 14 +++----------- src/components/field.js | 26 +++++++++++++++----------- src/components/list.js | 4 ++-- 3 files changed, 20 insertions(+), 24 deletions(-) diff --git a/src/behaviours/field.js b/src/behaviours/field.js index cd517c4..a301dff 100644 --- a/src/behaviours/field.js +++ b/src/behaviours/field.js @@ -51,14 +51,12 @@ 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 fieldForLine = list ? fieldForListBuilder(entityPath, propertyName, false, false, 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 { -======= const fieldForListBuilder = (entityPathList, propertyNameList, multiple=false, textOnly=false, displayLabel, isRaw) => { ->>>>>>> Working on the listFor display 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; @@ -103,15 +97,13 @@ const fieldForListBuilder = (entityPathList, propertyNameList, multiple=false, t } const fieldError = fieldTab.error && fieldTab.error[index] ? fieldTab.error[index][propertyName] : undefined; return ( +const FieldLabelValueComponent = ({editing, isRequired, label, name, valid, ValueComponent, displayLabel, isRaw, index, listOnly}) => (
-
+
{(displayLabel || (displayLabel === false && index != undefined) || displayLabel === undefined) &&
@@ -24,21 +26,23 @@ FieldLabelValueComponent.displayName = 'FieldLabelValueComponent'; class Field extends PureComponent { render() { - const {textOnly, multiple, list, fieldForLine, index, ...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 ? : (multiple ? : ); - const renderEdit = () => list ? : (multiple ? : ); - const ValueComponent = otherProps.editing ? renderEdit() : renderConsult(); - return textOnly ? ValueComponent : -} + SelectComponentDisplay = DefaultSelectDisplayComponent, + ListComponent = DefaultListComponent } = otherProps.metadata; + + console.log(listOnly); + const renderConsult = () => list ? : (multiple ? : ); + const renderEdit = () => list ? : (multiple ? : ); + const ValueComponent = otherProps.editing ? renderEdit() : renderConsult(); + return textOnly ? ValueComponent : + } } + Field.displayName = 'Field'; Field.propTypes = { error: PropTypes.string, diff --git a/src/components/list.js b/src/components/list.js index 677b9a5..47226b9 100644 --- a/src/components/list.js +++ b/src/components/list.js @@ -1,8 +1,8 @@ import React, {PropTypes} from 'react'; -function List({ fieldForLine, selectForLine, textForLine, LineComponent, children, options, error, values, ...otherProps}) { - const renderLine = () => { +function List({fieldForLine, selectForLine, textForLine, LineComponent, children, options, error, values, ...otherProps}) { + const renderLine = () => { debugger return (values ? values.map((element, index) => { // fieldFor which wrapp the index. const lineFieldFor = (linePropertyName, lineOptions) => fieldForLine(linePropertyName, lineOptions, index) From 55c1b51d87583284c4849f853c6a19c09fb48f23 Mon Sep 17 00:00:00 2001 From: GuenoleK Date: Tue, 8 Nov 2016 11:51:39 +0100 Subject: [PATCH 7/7] fixing the display align --- src/behaviours/field.js | 5 +++-- src/components/field.js | 5 +++-- src/components/list.js | 2 +- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/behaviours/field.js b/src/behaviours/field.js index a301dff..7520e0c 100644 --- a/src/behaviours/field.js +++ b/src/behaviours/field.js @@ -51,7 +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(); }; - const fieldForLine = list ? fieldForListBuilder(entityPath, propertyName, false, false, options.listOnly)(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): {}; @@ -72,7 +72,7 @@ const fieldForBuilder = (props, textOnly = false, multiple = false, list = false } -const fieldForListBuilder = (entityPathList, propertyNameList, multiple=false, textOnly=false, displayLabel, isRaw) => { +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; @@ -107,6 +107,7 @@ const fieldForListBuilder = (entityPathList, propertyNameList, multiple=false, t onChange={onChange} onBlur={onBlur} fields={fields} + isRaw={isRaw} {...connectedComponentProps} {...options} />; } diff --git a/src/components/field.js b/src/components/field.js index 2643984..5103afb 100644 --- a/src/components/field.js +++ b/src/components/field.js @@ -12,7 +12,9 @@ const FieldLabelValueComponent = ({editing, isRequired, label, name, valid, Valu
+ 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) &&
@@ -35,7 +37,6 @@ class Field extends PureComponent { SelectComponentDisplay = DefaultSelectDisplayComponent, ListComponent = DefaultListComponent } = otherProps.metadata; - console.log(listOnly); const renderConsult = () => list ? : (multiple ? : ); const renderEdit = () => list ? : (multiple ? : ); const ValueComponent = otherProps.editing ? renderEdit() : renderConsult(); diff --git a/src/components/list.js b/src/components/list.js index 47226b9..3ebe875 100644 --- a/src/components/list.js +++ b/src/components/list.js @@ -2,7 +2,7 @@ import React, {PropTypes} from 'react'; function List({fieldForLine, selectForLine, textForLine, LineComponent, children, options, error, values, ...otherProps}) { - const renderLine = () => { debugger + const renderLine = () => { return (values ? values.map((element, index) => { // fieldFor which wrapp the index. const lineFieldFor = (linePropertyName, lineOptions) => fieldForLine(linePropertyName, lineOptions, index)