upgraded to V4 #7
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Seperated actual folder tree and the sandbox to test it
- added ico image - moved public HTML and ico to the new public folder - edited webpack to add icon
- added test data - added skeleton helper functions to initialize tree state
- installed jest - add basic jest config so `yarn jest` works - add skeleton test for utils
- installed and setup basic eslint configs, plugins and rules, so we can now run `yarn lint`. - fixed a couple lint error
- installed husky and lint-staged package - added and configured more eslint rules - fixed some exlint errors
- setup more rules - changed yarn lint command so it can lint jsx file along with js files - lint style fixes
- Implemented addUniqIds function and tests for it - FolderTree can intialzie data with ids - more linter rules
- clean up unused jest configs - add test coverage to `yarn test`
- clean up unused jest configs - add test coverage to `yarn test`
implemented `setCheckedStatus1()` so that data will be initialized with checked status, which defaults to 0
- added packages to support importing scss - configured webpack to compile scss
- added TreeNode component - folder tree can now render basic tree nodes according to the data - when (un)check a node, top level onChange will log current tree state - changed jest threshold to very low (will add more tests later, don't enforce coverage now)
added a checkbox component which should be able to take care of half check (didn't test yet), this checkbox component is a wrapper of a native checkbox input DOM, it only handles view ,so it only takes a 'status' prop which can be 1, 0, or 0.5 for half check. It also takes a 'onchange' prop which is passed directly to native checkbox DOM.
- finished checkNode() function so that it can handle state change for half check. - refactored some previous functions - added a couple helper functions getNewCheckStatus(), setStatusDown(), updateStatusUp() for checkNode() - added unit tests for them noe we can see the half check works in sandbox!!
- added necessary packages - changed some config files so enzyme and jest tests can run
- now we don't need to pass same handleCheck() over and over to each level of TreeNode - it enables to pass future utils more easily, such as handleNameChange()
- added renameNode() function, which can handle node name change - adde unit test for it
- show an input box, which is an controlled component - trigger onNameChange function when click ok button - reset input box when click cancel button - will replace ok and cancel button with better UI component
- pass handleNodeRename() to TreeNode in context - when user type new name in the input box, and click ok, rename will take effect, and tree state will change accordingly
- now we are able to delete a note by path - unit tested this function to make sure all the check status are still correct
- passed deleteNode() as context to TreeNode - extracted isEditing state from EditableName to upper level TreeNode component to better accompany deleteNode() - now we are able to select a node, and choose to delete or rename it
previously when deleted the last children of a parent node, parent node will be computed to have check status 1. Solved this bug by checking if children is empty, then return original check status.
used react icons replacing previous buttons. Added: - folder open/close icon - folder/file icon - toolbar icons: create, update, delete, cancel, confirm icons
This function can add a node, which can be either a file or folder. It will first get current maximum ids, and set a this new node id to be maxId + 1. Unit tested addNode() and findMaxId() note that for better UI, files are added to the front of array, folders are to the back
Now in folder tree ui we can click button to either add a file or a folder. This button is only available for folder components
Wrapped each icon in icon containers, and gave icon className of 'icon' + it's own name. With these classNames, added hover color to each Icon.
- changed components to add ability to provide custom Icons - added eslintignore to ignore checking for all sandbox files - separated each different sandbox to a component, and import them to sandbox.jsx, so it can decide which kind of sandbox to render - added custom Icon sandbox
previously we manage the isOpen status in each TreeNode component, but this won't allow user to provide custom open status. So we need to manage isOpen property at the top level tree state. added toggle open method in utils and unit tested it so it will provide ability to manage isOpen at the top level.
integrated the toggleIsOpen method to the folder tree, so now it manages each isOpen state of node at the whole tree state level. Note that only folder component, i.e. treenode with 'children' attribute can have isOpen atribute.
seperated dev and prof webpack config, so in dev mode it will use the sandbox html with the dev-server, while in prod mode it will build a bundle.js in dist/, with only the FolderTree module
- changed id to _id in the tree state, so people can still have id in the original state - added api of indentPixels
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
upgraded to version 4.0.0, with some breaking changes. Now it has better code structure and better algorithms.