mirror of
https://github.com/strapi/strapi.git
synced 2025-12-28 07:33:17 +00:00
Fix bugs
This commit is contained in:
parent
54936eb7dc
commit
3ed4c62f6c
@ -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"
|
||||
>
|
||||
|
||||
@ -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' }}>
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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(),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user