yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-04 11:02:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created fields picker

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-12-09 18:28:21 +01:00
parent bff450688b
commit 698181eaab
14 changed files with 275 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js
View File

@ -1,3 +1,5 @@
// TODO delete this file
import React, { memo, useCallback, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import { ButtonDropdown } from 'reactstrap';

1
packages/strapi-plugin-content-manager/admin/src/components/InputCheckbox/index.js
View File

@ -3,6 +3,7 @@
* InputCheckbox
*/
// TODO delete this file
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { Div, Label } from './components';

28
packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/StyledLink.js Normal file
View File

@ -0,0 +1,28 @@
import styled from 'styled-components';
import { Link } from 'react-router-dom';
const StyledLink = styled(Link)`
display: block;
width: 100%;
text-decoration: none;
color: #333740;
font-size: 13px;
svg {
margin-right: 10px;
vertical-align: middle;
}
&:hover {
text-decoration: none;
span {
color: #007eff;
}
svg {
g {
fill: #007eff;
}
}
}
`;
export default StyledLink;

8
packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/Wrapper.js Normal file
View File

@ -0,0 +1,8 @@
import styled from 'styled-components';
const Wrapper = styled.div`
padding: 10px 15px;
border-bottom: 1px solid rgb(247, 248, 248);
`;
export default Wrapper;

29
packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/ConfigureLink/index.js Normal file
View File

@ -0,0 +1,29 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { LayoutIcon, useGlobalContext } from 'strapi-helper-plugin';
import { FormattedMessage } from 'react-intl';
import Link from './StyledLink';
import Wrapper from './Wrapper';
const ConfigureLink = ({ slug }) => {
const { emitEvent } = useGlobalContext();
const handleClick = () => {
emitEvent('willEditListLayout');
};
return (
<Wrapper>
<Link to={`${slug}/configurations/list`} onClick={handleClick}>
<LayoutIcon />
<FormattedMessage id="app.links.configure-view" />
</Link>
</Wrapper>
);
};
ConfigureLink.propTypes = {
slug: PropTypes.string.isRequired,
};
export default memo(ConfigureLink);

15
packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Field/Wrapper.js Normal file
View File

@ -0,0 +1,15 @@
import styled from 'styled-components';
const Wrapper = styled.li`
padding: 0 14px;
height: 36px;
display: flex;
flex-direction: column;
justify-content: center;
&:hover {
cursor: pointer;
background-color: ${({ theme }) => theme.main.colors.mediumGrey};
}
`;
export default Wrapper;

24
packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Field/index.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Checkbox } from '@buffetjs/core';
import Wrapper from './Wrapper';
const Field = ({ name, onChange, value }) => {
const handleChange = ({ target: { name, value } }) => {
onChange({ name, value: !value });
};
return (
<Wrapper>
<Checkbox name={name} message={name} onChange={handleChange} value={value} />
</Wrapper>
);
};
Field.propTypes = {
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
value: PropTypes.bool.isRequired,
};
export default Field;

18
packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Fields/Wrapper.js Normal file
View File

@ -0,0 +1,18 @@
import React from 'react';
import styled from 'styled-components';
import { themePropTypes } from 'strapi-helper-plugin';
import { Text } from '@buffetjs/core';
const Wrapper = styled(props => <Text as="ul" fontSize="md" {...props} />)`
margin-bottom: 0;
padding: 9px 0 0 0;
min-width: 228px;
list-style-type: none;
background-color: ${({ theme }) => theme.main.colors.white};
`;
Wrapper.propTypes = {
...themePropTypes,
};
export default Wrapper;

29
packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Fields/index.js Normal file
View File

@ -0,0 +1,29 @@
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import Field from '../Field';
import Wrapper from './Wrapper';
const Fields = ({ displayedHeaders, items, onChange }) => {
console.log({ displayedHeaders, items });
const getInputValue = useCallback(
headerName => displayedHeaders.findIndex(({ name }) => name === headerName) !== -1,
[displayedHeaders]
);
return (
<Wrapper>
{items.map(header => (
<Field key={header} name={header} onChange={onChange} value={getInputValue(header)} />
))}
</Wrapper>
);
};
Fields.propTypes = {
displayedHeaders: PropTypes.array.isRequired,
items: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
};
export default Fields;

8
packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Header/Reset.js Normal file
View File

