Skip to content

Commit d4ad454

Browse files
committed
🔧 build config
1 parent 7816bf8 commit d4ad454

File tree

9 files changed

+226
-5
lines changed

9 files changed

+226
-5
lines changed

.eslintrc

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"ecmaFeatures": {
3+
"arrowFunctions": true,
4+
"blockBindings": true,
5+
"classes": true,
6+
"destructuring": true,
7+
"modules": true,
8+
"templateStrings": true,
9+
"spread": true,
10+
"jsx": true
11+
},
12+
"globals": {
13+
"React": true
14+
},
15+
"rules": {
16+
"quotes": [2, "single"],
17+
"eol-last": 0,
18+
"no-underscore-dangle": 0,
19+
"camelcase": 0,
20+
// react rules
21+
"react/display-name": 1,
22+
"react/jsx-boolean-value": 1,
23+
"react/jsx-quotes": 1,
24+
"react/jsx-no-undef": 1,
25+
"react/jsx-uses-react": 1,
26+
"react/jsx-uses-vars": 1,
27+
"react/no-did-mount-set-state": 1,
28+
"react/no-did-update-set-state": 1,
29+
"react/no-unknown-property": 1,
30+
"react/prop-types": 1,
31+
"react/react-in-jsx-scope": 1,
32+
"react/self-closing-comp": 1
33+
},
34+
"plugins": [
35+
"react"
36+
]
37+
}

.travis.yml

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
language: node_js
2+
node_js:
3+
- '0.10'
4+
- '0.12'
5+
- 'iojs'
6+
notifications:
7+
email: false

MAINTAINERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Nikolaus Piccolotto <[email protected]>

README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# react-automatic-width
22

