Skip to content

Event label format customization added using moment.js #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ssadev wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Event label format customization added using moment.js #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc8e94c
Event label format customization added using moment.js
ssadev Feb 22, 2022
a6ae272
Event label format customization added using moment.js
ssadev Feb 22, 2022
87c1170
props name changes and props added to Readme for documentation
ssadev Feb 22, 2022
d32bc77
momentjs reference added
ssadev Feb 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 23 additions & 18 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# React Horizontal Timeline

[![npm version](https://badge.fury.io/js/react-horizontal-timeline.svg)](https://badge.fury.io/js/react-horizontal-timeline)
[![Build Status](https://travis-ci.org/jckdrpr/react-horizontal-timeline.svg?branch=master)](https://travis-ci.org/jckdrpr/react-horizontal-timeline)
[![Code Climate](https://codeclimate.com/github/jckdrpr/react-horizontal-timeline/badges/gpa.svg)](https://codeclimate.com/github/jckdrpr/react-horizontal-timeline)
Expand All @@ -9,29 +10,31 @@ A react port of the horizontal time-line developed by CodyHouse.
Here is a [demo](http://sherubthakur.github.io/react-horizontal-timeline) I hope you too are a fan of the elder scrolls.

## NOTE

This package is no longer maintained by me. If you find it usefull and would like to be a maintainer for this package please contact me sherub.thakur@gmail.com

## HorizontalTimeline

It will just render a timeline with the dates that you provided and it is up to you what to do when a date is selected. i.e. it will give you the index of the date that was clicked and you can do anything with it.

Property | Type | Default | Description
:--------------------------|:--------------|:-------------------------------|:--------------------------------
values (**required**) | array | undefined | **sorted** array of dates (format:**yyyy-mm-dd**)
indexClick (**required**) | function | undefined | function that takes the index of the array as argument
index (**required**) | number | undefined | the index of the selected date
getLabel | function | date.toDateString().substring(4) | A function to calculate the label of the event based on the date of the event
minEventPadding | number | 20 | The minimum padding between two event labels
maxEventPadding | number | 120 | The maximum padding between two event labels
linePadding | number | 100 | Padding used at the start and end of the timeline
labelWidth | number | 85 | The width of an individual label
fillingMotion | object |{ stiffness: 150, damping: 25 } | Sets the animation style of how filling motion will look
slidingMotion | object |{ stiffness: 150, damping: 25 } | Sets the animation style of how sliding motion will look
styles | object |{ background: '#f8f8f8', foreground: '#7b9d6f', outline: '#dfdfdf' } | object containing the styles for the timeline currently outline (the color of the boundaries of the timeline and the buttons on it's either side), foreground (the filling color, active color) and background (the background color of your page) colors of the timeline can be changed.
isTouchEnabled | boolean | true | Enable touch events (swipe left, right)
isKeyboardEnabled | boolean | true | Enable keyboard events (up, down, left, right)
isOpenBeginning | boolean | true | Show the beginning of the timeline as open ended
isOpenEnding | boolean | true | Show the ending of the timeline as open ended
| Property | Type | Default | Description |
| :------------------------ | :------- | :------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| values (**required**) | array | undefined | **sorted** array of dates (format:**yyyy-mm-dd**) |
| indexClick (**required**) | function | undefined | function that takes the index of the array as argument |
| index (**required**) | number | undefined | the index of the selected date |
| getLabel | function | date.toDateString().substring(4) | A function to calculate the label of the event based on the date of the event |
| labelFormat | string | "DD MMM" | Customize label date. using [momentjs](https://momentjs.com/) format |
| minEventPadding | number | 20 | The minimum padding between two event labels |
| maxEventPadding | number | 120 | The maximum padding between two event labels |
| linePadding | number | 100 | Padding used at the start and end of the timeline |
| labelWidth | number | 85 | The width of an individual label |
| fillingMotion | object | { stiffness: 150, damping: 25 } | Sets the animation style of how filling motion will look |
| slidingMotion | object | { stiffness: 150, damping: 25 } | Sets the animation style of how sliding motion will look |
| styles | object | { background: '#f8f8f8', foreground: '#7b9d6f', outline: '#dfdfdf' } | object containing the styles for the timeline currently outline (the color of the boundaries of the timeline and the buttons on it's either side), foreground (the filling color, active color) and background (the background color of your page) colors of the timeline can be changed. |
| isTouchEnabled | boolean | true | Enable touch events (swipe left, right) |
| isKeyboardEnabled | boolean | true | Enable keyboard events (up, down, left, right) |
| isOpenBeginning | boolean | true | Show the beginning of the timeline as open ended |
| isOpenEnding | boolean | true | Show the ending of the timeline as open ended |

This is how it can be used.

Expand Down Expand Up @@ -68,7 +71,7 @@ export default class App extends React.Component {
values={ VALUES } />
</div>
<div className='text-center'>
{/* any arbitrary component can go here */}
{/* any arbitrary component can go here */}
{this.state.value}
</div>
</div>
Expand All @@ -77,9 +80,11 @@ export default class App extends React.Component {
}

```

For more advanced usage take a look at the demos directory.

## Running the development version

- Just clone the repo and do an `npm install` (or `yarn install`)
- Note: You will need to do `npm install react react-dom` to install `peerDependencies` as both `yarn` and `npm` don't do this.
- Run `npm run start`/`npm start`/`yarn start`.
Expand Down
60 changes: 34 additions & 26 deletions demos/demo-swipeable-views/HorizontalTimelineContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
import SwipeableViews from 'react-swipeable-views';

import HorizontalTimeline from '../../src/Components/HorizontalTimeline';
import HorizontalTimelineConfigurator from './HorizontalTimelineConfigurator';
import React from "react";
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";

import HorizontalTimeline from "../../src/Components/HorizontalTimeline";
import HorizontalTimelineConfigurator from "./HorizontalTimelineConfigurator";

export default class HorizontalTimelineContent extends React.Component {
constructor(props) {
Expand All @@ -23,9 +22,9 @@ export default class HorizontalTimelineContent extends React.Component {
fillingMotionDamping: 25,
slidingMotionStiffness: 150,
slidingMotionDamping: 25,
stylesBackground: '#f8f8f8',
stylesForeground: '#7b9d6f',
stylesOutline: '#dfdfdf',
stylesBackground: "#f8f8f8",
stylesForeground: "#7b9d6f",
stylesOutline: "#dfdfdf",
isTouchEnabled: true,
isKeyboardEnabled: true,
isOpenEnding: true,
Expand All @@ -34,8 +33,8 @@ export default class HorizontalTimelineContent extends React.Component {
}

static propTypes = {
content: PropTypes.arrayOf(PropTypes.object).isRequired
}
content: PropTypes.arrayOf(PropTypes.object).isRequired,
};

componentWillMount() {
this.dates = this.props.content.map((entry) => entry.date);
Expand All @@ -50,13 +49,13 @@ export default class HorizontalTimelineContent extends React.Component {

const views = this.props.content.map((entry, index) => {
return (
<div className='container' key={index}>
{ entry.component }
<div className="container" key={index}>
{entry.component}
</div>
);
});

let configurator = (<div></div>);
let configurator = <div></div>;
if (this.state.showConfigurator) {
configurator = (
<HorizontalTimelineConfigurator
Expand All @@ -70,53 +69,62 @@ export default class HorizontalTimelineContent extends React.Component {

return (
<div>
<div style={{ width: '60%', height: '100px', margin: '0 auto' }}>
<div style={{ width: "60%", height: "100px", margin: "0 auto" }}>
<HorizontalTimeline
fillingMotion={{ stiffness: state.fillingMotionStiffness, damping: state.fillingMotionDamping }}
fillingMotion={{
stiffness: state.fillingMotionStiffness,
damping: state.fillingMotionDamping,
}}
index={this.state.value}
indexClick={(index) => {
this.setState({ value: index, previous: this.state.value });
}}

labelFormat="DD MMM"
isKeyboardEnabled={state.isKeyboardEnabled}
isTouchEnabled={state.isTouchEnabled}
labelWidth={state.labelWidth}
linePadding={state.linePadding}
maxEventPadding={state.maxEventPadding}
minEventPadding={state.minEventPadding}
slidingMotion={{ stiffness: state.slidingMotionStiffness, damping: state.slidingMotionDamping }}
slidingMotion={{
stiffness: state.slidingMotionStiffness,
damping: state.slidingMotionDamping,
}}
styles={{
background: state.stylesBackground,
foreground: state.stylesForeground,
outline: state.stylesOutline
outline: state.stylesOutline,
}}
values={ this.dates }
values={this.dates}
isOpenEnding={state.isOpenEnding}
isOpenBeginning={state.isOpenBeginning}
/>
</div>
<div className='text-center'>
<div className="text-center">
<SwipeableViews
index={this.state.value}
onChangeIndex={(value, previous) => {
this.setState({ value: value, previous: previous });
}}
resistance>
resistance
>
{views}
</SwipeableViews>
</div>
<div className='checkbox text-center' >
<div className="checkbox text-center">
<label>
<input
onChange={() => {
this.setState({ showConfigurator: !this.state.showConfigurator });
this.setState({
showConfigurator: !this.state.showConfigurator,
});
}}
type='checkbox'
type="checkbox"
/>
Configure the Timeline
</label>
</div>
{ configurator }
{configurator}
</div>
);
}
Expand Down
Loading