Skip to content
This repository has been archived by the owner on Jan 16, 2023. It is now read-only.

feat: Separating header click action from toggle click action. #229

Closed

Conversation

dotneet
Copy link

@dotneet dotneet commented Aug 19, 2019

#177

I've add separateToggleEvent and onClickHeader to properties.
To enable onClickHeader we need to set separateToggleEvent to true.
separateToggleEvent is to support the behavior we need without breaking change.

})(({style}) => style);

class TreeNode extends PureComponent {

Copy link
Collaborator

Choose a reason for hiding this comment

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

remove blank line

@@ -89,14 +124,16 @@ class TreeNode extends PureComponent {
}

TreeNode.propTypes = {
separateToggleEvent: PropTypes.bool,
Copy link
Collaborator

Choose a reason for hiding this comment

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

if you have props that are not required, you should add defaultProps

style: PropTypes.object.isRequired,
node: PropTypes.object.isRequired,
decorators: PropTypes.object.isRequired,
animations: PropTypes.oneOfType([
PropTypes.object,
PropTypes.bool
]).isRequired
PropTypes.bool,
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove comma

PropTypes.bool
]).isRequired
PropTypes.bool,
]).isRequired,
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove comma

@@ -31,14 +31,16 @@ TreeBeard.propTypes = {
PropTypes.object,
PropTypes.bool
]),
separateToggleEvent: PropTypes.bool,
Copy link
Collaborator

Choose a reason for hiding this comment

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

add to defaultProps

onToggle: PropTypes.func,
onClickHeader: PropTypes.func,
Copy link
Collaborator

Choose a reason for hiding this comment

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

add to defaultProps

decorators: PropTypes.object
};

TreeBeard.defaultProps = {
style: defaultTheme,
animations: defaultAnimations,
decorators: defaultDecorators
decorators: defaultDecorators,
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove comma

@@ -23,6 +23,7 @@ const Header = ({style, node}) => {
Header.propTypes = {
node: PropTypes.object,
style: PropTypes.object,
onClick: PropTypes.func,
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove comma

const iconType = node.children ? 'folder' : 'file-text';
const iconClass = `fa fa-${iconType}`;
const iconStyle = {marginRight: '5px'};

return (
<Div style={style.base}>
<Div style={style.base} onClick={() => onClick()}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

do onClick like this: onClick={onClick}

@maximilianoforlenza
Copy link
Collaborator

Please fix eslint errors.

onClick: PropTypes.func
onClick: PropTypes.func,
onClickToggle: PropTypes.func,
onClickHeader: PropTypes.func,
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove comma

@@ -13,7 +13,8 @@ const Header = ({node, style}) => (

Header.propTypes = {
style: PropTypes.object,
node: PropTypes.object.isRequired
node: PropTypes.object.isRequired,
onClick: PropTypes.func,
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove comma

]).isRequired,
node: PropTypes.object.isRequired
node: PropTypes.object.isRequired,
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove comma

animations: PropTypes.oneOfType([
PropTypes.object,
PropTypes.bool
PropTypes.bool,
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove comma

animations() {
const {animations, node} = this.props;
if (!animations) {
return {
toggle: defaultAnimations.toggle(this.props, 0)
toggle: defaultAnimations.toggle(this.props, 0),
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove comma

};
}
const animation = Object.assign({}, animations, node.animations);
return {
toggle: animation.toggle(this.props),
drawer: animation.drawer(this.props)
drawer: animation.drawer(this.props),
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove comma

style,
separateToggleEvent,
onToggle,
onClickHeader,
Copy link
Collaborator

Choose a reason for hiding this comment

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

remove comma

<Ul style={{...defaultTheme.tree.base, ...style.tree.base}}>
{castArray(data).map(node => (
<TreeNode
{...{decorators, node, onToggle, animations}}
{...{decorators, node, separateToggleEvent, onToggle, onClickHeader, animations}}
Copy link
Collaborator

Choose a reason for hiding this comment

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

please create unit test when you press onClickHeader or when you have onClickHeader

@maximilianoforlenza
Copy link
Collaborator

I close this PR because it'll implement in version 4.2.4, in beta version already implement.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants