@micromag/screen-timeline 0.3.491 → 0.3.495

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 (3) hide show
  1. package/es/index.js +32 -3
  2. package/lib/index.js +32 -3
  3. package/package.json +3 -3
package/es/index.js CHANGED
@@ -29,6 +29,7 @@ var propTypes = {
29
29
  layout: PropTypes.oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
30
30
  title: PropTypes$1.headingElement,
31
31
  items: PropTypes.arrayOf(PropTypes$1.textElement),
32
+ withoutLine: PropTypes.bool,
32
33
  bulletColor: PropTypes$1.color,
33
34
  lineColor: PropTypes$1.color,
34
35
  bulletShape: PropTypes.oneOf(['circle', 'square']),
@@ -47,6 +48,7 @@ var defaultProps = {
47
48
  layout: 'normal',
48
49
  title: null,
49
50
  items: [null],
51
+ withoutLine: false,
50
52
  bulletColor: null,
51
53
  lineColor: null,
52
54
  bulletShape: 'circle',
@@ -65,6 +67,7 @@ var Timeline = function Timeline(_ref) {
65
67
  var layout = _ref.layout,
66
68
  title = _ref.title,
67
69
  items = _ref.items,
70
+ withoutLine = _ref.withoutLine,
68
71
  bulletColor = _ref.bulletColor,
69
72
  lineColor = _ref.lineColor,
70
73
  bulletShape = _ref.bulletShape,
@@ -135,7 +138,11 @@ var Timeline = function Timeline(_ref) {
135
138
  imageWidth = _useState4[0],
136
139
  setImageWidth = _useState4[1];
137
140
  useEffect(function () {
138
- setImageWidth(firstContentRef.current.offsetWidth - firstLineRef.current.offsetWidth);
141
+ if (firstLineRef.current !== null) {
142
+ setImageWidth(firstContentRef.current.offsetWidth - firstLineRef.current.offsetWidth);
143
+ } else {
144
+ setImageWidth(firstContentRef.current.offsetWidth);
145
+ }
139
146
  }, [width, height]);
140
147
  var timelineElements = (finalItems || []).map(function (item, itemI) {
141
148
  var _ref3 = item || {},
@@ -241,7 +248,7 @@ var Timeline = function Timeline(_ref) {
241
248
  key: "element-".concat(elementType),
242
249
  className: classNames([styles.element, styles["element-".concat(elementType)], _defineProperty({}, styles.hidden, (isView || isStatic) && !hasElement)]),
243
250
  ref: itemI === 0 ? firstContentRef : null
244
- }, /*#__PURE__*/React.createElement("div", {
251
+ }, !withoutLine ? /*#__PURE__*/React.createElement("div", {
245
252
  className: styles.timeline,
246
253
  ref: itemI === 0 ? firstLineRef : null
247
254
  }, /*#__PURE__*/React.createElement("div", {
@@ -253,7 +260,7 @@ var Timeline = function Timeline(_ref) {
253
260
  }) : null, /*#__PURE__*/React.createElement("div", {
254
261
  className: classNames([styles.line, _defineProperty({}, styles.hidden, bottomLineHidden)]),
255
262
  style: _objectSpread({}, !bottomLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
256
- })), /*#__PURE__*/React.createElement("div", {
263
+ })) : null, /*#__PURE__*/React.createElement("div", {
257
264
  className: classNames([styles.body, _defineProperty({}, styles.last, lastType && !lastItem)])
258
265
  }, elementContent));
259
266
  }));
@@ -443,6 +450,17 @@ var definition = [{
443
450
  "value": "Bullet shape"
444
451
  }]
445
452
  })
453
+ }, {
454
+ name: 'withoutLine',
455
+ type: 'toggle',
456
+ defaultValue: false,
457
+ label: defineMessage({
458
+ id: "N4lZhy",
459
+ defaultMessage: [{
460
+ "type": 0,
461
+ "value": "Without line"
462
+ }]
463
+ })
446
464
  }, {
447
465
  name: 'bulletFilled',
448
466
  type: 'toggle',
@@ -594,6 +612,17 @@ var definition = [{
594
612
  "value": "Entries"
595
613
  }]
596
614
  })
