(http://github.com/fatiherikli)",
20 | "license": "MIT",
21 | "homepage": "https://github.com/adphorus/react-summary",
22 | "devDependencies": {
23 | "babel-core": "^6.0.20",
24 | "babel-eslint": "^4.1.3",
25 | "babel-loader": "^6.0.1",
26 | "babel-preset-es2015": "^6.0.15",
27 | "babel-preset-react": "^6.0.15",
28 | "babel-preset-stage-0": "^6.0.15",
29 | "eslint": "^1.10.3",
30 | "eslint-plugin-react": "^3.6.2",
31 | "react-hot-loader": "^1.3.0",
32 | "webpack": "^1.12.2",
33 | "webpack-dev-server": "^1.12.1"
34 | },
35 | "dependencies": {
36 | "react": "^0.14.6",
37 | "react-dom": "^0.14.6"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var WebpackDevServer = require('webpack-dev-server');
3 | var config = require('./webpack.config');
4 |
5 | new WebpackDevServer(webpack(config), {
6 | publicPath: config.output.publicPath,
7 | hot: true,
8 | historyApiFallback: true
9 | }).listen(3000, 'localhost', function (err, result) {
10 | if (err) {
11 | return console.log(err);
12 | }
13 |
14 | console.log('Listening at http://localhost:3000/');
15 | });
16 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Summary extends Component {
4 | static defaultProps = {
5 | block: 'react-summary',
6 | items: [],
7 | max: 3,
8 | text: {
9 | more: 'more',
10 | and: 'and',
11 | none: 'None',
12 | comma: ', '
13 | },
14 | onShowOthers: () => {},
15 | itemRenderer: (item) => item,
16 | preventSingleRemaining: false,
17 | };
18 |
19 | handleShowOthers(event) {
20 | event.preventDefault();
21 |
22 | this.props.onShowOthers();
23 | }
24 |
25 | renderItems() {
26 | let {items, text, max,
27 | itemRenderer,
28 | preventSingleRemaining} = this.props;
29 | switch (items.length) {
30 | case 0:
31 | return text.none;
32 |
33 | case 1:
34 | return itemRenderer(items[0]);
35 |
36 | case 2:
37 | case max:
38 | case preventSingleRemaining && max + 1:
39 |
40 | return (
41 |
42 | {items.map((item, i) => (
43 | i < items.length - 1 ? (
44 |
45 | {i > 0 ? text.comma : null}
46 | {itemRenderer(item)}
47 |
48 | ) : null
49 | ))} and {itemRenderer(items[items.length - 1])}
50 |
51 | );
52 |
53 | default:
54 | return (
55 |
56 | {items.map((item, i) => (
57 |
58 | {i > 0 && i < max ? text.comma: null}
59 | {i < max ? itemRenderer(item) : null}
60 | {i === max && (
61 |
62 | {' '} {text.and} {' '}
63 |
64 | {items.length - max} {text.more}
65 |
66 |
67 | )}
68 |
69 | ))}
70 |
79 | {this.renderItems()}
80 |
81 | );
82 | }
83 | }
84 |
85 | export default Summary;
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'webpack-dev-server/client?http://localhost:3000',
8 | 'webpack/hot/only-dev-server',
9 | './examples/index'
10 | ],
11 | output: {
12 | path: path.join(__dirname, 'dist'),
13 | filename: 'bundle.js',
14 | publicPath: '/static/'
15 | },
16 | plugins: [
17 | new webpack.HotModuleReplacementPlugin()
18 | ],
19 | module: {
20 | loaders: [{
21 | test: /\.js$/,
22 | loaders: ['react-hot', 'babel'],
23 | include: [
24 | path.join(__dirname, 'examples'),
25 | path.join(__dirname, 'src')
26 | ]
27 | }]
28 | }
29 | };
30 |
--------------------------------------------------------------------------------