@talend/react-components
Version:
Set of react components.
245 lines (243 loc) • 8.83 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ItemsComponent = void 0;
var _react = require("react");
var _reactI18next = require("react-i18next");
var _reactVirtualized = require("react-virtualized");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Checkbox = _interopRequireDefault(require("../../Checkbox"));
var _constants = _interopRequireDefault(require("../../constants"));
var _translate = _interopRequireDefault(require("../../translate"));
var _Item = _interopRequireDefault(require("./Item/Item.component"));
var _ItemsModule = _interopRequireDefault(require("./Items.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const listClasses = (0, _classnames.default)(_ItemsModule.default['tc-list-items'], 'tc-list-items');
const itemsClasses = (0, _classnames.default)(_ItemsModule.default['tc-listview-items'], 'tc-listview-items');
const itemContainer = (0, _classnames.default)(_ItemsModule.default['tc-item-container'], 'tc-item-container');
/**
* Converts a string px size in a JS valid number
* @param {String} sizeInPixels
* @returns {Number}
*/
function pxToInt(sizeInPixels = '0') {
return parseFloat(sizeInPixels.replace('px', '')) || 0;
}
const TOGGLE_ALL_ROW_HEIGHT = 40;
const ROW_LINE_HEIGHT = pxToInt(_ItemsModule.default['row-height']);
const ROW_VERTICAL_MARGIN = pxToInt(_ItemsModule.default['row-vertical-margin']);
const ROW_HEIGHT = ROW_LINE_HEIGHT + ROW_VERTICAL_MARGIN;
const ROW_NESTED_INNER_MARGINS = pxToInt(_ItemsModule.default['row-nested-inner-margin-top']) + pxToInt(_ItemsModule.default['row-nested-inner-margin-bottom']);
class ItemsComponent extends _react.PureComponent {
constructor(props) {
super(props);
this.renderItem = this.renderItem.bind(this);
this.getRowHeight = this.getRowHeight.bind(this);
this.rowRenderer = this.rowRenderer.bind(this);
this.renderToggleAllOrItem = this.renderToggleAllOrItem.bind(this);
this.renderToggleAll = this.renderToggleAll.bind(this);
this.cache = new _reactVirtualized.CellMeasurerCache({
defaultHeight: props.getItemHeight ? props.getItemHeight() : ROW_HEIGHT,
fixedWidth: true
});
}
getItemByIndex(index) {
return this.props.items[index - Number(this.hasToggleAll)];
}
getRowHeight({
index
}) {
if (this.props.getItemHeight) {
// If an height computation has been provided, use the "old"
// way of computing row height with the provided computation
return this.oldGetRowHeight.call(this, {
index
});
}
if (this.hasToggleAll && index === 0) {
return TOGGLE_ALL_ROW_HEIGHT;
}
const isLastItem = index + (this.hasToggleAll ? 0 : 1) === this.props.items.length;
const currentItem = this.getItemByIndex(index);
let height = ROW_HEIGHT;
if (isLastItem) {
height += ROW_NESTED_INNER_MARGINS;
height += this.hasToggleAll ? 1 : 0; // Horizontal "Toggle all" separation height
}
if (!currentItem || !currentItem.children || !currentItem.expanded) {
return height;
}
return height +
// Own height
currentItem.children.length * ROW_HEIGHT +
// Children heights
ROW_NESTED_INNER_MARGINS // Inner nested margins
;
}
getRowCount() {
if (this.hasToggleAll) {
return this.props.items.length + 1;
}
return this.props.items.length;
}
oldGetRowHeight({
index
}) {
if (this.hasToggleAll && index === 0) {
return TOGGLE_ALL_ROW_HEIGHT;
}
let extraHeight = 0;
const currentItem = this.getItemByIndex(index);
if (currentItem && currentItem.children && currentItem.expanded) {
extraHeight = currentItem.children.length * this.props.getItemHeight();
}
return this.props.getItemHeight() + extraHeight;
}
rowRenderer(props) {
const {
key,
index,
style
} = props;
const isToggle = this.hasToggleAll && index === 0;
const currentItem = this.getItemByIndex(index);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.CellMeasurer, {
cache: this.cache,
columnIndex: 0,
parent: this.list,
rowIndex: index,
children: ({
measure
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _classnames.default)(itemContainer, {
[_ItemsModule.default.toggle]: isToggle,
toggle: isToggle,
expanded: currentItem && currentItem.expanded
}),
style: style,
children: this.renderToggleAllOrItem(index, measure)
}, key)
}, key);
}
renderToggleAllOrItem(index, measure) {
let computedIndex = index;
if (this.hasToggleAll) {
if (index === 0) {
return this.renderToggleAll();
}
computedIndex = index - 1;
}
return this.renderItem(this.props.items[computedIndex], computedIndex, measure);
}
renderToggleAll() {
const {
id,
isSwitchBox,
toggleAllChecked,
onToggleAll,
t
} = this.props;
const toggleAllId = `${id || 'tc-listview'}-toggle-all`;
const toggleAllSelector = isSwitchBox ? 'switch checkbox' : 'checkbox';
const label = toggleAllChecked ? t('LISTVIEW_ITEMS_DESELECT_ALL', {
defaultValue: 'Deselect all'
}) : t('LISTVIEW_ITEMS_SELECT_ALL', {
defaultValue: 'Select all'
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: toggleAllSelector,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
id: toggleAllId,
onChange: onToggleAll,
checked: toggleAllChecked,
label: /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
children: label
})
})
});
}
renderItem(item, index, measure) {
const {
dataTest
} = this.props;
let computedId;
if (this.props.id) {
const computedIndex = this.hasToggleAll ? index + 1 : index;
computedId = `${this.props.id}-${computedIndex}-item`;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
measure: measure,
id: computedId,
item: item,
isSwitchBox: this.props.isSwitchBox && !item.children,
searchCriteria: this.props.searchCriteria,
dataTest: dataTest && `${dataTest}-${index}`,
children: item.children && item.children.map((nestedItem, nestedIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
measure: measure,
item: nestedItem,
parentItem: item,
searchCriteria: this.props.searchCriteria,
dataTest: dataTest && `${dataTest}-${index}.nested-${nestedIndex}`
}, nestedIndex))
}, computedId);
}
render() {
this.hasToggleAll = this.props.showToggleAll && this.props.items.length > 1;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: itemsClasses,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.AutoSizer, {
children: ({
height,
width
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.List
/**
* The props 'items' and 'actions' does not exist in <List>
* but only way to refresh component when items or actions change
* See https://github.com/bvaughn/react-virtualized/#pure-components
*/, {
ref: node => {
this.list = node;
},
items: this.props.items,
className: listClasses,
rowRenderer: this.rowRenderer,
width: width,
height: height,
rowCount: this.getRowCount(),
rowHeight: this.getRowHeight,
role: "listbox",
containerProps: this.props.containerProps
})
})
});
}
}
exports.ItemsComponent = ItemsComponent;
ItemsComponent.propTypes = {
containerProps: _propTypes.default.object,
id: _propTypes.default.string,
items: _propTypes.default.arrayOf(_propTypes.default.shape({
label: _propTypes.default.string,
onChange: _propTypes.default.func,
checked: _propTypes.default.bool,
index: _propTypes.default.number
})),
isSwitchBox: _propTypes.default.bool,
getItemHeight: _propTypes.default.func,
searchCriteria: _propTypes.default.string,
toggleAllChecked: _propTypes.default.bool,
showToggleAll: _propTypes.default.bool,
onToggleAll: _propTypes.default.func,
dataTest: _propTypes.default.string,
t: _propTypes.default.func
};
ItemsComponent.defaultProps = {
t: (0, _translate.default)(),
isSwitchBox: false,
showToggleAll: true
};
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.default)(ItemsComponent);
//# sourceMappingURL=Items.component.js.map