flipper-plugin
Version:
Flipper Desktop plugin SDK and components
136 lines • 7.02 kB
JavaScript
"use strict";
/**
* 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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterButton = exports.FilterIcon = void 0;
const react_1 = require("react");
const styled_1 = __importDefault(require("@emotion/styled"));
const react_2 = __importDefault(require("react"));
const antd_1 = require("antd");
const icons_1 = require("@ant-design/icons");
const theme_1 = require("../theme");
const Layout_1 = require("../Layout");
const { Text } = antd_1.Typography;
function FilterIcon({ column, dispatch, }) {
const [input, setInput] = (0, react_1.useState)('');
const { filters } = column;
const isActive = (0, react_1.useMemo)(() => filters?.some((f) => f.enabled), [filters]);
const onAddFilter = (e) => {
e.stopPropagation();
dispatch({
type: 'addColumnFilter',
column: column.key,
value: input,
options: {},
});
setInput('');
};
const menu = (react_2.default.createElement(antd_1.Menu, { onMouseDown: (e) => {
e.stopPropagation(); // prevents interaction accidentally with the Interactive component organizing resizng
} },
react_2.default.createElement(antd_1.Menu.Item, { key: "addFilter" },
react_2.default.createElement(Layout_1.Layout.Right, { gap: true },
react_2.default.createElement(antd_1.Input, { placeholder: "Filter by value", value: input, onChange: (e) => {
e.stopPropagation();
setInput(e.target.value);
}, onClick: (e) => {
e.stopPropagation();
}, onPressEnter: onAddFilter, disabled: false }),
react_2.default.createElement(antd_1.Button, { onClick: onAddFilter, title: "Add filter", type: "ghost", style: { padding: '4px 8px' } },
react_2.default.createElement(icons_1.PlusCircleOutlined, null)))),
react_2.default.createElement(antd_1.Menu.Divider, null),
filters?.length ? (filters?.map((filter, index) => (react_2.default.createElement(antd_1.Menu.Item, { key: index },
react_2.default.createElement(Layout_1.Layout.Right, { center: true },
react_2.default.createElement(FilterCheckbox, { checked: filter.enabled, onClick: (e) => {
e.stopPropagation();
e.preventDefault();
dispatch({
type: 'toggleColumnFilter',
column: column.key,
index,
});
} }, filter.label),
!filter.predefined && (react_2.default.createElement(icons_1.MinusCircleOutlined, { onClick: (e) => {
e.stopPropagation();
dispatch({
type: 'removeColumnFilter',
column: column.key,
index,
});
} }))))))) : (react_2.default.createElement(antd_1.Menu.Item, { disabled: true, key: "nofilters" },
react_2.default.createElement(Text, { type: "secondary", style: { margin: 12 } }, "No active filters"))),
react_2.default.createElement(antd_1.Menu.Divider, null),
react_2.default.createElement(antd_1.Menu.Item, { key: "inverse" },
react_2.default.createElement(Layout_1.Layout.Horizontal, { gap: true, center: true, onClick: (e) => {
e.stopPropagation();
e.preventDefault();
} },
react_2.default.createElement(antd_1.Switch, { checked: !!column.inversed, size: "small", onChange: (inversed) => {
dispatch({
type: 'setColumnFilterInverse',
column: column.key,
inversed,
});
} }),
"Exclude items matching filter")),
react_2.default.createElement(antd_1.Menu.Divider, null),
react_2.default.createElement(antd_1.Menu.Item, { disabled: true, key: "fromselection" },
react_2.default.createElement("div", { style: { textAlign: 'right' } },
react_2.default.createElement(antd_1.Button, { type: "link", style: { fontWeight: 'unset' }, onClick: () => {
dispatch({
type: 'setColumnFilterFromSelection',
column: column.key,
});
} }, "From selection"),
react_2.default.createElement(antd_1.Button, { type: "link", style: { fontWeight: 'unset' }, onClick: () => {
filters?.forEach((f, index) => {
if (!f.enabled) {
dispatch({
type: 'toggleColumnFilter',
column: column.key,
index,
});
}
});
} }, "All"),
react_2.default.createElement(antd_1.Button, { type: "link", style: { fontWeight: 'unset' }, onClick: () => {
filters?.forEach((f, index) => {
if (f.enabled)
dispatch({
type: 'toggleColumnFilter',
column: column.key,
index,
});
});
} }, "None")))));
return (react_2.default.createElement(antd_1.Dropdown, { overlay: menu, trigger: ['click'] },
react_2.default.createElement(exports.FilterButton, { isActive: isActive }, isActive ? react_2.default.createElement(icons_1.FilterFilled, null) : react_2.default.createElement(icons_1.FilterOutlined, null))));
}
exports.FilterIcon = FilterIcon;
exports.FilterButton = styled_1.default.div(({ isActive }) => ({
backgroundColor: theme_1.theme.backgroundWash,
visibility: isActive ? 'visible' : 'hidden',
color: isActive ? theme_1.theme.primaryColor : theme_1.theme.disabledColor,
cursor: 'pointer',
marginRight: 4,
zIndex: 1,
'&:hover': {
color: theme_1.theme.textColorActive,
backgroundColor: theme_1.theme.backgroundWash,
},
}));
const FilterCheckbox = (0, styled_1.default)(antd_1.Checkbox)({
maxWidth: 600,
overflow: 'hidden',
textOverflow: 'ellipsis',
});
//# sourceMappingURL=ColumnFilter.js.map