@strapi/admin 4.0.0-next.12 → 4.0.0-next.16

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

@@ -1,111 +0,0 @@
-import React, { memo, useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { Flex, Padded, Count } from '@buffetjs/core';
-import { Tooltip } from '@buffetjs/styles';
-import { useIntl } from 'react-intl';
-
-import { getTrad } from '../../utils';
-import Truncate from '../Truncate';
-import Truncated from '../Truncated';
-import CountWrapper from './CountWrapper';
-import RelationPreviewTooltip from './RelationPreviewTooltip';
-
-const RelationPreviewList = ({
-  options: {
-    metadatas: { mainField },
-    relationType,
-    value,
-    rowId,
-    cellId,
-    name,
-    queryInfos,
-  },
-}) => {
-  const { formatMessage } = useIntl();
-  const [tooltipIsDisplayed, setDisplayTooltip] = useState(false);
-  const isSingle = ['oneWay', 'oneToOne', 'manyToOne'].includes(relationType);
-  const tooltipId = useMemo(() => `${rowId}-${cellId}`, [rowId, cellId]);
-  const valueToDisplay = value ? value[mainField.name] : '-';
-
-  if (value === undefined) {
-    return (
-      <Truncate>
-        <Truncated>-</Truncated>
-      </Truncate>
-    );
-  }
-
-  if (isSingle) {
-    return (
-      <Truncate>
-        <Truncated>
-          <span data-for={tooltipId} data-tip={valueToDisplay}>
-            {valueToDisplay}
-          </span>
-        </Truncated>
-        <Tooltip id={tooltipId} />
-      </Truncate>
-    );
-  }
-
-  const size = value ? value.count : 0;
-
-  const handleTooltipToggle = () => {
-    setDisplayTooltip(prev => !prev);
-  };
-
-  return (
-    <Truncate style={{ maxWidth: 'fit-content' }}>
-      <Flex
-        // This is useful to avoid the render of every tooltips of the list at the same time.
-        // https://github.com/wwayne/react-tooltip/issues/524
-        onMouseEnter={handleTooltipToggle}
-        onMouseLeave={handleTooltipToggle}
-        data-for={tooltipId}
-        data-tip={JSON.stringify(value)}
-      >
-        <CountWrapper>
-          <Count count={size} />
-        </CountWrapper>
-        <Padded left size="xs" />
-        <Truncated>
-          {formatMessage({
-            id: getTrad(
-              size > 1 ? 'containers.ListPage.items.plural' : 'containers.ListPage.items.singular'
-            ),
-          })}
-        </Truncated>
-      </Flex>
-      {size > 0 && tooltipIsDisplayed && (
-        <RelationPreviewTooltip
-          name={name}
-          rowId={rowId}
-          tooltipId={tooltipId}
-          value={value}
-          mainField={mainField}
-          queryInfos={queryInfos}
-          size={size}
-        />
-      )}
-    </Truncate>
-  );
-};
-
-RelationPreviewList.propTypes = {
-  options: PropTypes.shape({
-    cellId: PropTypes.string.isRequired,
-    metadatas: PropTypes.shape({
-      mainField: PropTypes.object.isRequired,
-    }).isRequired,
-    name: PropTypes.string.isRequired,
-    relationType: PropTypes.string,
-    rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    type: PropTypes.string,
-    queryInfos: PropTypes.shape({
-      endPoint: PropTypes.string.isRequired,
-    }).isRequired,
-    value: PropTypes.any,
-  }).isRequired,
-};
-
-export default memo(RelationPreviewList);

package/admin/src/content-manager/components/RepeatableComponent/BannerWrapper.js

@@ -1,194 +0,0 @@
-import styled from 'styled-components';
-
-/* eslint-disable */
-
-const BannerWrapper = styled.button`
-  display: flex;
-  height: 36px;
-  width: 100%;
-  padding: 0 15px;
-  border: 1px solid
-    ${({ hasErrors, isOpen, isReadOnly }) => {
-      if (hasErrors) {
-        return '#FFA784';
-      } else if (isOpen && !isReadOnly) {
-        return '#AED4FB';
-      } else {
-        return 'rgba(227, 233, 243, 0.75)';
-      }
-    }};
-
-  ${({ doesPreviousFieldContainErrorsAndIsOpen }) => {
-    if (doesPreviousFieldContainErrorsAndIsOpen) {
-      return `
-        border-top: 1px solid #ffa784;
-      `;
-    }
-  }}
-
-  ${({ isFirst }) => {
-    if (isFirst) {
-      return `
-        border-top-right-radius: 2px;
-        border-top-left-radius: 2px;
-      `;
-    }
-  }}
-
-  ${({ hasMinError, isFirst }) => {
-    if (hasMinError) {
-      return `
-        border-color: #FAA684;
-        border-top-color: ${isFirst ? '#FAA684' : 'rgba(227, 233, 243, 0.75)'};
-        border-bottom-color: rgba(227, 233, 243, 0.75);
-        `;
-    }
-  }}
-
-  border-bottom: 0;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-
-  background-color: ${({ hasErrors, isOpen, isReadOnly }) => {
-    if (isReadOnly) {
-      return '#fafafb';
-    }
-
-    if (hasErrors && isOpen) {
-      return '#FFE9E0';
-    } else if (isOpen) {
-      return '#E6F0FB';
-    } else {
-      return '#ffffff';
-    }
-  }};
-
-  ${({ hasErrors, isOpen, isReadOnly }) => {
-    if (hasErrors) {
-      return `
-        color: #f64d0a;
-        font-weight: 600;
-      `;
-    }
-
-    if (isReadOnly) {
-      return `
-        color: #9EA7B8;
-        font-weight: 600;
-      `;
-    }
-
-    if (isOpen) {
-      return `
-        color: #007eff;
-        font-weight: 600;
-      `;
-    }
-  }}
-
-  ${({ isOpen }) => {
-    if (isOpen) {
-      return `
-        &.trash-icon {
-          svg {
-            path {
-              fill: #007eff;
-            }
-          }
-        }
-      `;
-    }
-  }}
-
-  &:focus {
-    outline: 0;
-  }
-
-
-  .img-wrapper {
-    width: 19px;
-    height: 19px;
-    margin-right: 19px;
-    border-radius: 50%;
-    background-color: ${({ hasErrors, isOpen, isReadOnly }) => {
-      if (hasErrors) {
-        return '#FAA684';
-      } else if (isOpen && !isReadOnly) {
-        return '#AED4FB';
-      } else {
-        return '#F3F4F4';
-      }
-    }};
-    text-align: center;
-
-    ${({ isOpen }) => !isOpen && 'transform: rotate(180deg)'};
-  }
-
-  .cta-wrapper {
-    display: flex;
-    margin-left: auto;
-    > button {
-      padding: 0;
-    }
-
-    .trash-icon {
-      svg {
-        font-size: 10px;
-        path {
-          fill: #4B515A;
-        }
-      }
-    }
-
-    .grab {
-      cursor: move;
-      svg {
-        vertical-align: initial;
-      }
-    }
-  }
-
-  ${({ hasErrors, isOpen, isReadOnly }) => {
-    let fill = '#ABB3C2';
-    let trashFill = '#4B515A';
-
-    if (isOpen && !isReadOnly) {
-      fill = '#007EFF';
-      trashFill = '#007EFF';
-    }
-
-    if (hasErrors) {
-      fill = '#F64D0A';
-      trashFill = '#F64D0A';
-    }
-
-    return `
-      svg {
-        path {
-          fill: ${fill} !important;
-        }
-      }
-      .trash-icon {
-        svg {
-          path {
-            fill: ${trashFill} !important;
-          }
-        }
-      }
-    `;
-  }}
-
-  -webkit-font-smoothing: antialiased;
-
-  > div {
-    align-self: center;
-    margin-top: -2px;
-  }
-`;
-
-BannerWrapper.defaultProps = {
-  isReadOnly: false,
-};
-
-export default BannerWrapper;

package/admin/src/content-manager/components/RepeatableComponent/CarretTop.js

@@ -1,14 +0,0 @@
-import React from 'react';
-
-const CarretTop = () => {
-  return (
-    <svg width="7" height="5" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M0 .469c0 .127.043.237.13.33l3.062 3.28a.407.407 0 0 0 .616 0L6.87.8A.467.467 0 0 0 7 .468a.467.467 0 0 0-.13-.33A.407.407 0 0 0 6.563 0H.438A.407.407 0 0 0 .13.14.467.467 0 0 0 0 .468z"
-        fillRule="nonzero"
-      />
-    </svg>
-  );
-};
-
-export default CarretTop;

package/admin/src/content-manager/components/RepeatableComponent/EmptyComponent.js

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-/* eslint-disable indent */
-const EmptyComponent = styled.div`
-  height: 71px;
-  border: 1px solid rgba(227, 233, 243, 0.75);
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  border-bottom: 0;
-  line-height: 66px;
-  text-align: center;
-  background-color: #fff;
-
-  ${({ hasMinError }) =>
-    hasMinError &&
-    `
-    border-color: #FAA684;
-  `}
-
-  > p {
-    color: #9ea7b8;
-    font-size: 13px;
-    font-weight: 500;
-  }
-`;
-
-export default EmptyComponent;

package/admin/src/content-manager/components/RepeatableComponent/FormWrapper.js

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-/* eslint-disable indent */
-
-const FormWrapper = styled.div`
-  padding-top: 24px;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-bottom: 10px;
-  border-top: 1px solid
-    ${({ hasErrors, isOpen, isReadOnly }) => {
-      if (hasErrors) {
-        return '#ffa784';
-      }
-      if (isOpen && !isReadOnly) {
-        return '#AED4FB';
-      }
-
-      return 'rgba(227, 233, 243, 0.75)';
-    }};
-`;
-
-FormWrapper.defaultProps = {
-  isReadOnly: false,
-};
-
-export default FormWrapper;

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

@@ -1,87 +0,0 @@
-/*
- *
- * Search
- *
- */
-
-import React from 'react';
-import { isEmpty, upperFirst } from 'lodash';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { HeaderSearch } from '@strapi/helper-plugin';
-import getTrad from '../../utils/getTrad';
-
-const WAIT = 400;
-
-class Search extends React.Component {
-  state = { didType: false, value: this.props.initValue };
-
-  timer = null;
-
-  componentDidUpdate(prevProps) {
-    const { model, value } = this.props;
-
-    if (prevProps.model !== model || (!isEmpty(prevProps.value) && isEmpty(value))) {
-      this.resetState();
-    }
-  }
-
-  resetState = () => this.setState({ value: '' });
-
-  handleChange = ({ target }) => {
-    if (!this.state.didType) {
-      this.props.trackUsage('didSearch');
-    }
-
-    clearTimeout(this.timer);
-    this.setState({ value: target.value, didType: !!target.value });
-    this.timer = setTimeout(() => this.triggerChange(target.value), WAIT);
-  };
-
-  handleClick = () => {
-    this.setState({ value: '', didType: false });
-    this.triggerChange('');
-  };
-
-  triggerChange = value => {
-    const method = value ? 'push' : 'remove';
-    const params = method === 'push' ? { _q: value, page: 1 } : { _q: '' };
-
-    this.props.changeParams(params, method);
-  };
-
-  render() {
-    const { model } = this.props;
-    const { value } = this.state;
-
-    return (
-      <FormattedMessage id={getTrad('components.Search.placeholder')}>
-        {placeholder => (
-          <HeaderSearch
-            label={upperFirst(model)}
-            onChange={this.handleChange}
-            onClear={this.handleClick}
-            placeholder={placeholder}
-            value={value}
-          />
-        )}
-      </FormattedMessage>
-    );
-  }
-}
-
-Search.defaultProps = {
-  changeParams: () => {},
-  model: '',
-  value: '',
-};
-
-Search.propTypes = {
-  changeParams: PropTypes.func,
-  initValue: PropTypes.string.isRequired,
-  model: PropTypes.string,
-  trackUsage: PropTypes.func.isRequired,
-  value: PropTypes.string,
-};
-
-export default Search;

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

@@ -1,106 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { memo, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { Link, useLocation } from 'react-router-dom';
-import { isEmpty } from 'lodash';
-import { useIntl } from 'react-intl';
-import { RelationDPState } from '@strapi/helper-plugin';
-import { getDisplayedValue, getTrad } from '../../utils';
-import IconRemove from '../../assets/images/icon_remove.svg';
-import { Span } from './components';
-
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-
-const Relation = ({
-  data,
-  displayNavigationLink,
-  hasDraftAndPublish,
-  isDisabled,
-  isDragging,
-  mainField,
-  onRemove,
-  searchToPersist,
-  to,
-}) => {
-  const { formatMessage } = useIntl();
-  const cursor = useMemo(() => {
-    if (isDisabled) {
-      return 'not-allowed';
-    }
-
-    if (!displayNavigationLink) {
-      return 'default';
-    }
-
-    return 'pointer';
-  }, [displayNavigationLink, isDisabled]);
-  const { pathname } = useLocation();
-  const isDraft = isEmpty(data.publishedAt);
-  const titleLabelID = isDraft
-    ? 'components.Select.draft-info-title'
-    : 'components.Select.publish-info-title';
-  let title = hasDraftAndPublish
-    ? formatMessage({ id: getTrad(titleLabelID) })
-    : formatMessage({ id: getTrad('containers.Edit.clickToJump') });
-
-  const value = data[mainField.name];
-  const formattedValue = getDisplayedValue(mainField.schema.type, value, mainField.name);
-
-  if (isDragging || !displayNavigationLink) {
-    title = '';
-  }
-
-  return (
-    <>
-      <div style={{ cursor }} title={title}>
-        <div className="dragHandle">
-          <span />
-        </div>
-        {hasDraftAndPublish && (
-          <div>
-            <RelationDPState isDraft={isDraft} />
-          </div>
-        )}
-        {displayNavigationLink ? (
-          <Link
-            to={{ pathname: to, state: { from: pathname }, search: searchToPersist }}
-            title={title}
-          >
-            <Span>{formattedValue}&nbsp;</Span>
-          </Link>
-        ) : (
-          <Span>{formattedValue}&nbsp;</Span>
-        )}
-      </div>
-      <div style={{ cursor, width: 'auto' }}>
-        <img src={IconRemove} alt="Remove Icon" onClick={onRemove} />
-      </div>
-    </>
-  );
-};
-
-Relation.defaultProps = {
-  isDragging: false,
-  onRemove: () => {},
-  searchToPersist: null,
-  to: '',
-};
-
-Relation.propTypes = {
-  data: PropTypes.object.isRequired,
-  displayNavigationLink: PropTypes.bool.isRequired,
-  hasDraftAndPublish: PropTypes.bool.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  isDragging: PropTypes.bool,
-  mainField: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    schema: PropTypes.shape({
-      type: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-  onRemove: PropTypes.func,
-  searchToPersist: PropTypes.string,
-  to: PropTypes.string,
-};
-
-export default memo(Relation);

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

@@ -1,153 +0,0 @@
-import styled from 'styled-components';
-
-const ListWrapper = styled.div`
-  max-height: 116px;
-
-  > ul {
-    margin: 0 -20px 0;
-    padding: 0 20px !important;
-    list-style: none !important;
-    overflow: auto;
-    max-height: 110px;
-  }
-`;
-
-const ListShadow = styled.div`
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: 0px;
-
-  &:after {
-    position: absolute;
-    top: -15px;
-    left: -5px;
-    content: '';
-    display: inline-block;
-    width: calc(100% + 10px);
-    height: 1px;
-    margin-bottom: -25px;
-    box-shadow: 0px -2px 4px 0px rgba(227, 233, 243, 0.5);
-  }
-`;
-
-const Li = styled.li`
-  display: flex;
-  flex-wrap: nowrap;
-  align-content: center;
-  justify-content: space-between;
-  height: 18px;
-  margin-top: 9px;
-  line-height: 1;
-  &:last-of-type {
-    margin-bottom: 0px;
-  }
-  &:active {
-    .dragHandle {
-      > span {
-        background: #aed4fb;
-      }
-    }
-  }
-
-  .dragHandle {
-    outline: none;
-    text-decoration: none;
-    margin-top: -1px;
-
-    > span {
-      vertical-align: middle;
-      position: relative;
-      display: inline-block;
-      width: 6px;
-      height: 1px;
-      padding: 0px !important;
-      background: #b3b5b9;
-      overflow: visible !important;
-      transition: background 0.25s ease-out;
-
-      &:before,
-      &:after {
-        content: '';
-        display: inline-block;
-        width: 6px;
-        height: 1px;
-        background: inherit;
-      }
-
-      &:before {
-        position: absolute;
-        top: -2px;
-        left: 0;
-      }
-
-      &:after {
-        position: absolute;
-        bottom: -2px;
-        left: 0;
-      }
-    }
-  }
-
-  > div {
-    width: 90%;
-    > a {
-      flex-grow: 2;
-      max-width: 100%;
-      color: rgb(35, 56, 77);
-    }
-    > a:hover {
-      text-decoration: none;
-    }
-
-    &:first-of-type {
-      display: flex;
-      align-items: center;
-      transition: color 0.25s ease-out;
-
-      &:hover {
-        .dragHandle {
-          > span {
-            background: #007eff;
-          }
-        }
-        > a {
-          color: #007eff;
-        }
-        color: #007eff;
-      }
-
-      span {
-        &:last-of-type {
-          padding-left: 10px;
-        }
-      }
-    }
-
-    &:last-of-type {
-      display: inline-block;
-      height: 100%;
-      padding-right: 0px;
-      line-height: 18px;
-      text-align: right;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      img {
-        display: inline-block;
-        height: 14px;
-      }
-    }
-  }
-`;
-
-const Span = styled.span`
-  display: block;
-  max-width: calc(100% - 10px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-export { ListShadow, ListWrapper, Li, Span };