(https://github.com/dphaener)",
12 | "license": "MIT",
13 | "keywords": [
14 | "react-component",
15 | "react",
16 | "calendar",
17 | "scheduler",
18 | "gantt"
19 | ],
20 | "repository": {
21 | "type": "git",
22 | "url": "git+ssh://git@github.com/legitcode/scheduler.git"
23 | },
24 | "dependencies": {
25 | "immutable": "3.8.1",
26 | "legit-rubyfill": "0.0.7",
27 | "moment": "2.18.0",
28 | "moment-timezone": "0.5.11",
29 | "prop-types": "^15.6.0",
30 | "react": "16.2.0",
31 | "react-dnd": "2.5.4",
32 | "react-dnd-html5-backend": "2.5.4",
33 | "react-dom": "16.2.0",
34 | "react-draggable": "2.2.3",
35 | "react-redux": "5.0.6",
36 | "redux": "3.7.2",
37 | "redux-batched-actions": "0.2.1",
38 | "strftime": "0.10.0"
39 | },
40 | "devDependencies": {
41 | "babel": "6.23.0",
42 | "babel-cli": "^6.24.0",
43 | "babel-core": "6.24.0",
44 | "babel-eslint": "7.1.1",
45 | "babel-loader": "6.4.1",
46 | "babel-plugin-transform-decorators-legacy": "1.3.4",
47 | "babel-preset-es2015": "6.24.0",
48 | "babel-preset-react": "6.23.0",
49 | "babel-preset-stage-0": "6.22.0",
50 | "chai": "3.5.0",
51 | "css-loader": "0.27.3",
52 | "eslint": "3.18.0",
53 | "eslint-plugin-react": "6.10.2",
54 | "estraverse-fb": "1.3.1",
55 | "expect": "1.20.2",
56 | "file-loader": "0.10.1",
57 | "img-loader": "2.0.0",
58 | "jsdom": "9.12.0",
59 | "json-loader": "0.5.7",
60 | "legit-tests": "1.1.2",
61 | "mocha": "3.2.0",
62 | "mocha-babel": "3.0.3",
63 | "node-libs-browser": "2.0.0",
64 | "node-sass": "4.5.0",
65 | "react-addons-perf": "15.4.2",
66 | "react-hot-loader": "3.1.3",
67 | "sass-loader": "6.0.3",
68 | "sinon": "2.1.0",
69 | "sinon-chai": "2.8.0",
70 | "style-loader": "0.14.1",
71 | "timekeeper": "1.0.0",
72 | "url-loader": "0.5.8",
73 | "webpack": "3.10.0",
74 | "webpack-dev-server": "2.11.0",
75 | "why-did-you-update": "0.1.0"
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/actions/cells.js:
--------------------------------------------------------------------------------
1 | export function createCells(resources, range) {
2 | return {
3 | type: 'createCells',
4 | range,
5 | resources
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/src/actions/events.js:
--------------------------------------------------------------------------------
1 | export function moveEvent(event, cell, callback) {
2 | return {
3 | type: 'moveEvent',
4 | callback,
5 | event,
6 | cell
7 | }
8 | }
9 |
10 | export function updateEventDuration(event, duration, callback) {
11 | return {
12 | type: 'updateEventDuration',
13 | callback,
14 | event,
15 | duration
16 | }
17 | }
18 |
19 | export function replaceResources(resources) {
20 | return {
21 | type: 'replaceResources',
22 | resources
23 | }
24 | }
25 |
26 | export function replaceEvents(events) {
27 | return {
28 | type: 'replaceEvents',
29 | events
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/actions/range.js:
--------------------------------------------------------------------------------
1 | export function advanceRange() {
2 | return {
3 | type: 'advanceRange',
4 | nextAction: 'createCells'
5 | }
6 | }
7 |
8 | export function retardRange() {
9 | return {
10 | type: 'retardRange',
11 | nextAction: 'createCells'
12 | }
13 | }
14 |
15 | export function setRange(range) {
16 | return {
17 | type: 'setRange',
18 | range
19 | }
20 | }
21 |
22 | export function clearRangeFlag() {
23 | return {
24 | type: 'clearRangeFlag'
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/cell.jsx:
--------------------------------------------------------------------------------
1 | // Vendor Libraries
2 | import React from 'react'
3 | import PropTypes from 'prop-types';
4 | import { DropTarget } from 'react-dnd'
5 |
6 | // Local LIbraries
7 | import { ItemTypes } from './constants'
8 |
9 | // Styles
10 | import { cell } from './styles'
11 |
12 | const cellTarget = {
13 | drop(props, monitor, component) {
14 | return Object.assign(component.state, props)
15 | },
16 | canDrop(props) {
17 | return !props.children
18 | }
19 | }
20 |
21 | function collect(connect, monitor) {
22 | return {
23 | connectDropTarget: connect.dropTarget(),
24 | isOver: monitor.isOver()
25 | }
26 | }
27 |
28 | @DropTarget(ItemTypes.EVENT, cellTarget, collect)
29 | export default class Cell extends React.Component {
30 | static propTypes = {
31 | resource: PropTypes.string.isRequired,
32 | date: PropTypes.string.isRequired
33 | }
34 |
35 | constructor(props) {
36 | super(props);
37 | this.state = { cellWidth: 0 };
38 | }
39 |
40 | componentDidMount() {
41 | const node = this.wrapper;
42 | const rect = node.getBoundingClientRect();
43 | const cellWidth = rect.width + 2;
44 |
45 | this.setState({ cellWidth });
46 | }
47 |
48 | shouldComponentUpdate(nextProps, nextState) {
49 | //if (this.state.cellWidth !== nextState.cellWidth) { shouldUpdate = true }
50 | //if (nextProps.resource !== this.props.resource) { shouldUpdate = true }
51 | //if (nextProps.date !== this.props.date) { shouldUpdate = true }
52 | //if (nextProps.children && !this.props.children) { shouldUpdate = true }
53 |
54 | if (!this.areObjectsEqual(this.props.children, nextProps.children)) { return true }
55 |
56 | return false;
57 | }
58 |
59 | areObjectsEqual(first = {}, second = {}) {
60 | return Object.keys(first).reduce((prev, curr) => {
61 | if (first[curr] !== second[curr]) { return false }
62 | }, true);
63 | }
64 |
65 | render() {
66 | const { children, connectDropTarget, onClick } = this.props;
67 |
68 | return (
69 | connectDropTarget(
70 | { this.wrapper = el; }}>
71 | { React.Children.map(children, child => React.cloneElement(child, this.state)) }
72 |
73 | )
74 | )
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/src/chart.jsx:
--------------------------------------------------------------------------------
1 | // Vendor Libraries
2 | import React, { Component } from 'react';
3 | import PropTypes from 'prop-types';
4 | import { DragDropContext } from 'react-dnd';
5 | import HTML5Backend from 'react-dnd-html5-backend';
6 | import 'legit-rubyfill/array/each_slice';
7 | import 'legit-rubyfill/array/equals';
8 |
9 | // Local Libraries
10 | import Event from './event';
11 | import PartialEvent from './partial_event';
12 | import Cell from './cell';
13 | import RangeDate from './range_date';
14 |
15 | // Styles
16 | import { chart, cellWrapper } from './styles';
17 |
18 | @DragDropContext(HTML5Backend)
19 | export default class Chart extends Component {
20 | static propTypes = {
21 | events: PropTypes.array.isRequired,
22 | resources: PropTypes.array.isRequired,
23 | range: PropTypes.object.isRequired,
24 | cells: PropTypes.object.isRequired,
25 | eventChanged: PropTypes.func.isRequired,
26 | eventResized: PropTypes.func.isRequired,
27 | eventClicked: PropTypes.func.isRequired,
28 | cellClicked: PropTypes.func.isRequired,
29 | rowHeight: PropTypes.number.isRequired,
30 | width: PropTypes.number.isRequired
31 | }
32 |
33 | shouldComponentUpdate(nextProps, nextState) {
34 | let shouldUpdate = true;
35 |
36 | // First test to see if the resources are exactly the same
37 | if (nextProps.resources.equals(this.props.resources)) { shouldUpdate = false }
38 |
39 | // Now let's look at the events and see if they are different
40 | nextProps.events.forEach((event, idx) => {
41 | if (!this.areObjectsEqual(event, this.props.events[idx])) { shouldUpdate = true }
42 | })
43 |
44 | return shouldUpdate;
45 | }
46 |
47 | areObjectsEqual(first, second) {
48 | return Object.keys(first).reduce((prev, curr) => {
49 | if (first[curr] !== second[curr]) { return false }
50 | }, true);
51 | }
52 |
53 | renderEvent(resource, date) {
54 | const { rowHeight, eventChanged, eventResized, eventClicked } = this.props
55 | const currentEvent = this.props.events.find(event => {
56 | return event.resource === resource && event.startDate === date
57 | })
58 |
59 | if (currentEvent) {
60 | return (
61 |
68 | )
69 | } else {
70 | const partialEvent = this.props.events.find(event => {
71 | let eventEnd = new RangeDate(event.startDate).advance('days', event.duration),
72 | from = this.props.range.from.date,
73 | eventStart = new RangeDate(event.startDate).date
74 |
75 | return (
76 | eventEnd.toRef() === date &&
77 | from.isAfter(eventStart, 'day') &&
78 | event.resource === resource
79 | )
80 | })
81 |
82 | if (partialEvent) return (
83 |
88 | )
89 | }
90 | }
91 |
92 | cellClicked(ev, resource, date) {
93 | ev.stopPropagation()
94 | const targetClass = ev.target.attributes[0].value
95 | if (targetClass !== 'resizer') {
96 | this.props.cellClicked(resource, date)
97 | }
98 | }
99 |
100 | renderCell(resource, date) {
101 | const { width, range } = this.props
102 |
103 | return (
104 |
108 | | ::this.cellClicked(ev, resource, date)}>
112 | { this.renderEvent(resource, date) }
113 | |
114 |
115 | )
116 | }
117 |
118 | renderRow(resource, idx) {
119 | const { range, width } = this.props
120 |
121 | return (
122 |
123 | { range.map(date => this.renderCell(resource, date.toRef())) }
124 |
125 | )
126 | }
127 |
128 | createCells() {
129 | const { resources } = this.props,
130 | rows = []
131 |
132 | resources.forEach((resource, idx) => {
133 | rows.push(this.renderRow(resource, idx))
134 | })
135 |
136 | return rows
137 | }
138 |
139 | render() {
140 | const { width } = this.props
141 |
142 | return (
143 |
144 | { this.createCells() }
145 |
146 | )
147 | }
148 | }
149 |
--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
1 | export const ItemTypes = {
2 | EVENT: 'event'
3 | }
4 |
--------------------------------------------------------------------------------
/src/css/default.scss:
--------------------------------------------------------------------------------
1 | div.event-box {
2 | span.resizer {
3 | &:hover {
4 | cursor: ew-resize;
5 | }
6 | }
7 |
8 | span.event-handle {
9 | &:hover {
10 | cursor: move;
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/date_range.jsx:
--------------------------------------------------------------------------------
1 | import RangeDate from './range_date'
2 |
3 | export default class DateRange {
4 | constructor(...args) {
5 | let [ from, to ] = args
6 |
7 | this.from = new RangeDate(from)
8 | this.to = new RangeDate(to)
9 | }
10 |
11 | daysInRange() {
12 | return this.to.date.diff(this.from.date, 'days') + 1
13 | }
14 |
15 | toString() {
16 | return `${this.from.toString()} - ${this.to.toString()}`
17 | }
18 |
19 | advance(reverse = false) {
20 | const advanceAmount = reverse ? -this.daysInRange() : this.daysInRange(),
21 | from = this.from.advance('days', advanceAmount),
22 | to = this.to.advance('days', advanceAmount)
23 |
24 | return new DateRange(from, to)
25 | }
26 |
27 | map(func) {
28 | let current = this.from,
29 | dates = []
30 |
31 | while (current.value() <= this.to.value()) {
32 | dates.push(func(current))
33 | current = current.advance('days', 1)
34 | }
35 |
36 | return dates
37 | }
38 |
39 | forEach(func) {
40 | let current = this.from
41 |
42 | while (current.value() <= this.to.value()) {
43 | func(current)
44 | current = current.advance('days', 1)
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/event.jsx:
--------------------------------------------------------------------------------
1 | // Vendor Libraries
2 | import React from 'react'
3 | import PropTypes from 'prop-types';
4 | import { DragSource } from 'react-dnd'
5 | import { connect } from 'react-redux'
6 |
7 | // Local Libraries
8 | import { moveEvent, updateEventDuration } from './actions/events'
9 | import { ItemTypes } from './constants'
10 |
11 | // Styles
12 | import { eventHandleStyles, eventStyles, resizerStyles, boxStyles } from './styles'
13 |
14 | /* globals document */
15 |
16 | const eventSource = {
17 | beginDrag(props) {
18 | return {
19 | resource: props.resource,
20 | date: props.startDate,
21 | id: props.id
22 | }
23 | },
24 | endDrag(props, monitor, component) {
25 | if (!monitor.didDrop()) return
26 |
27 | component.props.dispatch(
28 | moveEvent(
29 | props,
30 | monitor.getDropResult(),
31 | props.eventChanged
32 | )
33 | )
34 | },
35 | canDrag(props) {
36 | return !props.disabled
37 | }
38 | }
39 |
40 | function collect(connect, monitor) {
41 | return {
42 | connectDragSource: connect.dragSource(),
43 | isDragging: monitor.isDragging(),
44 | connectDragPreview: connect.dragPreview()
45 | }
46 | }
47 |
48 | @DragSource(ItemTypes.EVENT, eventSource, collect)
49 | class Event extends React.Component {
50 | static propTypes = {
51 | title: PropTypes.string.isRequired,
52 | startDate: PropTypes.string.isRequired,
53 | duration: PropTypes.number.isRequired,
54 | resource: PropTypes.string.isRequired,
55 | dispatch: PropTypes.func,
56 | eventChanged: PropTypes.func.isRequired,
57 | eventResized: PropTypes.func.isRequired,
58 | eventClicked: PropTypes.func.isRequired,
59 | cellWidth: PropTypes.number,
60 | disabled: PropTypes.bool,
61 | id: PropTypes.string.isRequired,
62 | styles: PropTypes.object,
63 | isDragging: PropTypes.bool.isRequired,
64 | connectDragSource: PropTypes.func.isRequired,
65 | connectDragPreview: PropTypes.func.isRequired,
66 | rowHeight: PropTypes.number.isRequired,
67 | children: PropTypes.node
68 | }
69 |
70 | constructor(props) {
71 | super(props)
72 |
73 | this.state = {}
74 | }
75 |
76 | componentWillMount() {
77 | const { duration, cellWidth } = this.props,
78 | width = (duration * cellWidth) === 0 ? cellWidth : (duration * cellWidth) - duration - 9
79 |
80 | this.setState({ cellWidth, width, startWidth: width })
81 | }
82 |
83 | componentDidMount() {
84 | this.refs.resizer.addEventListener('mousedown', this.initDrag, false)
85 | }
86 |
87 | componentWillReceiveProps(nextProps) {
88 | const { duration, cellWidth } = nextProps,
89 | width = (duration * cellWidth) === 0 ? cellWidth : duration * cellWidth - duration - 9
90 |
91 | this.setState({ duration, width, startWidth: width })
92 | }
93 |
94 | initDrag = (ev) => {
95 | ev.stopPropagation()
96 |
97 | this.setState({
98 | startX: ev.clientX
99 | })
100 |
101 | document.documentElement.addEventListener('mousemove', this.doDrag, false)
102 | document.documentElement.addEventListener('mouseup', this.stopDrag, false)
103 | }
104 |
105 | doDrag = (ev) => {
106 | ev.stopPropagation()
107 | const { startWidth, startX } = this.state,
108 | newWidth = (startWidth + ev.clientX - startX)
109 |
110 | this.setState({ width: newWidth })
111 | }
112 |
113 | stopDrag = (ev) => {
114 | ev.stopPropagation()
115 | const { eventResized, disabled, dispatch, id, title, startDate, resource, styles } = this.props,
116 | { width } = this.state,
117 | newDuration = this.roundToNearest(width)
118 |
119 | dispatch(
120 | updateEventDuration(
121 | { disabled, id, title, startDate, resource, styles },
122 | newDuration,
123 | eventResized
124 | )
125 | )
126 |
127 | document.documentElement.removeEventListener('mousemove', this.doDrag, false)
128 | document.documentElement.removeEventListener('mouseup', this.stopDrag, false)
129 | }
130 |
131 | roundToNearest(numToRound) {
132 | return Math.ceil(numToRound / this.props.cellWidth)
133 | }
134 |
135 | dispatchEventClick(ev) {
136 | ev.stopPropagation()
137 | this.props.eventClicked(this.props)
138 | }
139 |
140 | render() {
141 | const { styles, isDragging, connectDragSource, connectDragPreview, id, title, children, rowHeight, ...rest } = this.props,
142 | { width } = this.state,
143 | resizerStyleMerge = Object.assign({ height: '100%' }, resizerStyles),
144 | defaultStyles = { color: '#000', backgroundColor: 'darkgrey' },
145 | eventStyleMerge = Object.assign({ width }, styles || defaultStyles, eventStyles),
146 | opacity = isDragging ? 0 : 1,
147 | boxStyleMerge = Object.assign({ width, opacity }, boxStyles)
148 |
149 | return (
150 |
151 | { isDragging ? null :
152 | connectDragPreview(
153 |
154 | { connectDragSource(
155 |
156 | )
157 | }
158 | {title}
159 |
160 | )
161 | }
162 |
163 |
9 |
10 | { range.map(date => (
11 |
15 | {date.toCal()}
16 |
17 | ))
18 | }
19 |
20 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
58 |
59 | {title}
60 |
61 |
77 |
85 |
86 | { range.toString() }
87 |
88 |
96 |
9 | { resources.map(resource => (
10 |
14 | {resource}
15 |
16 | ))
17 | }
18 |