strapi-plugin-navigation 1.1.1 → 2.0.0-beta.3

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/DataManagerProvider/reducer.js

@@ -1,136 +0,0 @@
-import { fromJS } from "immutable";
-import {
-  GET_LIST_DATA,
-  GET_LIST_DATA_SUCCEEDED,
-  GET_NAVIGATION_DATA,
-  GET_NAVIGATION_DATA_SUCCEEDED,
-  RELOAD_PLUGIN,
-  RESET_NAVIGATION_DATA,
-  CHANGE_NAVIGATION_POPUP_VISIBILITY,
-  CHANGE_NAVIGATION_ITEM_POPUP_VISIBILITY,
-  CHANGE_NAVIGATION_DATA,
-  GET_CONFIG,
-  GET_CONFIG_SUCCEEDED,
-  GET_CONTENT_TYPE_ITEMS,
-  GET_CONTENT_TYPE_ITEMS_SUCCEEDED,
-  SUBMIT_NAVIGATION_SUCCEEDED,
-  SUBMIT_NAVIGATION,
-  SUBMIT_NAVIGATION_ERROR,
-} from './actions';
-
-const initialState = fromJS({
-  items: [],
-  activeItem: undefined,
-  changedActiveItem: undefined,
-  navigationPopupOpened: false,
-  navigationItemPopupOpened: false,
-  config: {},
-  isLoading: true,
-  isLoadingForDataToBeSet: false,
-  isLoadingForDetailsDataToBeSet: false,
-  isLoadingForAdditionalDataToBeSet: false,
-  isLoadingForSubmit: false,
-  error: undefined,
-});
-
-const reducer = (state, action) => {
-  switch (action.type) {
-    case GET_CONFIG: {
-      return state
-        .update("isLoadingForAdditionalDataToBeSet", () => true)
-        .removeIn("config");
-    }
-    case GET_CONFIG_SUCCEEDED: {
-      return state
-        .update("isLoadingForAdditionalDataToBeSet", () => false)
-        .update("config", () => fromJS(action.config));
-    }
-    case GET_LIST_DATA: {
-      return state
-        .removeIn("items")
-        .update("isLoadingForDataToBeSet", () => true);
-    }
-    case GET_LIST_DATA_SUCCEEDED: {
-      return state
-        .update("items", () => fromJS(action.items))
-        .update("isLoading", () => false)
-        .update("isLoadingForDataToBeSet", () => false);
-    }
-    case GET_NAVIGATION_DATA: {
-      return state
-        .removeIn("activeItem")
-        .removeIn("changedActiveItem")
-        .update("isLoadingForDetailsDataToBeSet", () => true);
-    }
-    case GET_NAVIGATION_DATA_SUCCEEDED: {
-      const { activeItem = {} } = action;
-      return state
-        .update("activeItem", () => fromJS(activeItem))
-        .update("changedActiveItem", () => fromJS(activeItem))
-        .update("isLoadingForDetailsDataToBeSet", () => false);
-    }
-    case CHANGE_NAVIGATION_DATA: {
-      return state
-        .update("changedActiveItem", () => action.changedActiveItem)
-        .update("navigationPopupOpened", () =>
-          action.forceClosePopups ? false : state.navigationPopupOpened,
-        )
-        .update("navigationItemPopupOpened", () =>
-          action.forceClosePopups ? false : state.navigationItemPopupOpened,
-        );
-    }
-    case RESET_NAVIGATION_DATA: {
-      const { activeItem = {} } = action;
-      return state.update("changedActiveItem", () => activeItem);
-    }
-    case GET_CONTENT_TYPE_ITEMS: {
-      return state.update("isLoadingForAdditionalDataToBeSet", () => true);
-    }
-    case GET_CONTENT_TYPE_ITEMS_SUCCEEDED: {
-      return state
-        .update("isLoadingForAdditionalDataToBeSet", () => false)
-        .updateIn(["config", "contentTypeItems"], () =>
-          fromJS(action.contentTypeItems),
-        );
-    }
-    case CHANGE_NAVIGATION_POPUP_VISIBILITY: {
-      return state.update(
-        "navigationPopupOpened",
-        () => action.navigationPopupOpened,
-      );
-    }
-    case CHANGE_NAVIGATION_ITEM_POPUP_VISIBILITY: {
-      return state.update(
-        "navigationItemPopupOpened",
-        () => action.navigationItemPopupOpened,
-      );
-    }
-    case SUBMIT_NAVIGATION: {
-      return state
-        .update('isLoadingForSubmit', () => true)
-        .update('error', () => undefined);
-    }
-    case SUBMIT_NAVIGATION_SUCCEEDED: {
-      const { navigation = {} } = action;
-      return state
-        .update("activeItem", () => fromJS(navigation))
-        .update("changedActiveItem", () => fromJS(navigation))
-        .update(
-          'isLoadingForSubmit',
-          () => false,
-        );
-    }
-    case SUBMIT_NAVIGATION_ERROR: {
-      return state
-        .update('isLoadingForSubmit', () => false)
-        .update('error', () => action.error);
-    }
-    case RELOAD_PLUGIN:
-      return initialState;
-    default:
-      return state;
-  }
-};
-
-export default reducer;
-export { initialState };

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);