Web:Client:Add CalendarComponent.

2023-09-26 10:40:43 +03:00 · 2023-09-26 10:40:43 +03:00 · 6ed7eacf8c
commit 6ed7eacf8c
parent be954b594c
8 changed files with 122 additions and 39 deletions
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
@ -5,7 +5,7 @@ import { hugeMobile, tablet } from "@docspace/components/utils/device";

 const StyledInfoPanelBody = styled.div`
  height: auto;
-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          padding: 0px 20px 0 3px;
@ -13,8 +13,8 @@ const StyledInfoPanelBody = styled.div`
      : css`
          padding: 0px 3px 0 20px;
        `}
-  color: ${props => props.theme.infoPanel.textColor};
-  background-color: ${props => props.theme.infoPanel.backgroundColor};
+  color: ${(props) => props.theme.infoPanel.textColor};
+  background-color: ${(props) => props.theme.infoPanel.backgroundColor};

  .no-item {
    text-align: center;
@ -29,7 +29,7 @@ const StyledInfoPanelBody = styled.div`
  }

  @media ${hugeMobile} {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            padding: 0px 16px 0 8px;
@ -44,7 +44,7 @@ const StyledTitle = styled.div`
  position: sticky;
  top: 0;
  z-index: 100;
-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          padding: 24px 20px 24px 0px;
@ -55,7 +55,7 @@ const StyledTitle = styled.div`
          margin-left: -20px;
        `}

-  background: ${props => props.theme.infoPanel.backgroundColor};
+  background: ${(props) => props.theme.infoPanel.backgroundColor};

  display: flex;
  flex-wrap: no-wrap;
@ -74,7 +74,7 @@ const StyledTitle = styled.div`
    }
    &.is-room {
      border-radius: 6px;
-      outline: 1px solid ${props => props.theme.itemIcon.borderColor};
+      outline: 1px solid ${(props) => props.theme.itemIcon.borderColor};
    }
  }

@ -91,12 +91,12 @@ const StyledTitle = styled.div`
    -webkit-line-clamp: 2;
  }

