burdy
Version:
Open Source Headless Platform
227 lines (226 loc) • 10.5 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("@fluentui/react");
const react_2 = __importStar(require("react"));
const empty_1 = __importDefault(require("./empty"));
const columns_context_1 = require("./columns.context");
const react_router_1 = require("react-router");
const theme = (0, react_1.getTheme)();
const styles = (0, react_1.mergeStyleSets)({
root: {
height: '100%',
textAlign: 'center',
paddingTop: 52,
paddingBottom: 104,
},
columnsView: {
overflow: 'auto',
display: 'flex',
flexDirection: 'row',
position: 'relative',
height: '100%',
},
shimmerColumn: {
width: 240,
maxWidth: 240,
minWidth: 240,
overflowY: 'auto',
height: '100%',
},
shimmerItemCell: {
height: 48,
width: '100%',
display: 'flex',
padding: '0 10px',
boxSizing: 'border-box',
'&:last-child': {
marginBottom: 46,
},
},
column: {
width: 240,
maxWidth: 240,
minWidth: 240,
overflowY: 'auto',
borderRight: `1px solid ${theme.semanticColors.bodyDivider}`,
height: '100%',
},
itemCell: {
width: '100%',
display: 'flex',
height: 48,
padding: '4px 6px',
boxSizing: 'border-box',
borderBottom: `1px solid ${theme.semanticColors.bodyDivider}`,
userSelect: 'none',
selectors: {
'&:hover': {
background: theme.semanticColors.bodyBackgroundHovered,
cursor: 'pointer',
},
}
},
itemCell_selected: {
background: theme.semanticColors.bodyBackgroundChecked,
borderBottom: `1px solid ${theme.palette.white}`,
fontWeight: 600,
selectors: {
'&:hover': {
background: theme.palette.neutralQuaternaryAlt,
},
},
},
itemCell_parent: {
background: theme.semanticColors.bodyBackgroundChecked,
borderBottom: `1px solid ${theme.palette.white}`,
selectors: {
'&:hover': {
background: theme.palette.neutralQuaternaryAlt,
},
},
},
check: {
width: 32,
minWidth: 32,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
icon: {
width: 32,
minWidth: 32,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: 18,
color: theme.palette.neutralSecondary,
},
itemContent: {
marginLeft: 6,
paddingTop: 2,
overflow: 'hidden',
flexGrow: 1,
},
itemTitle: {
fontSize: theme.fonts.medium.fontSize,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
itemHelper: {
fontSize: theme.fonts.small.fontSize,
color: theme.palette.neutralTertiary,
marginBottom: 10,
fontWeight: 400,
},
chevron: {
alignSelf: 'center',
marginLeft: 10,
color: theme.palette.neutralTertiary,
fontSize: theme.fonts.large.fontSize,
flexShrink: 0,
},
});
const Column = ({ items }) => {
const { ancestorsObj, selection, selectedItems } = (0, columns_context_1.useColumns)();
const history = (0, react_router_1.useHistory)();
const children = (0, react_2.useMemo)(() => {
const item = (items || []).find((item) => ancestorsObj[item.id]);
return item === null || item === void 0 ? void 0 : item.children;
}, [ancestorsObj, items]);
const Item = (item) => {
var _a;
return (react_2.default.createElement("div", { key: item.key, className: `${styles.itemCell} ${item.isSelected && styles.itemCell_selected} ${item.isParent && styles.itemCell_parent}`, onClick: (evt) => {
selection.setAllSelected(false);
selection.setKeySelected(item.key, true, false);
evt.stopPropagation();
}, onDoubleClick: () => {
if (item.actionType !== 'sites' || item.type === 'folder')
return;
if (item.type === 'hierarchical_post') {
history.push(`/sites/post-container/${item.id}`);
}
else {
history.push(`/sites/editor/${item.id}`);
}
}, "data-cy": "columns-view-item" },
react_2.default.createElement("div", { className: styles.check, onClick: (evt) => {
var _a;
if ((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 &&
((_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems[0]) === null || _a === void 0 ? void 0 : _a.parentId) !== item.parentId) {
selection.setAllSelected(false);
}
if (item.isSelected) {
selection.setKeySelected(item.key, false, false);
}
else {
selection.setKeySelected(item.key, true, false);
}
evt.stopPropagation();
} },
react_2.default.createElement(react_1.Check, { checked: item.isSelected })),
(item === null || item === void 0 ? void 0 : item.iconProps) && (react_2.default.createElement("div", { className: styles.icon, style: (item === null || item === void 0 ? void 0 : item.opacity) ? { opacity: item.opacity } : {} },
react_2.default.createElement(react_1.Icon, Object.assign({}, ((item === null || item === void 0 ? void 0 : item.iconProps) || {}))))),
react_2.default.createElement("div", { className: styles.itemContent, style: (item === null || item === void 0 ? void 0 : item.opacity) ? { opacity: item.opacity } : {} },
react_2.default.createElement("div", { className: styles.itemTitle }, item.title),
react_2.default.createElement("div", { className: styles.itemHelper }, item.helper)),
((_a = item === null || item === void 0 ? void 0 : item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 && (react_2.default.createElement(react_1.Icon, { className: styles.chevron, iconName: (0, react_1.getRTL)() ? 'ChevronLeft' : 'ChevronRight' }))));
};
const formatted = (0, react_2.useMemo)(() => {
return (items || []).map(item => {
return Object.assign(Object.assign({}, item), { isSelected: selection.isKeySelected(item.key), isParent: ancestorsObj[item.id] });
});
}, [items, selectedItems, ancestorsObj]);
return (react_2.default.createElement(react_2.default.Fragment, null,
react_2.default.createElement("div", { className: styles.column, "data-cy": "columns-view-column", onClick: () => {
var _a, _b;
selection.setAllSelected(false);
if ((_a = items === null || items === void 0 ? void 0 : items[0]) === null || _a === void 0 ? void 0 : _a.parentId) {
selection.setKeySelected((_b = items === null || items === void 0 ? void 0 : items[0]) === null || _b === void 0 ? void 0 : _b.parentId, true, false);
}
} },
react_2.default.createElement(react_1.List, { items: formatted, onRenderCell: Item })),
children && react_2.default.createElement(Column, { items: children })));
};
const ColumnsViewImpl = ({ loading }) => {
const { hierarchical, finished } = (0, columns_context_1.useColumns)();
return (react_2.default.createElement("div", { className: styles.columnsView, "data-cy": "columns-view" },
(loading || !finished) && (react_2.default.createElement("div", { className: styles.shimmerColumn }, [1, 0.8, 0.6].map((opacity) => (react_2.default.createElement("div", { key: opacity, style: { opacity }, className: styles.shimmerItemCell },
react_2.default.createElement(react_1.Stack, { verticalAlign: "center", tokens: { childrenGap: 4 } },
react_2.default.createElement(react_1.Shimmer, { width: 220, shimmerElements: [
{ type: react_1.ShimmerElementType.line, height: 8 },
] }),
react_2.default.createElement(react_1.Shimmer, { width: 220, shimmerElements: [
{ type: react_1.ShimmerElementType.line, height: 8 },
] }))))))),
!loading && finished && (hierarchical === null || hierarchical === void 0 ? void 0 : hierarchical.length) > 0 && (react_2.default.createElement(Column, { items: hierarchical })),
!loading && finished && !(hierarchical === null || hierarchical === void 0 ? void 0 : hierarchical.length) && (react_2.default.createElement("div", { style: { flex: 1 } },
react_2.default.createElement(empty_1.default, { compact: true, title: "No items" })))));
};
const ColumnsView = ({ items, selection, onChange, defaultSelected, loading, sort }) => {
return (react_2.default.createElement(columns_context_1.ColumnsViewContextProvider, { onChange: onChange, selection: selection, items: items, loading: loading, sort: sort, defaultSelected: defaultSelected },
react_2.default.createElement(ColumnsViewImpl, { loading: loading })));
};
exports.default = ColumnsView;