@strapi/admin 4.4.0-rc.1 → 4.5.0-alpha.0

package/admin/src/content-manager/components/SelectMany/index.js

@@ -1,148 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import isEmpty from 'lodash/isEmpty';
-import { createFilter } from 'react-select';
-import { ReactSelect as Select } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import ListItem from './ListItem';
-
-function SelectMany({
-  addRelation,
-  components,
-  displayNavigationLink,
-  mainField,
-  name,
-  isDisabled,
-  isLoading,
-  loadingMessage,
-  onInputChange,
-  onMenuClose,
-  onMenuOpen,
-  onMenuScrollToBottom,
-  onRemove,
-  options,
-  placeholder,
-  searchToPersist,
-  targetModel,
-  value,
-  description,
-}) {
-  const { formatMessage } = useIntl();
-
-  const filterConfig = {
-    ignoreCase: true,
-    ignoreAccents: true,
-    trim: false,
-    matchFrom: 'any',
-  };
-
-  return (
-    <Stack spacing={1}>
-      <Select
-        components={components}
-        isDisabled={isDisabled}
-        id={name}
-        filterOption={(candidate, input) => {
-          if (!isEmpty(value)) {
-            const isSelected = value.findIndex((item) => item.id === candidate.value.id) !== -1;
-
-            if (isSelected) {
-              return false;
-            }
-          }
-
-          if (input) {
-            return createFilter(filterConfig)(candidate, input);
-          }
-
-          return true;
-        }}
-        mainField={mainField}
-        isLoading={isLoading}
-        loadingMessage={loadingMessage}
-        isMulti
-        isSearchable
-        options={options}
-        onChange={addRelation}
-        onInputChange={onInputChange}
-        onMenuClose={onMenuClose}
-        onMenuOpen={onMenuOpen}
-        onMenuScrollToBottom={onMenuScrollToBottom}
-        placeholder={formatMessage(
-          placeholder || { id: 'global.select', defaultMessage: 'Select...' }
-        )}
-        value={[]}
-      />
-      <Box paddingTop={3} style={{ overflow: 'auto' }}>
-        <Stack as="ul" spacing={4} style={{ maxHeight: '128px', overflowX: 'hidden' }}>
-          {value?.map((data, index) => {
-            return (
-              <ListItem
-                key={data.id}
-                data={data}
-                displayNavigationLink={displayNavigationLink}
-                isDisabled={isDisabled}
-                mainField={mainField}
-                onRemove={() => {
-                  if (!isDisabled) {
-                    onRemove(`${name}.${index}`);
-                  }
-                }}
-                searchToPersist={searchToPersist}
-                targetModel={targetModel}
-              />
-            );
-          })}
-        </Stack>
-      </Box>
-      {description && (
-        <Typography variant="pi" textColor="neutral600">
-          {description}
-        </Typography>
-      )}
-    </Stack>
-  );
-}
-
-SelectMany.defaultProps = {
-  description: '',
-  components: {},
-  placeholder: null,
-  searchToPersist: null,
-  value: null,
-};
-
-SelectMany.propTypes = {
-  addRelation: PropTypes.func.isRequired,
-  components: PropTypes.object,
-  displayNavigationLink: PropTypes.bool.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  loadingMessage: PropTypes.func.isRequired,
-  mainField: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    schema: PropTypes.shape({
-      type: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-  name: PropTypes.string.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  onMenuClose: PropTypes.func.isRequired,
-  onMenuOpen: PropTypes.func.isRequired,
-  onMenuScrollToBottom: PropTypes.func.isRequired,
-  onRemove: PropTypes.func.isRequired,
-  options: PropTypes.array.isRequired,
-  placeholder: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-  }),
-  searchToPersist: PropTypes.string,
-  targetModel: PropTypes.string.isRequired,
-  value: PropTypes.array,
-  description: PropTypes.string,
-};
-
-export default memo(SelectMany);

