pixel-react 1.9.2 → 1.9.4

package/src/components/DatePicker/DatePicker.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
+import ReactDOM from 'react-dom';
 import { DayPicker } from 'react-day-picker';
 import { formatInTimeZone } from 'date-fns-tz';
 import TimePicker from './Timepicker';
@@ -38,6 +39,10 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
     new Date()
   );
   const [view, setView] = useState<string>('days');
+  const [positionStyles, setPositionStyles] = useState<{
+    top: number | null;
+    left: number | null;
+  }>({ top: null, left: null });
 
   const selectedDateRef = useRef<Date | undefined>(undefined);
   const [startYear, setStartYear] = useState(() => {
@@ -83,33 +88,38 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
 
   useEffect(() => {
     const adjustPosition = () => {
-      if (containerRef.current && pickerRef.current) {
-        const relativeRect = containerRef.current.getBoundingClientRect();
-        const pickerHeight = pickerRef.current.offsetHeight;
-        const spacing = 5; // spacing in pixels
-
-        const spaceBelow = window.innerHeight - relativeRect.bottom;
-        const spaceAbove = relativeRect.top;
-
-        let top = relativeRect.bottom + window.scrollY + spacing; // Default position to below
-        if (spaceBelow < pickerHeight && spaceAbove >= pickerHeight) {
-          top = relativeRect.top + window.scrollY - pickerHeight - spacing; // Place above
+      if (containerRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const spacing = 8;
+
+        let top = containerRect.bottom + spacing;
+        let left = containerRect.left;
+
+        if (pickerRef.current) {
+          const pickerHeight = pickerRef.current.offsetHeight;
+          const pickerWidth = pickerRef.current.offsetWidth;
+
+          if (window.innerHeight - containerRect.bottom < pickerHeight) {
+            top = containerRect.top - pickerHeight - spacing;
+          }
+          if (window.innerWidth - containerRect.left < pickerWidth) {
+            left = containerRect.right - pickerWidth;
+          }
         }
 
-        // Horizontal position: align to container with optional adjustments
-        const left = relativeRect.left + window.scrollX;
-
-        pickerRef.current.style.top = `${top}px`;
-        pickerRef.current.style.left = `${left}px`;
+        setPositionStyles({ top, left });
       }
     };
 
-    // Initial adjustment
-    adjustPosition();
+    if (isPickerOpen) {
+      adjustPosition();
+      setTimeout(() => {}, 200);
+      window.addEventListener('resize', () => {});
+    }
 
-    // Recalculate on resize
-    window.addEventListener('resize', adjustPosition);
-    return () => window.removeEventListener('resize', adjustPosition);
+    return () => {
+      window.removeEventListener('resize', adjustPosition);
+    };
   }, [isPickerOpen]);
 
   const calendarStyle = {
@@ -151,7 +161,6 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
   };
 
   const handleSave = () => {
-    console.log('selectedDate1', selectedDateRef.current);
     onChange(selectedDateRef.current);
     resetAndCloseDatePicker();
   };
@@ -316,7 +325,15 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
                 'ff-custom-month--disabled': isDisabled,
               })}
             >
-              <Typography>{month}</Typography>
+              <Typography
+                color={
+                  index === selectedMonth?.getMonth()
+                    ? 'var(--primary-button-text-color)'
+                    : undefined
+                }
+              >
+                {month}
+              </Typography>
             </div>
           );
         })}
@@ -370,7 +387,15 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
                 'ff-custom-year--disabled': isDisabled,
               })}
             >
-              <Typography>{year}</Typography>
+              <Typography
+                color={
+                  year === selectedMonth?.getFullYear()
+                    ? 'var(--primary-button-text-color)'
+                    : undefined
+                }
+              >
+                {year}
+              </Typography>
             </div>
           );
         })}
@@ -427,82 +452,89 @@ const CustomDatePicker: React.FC<DatePickerProps> = ({
         )}
       </div>
 
-      {isPickerOpen && (
-        <div
-          className="ff-date-picker-container"
-          ref={pickerRef}
-          style={{
-            zIndex,
-          }}
-        >
-          <div className="ff-calendar-container">
-            <DayPicker
-              style={calendarStyle}
-              className="ff-calendar"
-              mode="single"
-              selected={selectedDate}
-              onSelect={handleDaySelect}
-              month={selectedMonth}
-              onMonthChange={(month) => {
-                if (view === 'days') {
-                  setSelectedMonth(month);
-                }
-              }}
-              onNextClick={handleNextClick}
-              onPrevClick={handlePrevClick}
-              disableNavigation={view === 'months'}
-              disabled={[
-                {
-                  before: new Date(minDate ? minDate : ''),
-                  after: new Date(maxDate ? maxDate : ''),
-                },
-              ]}
-              timeZone={timezone}
-              components={{
-                CaptionLabel: (props) => <CustomCaption {...props} />,
-                PreviousMonthButton: (props) => <CustomPrevButton {...props} />,
-                NextMonthButton: (props) => <CustomNextButton {...props} />,
-                ...(view === 'months'
-                  ? {
-                      MonthGrid: () => <CustomMonthGrid />,
-                    }
-                  : {}),
-                ...(view === 'years'
-                  ? {
-                      MonthGrid: () => <CustomYearGrid />,
-                    }
-                  : {}),
-              }}
-            />
-            {!dateOnly && (
-              <TimePicker
-                value={timeValue}
-                onChange={handleTimeChange}
-                minTime={minTime}
-                maxTime={maxTime}
-                onErrorChange={setTimeError}
-              />
-            )}
-          </div>
-          {!dateOnly && (
-            <div className="ff-date-picker-controls">
-              <Button
-                className="ff-date-picker-button"
-                variant="secondary"
-                onClick={handleCancel}
-                label="Cancel"
-              />
-              <Button
-                className="ff-date-picker-button"
-                variant="primary"
-                onClick={handleSave}
-                label="Save"
-                disabled={timeError}
+      {isPickerOpen &&
+        !!top &&
+        ReactDOM.createPortal(
+          <div
+            className="ff-date-picker-container"
+            ref={pickerRef}
+            style={{
+              zIndex,
+              top: `${positionStyles.top}px`,
+              left: `${positionStyles.left}px`,
+            }}
+          >
+            <div className="ff-calendar-container">
+              <DayPicker
+                style={calendarStyle}
+                className="ff-calendar"
+                mode="single"
+                selected={selectedDate}
+                onSelect={handleDaySelect}
+                month={selectedMonth}
+                onMonthChange={(month) => {
+                  if (view === 'days') {
+                    setSelectedMonth(month);
+                  }
+                }}
+                onNextClick={handleNextClick}
+                onPrevClick={handlePrevClick}
+                disableNavigation={view === 'months'}
+                disabled={[
+                  {
+                    before: new Date(minDate ? minDate : ''),
+                    after: new Date(maxDate ? maxDate : ''),
+                  },
+                ]}
+                timeZone={timezone}
+                components={{
+                  CaptionLabel: (props) => <CustomCaption {...props} />,
+                  PreviousMonthButton: (props) => (
+                    <CustomPrevButton {...props} />
+                  ),
+                  NextMonthButton: (props) => <CustomNextButton {...props} />,
+                  ...(view === 'months'
+                    ? {
+                        MonthGrid: () => <CustomMonthGrid />,
+                      }
+                    : {}),
+                  ...(view === 'years'
+                    ? {
+                        MonthGrid: () => <CustomYearGrid />,
+                      }
+                    : {}),
+                }}
               />
+              {!dateOnly && (
+                <TimePicker
+                  value={timeValue}
+                  onChange={handleTimeChange}
+                  minTime={minTime}
+                  maxTime={maxTime}
+                  onErrorChange={setTimeError}
+                />
+              )}
             </div>
-          )}
-        </div>
-      )}
+            {!dateOnly && (
+              <div className="ff-date-picker-controls">
+                <Button
+                  className="ff-date-picker-button"
+                  variant="secondary"
+                  onClick={handleCancel}
+                  label="Cancel"
+                />
+                <Button
+                  className="ff-date-picker-button"
+                  variant="primary"
+                  onClick={handleSave}
+                  label="Save"
+                  disabled={timeError}
+                />
+              </div>
+            )}
+          </div>,
+          document.body
+        )}
     </div>
   );
 };

package/src/components/DatePicker/Timepicker.tsx

