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

SelectTree: Improve toggle styles on Options

Browse Source
This commit is contained in:
Gustav Hansen 2022-06-08 14:00:41 +01:00
parent 3d5eb83d33
commit a997855ef0
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/core/upload/admin/src/components/SelectTree/Option.js
View File

@ -1,5 +1,6 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { useIntl } from 'react-intl';
import { components } from 'react-select'; import { components } from 'react-select';
import styled from 'styled-components'; import styled from 'styled-components';
@ -10,12 +11,19 @@ import { Typography } from '@strapi/design-system/Typography';
import ChevronUp from '@strapi/icons/ChevronUp'; import ChevronUp from '@strapi/icons/ChevronUp';
import ChevronDown from '@strapi/icons/ChevronDown'; import ChevronDown from '@strapi/icons/ChevronDown';
const ToggleButton = styled.button` const ToggleButton = styled(Flex)`
align-self: flex-end; align-self: flex-end;
margin-left: auto; height: ${pxToRem(22)};
width: ${pxToRem(28)};
&:hover,
&:focus {
background-color: ${({ theme }) => theme.colors.primary200};
}
`; `;
const Option = ({ children, data, selectProps, ...props }) => { const Option = ({ children, data, selectProps, ...props }) => {
const { formatMessage } = useIntl();
const { depth, value, children: options } = data; const { depth, value, children: options } = data;
const { maxDisplayDepth, openValues, onOptionToggle } = selectProps; const { maxDisplayDepth, openValues, onOptionToggle } = selectProps;
const isOpen = openValues.includes(value); const isOpen = openValues.includes(value);
@ -25,14 +33,22 @@ const Option = ({ children, data, selectProps, ...props }) => {
<components.Option {...props}> <components.Option {...props}>
<Flex alignItems="start"> <Flex alignItems="start">
<Typography textColor="neutral800" ellipsis> <Typography textColor="neutral800" ellipsis>
<span style={{ paddingLeft: `${Math.min(depth, maxDisplayDepth) * 10}px` }}> <span style={{ paddingLeft: `${Math.min(depth, maxDisplayDepth) * 14}px` }}>
{children} {children}
</span> </span>
</Typography> </Typography>
{options?.length > 0 && ( {options?.length > 0 && (
<ToggleButton <ToggleButton
type="button" aria-label={formatMessage({
id: 'app.utils.toggle',
defaultMessage: 'Toggle',
})}
as="button"
alignItems="center"
hasRadius
justifyContent="center"
marginLeft="auto"
onClick={event => { onClick={event => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();