From f13c9c3546f4145c7a7576e0cc1a13419da99dbf Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Thu, 20 Oct 2016 17:43:27 -0600 Subject: [PATCH] example and readme --- README.md | 2 +- example/README.md | 1 + example/dist/app.css | 262 ++++++++++++++++++++++++++++++++++ example/dist/app.js | 0 example/dist/index.html | 12 ++ example/jumpsuit.config.js | 28 ++++ example/package.json | 24 ++++ example/src/app.js | 4 + example/src/app.styl | 133 +++++++++++++++++ example/src/assets/index.html | 12 ++ example/src/screens/index.js | 16 +++ example/src/state/github.js | 39 +++++ example/src/state/index.js | 3 + package.json | 9 +- react-table.js | 10 ++ src/index.js | 2 +- src/{utils.js => lodash.js} | 0 17 files changed, 551 insertions(+), 6 deletions(-) create mode 100644 example/README.md create mode 100644 example/dist/app.css create mode 100644 example/dist/app.js create mode 100644 example/dist/index.html create mode 100644 example/jumpsuit.config.js create mode 100644 example/package.json create mode 100644 example/src/app.js create mode 100644 example/src/app.styl create mode 100644 example/src/assets/index.html create mode 100644 example/src/screens/index.js create mode 100644 example/src/state/github.js create mode 100644 example/src/state/index.js create mode 100644 react-table.js rename src/{utils.js => lodash.js} (100%) diff --git a/README.md b/README.md index 89acf6e..18b50f2 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # react-table A fast, lightweight, opinionated table and datagrid built on React -[![Chart.js on Slack](https://img.shields.io/badge/slack-Chart.js-blue.svg)](https://react-table-slack.herokuapp.com/) +[![react-table on Slack](https://img.shields.io/badge/slack-reactTable-blue.svg)](https://react-table-slack.herokuapp.com/) ## Features diff --git a/example/README.md b/example/README.md new file mode 100644 index 0000000..0c84b21 --- /dev/null +++ b/example/README.md @@ -0,0 +1 @@ +# Jumpsuit Getting Started diff --git a/example/dist/app.css b/example/dist/app.css new file mode 100644 index 0000000..f69a3a4 --- /dev/null +++ b/example/dist/app.css @@ -0,0 +1,262 @@ +@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600"); +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-weight: inherit; + font-style: inherit; + font-family: inherit; + font-size: 100%; + vertical-align: baseline; +} +body { + line-height: 1; + color: #000; + background: #fff; +} +ol, +ul { + list-style: none; +} +table { + border-collapse: separate; + border-spacing: 0; + vertical-align: middle; +} +caption, +th, +td { + text-align: left; + font-weight: normal; + vertical-align: middle; +} +a img { + border: none; +} +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +html { + min-height: 100vh; +} +body { + background: #003952; + background: -webkit-radial-gradient(ellipse at center, #005275 0%, #003952 100%); + background: -moz-radial-gradient(ellipse at center, #005275 0%, #003952 100%); + background: -o-radial-gradient(ellipse at center, #005275 0%, #003952 100%); + background: -ms-radial-gradient(ellipse at center, #005275 0%, #003952 100%); + background: radial-gradient(ellipse at center, #005275 0%, #003952 100%); + color: #fff; + font-family: 'Open Sans', sans-serif; + font-weight: 300; +} +.container { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-pack: justify; + -moz-box-pack: justify; + -o-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + padding: 0 10px; +} +.container section { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -webkit-box-align: center; + -moz-box-align: center; + -o-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 50%; + height: 100vh; + text-align: center; + position: relative; +} +.container section:first-child:after { + content: ''; + background: #003952; + position: absolute; + right: 0; + top: 50%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -o-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + width: 1px; + height: 90%; +} +.logo { + width: 150px; + margin: 0 auto 30px; +} +.logo img { + width: 100%; +} +.title { + font-size: 40px; + font-weight: 300; + margin-bottom: 10px; +} +.subtitle { + font-size: 16px; + opacity: 0.6; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; + filter: alpha(opacity=60); + letter-spacing: 1px; +} +.github { + width: 100%; + max-width: 480px; + padding: 0 30px; + margin-top: 50px; +} +.inpt { + border: none; + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 600; + padding: 12px 20px; + width: 300px; + text-align: center; + border-radius: 4px; + outline: none; + width: 100%; +} +.usr { + background: #f5f5f5; + color: #003952; + -webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.4); + box-shadow: 0 2px 7px rgba(0,0,0,0.4); + text-align: left; + border: 1px solid #0082bb; + border-radius: 4px; + padding: 10px; + margin-top: 20px; + width: 100%; +} +.usr-avatar { + display: inline-block; + float: left; + margin-right: 10px; +} +.usr-avatar img { + width: 100px; +} +.usr-info { + font-size: 14px; + width: 280px; +} +.usr-info td { + padding: 3px 5px; + vertical-align: top; +} +.usr-info td:first-child { + width: 100px; + font-weight: 600; +} +.usr-none { + text-align: center; + color: #bfbfbf; +} +@media (max-width: 720px) { + .container { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -moz-box-pack: center; + -o-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } + .container section { + width: 100%; + } +} diff --git a/example/dist/app.js b/example/dist/app.js new file mode 100644 index 0000000..e69de29 diff --git a/example/dist/index.html b/example/dist/index.html new file mode 100644 index 0000000..00f4dfc --- /dev/null +++ b/example/dist/index.html @@ -0,0 +1,12 @@ + + + + + Welcome to Jumpsuit + + + +
+ + + diff --git a/example/jumpsuit.config.js b/example/jumpsuit.config.js new file mode 100644 index 0000000..3d4390e --- /dev/null +++ b/example/jumpsuit.config.js @@ -0,0 +1,28 @@ +var fs = require('fs') +var path = require('path') +var stylus = require('stylus') +var nib = require('nib') + +var stylusEntry = path.resolve('src/app.styl') + +module.exports = { + styles: { + extensions: ['.css', '.styl'], + action: buildStyles + } +} + +function buildStyles () { + return new Promise(function (resolve, reject) { + stylus.render(fs.readFileSync(stylusEntry, 'utf8'), { + 'include css': true, + 'hoist atrules': true, + compress: process.env.NODE_ENV === 'production', + paths: [path.resolve('src')], + use: nib() + }, function (err, css) { + if (err) reject(err) + else resolve(css) + }) + }) +} diff --git a/example/package.json b/example/package.json new file mode 100644 index 0000000..4817673 --- /dev/null +++ b/example/package.json @@ -0,0 +1,24 @@ +{ + "name": "react-table-example", + "version": "1.0.0", + "description": "Jumpsuit getting started example", + "license": "MIT", + "private": true, + "repository": { + "type": "git", + "url": "git+https://github.com/jumpsuit/jumpsuit.git" + }, + "scripts": { + "watch": "jumpsuit watch", + "build": "jumpsuit build" + }, + "devDependencies": { + "nib": "^1.1.0", + "stylus": "^0.54.5" + }, + "dependencies": { + "axios": "^0.13.1", + "jumpsuit": "^0.7.5", + "lodash": "^4.14.1" + } +} diff --git a/example/src/app.js b/example/src/app.js new file mode 100644 index 0000000..f24516a --- /dev/null +++ b/example/src/app.js @@ -0,0 +1,4 @@ +import { Render } from 'jumpsuit' +import App from 'screens/index' + +Render(App) diff --git a/example/src/app.styl b/example/src/app.styl new file mode 100644 index 0000000..7795f71 --- /dev/null +++ b/example/src/app.styl @@ -0,0 +1,133 @@ +// ----------------------------------------------------------------------------- +// styles +// ----------------------------------------------------------------------------- + +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600') +@import 'nib' + +global-reset() + +// ----------------------------------------------------------------------------- +// variables +// ----------------------------------------------------------------------------- + +$fnt-open-sans = 'Open Sans', sans-serif +$clr-white = #FFFFFF +$clr-off-white = #F5F5F5 +$clr-gray = #bfbfbf +$clr-jumpsuit1 = #003952 +$clr-jumpsuit2 = #005275 +$clr-jumpsuit3 = #0082bb + +// ----------------------------------------------------------------------------- +// styles +// ----------------------------------------------------------------------------- + +* + box-sizing border-box + +html + min-height 100vh + +body + background $clr-jumpsuit1 + background radial-gradient(ellipse at center, $clr-jumpsuit2 0%, $clr-jumpsuit1 100%) + color $clr-white + font-family $fnt-open-sans + font-weight 300 + +.container + display flex + justify-content space-between + padding 0 10px + section + display flex + align-items center + justify-content center + flex-direction column + width 50% + height 100vh + text-align center + position relative + &:first-child:after + content '' + background $clr-jumpsuit1 + position absolute + right 0 + top: 50% + transform: translateY(-50%) + width 1px + height 90% + +.logo + width 150px + margin 0 auto 30px + img + width 100% + +.title + font-size 40px + font-weight 300 + margin-bottom 10px + +.subtitle + font-size 16px + opacity .6 + letter-spacing 1px + +.github + width 100% + max-width 480px + padding 0 30px + margin-top 50px + +.inpt + border none + font-family $fnt-open-sans + font-size 14px + font-weight 600 + padding 12px 20px + width 300px + text-align center + border-radius 4px + outline none + width 100% + +.usr + background $clr-off-white + color $clr-jumpsuit1 + box-shadow 0 2px 7px rgba(0, 0, 0, .4) + text-align left + border 1px solid $clr-jumpsuit3 + border-radius 4px + padding 10px + margin-top 20px + width 100% + +.usr-avatar + display inline-block + float left + margin-right 10px + img + width 100px + +.usr-info + font-size 14px + width 280px + td + padding 3px 5px + vertical-align top + &:first-child + width 100px + font-weight 600 + +.usr-none + text-align center + color $clr-gray + +@media (max-width: 720px) + .container + flex-direction column + justify-content center + section + width 100% diff --git a/example/src/assets/index.html b/example/src/assets/index.html new file mode 100644 index 0000000..00f4dfc --- /dev/null +++ b/example/src/assets/index.html @@ -0,0 +1,12 @@ + + + + + Welcome to Jumpsuit + + + +
+ + + diff --git a/example/src/screens/index.js b/example/src/screens/index.js new file mode 100644 index 0000000..59d72fc --- /dev/null +++ b/example/src/screens/index.js @@ -0,0 +1,16 @@ +import { Component } from 'jumpsuit' + +import ReactTable from 'react-table' + +export default Component({ + render () { + return ( +
+ +
+ ) + } +}) diff --git a/example/src/state/github.js b/example/src/state/github.js new file mode 100644 index 0000000..e90b0aa --- /dev/null +++ b/example/src/state/github.js @@ -0,0 +1,39 @@ +import { State } from 'jumpsuit' +import _ from 'lodash' +import axios from 'axios' + +const githubState = State('counter', { + initial: { + search: null, + loading: false, + user: {} + }, + + updateSearch: (state, payload) => ({ + search: payload, + loading: true + }), + + receiveUser: (state, payload) => ({ + user: payload, + loading: false + }) +}) + +export default githubState + +const getUserDebounced = _.debounce((username) => { + axios.get(`https://api.github.com/users/${username}`) + .then(({ data }) => { + githubState.receiveUser(data) + }) + .catch((err) => { + githubState.receiveUser({}) + console.error(err) + }) +}, 1000) + +export function getUser (username) { + githubState.updateSearch(username) + if (username) getUserDebounced(username) +} diff --git a/example/src/state/index.js b/example/src/state/index.js new file mode 100644 index 0000000..92e488a --- /dev/null +++ b/example/src/state/index.js @@ -0,0 +1,3 @@ +import github from './github' + +export default { github } diff --git a/package.json b/package.json index 18e6a00..2adc2be 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-table-temp", + "name": "react-table", "version": "0.0.1", "description": "A fast, lightweight, opinionated table and datagrid built on React", "license": "MIT", @@ -11,12 +11,13 @@ "keywords": [ "react", "table", + "react-table", "datagrid" ], - "main": "src/index.js", + "main": "react-table.js", "scripts": { - "build:js": "rm -rf react-table.js && browserify src/index.js --external react -s react-table -t babelify -tg uglifyify -o react-table.js", - "build:css": "rm -rf react-table.css && stylus src/index.styl -o react-table.css --use ./node_modules/nib/lib/nib.js --compress", + "build:js": "rm -rf react-table.js && browserify src/index.js -s reactTable -u react -t babelify -g uglifyify -o react-table.js", + "build:css": "rm -rf react-table.css && stylus src/index.styl --use ./node_modules/nib/lib/nib.js --compress -o react-table.css", "watch": "onchange 'src/**' -i -- npm-run-all build:*", "prepublish": "npm-run-all build:*" }, diff --git a/react-table.js b/react-table.js new file mode 100644 index 0000000..7b2e6fb --- /dev/null +++ b/react-table.js @@ -0,0 +1,10 @@ +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.reactTable = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o1&&void 0!==arguments[1]?arguments[1]:{};t.headerGroups.push(Object.assign({},s,{columns:e})),a=[]},n=function(e){var a=Object.assign({},t.props.column,e);return"string"==typeof a.accessor&&!function(){a.id=a.id||a.accessor;var e=a.accessor;a.accessor=function(t){return _lodash2.default.get(t,e)}}(),a.id||console.warn("No column ID found for column: ",a),a.accessor||console.warn("No column accessor found for column: ",a),a};e.columns.forEach(function(e,r){e.columns?(e.columns.forEach(function(e){t.decoratedColumns.push(n(e))}),t.hasHeaderGroups&&(a.length>0&&s(a),s(_lodash2.default.takeRight(t.decoratedColumns,e.columns.length),e))):(t.decoratedColumns.push(n(e)),a.push(_lodash2.default.last(t.decoratedColumns)))}),this.hasHeaderGroups&&a.length>0&&s(a)},getInitSorting:function(){var e=this.decoratedColumns.filter(function(e){return"undefined"!=typeof e.sort}).map(function(e){return{id:e.id,asc:"asc"===e.sort}});return e.length?e:[{id:this.decoratedColumns[0].id,asc:!0}]},buildData:function(e,t){var a=this,s=t.sorting===!1?this.getInitSorting():t.sorting,n=function(e){a.setState({sorting:s,data:e,page:t.page,loading:!1})};if(this.isAsync){this.setState({loading:!0});var r=function(e){if(!e)return Promise.reject("Uh Oh! Nothing was returned in ReactTable's data callback!");e.pages&&a.setState({pages:e.pages});var t=a.accessData(e.rows);n(t)},i=e.data({sorting:s,page:t.page||0,pageSize:e.pageSize,pages:t.pages},r);i&&i.then&&i.then(r)}else{var o=this.accessData(e.data),c=this.sortData(o,s);n(c)}},accessData:function(e){var t=this;return e.map(function(e){var a={__original:e};return t.decoratedColumns.forEach(function(t){a[t.id]=t.accessor(e)}),a})},sortData:function(e,t){var a=t.length?t:this.getInitSorting();return _lodash2.default.orderBy(e,a.map(function(e){return function(t){return null===t[e.id]||void 0===t[e.id]?-(1/0):"string"==typeof t[e.id]?t[e.id].toLowerCase():t[e.id]}}),a.map(function(e){return e.asc?"asc":"desc"}))},setPage:function(e){return this.isAsync?this.buildData(this.props,Object.assign({},this.state,{page:e})):void this.setState({page:e})},render:function(){var e=this,t=this.state.data?this.state.data:[],a=this.isAsync?this.state.pages:Math.ceil(t.length/this.props.pageSize),s=this.props.pageSize*this.state.page,n=s+this.props.pageSize,r=this.isAsync?t.slice(0,this.props.pageSize):t.slice(s,n),i=a>1?_lodash2.default.range(this.props.pageSize-r.length):this.props.minRows?_lodash2.default.range(Math.max(this.props.minRows-r.length,0)):[],o=this.state.page>0,c=this.state.page+11&&_react2.default.createElement("div",{className:"-pagination"},_react2.default.createElement("div",{className:"-left"},_react2.default.createElement(l,{onClick:o&&function(t){return e.previousPage(t)},disabled:!o},this.props.previousText)),_react2.default.createElement("div",{className:"-center"},"Page ",this.state.page+1," of ",a),_react2.default.createElement("div",{className:"-right"},_react2.default.createElement(u,{onClick:c&&function(t){return e.nextPage(t)},disabled:!c},this.props.nextText))),_react2.default.createElement("div",{className:(0,_classnames2.default)("-loading",{"-active":this.state.loading})},_react2.default.createElement("div",{className:"-loading-inner"},this.props.loadingComponent)))},sortColumn:function(e,t){var a=this.state.sorting||[],s=_lodash2.default.clone(this.state.sorting||[]),n=s.findIndex(function(t){return t.id===e.id});if(n>-1){var r=s[n];r.asc?(r.asc=!1,t||(_lodash2.default.remove(s,function(e){return e}),s.push(r))):t?s.splice(n,1):r.asc=!0}else t?s.push({id:e.id,asc:!0}):(_lodash2.default.remove(s,function(e){return e}),s.push({id:e.id,asc:!0}));var i=0===n||!a.length&&s.length?0:this.state.page;this.buildData(this.props,Object.assign({},this.state,{page:i,sorting:s}))},nextPage:function(e){e.preventDefault(),this.setPage(this.state.page+1)},previousPage:function(e){e.preventDefault(),this.setPage(this.state.page-1)}}); + +},{"./lodash":3,"classnames":1,"react":undefined}],3:[function(require,module,exports){ +"use strict";function remove(r,e){return r.filter(function(t,n){var u=e(t);return!!u&&(r.splice(n,1),!0)})}function get(r,e){return isArray(e)&&(e=e.join(".")),e.replace("[",".").replace("]","").split(".").reduce(function(r,e){return r[e]},r)}function takeRight(r,e){var t=e>r.length?0:r.length-e;return r.slice(t)}function last(r){return r[r.length-1]}function range(r){for(var e=[],t=0;ti)return 1;if(o ( diff --git a/src/utils.js b/src/lodash.js similarity index 100% rename from src/utils.js rename to src/lodash.js