react-chrono - npm Package Compare versions

Comparing version 1.0.17 to 1.0.18

dist/models/TimelineCollnModel.d.ts

@@ -9,12 +9,12 @@ import { TimelineItemViewModel } from "./TimelineItemModel";
     mode: "HORIZONTAL" | "VERTICAL" | "TREE";
+    slideShowRunning?: boolean;
+    theme?: Theme;
     wrapperId: string;
-    theme?: Theme;
-    slideShowRunning?: boolean;
 }
 export interface Scroll {
+    timelineContentHeight: number;
+    timelineContentOffset: number;
     timelinePointHeight: number;
     timelinePointOffset: number;
     timelinePointWidth: number;
-    timelineContentHeight: number;
-    timelineContentOffset: number;
 }

dist/models/TimelineContentModel.d.ts

 import { Theme } from "./TimelineTreeModel";
 export interface TimelineContentModel {
+    active?: boolean;
     content: string;
-    active?: boolean;
-    title?: string;
     detailedText?: string;
     onShowMore: () => void;
+    slideShowActive?: boolean;
     theme?: Theme;
-    slideShowActive?: boolean;
+    title?: string;
 }

dist/models/TimelineItemModel.d.ts

 import { Scroll } from "./TimelineCollnModel";
 import { Theme } from "./TimelineTreeModel";
