strapi-plugin-navigation 1.1.0 → 2.0.0-beta.2

package/admin/src/components/Item/CardWrapper.js

@@ -1,78 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-import CardItem from './CardItem';
-
-const backgroundColor = ({ error, theme }) => {
-  if (error) {
-    return theme.main.colors.red;
-  }
-  return colors.relations.boxShadow;
-};
-
-const CardWrapper = styled.li`
-  padding: 0;
-  margin: 0;
-
-  position: relative;
-  z-index: 1;
-
-  ${CardItem} {
-    &:before {
-      display: block;
-      content: "";
-      margin-top: -1px;
-
-      height: 2px;
-      width: 2.5rem;
-
-      position: absolute;
-      top: 50%;
-      left: -2rem;
-      z-index: -1;
-
-      background-color: ${backgroundColor};
-    }
-  }
-
-  &:last-child {
-    &:before {
-      display: ${(props) => (props.level < 2 ? 'none' : 'block')};
-      content: "";
-      width: 6px;
-      height: 6px;
-      margin-left: -3px;
-
-      position: absolute;
-      bottom: -2.5rem;
-      left: -2rem;
-      z-index: -1;
-
-      border-radius: 3px;
-
-      background-color: ${colors.relations.boxShadow};
-    }
-
-    ${CardItem} {
-      margin-bottom: 20px;
-    }
-  }
-
-  &:after {
-    display: block;
-    content: "";
-    margin-left: -1px;
-
-    width: 2px;
-
-    position: absolute;
-    top: -2rem;
-    bottom: -2.5rem;
-    left: -2rem;
-    z-index: -1;
-
-    background-color: ${colors.relations.boxShadow};
-  }
-`;
-
-export default CardWrapper;

package/admin/src/components/ItemFooter/CardItemError.js

@@ -1,11 +0,0 @@
-import styled from "styled-components";
-
-import { sizes } from "strapi-helper-plugin";
-import CardItemRelation from "./CardItemRelation";
-
-const CardItemError = styled(CardItemRelation)`
-  color: red;
-  font-weight: bold;
-`;
-
-export default CardItemError;

package/admin/src/components/ItemFooter/CardItemRelation.js

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-
-import { sizes } from "strapi-helper-plugin";
-
-const CardItemRelation = styled.span`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: row;
-
-  align-items: center;
-  justify-content: flex-end;
-
-  svg {
-    margin-right: ${sizes.margin / 2}px;
-  }
-`;
-
-export default CardItemRelation;

package/admin/src/components/ItemFooter/CardItemRelationStatus.js

@@ -1,17 +0,0 @@
-import styled from "styled-components";
-
-import { colors, sizes } from "strapi-helper-plugin";
-
-const CardItemRelationStatus = styled.small`
-  display: inline-block;
-  padding: ${`${sizes.margin * .1}px ${sizes.margin * .5}px`};
-  margin-left: ${`${sizes.margin / 2}px`};
-  
-  color: #ffffff;
-  font-weight: bold;
-
-  background: orange;
-  border-radius: ${`${sizes.margin * .3}px`};
-`;
-
-export default CardItemRelationStatus;

package/admin/src/components/ItemFooter/CardItemType.js

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-
-import { sizes } from "strapi-helper-plugin";
-
-const CardItemType = styled.span`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: row;
-
-  align-items: center;
-  justify-content: flex-start;
-
-  svg {
-    margin-right: ${sizes.margin / 2}px;
-  }
-`;
-
-export default CardItemType;

package/admin/src/components/ItemFooter/Wrapper.js

@@ -1,26 +0,0 @@
-import styled from "styled-components";
-
-import { colors } from "strapi-helper-plugin";
-
-const Wrapper = styled.div`
-  display: flex;
-  padding-top: 1rem;
-  margin-top: 1rem;
-  margin-bottom: ${ props => props.attachButtons ? 1 : 0 }rem;
-
-  flex-wrap: wrap;
-  justify-items: center;
-  align-items: stretch;
-
-  color: ${colors.leftMenu.darkGrey};
-  font-size: 1.25rem;
-
-  border-top: 1px ${colors.leftMenu.lightGrey} solid;
-
-  ${ props => props.removed && `
-    filter: blur(.25rem);
-    -webkit-filter: blur(.25rem);
-  `}
-`;
-
-export default Wrapper;

