@talend/react-components
Version:
Set of react components.
97 lines (95 loc) • 3.34 kB
JavaScript
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withTranslation } from 'react-i18next';
import Icon from '../../../Icon';
import theme from './TreeBranchIcon.module.scss';
import I18N_DOMAIN_COMPONENTS from '../../../constants';
import getDefaultT from '../../../translate';
/**
* Allow to use custom get icon function.
*/
import { jsx as _jsx } from "react/jsx-runtime";
export function getDefaultIcon({
useCustomIcon,
getIcon,
opened,
...props
}) {
if (useCustomIcon && getIcon) {
return getIcon(opened, props);
}
return {
name: opened ? 'talend-caret-down' : 'talend-chevron-left'
};
}
/**
* Render a standard caret icon.
* Customizable with useCustomIcon and getIcon.
*/
export class TreeBranchIcon extends PureComponent {
constructor(...args) {
super(...args);
_defineProperty(this, "onClick", event => {
this.props.onToggle(event, {
value: this.props.value,
opened: this.props.opened,
jsonpath: this.props.jsonpath
}, this.props.index);
});
}
render() {
const {
className,
opened,
dataKey,
jsonpath,
useCustomIcon,
style,
t
} = this.props;
const icon = getDefaultIcon(this.props);
const title = opened ? t('TREE_BRANCH_ICON_TITLE_COLLAPSED', {
defaultValue: 'Collapse'
}) : t('TREE_BRANCH_ICON_TITLE_EXPANDED', {
defaultValue: 'Expand'
});
const iconClassNames = classNames(icon.className, {
[theme['tc-tree-branch-icon-caret']]: !useCustomIcon,
'tc-tree-branch-icon-caret': !useCustomIcon,
[theme['tc-tree-branch-icon-caret-right']]: !opened,
'tc-tree-branch-icon-caret-right': !opened
});
return /*#__PURE__*/_jsx("span", {
className: classNames(theme['tc-tree-branch-icon'], 'tc-tree-branch-icon', className),
style: style,
"data-testid": "tree-branch-icon",
children: /*#__PURE__*/_jsx(Icon, {
className: iconClassNames,
name: icon.name,
title: `${title} ${dataKey} (${jsonpath})`
})
});
}
}
_defineProperty(TreeBranchIcon, "propTypes", {
className: PropTypes.string,
dataKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
index: PropTypes.number,
opened: PropTypes.bool,
jsonpath: PropTypes.string,
onToggle: PropTypes.func.isRequired,
style: PropTypes.object,
t: PropTypes.func,
useCustomIcon: PropTypes.bool,
value: PropTypes.object
});
_defineProperty(TreeBranchIcon, "defaultProps", {
t: getDefaultT(),
useCustomIcon: false
});
export default withTranslation(I18N_DOMAIN_COMPONENTS)(TreeBranchIcon);
//# sourceMappingURL=TreeBranchIcon.component.js.map