react-chrono - npm Package Compare versions

Comparing version 1.0.26 to 1.1.0

dist/components/timeline-elements/timeline-control/timeline-control.styles.d.ts

@@ -6,1 +6,3 @@ export declare const TimelineControlWrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const TimelineControlButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const TimelineControlContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MediaToggle: import("styled-components").StyledComponent<"div", any, {}, never>;

dist/components/timeline-elements/timeline-item-content/timeline-item-content.styles.d.ts

 import { Theme } from "../../../models/TimelineTreeModel";
 export declare const TimelineItemContentWrapper: import("styled-components").StyledComponent<"div", any, {
     theme: Theme;
+    noMedia?: boolean | undefined;
 }, never>;
@@ -16,1 +17,14 @@ export declare const TimelineContentText: import("styled-components").StyledComponent<"span", any, {}, never>;
 }, never>;
+export declare const MediaWrapper: import("styled-components").StyledComponent<"div", any, {
+    theme: Theme;
+    active?: boolean | undefined;
+    mode?: "VERTICAL" | "HORIZONTAL" | "TREE" | undefined;
+}, never>;
+export declare const Media: import("styled-components").StyledComponent<"img", any, {
+    mode?: "VERTICAL" | "HORIZONTAL" | "TREE" | undefined;
+    visible?: boolean | undefined;
+    active?: boolean | undefined;
+}, never>;
+export declare const MediaDetailsWrapper: import("styled-components").StyledComponent<"div", any, {
+    mode?: "VERTICAL" | "HORIZONTAL" | "TREE" | undefined;
+}, never>;

dist/components/timeline/timeline.style.d.ts

@@ -7,3 +7,5 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 }, never>;
-export declare const TimelineControlContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TimelineControlContainer: import("styled-components").StyledComponent<"div", any, {
+    mode?: "VERTICAL" | "HORIZONTAL" | "TREE" | undefined;
+}, never>;
 export declare const TimelineContentRender: import("styled-components").StyledComponent<"div", any, {}, never>;

dist/models/TimelineContentModel.d.ts

@@ -0,1 +1,2 @@
+import { Media } from "./TimelineItemMedia";
 import { Theme } from "./TimelineTreeModel";
@@ -10,2 +11,4 @@ export interface TimelineContentModel {
     title?: string;
+    media?: Media;
+    mode?: "VERTICAL" | "HORIZONTAL" | "TREE";
 }

dist/models/TimelineControl.d.ts

@@ -0,1 +1,2 @@
+import { TimelineMode } from "./TimelineModel";
 export interface TimelineControlModel {
@@ -6,2 +7,5 @@ disableLeft: boolean;
     onPrevious: () => void;
+    onFirst: () => void;
+    onLast: () => void;
+    mode?: TimelineMode;
 }

dist/models/TimelineItemModel.d.ts

 import { Scroll } from "./TimelineCollnModel";
+import { Media } from "./TimelineItemMedia";
 import { Theme } from "./TimelineTreeModel";
@@ -15,2 +16,3 @@ /**
     id?: string;
+    media?: Media;
     position?: string;
@@ -17,0 +19,0 @@ title: string;

dist/models/TimelineModel.d.ts

 import { TimelineItemModel } from "./TimelineItemModel";
+/**
+ * model internally used by the component
+ *
+ * @export
+ * @interface TimelineModel
+ * @extends {TimelineProps}
+ */
 export interface TimelineModel extends TimelineProps {
+    /**
+     * active timeline item
+     *
+     * @type {number}
+     * @memberof TimelineModel
+     */
     activeTimelineItem: number;
+    /**
+     * invoked to jump timeline to the first item
+     *
+     * @memberof TimelineModel
+     */
     onFirst: () => void;
+    /**
+     * invoked to jump timeline to the last item
+     *
+     * @memberof TimelineModel
+     */
     onLast: () => void;
+    /**
+     * invoked to move to the next item on the list
+     *
+     * @memberof TimelineModel
+     */
     onNext: () => void;
+    /**
+     * invoked to move the timeline to the previous item
+     *
+     * @memberof TimelineModel
+     */
     onPrevious: () => void;
     onTimelineUpdated?: (id: number) => void;
+    /**
+     * indicates if a slideshow is activated
+     *
+     * @type {boolean}
+     * @memberof TimelineModel
+     */
     slideShowRunning?: boolean;
 }
