From 2dd8c329bfd2dcb7275e41fd713145297e6a2ea8 Mon Sep 17 00:00:00 2001 From: namhoon Date: Sun, 25 Dec 2022 11:33:20 +0900 Subject: [PATCH] v2.0.0 --- .babelrc | 7 - .eslintignore | 5 - .eslintrc | 25 - .gitignore | 6 +- .npmignore | 6 - .travis.yml | 3 - CHANGELOG.md | 32 - CODE_OF_CONDUCT.md | 14 - LICENSE.md => LICENSE | 4 +- README.md | 133 +- examples/simple/components/App.js | 129 - examples/simple/index.html | 17 - examples/simple/index.js | 5 - examples/simple/package.json | 36 - examples/simple/server.js | 15 - examples/simple/style.css | 517 -- examples/simple/webpack.config.js | 69 - index.tsx | 69 + package-lock.json | 11425 +--------------------------- package.json | 45 +- src/Textfit.js | 231 - src/index.js | 3 - src/utils/innerSize.js | 23 - src/utils/series.js | 37 - src/utils/shallowEqual.js | 23 - src/utils/throttle.js | 35 - src/utils/uniqueId.js | 5 - src/utils/whilst.js | 25 - test/index.spec.js | 7 - tsconfig.json | 18 + webpack.config.js | 39 - 31 files changed, 277 insertions(+), 12731 deletions(-) delete mode 100644 .babelrc delete mode 100644 .eslintignore delete mode 100644 .eslintrc delete mode 100644 .travis.yml delete mode 100644 CHANGELOG.md delete mode 100644 CODE_OF_CONDUCT.md rename LICENSE.md => LICENSE (94%) delete mode 100644 examples/simple/components/App.js delete mode 100644 examples/simple/index.html delete mode 100644 examples/simple/index.js delete mode 100644 examples/simple/package.json delete mode 100644 examples/simple/server.js delete mode 100644 examples/simple/style.css delete mode 100644 examples/simple/webpack.config.js create mode 100644 index.tsx delete mode 100644 src/Textfit.js delete mode 100644 src/index.js delete mode 100644 src/utils/innerSize.js delete mode 100644 src/utils/series.js delete mode 100644 src/utils/shallowEqual.js delete mode 100644 src/utils/throttle.js delete mode 100644 src/utils/uniqueId.js delete mode 100644 src/utils/whilst.js delete mode 100644 test/index.spec.js create mode 100644 tsconfig.json delete mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 5922d86..0000000 --- a/.babelrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": [ - "es2015", - "react", - "stage-2" - ] -} diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 8f2d5c7..0000000 --- a/.eslintignore +++ /dev/null @@ -1,5 +0,0 @@ -lib -**/node_modules -**/webpack.config.js -examples/**/server.js -examples/**/dist/* diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 3d7373a..0000000 --- a/.eslintrc +++ /dev/null @@ -1,25 +0,0 @@ -{ - "extends": "airbnb", - "env": { - "browser": true, - "mocha": true, - "node": true - }, - "parser": "babel-eslint", - "rules": { - "react/jsx-uses-react": 2, - "react/jsx-uses-vars": 2, - "react/react-in-jsx-scope": 2, - "indent": [2, 4, {"SwitchCase": 1}], - "comma-dangle": 0, - "react/jsx-boolean-value": 0, - "react/no-multi-comp": 0, - "react/prop-types": 0, - "id-length": 0, - "no-console": 0, - "no-nested-ternary": 0 - }, - "plugins": [ - "react" - ] -} diff --git a/.gitignore b/.gitignore index a6d1c49..76add87 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,2 @@ node_modules -*.log -.DS_Store -dist -lib -coverage +dist \ No newline at end of file diff --git a/.npmignore b/.npmignore index c21cda5..e69de29 100644 --- a/.npmignore +++ b/.npmignore @@ -1,6 +0,0 @@ -.DS_Store -*.log -src -test -examples -coverage diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index c42701f..0000000 --- a/.travis.yml +++ /dev/null @@ -1,3 +0,0 @@ -language: node_js -node_js: - - "iojs" diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 32b0539..0000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,32 +0,0 @@ -# Change log - -All notable changes to this project will be documented in this file. -This project adheres to [Semantic Versioning](http://semver.org/). - -## v1.1.1 - -Maintenance release. - -## v1.1.0 - -* React 16 support. - -## v1.0.1 - -Improvements: - -* Accept multiple children (#23). - -## v1.0.0 - -Backwards-incompatible changes: - -* `` changed to a `
` in the implementation. -* Dropped `perfectFit` property. - -Improvements: - -* React 15 support (#21). -* More precise font-size computation (#22). -* Fixed min and max (#1). -* Removed warnings about invalid setState calls during resizing (#15). diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index a0fd0d6..0000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,14 +0,0 @@ -# Contributor Code of Conduct - -As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. - -We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion. - -Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. - -Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team. - -Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. - -This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/) - diff --git a/LICENSE.md b/LICENSE similarity index 94% rename from LICENSE.md rename to LICENSE index 0532f3e..fd15009 100644 --- a/LICENSE.md +++ b/LICENSE @@ -1,6 +1,6 @@ -The MIT License (MIT) +The MIT License -Copyright (c) 2015 react-textfit +Copyright (c) 2022 namhong2001/react-textfit Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 763baee..a7c1d59 100644 --- a/README.md +++ b/README.md @@ -1,126 +1,59 @@ -## Diff from malte-wessel/react-textfit +# @namhong2001/react-textfit -- make run possible on react v18 - -### install types - -```bash -npm install @types/namhong2001__react-textfit@npm:@types/react-textfit --D -``` +## v1 -# react-textfit +### Diff from malte-wessel/react-textfit -[![npm](https://img.shields.io/badge/npm-react--textfit-brightgreen.svg?style=flat-square)]() -[![npm version](https://img.shields.io/npm/v/react-textfit.svg?style=flat-square)](https://www.npmjs.com/package/react-textfit) -[![npm downloads](https://img.shields.io/npm/dm/react-textfit.svg?style=flat-square)](https://www.npmjs.com/package/react-textfit) - -- fit **headlines and paragraphs** into any element -- **fast:** uses binary search for efficiently find the correct fit -- **100%** react-goodness -- works with **any style** configuration (line-height, padding, ...) -- **[check out the demo](http://malte-wessel.github.io/react-textfit/)** +- make run possible on react v18 -## Table of Contents +### Install -- [Installation](#installation) -- [Usage](#usage) -- [Modes](#modes) -- [API](#api) -- [License](#license) +```shell +npm install @namhong2001/react-textfit@1 +``` -## Installation +#### Types ```bash -npm install react-textfit --save +npm install @types/namhong2001__react-textfit@npm:@types/react-textfit --D ``` -## Usage - -### Headlines +## v2 -```javascript -import { Textfit } from "react-textfit"; +Originate from **_malte-wessel/react-textfit_** but fully rewritten with function component and hooks by typescript -class App extends Component { - render() { - return Fat headline!; - } -} -``` - -#### Respect the element's height when using single lines - -```javascript -import { Textfit } from "react-textfit"; +### Install -class App extends Component { - render() { - return ( - - Fat headline! - - ); - } -} +```shell +npm install @namhong2001/react-textfit ``` -### Paragraphs - -```javascript -import { Textfit } from "react-textfit"; - -class App extends Component { - render() { - return ( - - Lorem ipsum dolor sit amet, consectetur adipisicing - elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi - ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa - qui officia deserunt mollit anim id est laborum. - - ); - } -} -``` +#### Types -## Modes +Included -### `single` +### Supported props -**Algorithm steps:** +- `mode` (single|multi) force singleline or multiline. default `multi` +- `min` (Number) minimum font size. default `0` +- `max` (Number) maximum font size. default `300` -``` -1. binary search to fit the element's width -2. if forceSingleModeWidth=false and text overflows height - 2a. binary search to also fit the elements height -``` +### example -### `multi` +```typescript + + {myText} + -**Algorithm steps:** + + {myText} + + + {myText} + ``` -1. binary search to fit the element's height -2. if text overflows width - 2a. binary search to also fit the elements width -``` - -## API - -### `` - -#### Props - -- `mode` (single|multi) Algorithm to fit the text. Use single for headlines and multi for paragraphs. Default is `multi`. -- `forceSingleModeWidth` (Boolean) When mode is single and forceSingleModeWidth is true, the element's height will be ignored. Default is `true`. -- `min` (Number) Minimum font size in pixel. Default is `1`. -- `max` (Number) Maximum font size in pixel. Default is `100`. -- `throttle` (Number) Window resize throttle in milliseconds. Default is `50`. -- `onReady` (Function) Will be called when text is fitted. -## License +## LICENSE MIT diff --git a/examples/simple/components/App.js b/examples/simple/components/App.js deleted file mode 100644 index baaeaee..0000000 --- a/examples/simple/components/App.js +++ /dev/null @@ -1,129 +0,0 @@ -import React from 'react'; -import { Textfit } from 'react-textfit'; - -const inlineStyle = { - height: 400 -}; - -export default class App extends React.Component { - state = { - text: 'Edit this text!', - mode: 'multi', - forceSingleModeWidth: true - } - - handleChangeText = (e) => { - const text = e.target.value; - this.setState({ text }); - } - - handleChangeMode = (e) => { - const mode = e.target.value; - this.setState({ mode }); - } - - handleChangeForceWidth = (e) => { - const forceSingleModeWidth = e.target.checked; - this.setState({ forceSingleModeWidth }); - } - - render() { - const { text, mode, forceSingleModeWidth } = this.state; - return ( -
-

- react-textfit - - - -

-
-
-
    -
  • fit headlines and paragraphs into any element
    • -
  • fast: uses binary search for efficiently find the correct fit
    • -
  • 100% react-goodness
    • -
  • works with any style configuration (line-height, padding, ...)
    • -
-
-
-

Examples

-
-
- - Fat headlines! - -
-
-
-
- - Multi line paragraphs at all sizes! - -
-
- - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - -
-
- - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. - -
-
- - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - -
-
-

Playground

-
-
- - {text} - -
-
-