Skip to content

chore: convert to typescript #93

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 5, 2019
Merged

chore: convert to typescript #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4924241
swap to typescript and get dev tools working
sskiswani Sep 4, 2019
bd7f571
Merge branch 'master' into typescript-port
sskiswani Sep 20, 2019
f5b2c12
cleanup deps and npm scripts
sskiswani Sep 20, 2019
8aef1b0
merge v1.9.1 and clean things up
sskiswani Oct 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 0 additions & 29 deletions .babelrc
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,5 @@ website/
node_modules/
package-lock.json
yarn.lock
dist/
.rts2_cache_*
20 changes: 17 additions & 3 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,21 @@
{
"extends": ["react-app", "plugin:prettier/recommended", "prettier"],
"plugins": ["prettier"],
"extends": [
"react-app",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"rules": {
"react/prop-types": 2
"react/prop-types": 2,
"@typescript-eslint/consistent-type-assertions": "off",
"@typescript-eslint/consistent-type-definitions": ["error", "interface"],
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/explicit-member-accessibility": "off",
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-use-before-define": "off",
"@typescript-eslint/no-var-requires": "off",
"@typescript-eslint/unbound-method": "off"
}
}
4 changes: 4 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,7 @@ styles.css
es/
lib/
coverage/

# build artifacts
.rts2_cache_*
dist/
109 changes: 48 additions & 61 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
"name": "react-base-table",
"version": "1.9.1",
"description": "a react table component to display large data set with high performance and flexibility",
"main": "lib/index.js",
"module": "es/index.js",
"main": "dist/index.js",
"module": "dist/react-base-table.esm.js",
"typings": "dist/index.d.ts",
"files": [
"lib/",
"es/",
"dist",
"styles.css"
],
"author": "Neo Nie <[email protected]>",
Expand All @@ -18,35 +18,24 @@
"scripts": {
"start": "cd website && npm start",
"deploy": "cd website && npm run deploy",
"lint": "eslint ./src/**/*.js",
"clean": "rimraf lib es styles.css",
"build:js": "cross-env NODE_ENV=production babel src -d lib --ignore '**/*.spec.js','__snapshots__' --copy-files --source-maps",
"build:es": "cross-env BABEL_ENV=es NODE_ENV=production babel src -d es --ignore '**/*.spec.js','__snapshots__' --copy-files --source-maps",
"lint": "eslint ./src/**/*.{ts,tsx}",
"clean": "rimraf '.rts2_cache_*' dist styles.css typings",
"build": "run-s tsdx:build build:css",
"build:types": "rimraf typings && tsc -p tsconfig.json --emitDeclarationOnly --declarationDir typings --rootDir src",
"build:css": "node-sass src/_BaseTable.scss ./styles.css --output-style expanded",
"build": "npm run build:js && npm run build:es && npm run build:css",
"format": "prettier --write 'src/**/*.{js,scss}'",
"prebuild": "npm run clean",
"precommit": "lint-staged",
"prepush": "npm run test",
"prepublish": "npm run build && npm run test",
"test": "jest"
},
"lint-staged": {
"packages/**/*.scss": [
"prettier --write",
"git add"
],
"packages/**/*.js": [
"prettier --write",
"eslint -c .eslintrc",
"git add"
]
"format": "pretty-quick --pattern 'src/**/*.{ts,tsx,scss}' --ignore-pattern '**/__snapshots__/**'",
"prebuild": "run-s clean",
"prepublish": "run-s build test",
"test": "jest",
"tsdx:watch": "tsdx watch",
"tsdx:build": "tsdx build",
"type-check": "tsc -p tsconfig.json --noEmit --watch"
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"classnames": "^2.2.5",
"memoize-one": "^5.0.0",
"prop-types": "^15.7.0",
"prop-types": "^15.7.2",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.2"
},
Expand All @@ -55,45 +44,43 @@
"react-dom": "^16.0.0"
},
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.4.2",
"babel-plugin-syntax-trailing-function-commas": "^6.22.0",
"cross-env": "^5.2.0",
"eslint": "^5.6.0",
"eslint-config-prettier": "^3.0.1",
"eslint-config-react-app": "^3.0.8",
"eslint-plugin-flowtype": "^3.4.2",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-react": "^7.11.1",
"husky": "^0.14.3",
"jest": "^23.5.0",
"lerna": "^3.2.1",
"lint-staged": "^7.2.2",
"node-sass": "^4.9.3",
"prettier": "^1.14.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-test-renderer": "^16.4.2",
"rimraf": "^2.6.2"
"@types/classnames": "^2.2.9",
"@types/jest": "^24.0.18",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.9.0",
"@types/react-test-renderer": "^16.9.0",
"@types/react-virtualized-auto-sizer": "^1.0.0",
"@types/react-window": "^1.8.1",
"cross-env": "^6.0.0",
"husky": "^3.0.5",
"node-sass": "^4.12.0",
"npm-run-all": "^4.1.5",
"prettier": "^1.18.2",
"pretty-quick": "^1.11.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-test-renderer": "^16.9.0",
"rimraf": "^3.0.0",
"tsdx": "^0.10.5",
"tslib": "^1.10.0",
"typescript": "^3.6.4"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged",
"pre-push": "run-s test"
}
},
"jest": {
"preset": "ts-jest",
"globals": {
"ts-jest": {
"packageJson": "package.json"
}
},
"roots": [
"<rootDir>/src"
],
"testRegex": ".*.spec\\.js$",
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"<rootDir>/node_modules/"
]
Expand Down
52 changes: 30 additions & 22 deletions src/AutoResizer.js → src/AutoResizer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,43 @@
import React from 'react';
import PropTypes from 'prop-types';
import AutoSizer from 'react-virtualized-auto-sizer';
import AutoSizer, { Size } from 'react-virtualized-auto-sizer';