package/admin/src/content-manager/components/SelectOne/SingleValue.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { useIntl } from 'react-intl';
-import { pxToRem } from '@strapi/helper-plugin';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-import get from 'lodash/get';
-import has from 'lodash/has';
-import isEmpty from 'lodash/isEmpty';
-import { getTrad } from '../../utils';
-
-const StyledBullet = styled.div`
-  flex-shrink: 0;
-  width: ${pxToRem(6)};
-  height: ${pxToRem(6)};
-  margin-right: ${({ theme }) => theme.spaces[2]};
-  background-color: ${({ theme, isDraft }) =>
-    theme.colors[isDraft ? 'secondary600' : 'success600']};
-  border-radius: 50%;
-  cursor: pointer;
-`;
-
-const SingleValue = (props) => {
-  const { formatMessage } = useIntl();
-  const Component = components.SingleValue;
-  const hasDraftAndPublish = has(get(props, 'data.value'), 'publishedAt');
-  const isDraft = isEmpty(get(props, 'data.value.publishedAt'));
-
-  if (hasDraftAndPublish) {
-    const draftMessage = {
-      id: getTrad('components.Select.draft-info-title'),
-      defaultMessage: 'State: Draft',
-    };
-    const publishedMessage = {
-      id: getTrad('components.Select.publish-info-title'),
-      defaultMessage: 'State: Published',
-    };
-    const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
-
-    return (
-      <Component {...props}>
-        <Flex>
-          <StyledBullet title={title} isDraft={isDraft} />
-          <Typography ellipsis>{props.data.label ?? '-'}</Typography>
-        </Flex>
-      </Component>
-    );
-  }
-
-  return <Component {...props}>{props.data.label ?? '-'}</Component>;
-};
-
-SingleValue.propTypes = {
-  data: PropTypes.object.isRequired,
-  selectProps: PropTypes.shape({
-    mainField: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      schema: PropTypes.shape({
-        type: PropTypes.string.isRequired,
-      }).isRequired,
-    }).isRequired,
-  }).isRequired,
-};
-
-export default SingleValue;

package/admin/src/content-manager/components/SelectOne/index.js

@@ -1,97 +0,0 @@
-import React, { memo } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
-import get from 'lodash/get';
-import isNull from 'lodash/isNull';
-import { ReactSelect as Select } from '@strapi/helper-plugin';
-import SingleValue from './SingleValue';
-
-function SelectOne({
-  components,
-  mainField,
-  name,
-  isDisabled,
-  isLoading,
-  loadingMessage,
-  onChange,
-  onInputChange,
-  onMenuClose,
-  onMenuOpen,
-  onMenuScrollToBottom,
-  options,
-  placeholder,
-  value,
-  description,
-}) {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Stack spacing={1}>
-      <Select
-        components={{
-          ...components,
-          SingleValue,
-        }}
-        id={name}
-        isClearable
-        isDisabled={isDisabled}
-        isLoading={isLoading}
-        loadingMessage={loadingMessage}
-        mainField={mainField}
-        options={options}
-        onChange={onChange}
-        onInputChange={onInputChange}
-        onMenuClose={onMenuClose}
-        onMenuOpen={onMenuOpen}
-        onMenuScrollToBottom={onMenuScrollToBottom}
-        placeholder={formatMessage(
-          placeholder || { id: 'global.select', defaultMessage: 'Select...' }
-        )}
-        value={isNull(value) ? null : { label: get(value, [mainField.name], ''), value }}
-      />
-
-      {description && (
-        <Typography variant="pi" textColor="neutral600">
-          {description}
-        </Typography>
-      )}
-    </Stack>
-  );
-}
-
-SelectOne.defaultProps = {
-  description: '',
-  components: {},
-  placeholder: null,
-  value: null,
-};
-
-SelectOne.propTypes = {
-  components: PropTypes.object,
-  isDisabled: PropTypes.bool.isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  loadingMessage: PropTypes.func.isRequired,
-  mainField: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    schema: PropTypes.shape({
-      type: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onInputChange: PropTypes.func.isRequired,
-  onMenuClose: PropTypes.func.isRequired,
-  onMenuOpen: PropTypes.func.isRequired,
-  onMenuScrollToBottom: PropTypes.func.isRequired,
-  options: PropTypes.array.isRequired,
-  placeholder: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-  }),
-  value: PropTypes.object,
-  description: PropTypes.string,
-};
-
-export default memo(SelectOne);

package/admin/src/content-manager/components/SelectWrapper/Label.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import { Typography } from '@strapi/design-system/Typography';
-
-const LabelAction = styled(Box)`
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-
-const Label = ({ intlLabel, id, labelAction, link, name, numberOfEntries, isSingle }) => {
-  const { formatMessage } = useIntl();
-  const label = intlLabel?.id ? formatMessage(intlLabel) : name;
-
-  return (
-    <Flex justifyContent="space-between">
-      <Flex>
-        <Typography
-          textColor="neutral800"
-          htmlFor={id || name}
-          variant="pi"
-          fontWeight="bold"
-          as="label"
-        >
-          {label}
-          {!isSingle && <>&nbsp;({numberOfEntries})</>}
-        </Typography>
-        {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-      </Flex>
-      {link}
-    </Flex>
-  );
-};
-
-Label.defaultProps = {
-  id: undefined,
-  labelAction: undefined,
-  link: null,
-  numberOfEntries: 0,
-};
-
-Label.propTypes = {
-  id: PropTypes.string,
-  intlLabel: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
-  }).isRequired,
-  isSingle: PropTypes.bool.isRequired,
-  labelAction: PropTypes.element,
-  link: PropTypes.element,
-  name: PropTypes.string.isRequired,
-  numberOfEntries: PropTypes.number,
-};
-
-export default Label;