615
+ }, {
616
+ name: 'withoutLine',
617
+ type: 'toggle',
618
+ defaultValue: false,
619
+ label: defineMessage({
620
+ id: "N4lZhy",
621
+ defaultMessage: [{
622
+ "type": 0,
623
+ "value": "Without line"
624
+ }]
625
+ })
597
626
  }, {
598
627
  name: 'bulletShape',
599
628
  type: 'radios',
package/lib/index.js CHANGED
@@ -33,6 +33,7 @@ var propTypes = {
33
33
  layout: PropTypes.oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
34
34
  title: core.PropTypes.headingElement,
35
35
  items: PropTypes.arrayOf(core.PropTypes.textElement),
36
+ withoutLine: PropTypes.bool,
36
37
  bulletColor: core.PropTypes.color,
37
38
  lineColor: core.PropTypes.color,
38
39
  bulletShape: PropTypes.oneOf(['circle', 'square']),
@@ -51,6 +52,7 @@ var defaultProps = {
51
52
  layout: 'normal',
52
53
  title: null,
53
54
  items: [null],
55
+ withoutLine: false,
54
56
  bulletColor: null,
55
57
  lineColor: null,
56
58
  bulletShape: 'circle',
@@ -69,6 +71,7 @@ var Timeline = function Timeline(_ref) {
69
71
  var layout = _ref.layout,
70
72
  title = _ref.title,
71
73
  items = _ref.items,
74
+ withoutLine = _ref.withoutLine,
72
75
  bulletColor = _ref.bulletColor,
73
76
  lineColor = _ref.lineColor,
74
77
  bulletShape = _ref.bulletShape,
@@ -139,7 +142,11 @@ var Timeline = function Timeline(_ref) {
139
142
  imageWidth = _useState4[0],
140
143
  setImageWidth = _useState4[1];
141
144
  React.useEffect(function () {
142
- setImageWidth(firstContentRef.current.offsetWidth - firstLineRef.current.offsetWidth);
145
+ if (firstLineRef.current !== null) {
146
+ setImageWidth(firstContentRef.current.offsetWidth - firstLineRef.current.offsetWidth);
147
+ } else {
148
+ setImageWidth(firstContentRef.current.offsetWidth);
149
+ }
143
150
  }, [width, height]);
144
151
  var timelineElements = (finalItems || []).map(function (item, itemI) {
145
152
  var _ref3 = item || {},
@@ -245,7 +252,7 @@ var Timeline = function Timeline(_ref) {
245
252
  key: "element-".concat(elementType),
246
253
  className: classNames([styles.element, styles["element-".concat(elementType)], _defineProperty({}, styles.hidden, (isView || isStatic) && !hasElement)]),
247
254
  ref: itemI === 0 ? firstContentRef : null
248
- }, /*#__PURE__*/React.createElement("div", {
255
+ }, !withoutLine ? /*#__PURE__*/React.createElement("div", {
249
256
  className: styles.timeline,
250
257
  ref: itemI === 0 ? firstLineRef : null
251
258
  }, /*#__PURE__*/React.createElement("div", {
@@ -257,7 +264,7 @@ var Timeline = function Timeline(_ref) {
257
264
  }) : null, /*#__PURE__*/React.createElement("div", {
258
265
  className: classNames([styles.line, _defineProperty({}, styles.hidden, bottomLineHidden)]),
259
266
  style: _objectSpread({}, !bottomLineHidden ? utils.getStyleFromColor(lineColor, 'backgroundColor') : null)
260
- })), /*#__PURE__*/React.createElement("div", {
267
+ })) : null, /*#__PURE__*/React.createElement("div", {
261
268
  className: classNames([styles.body, _defineProperty({}, styles.last, lastType && !lastItem)])
262
269
  }, elementContent));
263
270
  }));
@@ -447,6 +454,17 @@ var definition = [{
447
454
  "value": "Bullet shape"
448
455
  }]
449
456
  })
457
+ }, {
458
+ name: 'withoutLine',
459
+ type: 'toggle',
460
+ defaultValue: false,
461
+ label: reactIntl.defineMessage({
462
+ id: "N4lZhy",
463
+ defaultMessage: [{
464
+ "type": 0,
465
+ "value": "Without line"
466
+ }]
467
+ })
450
468
  }, {
451
469
  name: 'bulletFilled',
452
470
  type: 'toggle',
@@ -598,6 +616,17 @@ var definition = [{
598
616
  "value": "Entries"
599
617
  }]
600
618
  })
619
+ }, {
620
+ name: 'withoutLine',
621
+ type: 'toggle',
622
+ defaultValue: false,
623
+ label: reactIntl.defineMessage({
624
+ id: "N4lZhy",
625
+ defaultMessage: [{
626
+ "type": 0,
627
+ "value": "Without line"
628
+ }]
629
+ })
601
630
  }, {
602
631
  name: 'bulletShape',
603
632
  type: 'radios',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-timeline",
3
- "version": "0.3.491",
3
+ "version": "0.3.495",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -65,7 +65,7 @@
65
65
  "@micromag/element-background": "^0.3.491",
66
66
  "@micromag/element-container": "^0.3.491",
67
67
  "@micromag/element-footer": "^0.3.491",
68
- "@micromag/element-header": "^0.3.491",
68
+ "@micromag/element-header": "^0.3.495",
69
69
  "@micromag/element-heading": "^0.3.491",
70
70
  "@micromag/element-layout": "^0.3.491",
71
71
  "@micromag/element-scroll": "^0.3.491",
@@ -82,5 +82,5 @@
82
82
  "access": "public",
83
83
  "registry": "https://registry.npmjs.org/"
84
84
  },
85
- "gitHead": "d4af8a992fad6d8d50e41e347a4b92e6e025b984"
85
+ "gitHead": "dca5bb24d7c6de3807e45e15dccfdca68dcac0f4"
86
86
  }