package/admin/src/components/ItemFooter/index.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLink, faGlobe, faSitemap, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import CardItemRelation from './CardItemRelation';
-import CardItemType from './CardItemType';
-import Wrapper from './Wrapper';
-import { isNil, get, find, upperFirst } from 'lodash';
-import { navigationItemType } from '../../containers/View/utils/enums';
-import { isRelationCorrect, isRelationPublished } from '../../containers/View/utils/parsers';
-import CardItemError from './CardItemError';
-import CardItemRelationStatus from './CardItemRelationStatus';
-import { getTrad } from '../../translations';
-
-const ItemFooter = ({ type, removed, relatedRef, relatedType, attachButtons, contentTypes, formatRelationName }) => {
-  const { formatMessage } = useIntl();
-
-  const isRelationDefined = !isNil(relatedRef);
-
-  const formatRelationType = () =>
-  isRelationDefined ? get(relatedRef, 'labelSingular', get(relatedRef, '__contentType')) : '';
-
-  const isSingle = get(relatedRef, 'isSingle', false);
-  const isExternal = type === navigationItemType.EXTERNAL;
-  const relatedContentType = isRelationDefined && isSingle ? find(contentTypes, cnt => cnt.uid === relatedType) : undefined;
-
-  return (
-    <Wrapper removed={removed} attachButtons={attachButtons}>
-      <CardItemType>
-        <FontAwesomeIcon
-          icon={type === navigationItemType.EXTERNAL ? faGlobe : faSitemap}
-        />{' '}
-        {upperFirst(type.toLowerCase())}
-      </CardItemType>
-      {isRelationCorrect({ type, related: relatedRef }) && !isExternal && (
-        <CardItemRelation title={formatRelationName()}>
-          <FontAwesomeIcon icon={faLink} />{' '}
-          {isSingle ? formatRelationType() : `(${formatRelationType()}) ${formatRelationName()}`}
-          { !isRelationPublished({ relatedRef, relatedType: relatedContentType, type, isCollection: !isNil(relatedContentType) }) && (
-          <CardItemRelationStatus>
-            { `${formatMessage(getTrad('notification.navigation.item.relation.status.draft'))}` }
-          </CardItemRelationStatus>
-          ) }
-        </CardItemRelation>
-      )}
-      { !isRelationCorrect({ type, related: relatedRef }) && (
-        <CardItemError title={formatRelationName()}>
-          <FontAwesomeIcon icon={faExclamationTriangle} />{' '}
-          { formatMessage(getTrad('notification.navigation.item.relation')) }
-        </CardItemError>
-      )}
-    </Wrapper>
-  );
-};
-
-ItemFooter.propTypes = {
-  type: PropTypes.string.isRequired,
-  contentTypesNameFields: PropTypes.object.isRequired,
-  menuAttached: PropTypes.bool,
-  removed: PropTypes.bool,
-  relatedRef: PropTypes.object,
-  attachButtons: PropTypes.bool,
-};
-
-export default ItemFooter;

package/admin/src/components/ItemOrdering/CardOrderingButton.js

@@ -1,24 +0,0 @@
-import styled from "styled-components";
-
-import { Button } from "@buffetjs/core";
-import { sizes } from "strapi-helper-plugin";
-
-const CardOrderingButton = styled(Button)`
-  display: flex;
-  width: ${ props => props.size }px;
-  height: ${ props => props.size }px;
-  padding: 0;
-  margin-left: ${ sizes.margin / 2 }px;
-  align-items: center;
-  justify-content: center;
-
-  border-radius: ${ props => props.size / 2 }px;
-
-  background: #ffffff;
-
-  svg {
-    margin-right: 0;
-  }
-`;
-
-export default CardOrderingButton;

package/admin/src/components/ItemOrdering/Wrapper.js

@@ -1,24 +0,0 @@
-import styled from "styled-components";
-import CardOrderingButton from "./CardOrderingButton";
-
-const Wrapper = styled.div`
-  display: flex;
-
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: ${ props => -1 * (props.fixBy || 0) }px;
-  z-index: 1;
-
-  ${ CardOrderingButton } {
-    &:first {
-      margin-left: 0;
-    }
-  }
-`;
-
-export default Wrapper;

package/admin/src/components/ItemOrdering/index.js

