strapi-plugin-navigation 1.0.4 → 2.0.0-beta.1

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;

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

@@ -1,39 +0,0 @@
-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;
-  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;

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

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-import { ErrorMessage as Base } from '@buffetjs/styles';
-
-const ErrorMessage = styled(Base)`
-  padding-top: 11px;
-  padding-bottom: 0;
-  margin-bottom: 17px;
-`;
-
-export default ErrorMessage;

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

@@ -1,3 +0,0 @@
-const IndicatorSeparator = () => null;
-
-export default IndicatorSeparator;

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

@@ -1,43 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-import PropTypes from 'prop-types';
-import StyledOption from './StyledOption';
-
-const MultiValueContainer = ({ data, selectProps }) => {
-  const Component = components.MultiValueContainer;
-
-  const handleClick = () => {
-    const newValue = selectProps.value.filter(option => option.value !== data.value);
-
-    selectProps.onChange(newValue);
-  };
-
-  return (
-    <Component {...data} {...selectProps}>
-      <StyledOption
-        label={data.label || data.name}
-        height="24px"
-        lineHeight="26px"
-        margin="2px 5px 0px 0"
-        onClick={handleClick}
-      />
-    </Component>
-  );
-};
-
-MultiValueContainer.defaultProps = {
-  data: {},
-  selectProps: {
-    value: [],
-  },
-};
-
-MultiValueContainer.propTypes = {
-  data: PropTypes.object,
-  selectProps: PropTypes.shape({
-    onChange: PropTypes.func.isRequired,
-    value: PropTypes.array,
-  }),
-};
-
-export default MultiValueContainer;

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

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-import { Option } from '@buffetjs/core';
-
-const StyledOption = styled(Option)`
-  > span {
-    display: block !important;
-    color: #007eff !important;
-  }
-`;
-
-export default StyledOption;

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

@@ -1,68 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactSelect from 'react-select';
-import { Padded } from '@buffetjs/core';
-import styles from './utils/styles';
-import ClearIndicator from './ClearIndicator';
-import DropdownIndicator from './DropdownIndicator';
-import ErrorMessage from './ErrorMessage';
-import IndicatorSeparator from './IndicatorSeparator';
-import MultiValueContainer from './MultiValueContainer';
-import { useIntl } from 'react-intl';
-
-const Select = ({ error, isDisabled, isMulti, isLoading, name, onChange, onInputChange, value, inputValue, defaultValue, options }) => {
-  const { formatMessage } = useIntl();
-  const translatedError = error && error.id ? formatMessage(error) : null;
-
-  return (
-    <>
-      <ReactSelect
-        components={{
-          ClearIndicator,
-          DropdownIndicator,
-          IndicatorSeparator,
-          MultiValueContainer,
-        }}
-        error={error}
-        getOptionLabel={option => option ? option.label : undefined}
-        getOptionValue={option => option ? option.value : undefined}
-        onChange={data => {
-          onChange({ target: { name, value: data } });
-        }}
-        onInputChange={onInputChange}
-        isClearable
-        isDisabled={isDisabled}
-        isLoading={isLoading}
-        isMulti={isMulti}
-        options={isLoading ? [] : options}
-        styles={styles}
-        defaultValue={defaultValue}
-        inputValue={inputValue}
-        value={isLoading ? undefined : value}
-      />
-      {error && (!value || value.length === 0) ? (
-        <ErrorMessage>{translatedError}</ErrorMessage>
-      ) : (
-        <Padded top size="11px" />
-      )}
-    </>
-  );
-};
-
-Select.defaultProps = {
-  error: null,
-  isDisabled: false,
-  value: [],
-};
-
-Select.propTypes = {
-  error: PropTypes.shape({
-    id: PropTypes.string,
-  }),
-  isDisabled: PropTypes.bool,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.array,
-};
-
-export default Select;

package/admin/src/components/Select/utils/styles.js

