Add typings

[IanStorm]

Resolves #66

Running the lint script throws 4 errors, but this also happened before I applied my changes. The output of the build, start, and test scripts looked good to me.

I tested the changes locally by running yarn pack and installing the resulting .tgz file in a small React project. I basically used the snippet below to play around with the lib. VS Code code completion worked, TS compiler was fine; the project was bootstrapped using npx create-react-app react-folder-tree-test --template typescript:

import 'react-folder-tree/dist/style.css';

import ReactDOM from 'react-dom';
import FolderTree, { testData } from 'react-folder-tree';

const BasicTree = (): JSX.Element => {
	return (
		<FolderTree
			data={testData}
			iconComponents={{FileIcon: () => null}}
			initCheckedStatus='checked'
			initOpenStatus='open'
			indentPixels={100}
			onChange={(state, event) => console.log('*** onChange ***', 'state:', state, 'event:', event)}
			onNameClick={({defaultOnClick, nodeData}) => {
				console.log('*** onNameClick ***', 'nodeData:', nodeData);
				defaultOnClick();
			}}
			readOnly={false}
			showCheckbox={true}
		/>
	);
};

ReactDOM.render(
	<BasicTree />,
	document.getElementById('root'),
);

Please ping me if you want me to bump the version, or if you think any documentation change is required.

Looking forward to your feedback.

[codecov]

Codecov Report

Merging #77 (bf443e9) into master (cae3e2f) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master      #77   +/-   ##
=======================================
  Coverage   96.69%   96.69%           
=======================================
  Files           7        7           
  Lines         635      635           
  Branches       22       22           
=======================================
  Hits          614      614           
  Misses         21       21           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[shunjizhan]

looks awesome, thanks! Just a small correction: _id and path are auto generated internal props, so we shouldn't include them in the data. NodeData can also include arbitrary data, so it should look like

export interface NodeData {
  name: string;
  checked?: Checked;
  children?: Array<NodeData>;
  isOpen?: boolean;
  [key: string]: any;
}

[shunjizhan]

@IanStorm would you mind make the change, and double check it still works? Then we should be able to merge it, thanks!

[IanStorm]

Sure, @shunjizhan, I will perform the requested amendments and ping you once the PR is ready for review again.

[IanStorm]

Hey @shunjizhan, please take a look at the PR again.

I tweaked the initially mentioned snippet a little bit to test your requested changes. VS Code completion still worked, as well as the TS compilation. Console logs were showing the extra fields that I added.

import 'react-folder-tree/dist/style.css';

import ReactDOM from 'react-dom';
import FolderTree, { NodeData, testData } from 'react-folder-tree';

const myTestData: NodeData = { ...testData };
myTestData.name = 'This is my test data'; // instead of 'All Cryptos'
myTestData.myField = 2;
myTestData.nickname = 'texty text';
myTestData.url = 'https://www.google.com';

const BasicTree = (): JSX.Element => {
	return (
		<FolderTree
			data={myTestData}
			iconComponents={{FileIcon: () => null}}
			initCheckedStatus='checked'
			initOpenStatus='open'
			indentPixels={100}
			onChange={(state, event) => console.log('*** onChange ***', 'state:', state, 'event:', event)}
			onNameClick={({defaultOnClick, nodeData}) => {
				console.log('*** onNameClick ***', 'nodeData:', nodeData);
				defaultOnClick();
			}}
			readOnly={false}
			showCheckbox={true}
		/>
	);
};

ReactDOM.render(
	<BasicTree />,
	document.getElementById('root'),
);

Looking forward to your feedback.

[shunjizhan]

looks great!

[skillseeker-io]

Thank you both @IanStorm @shunjizhan This seems to be the best FOSS react folder tree module out there, and it's great we can now use Typescript with it