Custom header item header

CHANGELOG.md

@@ -7,8 +7,12 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+### Fixed
+
+* Provided a new key `groupLabelKey` to allow splitting of the key used to render the Sidebar and the InfoLabel visible during drag operations. `groupTitleKey` continues to be used to render the Sidebar. #442 @thiagosatoshi
 * fix scroll left/right causes item move/edit to be at incorrect time #401 @acemac 
 * now `getResizeProps` take `leftClassName` and `rightClassName` and returns className for left and right props @acemac 
+* fix functionality of `itemTitle` and `itemDivTitle` [issue](https://github.com/namespace-ee/react-calendar-timeline/issues/429#issuecomment-426456693) @acemac 
 
 ### 0.21.0
 

README.md

@@ -83,6 +83,8 @@ Expects either a vanilla JS array or an immutableJS array, consisting of objects
   id: 1,
   title: 'group 1',
   rightTitle: 'title in the right sidebar',
+  stackItems?: true,
+  height?: 30
 }
 ```
 
@@ -141,12 +143,13 @@ An array specifying keys in the `items` and `groups` objects. Defaults to
   groupIdKey: 'id',
   groupTitleKey: 'title',
   groupRightTitleKey: 'rightTitle',
+  groupLabelKey: 'title', // key for what to show in `InfoLabel`
   itemIdKey: 'id',
   itemTitleKey: 'title',    // key for item div content
   itemDivTitleKey: 'title', // key for item div title (<div title="text"/>)
   itemGroupKey: 'group',
   itemTimeStartKey: 'start_time',
-  itemTimeEndKey: 'end_time'
+  itemTimeEndKey: 'end_time',
 }
 ```
 
@@ -233,7 +236,7 @@ Append a special `.rct-drag-right` handle to the elements and only resize if dra
 
 ### stackItems
 
-Stack items under each other, so there is no visual overlap when times collide. Defaults to `false`.
+Stack items under each other, so there is no visual overlap when times collide.  Can be overridden in the `groups` array. Defaults to `false`.
 
 ## traditionalZoom
 
