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