@ -0,0 +1,8 @@
import styled from 'styled-components';
import { Text } from '@buffetjs/core';
const Reset = styled(Text)`
cursor: pointer;
`;
export default Reset;

42
packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Header/index.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { Flex, Padded, Text } from '@buffetjs/core';
import { BaselineAlignement, useGlobalContext } from 'strapi-helper-plugin';
import { getTrad } from '../../../../utils';
import Reset from './Reset';
const Header = ({ onClick, onToggle }) => {
const { emitEvent } = useGlobalContext();
const handleClick = () => {
onClick();
onToggle();
emitEvent('willChangeListFieldsSettings');
};
return (
<BaselineAlignement top size="19px">
<Padded left right size="xs">
<Padded left right size="sm">
<Flex justifyContent="space-between">
<Text fontWeight="bold">
<FormattedMessage id={getTrad('containers.ListPage.displayedFields')} />
</Text>
<Reset color="mediumBlue" cursor="pointer" onClick={handleClick}>
<FormattedMessage id={getTrad('containers.Edit.reset')} />
</Reset>
</Flex>
</Padded>
</Padded>
</BaselineAlignement>
);
};
Header.propTypes = {
onClick: PropTypes.func.isRequired,
onToggle: PropTypes.func.isRequired,
};
export default Header;

16
packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/Wrapper.js Normal file
View File

@ -0,0 +1,16 @@
import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
margin-bottom: 6px;
justify-content: flex-end;
/* TODO: temporary until update in buffet.js */
> div {
> div {
left: auto;
right: 0 !important;
}
}
`;
export default Wrapper;

45
packages/strapi-plugin-content-manager/admin/src/containers/ListView/FieldPicker/index.js Normal file
View File

@ -0,0 +1,45 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { Flex, Padded, Picker } from '@buffetjs/core';
import { Carret } from '@buffetjs/icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Fields from './Fields';
import Header from './Header';
import Wrapper from './Wrapper';
import ConfigureLink from './ConfigureLink';
const FieldPicker = ({ displayedHeaders, items, onChange, onClickReset, slug }) => {
return (
<Wrapper>
<Picker
renderButtonContent={isOpen => (
<Flex>
<div>
<FontAwesomeIcon icon="cog" style={{ marginRighte: 10 }} />
</div>
<Padded left size="sm">
<Carret fill={isOpen ? '#007eff' : '#292b2c'} />
</Padded>
</Flex>
)}
renderSectionContent={onToggle => (
<>
<ConfigureLink slug={slug} />
<Header onClick={onClickReset} onToggle={onToggle} />
<Fields displayedHeaders={displayedHeaders} items={items} onChange={onChange} />
</>
)}
/>
</Wrapper>
);
};
FieldPicker.propTypes = {
displayedHeaders: PropTypes.array.isRequired,
items: PropTypes.array.isRequired,
onChange: PropTypes.func.isRequired,
onClickReset: PropTypes.func.isRequired,
slug: PropTypes.string.isRequired,
};
export default memo(FieldPicker);

12
packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js
View File

@ -24,13 +24,14 @@ import {
getRequestUrl,
getTrad,
} from '../../utils';
import DisplayedFieldsDropdown from '../../components/DisplayedFieldsDropdown';
// import DisplayedFieldsDropdown from '../../components/DisplayedFieldsDropdown';
import Container from '../../components/Container';
import CustomTable from '../../components/CustomTable';
import FilterPicker from '../../components/FilterPicker';
import Search from '../../components/Search';
import ListViewProvider from '../ListViewProvider';
import { AddFilterCta, FilterIcon, Wrapper } from './components';
import FieldPicker from './FieldPicker';
import Filter from './Filter';
import Footer from './Footer';
import {
@ -421,13 +422,20 @@ function ListView({
</div>
<div className="col-2">
<CheckPermissions permissions={pluginPermissions.collectionTypesConfigurations}>
<DisplayedFieldsDropdown
<FieldPicker
displayedHeaders={displayedHeaders}
items={allAllowedHeaders}
onChange={handleChangeListLabels}
onClickReset={onResetListHeaders}
slug={slug}
/>
{/* <DisplayedFieldsDropdown
displayedHeaders={displayedHeaders}
items={allAllowedHeaders}
onChange={handleChangeListLabels}
onClickReset={onResetListHeaders}
slug={slug}
/> */}
</CheckPermissions>
</div>
</div>