├── .babelrc ├── src ├── style.css └── index.js ├── .gitignore ├── webpack.config.js ├── package.json └── README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "react"], 3 | "plugins": [ 4 | "transform-object-rest-spread", 5 | "transform-react-jsx" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | .Timeline-line { 2 | z-index: -1; 3 | position: absolute; 4 | width: 3px; 5 | left: 0; 6 | right: 0; 7 | margin: auto; 8 | top: -2em; 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # misc 7 | /build 8 | /dist 9 | .DS_Store 10 | .eslintrc.json 11 | .npmignore 12 | 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | const htmlWebpackPlugin = new HtmlWebpackPlugin({ 4 | template: path.join(__dirname, "examples/src/index.html"), 5 | filename: "./index.html" 6 | }); 7 | module.exports = { 8 | entry: path.join(__dirname, "examples/src/index.js"), 9 | module: { 10 | rules: [ 11 | { 12 | test: /\.(js|jsx)$/, 13 | use: "babel-loader", 14 | exclude: /node_modules/ 15 | }, 16 | { 17 | test: /\.css$/, 18 | use: ["style-loader", "css-loader"] 19 | } 20 | ] 21 | }, 22 | plugins: [htmlWebpackPlugin], 23 | resolve: { 24 | extensions: [".js", ".jsx"] 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-timeline-semantic-ui", 3 | "version": "1.0.13", 4 | "description": "A react timeline component built with Semantic UI React", 5 | "main": "dist/index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/MichaelFerrari/react-timeline-semantic-ui" 9 | }, 10 | "homepage": "https://github.com/MichaelFerrari/react-timeline-semantic-ui", 11 | "scripts": { 12 | "test": "echo \"Error: no test specified\" && exit 1", 13 | "start": "webpack-dev-server --mode development", 14 | "transpile": "babel src -d dist --copy-files", 15 | "build": "webpack" 16 | }, 17 | "peerDependencies": { 18 | "react": "^16.4.2" 19 | }, 20 | "dependencies": { 21 | "prop-types": "^15.6.2", 22 | "semantic-ui-css": "^2.3.3", 23 | "semantic-ui-react": "^0.82.2" 24 | }, 25 | "devDependencies": { 26 | "babel-cli": "^6.26.0", 27 | "babel-core": "^6.26.3", 28 | "babel-loader": "^7.1.5", 29 | "babel-plugin-transform-object-rest-spread": "^6.23.0", 30 | "babel-plugin-transform-react-jsx": "^6.24.1", 31 | "babel-preset-env": "^1.7.0", 32 | "babel-preset-es2015": "^6.1.18", 33 | "babel-preset-react": "^6.24.1", 34 | "css-loader": "^1.0.0", 35 | "html-webpack-plugin": "^3.2.0", 36 | "style-loader": "^0.22.1", 37 | "webpack": "^1.15.0", 38 | "webpack-cli": "^3.1.0", 39 | "webpack-dev-server": "^3.1.14" 40 | }, 41 | "keywords": [ 42 | "react", 43 | "timeline", 44 | "SemanticUI" 45 | ], 46 | "author": "Chuqi Zhou" 47 | } 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-timeline-semantic-ui 2 | 3 | ## Introduction 4 | This react timeline component is built with Semantic UI react. For more information about Semantic UI React, please visit this [link](http://react.semantic-ui.com/). 5 | 6 | ![picture](https://raw.githubusercontent.com/MichaelFerrari/cs373-collatz/master/Screenshot.png) 7 | 8 | ## Installation 9 | ``` 10 | npm install react-timeline-semantic-ui --save 11 | ``` 12 | 13 | 14 | ## Usage 15 | 16 | ``` 17 | import Timeline from 'react-timeline-semantic-ui'; 18 | 19 | 29 | ``` 30 | 31 | ### Timeline props 32 | 33 | | Name | Type | Description | 34 | | ------------ | ------ | ---------------------------------------- | 35 | | title | string | The title of this timeline component. | 36 | | direction | enum | Enums: 'left', 'right'. It specifies which way the timeline component locates. | 37 | | icon | string | The name of the icon. Please refer to [icon] (http://react.semantic-ui.com/elements/icon/). | 38 | | time | string | The time of this timeline card. | 39 | | description | string | The description of this timeline card. | 40 | | color | enum | Optional, default color is 'grey'. Enums: 'red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue', 'violet', 'purple', 'pink', 'brown', 'grey', 'black'. It specifies the color of icon and the timeline card. | 41 | | tags | array | An array of strings. | 42 | | lineHeight | number | The height of middle line going through icons. The number refers to the number of timeline cards. | 43 | | labelColor | enum | Optional. Same enum values as color. The color of top label of the timeline component. | 44 | | lineColor | enum | Optional. Same enum values as color. The color of middle line of the timeline component. | 45 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Grid, Card, Label, Icon, Divider, 5 | } from 'semantic-ui-react'; 6 | import 'semantic-ui-css/semantic.min.css'; 7 | 8 | import './style.css'; 9 | 10 | class Timeline extends Component { 11 | render() { 12 | const { 13 | direction, icon, title, time, description, tags, labelColor, lineHeight = 4, lineColor = 'grey', color = 'grey' 14 | } = this.props; 15 | const textAlign = direction === 'left' ? 'right' : 'left'; 16 | const card = ( 17 | 18 | 19 | 22 | 23 | {title} 24 | 25 | 26 | {description} 27 | 28 | 29 | 30 | {tags.map((tag, i) => ( 31 | 34 | ))} 35 | 36 | 37 | 38 | ); 39 | 40 | const left = direction === 'left' ? card : ''; 41 | const right = direction === 'right' ? card : ''; 42 | const isMobile = window.innerWidth <= 768; 43 | const iconSize = isMobile ? 'small' : 'large'; 44 | const height = isMobile ? `${lineHeight * 350}px` : `${lineHeight * 250}px`; 45 | 46 | return ( 47 |
48 |
49 | 50 | 51 | 52 | 53 | {left} 54 | 55 | 56 | 57 | 58 | 59 | {right} 60 | 61 | 62 | 63 | 64 |
65 | ); 66 | } 67 | } 68 | 69 | Timeline.propTypes = { 70 | direction: PropTypes.string, 71 | icon: PropTypes.string, 72 | title: PropTypes.string, 73 | time: PropTypes.string, 74 | description: PropTypes.string, 75 | color: PropTypes.string, 76 | }; 77 | 78 | export default Timeline; 79 | --------------------------------------------------------------------------------