3-
So you found those cool components that do what you want, but they work on fixed with ([fixed-data-table](https://facebook.github.io/fixed-data-table/) or [react-d3-components](https://github.com/codesuki/react-d3-components) for instance).
3+
[![Build Status](https://travis-ci.org/zalando/react-automatic-width.svg?branch=master)](https://travis-ci.org/zalando/react-automatic-width)
4+
5+
So you found those cool components that do what you want, but they work on fixed width! ([fixed-data-table](https://facebook.github.io/fixed-data-table/) or [react-d3-components](https://github.com/codesuki/react-d3-components) for instance.)
46

57
~~~ jsx
68
import D3 from 'react-d3-components';
@@ -32,6 +34,10 @@ It attaches a listener to `resize` event of `window`. In it, the component reads
3234
* Uses `clientWidth` because that worked on my current Chrome. Might be funky in your browser. PRs welcome.
3335
* Not clear what should happen if window is resized while container is invisible. Currently zero-widths just get ignored.
3436

37+
# Dependencies
38+
39+
Written for React 0.13. Did not test with React 0.14, but should work since `ref.findDOMNode` is deprecated, but not removed.
40+
3541
# License
3642

3743
Apache 2.0

banner.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = "Copyright 2015 Zalando SE\n" +
2+
"\n" +
3+
"Licensed under the Apache License, Version 2.0 (the \"License\")\n" +
4+
"you may not use this file except in compliance with the License.\n" +
5+
"You may obtain a copy of the License at\n" +
6+
"\n" +
7+
" http://www.apache.org/licenses/LICENSE-2.0\n" +
8+
"\n" +
9+
"Unless required by applicable law or agreed to in writing, software\n" +
10+
"distributed under the License is distributed on an \"AS IS\" BASIS,\n" +
11+
"WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n" +
12+
"See the License for the specific language governing permissions and\n" +
13+
"limitations under the License.";

dist/react-automatic-width.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/*!
2+
* Copyright 2015 Zalando SE
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License")
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
(function webpackUniversalModuleDefinition(root, factory) {
17+
if(typeof exports === 'object' && typeof module === 'object')
18+
module.exports = factory();
19+
else if(typeof define === 'function' && define.amd)
20+
define([], factory);
21+
else if(typeof exports === 'object')
22+
exports["react-automatic-width"] = factory();
23+
else
24+
root["react-automatic-width"] = factory();
25+
})(this, function() {
26+
return /******/ (function(modules) { // webpackBootstrap
27+
/******/ // The module cache
28+
/******/ var installedModules = {};
29+
30+
/******/ // The require function
31+
/******/ function __webpack_require__(moduleId) {
32+
33+
/******/ // Check if module is in cache
34+
/******/ if(installedModules[moduleId])
35+
/******/ return installedModules[moduleId].exports;
36+
37+
/******/ // Create a new module (and put it into the cache)
38+
/******/ var module = installedModules[moduleId] = {
39+
/******/ exports: {},
40+
/******/ id: moduleId,
41+
/******/ loaded: false
42+
/******/ };
43+
44+
/******/ // Execute the module function
45+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
46+
47+
/******/ // Flag the module as loaded
48+
/******/ module.loaded = true;
49+
50+
/******/ // Return the exports of the module
51+
/******/ return module.exports;
52+
/******/ }
53+
54+
55+
/******/ // expose the modules object (__webpack_modules__)
56+
/******/ __webpack_require__.m = modules;
57+
58+
/******/ // expose the module cache
59+
/******/ __webpack_require__.c = installedModules;
60+
61+
/******/ // __webpack_public_path__
62+
/******/ __webpack_require__.p = "";
63+
64+
/******/ // Load entry module and return exports
65+
/******/ return __webpack_require__(0);
66+
/******/ })
67+
/************************************************************************/
68+
/******/ ([
69+
/* 0 */
70+
/***/ function(module, exports, __webpack_require__) {
71+
72+
eval("module.exports = __webpack_require__(1);\n\n\n/*****************\n ** WEBPACK FOOTER\n ** multi main\n ** module id = 0\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///multi_main?");
73+
74+
/***/ },
75+
/* 1 */
76+
/***/ function(module, exports) {
77+
78+
eval("'use strict';\n\nObject.defineProperty(exports, '__esModule', {\n value: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();\n\nvar _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar AutomaticWidth = (function (_React$Component) {\n _inherits(AutomaticWidth, _React$Component);\n\n function AutomaticWidth() {\n _classCallCheck(this, AutomaticWidth);\n\n _get(Object.getPrototypeOf(AutomaticWidth.prototype), 'constructor', this).call(this);\n this.state = {\n listener: null,\n width: 0\n };\n }\n\n _createClass(AutomaticWidth, [{\n key: '_resizeHandler',\n value: function _resizeHandler() {\n var dom = this.refs.autowidthWrapper.getDOMNode();\n var clientWidth = dom.clientWidth;\n\n if (clientWidth !== this.state.width && clientWidth > 0) {\n this.setState({\n width: clientWidth\n });\n }\n }\n }, {\n key: 'componentWillMount',\n value: function componentWillMount() {\n var boundListener = this._resizeHandler.bind(this);\n window.addEventListener('resize', boundListener);\n this.setState({\n listener: boundListener\n });\n }\n }, {\n key: 'componentDidMount',\n value: function componentDidMount() {\n this.state.listener();\n }\n }, {\n key: 'componentWillUnmount',\n value: function componentWillUnmount() {\n window.removeEventListener('resize', this.state.listener);\n }\n }, {\n key: 'render',\n value: function render() {\n var _this = this;\n\n return React.createElement(\n 'div',\n _extends({ ref: 'autowidthWrapper' }, this.props),\n React.Children.map(this.props.children, function (c) {\n return React.addons.cloneWithProps(c, {\n width: _this.state.width\n });\n })\n );\n }\n }]);\n\n return AutomaticWidth;\n})(React.Component);\n\nAutomaticWidth.displayName = 'AutomaticWidth';\nAutomaticWidth.propTypes = {\n children: React.PropTypes.oneOf([React.PropTypes.array, React.PropTypes.object])\n};\nexports['default'] = AutomaticWidth;\nmodule.exports = exports['default'];\n\n/*****************\n ** WEBPACK FOOTER\n ** ./src/react-automatic-width.jsx\n ** module id = 1\n ** module chunks = 0\n **/\n//# sourceURL=webpack:///./src/react-automatic-width.jsx?");
79+
80+
/***/ }
81+
/******/ ])
82+
});
83+
;

package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "@zalando/react-automatic-width",
3+
"version": "0.0.1",
4+
"description": "Automatically sets width property on child components",
5+
"main": "dist/react-automatic-width.js",
6+
"scripts": {
7+
"test": "echo \"Sorry\""
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/zalando/react-automatic-width.git"
12+
},
13+
"peerDependencies": {
14+
"react": "^0.13.0 || ^0.14.0"
15+
},
16+
"keywords": [
17+
"react",
18+
"responsive",
19+
"width",
20+
"automatic",
21+
"flexible"
22+
],
23+
"author": "Nikolaus Piccolotto <[email protected]>",
24+
"license": "Apache-2.0",
25+
"bugs": {
26+
"url": "https://github.com/zalando/react-automatic-width/issues"
27+
},
28+
"homepage": "https://github.com/zalando/react-automatic-width#readme",
29+
"devDependencies": {
30+
"babel-core": "^5.8.29",
31+
"babel-loader": "^5.3.2",
32+
"eslint": "^1.7.3",
33+
"eslint-loader": "^1.1.0",
34+
"eslint-plugin-react": "^3.6.3",
35+
"esprima-fb": "^15001.1001.0-dev-harmony-fb",
36+
"webpack": "^1.12.2"
37+
}
38+
}

src/react-automatic-width.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import React from 'react';
2-
31
class AutomaticWidth extends React.Component {
42
constructor() {
53
super();
@@ -19,13 +17,16 @@ class AutomaticWidth extends React.Component {
1917
}
2018
}
2119

22-
componentDidMount() {
20+
componentWillMount() {
2321
let boundListener = this._resizeHandler.bind(this);
2422
window.addEventListener('resize', boundListener);
2523
this.setState({
2624
listener: boundListener
2725
});
28-
boundListener();
26+
}
27+
28+
componentDidMount() {
29+
this.state.listener();
2930
}
3031

3132
componentWillUnmount() {

webpack.config.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
var webpack = require('webpack');
2+
3+
module.exports = {
4+
devtool: 'eval',
5+
entry: [
6+
'./src/react-automatic-width.jsx'
7+
],
8+
output: {
9+
path: __dirname + '/dist/',
10+
filename: 'react-automatic-width.js',
11+
library: 'react-automatic-width',
12+
libraryTarget: 'umd'
13+
},
14+
plugins: [
15+
new webpack.BannerPlugin(require('./banner'))
16+
// new webpack.optimize.UglifyJsPlugin()
17+
],
18+
externals: {
19+
'React': 'react'
20+
},
21+
resolve: {
22+
extensions: ['', '.jsx']
23+
},
24+
eslint: {
25+
configFile: '.eslintrc'
26+
},
27+
module: {
28+
preLoaders: [
29+
{ test: /\.jsx$/, exclude: /node_modules/, loader: 'eslint' },
30+
],
31+
loaders: [
32+
{ test: /\.jsx$/, exclude: /node_modules/, loader: 'babel' },
33+
]
34+
}
35+
};

0 commit comments

Comments
 (0)