@@ -1,36 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowUp, faArrowDown } from "@fortawesome/free-solid-svg-icons";
-import Wrapper from "./Wrapper";
-import CardOrderingButton from "./CardOrderingButton";
-import { sizes } from "strapi-helper-plugin";
-
-const BUTTON_SIZE = 2.4 * sizes.margin;
-
-const ItemOrdering = ({ isFirst, isLast, onChangeOrder }) => {
-  return (
-    <Wrapper fixBy={ BUTTON_SIZE / 2 }>
-      { !isFirst && (<CardOrderingButton
-        size={BUTTON_SIZE}
-        color="secondary"
-        icon={<FontAwesomeIcon icon={faArrowUp} size="1x" />}
-        onClick={(e) => onChangeOrder(e, -1)}
-      />) }
-      { !isLast && (<CardOrderingButton
-        size={BUTTON_SIZE}
-        color="secondary"
-        icon={<FontAwesomeIcon icon={faArrowDown} size="1x" />}
-        onClick={(e) => onChangeOrder(e, 1)}
-      />) }
-    </Wrapper>
-  );
-};
-
-ItemOrdering.propTypes = {
-  isFirst: PropTypes.bool,
-  isLast: PropTypes.bool,
-  onChangeOrder: PropTypes.func.isRequired,
-};
-
-export default ItemOrdering;

package/admin/src/components/List/Container.js

@@ -1,34 +0,0 @@
-import { colors, sizes } from "strapi-helper-plugin";
-import styled from "styled-components";
-
-const Container = styled.ul`
-  display: flex;
-  padding: 0;
-  flex-direction: column;
-  flex-grow: 1;
-  margin: 0;
-  padding: ${ 2 * sizes.margin}px 0 ${ 4 * sizes.margin}px 0;
-
-  position: relative;
-  z-index: 0;
-
-  overflow-x: hidden;
-  overflow-y: auto;
-
-  list-style: none;
-
-  &:before {
-    display: block;
-    content: "";
-    width: 2px;
-
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: calc(2rem - 1px);
-
-    background-color: ${colors.relations.boxShadow};
-  }
-`;
-
-export default Container;

package/admin/src/components/List/ListLevelRoot.js

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-
-import CardItemLevelAdd, { buttonRadius } from "../Item/CardItemLevelAdd";
-
-const ListLevelRoot = styled.li`
-  position: relative;
-
-  ${CardItemLevelAdd} {
-    margin-left: ${`calc(2rem - ${buttonRadius}px)`};
-
-    position: relative;
-    top: auto;
-    left: auto;
-    bottom: auto;
-  }
-`;
-
-export default ListLevelRoot;

package/admin/src/components/List/index.js

@@ -1,81 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import Item from "../Item";
-import Container from "./Container";
-import CardItemLevelAdd from "../Item/CardItemLevelAdd";
-import ListLevelRoot from "./ListLevelRoot";
-
-const List = ({
-  root,
-  items,
-  onItemClick,
-  onItemReOrder,
-  onItemRestoreClick,
-  onItemLevelAddClick,
-  as,
-  level = 0,
-  levelPath = '',
-  allowedLevels,
-  isParentAttachedToMenu = false,
-  contentTypes,
-  contentTypesNameFields,
-  error,
-}) => {
-  const Component = as || Container;
-  return (
-    <Component>
-      {items.map((item, n) => {
-        const { relatedRef, ...itemProps } = item
-        return (
-          <Item
-            key={`list-item-${item.viewId || n}`}
-            item={itemProps}
-            relatedRef={relatedRef}
-            level={level}
-            levelPath={levelPath}
-            isFirst={n === 0}
-            isLast={n === items.length - 1}
-            isParentAttachedToMenu={isParentAttachedToMenu}
-            allowedLevels={allowedLevels}
-            contentTypesNameFields={contentTypesNameFields}
-            onItemClick={onItemClick}
-            onItemReOrder={onItemReOrder}
-            onItemRestoreClick={onItemRestoreClick}
-            onItemLevelAddClick={onItemLevelAddClick}
-            contentTypes={contentTypes}
-            error={error}
-          />
-        );
-      })}
-      {root && (
-        <ListLevelRoot>
-          <CardItemLevelAdd
-            root
-            menuLevel
-            color="primary"
-            icon={<FontAwesomeIcon icon={faPlus} />}
-            onClick={e => onItemLevelAddClick(e, null, true, levelPath, true)}
-          />
-        </ListLevelRoot>
-      )}
-    </Component>
-  );
-};
-
-List.propTypes = {
-  root: PropTypes.bool,
-  items: PropTypes.array,
-  level: PropTypes.number,
-  allowedLevels: PropTypes.number,
-  isParentAttachedToMenu: PropTypes.bool,
-  contentTypes: PropTypes.array,
-  contentTypesNameFields: PropTypes.object.isRequired,
-  onItemClick: PropTypes.func.isRequired,
-  onItemReOrder: PropTypes.func.isRequired,
-  onItemRestoreClick: PropTypes.func.isRequired,
-  onItemLevelAddClick: PropTypes.func.isRequired,
-};
-
-export default List;

