@seafile/seafile-editor 0.3.139 → 0.3.140

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/components/toolbar/header-list.js +59 -53
  2. package/package.json +1 -1
package/dist/components/toolbar/header-list.js CHANGED
@@ -12,23 +12,52 @@ var HeaderList = /*#__PURE__*/function (_React$PureComponent) {
12
12
  var _this;
13
13
  _classCallCheck(this, HeaderList);
14
14
  _this = _super.call(this, props);
15
- _this.handleClick = function (event) {
16
- if (_this.props.disabled) return;
17
- var container = _this.getContainer();
18
- if (container.contains(event.target)) {
19
- _this.toggle();
15
+ _this.onHideHeaderMenu = function (e) {
16
+ var menu = _this.menu;
17
+ var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
18
+ if (clickIsInMenu) return;
19
+ _this.setState({
20
+ dropdownOpen: false
21
+ }, function () {
22
+ _this.unregisterEventHandler();
23
+ });
24
+ };
25
+ _this.registerEventHandler = function () {
26
+ document.addEventListener('mousedown', _this.onHideHeaderMenu, true);
27
+ };
28
+ _this.unregisterEventHandler = function () {
29
+ document.removeEventListener('mousedown', _this.onHideHeaderMenu, true);
30
+ };
31
+ _this.onToggleClick = function (event) {
32
+ event.stopPropagation();
33
+ event.nativeEvent.stopImmediatePropagation();
34
+ var dropdownOpen = !_this.state.dropdownOpen;
35
+ if (dropdownOpen) {
36
+ _this.setState({
37
+ dropdownOpen: dropdownOpen
38
+ }, function () {
39
+ _this.registerEventHandler();
40
+ });
20
41
  } else {
21
- if (_this.state.dropdownOpen) {
22
- _this.setState({
23
- dropdownOpen: !_this.state.dropdownOpen
24
- });
25
- }
42
+ _this.setState({
43
+ dropdownOpen: dropdownOpen
44
+ }, function () {
45
+ _this.unregisterEventHandler();
46
+ });
26
47
  }
27
48
  };
28
- _this.toggle = function () {
29
- _this.setState({
30
- dropdownOpen: !_this.state.dropdownOpen
31
- });
49
+ _this.onHeaderClick = function (type) {
50
+ return function (event) {
51
+ _this.props.onClickHeader(event, type);
52
+ _this.setState({
53
+ dropdownOpen: false
54
+ }, function () {
55
+ _this.unregisterEventHandler();
56
+ });
57
+ };
58
+ };
59
+ _this.setMenuRef = function (ref) {
60
+ _this.menu = ref;
32
61
  };
33
62
  _this.state = {
34
63
  dropdownOpen: false
@@ -40,72 +69,49 @@ var HeaderList = /*#__PURE__*/function (_React$PureComponent) {
40
69
  value: function getContainer() {
41
70
  return ReactDOM.findDOMNode(this);
42
71
  }
43
- }, {
44
- key: "componentDidMount",
45
- value: function componentDidMount() {
46
- document.addEventListener('click', this.handleClick);
47
- }
48
- }, {
49
- key: "componentWillUnmount",
50
- value: function componentWillUnmount() {
51
- document.removeEventListener('click', this.handleClick);
52
- }
53
72
  }, {
54
73
  key: "render",
55
74
  value: function render() {
56
- var _this2 = this;
57
- /*
58
- * here need to use click event in DropdownItem instead of onMouseDown, reactStrap listen click, keyUp, to trigger toggle function,
59
- * if we listen mouseDown event the tool bar will render,the position of the component will change
60
- * and then the click event of this component will not be triggered
61
- * */
75
+ var disabled = this.props.disabled;
76
+ var dropdownOpen = this.state.dropdownOpen;
77
+ var hoverClass = 'header-list-body-hover';
78
+ var openClass = 'header-list-body-highlight';
79
+ var className = "list-body ".concat(disabled ? '' : hoverClass, " header-list-body-").concat(dropdownOpen ? openClass : '', ")");
62
80
  return /*#__PURE__*/React.createElement("div", {
63
81
  className: 'header-list'
64
82
  }, /*#__PURE__*/React.createElement("div", {
65
- className: 'list-body ' + (this.props.disabled ? '' : 'header-list-body-hover') + (this.state.dropdownOpen ? ' header-list-body-highlight' : '')
83
+ className: className,
84
+ onMouseDown: this.onToggleClick
66
85
  }, /*#__PURE__*/React.createElement("div", {
67
86
  className: 'list-title'
68
87
  }, this.props.t(this.props.headerType)), /*#__PURE__*/React.createElement("div", {
69
88
  className: 'list-caret'
70
89
  }, /*#__PURE__*/React.createElement("i", {
71
90
  className: this.state.dropdownOpen ? 'iconfont icon-caret-up' : 'iconfont icon-drop-down'
72
- }))), this.state.dropdownOpen && /*#__PURE__*/React.createElement("div", {
91
+ }))), dropdownOpen && /*#__PURE__*/React.createElement("div", {
92
+ ref: this.setMenuRef,
73
93
  className: 'list-dropdown'
74
94
  }, /*#__PURE__*/React.createElement("div", {
75
95
  className: 'list-dropdown-item',
76
- onClick: function onClick(event) {
77
- _this2.props.onClickHeader(event, 'paragraph');
78
- }
96
+ onClick: this.onHeaderClick('paragraph')
79
97
  }, this.props.t('paragraph')), /*#__PURE__*/React.createElement("div", {
80
98
  className: 'list-dropdown-item',
81
- onClick: function onClick(event) {
82
- _this2.props.onClickHeader(event, 'header_one');
83
- }
99
+ onClick: this.onHeaderClick('header_one')
84
100
  }, this.props.t('header_one')), /*#__PURE__*/React.createElement("div", {
85
101
  className: 'list-dropdown-item',
86
- onClick: function onClick(event) {
87
- _this2.props.onClickHeader(event, 'header_two');
88
- }
102
+ onClick: this.onHeaderClick('header_two')
89
103
  }, this.props.t('header_two')), /*#__PURE__*/React.createElement("div", {
90
104
  className: 'list-dropdown-item',
91
- onClick: function onClick(event) {
92
- _this2.props.onClickHeader(event, 'header_three');
93
- }
105
+ onClick: this.onHeaderClick('header_three')
94
106
  }, this.props.t('header_three')), /*#__PURE__*/React.createElement("div", {
95
107
  className: 'list-dropdown-item',
96
- onClick: function onClick(event) {
97
- _this2.props.onClickHeader(event, 'header_four');
98
- }
108
+ onClick: this.onHeaderClick('header_four')
99
109
  }, this.props.t('header_four')), /*#__PURE__*/React.createElement("div", {
100
110
  className: 'list-dropdown-item',
101
- onClick: function onClick(event) {
102
- _this2.props.onClickHeader(event, 'header_five');
103
- }
111
+ onClick: this.onHeaderClick('header_five')
104
112
  }, this.props.t('header_five')), /*#__PURE__*/React.createElement("div", {
105
113
  className: 'list-dropdown-item',
106
- onClick: function onClick(event) {
107
- _this2.props.onClickHeader(event, 'header_six');
108
- }
114
+ onClick: this.onHeaderClick('header_six')
109
115
  }, this.props.t('header_six'))));
110
116
  }
111
117
  }]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/seafile-editor",
3
- "version": "0.3.139",
3
+ "version": "0.3.140",
4
4
  "private": false,
5
5
  "dependencies": {
6
6
  "@seafile/react-image-lightbox": "2.0.4",