+/**
+ *
+ *
+ * @export
+ * @interface TimelineItemModel
+ */
 export interface TimelineItemModel {
     active?: boolean;
+    contentDetailedText?: string;
+    contentText: string;
     contentTitle?: string;
-    contentText: string;
-    contentDetailedText?: string;
     id?: string;
@@ -14,8 +20,8 @@ position?: string;
 export interface TimelineItemViewModel extends TimelineItemModel {
+    autoScroll: ({ timelinePointOffset, timelinePointWidth, timelinePointHeight, timelineContentHeight }: Partial<Scroll>) => void;
     mode: "HORIZONTAL" | "VERTICAL" | "TREE";
+    onClick: (id?: string) => void;
+    slideShowRunning?: boolean;
     theme?: Theme;
-    onClick: (id?: string) => void;
-    autoScroll: ({ timelinePointOffset, timelinePointWidth, timelinePointHeight, timelineContentHeight }: Partial<Scroll>) => void;
     wrapperId: string;
-    slideShowRunning?: boolean;
 }

dist/models/TimelineModel.d.ts

@@ -8,8 +8,6 @@ import { TimelineItemModel } from "./TimelineItemModel";
     onPrevious: () => void;
+    onTimelineUpdated?: (id: number) => void;
     slideShowRunning?: boolean;
-    onTimelineUpdated?: (id: number) => void;
 }
 export interface TimelineProps {
-    slideItemDuration?: number;
-    titlePosition?: "TOP" | "BOTTOM" | "ALTERNATE";
     disableNavOnKey?: boolean;
@@ -20,3 +18,5 @@ disableNavOnScroll?: boolean;
     mode?: "VERTICAL" | "HORIZONTAL" | "TREE";
+    slideItemDuration?: number;
     slideShow?: boolean;
+    titlePosition?: "TOP" | "BOTTOM" | "ALTERNATE";
     theme?: {
@@ -23,0 +23,0 @@ primary: string;

dist/models/TimelineTreeModel.d.ts

 import { TimelineItemViewModel } from "./TimelineItemModel";
 import { Scroll } from "./TimelineCollnModel";
 export interface TreeLeafModel {
+    active?: boolean;
+    alternateCards?: boolean;
     className: string;
     id?: string;
-    active?: boolean;
+    onActive: (timelinePointOffset: number) => void;
     onClick: (id: string) => void;
-    onActive: (timelinePointOffset: number) => void;
-    alternateCards?: boolean;
     theme?: Theme;
 }
 export interface TreeBranchModel {
+    active?: boolean;
     className: string;
-    index: number;
+    contentDetailedText?: string;
     contentText: string;
     contentTitle?: string;
-    contentDetailedText?: string;
-    active?: boolean;
     id?: string;
+    index: number;
     onClick: (id: string) => void;
     onActive: (timelinePointOffset: number, timelineContentHeight: number, timelineContentOffset: number) => void;
     onShowMore: () => void;
+    alternateCards?: boolean;
+    slideShowRunning?: boolean;
+    theme?: Theme;
     title: string;
     visible?: boolean;
-    theme?: Theme;
-    alternateCards?: boolean;
-    slideShowRunning?: boolean;
 }
 export interface TimelineTreeModel {
+    activeTimelineItem: number;
+    alternateCards?: boolean;
+    autoScroll: (s: Partial<Scroll>) => void;
     items: TimelineItemViewModel[];
     onClick: (id?: string) => void;
-    activeTimelineItem: number;
-    autoScroll: (s: Partial<Scroll>) => void;
+    slideShowRunning?: boolean;
     theme?: Theme;
-    alternateCards?: boolean;
-    slideShowRunning?: boolean;
 }
@@ -38,0 +38,0 @@ export interface Theme {

dist/react-chrono.esm.js

 /*
  * react-chrono
  * a modern timeline component for React
- * v1.0.16
+ * v1.0.17
  * MIT License
@@ -6,0 +6,0 @@ */

dist/react-chrono.js

 /*
  * react-chrono
  * a modern timeline component for React
- * v1.0.16
+ * v1.0.17
  * MIT License
@@ -6,0 +6,0 @@ */

dist/react-chrono.umd.js

 /*
  * react-chrono
  * a modern timeline component for React
- * v1.0.16
+ * v1.0.17
  * MIT License
@@ -6,0 +6,0 @@ */

package.json

 {
   "name": "react-chrono",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "license": "MIT",
-  "description": "a modern timeline component for React",
+  "description": "A Modern timeline component for React",
+  "homepage": "https://github.com/prabhuignoto/react-chrono",
+  "author": "Prabhu Murthy",
+  "keywords": [
+    "timeline",
+    "react-timeline",
+    "vertical-timeline",
+    "horizontal-timeline"
+  ],
   "dependencies": {
     "nanoid": "^3.1.12",
     "react": "^16.13.1",
+    "react-github-btn": "^1.2.0",
     "styled-components": "5.2.0",
-    "use-debounce": "^4.0.0"
+    "use-debounce": "^5.0.0"
   },
@@ -44,10 +53,9 @@ "scripts": {
     "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-typescript": "^6.0.0",
+    "@rollup/plugin-commonjs": "^15.1.0",
     "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.2",
-    "@testing-library/user-event": "^12.1.4",
-    "@types/jest": "^26.0.13",
+    "@testing-library/react": "^11.0.4",
+    "@testing-library/user-event": "^12.1.6",
+    "@types/jest": "^26.0.14",
     "@types/nanoid": "^2.1.0",
-    "@types/node": "^14.10.0",
+    "@types/node": "^14.11.2",
     "@types/react": "^16.9.49",
@@ -59,13 +67,15 @@ "@types/react-dom": "^16.9.0",
     "babel-runtime": "^6.26.0",
+    "cssnano": "^4.1.10",
     "react-dom": "^16.13.1",
-    "react-hot-loader": "^4.12.21",
-    "react-scripts": "3.4.0",
-    "rollup": "^2.26.11",
+    "react-hot-loader": "^4.13.0",
+    "react-scripts": "3.4.3",
+    "rollup": "^2.28.1",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^3.1.8",
     "rollup-plugin-typescript2": "^0.27.2",
-    "stylelint": "^13.7.0",
+    "stylelint": "^13.7.1",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
-    "ts-jest": "^26.3.0",
+    "ts-jest": "^26.4.0",
     "typescript": "3.8.3",
@@ -83,2 +93,8 @@ "webfontloader": "^1.6.28"
   ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn lint:css",
+      "pre-push": "yarn test"
+    }
+  },
   "main": "dist/react-chrono.js",
@@ -85,0 +101,0 @@ "module": "dist/react-chrono.esm.js",

README.md

@@ -10,13 +10,17 @@ [![Build Status](https://dev.azure.com/prabhummurthy/react-chrono/_apis/build/status/prabhuignoto.react-chrono?branchName=master)](https://dev.azure.com/prabhummurthy/react-chrono/_build/latest?definitionId=7&branchName=master)
 
-> A timeline component for React
+> A Flexible Timeline component for React
 
+**Try it on CoderSandbox!**
+
+[![Edit react-chrono](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-chrono-bg56e?fontsize=14&hidenavigation=1&theme=dark)
+
 ## Features
 
-✅ **Modes** - Layout the timeline either `Vertically` or `Horizontally` using the `mode` prop.
+✅ **Modes** - Render timelines in three unique modes.
 
-✅ **Tree** - In `Tree` mode the timeline cards are alternated between left and right.
+✅ **Tree** - Use the `Tree` mode to layout timeline cards vertically in a tree like fashion.
 
-✅ **Slideshow** - Play the timeline automatically with the `slideShow` prop.
+✅ **Slideshow** - Auto play the timeline in `slideshow` mode.
 
-✅ **Keyboard Support** - The timeline can be navigated with the <kbd>UP</kbd> , <kbd>DOWN</kbd> keys in `vertical` or `tree` mode. In `horizontal` mode <kbd>LEFT</kbd> , <kbd>RIGHT</kbd> keys can be used for navigation. Quickly jump to the start or end of the timeline by using the <kbd>HOME</kbd> or <kbd>END</kbd> key.
+✅ **Keyboard Support** - Navigate the timelines using <kbd>UP</kbd> , <kbd>DOWN</kbd> keys in `vertical` or `tree` mode. In `horizontal` mode <kbd>LEFT</kbd> , <kbd>RIGHT</kbd> keys can be used.
 
@@ -33,8 +37,10 @@ ✅ **Custom theme** - Customize the colors using the `theme` prop
 
-Please make sure you wrap the component in a container that has a width and height. When no `mode` is specified, the component defaults to `HORIZONTAL`.
+Please make sure you wrap the component in a container that has a `width` and `height`. When no `mode` is specified, the component defaults to `HORIZONTAL` mode.
 
-Use the `items` prop to create the timeline. Each Timeline item must have the following properties.
+Use the `items` prop to create the timeline. Each Timeline item have the following properties.
 
 `title`, `contentTitle`, `contentText`, `contentDetailedText`
 
+Here is an example Timeline with minimal settings.
+
 ```sh
@@ -57,2 +63,4 @@ const items = [{
 
+To render the timeline vertically use the `VERTICAL` mode
+
 ```sh
@@ -67,4 +75,6 @@ <div style={{ width: "500px", height: "950px" }}>
 
-### Tree 
+### Tree
 
+In `Tree` mode the timeline is rendered vertically with cards alternating between left and right sides.
+
 ```sh
@@ -89,3 +99,2 @@ <div style={{ width: "500px", height: "950px" }}>
       items={items}
-      mode="TREE"
       slideShow
@@ -96,2 +105,8 @@ />
 
+![slideshow](./readme-assets/demo.gif)
+
+#### Slideshow in Tree mode
+
+![tree-slideshow](./readme-assets/vertical_slideshow.gif)
+
 ## Props
@@ -103,6 +118,6 @@
 | items             | collection of timeline items                                                          | []           |
-| disableNavOnKey   | disables timeline navigation through keyboard                                         | false        |
+| disableNavOnKey   | disables keyboard navigation                                                          | false        |
 | slideShow         | starts the timeline in slideshow mode                                                 | false        |
-| slideItemDuration | delay between timeline points during a slideshow                                      | 2500         |
-| titlePosition     | sets the position of the title in `HORIZONTAL` mode                                   | `TOP`        |
+| slideItemDuration | The amount of delay in `ms` for the timeline points in `slideshow` mode               | 2500         |
+| titlePosition     | sets the position of the title in `HORIZONTAL` mode. can be `TOP` or `BOTTOM`         | `TOP`        |
 | itemWidth         | width of the timeline section in `HORIZONTAL` mode                                    | 320          |
@@ -119,3 +134,3 @@
 - For `HORIZONTAL` mode use your <kbd>LEFT</kbd> <kbd>RIGHT</kbd> arrow keys for navigation.
-- For `VERTICAL` or `TREE` mode, navigation can be done via the <kbd>UP</kbd> <kbd>DOWN</kbd> arrow keys.
+- For `VERTICAL` or `TREE` mode, the timeline can be navigated via the <kbd>UP</kbd> <kbd>DOWN</kbd> arrow keys.
 - To easily jump to the first item or the last item in the timeline, use <kbd>HOME</kbd> or <kbd>END</kbd> key.
@@ -122,0 +137,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

194076

increased by0.42%

Lines of code

4818

increased by0.12%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

172

increased by9.55%

Worsened metrics

Dependency count

9

increased by12.5%

Dev dependency count

35

increased by2.94%

Dependency changes

• + Addedreact-github-btn@^1.2.0

• + Addedgithub-buttons@2.29.0(transitive)

• + Addedreact-github-btn@1.4.0(transitive)

• + Addeduse-debounce@5.2.1(transitive)

• - Removeduse-debounce@4.0.0(transitive)

• Updateduse-debounce@^5.0.0