synapse-react-client/dist/containers/widgets/Range.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Range = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
var Range = function (props) {
    var errorText = 'Min value should be less then max value';
    var _a = (0, react_1.useState)(false), error = _a[0], setError = _a[1];
    var _b = (0, react_1.useState)(function () {
        return props.type === 'number' && props.initialValues
            ? props.initialValues
            : (props.initialValues && {
                min: (0, moment_1.default)(props.initialValues.min).format('YYYY-MM-DD'),
                max: (0, moment_1.default)(props.initialValues.max).format('YYYY-MM-DD'),
            }) || {
                min: undefined,
                max: undefined,
            };
    }), values = _b[0], setValues = _b[1];
    var className = props.className ? "range " + props.className : "range";
    var isValid = function (_a, type) {
        var min = _a.min, max = _a.max;
        if (type === void 0) { type = 'number'; }
        if (min === null ||
            min === undefined ||
            max === null ||
            max === undefined) {
            setError(false);
            return true;
        }
        if (type === 'number') {
            if (Number(min) > Number(max)) {
                setError(true);
                return false;
            }
        }
        if (Date.parse(min) > Date.parse(max)) {
            setError(true);
            return false;
        }
        setError(false);
        return true;
    };
    var handleAppyChanges = function (values, callBackFn, type) {
        if (type === void 0) { type = 'number'; }
        if (isValid(values, type)) {
            callBackFn(values);
        }
    };
    return (react_1.default.createElement("div", { className: className, style: { display: 'flex', flexWrap: 'wrap' } },
        react_1.default.createElement("div", { style: { marginRight: '10px' } },
            react_1.default.createElement("input", { key: "range_min", type: props.type, value: values.min, onChange: function (_a) {
                    var target = _a.target;
                    return setValues({ min: target.value, max: values.max });
                } }),
            react_1.default.createElement("div", null, "to"),
            react_1.default.createElement("input", { key: "range_max", type: props.type, value: values.max, onChange: function (_a) {
                    var target = _a.target;
                    return setValues({ min: values.min, max: target.value });
                } })),
        react_1.default.createElement("button", { className: "btn btn-link SRC-noPadding", onClick: function () { return handleAppyChanges(values, props.onChange, props.type); } }, "Apply"),
        error && (react_1.default.createElement("div", { className: "SRC-danger-color" }, props.errorText || errorText))));
};
exports.Range = Range;
//# sourceMappingURL=Range.js.map