choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
357 lines (302 loc) • 11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _get3 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _reactDom = require("react-dom");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _omit = _interopRequireDefault(require("lodash/omit"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _mobx = require("mobx");
var _mobxReact = require("mobx-react");
var _Trigger = _interopRequireDefault(require("../trigger/Trigger"));
var _TextField2 = require("../text-field/TextField");
var _autobind = _interopRequireDefault(require("../_util/autobind"));
var _icon = _interopRequireDefault(require("../icon"));
var _TaskRunner = _interopRequireDefault(require("../_util/TaskRunner"));
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = (0, _getPrototypeOf2["default"])(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return (0, _possibleConstructorReturn2["default"])(this, result);
};
}
var BUILT_IN_PLACEMENTS = {
bottomLeft: {
points: ['tl', 'bl'],
offset: [0, 4],
overflow: {
adjustX: 1,
adjustY: 1
}
},
bottomRight: {
points: ['tr', 'br'],
offset: [0, 4],
overflow: {
adjustX: 1,
adjustY: 1
}
},
topLeft: {
points: ['bl', 'tl'],
offset: [0, -4],
overflow: {
adjustX: 1,
adjustY: 1
}
},
topRight: {
points: ['br', 'tr'],
offset: [0, -4],
overflow: {
adjustX: 1,
adjustY: 1
}
}
};
var TriggerField =
/*#__PURE__*/
function (_TextField) {
(0, _inherits2["default"])(TriggerField, _TextField);
var _super = _createSuper(TriggerField);
function TriggerField(props, context) {
var _this;
(0, _classCallCheck2["default"])(this, TriggerField);
_this = _super.call(this, props, context);
_this.popupTask = new _TaskRunner["default"]();
_this.setPopup(false);
return _this;
}
(0, _createClass2["default"])(TriggerField, [{
key: "isValidationMessageHidden",
value: function isValidationMessageHidden(message) {
return (0, _get3["default"])((0, _getPrototypeOf2["default"])(TriggerField.prototype), "isValidationMessageHidden", this).call(this, message) || this.popup;
}
}, {
key: "setPopup",
value: function setPopup(statePopup) {
this.statePopup = statePopup;
}
}, {
key: "getRootDomNode",
value: function getRootDomNode() {
return (0, _reactDom.findDOMNode)(this);
}
}, {
key: "getOtherProps",
value: function getOtherProps() {
return (0, _omit["default"])((0, _get3["default"])((0, _getPrototypeOf2["default"])(TriggerField.prototype), "getOtherProps", this).call(this), ['popupContent', 'popupCls', 'editable', 'trigger', 'triggerShowDelay', 'triggerHiddenDelay', 'onPopupHiddenChange', 'getPopupContainer', 'extraFooterPlacement', 'renderExtraFooter', 'treeDefaultExpandedKeys', 'treeDefaultExpandAll']);
}
}, {
key: "getPopupProps",
value: function getPopupProps() {
return {};
}
}, {
key: "getWrappedEditor",
value: function getWrappedEditor() {
var _this2 = this;
var prefixCls = this.prefixCls,
_this$props = this.props,
popupCls = _this$props.popupCls,
popupStyle = _this$props.popupStyle,
popupContent = _this$props.popupContent,
hidden = _this$props.hidden,
trigger = _this$props.trigger,
triggerShowDelay = _this$props.triggerShowDelay,
triggerHiddenDelay = _this$props.triggerHiddenDelay,
getPopupContainer = _this$props.getPopupContainer;
var content;
if (popupContent !== undefined) {
if (popupContent instanceof Function) {
content = popupContent(this.getPopupProps());
} else {
content = popupContent;
}
} else {
content = this.getPopupContent();
}
return _react["default"].createElement(_Trigger["default"], {
ref: function ref(node) {
return _this2.trigger = node;
},
action: this.isReadOnly() || this.isDisabled() ? [] : trigger,
focusDelay: triggerShowDelay,
blurDelay: triggerHiddenDelay,
mouseEnterDelay: triggerShowDelay,
mouseLeaveDelay: triggerHiddenDelay,
prefixCls: prefixCls,
popupCls: popupCls,
popupStyle: popupStyle,
popupContent: content,
popupPlacement: "bottomLeft",
popupHidden: hidden || !this.popup,
builtinPlacements: BUILT_IN_PLACEMENTS,
onPopupAnimateAppear: this.handlePopupAnimateAppear,
onPopupAnimateEnd: this.handlePopupAnimateEnd,
onPopupHiddenChange: this.handlePopupHiddenChange,
getPopupStyleFromAlign: this.getPopupStyleFromAlign,
getRootDomNode: this.getRootDomNode,
getPopupContainer: getPopupContainer
}, this.getEditor());
}
}, {
key: "getWrapperClassNames",
value: function getWrapperClassNames() {
var _get2, _ref;
var prefixCls = this.prefixCls;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return (_get2 = (0, _get3["default"])((0, _getPrototypeOf2["default"])(TriggerField.prototype), "getWrapperClassNames", this)).call.apply(_get2, [this].concat(args, [(_ref = {}, (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-expand"), this.popup), (0, _defineProperty2["default"])(_ref, "".concat(prefixCls, "-not-editable"), !this.isDisabled() && !this.editable), _ref)]));
}
}, {
key: "getDefaultSuffix",
value: function getDefaultSuffix() {
var prefixCls = this.prefixCls;
return _react["default"].createElement(_icon["default"], {
type: this.getTriggerIconFont(),
className: "".concat(prefixCls, "-trigger")
});
}
}, {
key: "handleTagAnimateEnd",
value: function handleTagAnimateEnd() {
this.forcePopupAlign();
}
}, {
key: "handlePopupMouseDown",
value: function handlePopupMouseDown(e) {
e.preventDefault();
var _this$props$onMouseDo = this.props.onMouseDown,
onMouseDown = _this$props$onMouseDo === void 0 ? _noop["default"] : _this$props$onMouseDo;
onMouseDown(e);
}
}, {
key: "handlePopupHiddenChange",
value: function handlePopupHiddenChange(hidden) {
this.setPopup(!hidden);
var _this$props$onPopupHi = this.props.onPopupHiddenChange,
onPopupHiddenChange = _this$props$onPopupHi === void 0 ? _noop["default"] : _this$props$onPopupHi;
onPopupHiddenChange(hidden);
}
}, {
key: "forcePopupAlign",
value: function forcePopupAlign() {
if (this.trigger) {
this.trigger.forcePopupAlign();
}
}
}, {
key: "expand",
value: function expand() {
var _this3 = this;
this.popupTask.cancel();
if (!this.isReadOnly() && !this.popup) {
this.popupTask.delay(this.props.triggerShowDelay, function () {
_this3.setPopup(true);
});
}
}
}, {
key: "collapse",
value: function collapse() {
var _this4 = this;
this.popupTask.cancel();
if (!this.isReadOnly() && this.popup) {
this.popupTask.delay(this.props.triggerHiddenDelay, function () {
_this4.setPopup(false);
});
}
}
}, {
key: "popup",
get: function get() {
return this.statePopup;
}
}]);
return TriggerField;
}(_TextField2.TextField);
exports["default"] = TriggerField;
TriggerField.displayName = 'TriggerField';
TriggerField.propTypes = (0, _objectSpread2["default"])({
/**
* 下拉框的自定义内容
*/
popupContent: _propTypes["default"].element,
/**
* 下拉框的自定义样式名
*/
popupCls: _propTypes["default"].string,
/**
* 下拉框的内链样式
*/
popupStyle: _propTypes["default"].object,
/**
* 触发下拉框的方式
* 可选值：click | focus | hover | contextMenu
*/
trigger: _mobxReact.PropTypes.arrayOrObservableArrayOf(_propTypes["default"].string),
/**
* 下拉框显示延迟
* @defualt 150
*/
triggerShowDelay: _propTypes["default"].number,
/**
* 下拉框隐藏延迟
* @defualt 50
*/
triggerHiddenDelay: _propTypes["default"].number,
/**
* 下拉框变化钩子
*/
onPopupHiddenChange: _propTypes["default"].func,
/**
* 定义浮层的容器，默认为 body
*/
getPopupContainer: _propTypes["default"].func
}, _TextField2.TextField.propTypes);
TriggerField.defaultProps = (0, _objectSpread2["default"])({}, _TextField2.TextField.defaultProps, {
suffixCls: 'trigger',
clearButton: true,
trigger: ['focus', 'click'],
triggerShowDelay: 150,
triggerHiddenDelay: 50
});
(0, _tslib.__decorate)([_mobx.observable], TriggerField.prototype, "statePopup", void 0);
(0, _tslib.__decorate)([_mobx.computed], TriggerField.prototype, "popup", null);
(0, _tslib.__decorate)([_mobx.action], TriggerField.prototype, "setPopup", null);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "getRootDomNode", null);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "handleTagAnimateEnd", null);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "handlePopupMouseDown", null);
(0, _tslib.__decorate)([_autobind["default"]], TriggerField.prototype, "handlePopupHiddenChange", null);
//# sourceMappingURL=TriggerField.js.map