diff --git a/.babelrc b/.babelrc
index 67c39e13d..2999e570e 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,8 +1,22 @@
{
- "presets": ["@babel/preset-env", "@babel/preset-react"],
+ "presets": [
+ "@babel/preset-env",
+ [
+ "@babel/preset-react",
+ {
+ "runtime": "automatic"
+ }
+ ]
+ ],
"plugins": [
- "@babel/plugin-proposal-class-properties",
- "@babel/plugin-proposal-object-rest-spread"
+ "@babel/plugin-transform-class-properties",
+ "@babel/plugin-transform-object-rest-spread",
+ [
+ "@babel/plugin-transform-react-jsx",
+ {
+ "runtime": "automatic"
+ }
+ ]
],
"env": {
"production": {
@@ -10,11 +24,15 @@
[
"react-remove-properties",
{
- "properties": ["data-testid"]
+ "properties": [
+ "data-testid"
+ ]
}
]
],
- "ignore": ["src/lib/__tests__/**"]
+ "ignore": [
+ "src/lib/__tests__/**"
+ ]
}
}
}
diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index ef898e76b..000000000
--- a/.eslintrc
+++ /dev/null
@@ -1,34 +0,0 @@
-{
- "plugins": [
- "react",
- "jest",
- "prettier"
- ],
- "env": {
- "jest/globals": true,
- "browser": true,
- "node": true,
- "es6": true
- },
- "rules": {
- "react/jsx-uses-react": 2,
- "react/jsx-uses-vars": 2,
- "react/no-unused-prop-types": 2,
- "react/react-in-jsx-scope": 2,
- "no-labels": 0,
- "arrow-parens": 0
- },
- "extends": [
- "eslint:recommended",
- "plugin:react/recommended",
- "prettier",
- "prettier/react"
- ],
- "parser": "babel-eslint",
- "parserOptions": {
- "ecmaFeatures": {
- "jsx": true
- },
- "sourceType": "module"
- }
-}
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 000000000..39d4ed38b
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,41 @@
+{
+ "env": {
+ "browser": true,
+ "jest/globals": true,
+ "node": true,
+ "es6": true
+ },
+ "settings": {
+ "react": {
+ "version": "detect"
+ }
+ },
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:react/recommended",
+ "prettier"
+ ],
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "ecmaVersion": "latest",
+ "sourceType": "module"
+ },
+ "plugins": [
+ "@typescript-eslint",
+ "react",
+ "jest",
+ "prettier"
+ ],
+ "rules": {
+ "@typescript-eslint/ban-ts-comment": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "react/jsx-uses-vars": 2,
+ "react/no-children-prop": 0,
+ "react/no-unused-prop-types": 0,
+ "no-labels": 0,
+ "arrow-parens": 0,
+ "react/jsx-uses-react": "off",
+ "react/react-in-jsx-scope": "off"
+ }
+}
diff --git a/.gitignore b/.gitignore
index 2db738b4f..7337d0ea4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ package-lock.json
coverage
*.orig
+dist
diff --git a/.prettierrc b/.prettierrc
index fd496a820..e853dcdbb 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,6 @@
{
+ "printWidth": 120,
"singleQuote": true,
- "semi": false
+ "semi": false,
+ "trailingComma": "all"
}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a0fac65e..8ebbe51a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,25 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
## Unreleased
+## 0.30.0 (beta)
+Huge update made by @Remco4EF and @remcoblumink
+ * 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
+
+* Add unit argument to onZoom and onTimeChange callbacks @hckr #655
* Add `className` prop to Timeline component to override `react-calendar-timeline` class #682
+* support zoom level seconds #835 @horizon-plaza
+* custom buffer prop (help with controlled scrolling) @Ilaiwi
+* Fix injecting custom vertical line's class names for time periods longer than day @RafikiTiki
+* fix Context Menu unintentionally disabled by default @dsgipe #769
+* delete props `headerLabelFormats` and `subHeaderLabelFormats` not you can pass `formatLabel` function to `DateHeader` with label width and start and end time of intervals
+
## 0.26.7
@@ -49,11 +67,11 @@ Using controlled scroll and react-spring to trigger scrolling and create an anim
* add documentation for `onItemDeselect` #350 @ilaiwi
* solve a bug where `onItemDeselect` is not triggered as expected for several item clicks #350 @ilaiwi
-* fix row height on browser scaling #615 @gaston-niglia
+* fix row height on browser scaling #615 @gaston-niglia
### Packages
-update to `node-sass@4.12.0` for newer versions of node.
+update to `node-sass@4.12.0` for newer versions of node.
## 0.26.2
@@ -85,7 +103,7 @@ you can as well solve the issue without upgrading by adding the following style
#### Breaking
-* Removed `` in favour of allowing for custom component to be rendered on move or resize. Check out the demo in `demo/app/demo-custom-info-label` for an example on how to display your own custom info label or [this example](https://codesandbox.io/s/timeline-demo-info-label-neec9).
+* Removed `` in favour of allowing for custom component to be rendered on move or resize. Check out the demo in `demo/app/demo-custom-info-label` for an example on how to display your own custom info label or [this example](https://codesandbox.io/s/timeline-demo-info-label-neec9).
## 0.25.4
@@ -383,7 +401,7 @@ from 'react-calendar-timeline'
* added `stickyHeader` to disable/enable timeline header sticking on scroll.
* removed `fullUpdate` prop and functionality. Labels rely on `position: sticky` to show for items that start before `visibleTimeStart`. This (should) greatly improve scroll performance.
-* removed extraneous css such as `text-align: center` on `.rct-item`, `.rct-item-overflow` to simplify the dom structure of `Item.js`
+* removed extraneous css such as `text-align: center` on `.rct-item`, `.rct-item-overflow` to simplify the dom structure of `Item.tsx`
* added `headerRef` callback to receive a reference to the header element. Due to the change in how the header positioning is implemented (i.e. using `position: sticky`), there is a need to use a polyfill in [certain browsers](https://caniuse.com/#feat=css-sticky) that don't support `position: sticky`. With a reference to the header dom element, you can use a polyfill to apply sticky behavior.
* `minimumWidthForItemContentVisibility` prop to control at what width inner item content is rendered.
diff --git a/README.md b/README.md
index daa482dbb..bfb10cfa3 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,28 @@
+
# React Calendar Timeline
A modern and responsive React timeline component.
+**🎉 Version 0.30.0-beta.1 Now Available!**
+
+We're excited to announce the beta release of v0.30.0 which includes:
+- Full TypeScript rewrite
+- Vite as bundler
+- Updated dependencies to latest versions
+- React 18+ support
+
+The beta version is available via:
+```bash
+npm install react-calendar-timeline@beta
+```
+
+We encourage users to try out the beta and provide feedback before the stable release. Please report any issues on GitHub.
+
+ Note: Testing framework has been updated and some tests are currently being migrated.
+
+# ⚠️⚠️⚠️⚠️ HELP WANTED
+please email me [ahmad.ilaiwi@gmail.com](mailto:ahmad.ilaiwi@gmail.com) and we will setup some time to speak and see if you can help maintain this library.
+
![calendar demo](https://raw.githubusercontent.com/namespace-ee/react-calendar-timeline/master/demo.gif)
Checkout the [examples here](https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples)!
@@ -140,6 +161,14 @@ The exact viewport of the calendar. When these are specified, scrolling in the c
**Note that you need to provide either `defaultTimeStart/End` or `visibleTimeStart/End` for the timeline to function**
+## buffer
+
+a number (default to 3) which represents the extra timeline rendered on right and lift of the visible area which the user will scroll through before the time rerenders.
+
+more explication in section [behind the scenes](#behind-the-scenes)
+
+Note: setting buffer to 1 will disable the scrolling on the timeline
+
## selected
An array with id's corresponding to id's in items (`item.id`). If this prop is set you have to manage the selected items yourself within the `onItemSelect` handler to update the property with new id's and use `onItemDeselect` handler to clear selection. This overwrites the default behaviour of selecting one item on click.
@@ -202,6 +231,7 @@ What percentage of the height of the line is taken by the item? Default `0.65`
Smallest time the calendar can zoom to in milliseconds. Default `60 * 60 * 1000` (1 hour)
+__notes__: please note than second won't show up unless you change this to `60 * 1000`
## maxZoom
Largest time the calendar can zoom to in milliseconds. Default `5 * 365.24 * 86400 * 1000` (5 years)
@@ -312,7 +342,7 @@ Called when an empty spot on the canvas was double clicked. Get the group ID and
Called when the canvas is clicked by the right button of the mouse. Note: If this property is set the default context menu doesn't appear
-## onZoom(timelineContext)
+## onZoom(timelineContext, unit)
Called when the timeline is zoomed, either via mouse/pinch zoom or clicking header to change timeline units
@@ -342,7 +372,7 @@ function (action, item, time, resizeEdge) {
```
-## onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas)
+## onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas, unit)
A function that's called when the user tries to scroll. Call the passed `updateScrollCanvas(start, end)` with the updated visibleTimeStart and visibleTimeEnd (as unix timestamps in milliseconds) to change the scroll behavior, for example to limit scrolling.
@@ -435,8 +465,8 @@ Rather than applying props on the element yourself and to avoid your props being
* onTouchEnd: event handler
* onDoubleClick: event handler
* onContextMenu: event handler
- * style: inline object
-
+ * style: inline object
+
\*\* _the given styles will only override the styles that are not a requirement for positioning the item. Other styles like `color`, `radius` and others_
@@ -915,6 +945,12 @@ by default we provide a responsive format for the dates based on the label width
mediumLong: 'HH:mm',
medium: 'HH:mm',
short: 'mm',
+ },
+ second: {
+ "long": 'mm:ss',
+ mediumLong: 'mm:ss',
+ medium: 'mm:ss',
+ "short": 'ss'
}
}
```
@@ -1236,6 +1272,8 @@ This results in a visually endless scrolling canvas with optimal performance.
Extensibility and usability: While some parameters (`onTimeChange`, `moveResizeValidator`) might be hard to configure, these are design decisions to make it as extensible as possible. If you have recipes for common tasks regarding those parameters, send a PR to add them to this doc.
+Note: 3x can be controlled by changing the buffer
+
## Interaction
To interact and navigate within the timeline there are the following options for the user:
@@ -1263,7 +1301,7 @@ $ yarn start
Check http://0.0.0.0:8888/ in your browser and have fun!
-Please run `npm run lint` before you send a pull request. `npm run jest` runs the tests.
+Please run `npm run lint` before you send a pull request. `npm run test` runs the jest tests.
-
-
+
+
+