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

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;

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

@@ -1,21 +0,0 @@
-import styled from "styled-components";
-
-import { colors, sizes } from "strapi-helper-plugin";
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: calc(100vh - ${sizes.header.height});
-  min-height: calc(100vh - ${sizes.header.height});
-  max-height: calc(100vh - ${sizes.header.height});
-  background-color: ${colors.leftMenu.mediumGrey};
-  padding-top: 1.8rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-
-  overflow-x: hidden;
-  overflow-y: auto;
-`;
-
-export default Wrapper;

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

@@ -1,111 +0,0 @@
-/*
- *
- * DetailsView
- *
- */
-
-import React from "react";
-import { useHistory } from "react-router-dom";
-import { FormattedMessage } from "react-intl";
-import { useGlobalContext, LoadingIndicatorPage } from "strapi-helper-plugin";
-import useDataManager from "../../hooks/useDataManager";
-import { Header } from "@buffetjs/custom";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faComments } from "@fortawesome/free-solid-svg-icons";
-import pluginId from "../../pluginId";
-import ItemDetails from "../../components/ItemDetails";
-import Wrapper from "./Wrapper";
-import CardWrapper from "../../components/ItemDetails/CardWrapper";
-import CardLevelWrapper from "../../components/ItemDetails/CardLevelWrapper";
-import EmptyView from "../../components/EmptyView";
-import { isNil } from "lodash";
-import { getTrad, getTradId } from "../../translations";
-
-const DetailsView = () => {
-  const {
-    activeItem,
-    isLoadingForDetailsDataToBeSet,
-    blockComment,
-    blockCommentThread,
-    resolveAbuseReport,
-  } = useDataManager();
-
-  const { formatMessage } = useGlobalContext();
-  const { push } = useHistory();
-
-  const onCommentClick = (e, id) => {
-    e.preventDefault();
-    e.stopPropagation();
-    push(`/plugins/${pluginId}/display/${id}`);
-  };
-
-  const renderCommentsTree = (selected, items) => {
-    return (
-      <CardLevelWrapper>
-        {items.map((item, n) => {
-          const active = item.id === selected.id;
-          const threadsCount = item.children && item.children.length;
-          const hasThreads = threadsCount > 0;
-          const clickable = !active && hasThreads && !isNil(selected.threadOf);
-          return (
-            <ItemDetails
-              key={`list-item-details-${item.id || n}`}
-              {...item}
-              active={active}
-              root={selected.threadOf === null}
-              clickable={clickable}
-              threadsCount={threadsCount}
-              onAbuseReportResolve={resolveAbuseReport}
-              onBlockClick={blockComment}
-              onBlockThreadClick={blockCommentThread}
-              onClick={(e) =>
-                onCommentClick(e, hasThreads ? item.children[0].id : item.id)
-              }
-            />
-          );
-        })}
-      </CardLevelWrapper>
-    );
-  };
-
-  const { selected, level } = activeItem || {};
-
-  return (
-    <Wrapper className="col-md-8">
-      <Header
-        title={{
-          label: formatMessage(getTrad('moderation.header.title')),
-        }}
-        content={formatMessage(getTrad('moderation.header.description'))}
-      />
-      {isLoadingForDetailsDataToBeSet && <LoadingIndicatorPage />}
-      {!isLoadingForDetailsDataToBeSet && !activeItem && (
-        <EmptyView fixPosition>
-          <FontAwesomeIcon icon={faComments} size="5x" />
-          <FormattedMessage id={getTradId('moderation.content.empty')} />
-        </EmptyView>
-      )}
-      {activeItem && (
-        <>
-          {selected.threadOf && (
-            <CardLevelWrapper>
-              <ItemDetails
-                {...selected.threadOf}
-                clickable={true}
-                root={true}
-                onAbuseReportResolve={resolveAbuseReport}
-                onClick={(e) => onCommentClick(e, selected.threadOf.id)}
-              />
-              <CardWrapper root={true}>
-                {renderCommentsTree(selected, level)}
-              </CardWrapper>
-            </CardLevelWrapper>
-          )}
-          {!selected.threadOf && renderCommentsTree(selected, level)}
-        </>
-      )}
-    </Wrapper>
-  );
-};
-
-export default DetailsView;

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

@@ -1,26 +0,0 @@
-/**
- *
- * Initializer
- *
- */
-
-import { useEffect, useRef } from "react";
-import PropTypes from "prop-types";
-import pluginId from "../../pluginId";
-
-const Initializer = ({ updatePlugin }) => {
-  const ref = useRef();
-  ref.current = updatePlugin;
-
-  useEffect(() => {
-    ref.current(pluginId, "isReady", true);
-  }, []);
-
-  return null;
-};
-
-Initializer.propTypes = {
-  updatePlugin: PropTypes.func.isRequired,
-};
-
-export default Initializer;

package/admin/src/containers/ListView/Footer.js

@@ -1,56 +0,0 @@
-import React, { memo } from "react";
-import { FormattedMessage } from "react-intl";
-import { GlobalPagination, InputSelect, sizes } from "strapi-helper-plugin";
-import useDataManager from "../../hooks/useDataManager";
-import { FooterWrapper, SelectWrapper, Label } from "./components";
-
-function Footer() {
-  const {
-    search: { _limit, _page },
-    itemsTotal,
-    handleChangeParams,
-  } = useDataManager();
-
-  return (
-    <FooterWrapper className="row">
-      <div className="col-6">
-        <SelectWrapper style={{ marginBottom: `${2 * sizes.margin}px` }}>
-          <InputSelect
-            style={{ width: "75px", height: "32px", marginTop: "-1px" }}
-            name="_limit"
-            onChange={handleChangeParams}
-            selectOptions={["10", "20", "50", "100"]}
-            value={_limit}
-          />
-          <Label
-            htmlFor="_limit"
-            style={{
-              textOverflow: "ellipsis",
-              overflow: "hidden",
-              display: "inline-block",
-              whiteSpace: "nowrap",
-            }}
-          >
-            <FormattedMessage id="components.PageFooter.select" />
-          </Label>
-        </SelectWrapper>
-      </div>
-      <div className="col-6">
-        <GlobalPagination
-          style={{ marginBottom: `${2 * sizes.margin}px` }}
-          count={itemsTotal}
-          onChangeParams={({ target: { value } }) => {
-            handleChangeParams({ target: { name: "_page", value } });
-          }}
-          params={{
-            currentPage: parseInt(_page, 10),
-            _limit: parseInt(_limit, 10),
-            _page: parseInt(_page, 10),
-          }}
-        />
-      </div>
-    </FooterWrapper>
-  );
-}
-
-export default memo(Footer);

package/admin/src/containers/ListView/components.js

@@ -1,138 +0,0 @@
-import styled from "styled-components";
-import { Button, FilterIcon as Filter } from "strapi-helper-plugin";
-import RemoveIcon from "../../assets/images/icon-cross-blue.svg";
-
-const Wrapper = styled.div`
-  padding-top: 1px;
-`;
-
-const FilterIcon = styled(Filter)`
-  padding: 0 !important;
-  margin: auto !important;
-  > g {
-    stroke: #282b2c;
-  }
-`;
-
-const AddFilterCta = styled(Button)`
-  display: flex;
-  height: 30px;
-  margin-right: 10px;
-  padding: 0 10px;
-  text-align: center;
-  background-color: #ffffff;
-  border: 1px solid #e3e9f3;
-  border-radius: 2px;
-  line-height: 28px;
-  font-size: 13px;
-  font-weight: 500;
-  font-family: Lato;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-  &:hover {
-    background: #f7f8f8;
-  }
-  &:focus,
-  &:active {
-    outline: 0;
-  }
-  > span {
-    margin-left: 10px;
-  }
-`;
-
-const Img = styled.img`
-  height: 7px;
-  margin: auto;
-  margin-right: 0px;
-  font-size: 12px;
-`;
-
-const FooterWrapper = styled.div`
-  padding-top: 3rem;
-`;
-
-const Label = styled.label`
-  display: inline-block;
-  height: 32px;
-  margin-left: 10px;
-  line-height: 32px;
-  color: #787e8f;
-  font-size: 13px;
-  font-style: italic;
-`;
-
-const SelectWrapper = styled.div`
-  display: flex;
-`;
-
-const FilterWrapper = styled.div`
-  display: inline-block;
-  height: 30px;
-  margin-bottom: 6px;
-  margin-right: 10px;
-  padding: 0 10px;
-  background: rgba(0, 126, 255, 0.08);
-  border: 1px solid rgba(0, 126, 255, 0.24);
-  border-radius: 2px;
-  line-height: 28px;
-  color: #007eff;
-  font-size: 13px;
-
-  > span {
-    display: inline-block;
-    margin-top: -1px;
-  }
-
-  > span:nth-child(2) {
-    font-weight: 700;
-  }
-
-  > span:nth-child(3) {
-    cursor: pointer;
-  }
-
-  -webkit-font-smoothing: antialiased;
-`;
-
-const Separator = styled.span`
-  height: 30px;
-  margin-left: 10px;
-  margin-right: 10px;
-  line-height: 30px;
-  &:after {
-    content: "";
-    height: 15px;
-    border-left: 1px solid #007eff;
-    opacity: 0.1;
-  }
-`;
-
-const Remove = styled.span`
-  height: 28px;
-  cursor: pointer;
-  vertical-align: middle;
-
-  &:after {
-    display: inline-block;
-    content: "";
-    width: 8px;
-    height: 8px;
-    margin: auto;
-    margin-top: -3px;
-    background-image: url(${RemoveIcon});
-  }
-`;
-
-export {
-  AddFilterCta,
-  FilterIcon,
-  FooterWrapper,
-  Img,
-  Label,
-  SelectWrapper,
-  FilterWrapper,
-  Separator,
-  Remove,
-  Wrapper,
-};