@oddle.me/react-calendar-timeline 0.29.12 → 0.29.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/Timeline.css +117 -95
  2. package/lib/lib/columns/Columns.js +0 -2
  3. package/lib/lib/headers/CustomDateHeader.js +0 -2
  4. package/lib/lib/headers/CustomHeader.js +3 -4
  5. package/lib/lib/headers/DateHeader.js +9 -7
  6. package/lib/lib/headers/SidebarHeader.js +14 -13
  7. package/package.json +11 -5
package/lib/Timeline.css CHANGED
@@ -1,98 +1,120 @@
1
1
  .react-calendar-timeline {
2
2
  overflow: hidden;
3
3
  display: flex;
4
- flex-direction: column; }
5
- .react-calendar-timeline * {
6
- box-sizing: border-box; }
7
- .react-calendar-timeline .rct-outer {
8
- display: block;
9
- overflow-y: auto;
10
- overflow-x: hidden;
11
- white-space: nowrap;
12
- flex: 1;
13
- height: 0; }
14
- .react-calendar-timeline .rct-scroll {
15
- display: inline-block;
16
- white-space: normal;
17
- vertical-align: top;
18
- -ms-touch-action: none;
19
- touch-action: none;
20
- overflow-x: hidden; }
21
- .react-calendar-timeline .rct-item:hover {
22
- z-index: 88; }
23
- .react-calendar-timeline .rct-item .rct-item-content {
24
- position: sticky;
25
- position: -webkit-sticky;
26
- left: 0px;
27
- overflow: hidden;
28
- display: inline-block;
29
- border-radius: 2px;
30
- padding: 0 6px;
31
- height: 100%; }
32
- .react-calendar-timeline .rct-sidebar {
33
- white-space: normal;
34
- display: inline-block;
35
- vertical-align: top;
36
- position: relative;
37
- box-sizing: border-box;
38
- border-right: 1px solid #bbb; }
39
- .react-calendar-timeline .rct-sidebar.rct-sidebar-right {
40
- border-right: 0;
41
- border-left: 1px solid #bbb; }
42
- .react-calendar-timeline .rct-sidebar .rct-sidebar-row {
43
- padding: 0 4px;
44
- overflow: hidden;
45
- white-space: nowrap;
46
- text-overflow: ellipsis;
47
- box-sizing: border-box;
48
- margin: 0;
49
- border-bottom: 1px solid #bbb; }
50
- .react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-odd {
51
- background: rgba(0, 0, 0, 0.05); }
52
- .react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-even {
53
- background: transparent; }
54
- .react-calendar-timeline .rct-vertical-lines .rct-vl {
55
- position: absolute;
56
- border-left: 1px solid #bbb;
57
- z-index: 30; }
58
- .react-calendar-timeline .rct-vertical-lines .rct-vl.rct-vl-first {
59
- border-left-width: 2px; }
60
- .react-calendar-timeline .rct-horizontal-lines {
61
- -webkit-user-select: none;
62
- -moz-user-select: -moz-none;
63
- -ms-user-select: none;
64
- user-select: none; }
65
- .react-calendar-timeline .rct-horizontal-lines .rct-hl-even,
66
- .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
67
- border-bottom: 1px solid #bbb;
68
- box-sizing: border-box;
69
- z-index: 40; }
70
- .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
71
- background: rgba(0, 0, 0, 0.05); }
72
- .react-calendar-timeline .rct-horizontal-lines .rct-hl-even {
73
- background: transparent; }
74
- .react-calendar-timeline .rct-cursor-line {
75
- position: absolute;
76
- width: 2px;
77
- background: #2196f3;
78
- z-index: 51; }
79
- .react-calendar-timeline .rct-dateHeader {
80
- display: flex;
81
- align-items: center;
82
- justify-content: center;
83
- height: 100%;
84
- border-bottom: 1px solid #bbb;
85
- cursor: pointer;
86
- font-size: 14px;
87
- background-color: #f0f0f0;
88
- border-left: 2px solid #bbb; }
89
- .react-calendar-timeline .rct-dateHeader-primary {
90
- background-color: initial;
91
- border-left: 1px solid #bbb;
92
- border-right: 1px solid #bbb;
93
- color: #fff; }
94
- .react-calendar-timeline .rct-header-root {
95
- background: #c52020;
96
- border-bottom: 1px solid #bbb; }
97
- .react-calendar-timeline .rct-calendar-header {
98
- border: 1px solid #bbb; }
4
+ flex-direction: column;
5
+ }
6
+ .react-calendar-timeline * {
7
+ box-sizing: border-box;
8
+ }
9
+ .react-calendar-timeline .rct-outer {
10
+ display: block;
11
+ overflow-y: auto;
12
+ overflow-x: hidden;
13
+ white-space: nowrap;
14
+ flex: 1;
15
+ height: 0;
16
+ }
17
+ .react-calendar-timeline .rct-scroll {
18
+ display: inline-block;
19
+ white-space: normal;
20
+ vertical-align: top;
21
+ -ms-touch-action: none;
22
+ touch-action: none;
23
+ overflow-x: hidden;
24
+ }
25
+ .react-calendar-timeline .rct-item:hover {
26
+ z-index: 88;
27
+ }
28
+ .react-calendar-timeline .rct-item .rct-item-content {
29
+ position: sticky;
30
+ position: -webkit-sticky;
31
+ left: 0px;
32
+ overflow: hidden;
33
+ display: inline-block;
34
+ border-radius: 2px;
35
+ padding: 0 6px;
36
+ height: 100%;
37
+ }
38
+ .react-calendar-timeline .rct-sidebar {
39
+ white-space: normal;
40
+ display: inline-block;
41
+ vertical-align: top;
42
+ position: relative;
43
+ box-sizing: border-box;
44
+ border-right: 1px solid #bbb;
45
+ }
46
+ .react-calendar-timeline .rct-sidebar.rct-sidebar-right {
47
+ border-right: 0;
48
+ border-left: 1px solid #bbb;
49
+ }
50
+ .react-calendar-timeline .rct-sidebar .rct-sidebar-row {
51
+ padding: 0 4px;
52
+ overflow: hidden;
53
+ white-space: nowrap;
54
+ text-overflow: ellipsis;
55
+ box-sizing: border-box;
56
+ margin: 0;
57
+ border-bottom: 1px solid #bbb;
58
+ }
59
+ .react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-odd {
60
+ background: rgba(0, 0, 0, 0.05);
61
+ }
62
+ .react-calendar-timeline .rct-sidebar .rct-sidebar-row.rct-sidebar-row-even {
63
+ background: transparent;
64
+ }
65
+ .react-calendar-timeline .rct-vertical-lines .rct-vl {
66
+ position: absolute;
67
+ border-left: 1px solid #bbb;
68
+ z-index: 30;
69
+ }
70
+ .react-calendar-timeline .rct-vertical-lines .rct-vl.rct-vl-first {
71
+ border-left-width: 2px;
72
+ }
73
+ .react-calendar-timeline .rct-horizontal-lines {
74
+ -webkit-user-select: none;
75
+ -moz-user-select: -moz-none;
76
+ -ms-user-select: none;
77
+ user-select: none;
78
+ }
79
+ .react-calendar-timeline .rct-horizontal-lines .rct-hl-even,
80
+ .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
81
+ border-bottom: 1px solid #bbb;
82
+ box-sizing: border-box;
83
+ z-index: 40;
84
+ }
85
+ .react-calendar-timeline .rct-horizontal-lines .rct-hl-odd {
86
+ background: rgba(0, 0, 0, 0.05);
87
+ }
88
+ .react-calendar-timeline .rct-horizontal-lines .rct-hl-even {
89
+ background: transparent;
90
+ }
91
+ .react-calendar-timeline .rct-cursor-line {
92
+ position: absolute;
93
+ width: 2px;
94
+ background: #2196f3;
95
+ z-index: 51;
96
+ }
97
+ .react-calendar-timeline .rct-dateHeader {
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ height: 100%;
102
+ border-bottom: 1px solid #bbb;
103
+ cursor: pointer;
104
+ font-size: 14px;
105
+ background-color: rgb(240, 240, 240);
106
+ border-left: 2px solid #bbb;
107
+ }
108
+ .react-calendar-timeline .rct-dateHeader-primary {
109
+ background-color: initial;
110
+ border-left: 1px solid #bbb;
111
+ border-right: 1px solid #bbb;
112
+ color: #fff;
113
+ }
114
+ .react-calendar-timeline .rct-header-root {
115
+ background: #c52020;
116
+ border-bottom: 1px solid #bbb;
117
+ }
118
+ .react-calendar-timeline .rct-calendar-header {
119
+ border: 1px solid #bbb;
120
+ }
package/lib/lib/columns/Columns.js CHANGED
@@ -74,13 +74,11 @@ function (_Component) {
74
74
  var _this$props = this.props,
75
75
  canvasTimeStart = _this$props.canvasTimeStart,
76
76
  canvasTimeEnd = _this$props.canvasTimeEnd,
77
- canvasWidth = _this$props.canvasWidth,
78
77
  minUnit = _this$props.minUnit,
79
78
  timeSteps = _this$props.timeSteps,
80
79
  height = _this$props.height,
81
80
  verticalLineClassNamesForTime = _this$props.verticalLineClassNamesForTime,
82
81
  getLeftOffsetFromDate = _this$props.getLeftOffsetFromDate;
83
- var ratio = canvasWidth / (canvasTimeEnd - canvasTimeStart);
84
82
  var lines = [];
85
83
  (0, _calendar.iterateTimes)(canvasTimeStart, canvasTimeEnd, minUnit, timeSteps, function (time, nextTime) {
86
84
  var minUnitValue = time.get(minUnit === 'day' ? 'date' : minUnit);
package/lib/lib/headers/CustomDateHeader.js CHANGED
@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
9
9
 
10
10
  var _Interval = _interopRequireDefault(require("./Interval"));
11
11
 
12
- var _moment = _interopRequireDefault(require("moment"));
13
-
14
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
15
13
 
16
14
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
package/lib/lib/headers/CustomHeader.js CHANGED
@@ -200,8 +200,8 @@ function (_React$Component) {
200
200
  return false;
201
201
  }
202
202
  }, {
203
- key: "componentWillReceiveProps",
204
- value: function componentWillReceiveProps(nextProps) {
203
+ key: "UNSAFE_componentWillReceiveProps",
204
+ value: function UNSAFE_componentWillReceiveProps(nextProps) {
205
205
  if (nextProps.canvasTimeStart !== this.props.canvasTimeStart || nextProps.canvasTimeEnd !== this.props.canvasTimeEnd || nextProps.canvasWidth !== this.props.canvasWidth || nextProps.unit !== this.props.unit || nextProps.timeSteps !== this.props.timeSteps || nextProps.showPeriod !== this.props.showPeriod) {
206
206
  var canvasTimeStart = nextProps.canvasTimeStart,
207
207
  canvasTimeEnd = nextProps.canvasTimeEnd,
@@ -270,7 +270,6 @@ var CustomHeaderWrapper = function CustomHeaderWrapper(_ref3) {
270
270
  return _react["default"].createElement(_HeadersContext.TimelineHeadersConsumer, null, function (_ref5) {
271
271
  var timeSteps = _ref5.timeSteps;
272
272
  return _react["default"].createElement(CustomHeader, _extends({
273
- children: children,
274
273
  timeSteps: timeSteps,
275
274
  showPeriod: showPeriod,
276
275
  unit: unit ? unit : timelineState.timelineUnit
@@ -279,7 +278,7 @@ var CustomHeaderWrapper = function CustomHeaderWrapper(_ref3) {
279
278
  getLeftOffsetFromDate: getLeftOffsetFromDate,
280
279
  height: height,
281
280
  markerTime: markerTime
282
- }));
281
+ }), children);
283
282
  });
284
283
  });
285
284
  };
package/lib/lib/headers/DateHeader.js CHANGED
@@ -119,16 +119,19 @@ function (_React$Component) {
119
119
  value: function render() {
120
120
  var unit = this.getHeaderUnit();
121
121
  var _this$props = this.props,
122
+ className = _this$props.className,
122
123
  headerData = _this$props.headerData,
123
124
  height = _this$props.height,
124
- markerTime = _this$props.markerTime;
125
+ intervalRenderer = _this$props.intervalRenderer,
126
+ markerTime = _this$props.markerTime,
127
+ style = _this$props.style,
128
+ unitProp = _this$props.unit;
125
129
  return _react["default"].createElement(_CustomHeader["default"], {
126
130
  unit: unit,
127
131
  height: height,
128
- headerData: this.getHeaderData(this.props.intervalRenderer, this.getRootStyle(this.props.style), this.props.className, this.getLabelFormat, this.props.unit, this.props.headerData),
129
- children: _CustomDateHeader.CustomDateHeader,
132
+ headerData: this.getHeaderData(intervalRenderer, this.getRootStyle(style), className, this.getLabelFormat, unitProp, headerData),
130
133
  markerTime: markerTime
131
- });
134
+ }, _CustomDateHeader.CustomDateHeader);
132
135
  }
133
136
  }]);
134
137
 
@@ -187,9 +190,8 @@ DateHeaderWrapper.defaultProps = {
187
190
  };
188
191
 
189
192
  function formatLabel(_ref3, unit, labelWidth) {
190
- var _ref4 = _slicedToArray(_ref3, 2),
191
- timeStart = _ref4[0],
192
- timeEnd = _ref4[1];
193
+ var _ref4 = _slicedToArray(_ref3, 1),
194
+ timeStart = _ref4[0];
193
195
 
194
196
  var formatOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _defaultConfig.defaultHeaderFormats;
195
197
  var format;
package/lib/lib/headers/SidebarHeader.js CHANGED
@@ -37,6 +37,11 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
37
37
 
38
38
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
39
39
 
40
+ function DefaultSidebarHeaderRenderer(_ref) {
41
+ var getRootProps = _ref.getRootProps;
42
+ return _react["default"].createElement("div", getRootProps());
43
+ }
44
+
40
45
  var SidebarHeader =
41
46
  /*#__PURE__*/
42
47
  function (_React$PureComponent) {
@@ -96,20 +101,19 @@ _defineProperty(SidebarHeader, "propTypes", {
96
101
  headerData: _propTypes["default"].object
97
102
  });
98
103
 
99
- var SidebarWrapper = function SidebarWrapper(_ref) {
100
- var children = _ref.children,
101
- variant = _ref.variant,
102
- headerData = _ref.headerData;
103
- return _react["default"].createElement(_HeadersContext.TimelineHeadersConsumer, null, function (_ref2) {
104
- var leftSidebarWidth = _ref2.leftSidebarWidth,
105
- rightSidebarWidth = _ref2.rightSidebarWidth;
104
+ var SidebarWrapper = function SidebarWrapper(_ref2) {
105
+ var children = _ref2.children,
106
+ variant = _ref2.variant,
107
+ headerData = _ref2.headerData;
108
+ return _react["default"].createElement(_HeadersContext.TimelineHeadersConsumer, null, function (_ref3) {
109
+ var leftSidebarWidth = _ref3.leftSidebarWidth,
110
+ rightSidebarWidth = _ref3.rightSidebarWidth;
106
111
  return _react["default"].createElement(SidebarHeader, {
107
112
  leftSidebarWidth: leftSidebarWidth,
108
113
  rightSidebarWidth: rightSidebarWidth,
109
- children: children,
110
114
  variant: variant,
111
115
  headerData: headerData
112
- });
116
+ }, children);
113
117
  });
114
118
  };
115
119
 
@@ -120,10 +124,7 @@ SidebarWrapper.propTypes = {
120
124
  };
121
125
  SidebarWrapper.defaultProps = {
122
126
  variant: _constants.LEFT_VARIANT,
123
- children: function children(_ref3) {
124
- var getRootProps = _ref3.getRootProps;
125
- return _react["default"].createElement("div", getRootProps());
126
- }
127
+ children: DefaultSidebarHeaderRenderer
127
128
  };
128
129
  SidebarWrapper.secretKey = 'SidebarHeader';
129
130
  var _default = SidebarWrapper;
package/package.json CHANGED
@@ -1,13 +1,16 @@
1
1
  {
2
2
  "name": "@oddle.me/react-calendar-timeline",
3
- "version": "0.29.12",
3
+ "version": "0.29.15",
4
4
  "description": "react calendar timeline",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/global.d.ts",
7
+ "engines": {
8
+ "node": ">=16 <25"
9
+ },
7
10
  "scripts": {
8
11
  "build": "npm run build:lib",
9
12
  "build:demo": "echo '!!! Building Demo' && cross-env NODE_ENV=production webpack --progress",
10
- "build:lib": "echo '!!! Building Library' && rimraf lib && cross-env NODE_ENV=production babel src --out-dir lib && node-sass src/lib/Timeline.scss lib/Timeline.css && sed -i'.bak' 's/Timeline\\.scss/Timeline\\.css/g' lib/lib/Timeline.js && rm lib/lib/Timeline.js.bak",
13
+ "build:lib": "echo '!!! Building Library' && rimraf lib && cross-env NODE_ENV=production babel src --out-dir lib && sass --no-source-map src/lib/Timeline.scss lib/Timeline.css && sed -i'.bak' 's/Timeline\\.scss/Timeline\\.css/g' lib/lib/Timeline.js && rm lib/lib/Timeline.js.bak",
11
14
  "lint": "eslint --ext .js --ext .jsx ./src",
12
15
  "lint:fix": "prettier-eslint --parser babylon --write \"src/**/*.js\"",
13
16
  "prepublish": "npm run build:lib",
@@ -22,10 +25,13 @@
22
25
  "publishConfig": {
23
26
  "access": "public"
24
27
  },
25
- "homepage": "https://bitbucket.org/oddle/react-calendar-timeline",
28
+ "homepage": "https://github.com/oddle-engineering/react-calendar-timeline",
26
29
  "repository": {
27
30
  "type": "git",
28
- "url": "git+ssh://git@bitbucket.org/oddle/react-calendar-timeline.git"
31
+ "url": "git+https://github.com/oddle-engineering/react-calendar-timeline.git"
32
+ },
33
+ "bugs": {
34
+ "url": "https://github.com/oddle-engineering/react-calendar-timeline/issues"
29
35
  },
30
36
  "author": "Marius Andra <marius.andra@gmail.com>",
31
37
  "contributors": [
@@ -140,7 +146,7 @@
140
146
  "jest-watch-typeahead": "^0.3.1",
141
147
  "jsdom": "^11.5.1",
142
148
  "moment": "^2.11.1",
143
- "node-sass": "^7.0.1",
149
+ "sass": "^1.97.3",
144
150
  "prettier": "^1.19.1",
145
151
  "prettier-eslint-cli": "^4.7.1",
146
152
  "prop-types": "^15.6.2",