Skip to content
This repository was archived by the owner on May 25, 2021. It is now read-only.

Refactor the form renderer in edit mode #184

Merged
angelaraya merged 6 commits into from
Jan 10, 2020
Merged

Refactor the form renderer in edit mode #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6ac2796
Refactor
Jan 8, 2020
a42f20e
Clean up + Spinner
Jan 9, 2020
213adf1
Add individual autosave indicators to the components
Jan 9, 2020
e6a268d
Add Multiple grouping
Jan 10, 2020
6e5d315
Add inside group for multiples
Jan 10, 2020
b4a222b
Reset demo and packages
Jan 10, 2020
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
40 changes: 20 additions & 20 deletions ...Model/children/control-group.component.js → ...n/ControlGroup/control-group.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import React, { useState } from 'react';
import styled from 'styled-components';
import ErrorMessage from './Form/UI/ErrorMessage';
import ErrorMessage from '../Form/UI/ErrorMessage';

const Wrapper = styled.div`
display: flex;
align-items: center;
`;
type Props = {
id: string,
data: object,
updateData: Function,
mapper: object,
status: object
};

const ControlGroup = ({
export const ControlGroup = ({
component: Component,
fieldData,
savingComponent: SavingComponent,
Expand All @@ -32,20 +34,18 @@ const ControlGroup = ({
};

return (
<>
<Wrapper>
<Component {...{ ...fieldData, onBlur, ...rest }} />
{SavingComponent && savingProcess && (
<SavingComponent
inProgress={isSaving}
result={result}
setResult={setResult}
setSavingProcess={setSavingProcess}
/>
)}
</Wrapper>
<React.Fragment>
<Component {...{ ...fieldData, onBlur, ...rest }} />
{SavingComponent && savingProcess && (
<SavingComponent
inProgress={isSaving}
result={result}
setResult={setResult}
setSavingProcess={setSavingProcess}
/>
)}
<ErrorMessage {...{ valid, errorMessage }} />
</>
</React.Fragment>
);
};
export default ControlGroup;
3 changes: 3 additions & 0 deletions src/lib/components/FormModel/children/ControlGroup/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { ControlGroup} from './control-group.component';

export { ControlGroup };
100 changes: 40 additions & 60 deletions src/lib/components/FormModel/children/Form/UI/CheckBox/check-box.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,51 @@
import React, { useEffect, useState } from 'react';
import { FormModelConfig } from '@context';
import { FormModelUI } from '@constants';
import React, { useEffect, useState, useContext, Fragment } from 'react';
import { ThemeContext } from '@context';
import { UI } from '@constants';

type Props = {
formObject: any,
id: String,
autoSave: Boolean,
onSave: () => void,
modifyFormObject: (id: String, object: any) => void
id: string,
data: object,
updateData: (string, string) => void
};

const { UI_VALUE, UI_DEFAULT, UI_LABEL, UI_NAME } = FormModelUI;
export const CheckBox = (props: Props) => {
const { id, data, updateData } = props;
const { theme } = useContext(ThemeContext);

const CheckBox = ({
id,
modifyFormObject,
formObject,
onSave,
autoSave,
value,
...rest
}: Props) => {
let podValue;
try {
podValue = JSON.parse(formObject[id] || formObject[id] === '' ? formObject[id].value : value);
} catch (e) {
podValue = false;
}

const [checked, setChecked] = useState(podValue);

const label = rest[UI_LABEL];
const name = rest[UI_NAME];

const onChange = () => {
setChecked(!checked);
};
const [checked, setChecked] = useState(false);

useEffect(() => {
const obj = { ...rest, value: checked.toString() };
modifyFormObject(id, obj);
}, [checked]);

useEffect(() => {
if (autoSave) onSave();
}, [formObject]);
try {
const podValue = data[UI.VALUE];
if (podValue === 'false') {
setChecked(null);
} else {
setChecked(true);
}
} catch (e) {
setChecked(false);
}
}, [data[UI.VALUE]]);

const { [UI.LABEL]: label } = data;

const onChange = event => {
updateData(id, String(event.target.checked));
};

return (
<FormModelConfig.Consumer>
{({ theme }) => (
<div className="input-wrap">
<label htmlFor={name} className={theme && theme.inputCheckbox}>
<input
{...{
type: 'checkbox',
name,
id: name,
onChange,
checked
}}
/>
{label || 'Label'}
</label>
</div>
)}
</FormModelConfig.Consumer>
<Fragment>
<label htmlFor={id} className={theme.inputLabel}>
{label}
</label>
<input
{...{
type: 'checkbox',
id,
onChange,
checked
}}
/>
</Fragment>
);
};

export default CheckBox;
4 changes: 2 additions & 2 deletions src/lib/components/FormModel/children/Form/UI/CheckBox/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import CheckBox from './check-box.component';
import { CheckBox } from './check-box.component';

export default CheckBox;
export { CheckBox };
77 changes: 32 additions & 45 deletions src/lib/components/FormModel/children/Form/UI/ColorPicker/color-picker.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,31 @@
import React, { useState } from 'react';
import React, { useEffect, useContext, useState } from 'react';
import { ChromePicker } from 'react-color';

import { FormModelUI } from '@constants';
import { FormModelConfig } from '@context';
import { UI } from '@constants';
import { ThemeContext } from '@context';

import { PickerGroup, ColorSwatch, Cover, Popover } from './color-picker.styles';

const ColorPicker = ({
id,
modifyFormObject,
formObject,
value,
onSave,
autoSave,
onBlur,
...rest
}) => {
let actualValue = formObject[id] || formObject[id] === '' ? formObject[id].value : value;
type Props = {
id: string,
data: object,
updateData: (string, string) => void
};

const ColorPicker = (props: Props) => {
const { id, data, updateData } = props;
const { theme } = useContext(ThemeContext);

/* default value for the color */
if (!actualValue) actualValue = '#3498ef';
const { [UI.LABEL]: label, [UI.VALUE]: initialValue } = data;

const [pickerVisible, setPickerVisible] = useState(false);
const [color, setColor] = useState(actualValue);
const [color, setColor] = useState(initialValue);

const label = rest[FormModelUI.UI_LABEL] || '';
const handleChange = color => {
setColor(color.hex);
};
const handleChange = color => setColor(color.hex);

const handleChangeComplete = color => {
const obj = { ...rest, value: color.hex };
modifyFormObject(id, obj);
setColor(color.hex);
updateData(id, color.hex);
};

const handleClick = () => {
Expand All @@ -41,31 +34,25 @@ const ColorPicker = ({

const handleClose = () => {
setPickerVisible(false);

if (autoSave) onSave();
};

return (
<FormModelConfig.Consumer>
{({ theme }) => (
<PickerGroup className={theme && theme.colorPicker}>
<label htmlFor={id}>{label}</label>
<div>{color}</div>
<ColorSwatch color={color} onClick={handleClick} />
{pickerVisible ? (
<Popover>
<Cover onClick={handleClose} />
<ChromePicker
id
color={color}
onChangeComplete={handleChangeComplete}
onChange={handleChange}
/>
</Popover>
) : null}
</PickerGroup>
)}
</FormModelConfig.Consumer>
<PickerGroup className={theme.colorField}>
<label htmlFor={id}>{label}</label>
<div>{color}</div>
<ColorSwatch color={color} onClick={handleClick} />
{pickerVisible ? (
<Popover>
<Cover onClick={handleClose} />
<ChromePicker
id
color={color}
onChangeComplete={handleChangeComplete}
onChange={handleChange}
/>
</Popover>
) : null}
</PickerGroup>
);
};

Expand Down
1 change: 1 addition & 0 deletions src/lib/components/FormModel/children/Form/UI/ColorPicker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import ColorPicker from './color-picker.component';

export default ColorPicker;
export { ColorPicker };
20 changes: 12 additions & 8 deletions src/lib/components/FormModel/children/Form/UI/Comment/comment.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
import React from 'react';
import React, { useContext } from 'react';

import { UI } from '@constants';
import { ThemeContext } from '@context';

type Props = {
'ui:contents': any
data: object
};

const Comment = (props: Props) => {
// eslint-disable-next-line react/destructuring-assignment
const contents = props['ui:contents'];
return <p>{contents}</p>;
};
export const Comment = (props: Props) => {
const { data } = props;
const { [UI.VALUE]: comment } = data;

export default Comment;
const { theme } = useContext(ThemeContext);

return <p className={theme.comment}>{comment}</p>;
};
4 changes: 3 additions & 1 deletion src/lib/components/FormModel/children/Form/UI/Comment/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
export { default } from './comment.component';
import { Comment } from './comment.component';

export { Comment };
Loading