@hashuplabs/omni-filter
Version:
OmniFilter Search component
61 lines • 3.2 kB
JavaScript
import React from 'react';
export function OmniFilterToken(_a) {
var _b, _c, _d;
var token = _a.token, controller = _a.controller;
return (React.createElement("li", { className: "js-visual-token filtered-search-token", style: {
display: 'flex',
flexShrink: 'unset',
marginTop: '.1em',
marginBottom: '.1em',
} },
React.createElement("div", { className: "selectable", role: "button", style: {
display: 'flex',
backgroundColor: !token.isEmpty ? (token.marked ? '#990000' : '#a0a0a0') : 'initial',
padding: '.2em',
borderRadius: '3px',
marginRight: '5px',
} },
React.createElement("div", { className: "token-name", style: {
display: token.entityName ? 'inline-block' : 'none',
backgroundColor: '#f0f0f0',
color: '#666',
borderRadius: '2px 0 0 2px',
marginRight: '1px',
textTransform: 'capitalize',
// Inherit //
// display:"inline-block",
padding: '2px 7px',
} }, (_b = token === null || token === void 0 ? void 0 : token.entity) === null || _b === void 0 ? void 0 : _b.filter.label),
React.createElement("div", { className: "token-operator", style: {
backgroundColor: '#f0f0f0',
color: '#303030',
marginRight: '1px',
display: token.operator ? 'inline-block' : 'none',
padding: '2px 7px',
} }, (_c = token === null || token === void 0 ? void 0 : token.operator) === null || _c === void 0 ? void 0 : _c.label),
React.createElement("div", { className: "token-value-container", style: {
display: token.values ? 'initial' : 'none',
alignItems: 'center',
backgroundColor: '#f0f0f0',
color: '#303030',
borderRadius: '0 2px 2px 0',
paddingRight: '6px',
padding: '2px 7px',
marginRight: '3px',
} },
React.createElement("div", { className: "token-value", style: {
paddingRight: '0px',
} }, Array.isArray(token === null || token === void 0 ? void 0 : token.values) ? token.values[0].label : (_d = token.values) === null || _d === void 0 ? void 0 : _d.label)),
React.createElement("button", { className: "token-value-remove", title: "remove search parameter", "data-size": "small", style: {
backgroundColor: '#f0f0f0',
color: '#333',
minWidth: '0px',
width: '2em',
display: token.isComplete ? 'flex' : 'none',
}, onClick: function () {
/// Do remove token
token.clear();
controller.removeToken(token);
} }, "X"))));
}
//# sourceMappingURL=OmniFilterToken.js.map