package/admin/src/components/Option/OptionButton.js

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-
-const OptionButton = styled.button`
-  display: flex;
-  justify-items: center;
-  height: 13px;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-left: 10px;
-  background-color: transparent;
-  border: 0;
-  border-left: 1px solid rgba(0, 126, 255, 0.1);
-  &:focus {
-    outline: 0;
-  }
-`;
-
-export default OptionButton;

package/admin/src/components/Option/OptionSet.js

@@ -1,14 +0,0 @@
-import styled from "styled-components";
-
-import { sizes } from "strapi-helper-plugin";
-
-const OptionSet = styled.div`
-  display: block;
-  margin-bottom: ${sizes.margin}px;
-
-  &:empty {
-    display: none;
-  }
-`;
-
-export default OptionSet;

package/admin/src/components/Option/Wrapper.js

@@ -1,15 +0,0 @@
-import styled from "styled-components";
-
-import { Option } from "@buffetjs/styles";
-import { sizes } from "strapi-helper-plugin";
-
-const Wrapper = styled(Option)`
-  display: inline-flex;
-  margin: 0 0 ${sizes.margin / 2}px ${sizes.margin / 2}px;
-
-  &:first-child {
-    margin-left: 0;
-  }
-`;
-
-export default Wrapper;

package/admin/src/components/Option/index.js

@@ -1,47 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Plus, Remove } from "@buffetjs/icons";
-import { upperFirst } from "lodash";
-import OptionButton from "./OptionButton";
-import Wrapper from "./Wrapper";
-
-function Option({ label, icon = Option.icons.REMOVE, onClick, ...rest }) {
-  const content =
-    typeof label === "string" ? <span>{upperFirst(label)}</span> : label;
-
-  let OptionIcon = Remove;
-  switch (icon) {
-    case Option.icons.PLUS:
-      OptionIcon = Plus;
-      break;
-    default:
-      break;
-  }
-
-  return (
-    <Wrapper {...rest}>
-      {content}
-      <OptionButton type="button" onClick={onClick}>
-        <OptionIcon width="11px" height="11px" fill="#007eff" />
-      </OptionButton>
-    </Wrapper>
-  );
-}
-
-Option.icons = {
-  PLUS: "plus",
-  REMOVE: "remove",
-};
-
-Option.defaultProps = {
-  label: "",
-  onClick: () => {},
-};
-
-Option.propTypes = {
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  icon: PropTypes.oneOf([Option.icons.PLUS, Option.icons.REMOVE]),
-  onClick: PropTypes.func,
-};
-
-export default Option;

package/admin/src/components/Search/index.js

@@ -1,86 +0,0 @@
-/*
- *
- * Search
- *
- */
-
-import React, { memo } 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 = { 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 }) => {
-    clearTimeout(this.timer);
-    this.setState({ value: target.value });
-    this.timer = setTimeout(() => this.triggerChange(target.value), WAIT);
-  };
-
-  handleClick = () => {
-    this.setState({ value: "" });
-    this.triggerChange("");
-  };
-
-  triggerChange = (value) =>
-    this.props.changeParams({
-      target: {
-        name: "_q",
-        value,
-      },
-    });
-
-  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,
-  value: PropTypes.string,
-};
-
-export default memo(Search);

package/admin/src/components/Select/ClearIndicator.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Remove } from '@buffetjs/icons';
-import { components } from 'react-select';
-
-const ClearIndicator = props => {
-  const Component = components.ClearIndicator;
-
-  return (
-    <Component {...props}>
-      <Remove width="11px" height="11px" fill="#9EA7B8" />
-    </Component>
-  );
-};
-
-export default ClearIndicator;