Merge pull request #933 from 4Efficiency-Services/master

Author: Ilaiwi

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+## 0.30.0 (unreleased)
+ * full rewrite to typescript
+ * uses Vite as bundler
+ * Updates dependencies to latest versions
+ * Updates react usage to 18+
+ * REMOVED enzyme for tests --> testing does not work atm
+
 
 ## 0.28.0
 

README.md

@@ -1,5 +1,7 @@
-# fork from react-calendar-timeline
-# React Calendar Timeline docs here may not be relevant
+# ⚠️⚠️⚠️⚠️ HELP WANTED
+please email me [[email protected]](mailto:[email protected]) and we will setup some time to speak and see if you can help maintain this library.
+
+# React Calendar Timeline
 
 A modern and responsive React timeline component.
 

demo/package.json

@@ -17,7 +17,7 @@
   },
   "packageManager": "[email protected]",
   "resolutions": {
-    "react-calendar-timeline-4ef": "../src/index.ts"
+    "react-calendar-timeline": "../src/index.ts"
   },
   "devDependencies": {
     "@types/randomcolor": "^0.5.9",

index.js

@@ -1 +1 @@
-export * from './dist/react-calendar-timeline-4ef.es.js'
+export * from './dist/react-calendar-timeline.es.js'

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "react-calendar-timeline-4ef",
-  "version": "1.0.18",
-  "description": "fork form react-calendar-timeline with TS latest react and other improvements",
+  "name": "react-calendar-timeline",
+  "version": "0.30.0",
+  "description": "react-calendar-timeline",
   "packageManager": "[email protected]",
   "scripts": {
     "build": "tsc && vite build",
@@ -10,16 +10,16 @@
     "test": "jest",
     "test:watch": "jest --watch"
   },
-  "main": "./dist/react-calendar-timeline-4ef.umd.js",
-  "module": "./dist/react-calendar-timeline-4ef.es.js",
+  "main": "./dist/react-calendar-timeline.umd.js",
+  "module": "./dist/react-calendar-timeline.es.js",
   "exports": {
     "./styles.css": "./dist/styles.css",
     ".": {
       "types": [
         "./dist/index.d.ts"
       ],
-      "import": "./dist/react-calendar-timeline-4ef.es.js",
-      "require": "./dist/react-calendar-timeline-4ef.umd.js"
+      "import": "./dist/react-calendar-timeline.es.js",
+      "require": "./dist/react-calendar-timeline.umd.js"
     }
   },
   "types": "./dist/index.d.ts",
@@ -32,7 +32,44 @@
     "url": "https://github.com/namespace-ee/react-calendar-timeline.git"
   },
   "private": false,
