feat: 基本实现

.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.fatherrc.ts

@@ -0,0 +1,11 @@
+import { IBundleOptions } from 'father';
+
+const options: IBundleOptions = {
+  esm: 'rollup',
+  cjs: 'rollup',
+  extraBabelPlugins: [
+    ['import', { libraryName: 'antd', style: true }]
+  ]
+};
+
+export default options;

.gitignore

@@ -0,0 +1,17 @@
+# IDE
+.idea
+.vscode
+
+# log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# build
+dist
+
+# Dependency directories
+node_modules
+
+.docz
+.doc

README.md

@@ -0,0 +1,38 @@
+# rc-fit-text
+
+> 重写下[react-fittext](https://github.com/gianu/react-fittext)组件
+
+## 使用
+
+* 安装依赖
+
+```
+yarn add rc-fit-text
+```
+
+* 组件中使用
+
+```
+import FitText form 'rc-fit-text';
+
+<FitText> 
+  <h2>Test React Fit Text</h2> 
+</FitText>
+```
+
+## Props
+
+### compressor
+
+* 描述: 你可以调整这个变量来增加/减少字体大小
+* 默认值: 1
+
+### minFontSize
+
+* 描述: 此组件应使用的最小的字体大小
+* 默认值: `Number.NEGATIVE_INFINITY`
+
+### maxFontSize
+
+* 描述: 此组件应使用的最大的字体大小
+* 默认值: `Number.POSITIVE_INFINITY`

package.json

@@ -0,0 +1,45 @@
+{
+  "name": "rc-fit-text",
+  "version": "0.0.1",
+  "description": "Fit Text",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "react-component",
+    "component",
+    "fittext"
+  ],
+  "scripts": {
+    "bootstrap": "yarn || npm i",
+    "prepare": "yarn build",
+    "build": "father build",
+    "doc:dev": "father doc dev",
+    "doc:build": "cross-env DOCZ_BASE=/rc-fit-text/ father doc build",
+    "gh-pages": "yarn doc:build && gh-pages -d .doc"
+  },
+  "repository": "git@github.com:ts-react/rc-send-code.git",
+  "author": "wangxingkang <wangxingkang@sensoro.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^16.8.3",
+    "babel-plugin-import": "^1.12.0",
+    "cross-env": "^5.2.0",
+    "father": "^2.7.2",
+    "gh-pages": "^2.0.1",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.6",
+    "typescript": "^3.5.1"
+  },
+  "engines": {
+    "node": ">=8.9.0"
+  }
+}

src/index.mdx

@@ -0,0 +1,16 @@
+---
+route: /
+name: 'FitText'
+---
+import { Playground, Props } from 'docz';
+import FitText from './index';
+
+# FitText
+
+## 示例
+
+<Playground>
+  <FitText>
+    <h1>Testing React Fit Text</h1>
+  </FitText>
+</Playground>

src/index.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+export interface IFitTextProps {
+  compressor?: number;
+  minFontSize?: number;
+  maxFontSize?: number;
+  children: React.ReactElement;
+}
+
+const nodes = new Map();
+let updateQueued = false;
+
+class FitText extends React.Component<IFitTextProps> {
+  static defaultProps = {
+    compressor: 1,
+    minFontSize: Number.NEGATIVE_INFINITY,
+    maxFontSize: Number.POSITIVE_INFINITY
+  };
+
+  componentWillMount() {
+    if (!updateQueued) {
+      window.requestAnimationFrame(this.onBodyResize);
+    }
+    window.addEventListener('resize', this.onBodyResize);
+    window.addEventListener('load', this.onBodyResize);
+  }
+
+  componentDidUpdate() {
+    this.onBodyResize();
+  }
+
+  componentWillUnmount() {
+    // @ts-ignore
+    if (this._childRef) {
+      // @ts-ignore
+      nodes.delete(this._childRef);
+    }
+    window.removeEventListener('resize', this.onBodyResize);
+    window.removeEventListener('load', this.onBodyResize);
+  }
+
+  updateElementStyle = (element, options, width) => {
+    element.style.fontSize = `${Math.min(Math.max(width / (options.compressor * 10), options.minFontSize), options.maxFontSize)}px`;
+  };
+
+  onBodyResize = () => {
+    updateQueued = true;
+    const widths = [];
+    nodes.forEach((options, element) => {
+      widths.push(element.offsetWidth);
+    });
+    let i = 0;
+    nodes.forEach((options, element) => {
+      this.updateElementStyle(element, options, widths[i]);
+      i += 1;
+    });
+  };
+
+  _renderChildren = () => {
+    const { children } = this.props;
+    const _this = this;
+    return React.Children.map(children, (child) => {
+      return React.cloneElement(child as any, {
+        ref: (c) => {
+          if (c) {
+            nodes.set(c, _this.props);
+          }
+          // @ts-ignore
+          _this._childRef = c;
+        }
+      })
+    })
+  };
+
+
+  render() {
+    return this._renderChildren()[0];
+  }
+}
+
+export default FitText;

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "esnext",
+    "lib": ["esnext", "dom"],
+    "sourceMap": true,
+    "baseUrl": ".",
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "experimentalDecorators": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "example",
+    "_test_"
+  ]
+}

typings.d.ts

@@ -0,0 +1,11 @@
+declare module '*.css';
+declare module '*.less';
+declare module '*.scss';
+declare module '*.sass';
+declare module '*.svg';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.bmp';
+declare module '*.tiff';