This commit is contained in:
soupette 2018-08-01 19:55:52 +02:00
parent 54936eb7dc
commit 3ed4c62f6c
5 changed files with 47 additions and 30 deletions

View File

@ -15,7 +15,7 @@ class InputToggle extends React.Component {
const target = {
name: this.props.name,
type: 'toggle',
value: e.target.id === 'on',
value: e.target.id.includes('on'),
};
this.props.onChange({ target });
@ -32,6 +32,7 @@ class InputToggle extends React.Component {
tabIndex,
value,
} = this.props;
const random = Math.floor(Math.random() * 1000);
return (
<div
@ -47,7 +48,7 @@ class InputToggle extends React.Component {
autoFocus={autoFocus}
disabled={disabled}
className={cn('btn', !value && styles.gradientOff)}
id="off"
id={`off_${random}`}
onClick={this.handleClick}
tabIndex={tabIndex}
type="button"
@ -57,7 +58,7 @@ class InputToggle extends React.Component {
<button
disabled={disabled}
className={cn('btn', value && styles.gradientOn)}
id="on"
id={`on_${random}`}
onClick={this.handleClick}
type="button"
>

View File

@ -183,7 +183,7 @@ class VariableDraggableAttr extends React.Component {
const { data, hoverIndex, index, isEditing, name } = this.props;
const isFullSize = classNames.bootstrap === 'col-md-12';
const showHint = data.type !== 'boolean';
const showCarret = hoverIndex === index && !isFullSize;
const showCarret = hoverIndex === index;
const carretStyle = (() => {
let style = { height: '30px' };
@ -202,9 +202,9 @@ class VariableDraggableAttr extends React.Component {
return <Carret style={carretStyle} />;
}
if (hoverIndex === index) {
style = { backgroundColor: 'red' };
}
// if (hoverIndex === index) {
// style = { : 'red' };
// }
return (
<div style={{ display: 'flex' }}>

View File

@ -31,6 +31,7 @@ import {
const initialState = fromJS({
addedElementName: null,
addedField: false,
draggedItemName: null,
formValidations: List([]),
initDragLine: -1,
@ -45,13 +46,19 @@ const initialState = fromJS({
});
const stateUpdater = (obj, array, keys) => obj.updateIn(['modifiedSchema', 'models', ...keys.split('.'), 'fields'], () => array);
const createManager = (obj, array, keys, dropIndex, layout) => new Manager(stateUpdater(obj, array, keys), array, keys, dropIndex, layout);
const getElementsOnALine = (manager, line) => {
const getElementsOnALine = (manager, line, list) => {
const firstElIndex = line === 0 ? 0 : manager.arrayOfEndLineElements[line - 1].index + 1;
const lastElIndex = manager.arrayOfEndLineElements[line].index + 1;
const lastElIndex = get(manager.arrayOfEndLineElements[line], 'index', list.size -1) + 1;
const elements = manager.getElementsOnALine(range(firstElIndex, lastElIndex));
return { elements, lastElIndex };
};
const createArrayOfLastEls = (manager, list) => {
const { name, index, bootstrapCol } = manager.getAttrInfos(list.size - 1);
const isFullSize = bootstrapCol === 12;
return manager.arrayOfEndLineElements.concat({ name, index, isFullSize });
};
function appReducer(state = initialState, action) {
switch (action.type) {
@ -90,10 +97,9 @@ function appReducer(state = initialState, action) {
newList = newList.delete(addedElementIndex);
}
//Layout reorder
const newManager = createManager(state, newList, action.keys, dropIndex, layout);
const { elements: previousStateLineEls } = getElementsOnALine(createManager(state, list, action.keys, dropIndex, layout), dropLine);
const { elements: currentStateLineEls } = getElementsOnALine(newManager, dropLine);
const { elements: previousStateLineEls } = getElementsOnALine(createManager(state, list, action.keys, dropIndex, layout), dropLine, list);
const { elements: currentStateLineEls } = getElementsOnALine(newManager, dropLine, newList);
if (dropLine !== initDragLine) {
const diff = difference(previousStateLineEls, currentStateLineEls);
@ -111,14 +117,11 @@ function appReducer(state = initialState, action) {
});
}
const nextManager = createManager(state, newList, action.keys, dropIndex, layout);
const lastListItem = nextManager.getAttrInfos(newList.size - 1);
const isLastItemFullSize = lastListItem.bootstrapCol === 12;
const newArrayOfLastLineElements = nextManager.arrayOfEndLineElements
.concat({ name: lastListItem.name, index: lastListItem.index, isFullSize: isLastItemFullSize });
const newArrayOfLastLineElements = createArrayOfLastEls(nextManager, newList);
// Array of element's index to remove from the new list
let addedElementsToRemove = [];
newArrayOfLastLineElements.forEach((item, i) => {
newArrayOfLastLineElements.forEach((item, i) => { // Should be a function in the manager
if (i < newArrayOfLastLineElements.length) {
const firstElementOnLine = i === 0 ? 0 : newArrayOfLastLineElements[i - 1].index + 1;
const lastElementOnLine = newArrayOfLastLineElements[i].index;
@ -131,29 +134,32 @@ function appReducer(state = initialState, action) {
}
}
});
newList = newList.filter((item, index) => { // Remove the unnecessary divs
const indexToKeep = addedElementsToRemove.indexOf(index) === -1;
return indexToKeep;
});
const lastManager = createManager(state, newList, action.keys, dropIndex, layout);
const lastArrayOfLastLineElements = lastManager.arrayOfEndLineElements;
const lastArrayOfLastLineElements = createArrayOfLastEls(lastManager, newList);
const lines = [];
lastArrayOfLastLineElements.forEach((item, i) => {
const { elements } = getElementsOnALine(lastManager, i);
const { elements } = getElementsOnALine(lastManager, i, newList);
lines.push(elements);
});
//Layout reorder
const reordered = lines.reduce((acc, curr) => {
const line = curr.sort((a) => a.includes('__col-md'));
return acc.concat(line);
}, []);
newList = List(flattenDeep(reordered));
// // Make sure all the lines are full
// // This step is needed when we create a line before a full size element like
// // The JSON input or the WYSIWYG
newList = createManager(state, List(flattenDeep(reordered)), action.keys, dropIndex, layout).getLayout();
}
return newList;
})
.update('draggedItemName', () => null)
@ -203,7 +209,7 @@ function appReducer(state = initialState, action) {
const dropLineBounds = { left: manager.getBound(false, action.hoverIndex), right: manager.getBound(true, action.hoverIndex) };
const hasMoved = state.get('hasMoved');
if (isFullSize) {
if (isFullSize && draggedItemIndex !== -1) {
const upwards = action.dragIndex > action.hoverIndex;
const indexToDrop = upwards ? get(dropLineBounds, 'left.index', 0) : get(dropLineBounds, 'right.index', list.size -1);
updateHoverIndex = false;
@ -214,7 +220,7 @@ function appReducer(state = initialState, action) {
.insert(indexToDrop, draggedItemName);
}
if (!hasMoved && !isFullSize) {
if (!hasMoved && !isFullSize && draggedItemIndex !== -1) {
const nodeBound = manager.getBound(true);
const currentLine = findIndex(arrayOfLastLineElements, ['index', nodeBound.index]);
initDragLine = currentLine;
@ -225,7 +231,6 @@ function appReducer(state = initialState, action) {
return list
.delete(action.dragIndex)
.insert(action.dragIndex, toAdd);
}
return list;
@ -283,7 +288,8 @@ function appReducer(state = initialState, action) {
return state
.updateIn(['modifiedSchema', 'models', ...action.keys.split('.')], list => {
return list.push(action.data);
});
})
.update('addedField', v => !v);
case ON_REMOVE:
return state.updateIn(['modifiedSchema', 'models', ...action.keys.split('.'), 'listDisplay'], list => {
@ -428,7 +434,6 @@ function appReducer(state = initialState, action) {
const manager = new Manager(state, list, action.keys, 0, layout);
const newList = manager.getLayout();
// return list;
return newList;
});
default:

View File

@ -25,6 +25,10 @@ const selectLocationState = () => {
};
};
const makeSelectAddedField = () =>
createSelector(selectGlobalDomain(), globalState =>
globalState.get('addedField')
);
const makeSelectHoverIndex = () =>
createSelector(selectGlobalDomain(), globalState =>
globalState.get('hoverIndex')
@ -45,6 +49,7 @@ const makeSelectSubmitSuccess = () =>
export {
selectGlobalDomain,
selectLocationState,
makeSelectAddedField,
makeSelectHoverIndex,
makeSelectLoading,
makeSelectModelEntries,

View File

@ -30,7 +30,7 @@ import {
onSubmit,
setLayout,
} from 'containers/App/actions';
import { makeSelectHoverIndex, makeSelectModifiedSchema , makeSelectSubmitSuccess } from 'containers/App/selectors';
import { makeSelectAddedField, makeSelectHoverIndex, makeSelectModifiedSchema , makeSelectSubmitSuccess } from 'containers/App/selectors';
import BackHeader from 'components/BackHeader';
import Input from 'components/InputsIndex';
import PluginHeader from 'components/PluginHeader';
@ -91,6 +91,10 @@ class SettingPage extends React.PureComponent {
if (prevDisplayedRelations.length === 0 && currentDisplayedRelations.length > 0 && prevState.shouldSelectRelation !== this.state.shouldSelectRelation) {
this.handleClickEditRelation(0);
}
if (prevProps.addedField !== this.props.addedField) {
this.props.setLayout(`${this.getPath()}.editDisplay`);
}
}
componentWillUnmount() {
@ -792,6 +796,7 @@ class SettingPage extends React.PureComponent {
SettingPage.defaultProps = {};
SettingPage.propTypes = {
addedField: PropTypes.bool.isRequired,
beginMove: PropTypes.func.isRequired,
endMove: PropTypes.func.isRequired,
history: PropTypes.object.isRequired,
@ -842,6 +847,7 @@ const mapDispatchToProps = (dispatch) => (
)
);
const mapStateToProps = createStructuredSelector({
addedField: makeSelectAddedField(),
hoverIndex: makeSelectHoverIndex(),
schema: makeSelectModifiedSchema(),
settingPage: makeSelectSettingPage(),