├── .babelrc ├── .eslintrc ├── .gitignore ├── .npmignore ├── .scripts ├── get_gh_pages_url.js ├── mocha_runner.js ├── prepublish.sh ├── publish_storybook.sh └── user │ ├── prepublish.sh │ └── pretest.js ├── .storybook └── config.js ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── dist └── index.js ├── package-lock.json ├── package.json └── src ├── index.js ├── stories └── index.js └── tests └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-app"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "es6": true 6 | }, 7 | "rules": { 8 | "array-bracket-spacing": [2, "never"], 9 | "brace-style": [2, "1tbs", {"allowSingleLine": false}], 10 | "camelcase": [2, {"properties": "never"}], 11 | "comma-dangle": [2, "always-multiline"], 12 | "comma-spacing": [2, {"before": false, "after": true}], 13 | "curly": 2, 14 | "eol-last": 2, 15 | "eqeqeq": [2, "allow-null"], 16 | "guard-for-in": 2, 17 | "indent": [2, 4, {"SwitchCase": 1}], 18 | "keyword-spacing": 2, 19 | "linebreak-style": [2, "unix"], 20 | "max-len": [2, 80, 4, {"ignoreUrls": true, "ignorePattern": "\\brequire(?:WithVars)?\\([\"']|eslint-disable"}], 21 | "max-lines": [2, 1000], 22 | "no-alert": 2, 23 | "no-array-constructor": 2, 24 | "no-console": 2, 25 | "no-debugger": 2, 26 | "no-dupe-class-members": 2, 27 | "no-dupe-keys": 2, 28 | "no-extra-bind": 2, 29 | "no-new": 2, 30 | "no-new-func": 2, 31 | "no-new-object": 2, 32 | "no-spaced-func": 2, 33 | "no-throw-literal": 2, 34 | "no-trailing-spaces": 2, 35 | "no-undef": 2, 36 | "no-unexpected-multiline": 2, 37 | "no-unreachable": 2, 38 | "no-unused-vars": [2, {"args": "none", "varsIgnorePattern": "^_*$"}], 39 | "no-useless-call": 2, 40 | "no-with": 2, 41 | "object-curly-spacing": 2, 42 | "one-var": [2, "never"], 43 | "semi": [2, "always"], 44 | "space-before-function-paren": [2, "never"], 45 | "space-in-parens": 2, 46 | "space-infix-ops": 2, 47 | "space-unary-ops": 2, 48 | "no-case-declarations": 0, 49 | "valid-jsdoc": 0, 50 | "require-jsdoc": 0, 51 | // --------------------------------------- 52 | // ES6 rules. 53 | "arrow-spacing": 2, 54 | "computed-property-spacing": 2, 55 | "constructor-super": 2, 56 | "no-const-assign": 2, 57 | "no-this-before-super": 2, 58 | "no-var": 2, 59 | "prefer-const": 2, 60 | "prefer-spread": 2, 61 | "prefer-template": 0, 62 | "arrow-parens": 0, 63 | "prefer-arrow-callback": 0, 64 | // --------------------------------------- 65 | // React rules. 66 | "react/forbid-prop-types": [2, { "forbid": [ "array", "object" ] }], 67 | "react/jsx-closing-bracket-location": [2, "line-aligned"], 68 | "react/jsx-curly-spacing": [2, "never"], 69 | "react/jsx-indent-props": 2, 70 | "react/jsx-no-duplicate-props": 2, 71 | "react/jsx-no-undef": 2, 72 | "react/jsx-uses-react": 2, 73 | "react/jsx-uses-vars": 2, 74 | "react/no-did-mount-set-state": [2], 75 | "react/no-did-update-set-state": 2, 76 | "react/no-direct-mutation-state": 2, 77 | "react/prop-types": 2, 78 | "react/self-closing-comp": 2, 79 | "react/sort-comp": 2, 80 | "react/jsx-sort-props": 0, 81 | "react/sort-prop-types": 0 82 | }, 83 | "ecmaFeatures": { 84 | "arrowFunctions": true, 85 | "blockBindings": true, 86 | "classes": true, 87 | "destructuring": true, 88 | "experimentalObjectRestSpread": true, 89 | "forOf": true, 90 | "jsx": true, 91 | "restParams": true, 92 | "spread": true, 93 | "templateStrings": true 94 | }, 95 | "plugins": [ 96 | "react" 97 | ] 98 | } 99 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | .idea 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | .babelrc 3 | .storybook 4 | .scripts 5 | .eslintrc 6 | -------------------------------------------------------------------------------- /.scripts/get_gh_pages_url.js: -------------------------------------------------------------------------------- 1 | // IMPORTANT 2 | // --------- 3 | // This is an auto generated file with React CDK. 4 | // Do not modify this file. 5 | 6 | const parse = require('git-url-parse'); 7 | var ghUrl = process.argv[2]; 8 | const parsedUrl = parse(ghUrl); 9 | 10 | const ghPagesUrl = 'https://' + parsedUrl.owner + '.github.io/' + parsedUrl.name; 11 | console.log(ghPagesUrl); 12 | -------------------------------------------------------------------------------- /.scripts/mocha_runner.js: -------------------------------------------------------------------------------- 1 | // IMPORTANT 2 | // --------- 3 | // This is an auto generated file with React CDK. 4 | // Do not modify this file. 5 | // Use `.scripts/user/pretest.js instead`. 6 | 7 | process.env.NODE_ENV = 'development'; 8 | require('babel-core/register'); 9 | require('babel-polyfill'); 10 | 11 | // Add jsdom support, which is required for enzyme. 12 | var jsdom = require('jsdom').jsdom; 13 | 14 | var exposedProperties = ['window', 'navigator', 'document']; 15 | 16 | global.document = jsdom(''); 17 | global.window = document.defaultView; 18 | Object.keys(document.defaultView).forEach((property) => { 19 | if (typeof global[property] === 'undefined') { 20 | exposedProperties.push(property); 21 | global[property] = document.defaultView[property]; 22 | } 23 | }); 24 | 25 | global.navigator = { 26 | userAgent: 'node.js' 27 | }; 28 | 29 | process.on('unhandledRejection', function (error) { 30 | console.error('Unhandled Promise Rejection:'); 31 | console.error(error && error.stack || error); 32 | }); 33 | 34 | require('./user/pretest.js'); 35 | -------------------------------------------------------------------------------- /.scripts/prepublish.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # IMPORTANT 4 | # --------- 5 | # This is an auto generated file with React CDK. 6 | # Do not modify this file. 7 | # Use `.scripts/user/prepublish.sh instead`. 8 | 9 | echo "=> Transpiling 'src' into ES5 ..." 10 | echo "" 11 | rm -rf ./dist 12 | NODE_ENV=production ./node_modules/.bin/babel --ignore tests,stories ./src --out-dir ./dist || { echo 'Transpilation failed' ; exit 1; } 13 | echo "" 14 | echo "=> Transpiling completed." 15 | 16 | . .scripts/user/prepublish.sh 17 | -------------------------------------------------------------------------------- /.scripts/publish_storybook.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # IMPORTANT 4 | # --------- 5 | # This is an auto generated file with React CDK. 6 | # Do not modify this file. 7 | 8 | set -e # exit with nonzero exit code if anything fails 9 | 10 | # get GIT url 11 | 12 | GIT_URL=`git config --get remote.origin.url` 13 | if [[ $GIT_URL == "" ]]; then 14 | echo "This project is not configured with a remote git repo". 15 | exit 1 16 | fi 17 | 18 | # clear and re-create the out directory 19 | rm -rf .out || exit 0; 20 | mkdir .out; 21 | 22 | # run our compile script, discussed above 23 | build-storybook -o .out 24 | 25 | # go to the out directory and create a *new* Git repo 26 | cd .out 27 | git init 28 | 29 | # inside this git repo we'll pretend to be a new user 30 | git config user.name "GH Pages Bot" 31 | git config user.email "hello@ghbot.com" 32 | 33 | # The first and only commit to this new Git repo contains all the 34 | # files present with the commit message "Deploy to GitHub Pages". 35 | git add . 36 | git commit -m "Deploy Storybook to GitHub Pages" 37 | 38 | # Force push from the current repo's master branch to the remote 39 | # repo's gh-pages branch. (All previous history on the gh-pages branch 40 | # will be lost, since we are overwriting it.) We redirect any output to 41 | # /dev/null to hide any sensitive credential data that might otherwise be exposed. 42 | git push --force --quiet $GIT_URL master:gh-pages > /dev/null 2>&1 43 | cd .. 44 | rm -rf .out 45 | 46 | echo "" 47 | echo "=> Storybook deployed to: `node .scripts/get_gh_pages_url.js $GIT_URL`" 48 | -------------------------------------------------------------------------------- /.scripts/user/prepublish.sh: -------------------------------------------------------------------------------- 1 | # Use this file to your own code to run at NPM `prepublish` event. 2 | -------------------------------------------------------------------------------- /.scripts/user/pretest.js: -------------------------------------------------------------------------------- 1 | // Use this file to setup any test utilities. 2 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | // IMPORTANT 2 | // --------- 3 | // This is an auto generated file with React CDK. 4 | // Do not modify this file. 5 | 6 | import { configure } from '@storybook/react'; 7 | 8 | function loadStories() { 9 | require('../src/stories'); 10 | } 11 | 12 | configure(loadStories, module); 13 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to React Balance Text Component 2 | 3 | We welcome your help to make this component better. This document will help to streamline the contributing process and save everyone's precious time. 4 | 5 | ## Development Setup 6 | 7 | This component has been setup with [React CDK](https://github.com/kadirahq/react-cdk). Refer [React CDK documentation](https://github.com/kadirahq/react-cdk)) to get started with the development. 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Your Name. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Balance Text Component 2 | 3 | This is a React wrapper around the Adobe Web Platform's [Balance-Text Project](https://github.com/adobe-webplatform/balance-text) with the jQuery dependancy removed. 4 | 5 | See a [live demo](https://khan.github.io/react-balance-text) 6 | 7 | ## Usage 8 | 9 | ```javascript 10 | 11 | Chocolate bar oat cake chocolate toffee apple pie donut soufflé. Chupa chups pudding tootsie roll muffin sugar plum lemon drops. Ice cream dessert muffin chocolate. Topping lollipop bear claw candy danish topping wafer. 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _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; }; 8 | 9 | var _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; }; }(); 10 | 11 | var _react = require('react'); 12 | 13 | var _react2 = _interopRequireDefault(_react); 14 | 15 | var _propTypes = require('prop-types'); 16 | 17 | var _propTypes2 = _interopRequireDefault(_propTypes); 18 | 19 | var _balanceText2 = require('balance-text'); 20 | 21 | var _balanceText3 = _interopRequireDefault(_balanceText2); 22 | 23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 24 | 25 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 26 | 27 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 28 | 29 | function _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; } 30 | 31 | var BalanceText = function (_React$Component) { 32 | _inherits(BalanceText, _React$Component); 33 | 34 | function BalanceText() { 35 | _classCallCheck(this, BalanceText); 36 | 37 | var _this = _possibleConstructorReturn(this, (BalanceText.__proto__ || Object.getPrototypeOf(BalanceText)).call(this)); 38 | 39 | _this._handleResize = _this._handleResize.bind(_this); 40 | 41 | _this.state = { 42 | visible: false 43 | }; 44 | return _this; 45 | } 46 | 47 | _createClass(BalanceText, [{ 48 | key: 'componentDidMount', 49 | value: function componentDidMount() { 50 | window.addEventListener('resize', this._handleResize); 51 | this._makeVisible(); 52 | } 53 | }, { 54 | key: 'componentDidUpdate', 55 | value: function componentDidUpdate() { 56 | this._balanceText(); 57 | } 58 | }, { 59 | key: 'componentWillUnmount', 60 | value: function componentWillUnmount() { 61 | window.removeEventListener('resize', this._handleResize); 62 | } 63 | }, { 64 | key: '_makeVisible', 65 | value: function _makeVisible() { 66 | var _this2 = this; 67 | 68 | this.setState({ visible: true }); 69 | setTimeout(function () { 70 | return _this2._balanceText(); 71 | }, 0); 72 | } 73 | }, { 74 | key: '_balanceText', 75 | value: function _balanceText() { 76 | var container = this.container; 77 | 78 | if (!container) { 79 | return; 80 | } 81 | 82 | (0, _balanceText3.default)(container); 83 | } 84 | }, { 85 | key: '_handleResize', 86 | value: function _handleResize() { 87 | if (!this.props.resize) { 88 | return; 89 | } 90 | 91 | this._balanceText(); 92 | } 93 | }, { 94 | key: 'render', 95 | value: function render() { 96 | var _this3 = this; 97 | 98 | var _props = this.props, 99 | children = _props.children, 100 | style = _props.style, 101 | className = _props.className; 102 | var visible = this.state.visible; 103 | 104 | 105 | var combinedStyle = _extends({}, style, { 106 | visibility: visible ? 'visible' : 'hidden' 107 | }); 108 | 109 | return _react2.default.createElement( 110 | 'div', 111 | { style: combinedStyle, className: className }, 112 | _react2.default.createElement( 113 | 'span', 114 | { ref: function ref(container) { 115 | return _this3.container = container; 116 | } }, 117 | children 118 | ) 119 | ); 120 | } 121 | }]); 122 | 123 | return BalanceText; 124 | }(_react2.default.Component); 125 | 126 | BalanceText.defaultProps = { 127 | children: '', 128 | style: {}, 129 | resize: true 130 | }; 131 | BalanceText.propTypes = { 132 | children: _propTypes2.default.node, 133 | className: _propTypes2.default.string, 134 | style: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.any), _propTypes2.default.any]), 135 | resize: _propTypes2.default.bool 136 | }; 137 | exports.default = BalanceText; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-balance-text", 3 | "version": "2.0.1", 4 | "description": "React Balance Text Component", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/khan/react-balance-text" 8 | }, 9 | "license": "MIT", 10 | "scripts": { 11 | "prepublish": ". ./.scripts/prepublish.sh", 12 | "lint": "eslint src", 13 | "lintfix": "eslint src --fix", 14 | "testonly": "mocha --require .scripts/mocha_runner src/**/tests/**/*.js", 15 | "test": "npm run lint && npm run testonly", 16 | "test-watch": "npm run testonly -- --watch --watch-extensions js", 17 | "storybook": "start-storybook -p 9010", 18 | "publish-storybook": "bash .scripts/publish_storybook.sh" 19 | }, 20 | "devDependencies": { 21 | "@storybook/react": "^3.4.7", 22 | "babel-cli": "^6.26.0", 23 | "babel-core": "^6.26.3", 24 | "babel-eslint": "~6.1.2", 25 | "babel-loader": "~6.2.5", 26 | "babel-plugin-transform-runtime": "~6.15.0", 27 | "babel-polyfill": "~6.13.0", 28 | "babel-preset-react-app": "~0.2.1", 29 | "chai": "^3.5.0", 30 | "enzyme": "^2.2.0", 31 | "eslint": "^3.11.1", 32 | "eslint-config-airbnb": "^12.0.0", 33 | "eslint-plugin-import": "^1.16.0", 34 | "eslint-plugin-jsx-a11y": "^2.2.2", 35 | "eslint-plugin-react": "^6.8.0", 36 | "git-url-parse": "^6.0.1", 37 | "jsdom": "^9.5.0", 38 | "mocha": "^5.2.0", 39 | "prop-types": "^15.6.1", 40 | "react": "^16.3.0", 41 | "react-addons-test-utils": "^15.6.2", 42 | "react-dom": "^16.3.0", 43 | "sinon": "^1.17.6" 44 | }, 45 | "peerDependencies": { 46 | "react": "^0.14.7 || ^15.0.0 || ^16.0.0-0" 47 | }, 48 | "dependencies": { 49 | "balance-text": "^3.2.0" 50 | }, 51 | "main": "dist/index.js", 52 | "engines": { 53 | "npm": "^3.0.0" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import balanceText from 'balance-text'; 4 | 5 | class BalanceText extends React.Component { 6 | static defaultProps = { 7 | children: '', 8 | style: {}, 9 | resize: true, 10 | } 11 | 12 | static propTypes = { 13 | children: PropTypes.node, 14 | className: PropTypes.string, 15 | style: PropTypes.oneOfType([ 16 | PropTypes.arrayOf(PropTypes.any), 17 | PropTypes.any, 18 | ]), 19 | resize: PropTypes.bool, 20 | } 21 | 22 | constructor() { 23 | super(); 24 | 25 | this._handleResize = this._handleResize.bind(this); 26 | 27 | this.state = { 28 | visible: false, 29 | }; 30 | } 31 | 32 | componentDidMount() { 33 | window.addEventListener('resize', this._handleResize); 34 | this._makeVisible(); 35 | } 36 | 37 | componentDidUpdate() { 38 | this._balanceText(); 39 | } 40 | 41 | componentWillUnmount() { 42 | window.removeEventListener('resize', this._handleResize); 43 | } 44 | 45 | _makeVisible() { 46 | this.setState({visible: true}); 47 | setTimeout(() => this._balanceText(), 0); 48 | } 49 | 50 | _balanceText() { 51 | const {container} = this; 52 | if (!container) { 53 | return; 54 | } 55 | 56 | balanceText(container); 57 | } 58 | 59 | _handleResize() { 60 | if (!this.props.resize) { 61 | return; 62 | } 63 | 64 | this._balanceText(); 65 | } 66 | 67 | render() { 68 | const {children, style, className} = this.props; 69 | const {visible} = this.state; 70 | 71 | const combinedStyle = { 72 | ...style, 73 | visibility: visible ? 'visible' : 'hidden', 74 | }; 75 | 76 | return
77 | this.container = container}> 78 | {children} 79 | 80 |
; 81 | } 82 | } 83 | 84 | export default BalanceText; 85 | -------------------------------------------------------------------------------- /src/stories/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {storiesOf} from '@storybook/react'; 3 | import BalanceText from '../index'; 4 | 5 | storiesOf('BalanceText', module) 6 | .add('Basic Text Balancing', () => { 7 | const text = 'Alohamora wand elf parchment, Wingardium Leviosa hippogriff, house dementors betrayal. Holly, Snape centaur portkey ghost Hermione spell bezoar Scabbers. Peruvian-Night-Powder werewolf, Dobby pear-tickle half-moon-glasses, Knight-Bus. Padfoot snargaluff seeker: Hagrid broomstick mischief managed. Snitch Fluffy rock-cake, 9 ¾ dress robes I must not tell lies. Mudbloods yew pumpkin juice phials Ravenclaw’s Diadem 10 galleons Thieves Downfall. Ministry-of-Magic mimubulus mimbletonia Pigwidgeon knut phoenix feather other minister Azkaban. Hedwig Daily Prophet treacle tart full-moon Ollivanders You-Know-Who cursed. Fawkes maze raw-steak Voldemort Goblin Wars snitch Forbidden forest grindylows wool socks.'; // eslint-disable-line 8 | 9 | return
10 |

Unbanalanced

11 |

{text}

12 |

Balanced

13 | {text} 14 |
; 15 | }) 16 | .add('Handle Updates', () => { 17 | const hobbits = 'Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit aacute; de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.'; // eslint-disable-line 18 | const elves = 'Elen sila lumenn omentilmo, Nae saian luume\'. Cormamin lindua ele lle. Saesa omentien lle, vanya sulie Namaarie. Aa\' lasser en lle coia orn n\' omenta gurtha. Aa\' i\'sul nora lanne\'lle. Aa\' menle nauva calen ar\' ta hwesta e\' ale\'quenle. Cormamin niuve tenna\' ta elea lle au\'. Lissenen ar\' maska\'lalaith tenna\' lye omentuva.'; // eslint-disable-line 19 | const dwarves = 'Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.'; // eslint-disable-line 20 | 21 | const textStyle = { 22 | padding: '1em', 23 | textAlign: 'center', 24 | }; 25 | 26 | class Wrapper extends React.Component { 27 | constructor() { 28 | super(); 29 | this.state = {text: hobbits}; 30 | } 31 | 32 | render() { 33 | return
34 |
35 | 40 | 45 | 50 |
51 | 52 | {this.state.text} 53 | 54 |
; 55 | } 56 | } 57 | return ; 58 | }) 59 | .add('Window Resize', () => { 60 | const text = 'Cupcake ipsum dolor. Sit amet apple pie danish tootsie roll bear claw tootsie roll wafer ice cream. Dessert cake croissant croissant chocolate. Cupcake gummi bears powder bonbon bonbon tootsie roll pie. Cupcake wafer icing sweet danish sweet roll cookie. Marshmallow cookie jelly-o pastry candy powder. Donut icing brownie apple pie jujubes lemon drops croissant candy canes toffee. Halvah wafer cheesecake powder sweet roll. Donut tootsie roll marzipan jelly beans gingerbread. Sweet roll tiramisu dessert chocolate bar. Bonbon pastry chocolate. Fruitcake muffin lollipop marzipan ice cream jujubes cake tootsie roll jelly beans.'; // eslint-disable-line 61 | 62 | return
63 |

Resize the Browser window to see automatic re-flowing

64 |
65 | 66 |

Auto-resize (default)

67 | {text} 68 | 69 |

Auto-resize disabled

70 | {text} 71 |
; 72 | }) 73 | .add('Nested Children', () => { 74 | const text = 'Lucas ipsum dolor sit amet chewbacca darth c-3p0 ackbar skywalker moff skywalker owen fett organa. Kenobi mon lando ewok. Jade watto dagobah gamorrean mon kashyyyk. Mara k-3po moff hoth. Boba zabrak padmé calamari qui-gon ben. Fisto yavin mara coruscant windu lars mace boba wicket. Vader yavin solo darth jade hutt jango. Watto darth organa hutt maul skywalker antilles. Fett moff antilles organa. Naboo ponda grievous fett. Mothma amidala antilles wookiee c-3po darth antilles windu. Kessel calamari hutt luuke tusken raider skywalker qui-gon.'; // eslint-disable-line 75 | 76 | return 77 | {text} 78 | ; 79 | }) 80 | .add('Passing className', () => { 81 | const css = document.createElement("style"); 82 | css.type = "text/css"; 83 | css.innerHTML = ".make-red { color: red }"; 84 | document.body.appendChild(css); 85 | 86 | return 87 | This should be red 88 | ; 89 | }); 90 | -------------------------------------------------------------------------------- /src/tests/index.js: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | // import { shallow, mount } from 'enzyme'; 3 | // import BalanceText from '../index'; 4 | // import { expect } from 'chai'; 5 | // import sinon from 'sinon'; 6 | const {describe} = global; 7 | 8 | describe('BalanceText', () => { 9 | // There are no unit tests right now. This is a very hard 10 | // component to unit test since it relies so muc on DOM manipulation. 11 | // But this his here to keep the testing framework happy, for now. 12 | }); 13 | --------------------------------------------------------------------------------