yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-20 14:00:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14929 from strapi/fix/configure-the-view-cm-break

Browse Source 
CM: Fix ToggleInput wrapping for configure the view
This commit is contained in:
Gustav Hansen 2022-11-18 17:01:14 +01:00 committed by GitHub
commit 9ea56017f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 1000 additions and 979 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js
View File

@ -1,92 +1,95 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { Flex } from '@strapi/design-system/Flex'; import { Box } from '@strapi/design-system/Box';
import { Grid, GridItem } from '@strapi/design-system/Grid'; import { Grid, GridItem } from '@strapi/design-system/Grid';
import { Select, Option } from '@strapi/design-system/Select'; import { Select, Option } from '@strapi/design-system/Select';
import { ToggleInput } from '@strapi/design-system/ToggleInput'; import { ToggleInput } from '@strapi/design-system/ToggleInput';
import { Box } from '@strapi/design-system/Box'; import { Stack } from '@strapi/design-system/Stack';
import { Typography } from '@strapi/design-system/Typography'; import { Typography } from '@strapi/design-system/Typography';
import { getTrad } from '../../../utils'; import { getTrad } from '../../../utils';
const FlexGap = styled(Flex)`
gap: ${({ theme }) => theme.spaces[4]};
`;
const Settings = ({ modifiedData, onChange, sortOptions }) => { const Settings = ({ modifiedData, onChange, sortOptions }) => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const { settings, metadatas } = modifiedData; const { settings, metadatas } = modifiedData;
return ( return (
<> <Stack spacing={4}>
<Box paddingBottom={4}> <Typography variant="delta" as="h2">
<Typography variant="delta" as="h2"> {formatMessage({
{formatMessage({ id: getTrad('containers.SettingPage.settings'),
id: getTrad('containers.SettingPage.settings'), defaultMessage: 'Settings',
defaultMessage: 'Settings', })}
})} </Typography>
</Typography>
</Box> <Stack horizontal justifyContent="space-between" spacing={4}>
<FlexGap justifyContent="space-between" wrap="wrap" paddingBottom={6}> <Box width="100%">
<ToggleInput <ToggleInput
label={formatMessage({ label={formatMessage({
id: getTrad('form.Input.search'), id: getTrad('form.Input.search'),
defaultMessage: 'Enable search', defaultMessage: 'Enable search',
})} })}
onChange={(e) => { onChange={(e) => {
onChange({ target: { name: 'settings.searchable', value: e.target.checked } }); onChange({ target: { name: 'settings.searchable', value: e.target.checked } });
}} }}
onLabel={formatMessage({ onLabel={formatMessage({
id: 'app.components.ToggleCheckbox.on-label', id: 'app.components.ToggleCheckbox.on-label',
defaultMessage: 'on', defaultMessage: 'on',
})} })}
offLabel={formatMessage({ offLabel={formatMessage({
id: 'app.components.ToggleCheckbox.off-label', id: 'app.components.ToggleCheckbox.off-label',
defaultMessage: 'off', defaultMessage: 'off',
})} })}
name="settings.searchable" name="settings.searchable"
checked={settings.searchable} checked={settings.searchable}
/> />
<ToggleInput </Box>
label={formatMessage({
id: getTrad('form.Input.filters'), <Box width="100%">
defaultMessage: 'Enable filters', <ToggleInput
})} label={formatMessage({
onChange={(e) => { id: getTrad('form.Input.filters'),
onChange({ target: { name: 'settings.filterable', value: e.target.checked } }); defaultMessage: 'Enable filters',
}} })}
onLabel={formatMessage({ onChange={(e) => {
id: 'app.components.ToggleCheckbox.on-label', onChange({ target: { name: 'settings.filterable', value: e.target.checked } });
defaultMessage: 'on', }}
})} onLabel={formatMessage({
offLabel={formatMessage({ id: 'app.components.ToggleCheckbox.on-label',
id: 'app.components.ToggleCheckbox.off-label', defaultMessage: 'on',
defaultMessage: 'off', })}
})} offLabel={formatMessage({
name="settings.filterable" id: 'app.components.ToggleCheckbox.off-label',
checked={settings.filterable} defaultMessage: 'off',
/> })}
<ToggleInput name="settings.filterable"
label={formatMessage({ checked={settings.filterable}
id: getTrad('form.Input.bulkActions'), />
defaultMessage: 'Enable bulk actions', </Box>
})}
onChange={(e) => { <Box width="100%">
onChange({ target: { name: 'settings.bulkable', value: e.target.checked } }); <ToggleInput
}} label={formatMessage({
onLabel={formatMessage({ id: getTrad('form.Input.bulkActions'),
id: 'app.components.ToggleCheckbox.on-label', defaultMessage: 'Enable bulk actions',
defaultMessage: 'on', })}
})} onChange={(e) => {
offLabel={formatMessage({ onChange({ target: { name: 'settings.bulkable', value: e.target.checked } });
id: 'app.components.ToggleCheckbox.off-label', }}
defaultMessage: 'off', onLabel={formatMessage({
})} id: 'app.components.ToggleCheckbox.on-label',
name="settings.bulkable" defaultMessage: 'on',
checked={settings.bulkable} })}
/> offLabel={formatMessage({
</FlexGap> id: 'app.components.ToggleCheckbox.off-label',
defaultMessage: 'off',
})}
name="settings.bulkable"
checked={settings.bulkable}
/>
</Box>
</Stack>
<Grid gap={4}> <Grid gap={4}>
<GridItem s={12} col={6}> <GridItem s={12} col={6}>
<Select <Select
@ -145,7 +148,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
</Select> </Select>
</GridItem> </GridItem>
</Grid> </Grid>
</> </Stack>
); );
}; };

1824
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff