Merge pull request #108 from commonsku/windowed-table-updates

Windowed table updates
commonsku · Feb 8, 2022 · 9ae2ea1 · 9ae2ea1
2 parents 2cb41a0 + fae3b80
commit 9ae2ea1
Show file tree

Hide file tree

Showing 19 changed files with 687 additions and 47 deletions.
diff --git a/src/@commonsku/styles/Button.tsx b/src/@commonsku/styles/Button.tsx
@@ -24,7 +24,7 @@ import { SizerCss, SizerTypes } from './Sizer';
 
 */
 
-const sizes = {
+export const sizes = {
   tiny: {
     'font-size': '.8em',
     'font-family': "'skufont-regular', sans-serif",
@@ -41,9 +41,10 @@ const sizes = {
     padding: '17px 50px',
   },
 };
+export type TSize = keyof typeof sizes;
 
 type ButtonProps = {
-  secondary?: boolean, cta?: boolean, size?: keyof typeof sizes
+  secondary?: boolean, cta?: boolean, size?: TSize
 } & SharedStyleTypes & SizerTypes;
 
 const getSizeStyle = (style: string, defaults: string) => {

diff --git a/src/@commonsku/styles/Dropdown.tsx b/src/@commonsku/styles/Dropdown.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode, useEffect, useState, useRef } from 'react';
 import styled from 'styled-components'
 import { getColor } from './Theme';
-import { Button } from './Button';
+import { Button, TSize } from './Button';
 import { UpArrowIcon } from './icons';
 import { document } from '../utils';
 
@@ -69,13 +69,34 @@ export const DropDownContent = styled.div<DropdownContentProps>`
 */
 `;
 
-export const Dropdown = ({ items, children, underlined, primary, text, icon, openMenu=false, mouseLeaveCallback, ...props }: {
-    items?: Array<{onClick?: Function|VoidFunction|null, props?:{[key: string]: any, underlined?:boolean}, content: ReactNode|string|any}>
-    children?: any
-    icon?: ReactNode
-    openMenu?: boolean
-    mouseLeaveCallback?: any
-} & DropdownContentProps) => {
+export type TDropdownItem = {
+    onClick?: Function|VoidFunction|null;
+    props?: {
+        [key: string]: any;
+        underlined?:boolean;
+    };
+    content: ReactNode|string|any;
+};
+export type DropdownProps = {
+    items?: Array<TDropdownItem>;
+    icon?: ReactNode;
+    openMenu?: boolean;
+    mouseLeaveCallback?: any;
+    size?: TSize;
+};
+
+export const Dropdown = ({
+    items,
+    children=undefined,
+    underlined,
+    primary,
+    text,
+    icon,
+    openMenu=false,
+    mouseLeaveCallback,
+    size,
+    ...props
+}: React.PropsWithChildren<DropdownProps & DropdownContentProps>) => {
 
     const node = useRef();
     const [showMenu, setShowMenu] = useState(openMenu);
@@ -117,7 +138,7 @@ export const Dropdown = ({ items, children, underlined, primary, text, icon, ope
                         {icon}
                     </span>
                 :
-                    <Button cta={Boolean(!primary)} onClick={() => setShowMenu(!showMenu)}>
+                    <Button size={size} cta={Boolean(!primary)} onClick={() => setShowMenu(!showMenu)}>
                         {text ? text : "Actions"} <UpArrowIcon {...iconProps} />
                     </Button>
                 }

diff --git a/src/@commonsku/styles/Tabs.tsx b/src/@commonsku/styles/Tabs.tsx
@@ -6,19 +6,19 @@ const tabSizes = {
   small: css`
     font-size: 0.9rem;
     padding: 0.5rem 5px;
-    maring: 0;
+    margin: 0;
   `,
   medium: css`
     font-size: inherit;
     padding: 1rem 12px;
-    maring: 0 15px 0 0;
+    margin: 0 15px 0 0;
   `,
 };
 
 const TabBar = styled.ul<{padded?: boolean} & SharedStyleTypes>`
   &&& {
     display: block;
-    font-size: 1.125rem;
+    font-size: 16px;
     font-family: 'skufont-demibold', sans-serif;
     margin: 0;
     margin-bottom: ${props => props.padded ? "20px" : 0};

diff --git a/src/@commonsku/styles/Task.tsx b/src/@commonsku/styles/Task.tsx
@@ -88,6 +88,7 @@ const CalendarTask = React.forwardRef(({
   onClickCheckbox,
   colorType='light-green',
   isDescriptionHtml=false,
+  hideCheckbox=false,
   ...props
 }: React.PropsWithChildren<CalendarTaskProps & SharedStyleTypes>, ref: React.Ref<HTMLInputElement>) => {
   const [checked, setChecked] = useState<boolean>(completed);
@@ -101,7 +102,7 @@ const CalendarTask = React.forwardRef(({
       backgroundColor={colorType === 'light-red' ? '#ffebf2' : '#01d37417'}
       {...props}
     >
-      <LabeledCheckbox ref={ref}
+      {!hideCheckbox ? <LabeledCheckbox ref={ref}
         stopPropagation
         checked={checked}
         checkboxPosition="top-right"
@@ -131,7 +132,12 @@ const CalendarTask = React.forwardRef(({
             return !s;
           });
         }}
-      />
+      /> : <>
+        <TaskLabel onClick={e => { e.preventDefault(); }} style={{fontWeight: 'bold' }}>
+          <TaskName>{title}</TaskName>
+          {date ? <div>{_.isDate(date) ? format(date, 'yyyy-mm-dd') : date}</div> : null}
+        </TaskLabel>
+      </>}
       <StyledCalendarTaskBody
         {...(isDescriptionHtml && typeof description === 'string'
             ? { dangerouslySetInnerHTML: { __html: description } }

diff --git a/src/@commonsku/styles/Theme.tsx b/src/@commonsku/styles/Theme.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ThemeProvider } from "styled-components";
 import GlobalStyle from "./globalStyles";
 import _ from 'lodash'
+import colorPalettes from "./colors";
 
 
 export const colors = {
@@ -32,6 +33,11 @@ export const colors = {
   primary2: '#00A0B6',
   primary20: '#00788A',
   primary200: '#004D59',
+
+  tableHeaderBg: '#F6FEFF',
+  tableBorder: '#edf2f5',
+
+  ...colorPalettes,
 };
 export const fonts = ["'skufont-demibold'", 'sans-serif', 'Roboto'];
 export const fontSizes = {

diff --git a/src/@commonsku/styles/calendar/DraggableTasksCalendar.tsx b/src/@commonsku/styles/calendar/DraggableTasksCalendar.tsx
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { DragDropContext, DropResult } from "react-beautiful-dnd";
-import { getWeek, } from 'date-fns'
+import { getWeek, getYear } from 'date-fns'
 import { CalendarTaskProps, } from '../Task';
 import { CalendarProps } from './Calendar';
 import { TabType } from '../Tabs';
@@ -71,7 +71,12 @@ const DraggableTasksCalendar = ({
     days: convertTasksToDays({ currentMonth, currentWeek, tasks, }).reduce(
       (acc, v) => ({ ...acc, [v.__id__]: v }), {}
     ),
-    footerTasks: footerTasks.filter(t => t.date ? getWeek(t.date) < currentWeek : false),
+    footerTasks: footerTasks.filter(
+      t => t.date
+        ? (getWeek(t.date) < currentWeek && getYear(t.date) === getYear(currentMonth))
+          || getYear(t.date) < getYear(currentMonth)
+        : false
+    ),
   });
   const [showWeekend, setShowWeekend] = useState(weekend);
 
@@ -88,8 +93,16 @@ const DraggableTasksCalendar = ({
   }, [currentMonth, currentWeek, tasks]);
 
   useEffect(() => {
-    setState(s => ({...s, footerTasks: footerTasks.filter(t => t.date ? getWeek(t.date) < currentWeek : false), }));
-  }, [footerTasks, currentWeek]);
+    setState(s => ({
+      ...s,
+      footerTasks: footerTasks.filter(
+        t => t.date
+          ? (getWeek(t.date) < currentWeek && getYear(t.date) === getYear(currentMonth))
+            || getYear(t.date) < getYear(currentMonth)
+          : false
+      ),
+    }));
+  }, [footerTasks, currentWeek, currentMonth]);
 
   const headerProps = {
     onNextWeek,

diff --git a/src/@commonsku/styles/calendar/DroppableFooter.tsx b/src/@commonsku/styles/calendar/DroppableFooter.tsx
@@ -21,7 +21,9 @@ const DroppableFooter = ({tasks, ...props}: DroppableFooterProps) => {
   return (
     <Droppable droppableId={'footer-droppable'} key={'footer-droppable'} isDropDisabled>
       {(provided, snapshot) => (
-        <div {...droppableChildWrapperProps(provided, snapshot, { style: !tasks.length ? {minHeight: 0} : {minHeight: 0} })}>
+        <div {...droppableChildWrapperProps(provided, snapshot, {
+          style: { minHeight: 0, maxHeight: 300, overflow: 'auto' }
+        })}>
           {provided.placeholder}
           <DraggableCalendarFooterTasks {...props} tasks={tasks} />
         </div>

diff --git a/src/@commonsku/styles/calendar/TasksCalendarHeader.tsx b/src/@commonsku/styles/calendar/TasksCalendarHeader.tsx
@@ -3,13 +3,12 @@ import { format, getWeek } from 'date-fns';
 import { colors, } from '../Theme';
 import { Row, Col, } from '../FlexboxGrid';
 import HeaderWrapper from './HeaderWrapper';
-import { Tabs } from '../Tabs';
+import { Tabs, TabType } from '../Tabs';
 import styled from 'styled-components';
 import { Text } from '../Text';
 import {GearIcon, NextPrevIcon} from '../icons';
 import {Dropdown} from '../Dropdown';
 import { Button } from '../Button';
-import { TabType } from '../Tabs';
 
 const WeekNav = styled(Text)`
   display: inline-block;
@@ -46,7 +45,7 @@ export const TasksCalendarHeader = ({
     return (
         <HeaderWrapper style={{padding: "0.5rem"}}>
             <Col start xs md={7} padded>
-                <Tabs size="small" tabs={tabs} />
+                <Tabs size="medium" tabs={tabs} />
             </Col>
             <Col end xs md={5} style={{fontSize: '0.8em'}}>
                 {showAddTaskBtn ? <Button onClick={onClickAddTask} style={{marginRight: 10, verticalAlign: 'bottom',}}>+ Add Task</Button> : null}