@@ -1040,9 +1043,123 @@ import Timeline, {
 </Timeline>
 ```
 
+### `ItemHeader`
+
+
+Responsible for rendering group of items in the header.
+
+#### props
+
+| Prop          | type            | description|
+| ----------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `style`| `object`| applied to the root of the header |
+| `className` | `string`| applied to the root of the header|
+| `itemHeight`| `number` | item height |
+| `stackItems` | `boolean` (`false` by default) | optionally stack items in header |
+| `itemRenderer`| `Function`| render prop to render each interval in the header |
+| `props` | `object` | pass extra props to itemRenderer |
+
+#### itemRenderer
+
+Render prop function used to render a customized item. The function provides multiple parameters that can be used to render each item.
+
+Paramters provided to the function has two types: context params which have the state of the item and timeline, and prop getters functions
+
+##### item
+
+The object of the item to render
+
+##### timelineContext
+
+timeline context
+
+##### itemContext
+
+item context
+
+##### Prop getters functions
+
+Rather than applying props on the element yourself and to avoid your props being overridden (or overriding the props returned). You can pass an object to the prop getters to avoid any problems. This object will only accept some properties that our component manage so the component make sure to combine them correctly.
+
+| property         | type                 | description|
+| ---------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `getRootProps`   | `function(props={})` | returns the props you should apply to the root div element.|
+
+* `getRootProps` The returned props are:
+
+  * style: inline object style
+
+  These properties can be extended using the prop argument with properties:
+
+  * style: extra inline styles to be applied to the component
+
+#### example
+
+```jsx
+import Timeline, {
+  TimelineHeaders,
+  SidebarHeader,
+  DateHeader
+} from 'react-calendar-timeline'
+
+const items = [
+  {
+    id: 1,
+    title: 'item 1',
+    start_time: moment(),
+    end_time: moment().add(1, 'hour')
+  },
+  {
+    id: 2,
+    title: 'item 2',
+    start_time: moment().add(-0.5, 'hour'),
+    end_time: moment().add(0.5, 'hour')
+  },
+  {
+    id: 3,
+    title: 'item 3',
+    start_time: moment().add(2, 'hour'),
+    end_time: moment().add(3, 'hour')
+  }
+]
+
+<Timeline>
+  <TimelineHeaders>
+    <SidebarHeader>
+      {({ getRootProps }) => {
+        return <div {...getRootProps()}>Left</div>
+      }}
+    </SidebarHeader>
+    <ItemHeader
+      className="custom-class"
+      style={{
+        backgroundColor: "blue"
+      }}
+      items={items}
+      itemRenderer={({ item, getRootProps }) => {
+        return (
+          <div
+            {...getRootProps({
+              style: {
+                border: '1px solid black',
+                color: 'white'
+              }
+            })}
+          >
+            {item.title}
+          </div>
+        )
+      }}
+    />
+    <ItemHeader items={items} stackItems />
+
+  </TimelineHeaders>
+</Timeline>
+```
+
 ### `CustomHeader`
 
-Responsible for rendering the headers above calendar part of the timeline. This is the base component for `DateHeader` and offers more control with less features.
+Responsible for rendering the headers above calendar part of the timeline. This is the base component for `DateHeader` and `ItemHeader`. This offers more control with less features.
 
 #### props
 

__fixtures__/groupOrderAndItemDimentions.js

@@ -0,0 +1,131 @@
+export const orderedGroups = {
+  '1': {
+    group: {
+      id: '1'
+    },
+    index: 0
+  },
+  '2': {
+    group: {
+      id: '2'
+    },
+    index: 1
+  },
+  '3': {
+    group: {
+      id: '3'
+    },
+    index: 2
+  }
+}
+
+export const dimensionItems = [
+  {
+    dimensions: {
+      collisionLeft: 1540540000000,
+      collisionWidth: 6803877,
+      height: 22.5,
+      left: 907.4074074074074,
+      order: {
+        group: {
+          id: '1'
+        },
+        index: 0
+      },
+      stack: true,
+      top: 7.5,
+      width: 78.74857638888886
+    },
+    id: '0'
+  },
+  {
+    dimensions: {
+      collisionLeft: 1540532800000,
+      collisionWidth: 21203877,
+      height: 22.5,
+      left: 824.074074074074,
+      order: {
+        group: {
+          id: '1'
+        },
+        index: 0
+      },
+      stack: true,
+      top: 37.5,
+      width: 245.4152430555556
+    },
+    id: '5'
+  },
+  {
+    dimensions: {
+      collisionLeft: 1540550800000,
+      collisionWidth: 24803877,
+      height: 22.5,
+      left: 1032.4074074074074,
+      order: {
+        group: {
+          id: '1'
+        },
+        index: 0
+      },
+      stack: true,
+      top: 7.5,
+      width: 287.08190972222224
+    },
+    id: '6'
+  },
+  {
+    dimensions: {
+      collisionLeft: 1540570000000,
+      collisionWidth: 14875919,
+      height: 22.5,
+      left: 1254.6296296296296,
+      order: {
+        group: {
+          id: '1'
+        },
+        index: 0
+      },
+      stack: true,
+      top: 37.5,
+      width: 172.1749884259259
+    },
+    id: '1'
+  },
+  {
+    dimensions: {
+      collisionLeft: 1540620000000,
+      collisionWidth: 20397548,
+      height: 22.5,
+      left: 1833.3333333333333,
+      order: {
+        group: {
+          id: '1'
+        },
+        index: 0
+      },
+      stack: true,
+      top: 7.5,
+      width: 236.08273148148123
+    },
+    id: '2'
+  },
+  {
+    dimensions: {
+      collisionLeft: 1540656000000,
+      collisionWidth: 20397548,
+      height: 22.5,
+      left: 2250,
+      order: {
+        group: {
+          id: '3'
+        },
+        index: 2
+      },
+      stack: true,
+      top: 105,
+      width: 236.08273148148146
+    },
+    id: '3'
+  }
+]

__fixtures__/itemsAndGroups.js

@@ -0,0 +1,58 @@
+import moment from 'moment'
+
+export const items = [
+  {
+    id: '0',
+    group: '1',
+    start_time: moment('2018-10-26T10:46:40.000').valueOf(),
+    end_time: moment('2018-10-26T12:40:03.877').valueOf(),
+    canMove: false,
+    canResize: false
+  },
+  {
+    id: '5',
+    group: '1',
+    start_time: moment('2018-10-26T08:46:40.000').valueOf(),
+    end_time: moment('2018-10-26T14:40:03.877').valueOf(),
+    canMove: false,
+    canResize: false,
+    className: ''
+  },
+  {
+    id: '6',
+    group: '1',
+    start_time: moment('2018-10-26T13:46:40.000').valueOf(),
+    end_time: moment('2018-10-26T20:40:03.877').valueOf(),
+    canMove: false,
+    canResize: false,
+    className: ''
+  },
+  {
+    id: '1',
+    group: '1',
+    start_time: moment('2018-10-26T19:06:40.000').valueOf(),
+    end_time: moment('2018-10-26T23:14:35.919').valueOf(),
+    canMove: true,
+    canResize: 'both'
+  },
+  {
+    id: '2',
+    group: '1',
+    start_time: moment('2018-10-27T08:00:00.000').valueOf(),
+    end_time: moment('2018-10-27T13:39:57.548').valueOf(),
+    canMove: false,
+    canResize: false,
+    className: ''
+  },
+  {
+    id: '3',
+    group: '3',
+    start_time: moment('2018-10-27T18:00:00.000').valueOf(),
+    end_time: moment('2018-10-27T23:39:57.548').valueOf(),
+    canMove: false,
+    canResize: false,
+    className: ''
+  }
+]
+
+export const groups = [{ id: '1' }, { id: '2' }, { id: '3' }]