dm-web-react
Version:
The DM web client with React.
158 lines • 9.85 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
}
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import * as React from "react";
import * as ReactPopover from "react-popover";
import styled, { withTheme } from "styled-components";
import Checkbox from "./Checkbox";
import ArrowDown from "../icons/ArrowDown";
var ExtraReactPopover = styled(ReactPopover)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .Popover-body {\n background: ", ";\n box-shadow: 0 4px 10px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n }\n .Popover-tip {\n fill: ", ";\n }\n"], ["\n .Popover-body {\n background: ", ";\n box-shadow: 0 4px 10px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n }\n .Popover-tip {\n fill: ", ";\n }\n"])), function (props) { return props.theme.checkbox_popover.default_body_background; }, function (props) { return props.theme.checkbox_popover.default_body_boxShadowColor; }, function (props) { return props.theme.checkbox_popover.default_body_borderColor; }, function (props) { return props.theme.checkbox_popover.default_tip_color; });
var Label = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 24px;\n margin: 1px;\n line-height: 24px;\n color: ", ";\n background: ", ";\n border: 1px solid ", ";\n font-size: 12px;\n border-radius: 4px;\n cursor: pointer;\n user-select: none;\n display: inline-block;\n"], ["\n height: 24px;\n margin: 1px;\n line-height: 24px;\n color: ", ";\n background: ", ";\n border: 1px solid ", ";\n font-size: 12px;\n border-radius: 4px;\n cursor: pointer;\n user-select: none;\n display: inline-block;\n"])), function (props) { return props.theme.checkbox_popover.default_label_color; }, function (props) { return props.theme.checkbox_popover.default_label_background; }, function (props) { return props.theme.checkbox_popover.default_label_borderColor; });
var LabelText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 24px;\n padding: 0 8px;\n line-height: 24px;\n vertical-align: top;\n display: inline-block;\n"], ["\n height: 24px;\n padding: 0 8px;\n line-height: 24px;\n vertical-align: top;\n display: inline-block;\n"])));
var LabelIcon = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 24px;\n margin: 0 0 0 -8px;\n vertical-align: top;\n display: inline-block;\n"], ["\n height: 24px;\n margin: 0 0 0 -8px;\n vertical-align: top;\n display: inline-block;\n"])));
var CheckboxGroupPopover = /** @class */ (function (_super) {
__extends(CheckboxGroupPopover, _super);
function CheckboxGroupPopover(props) {
var _this = _super.call(this, props) || this;
_this.handleMouseEnter = function (index) {
if (_this.timer) {
window.clearTimeout(_this.timer);
}
_this.setState({ openIndex: index });
};
_this.handleMouseLeave = function () {
_this.timer = window.setTimeout(function () { return _this.setState({ openIndex: -1 }); }, 100);
};
_this.handleLabelMouseDown = function (options) {
var value = _this.state.value;
var hasFlag = true;
options.map(function (option) {
if (value.indexOf(option.value) < 0) {
hasFlag = false;
}
});
if (hasFlag) {
options.map(function (option) {
value.splice(value.indexOf(option.value), 1);
});
}
else {
options.map(function (option) {
if (value.indexOf(option.value) < 0) {
value.push(option.value);
}
});
}
_this.setState({});
var onChange = _this.props.onChange;
if (onChange) {
onChange(value);
}
};
_this.toggleOption = function (option) {
var optionIndex = _this.state.value.indexOf(option.value);
var value = _this.state.value.slice();
if (optionIndex === -1) {
value.push(option.value);
}
else {
value.splice(optionIndex, 1);
}
if (!("value" in _this.props)) {
_this.setState({ value: value });
}
var onChange = _this.props.onChange;
if (onChange) {
onChange(value);
}
};
_this.state = {
value: props.value || props.defaultValue || [],
openIndex: -1,
};
return _this;
}
CheckboxGroupPopover.prototype.componentWillReceiveProps = function (nextProps) {
if ("value" in nextProps) {
this.setState({
value: nextProps.value || [],
});
}
};
CheckboxGroupPopover.prototype.render = function () {
var _this = this;
var _a = this.props, type = _a.type, options = _a.options, checkboxStyle = _a.checkboxStyle, theme = _a.theme;
var value = this.state.value;
return (React.createElement("span", null, options.map(function (option, index) {
var formatOptions = _this.getOptions(option.options);
var valueCount = 0;
formatOptions.map(function (formatOption) {
if (value.indexOf(formatOption.value) >= 0) {
valueCount = valueCount + 1;
}
});
return (React.createElement(ExtraReactPopover, { key: index, place: "column", enterExitTransitionDurationMs: 0, isOpen: _this.state.openIndex === index, body: React.createElement("div", { onMouseEnter: function () { return _this.handleMouseEnter(index); }, onMouseLeave: function () { return _this.handleMouseLeave(); }, style: { padding: "10px" } }, formatOptions.map(function (formatOption, formatIndex) { return (React.createElement(Checkbox, { key: formatIndex, type: type, checked: value.indexOf(formatOption.value) > -1, onChange: function () { return _this.toggleOption(formatOption); }, style: __assign({ margin: "1px" }, checkboxStyle) }, formatOption.label)); })) },
React.createElement(Label, { onMouseDown: function () { return _this.handleLabelMouseDown(formatOptions); }, onMouseEnter: function () { return _this.handleMouseEnter(index); }, onMouseLeave: function () { return _this.handleMouseLeave(); }, style: {
color: valueCount === 0
? theme.checkbox_popover.default_label_color
: valueCount === formatOptions.length
? theme.checkbox_popover.active_label_color
: theme.checkbox_popover.indeterminate_label_color,
background: valueCount === 0
? theme.checkbox_popover.default_label_background
: valueCount === formatOptions.length
? theme.checkbox_popover.active_label_background
: theme.checkbox_popover.indeterminate_label_background,
border: "1px solid " + (valueCount === 0
? theme.checkbox_popover.default_label_borderColor
: valueCount === formatOptions.length
? theme.checkbox_popover.active_label_borderColor
: theme.checkbox_popover.indeterminate_label_borderColor),
} },
React.createElement(LabelText, null, option.label),
React.createElement(LabelIcon, { style: { color: valueCount === formatOptions.length ? "#fff" : "#999" } },
React.createElement(ArrowDown, null)))));
})));
};
CheckboxGroupPopover.prototype.getOptions = function (options) {
// https://github.com/Microsoft/TypeScript/issues/7960
return options.map(function (option) {
if (typeof option === "string") {
return {
label: option,
value: option,
};
}
return option;
});
};
return CheckboxGroupPopover;
}(React.PureComponent));
export default withTheme(CheckboxGroupPopover);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=CheckboxGroupPopover.js.map