yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-24 05:34:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle remove label

Browse Source
This commit is contained in:
soupette 2019-07-05 15:24:30 +02:00
parent 832abba48a
commit def17631ca
7 changed files with 74 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListField.js
View File

@ -3,35 +3,53 @@ import PropTypes from 'prop-types';
import { Field, Wrapper } from './components';
import GrabIcon from '../../assets/images/icon_grab.svg';
import GrabIconBlue from '../../assets/images/icon_grab_blue.svg';
import ClickOverHint from '../../components/ClickOverHint';
import RemoveIcon from '../../components/DraggedRemovedIcon';
import EditIcon from '../../components/VariableEditIcon';
function ListField({ index, name, onRemove }) {
function ListField({ index, isSelected, name, onClick, onRemove }) {
const [isOver, setIsOver] = useState(false);
return (
<Wrapper
onMouseEnter={() => setIsOver(true)}
onMouseLeave={() => setIsOver(false)}
onClick={() => {
onClick(index);
}}
>
<div>{index + 1}.</div>
<Field>
<img src={GrabIcon} />
<Field isSelected={isSelected}>
<img src={isSelected ? GrabIconBlue : GrabIcon} />
<span>{name}</span>
<ClickOverHint show={isOver} />
<RemoveIcon isDragging={false} onRemove={() => onRemove(index)} />
{isSelected && !isOver ? (
<EditIcon />
) : (
<RemoveIcon
isDragging={isSelected && isOver}
onRemove={e => {
e.stopPropagation();
onRemove(index);
}}
/>
)}
</Field>
</Wrapper>
);
}
ListField.defaultProps = {
onClick: () => {},
onRemove: () => {},
};
ListField.propTypes = {
index: PropTypes.number.isRequired,
isSelected: PropTypes.bool.isRequired,
name: PropTypes.string.isRequired,
onClick: PropTypes.func,
onRemove: PropTypes.func,
};

4
packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/ListLayout.js
View File

@ -5,7 +5,7 @@ import pluginId from '../../pluginId';
import ListField from './ListField';
function ListLayout({ displayedData, onRemove }) {
function ListLayout({ displayedData, fieldToEditIndex, onClick, onRemove }) {
const handleRemove = index => {
if (displayedData.length > 1) {
onRemove(index);
@ -21,7 +21,9 @@ function ListLayout({ displayedData, onRemove }) {
<ListField
key={data}
index={index}
isSelected={fieldToEditIndex === index}
name={data}
onClick={onClick}
onRemove={handleRemove}
/>
))}

8
packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/actions.js
View File

@ -6,6 +6,7 @@ import {
ON_RESET,
ON_SUBMIT,
RESET_PROPS,
SET_LIST_FIELD_TO_EDIT_INDEX,
SUBMIT_SUCCEEDED,
} from './constants';
@ -57,6 +58,13 @@ export function resetProps() {
};
}
export function setListFieldToEditIndex(index) {
return {
type: SET_LIST_FIELD_TO_EDIT_INDEX,
index,
};
}
export function submitSucceeded() {
return {
type: SUBMIT_SUCCEEDED,

13
packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/components.js
View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled, { css } from 'styled-components';
const Wrapper = styled.div`
display: flex;
@ -32,6 +32,17 @@ const Field = styled.div`
margin-right: 10px;
margin-top: -1px;
}
${({ isSelected }) => {
if (isSelected) {
return css`
background: #e6f0fb !important;
border: 1px solid #aed4fb !important;
color: #007eff;
font-weight: 500;
`;
}
}}
`;
export { Wrapper, Field };

2
packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/constants.js
View File

@ -7,5 +7,7 @@ export const ON_REMOVE_LIST_FIELD =
export const ON_RESET = 'ContentManager/SettingViewModel/ON_RESET';
export const ON_SUBMIT = 'ContentManager/SettingViewModel/ON_SUBMIT';
export const RESET_PROPS = 'ContentManager/SettingViewModel/RESET_PROPS';
export const SET_LIST_FIELD_TO_EDIT_INDEX =
'ContentManager/SettingViewModel/SET_LIST_FIELD_TO_EDIT_INDEX';
export const SUBMIT_SUCCEEDED =
'ContentManager/SettingViewModel/SUBMIT_SUCCEEDED';

7
packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/index.js
View File

@ -30,6 +30,7 @@ import {
onSubmit,
onRemoveListField,
resetProps,
setListFieldToEditIndex,
} from './actions';
import reducer from './reducer';
import saga from './saga';
@ -46,6 +47,7 @@ function SettingViewModel({
history: { goBack },
initialData,
isLoading,
listFieldToEditIndex,
match: {
params: { name, settingType },
},
@ -55,6 +57,7 @@ function SettingViewModel({
onReset,
onSubmit,
resetProps,
setListFieldToEditIndex,
shouldToggleModalSubmit,
}) {
strapi.useInjectReducer({ key: 'settingViewModel', reducer, pluginId });
@ -192,6 +195,8 @@ function SettingViewModel({
<ListLayout
displayedData={getListDisplayedFields()}
availableData={getListRemainingFields()}
fieldToEditIndex={listFieldToEditIndex}
onClick={setListFieldToEditIndex}
onRemove={onRemoveListField}
/>
)}
@ -251,6 +256,7 @@ SettingViewModel.propTypes = {
onReset: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
resetProps: PropTypes.func.isRequired,
setListFieldToEditIndex: PropTypes.func.isRequired,
shouldToggleModalSubmit: PropTypes.bool.isRequired,
};
@ -265,6 +271,7 @@ export function mapDispatchToProps(dispatch) {
onReset,
onSubmit,
resetProps,
setListFieldToEditIndex,
},
dispatch
);

27
packages/strapi-plugin-content-manager/admin/src/containers/SettingViewModel/reducer.js
View File

@ -10,10 +10,12 @@ import {
ON_REMOVE_LIST_FIELD,
ON_RESET,
RESET_PROPS,
SET_LIST_FIELD_TO_EDIT_INDEX,
SUBMIT_SUCCEEDED,
} from './constants';
export const initialState = fromJS({
listFieldToEditIndex: 0,
initialData: fromJS({}),
isLoading: true,
modifiedData: fromJS({}),
@ -35,20 +37,31 @@ function settingViewModelReducer(state = initialState, action) {
const attrPath = ['modifiedData', 'layouts', 'list', action.index];
const attrToBeRemoved = state.getIn(attrPath);
if (attrToBeRemoved === defaultSortBy) {
const firstAttr = state.getIn(['modifiedData', 'layouts', 'list', 1]);
const firstAttr = state.getIn(['modifiedData', 'layouts', 'list', 1]);
return state
.removeIn(['modifiedData', 'layouts', 'list', action.index])
.updateIn(defaultSortByPath, () => firstAttr);
}
return state
.removeIn(['modifiedData', 'layouts', 'list', action.index])
.update('listFieldToEditIndex', () => {
if (action.index === state.get('listFieldToEditIndex')) {
return 0;
}
return state.removeIn(['modifiedData', 'layouts', 'list', action.index]);
return state.get('listFieldToEditIndex');
})
.updateIn(defaultSortByPath, () => {
if (attrToBeRemoved === defaultSortBy) {
return firstAttr;
}
return defaultSortBy;
});
}
case ON_RESET:
return state.update('modifiedData', () => state.get('initialData'));
case RESET_PROPS:
return initialState;
case SET_LIST_FIELD_TO_EDIT_INDEX:
return state.update('listFieldToEditIndex', () => action.index);
case SUBMIT_SUCCEEDED:
return state
.update('initialData', () => state.get('modifiedData'))