react-chrono - npm Package Compare versions

Comparing version 1.2.8 to 1.3.0

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

@@ -23,2 +23,7 @@ /// <reference types="react" />
 }, object>;
-export declare const SlideShowProgressBar: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css">, object>;
+export declare const SlideShowProgressBar: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    startWidth?: number | undefined;
+    paused?: boolean | undefined;
+    duration?: number | undefined;
+    color?: string | undefined;
+}, object>;

dist/components/timeline-elements/timeline-card/timeline-card.d.ts

 import React from "react";
-import { TimelineItemViewModel } from "../../../models/TimelineItemModel";
-declare const TimelineItem: React.FunctionComponent<TimelineItemViewModel>;
+import { TimelineCardModel } from "../../../models/TimelineItemModel";
+declare const TimelineItem: React.FunctionComponent<TimelineCardModel>;
 export default TimelineItem;

dist/models/TimelineCollnModel.d.ts

@@ -1,2 +0,2 @@
-import { TimelineItemViewModel } from "./TimelineItemModel";
+import { TimelineCardModel } from "./TimelineItemModel";
 import { TimelineMode } from "./TimelineModel";
@@ -8,3 +8,3 @@ import { Theme } from "./TimelineTreeModel";
     itemWidth: number;
-    items: TimelineItemViewModel[];
+    items: TimelineCardModel[];
     mode: TimelineMode;
@@ -11,0 +11,0 @@ slideShowRunning?: boolean;

dist/models/TimelineItemMedia.d.ts

@@ -0,1 +1,3 @@
+import { TimelineMode } from "./TimelineModel";
+import { Theme } from "./TimelineTreeModel";
 export declare type MediaType = "VIDEO" | "IMAGE";
@@ -16,1 +18,12 @@ export interface MediaSource {
 }
+export interface CardMediaModel {
+    active?: boolean;
+    media: Media;
+    id?: string;
+    mode?: TimelineMode;
+    onMediaStateChange: (state: MediaState) => void;
+    theme?: Theme;
+    title?: string;
+    content: string;
+    slideshowActive?: boolean;
+}

dist/models/TimelineItemModel.d.ts

@@ -21,3 +21,3 @@ import { Scroll } from "./TimelineCollnModel";
 }
-export interface TimelineItemViewModel extends TimelineItemModel {
+export interface TimelineCardModel extends TimelineItemModel {
     autoScroll: ({ timelinePointOffset, timelinePointWidth, timelinePointHeight, timelineContentHeight }: Partial<Scroll>) => void;
@@ -24,0 +24,0 @@ mode: "HORIZONTAL" | "VERTICAL" | "TREE";

dist/models/TimelineTreeModel.d.ts

 import { Scroll } from "./TimelineCollnModel";
 import { Media } from "./TimelineItemMedia";
-import { TimelineItemViewModel } from "./TimelineItemModel";
+import { TimelineCardModel } from "./TimelineItemModel";
 import { TimelineMode } from "./TimelineModel";
@@ -37,3 +37,3 @@ interface CommonPropsModel {
     autoScroll: (s: Partial<Scroll>) => void;
-    items: TimelineItemViewModel[];
+    items: TimelineCardModel[];
 }
@@ -40,0 +40,0 @@ export interface Theme {

package.json

 {
   "name": "react-chrono",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "license": "MIT",
@@ -20,3 +20,5 @@ "description": "A modern Timeline component for React",
     "@emotion/styled": "^10.0.27",
-    "nanoid": "^3.1.12"
+    "nanoid": "^3.1.12",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
@@ -48,6 +50,7 @@ "scripts": {
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.12.0",
-    "@babel/plugin-transform-runtime": "^7.12.0",
-    "@babel/preset-typescript": "^7.12.0",
-    "@babel/runtime": "^7.12.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-typescript": "^7.12.1",
+    "@babel/runtime": "^7.12.1",
+    "@hot-loader/react-dom": "^17.0.0-rc.2",
     "@rollup/plugin-babel": "^5.2.1",
@@ -61,6 +64,7 @@ "@rollup/plugin-buble": "^0.21.3",
     "@types/nanoid": "^2.1.0",
-    "@types/node": "^14.11.8",
-    "@types/react": "^16.9.52",
+    "@types/node": "^14.11.10",
+    "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.0",
     "@types/react-responsive": "^8.0.2",
+    "add": "^2.0.6",
     "babel-core": "^6.26.3",
@@ -70,8 +74,9 @@ "babel-loader": "^8.1.0",
     "cssnano": "^4.1.10",
-    "lint-staged": "^10.4.0",
+    "lint-staged": "^10.4.2",
+    "react-hot-loader": "^4.13.0",
     "react-scripts": "3.4.3",
-    "rollup": "^2.30.0",
+    "rollup": "^2.32.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-postcss": "^3.1.8",
-    "rollup-plugin-typescript2": "^0.27.3",
+    "rollup-plugin-typescript2": "^0.28.0",
     "stylelint": "^13.7.2",
@@ -82,3 +87,4 @@ "stylelint-config-recommended": "^3.0.0",
     "ts-jest": "^26.4.0",
-    "typescript": "4.0.3"
+    "typescript": "4.0.3",
+    "yarn": "^1.22.10"
   },
@@ -85,0 +91,0 @@ "peerDependencies": {

README.md

@@ -7,10 +7,14 @@ <div align="center">
 
-[![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&amp;utm_medium=referral&amp;utm_content=prabhuignoto/react-chrono&amp;utm_campaign=Badge_Grade)
-![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)
+<p>
 
+  [![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&amp;utm_medium=referral&amp;utm_content=prabhuignoto/react-chrono&amp;utm_campaign=Badge_Grade)
+  ![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)
+  
+</p>
 
+
 </br>
@@ -51,5 +55,6 @@
   - [Media](#media)
-  - [Slideshow](#slideshow-1)
+  - [Slideshow mode](#slideshow-mode)
   - [Item Width](#item-width)
   - [🎨 Theme](#-theme)
+  - [📦 Codesandbox Examples](#-codesandbox-examples)
 - [📦Build Setup](#build-setup)
@@ -144,3 +149,3 @@ - [🔨 Contributing](#-contributing)
 
-![tree-slideshow](./readme-assets/vertical_slideshow.gif)
+<!-- ![tree-slideshow](./readme-assets/vertical_slideshow.gif) -->
 
@@ -255,3 +260,3 @@ ## Props
 
-### Slideshow
+### Slideshow mode
 
@@ -276,2 +281,10 @@ Slideshow can be enabled by setting the `slideShow` prop to true. You can also set an optional `slideItemDuration` that sets the time delay between cards.
 
+### 📦 Codesandbox Examples
+
+- [Horizontal Basic](https://codesandbox.io/s/condescending-swirles-xodxo?file=/src/App.js)
+- [Tree](https://codesandbox.io/s/react-chrono-tree-text-xtksq)
+- [Tree with Images](https://codesandbox.io/s/react-chrono-tree-image-uh2nz)
+- [Vertical basic](https://codesandbox.io/s/react-chrono-tree-text-slide-zytpi?file=/src/App.js)
+- [Vertical mode with Mixed content](https://codesandbox.io/s/react-chrono-tree-horizontal-wdqk3)
+
 ## 📦Build Setup
@@ -278,0 +291,0 @@

No alert changes

Improved metrics

Total package byte prevSize

585415

20.6%

Lines of code

12614

17.11%

Number of lines in readme file

331

4.09%

Worsened metrics

Dependency count

7

40%

Dev dependency count

36

12.5%

Dependency changes

• + Added

  react@^16.14.0

• + Added

  react-dom@^16.14.0