export interface AutoResizerProps {
/**
* Class name for the component
*/
className?: string;
/**
* the width of the component, will be the container's width if not set
*/
width?: number;
/**
* the height of the component, will be the container's width if not set
*/
height?: number;
/**
* A callback function to render the children component
* The handler is of the shape of `({ width, height }) => node`
*/
children: (size: Size) => React.ReactNode;
/**
* A callback function when the size of the table container changed if the width and height are not set
* The handler is of the shape of `({ width, height }) => *`
*/
onResize?: (size: Size) => void;
}

/**
* Decorator component that automatically adjusts the width and height of a single child
*/
const AutoResizer = ({ className, width, height, children, onResize }) => {
const AutoResizer: React.FC<AutoResizerProps> = ({ className, width, height, children, onResize }) => {
const disableWidth = typeof width === 'number';
const disableHeight = typeof height === 'number';

if (disableWidth && disableHeight) {
return (
<div className={className} style={{ width, height, position: 'relative' }}>
{children({ width, height })}
{children({ width: width!, height: height! })}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can't use short hand here?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its because of enabling strict null checks -- tsc thinks width and height might be null, so you have to override it. it works as expected if you put the null checks in the if statement.

if (typeof width === 'number' && typeof height === 'number') {
  return (
    <div className={className} style={{ width, height, position: 'relative' }}>
      {children({ width, height })}
    </div>
  );
}

</div>
);
}
Expand All @@ -21,36 +46,19 @@ const AutoResizer = ({ className, width, height, children, onResize }) => {
<AutoSizer className={className} disableWidth={disableWidth} disableHeight={disableHeight} onResize={onResize}>
{size =>
children({
width: disableWidth ? width : size.width,
height: disableHeight ? height : size.height,
width: (disableWidth ? width : size.width)!,
height: (disableHeight ? height : size.height)!,
})
}
</AutoSizer>
);
};

AutoResizer.propTypes = {
/**
* Class name for the component
*/
className: PropTypes.string,
/**
* the width of the component, will be the container's width if not set
*/
width: PropTypes.number,
/**
* the height of the component, will be the container's width if not set
*/
height: PropTypes.number,
/**
* A callback function to render the children component
* The handler is of the shape of `({ width, height }) => node`
*/
children: PropTypes.func.isRequired,
/**
* A callback function when the size of the table container changed if the width and height are not set
* The handler is of the shape of `({ width, height }) => *`
*/
onResize: PropTypes.func,
};

Expand Down
6 changes: 4 additions & 2 deletions src/BaseTable.spec.js → src/BaseTable.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import renderer from 'react-test-renderer';

import BaseTable from './BaseTable';
import BaseTable, { BaseTableProps } from './BaseTable';

const RENDERER = () => null;

Expand Down Expand Up @@ -33,7 +33,9 @@ const data = [
},
];

const Table = props => <BaseTable width={100} height={100} data={data} columns={columns} {...props} />;
const Table: React.FC<Partial<BaseTableProps>> = props => (
<BaseTable width={100} height={100} data={data} columns={columns} {...props} />
);

describe('Table', function() {
test('renders correctly', () => {
Expand Down
Loading