Skip to content
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

Added onToggle #23

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Added onToggle #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d1fae4c
Added onToggle
chronosye Oct 22, 2022
5827c27
updated package file
chronosye Oct 23, 2022
dc9f21f
Updated readme
chronosye Oct 23, 2022
25d2e89
Updated versions
chronosye Oct 23, 2022
375679c
Changed versions
chronosye Oct 25, 2022
4f6ab98
changed config
chronosye Oct 26, 2022
24c83b1
changed package.json file
chronosye Oct 26, 2022
25248fb
Changed toogle function
chronosye Oct 27, 2022
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
5 changes: 5 additions & 0 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,11 @@ export interface TreeProps {
*/
onClick?: React.MouseEventHandler<any>;

/**
* Event handler for clicks on the toggler icon
*/
onToggle?: React.MouseEventHandler<any>;

/**
* Custom react-spring animation config
*/
Expand Down
74 changes: 37 additions & 37 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
{
"name": "react-animated-tree",
"version": "1.0.8",
"name": "@chronosye/react-animated-tree",
"version": "1.0.0",
"description": "Animate React with ease",
"main": "dist/react-animated-tree.cjs.js",
"module": "dist/react-animated-tree.es.js",
"typings": "index.d.ts",
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"files": [
"dist",
"src",
Expand All @@ -13,11 +16,16 @@
],
"sideEffects": false,
"scripts": {
"prebuild": "rimraf dist",
"build": "rollup -c",
"prepare": "npm run build",
"test": "echo will do",
"precommit": "lint-staged"
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepublish": "run-s build",
"test": "run-s test:unit test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && yarn install && yarn run build",
"deploy": "gh-pages -d example/build"
},
"prettier": {
"semi": false,
Expand All @@ -33,41 +41,33 @@
"git add"
]
},
"repository": {
"type": "git",
"url": "git+https://github.com/drcmda/react-animated-tree.git"
},
"keywords": [
"react",
"motion",
"animated",
"animation",
"spring"
],
"author": "Paul Henschel",
"license": "ISC",
"bugs": {
"url": "https://github.com/drcmda/react-animated-tree/issues"
},
"homepage": "https://github.com/drcmda/react-animated-tree#readme",
"devDependencies": {
"@babel/core": "7.0.0-beta.49",
"@babel/plugin-transform-runtime": "^7.0.0-beta.49",
"@babel/preset-env": "7.0.0-beta.49",
"@babel/preset-react": "7.0.0-beta.49",
"@babel/preset-stage-2": "7.0.0-beta.49",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "23.0.1",
"husky": "^1.0.0-rc.8",
"lint-staged": "^7.1.2",
"prettier": "^1.13.2",
"rimraf": "2.6.2",
"rollup": "0.59.4",
"rollup-plugin-babel": "^4.0.0-beta.4",
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-size-snapshot": "^0.5.1",
"rollup-plugin-uglify": "^4.0.0"
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"microbundle-crl": "^0.13.8",
"npm-run-all": "^4.1.5",
"prettier": "^2.0.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1"
},
"peerDependencies": {
"prop-types": "15.x.x",
Expand Down
4 changes: 2 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
[![Build Status](https://travis-ci.org/drcmda/react-animated-tree.svg?branch=master)](https://travis-ci.org/drcmda/react-animated-tree) [![npm version](https://badge.fury.io/js/react-animated-tree.svg)](https://badge.fury.io/js/react-animated-tree)

npm install react-animated-tree
npm install @chronosye/react-animated-tree

A simple, configurable tree view control for React.

Expand All @@ -16,6 +15,7 @@ Demo: https://codesandbox.io/embed/rrw7mrknyp
* `canHide`, optional: when set true displays an eye icon
* `visible`, optional: default visible state
* `onClick`, optional: click events on the eye
* `onToggle`, optional: click events on the icon
* `springConfig`, optional: react-spring animation config

```jsx
Expand Down
96 changes: 48 additions & 48 deletions rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,59 +6,59 @@ import { sizeSnapshot } from 'rollup-plugin-size-snapshot'

const isExternal = id => !id.startsWith('.') && !id.startsWith('/')
const getBabelOptions = ({ useESModules }) => ({
babelrc: false,
exclude: '**/node_modules/**',
runtimeHelpers: true,
presets: [
['@babel/preset-env', { loose: true, modules: false }],
['@babel/preset-stage-2', { loose: true, decoratorsLegacy: true }],
'@babel/preset-react',
],
plugins: [
[
'@babel/transform-runtime',
{ polyfill: false, useBuiltIns: true, useESModules },
babelrc: false,
exclude: '**/node_modules/**',
runtimeHelpers: true,
presets: [
['@babel/preset-env', { loose: true, modules: false }],
['@babel/preset-stage-2', { loose: true, decoratorsLegacy: true }],
'@babel/preset-react',
],
plugins: [
[
'@babel/transform-runtime',
{ polyfill: false, useBuiltIns: true, useESModules },
],
],
],
})

function createConfig(entry, out, name) {
return [
{
input: `./src/${entry}.js`,
output: { file: `dist/${out}.es.js`, format: 'es' },
external: isExternal,
plugins: [babel(getBabelOptions({ useESModules: true })), sizeSnapshot()],
},
{
input: `./src/${entry}.js`,
output: { file: `dist/${out}.cjs.js`, format: 'cjs' },
external: isExternal,
plugins: [babel(getBabelOptions({ useESModules: false }))],
},
{
input: `./src/${entry}.js`,
output: {
file: `dist/${out}.umd.js`,
format: 'umd',
name,
globals: {
react: 'React',
'react-dom': 'ReactDOM',
'prop-types': 'PropTypes',
'react-spring': 'ReactSpring',
return [
{
input: `./src/${entry}.js`,
output: { file: `dist/${out}.es.js`, format: 'es' },
external: isExternal,
plugins: [babel(getBabelOptions({ useESModules: true })), sizeSnapshot()],
},
{
input: `./src/${entry}.js`,
output: { file: `dist/${out}.cjs.js`, format: 'cjs' },
external: isExternal,
plugins: [babel(getBabelOptions({ useESModules: false }))],
},
{
input: `./src/${entry}.js`,
output: {
file: `dist/${out}.umd.js`,
format: 'umd',
name,
globals: {
react: 'React',
'react-dom': 'ReactDOM',
'prop-types': 'PropTypes',
'react-spring': 'ReactSpring',
},
},
external: ['react', 'react-dom', 'prop-types', 'react-spring'],
plugins: [
babel(getBabelOptions({ useESModules: false })),
resolve(),
commonjs(),
sizeSnapshot(),
uglify({ compress: true, mangle: { toplevel: true } }),
],
},
},
external: ['react', 'react-dom', 'prop-types', 'react-spring'],
plugins: [
babel(getBabelOptions({ useESModules: false })),
resolve(),
commonjs(),
sizeSnapshot(),
uglify({ compress: true, mangle: { toplevel: true } }),
],
},
]
]
}

export default [
Expand Down
5 changes: 4 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,19 @@ export default class Tree extends React.PureComponent {
canHide: PropTypes.bool,
content: PropTypes.node,
springConfig: PropTypes.func,
onToggle: PropTypes.func,
}

constructor(props) {
super()
this.state = { open: props.open, visible: props.visible, immediate: false }
}

toggle = () =>
toggle = () => {
if (this.props.onToggle) this.props.onToggle()
this.props.children &&
this.setState(state => ({ open: !state.open, immediate: false }))
}

toggleVisibility = () => {
this.setState(
Expand Down