synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
71 lines • 4.24 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RangeFacetFilter = exports.RadioValuesEnum = void 0;
var tslib_1 = require("tslib");
var React = (0, tslib_1.__importStar)(require("react"));
var Range_1 = require("../Range");
var RangeSlider_1 = require("../RangeSlider");
var SynapseConstants_1 = require("../../../utils/SynapseConstants");
var FacetFilterHeader_1 = require("./FacetFilterHeader");
var RadioGroup_1 = require("../RadioGroup");
var react_1 = require("react");
var core_1 = require("@material-ui/core");
var RadioValuesEnum;
(function (RadioValuesEnum) {
RadioValuesEnum["NOT_SET"] = "org.sagebionetworks.UNDEFINED_NULL_NOTSET";
RadioValuesEnum["RANGE"] = "RANGE";
RadioValuesEnum["ANY"] = "";
})(RadioValuesEnum = exports.RadioValuesEnum || (exports.RadioValuesEnum = {}));
var RangeFacetFilter = function (_a) {
var facetResult = _a.facetResult, columnModel = _a.columnModel, onChange = _a.onChange, facetAliases = _a.facetAliases, _b = _a.collapsed, collapsed = _b === void 0 ? false : _b;
var _c = (0, react_1.useState)(collapsed), isCollapsed = _c[0], setIsCollapsed = _c[1];
var options = [
{ label: SynapseConstants_1.FRIENDLY_VALUE_NOT_SET, value: RadioValuesEnum.NOT_SET },
{ label: 'Any', value: RadioValuesEnum.ANY },
{ label: 'Range', value: RadioValuesEnum.RANGE },
];
var columnMin = facetResult.columnMin, columnMax = facetResult.columnMax, selectedMin = facetResult.selectedMin, selectedMax = facetResult.selectedMax; // the upper bound of the selected range
var hasAnyValue = !selectedMin && !selectedMax;
selectedMin = selectedMin || columnMin;
selectedMax = selectedMax || columnMax;
var rangeType = columnModel.columnType === 'DOUBLE' ? 'number' : 'date';
var getRadioValue = function (min, isAnyValue) {
if (isAnyValue) {
return RadioValuesEnum.ANY;
}
else if (min === SynapseConstants_1.VALUE_NOT_SET) {
return RadioValuesEnum.NOT_SET;
}
return RadioValuesEnum.RANGE;
};
var handleRadioGroupChange = function (radioValue, onChangeCallback) {
setRadioValue(radioValue);
if (radioValue !== RadioValuesEnum.RANGE) {
onChangeCallback([radioValue, radioValue]);
}
};
var _d = (0, react_1.useState)(getRadioValue(selectedMin, hasAnyValue)), radioValue = _d[0], setRadioValue = _d[1];
var result = (React.createElement("div", null,
React.createElement(FacetFilterHeader_1.FacetFilterHeader, { isCollapsed: isCollapsed, label: columnModel.name, onClick: function (isCollapsed) { return setIsCollapsed(isCollapsed); }, facetAliases: facetAliases }),
React.createElement(core_1.Collapse, { in: !isCollapsed },
React.createElement(RadioGroup_1.RadioGroup, { value: radioValue, id: "rangeSelector", options: options, onChange: function (radioValue) {
return handleRadioGroupChange(radioValue, onChange);
} }),
radioValue === RadioValuesEnum.RANGE &&
(columnMin === columnMax ? (React.createElement("label", null, columnMax)) : (React.createElement(React.Fragment, null,
columnModel.columnType === 'INTEGER' && (React.createElement(RangeSlider_1.RangeSlider, { key: "RangeSlider", domain: [columnMin, columnMax], initialValues: { min: selectedMin, max: selectedMax }, step: 1, doUpdateOnApply: true, onChange: function (values) {
return onChange([values.min, values.max]);
} },
") ",
'>')),
(columnModel.columnType === 'DATE' ||
columnModel.columnType === 'DOUBLE') && (React.createElement(Range_1.Range, { key: "Range", initialValues: {
min: selectedMin,
max: selectedMax,
}, type: rangeType, onChange: function (values) {
return onChange([values.min, values.max]);
} }))))))));
return result;
};
exports.RangeFacetFilter = RangeFacetFilter;
//# sourceMappingURL=RangeFacetFilter.js.map