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

WIP Start integrating accordion

Browse Source
This commit is contained in:
Rémi de Juvigny 2021-09-13 18:44:34 +02:00
parent 897155ab24
commit 945b1b5455
2 changed files with 61 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
packages/plugins/users-permissions/admin/src/components/Permissions/index.js
View File

@ -1,44 +1,65 @@
import React, { memo, useCallback, useReducer } from 'react';
import { Padded } from '@buffetjs/core';
import React, { memo, useReducer } from 'react';
import { Accordion, AccordionToggle, AccordionContent, Box } from '@strapi/parts';
import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
import ListWrapper from './ListWrapper';
import PermissionRow from './PermissionRow';
// import PermissionRow from './PermissionRow';
import init from './init';
import { initialState, reducer } from './reducer';
const Permissions = () => {
const { modifiedData } = useUsersPermissions();
const [{ collapses }, dispatch] = useReducer(reducer, initialState, state =>
const [{ collapses }] = useReducer(reducer, initialState, state =>
init(state, modifiedData)
);
const handleOpenPlugin = useCallback(index => {
dispatch({
type: 'TOGGLE_COLLAPSE',
index,
});
}, []);
console.log(collapses);
// const handleOpenPlugin = useCallback(index => {
// dispatch({
// type: 'TOGGLE_COLLAPSE',
// index,
// });
// }, []);
return (
<ListWrapper>
<Padded left right size="sm">
{collapses.map((_, index) => {
const { isOpen, name } = collapses[index];
return (
<PermissionRow
key={name}
isOpen={isOpen}
isWhite={index % 2 === 1}
name={name}
onOpenPlugin={() => handleOpenPlugin(index)}
permissions={modifiedData[name]}
/>
);
})}
</Padded>
</ListWrapper>
<>
{collapses.map((collapse, index) => (
// eslint-disable-next-line react/no-array-index-key
<Accordion expanded={false} toggle={() => {}} id="lol" key={`accordion-${index}`}>
<AccordionToggle
title="title"
description="description"
variant={index % 2 ? "primary" : "secondary"}
/>
<AccordionContent>
<Box padding={6}>
<p>Accordion content</p>
</Box>
</AccordionContent>
</Accordion>
))}
</>
);
// return (
// <ListWrapper>
// <Padded left right size="sm">
// {collapses.map((_, index) => {
// const { isOpen, name } = collapses[index];
// return (
// <PermissionRow
// key={name}
// isOpen={isOpen}
// isWhite={index % 2 === 1}
// name={name}
// onOpenPlugin={() => handleOpenPlugin(index)}
// permissions={modifiedData[name]}
// />
// );
// })}
// </Padded>
// </ListWrapper>
// );
};
export default memo(Permissions);

18
packages/plugins/users-permissions/admin/src/components/UsersPermissions/index.js
View File

@ -4,6 +4,7 @@ import { Text, Grid, GridItem, H3, Stack } from '@strapi/parts';
import { useIntl } from 'react-intl';
import getTrad from '../../utils/getTrad';
import Policies from '../Policies';
import Permissions from '../Permissions';
import reducer, { initialState } from './reducer';
import { UsersPermissionsProvider } from '../../contexts/UsersPermissionsContext';
import init from './init';
@ -62,17 +63,20 @@ const UsersPermissions = forwardRef(({ permissions, routes, policies }, ref) =>
<UsersPermissionsProvider value={providerValue}>
<Grid gap={0} shadow="filterShadow" hasRadius background="neutral0">
<GridItem col={7} paddingTop={6} paddingBottom={6} paddingLeft={7} paddingRight={7}>
<Stack size={2}>
<H3>
{formatMessage({
<Stack size={4}>
<Stack size={2}>
<H3>
{formatMessage({
id: getTrad('Plugins.header.title'),
})}
</H3>
<Text as="p" textColor="neutral600">
{formatMessage({
</H3>
<Text as="p" textColor="neutral600">
{formatMessage({
id: getTrad('Plugins.header.description'),
})}
</Text>
</Text>
</Stack>
<Permissions />
</Stack>
</GridItem>
<Policies />