flipper-plugin
Version:
Flipper Desktop plugin SDK and components
142 lines • 6.61 kB
JavaScript
;
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (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 });
exports.DataList = void 0;
const react_1 = __importStar(require("react"));
const DataFormatter_1 = require("./DataFormatter");
const Layout_1 = require("./Layout");
const antd_1 = require("antd");
const DataTable_1 = require("./data-table/DataTable");
const icons_1 = require("@ant-design/icons");
const theme_1 = require("./theme");
const styled_1 = __importDefault(require("@emotion/styled"));
const useAssertStableRef_1 = require("../utils/useAssertStableRef");
const useMakeStableCallback_1 = require("../utils/useMakeStableCallback");
const { Text } = antd_1.Typography;
exports.DataList = Object.assign(function ({ onSelect: baseOnSelect, selection, className, style, items, onRenderItem, enableArrow, idAttribute, titleAttribute, descriptionAttribute, ...tableProps }) {
// if a tableManagerRef is provided, we piggy back on that same ref
// eslint-disable-next-line
const tableManagerRef = tableProps.tableManagerRef ??
(0, react_1.createRef)();
(0, useAssertStableRef_1.useAssertStableRef)(onRenderItem, 'onRenderItem');
(0, useAssertStableRef_1.useAssertStableRef)(enableArrow, 'enableArrow');
const onSelect = (0, useMakeStableCallback_1.useMakeStableCallback)(baseOnSelect);
const handleSelect = (0, react_1.useCallback)((item) => {
if (!item) {
onSelect?.(undefined, undefined);
}
else {
const id = `${item[idAttribute]}`;
if (id == null) {
throw new Error(`No valid identifier for attribute ${idAttribute}`);
}
onSelect?.(id, item);
}
}, [onSelect, idAttribute]);
(0, react_1.useEffect)(() => {
if (selection) {
tableManagerRef.current?.selectItemById(selection);
}
else {
tableManagerRef.current?.clearSelection();
}
}, [selection, tableManagerRef]);
const dataListColumns = (0, react_1.useMemo)(() => [
{
key: idAttribute,
wrap: true,
onRender(item, selected, index) {
return onRenderItem ? (onRenderItem(item, selected, index)) : (react_1.default.createElement(exports.DataList.Item
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
, {
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
title: item[titleAttribute],
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
description: item[descriptionAttribute], enableArrow: enableArrow }));
},
},
], [
onRenderItem,
enableArrow,
titleAttribute,
descriptionAttribute,
idAttribute,
]);
return (react_1.default.createElement(Layout_1.Layout.Container, { style: style, className: className, grow: true },
react_1.default.createElement(DataTable_1.DataTable, { ...tableProps, tableManagerRef: tableManagerRef,
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
records: Array.isArray(items) ? items : undefined,
// TODO: Fix this the next time the file is edited.
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
dataSource: Array.isArray(items) ? undefined : items, recordsKey: idAttribute, columns: dataListColumns, onSelect: handleSelect })));
}, {
Item: (0, react_1.memo)(({ title, description, enableArrow }) => {
return (react_1.default.createElement(Layout_1.Layout.Horizontal, { center: true, grow: true, shrink: true, padv: true },
react_1.default.createElement(Layout_1.Layout.Container, { grow: true, shrink: true },
typeof title === 'string' ? (react_1.default.createElement(Text, { strong: true, ellipsis: true }, DataFormatter_1.DataFormatter.format(title))) : (title),
typeof description === 'string' ? (react_1.default.createElement(Text, { type: "secondary", ellipsis: true }, DataFormatter_1.DataFormatter.format(description))) : (description)),
enableArrow && (react_1.default.createElement(ArrowWrapper, null,
react_1.default.createElement(icons_1.RightOutlined, null)))));
}),
});
exports.DataList.defaultProps = {
type: 'default',
scrollable: true,
enableSearchbar: false,
enableColumnHeaders: false,
enableArrow: true,
enableContextMenu: false,
enableMultiSelect: false,
enableHorizontalScroll: false,
idAttribute: 'id',
titleAttribute: 'title',
descriptionAttribute: 'description',
};
exports.DataList.Item.defaultProps = {
enableArrow: true,
};
const ArrowWrapper = styled_1.default.div({
flex: 0,
paddingLeft: theme_1.theme.space.small,
'.anticon': {
lineHeight: '14px',
},
});
//# sourceMappingURL=DataList.js.map