Use similar dropdown indicator as in the CM

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2021-03-29 19:00:17 +02:00
parent 6ae9ad619c
commit d28c184daf
3 changed files with 43 additions and 2 deletions

View File

@ -10,11 +10,11 @@ import {
BaselineAlignment,
ModalConfirm,
selectStyles,
DropdownIndicator,
useContentManagerEditViewDataManager,
request,
} from 'strapi-helper-plugin';
import { getTrad } from '../../utils';
import DropdownIndicator from '../DropdownIndicator';
import { cleanData, generateOptions } from './utils';
const CMEditViewCopyLocale = ({ appLocales, currentLocale, localizations, readPermissions }) => {

View File

@ -5,12 +5,13 @@ import get from 'lodash/get';
import Select, { components } from 'react-select';
import { useIntl } from 'react-intl';
import { useTheme } from 'styled-components';
import { BaselineAlignment, selectStyles, DropdownIndicator } from 'strapi-helper-plugin';
import { BaselineAlignment, selectStyles } from 'strapi-helper-plugin';
import { useHistory } from 'react-router-dom';
import { stringify } from 'qs';
import { getTrad } from '../../utils';
import { addStatusColorToLocale, createLocalesOption } from './utils';
import CMEditViewCopyLocale from '../CMEditViewCopyLocale';
import DropdownIndicator from '../DropdownIndicator';
import OptionComponent from './Option';
import Wrapper from './Wrapper';

View File

@ -0,0 +1,40 @@
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Flex } from '@buffetjs/core';
import styled from 'styled-components';
import PropTypes from 'prop-types';
const Wrapper = styled(Flex)`
height: 100%;
width: 32px;
justify-content: space-around;
background: #fafafb;
> svg {
align-self: center;
font-size: 11px;
color: #b3b5b9;
}
`;
const DropdownIndicator = ({ selectProps: { menuIsOpen } }) => {
const icon = menuIsOpen ? 'caret-up' : 'caret-down';
return (
<Wrapper>
<FontAwesomeIcon icon={icon} />
</Wrapper>
);
};
DropdownIndicator.propTypes = {
selectProps: PropTypes.shape({
menuIsOpen: PropTypes.bool.isRequired,
}).isRequired,
};
Wrapper.defaultProps = {
flexDirection: 'column',
justifyContent: 'center',
};
export default DropdownIndicator;