-  ${props =>
+  ${(props) =>
    props.withBottomBorder &&
    css`
      width: calc(100% + 20px);
      margin: 0 -20px 0 -20px;
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              padding: 23px 23px 23px 0;
@ -104,7 +104,7 @@ const StyledTitle = styled.div`
          : css`
              padding: 23px 0 23px 20px;
            `}
-      border-bottom: ${props =>
+      border-bottom: ${(props) =>
        `solid 1px ${props.theme.infoPanel.borderColor}`};
    `}

@ -115,7 +115,7 @@ const StyledTitle = styled.div`

  @media ${hugeMobile} {
    width: calc(100vw - 32px);
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            padding: 24px 16px 24px 0;
@ -124,11 +124,11 @@ const StyledTitle = styled.div`
            padding: 24px 0 24px 16px;
          `}

-    ${props =>
+    ${(props) =>
      props.withBottomBorder &&
      css`
        width: calc(100% + 16px);
-        ${props =>
+        ${(props) =>
          props.theme.interfaceDirection === "rtl"
            ? css`
                padding: 23px 16px 23px 0;
@ -184,7 +184,7 @@ const StyledProperties = styled.div`
        background: red;
        max-width: 195px;
        margin: 0;
-        background: ${props => props.theme.infoPanel.details.tagBackground};
+        background: ${(props) => props.theme.infoPanel.details.tagBackground};
        p {
          white-space: nowrap;
          overflow: hidden;
@ -209,7 +209,7 @@ const StyledProperties = styled.div`
              width: 12px;
              height: 12px;
              path {
-                fill: ${props =>
+                fill: ${(props) =>
                  props.theme.infoPanel.details.commentEditorIconColor};
              }
            }
@ -247,7 +247,27 @@ const StyledProperties = styled.div`
  }
 `;

+const StyledItemOptions = styled.div`
+  ${(props) =>
+    props.theme.interfaceDirection === "rtl"
+      ? css`
+          margin-right: auto;
+        `
+      : css`
+          margin-left: auto;
+        `}
+
+  display: flex;
+`;
+
 StyledInfoPanelBody.defaultProps = { theme: Base };
 StyledTitle.defaultProps = { theme: Base };
+StyledItemOptions.defaultProps = { theme: Base };

-export { StyledInfoPanelBody, StyledTitle, StyledSubtitle, StyledProperties };
+export {
+  StyledInfoPanelBody,
+  StyledTitle,
+  StyledSubtitle,
+  StyledProperties,
+  StyledItemOptions,
+};
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js
@ -0,0 +1,46 @@
+import { useState } from "react";
+import styled from "styled-components";
+import Calendar from "@docspace/components/calendar";
+
+const StyledCalendar = styled.div`
+  position: relative;
+
+  .calendar {
+    position: absolute;
+    right: 0;
+    /* ${(props) =>
+      props.isMobile &&
+      css`
+        position: fixed;
+        bottom: 0;
+        inset-inline-start: 0;
+      `} */
+  }
+`;
+
+const CalendarComponent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedDate, setSelectedDate] = useState(null);
+
+  const toggleCalendar = () => setIsOpen((open) => !open);
+  const onDateSet = (date) => {
+    console.log("date", date);
+    setSelectedDate(date);
+    setIsOpen(false);
+  };
+
+  return (
+    <StyledCalendar>
+      <div onClick={toggleCalendar}>Calendar</div>
+      {isOpen && (
+        <Calendar
+          className="calendar"
+          setSelectedDate={onDateSet}
+          selectedDate={selectedDate}
+        />
+      )}
+    </StyledCalendar>
+  );
+};
+
+export default CalendarComponent;
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js
@ -6,15 +6,17 @@ import { ReactSVG } from "react-svg";
 import { Text } from "@docspace/components";

 import ItemContextOptions from "./ItemContextOptions";
+import CalendarComponent from "./Calendar";

-import { StyledTitle } from "../../styles/common";
+import { StyledTitle, StyledItemOptions } from "../../styles/common";

-const FilesItemTitle = ({ t, selection, isSeveralItems }) => {
+const FilesItemTitle = ({ t, selection, isSeveralItems, openHistory }) => {
  const itemTitleRef = useRef();

  if (isSeveralItems) return <></>;

  const icon = selection.icon;
+  //only history

  return (
    <StyledTitle ref={itemTitleRef}>
@ -27,11 +29,15 @@ const FilesItemTitle = ({ t, selection, isSeveralItems }) => {
      </div>
      <Text className="text">{selection.title}</Text>
      {selection && (
-        <ItemContextOptions
-          t={t}
-          itemTitleRef={itemTitleRef}
-          selection={selection}
-        />
+        <StyledItemOptions>
+          {openHistory && <CalendarComponent />}
+
+          <ItemContextOptions
+            t={t}
+            itemTitleRef={itemTitleRef}
+            selection={selection}
+          />
+        </StyledItemOptions>
      )}
    </StyledTitle>
  );
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js
@ -6,16 +6,16 @@ import { ContextMenu, ContextMenuButton } from "@docspace/components";

 import ContextHelper from "../../helpers/ContextHelper";

-const StyledItemContextOptions = styled.div`
-  ${props =>
-    props.theme.interfaceDirection === "rtl"
-      ? css`
-          margin-right: auto;
-        `
-      : css`
-          margin-left: auto;
-        `}
-`;
+// const StyledItemContextOptions = styled.div`
+//   ${props =>
+//     props.theme.interfaceDirection === "rtl"
+//       ? css`
+//           margin-right: auto;
+//         `
+//       : css`
+//           margin-left: auto;
+//         `}
+// `;

 const ItemContextOptions = ({
  t,
@ -33,7 +33,7 @@ const ItemContextOptions = ({

  const contextMenuRef = useRef();

-  const onContextMenu = e => {
+  const onContextMenu = (e) => {
    e.button === 2;
    if (!contextMenuRef.current.menuRef.current) itemTitleRef.current.click(e);
    contextMenuRef.current.show(e);
@ -70,7 +70,7 @@ const ItemContextOptions = ({
  };

  return (
-    <StyledItemContextOptions>
+    <>
      <ContextMenu
        ref={contextMenuRef}
        getContextModel={getData}
@ -91,7 +91,7 @@ const ItemContextOptions = ({
          displayType="toggle"
        />
      )}
-    </StyledItemContextOptions>
+    </>
  );
 };

--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js
@ -44,12 +44,15 @@ const ItemTitle = ({
      ? selectionParentRoom
      : selection;

+  const openHistory = roomsView === "info_history";
+
  return (
    <FilesItemTitle
      selectionLength={selectionLength}
      selection={filesItemSelection}
      isSeveralItems={isSeveralItems}
      getIcon={getIcon}
+      openHistory={openHistory}
    />
  );
 };
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlock.js
@ -41,8 +41,11 @@ const HistoryBlock = ({
    ? initiator.avatarSmall
    : DefaultUserAvatarSmall;

+  console.log("json.ModifiedDate", json.ModifiedDate);
+
  return (
    <StyledHistoryBlock
+      id="StyledHistoryBlock"
      withBottomDivider={!isLastEntity}
      isUserAction={isUserAction}
    >
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js
@ -72,8 +72,10 @@ const History = ({
  if (!selectionHistory) return <Loaders.InfoPanelViewLoader view="history" />;
  if (!selectionHistory?.length) return <NoHistory t={t} />;

+  console.log("selectionHistory", selectionHistory);
+
  return (
-    <StyledHistoryList>
+    <StyledHistoryList id="StyledHistoryList">
      {selectionHistory.map(({ day, feeds }) => [
        <StyledHistorySubtitle key={day}>{day}</StyledHistorySubtitle>,
        ...feeds.map((feed, i) => (
--- a/packages/common/components/Section/sub-components/info-panel-body.js
+++ b/packages/common/components/Section/sub-components/info-panel-body.js
@ -10,7 +10,7 @@ const StyledScrollbar = styled(Scrollbar)`
      box-sizing: border-box;
      & .scroll-wrapper > .scroller > .scroll-body {
        overflow: hidden !important;
-        ${props =>
+        ${(props) =>
          props.theme.interfaceDirection === "rtl"
            ? css`
                padding-left: 17px !important;
@ -30,11 +30,14 @@ const StyledScrollbar = styled(Scrollbar)`
 const SubInfoPanelBody = ({ children, isInfoPanelScrollLocked }) => {
  const content = children?.props?.children;

+  console.log("SubInfoPanelBody");
+
  return (
    <StyledScrollbar
      $isScrollLocked={isInfoPanelScrollLocked}
      scrollclass="section-scroll"
-      stype="mediumBlack">
+      stype="mediumBlack"
+    >
      {content}
    </StyledScrollbar>
  );