@@ -18,7 +18,6 @@ const TimePicker: React.FC<TimePickerProps> = ({
   const [period, setPeriod] = useState<string | undefined>('AM');
   const [timeFieldError, setTimeFieldError] = useState<boolean>(false);
   const [isPeriodDropdownOpen, setIsPeriodDropdownOpen] = useState(false);
-  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
   const inputRef = useRef<HTMLInputElement>(null);
   const periodRef = useRef<HTMLDivElement>(null);
 
@@ -173,10 +172,6 @@ const TimePicker: React.FC<TimePickerProps> = ({
 
   const togglePeriodDropdown = () => {
     setIsPeriodDropdownOpen((prev) => !prev);
-    if (periodRef.current) {
-      const { top, left, height } = periodRef.current.getBoundingClientRect();
-      setDropdownPosition({ top: top + height, left: left });
-    }
   };
 
   const handlePeriodChange = (option: string) => {
@@ -322,14 +317,7 @@ const TimePicker: React.FC<TimePickerProps> = ({
           </div>
 
           {isPeriodDropdownOpen && (
-            <ul
-              className="ff-time-period-options"
-              style={{
-                top: `${dropdownPosition.top}px`,
-                left: `${dropdownPosition.left}px`,
-              }}
-              role="listbox"
-            >
+            <ul className="ff-time-period-options" role="listbox">
               <Typography
                 as="li"
                 className="ff-option-item"

package/src/components/Icon/iconList.ts

@@ -259,6 +259,13 @@ import ExternalUser from '../../assets/icons/external_user.svg?react';
 import SingleUser from '../../assets/icons/single_user.svg?react';
 import GroupUser from '../../assets/icons/group_user.svg?react';
 import TestFreshersLogo from '../../assets/icons/test_freshers_logo.svg?react';
+import Azure from '../../assets/icons/azure.svg?react';
+import Bitbucket from '../../assets/icons/bitbucket.svg?react';
+import Github from '../../assets/icons/github.svg?react';
+import Gitlab from '../../assets/icons/gitlab.svg?react';
+import Jenkins from '../../assets/icons/jenkins.svg?react';
+import JiraLogo from '../../assets/icons/jira_logo.svg?react';
+import Slack from '../../assets/icons/slack.svg?react';
 import DisableIcon from '../../assets/icons/disable_icon.svg?react';
 import EnableIcon from '../../assets/icons/enable_icon.svg?react';
 
@@ -280,6 +287,7 @@ import FileColored from '../../assets/icons/file_colored.svg?react';
 import JiraColored from '../../assets/icons/jira_colored.svg?react';
 import Screenshot from '../../assets/icons/screenshot.svg?react';
 import DeleteFilled from '../../assets/icons/delete_filled.svg?react';
+import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react'
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -534,6 +542,13 @@ Components['unfollow_icon'] = UnfollowIcon;
 Components['external_user'] = ExternalUser;
 Components['single_user'] = SingleUser;
 Components['group_user'] = GroupUser;
+Components['azure'] = Azure;
+Components['bitbucket'] = Bitbucket;
+Components['github'] = Github;
+Components['gitlab'] = Gitlab;
+Components['jenkins'] = Jenkins;
+Components['jira_logo'] = JiraLogo;
+Components['slack'] = Slack;
 Components['disable_icon'] = DisableIcon;
 Components['enable_icon'] = EnableIcon;
 Components['clear_history'] = ClearHistory;
@@ -554,5 +569,6 @@ Components['file_colored'] = FileColored;
 Components['jira_colored'] = JiraColored;
 Components['screenshot'] = Screenshot;
 Components['delete_filled'] = DeleteFilled;
+Components['primary_calendar_icon'] = PrimaryCalendarIcon
 
 export default Components;

package/src/components/Table/Table.scss

@@ -1,6 +1,7 @@
 .ff-fixed-header-table {
   overflow-y: auto;
 }
+
 .ff-table-icon {
   position: absolute;
   top: 10px;
@@ -12,21 +13,25 @@
 
 .ff-table {
   width: 100%;
+
   th,
   td {
     text-align: left;
     font-size: 12px;
     padding: 9px 8px;
   }
+
   thead {
     tr {
       th {
         border-bottom: 1px solid var(--slider-table-color);
       }
+
       th {
         .ff-label-checkbox-container {
           display: flex;
           align-items: center;
+
           .ff-table-checkbox {
             padding-right: 8px;
           }
@@ -34,19 +39,42 @@
       }
     }
   }
+
   tbody {
     tr {
       .action-column {
         opacity: 0;
       }
+
       .icon-container {
-        padding-left: 10px;
+        padding-left: 8px;
         opacity: 0;
         display: flex;
         justify-content: flex-end;
         transition: opacity 0.3s ease, transform 0.3s ease;
         transform: translateX(20px);
       }
+
+      .ff-data-checkbox-container {
+        display: flex;
+        align-items: center;
+
+        .ff-table-checkbox {
+          padding-right: 8px;
+        }
+
+        .ff-table-drag {
+          opacity: 0;
+          transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+
+        .ff-table-drag-icon {
+          opacity: 0;
+          transition: opacity 0.3s ease, transform 0.3s ease;
+          cursor: grab;
+        }
+      }
+
       &:hover {
         background-color: var(--hover-color);
 
@@ -54,7 +82,13 @@
           opacity: 1;
           transform: translateX(0);
         }
+
+        .ff-table-drag,
+        .ff-table-drag-icon {
+          opacity: 1;
+        }
       }
+
       td {
         position: relative;
         color: var(--table-column-text-color);
@@ -63,36 +97,34 @@
           cursor: pointer;
         }
       }
-      td {
-        .ff-data-checkbox-container {
-          display: flex;
-          align-items: center;
-          .ff-table-checkbox {
-            padding-right: 8px;
-          }
-        }
-      }
     }
   }
+
   .primary-bg {
     background-color: var(--brand-color);
   }
+
   .secondary-bg {
     background-color: var(--slider-table-color);
   }
+
   .tertiary-bg {
     background-color: var(--custom-table-header-bg-color);
   }
+
   .default-bg {
     background-color: transparent;
   }
+
   .default-color {
     color: var(--table-header-text-color);
   }
+
   .primary-color {
     color: var(--brand-color);
   }
 }
+
 .border-borderRadius {
   border: 1px solid var(--slider-table-color);
   border-radius: 5px;
@@ -105,6 +137,7 @@
   z-index: 99;
   background-color: Var(--file-details-bg);
 }
+
 .no-data-content {
   display: flex;
   flex-direction: column;
@@ -115,4 +148,4 @@
 tbody tr.disabled-row {
   opacity: 0.5;
   cursor: not-allowed;
-}
+}

package/src/components/Table/Table.stories.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { useEffect, useState } from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import Table from './Table';
-
+import { ffid } from '../../utils/ffID/ffid';
+import { rearrangeDragItem } from '../../utils/swapArrayItem/dragAndDropUtils';
 const meta: Meta<typeof Table> = {
   title: 'Components/Table',
   component: Table,
@@ -20,6 +21,7 @@ const defaultArgs = {
 const sampleData = [
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user4',
       modifiedOn: '18-03-2024 10:47',
       name: 'Test1',
@@ -31,6 +33,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user3',
       modifiedOn: '13-03-2024 15:15',
       name: 'Test2',
@@ -42,6 +45,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user2',
       modifiedOn: '13-03-2024 15:30',
       name: 'Test3',
@@ -53,6 +57,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user1',
       modifiedOn: '18-03-2024 15:36',
       name: 'Test4',
@@ -64,6 +69,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user4',
       modifiedOn: '18-03-2024 10:47',
       name: 'Test1',
@@ -75,6 +81,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user3',
       modifiedOn: '13-03-2024 15:15',
       name: 'Test2',
@@ -86,6 +93,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user2',
       modifiedOn: '13-03-2024 15:30',
       name: 'Test3',
@@ -97,6 +105,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user1',
       modifiedOn: '18-03-2024 15:36',
       name: 'Test4',
@@ -108,6 +117,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user4',
       modifiedOn: '18-03-2024 10:47',
       name: 'Test1',
@@ -119,6 +129,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user3',
       modifiedOn: '13-03-2024 15:15',
       name: 'Test2',
@@ -130,6 +141,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user2',
       modifiedOn: '13-03-2024 15:30',
       name: 'Test3',
@@ -141,6 +153,7 @@ const sampleData = [
   },
   {
     project: {
+      id: ffid(),
       modifiedByUname: 'user1',
       modifiedOn: '18-03-2024 15:36',
       name: 'Test4',
@@ -247,6 +260,7 @@ export const PageTable: Story = {
     );
   },
 };
+
 export const PrimaryHeader: Story = {
   args: {
     ...defaultArgs,
@@ -370,4 +384,49 @@ export const TableWithNoData: Story = {
     );
   },
 };
+
+export const DragAndDropTable: Story = {
+  args: {
+    ...defaultArgs,
+    data: sampleData.map((x) => x.project),
+
+    columns: columnsData,
+    tableDataTextColor: 'var(--brand-color)',
+  },
+  render: () => {
+    // important prerequisite tableData should have unique IDs
+    const [tableData, setTableData] = useState(
+      sampleData.map((data) => data.project)
+    );
+    useEffect(() => {
+      let sampleArray: any = [];
+      sampleData.forEach((data) => {
+        sampleArray.push(data.project);
+      });
+      setTableData(sampleArray);
+    }, []);
+
+    const handleIconClick = () => {};
+
+    const onDragEnd = (oldIndex: number, newIndex: number) => {
+      const updatedData = rearrangeDragItem(tableData, oldIndex, newIndex);
+      setTableData(updatedData);
+    };
+    return (
+      <>
+        <Table
+          draggable
+          onDragEnd={onDragEnd}
+          {...defaultArgs}
+          data={tableData}
+          columns={columnsData}
+          headerType="secondary"
+          noDataContent="No data found"
+          headerIconName={'expand_icon'}
+          headerIconOnClick={handleIconClick}
+        />
+      </>
+    );
+  },
+};
 export default meta;