dm-web-react
Version:
The DM web client with React.
234 lines • 11.8 kB
JavaScript
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 __());
};
})();
import * as React from "react";
import { withTheme } from "styled-components";
import ArrowDown from "../../components/icons/ArrowDown";
import ArrowRight from "../../components/icons/ArrowRight";
import Clear from "../../components/icons/Clear";
import { SelectWrapper, Control, Placeholder, ValueContainer, Menu, Option, IndicatorContainer, ClearIndicator, DropdownIndicator, IconContainer, IconChecked, IconUnchecked, IconIndeterminateChecked, SubLevelOptionSpace, } from "./styled";
import ScrollCaptor from "../internal/ScrollCaptor";
var Select = /** @class */ (function (_super) {
__extends(Select, _super);
function Select(props) {
var _this = _super.call(this, props) || this;
_this.isMenuOpen = function () {
var isMenuOpen = _this.props.isMenuOpen;
if (typeof _this.props.isMenuOpen === "undefined") {
isMenuOpen = _this.state.isMenuOpen;
}
return isMenuOpen;
};
_this.handleSelectMouseDown = function () {
var isMenuOpen = !_this.state.isMenuOpen;
_this.setState({ isMenuOpen: isMenuOpen });
if (isMenuOpen) {
document.addEventListener("mousedown", _this.handleBodyMouseDown);
}
else {
document.removeEventListener("mousedown", _this.handleBodyMouseDown);
}
};
_this.handleBodyMouseDown = function () {
_this.setState({ isMenuOpen: false });
document.removeEventListener("mousedown", _this.handleBodyMouseDown);
};
_this.handleOptionMouseDown = function (e) {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
};
_this.handleClearIndicatorMouseDown = function (e) {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
};
_this.handleClearIndicatorClick = function () {
var isMulti = _this.props.isMulti;
if (isMulti) {
_this.props.onChange([]);
}
else {
_this.props.onChange(null);
}
};
_this.updateValue = function (v) {
var _a = _this.props, isMulti = _a.isMulti, value = _a.value, onChange = _a.onChange;
if (isMulti) {
var newValue = [];
newValue.push.apply(newValue, value);
if (value.indexOf(v) > -1) {
newValue.splice(newValue.indexOf(v), 1);
}
else {
newValue.push(v);
}
onChange(newValue);
}
else {
document.removeEventListener("mousedown", _this.handleBodyMouseDown);
_this.setState({ isMenuOpen: false });
onChange(v);
}
};
_this.updateExpandList = function (i) {
var expandList = _this.state.expandList;
var newExpandList = [];
newExpandList.push.apply(newExpandList, expandList);
if (newExpandList.indexOf(i) > -1) {
newExpandList.splice(newExpandList.indexOf(i), 1);
}
else {
newExpandList.push(i);
}
_this.setState({
expandList: newExpandList,
});
};
_this.handleGroupClick = function (values, type) {
var _a = _this.props, value = _a.value, onChange = _a.onChange;
var newValue = [];
newValue.push.apply(newValue, value);
if (type === "remove") {
values.map(function (v) {
if (value.indexOf(v) > -1) {
newValue.splice(newValue.indexOf(v), 1);
}
});
}
else {
values.map(function (v) {
if (value.indexOf(v) === -1) {
newValue.push(v);
}
});
}
onChange(newValue);
};
_this.renderPlaceholderOrValue = function () {
var _a = _this.props, isMulti = _a.isMulti, value = _a.value, options = _a.options, placeholder = _a.placeholder;
if ((isMulti && value.length) || (!isMulti && value)) {
var labelArr_1 = [];
if (isMulti) {
options.map(function (option) {
if (option.options) {
option.options.map(function (option) {
if (value.indexOf(option.value) > -1) {
labelArr_1.push(option.label);
}
});
}
else {
if (value.indexOf(option.value) > -1) {
labelArr_1.push(option.label);
}
}
});
}
else {
options.map(function (option) {
if (option.options) {
option.options.map(function (option) {
if (value === option.value) {
labelArr_1.push(option.label);
}
});
}
else {
if (value === option.value) {
labelArr_1.push(option.label);
}
}
});
}
return React.createElement("span", null, labelArr_1.join(","));
}
return React.createElement(Placeholder, null, placeholder || "请选择");
};
_this.renderOption = function (option, levelType) {
var _a = _this.props, isMulti = _a.isMulti, value = _a.value;
return (React.createElement(Option, { key: option.value, onMouseDown: _this.handleOptionMouseDown, onClick: function () { return _this.updateValue(option.value); } },
levelType && levelType === 2 ? React.createElement(SubLevelOptionSpace, null) : null,
React.createElement(IconContainer, null),
isMulti ? (React.createElement("span", null,
value.indexOf(option.value) > -1 ? React.createElement(IconChecked, null) : React.createElement(IconUnchecked, null),
"\u00A0")) : null,
React.createElement("span", { title: option.label + "" }, option.label)));
};
_this.renderOptions = function () {
var _a = _this.props, isMulti = _a.isMulti, value = _a.value, options = _a.options;
var expandList = _this.state.expandList;
return options.map(function (option, index) {
if (option.options) {
var isExpand = expandList.indexOf(index) > -1;
var checkedCount_1 = 0;
var groupValues_1 = [];
option.options.map(function (option) {
groupValues_1.push(option.value);
if (isMulti && value.indexOf(option.value) > -1) {
checkedCount_1 = checkedCount_1 + 1;
}
});
return (React.createElement("div", { key: index },
React.createElement(Option, { onMouseDown: _this.handleOptionMouseDown },
React.createElement(IconContainer, { onClick: function () { return _this.updateExpandList(index); } }, isExpand ? React.createElement(ArrowDown, null) : React.createElement(ArrowRight, null)),
isMulti ? (React.createElement("span", { onClick: function () { return _this.handleGroupClick(groupValues_1, option.options && checkedCount_1 === option.options.length ? "remove" : "add"); } },
checkedCount_1 === 0 ? React.createElement(IconUnchecked, null) : checkedCount_1 === option.options.length ? React.createElement(IconChecked, null) : React.createElement(IconIndeterminateChecked, null),
"\u00A0")) : null,
React.createElement("span", { title: option.label + "", onClick: function () { return _this.handleGroupClick(groupValues_1, option.options && checkedCount_1 === option.options.length ? "remove" : "add"); } }, option.label)),
React.createElement("div", null, isExpand ? option.options.map(function (option) { return _this.renderOption(option, 2); }) : null)));
}
else {
return _this.renderOption(option);
}
});
};
_this.renderMenu = function () {
var options = _this.props.options;
return (React.createElement(ScrollCaptor, { isEnabled: true },
React.createElement(Menu, null, options.length ? _this.renderOptions() : React.createElement("div", { onMouseDown: _this.handleOptionMouseDown, style: { padding: "10px 0" } }))));
};
_this.renderClearIndicator = function () {
var _a = _this.props, isMulti = _a.isMulti, value = _a.value;
if ((isMulti && value.length) || (!isMulti && value)) {
return (React.createElement(ClearIndicator, { onMouseDown: _this.handleClearIndicatorMouseDown, onClick: _this.handleClearIndicatorClick },
React.createElement(Clear, { width: "12", height: "12" })));
}
return null;
};
_this.renderDropdownIndicator = function () {
var isMenuOpen = _this.isMenuOpen();
return (React.createElement(DropdownIndicator, { active: isMenuOpen },
React.createElement(ArrowDown, null)));
};
_this.state = {
isMenuOpen: false,
expandList: [],
};
return _this;
}
Select.prototype.componentWillUnmount = function () {
document.removeEventListener("mousedown", this.handleBodyMouseDown);
};
Select.prototype.render = function () {
var isMenuOpen = this.isMenuOpen();
return (React.createElement(SelectWrapper, { onMouseDown: this.handleSelectMouseDown },
React.createElement(Control, { tabIndex: 0 },
React.createElement(ValueContainer, null, this.renderPlaceholderOrValue()),
React.createElement(IndicatorContainer, null,
this.renderClearIndicator(),
this.renderDropdownIndicator())),
isMenuOpen ? React.createElement("div", null, this.renderMenu()) : null));
};
return Select;
}(React.PureComponent));
export default withTheme(Select);
//# sourceMappingURL=Select.js.map