@@ -1,92 +0,0 @@
-/* eslint-disable indent */
-/* eslint-disable no-nested-ternary */
-
-const styles = {
-  control: (base, state) => {
-    const borderRadiusStyle = state.selectProps.menuIsOpen
-      ? {
-          borderBottomLeftRadius: '0 !important',
-          borderBottomRightRadius: '0 !important',
-        }
-      : {};
-
-    const {
-      selectProps: { error, value },
-    } = state;
-
-    let border;
-    let borderBottom;
-    let backgroundColor;
-
-    if (state.isFocused) {
-      border = '1px solid #78caff !important';
-    } else if (error && (!value || value.length === 0)) {
-      border = '1px solid #f64d0a !important';
-    } else {
-      border = '1px solid #e3e9f3 !important';
-    }
-
-    if (state.menuIsOpen === true) {
-      borderBottom = '1px solid #e3e9f3 !important';
-    }
-
-    if (state.isDisabled) {
-      backgroundColor = '#fafafb !important';
-    }
-
-    return {
-      ...base,
-      fontSize: 13,
-      minHeight: 34,
-      border,
-      outline: 0,
-      boxShadow: 0,
-      borderRadius: '2px !important',
-      ...borderRadiusStyle,
-      borderBottom,
-      backgroundColor,
-    };
-  },
-  menu: base => {
-    return {
-      ...base,
-      width: 'calc(100% - 0px)',
-      margin: '0',
-      paddingTop: 0,
-      borderRadius: '2px !important',
-      borderTopLeftRadius: '0 !important',
-      borderTopRightRadius: '0 !important',
-      border: '1px solid #78caff !important',
-      boxShadow: 0,
-      borderTop: '0 !important',
-      fontSize: '13px',
-    };
-  },
-  menuList: base => ({
-    ...base,
-    maxHeight: '112px',
-    paddingTop: 2,
-  }),
-  option: (base, state) => {
-    return {
-      ...base,
-      height: 36,
-      backgroundColor: state.isSelected ? '#fff' : base.backgroundColor,
-      color: state.isSelected ? '#007eff' : '#333740',
-      fontWeight: state.isSelected ? '600' : '400',
-    };
-  },
-  placeholder: base => ({
-    ...base,
-    marginTop: 0,
-    marginLeft: 8,
-    color: '#aaa',
-  }),
-  valueContainer: base => ({
-    ...base,
-    padding: '2px 4px 4px 4px',
-    lineHeight: '18px',
-  }),
-};
-
-export default styles;

package/admin/src/containers/App/Wrapper.js

@@ -1,14 +0,0 @@
-import styled from "styled-components";
-
-import { sizes } from "strapi-helper-plugin";
-
-const Wrapper = styled.div`
-  min-height: calc(100vh - ${sizes.header.height});
-  .centered {
-    position: fixed;
-    top: calc(50% - 13px);
-    right: calc(50% - 13px);
-  }
-`;
-
-export default Wrapper;

package/admin/src/containers/App/index.js

@@ -1,34 +0,0 @@
-/**
- *
- * This component is the skeleton around the actual pages, and should only
- * contain code that should be seen on all pages. (e.g. navigation bar)
- *
- */
-
-import React, { Suspense, lazy } from "react";
-import { Switch, Route } from "react-router-dom";
-import { NotFound, LoadingIndicatorPage } from "strapi-helper-plugin";
-import Wrapper from "./Wrapper";
-// Utils
-import pluginId from "../../pluginId";
-import DataManagerProvider from "../DataManagerProvider";
-// Containers
-
-const View = lazy(() => import("../View"));
-
-const App = () => {
-  return (
-    <Wrapper>
-      <DataManagerProvider>
-        <Suspense fallback={<LoadingIndicatorPage />}>
-          <Switch>
-            <Route path={`/plugins/${pluginId}`} component={View} exact />
-            <Route component={NotFound} />
-          </Switch>
-        </Suspense>
-      </DataManagerProvider>
-    </Wrapper>
-  );
-};
-
-export default App;