-  "author": "4EF",
+  "author": "Marius Andra <[email protected]>",
+  "contributors": [
+    {
+      "name": "Stanisław Chmiela",
+      "email": "[email protected]"
+    },
+    {
+      "name": "Mike Joyce",
+      "url": "https://github.com/mcMickJuice"
+    },
+    {
+      "name": "Samuel Rossetti"
+    },
+    {
+      "name": "amakhrov",
+      "url": "https://github.com/amakhrov"
+    },
+    {
+      "name": "Ahmad Ilaiwi",
+      "url": "https://github.com/Ilaiwi"
+    },
+    {
+      "name": "dkarnutsch",
+      "url": "https://github.com/dkarnutsch"
+    },
+    {
+      "name": "Alex Maclean",
+      "url": "https://github.com/acemac"
+    },
+    {
+      "name": "Kevin Mann",
+      "url": "https://github.com/kevinmanncito"
+    },
+    {
+      "name": "Remco Blumink",
+      "url": ""
+    }
+  ],
   "license": "MIT",
   "keywords": [
     "react",

src/lib/Timeline.tsx

@@ -264,8 +264,8 @@ export default class ReactCalendarTimeline<
     this.hasSelectedItem = this.hasSelectedItem.bind(this)
     this.isItemSelected = this.isItemSelected.bind(this)
 
-    let visibleTimeStart = null
-    let visibleTimeEnd = null
+    let visibleTimeStart: number | null = null
+    let visibleTimeEnd: number | null = null
 
     if (this.props.defaultTimeStart && this.props.defaultTimeEnd) {
       visibleTimeStart = this.props.defaultTimeStart //.valueOf()

src/lib/headers/CustomDateHeader.tsx

@@ -3,23 +3,21 @@ import Interval from './Interval'
 import { Interval as IntervalType, IntervalRenderer } from '../types/main'
 import { Dayjs } from 'dayjs'
 import { SelectUnits } from '../utility/calendar'
+import { GetIntervalPropsType } from './types'
+
 export interface CustomDateHeaderProps<Data> {
   headerContext: {
     intervals: IntervalType[]
     unit: SelectUnits
   }
   getRootProps: (props?: any) => any
-  getIntervalProps: (props?: any) => any
+  getIntervalProps: GetIntervalPropsType
   showPeriod: (start: Dayjs, end: Dayjs) => void
   data: {
     style: React.CSSProperties
     intervalRenderer: (props: IntervalRenderer<Data>) => React.ReactNode
     className?: string
-    getLabelFormat: (
-      interval: [Dayjs, Dayjs],
-      unit: string,
-      labelWidth: number,
-    ) => string
+    getLabelFormat: (interval: [Dayjs, Dayjs], unit: string, labelWidth: number) => string
     unitProp?: 'primaryHeader'
     headerData?: Data
   }
@@ -30,27 +28,12 @@ export function CustomDateHeader<Data>({
   getRootProps,
   getIntervalProps,
   showPeriod,
-  data: {
-    style,
-    intervalRenderer,
-    className,
-    getLabelFormat,
-    unitProp,
-    headerData,
-  },
+  data: { style, intervalRenderer, className, getLabelFormat, unitProp, headerData },
 }: CustomDateHeaderProps<Data>) {
   return (
-    <div
-      data-testid={`dateHeader`}
-      className={className}
-      {...getRootProps({ style })}
-    >
+    <div data-testid={`dateHeader`} className={className} {...getRootProps({ style })}>
       {intervals.map((interval) => {
-        const intervalText = getLabelFormat(
-          [interval.startTime, interval.endTime],
-          unit,
-          interval.labelWidth,
-        )
+        const intervalText = getLabelFormat([interval.startTime, interval.endTime], unit, interval.labelWidth)
         return (
           <Interval
             key={`label-${interval.startTime.valueOf()}`}

src/lib/headers/CustomHeader.tsx

@@ -6,6 +6,7 @@ import { Interval, TimelineTimeSteps } from '../types/main'
 import { Dayjs } from 'dayjs'
 import { CustomDateHeaderProps } from './CustomDateHeader'
 import isEqual from 'lodash/isEqual'
+import { GetIntervalPropsType } from './types'
 
 export type CustomHeaderProps<Data> = {
   children: (p: CustomDateHeaderProps<Data>) => ReactNode
@@ -55,6 +56,10 @@ class CustomHeader<Data> extends React.Component<CustomHeaderProps<Data>, State>
     }
   }
 
+  static defaultProps = {
+    height: 30,
+  }
+
   /*shouldComponentUpdate(nextProps: CustomHeaderProps<Data>) {
     if (
       nextProps.canvasTimeStart !== this.props.canvasTimeStart ||
@@ -127,7 +132,7 @@ class CustomHeader<Data> extends React.Component<CustomHeaderProps<Data>, State>
     }
   }
 
-  getIntervalProps = (props: { interval?: Interval; style?: CSSProperties } = {}) => {
+  getIntervalProps: GetIntervalPropsType = (props: { interval?: Interval; style?: CSSProperties } = {}) => {
     const { interval, style } = props
     if (!interval) throw new Error('you should provide interval to the prop getter')
     const { startTime, labelWidth, left } = interval
@@ -185,7 +190,7 @@ export type CustomHeaderWrapperProps<Data> = {
   children: (p: CustomDateHeaderProps<Data>) => ReactNode
   unit?: keyof TimelineTimeSteps
   headerData?: Data
-  height: number
+  height?: number | undefined
 }
 
 function CustomHeaderWrapper<Data>({ children, unit, headerData, height }: CustomHeaderWrapperProps<Data>) {
@@ -206,8 +211,4 @@ function CustomHeaderWrapper<Data>({ children, unit, headerData, height }: Custo
   )
 }
 
-CustomHeaderWrapper.defaultProps = {
-  height: 30,
-}
-
 export default CustomHeaderWrapper

src/lib/headers/Interval.tsx

@@ -3,10 +3,7 @@ import { getNextUnit, SelectUnits } from '../utility/calendar'
 import { composeEvents } from '../utility/events'
 import { Dayjs } from 'dayjs'
 import { IntervalRenderer, Interval as IntervalType, GetIntervalProps } from '../types/main'
-
-type GetIntervalPropsParams = {
-  interval: IntervalType
-} & HTMLAttributes<HTMLDivElement>
+import { GetIntervalPropsType } from './types'
 
 export type IntervalProps<Data> = {
   intervalRenderer: (p: IntervalRenderer<Data>) => ReactNode
@@ -15,7 +12,7 @@ export type IntervalProps<Data> = {
   showPeriod: (startTime: Dayjs, endTime: Dayjs) => void
   intervalText: string
   primaryHeader: boolean
-  getIntervalProps: (props?: GetIntervalPropsParams) => HTMLAttributes<HTMLDivElement>
+  getIntervalProps: GetIntervalPropsType
 
   headerData?: Data
 }
@@ -33,7 +30,7 @@ class Interval<Data> extends React.PureComponent<IntervalProps<Data>> {
     }
   }
 
-  getIntervalProps = (props: GetIntervalProps = {}): HTMLAttributes<HTMLDivElement> => {
+  getIntervalProps = (props: GetIntervalProps = {}): HTMLAttributes<HTMLDivElement> & { key: string } => {
     return {
       ...this.props.getIntervalProps({
         interval: this.props.interval,
@@ -58,11 +55,12 @@ class Interval<Data> extends React.PureComponent<IntervalProps<Data>> {
         />
       )
     }
-
+    const { key, ...rest } = this.getIntervalProps()
     return (
       <div
         data-testid="dateHeaderInterval"
-        {...this.getIntervalProps()}
+        {...rest}
+        key={key}
         className={`rct-dateHeader ${this.props.primaryHeader ? 'rct-dateHeader-primary' : ''}`}
       >
         <span>{intervalText}</span>

src/lib/headers/types.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react'
+import { Interval } from '../types/main'
+
+export type GetIntervalPropsParams = {
+  interval: Interval
+} & HTMLAttributes<HTMLDivElement>
+export type GetIntervalPropsType = (props?: GetIntervalPropsParams) => HTMLAttributes<HTMLDivElement> & {
+  key: string
+}