+/**
+ * Main props used by the host app.
+ *
+ * @export
+ * @interface TimelineProps
+ */
 export interface TimelineProps {
+    /**
+     * disables keyboard navigation
+     *
+     * @type {boolean}
+     * @memberof TimelineProps
+     */
     disableNavOnKey?: boolean;
-    disableNavOnScroll?: boolean;
     itemWidth?: number;
     items: TimelineItemModel[];
-    mode?: "VERTICAL" | "HORIZONTAL" | "TREE";
+    /**
+     * sets the mode of timeline
+     *
+     * @type {TimelineMode}
+     * @memberof TimelineProps
+     */
+    mode?: TimelineMode;
     slideItemDuration?: number;
+    /**
+     * enables slideshow
+     *
+     * @type {boolean}
+     * @memberof TimelineProps
+     */
     slideShow?: boolean;
+    /**
+     * sets the position of the title.
+     *
+     * @type {("TOP" | "BOTTOM" | "ALTERNATE")}
+     * @memberof TimelineProps
+     */
     titlePosition?: "TOP" | "BOTTOM" | "ALTERNATE";
+    /**
+     * sets the theme
+     *
+     * @type {{
+     *     primary: string;
+     *     secondary: string;
+     *   }}
+     * @memberof TimelineProps
+     */
     theme?: {
@@ -25,1 +102,2 @@ primary: string;
 }
+export declare type TimelineMode = "VERTICAL" | "HORIZONTAL" | "TREE";

dist/models/TimelineTreeModel.d.ts

@@ -0,3 +1,5 @@
+/// <reference types="react" />
 import { TimelineItemViewModel } from "./TimelineItemModel";
 import { Scroll } from "./TimelineCollnModel";
+import { Media } from "./TimelineItemMedia";
 export interface TreeLeafModel {
@@ -14,2 +16,3 @@ active?: boolean;
     active?: boolean;
+    alternateCards?: boolean;
     className: string;
@@ -21,6 +24,6 @@ contentDetailedText?: string;
     index: number;
+    media?: Media;
+    mode?: "VERTICAL" | "HORIZONTAL" | "TREE";
     onClick: (id: string) => void;
-    onActive: (timelinePointOffset: number, timelineContentHeight: number, timelineContentOffset: number) => void;
     onShowMore: () => void;
-    alternateCards?: boolean;
     slideShowRunning?: boolean;
@@ -30,2 +33,3 @@ theme?: Theme;
     visible?: boolean;
+    onActive: (timelinePointOffset: number, timelineContentHeight: number, timelineContentOffset: number) => void;
 }
@@ -40,2 +44,4 @@ export interface TimelineTreeModel {
     theme?: Theme;
+    mode?: "VERTICAL" | "HORIZONTAL" | "TREE";
+    sRef?: React.Ref<any>;
 }
@@ -42,0 +48,0 @@ export interface Theme {

package.json

 {
   "name": "react-chrono",
-  "version": "1.0.26",
+  "version": "1.1.0",
   "license": "MIT",
@@ -63,7 +63,7 @@ "description": "a modern timeline component for React",
     "@types/nanoid": "^2.1.0",
-    "@types/node": "^14.11.2",
-    "@types/react": "^16.9.50",
+    "@types/node": "^14.11.5",
+    "@types/react": "^16.9.51",
     "@types/react-dom": "^16.9.0",
     "@types/react-responsive": "^8.0.2",
-    "@types/styled-components": "5.1.3",
+    "@types/styled-components": "^5.1.3",
     "@types/webfontloader": "^1.6.32",
@@ -73,6 +73,5 @@ "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
-    "chromatic": "^5.2.0",
     "cssnano": "^4.1.10",
     "lint-staged": "^10.4.0",
-    "react-hot-loader": "^4.12.21",
+    "react-hot-loader": "^4.13.0",
     "react-scripts": "3.4.3",
@@ -88,3 +87,3 @@ "rollup": "^2.28.2",
     "ts-jest": "^26.4.0",
-    "typescript": "3.8.3",
+    "typescript": "4.0.3",
     "webfontloader": "^1.6.28"
@@ -98,2 +97,6 @@ },
   },
+  "resolutions": {
+    "**/@typescript-eslint/eslint-plugin": "^4.1.1",
+    "**/@typescript-eslint/parser": "^4.1.1"
+  },
   "files": [
@@ -100,0 +103,0 @@ "dist"

README.md

 [![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)
 [![DeepScan grade](https://deepscan.io/api/teams/10074/projects/13644/branches/234929/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=10074&pid=13644&bid=234929)
 [![Codacy Badge](https://app.codacy.com/project/badge/Grade/f2e24a98defd4e4fa7f6f24d86b8dab5)](https://www.codacy.com/manual/prabhuignoto/react-chrono?utm_source=github.com&utm_medium=referral&utm_content=prabhuignoto/react-chrono&utm_campaign=Badge_Grade)
-[![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/prabhuignoto/float-menu.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/prabhuignoto/float-menu/context:javascript)
 ![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/prabhuignoto/react-chrono?style=flat)
 [![Depfu](https://badges.depfu.com/badges/48a23a6a830309649b7e516467cd9a48/overview.svg)](https://depfu.com/github/prabhuignoto/react-chrono?project_id=15325)
+![https://badgen.net/bundlephobia/min/react](https://badgen.net/bundlephobia/min/react)
 
@@ -20,6 +20,8 @@ ![logo](./readme-assets/social-logo-small.png)
 - 🌲  Use the [Tree](#tree-view) mode to layout the timeline cards vertically in a tree like fashion.
-- 📺  Auto play the timeline with the [slideshow](#slideshow-mode) prop.
-- ⌨  Navigate the timelines via Keyboard.
+- 📺  Auto play the timeline with the [slideshow](#slideshow-mode) mode.
+- 🖼️  Display images in the timeline with ease.
+- ⌨  Navigate the timeline via Keyboard.
+- 🔧  Optimized to render images efficiently on (tree & vertical mode). Images not visible are automatically hidden.
 - 🎨  [Customize](#theme) colors with ease.
-- 💪  Built with [Typescript](https://www.typescriptlang.org/)
+- 💪  Built with [Typescript](https://www.typescriptlang.org/).
 
@@ -32,8 +34,8 @@ <h2>Table of Contents</h2>
   - [Tree View](#tree-view)
-  - [Slideshow Mode](#slideshow-mode)
+  - [Slideshow](#slideshow)
 - [Props](#props)
   - [Mode](#mode)
+  - [Timeline item Model](#timeline-item-model)
   - [⌨ Keyboard Navigation & Disabling it](#-keyboard-navigation--disabling-it)
-  - [Slideshow Mode](#slideshow-mode-1)
-  - [Title Position](#title-position)
+  - [Slideshow Mode](#slideshow-mode)
   - [Item Width](#item-width)
@@ -55,21 +57,26 @@ - [🎨 Theme](#-theme)
 
-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.
+Please make sure you wrap the component in a container that has a `width` and `height`.
 
-Use the `items` prop to create the timeline. Each Timeline item have the following properties.
+When no `mode` is specified, the component defaults to `HORIZONTAL` mode. Please check [props](#props) for all the available options.
 
-`title`, `contentTitle`, `contentText`, `contentDetailedText`
-
-Here is an example Timeline with minimal settings.
-
 ```sh
-  const items = [{
-    title: "May 1940",
-    contentTitle: "Dunkirk",
-    contentText:"Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.",
-    contentDetailedText: "On 10 May 1940, Hitler began his long-awaited offensive in the west...",
-  }, ...];
+  const Home = () => {
+    const items = [{
+      title: "May 1940",
+      contentTitle: "Dunkirk",
+      contentText:"Men of the British Expeditionary Force (BEF) wade out to..",
+      media: {
+        type: "IMAGE",
+        source: {
+          url: "http://someurl/image.jpg"
+        }
+      }
+    }, ...];
 
-  <div style={{ width: "500px", height: "400px" }}>
-    <chrono items={items} />
-  </div>
+    return (
+      <div style={{ width: "500px", height: "400px" }}>
+        <chrono items={items} />
+      </div>
+    )
+  }
 ```
@@ -94,3 +101,3 @@
 
-In `Tree` mode the timeline is rendered vertically with cards alternating between left and right sides.
+In `Tree` mode the timeline is rendered vertically with cards alternating between left and right side.
 
@@ -108,3 +115,3 @@ ```sh
 
-### Slideshow Mode
+### Slideshow
 
@@ -129,8 +136,7 @@ Play the timeline automatically with the `slideShow` mode.
 | ----------------- | ------------------------------------------------------------------------------------- | ------------ |
-| mode              | sets the layout for the timeline component. can be `HORIZONTAL`, `VERTICAL` or `TREE` | `HORIZONTAL` |
-| items             | collection of timeline items                                                          | []           |
+| mode              | sets the layout of the component. can be `HORIZONTAL`, `VERTICAL` or `TREE` | `HORIZONTAL`           |
+| items             | collection of timeline items. This should be a collection of [Timeline Item Model](#timeline-item-model)                                                         | []           |
 | disableNavOnKey   | prop to disable keyboard navigation.                                                  | false        |
 | slideShow         | starts the timeline in slideshow mode.                                                | false        |
 | 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.                                   | 300          |
@@ -141,7 +147,44 @@ | theme             | prop to customize the colors.                                                         | 300          |
 
-`react-chrono` supports three modes `HORIZONTAL`, `VERTICAL` and `TREE`. The mode prop can be used to define the orientation of the cards.
+`react-chrono` supports three modes `HORIZONTAL`, `VERTICAL` and `TREE`. No additional setting is required.
 
+```sh
+  <chrono items={items} mode="HORIZONTAL" />
+```
+
+```sh
+  <chrono items={items} mode="VERTICAL" />
+```
+
+```sh
+  <chrono items={items} mode="TREE" />
+```
+
+### Timeline item Model
+
+| name         | description                                  | type   |
+|--------------|----------------------------------------------|--------|
+| title        | title of the timeline item                   | String |
+| contentTitle | title that is displayed on the timeline card | String |
+| contentText  | text displayed in the timeline card          | String |
+| media        | media object to set image.                   | Object |
+
+```sh
+{
+  title: "May 1940",
+  contentTitle: "Dunkirk",
+  media: {
+    name: "dunkirk beach",
+    source: {
+      url: "http://someurl/image.jpg"
+    },
+    type: "IMAGE"
+  },
+  contentText:
+    "Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk."
+}
+```
+
 ### ⌨ Keyboard Navigation & Disabling it
 
-The timeline by default can be navigated via keyboard.
+The timeline can be navigated via keyboard.
 
@@ -152,3 +195,3 @@ - For `HORIZONTAL` mode use your <kbd>LEFT</kbd> <kbd>RIGHT</kbd> arrow keys for navigation.
 
-The keyboard navigation can be completely disabled by setting the `disableNavOnKey` to true.
+To disable eyboard navigation set `disableNavOnKey` to true.
 
@@ -167,10 +210,2 @@ ```sh
 
-### Title Position
-
-This setting only applies for the `HORIZONTAL` mode. The prop `titlePosition` sets the position of the individual titles to either `TOP` or `BOTTOM`.
-
-```sh
-<chrono items={items}  titlePosition="BOTTOM" />
-```
-
 ### Item Width
@@ -220,4 +255,3 @@
 - Support for Mobile devices & Tablets (responsive).
-- Polished UI control for navigating the timeline.
-- Support for embedding images in the timeline.
+- Support for embedding videos.
 
@@ -224,0 +258,0 @@ ## Meta

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

Improved metrics

Total package byte prevSize

230364

increased by16.41%

Dev dependency count

37

decreased by-2.63%

Number of package files

37

increased by15.63%

Lines of code

5725

increased by18.68%

Number of lines in readme file

261

increased by14.98%

No dependency changes