1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 |
|
6 | var _class, _temp;
|
7 |
|
8 | import React, { Component } from 'react';
|
9 | import PropTypes from 'prop-types';
|
10 | import cx from 'classnames';
|
11 | import Menu from '../../menu';
|
12 | import { func, obj, dom } from '../../util';
|
13 |
|
14 | var Item = Menu.Item,
|
15 | CheckboxItem = Menu.CheckboxItem;
|
16 | var bindCtx = func.bindCtx;
|
17 | var pickOthers = obj.pickOthers;
|
18 | var getOffset = dom.getOffset;
|
19 | var TransferItem = (_temp = _class = function (_Component) {
|
20 | _inherits(TransferItem, _Component);
|
21 |
|
22 | function TransferItem(props) {
|
23 | _classCallCheck(this, TransferItem);
|
24 |
|
25 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
26 |
|
27 | _this.state = {
|
28 | highlight: false
|
29 | };
|
30 |
|
31 | bindCtx(_this, ['getItemDOM', 'handleClick', 'handleDragStart', 'handleDragOver', 'handleDragEnd', 'handleDrop']);
|
32 | return _this;
|
33 | }
|
34 |
|
35 | TransferItem.prototype.componentDidMount = function componentDidMount() {
|
36 | var _this2 = this;
|
37 |
|
38 | if (this.props.needHighlight) {
|
39 | this.addHighlightTimer = setTimeout(function () {
|
40 | _this2.setState({
|
41 | highlight: true
|
42 | });
|
43 | }, 1);
|
44 | this.removeHighlightTimer = setTimeout(function () {
|
45 | _this2.setState({
|
46 | highlight: false
|
47 | });
|
48 | }, 201);
|
49 | }
|
50 | };
|
51 |
|
52 | TransferItem.prototype.componentWillUnmount = function componentWillUnmount() {
|
53 | clearTimeout(this.addHighlightTimer);
|
54 | clearTimeout(this.removeHighlightTimer);
|
55 | };
|
56 |
|
57 | TransferItem.prototype.getItemDOM = function getItemDOM(ref) {
|
58 | this.item = ref;
|
59 | };
|
60 |
|
61 | TransferItem.prototype.handleClick = function handleClick() {
|
62 | var _props = this.props,
|
63 | onClick = _props.onClick,
|
64 | panelPosition = _props.panelPosition,
|
65 | item = _props.item;
|
66 |
|
67 | onClick(panelPosition === 'left' ? 'right' : 'left', item.value);
|
68 | };
|
69 |
|
70 | TransferItem.prototype.handleDragStart = function handleDragStart(ev) {
|
71 | ev && ev.dataTransfer && typeof ev.dataTransfer.setData === 'function' && ev.dataTransfer.setData('text/plain', ev.target.id);
|
72 | var _props2 = this.props,
|
73 | onDragStart = _props2.onDragStart,
|
74 | panelPosition = _props2.panelPosition,
|
75 | item = _props2.item;
|
76 |
|
77 | onDragStart(panelPosition, item.value);
|
78 | };
|
79 |
|
80 | TransferItem.prototype.getDragGap = function getDragGap(e) {
|
81 | var referenceTop = getOffset(e.currentTarget).top;
|
82 | var referenceHeight = e.currentTarget.offsetHeight;
|
83 | return e.pageY <= referenceTop + referenceHeight / 2 ? 'before' : 'after';
|
84 | };
|
85 |
|
86 | TransferItem.prototype.handleDragOver = function handleDragOver(e) {
|
87 | var _props3 = this.props,
|
88 | panelPosition = _props3.panelPosition,
|
89 | dragPosition = _props3.dragPosition,
|
90 | onDragOver = _props3.onDragOver,
|
91 | item = _props3.item;
|
92 |
|
93 | if (panelPosition === dragPosition) {
|
94 | e.preventDefault();
|
95 |
|
96 | var dragGap = this.getDragGap(e);
|
97 | if (this.dragGap !== dragGap) {
|
98 | this.dragGap = dragGap;
|
99 | onDragOver(item.value);
|
100 | }
|
101 | }
|
102 | };
|
103 |
|
104 | TransferItem.prototype.handleDragEnd = function handleDragEnd() {
|
105 | var onDragEnd = this.props.onDragEnd;
|
106 |
|
107 | onDragEnd();
|
108 | };
|
109 |
|
110 | TransferItem.prototype.handleDrop = function handleDrop(e) {
|
111 | e.preventDefault();
|
112 |
|
113 | var _props4 = this.props,
|
114 | onDrop = _props4.onDrop,
|
115 | item = _props4.item,
|
116 | panelPosition = _props4.panelPosition,
|
117 | dragValue = _props4.dragValue;
|
118 |
|
119 | onDrop(panelPosition, dragValue, item.value, this.dragGap);
|
120 | };
|
121 |
|
122 | TransferItem.prototype.render = function render() {
|
123 | var _cx;
|
124 |
|
125 | var _props5 = this.props,
|
126 | prefix = _props5.prefix,
|
127 | mode = _props5.mode,
|
128 | checked = _props5.checked,
|
129 | disabled = _props5.disabled,
|
130 | item = _props5.item,
|
131 | onCheck = _props5.onCheck,
|
132 | itemRender = _props5.itemRender,
|
133 | draggable = _props5.draggable,
|
134 | dragOverValue = _props5.dragOverValue,
|
135 | panelPosition = _props5.panelPosition,
|
136 | dragPosition = _props5.dragPosition;
|
137 |
|
138 | var others = pickOthers(Object.keys(TransferItem.propTypes), this.props);
|
139 | var highlight = this.state.highlight;
|
140 |
|
141 | var isSimple = mode === 'simple';
|
142 |
|
143 | var classNames = cx((_cx = {}, _cx[prefix + 'transfer-panel-item'] = true, _cx[prefix + 'insert-' + this.dragGap] = dragOverValue === item.value && panelPosition === dragPosition, _cx[prefix + 'focused'] = highlight, _cx[prefix + 'simple'] = isSimple, _cx));
|
144 |
|
145 | var children = itemRender(item);
|
146 | var itemProps = _extends({
|
147 | ref: this.getItemDOM,
|
148 | className: classNames,
|
149 | children: children,
|
150 | disabled: disabled,
|
151 | draggable: draggable && !disabled,
|
152 | onDragStart: this.handleDragStart,
|
153 | onDragOver: this.handleDragOver,
|
154 | onDragEnd: this.handleDragEnd,
|
155 | onDrop: this.handleDrop
|
156 | }, others);
|
157 | var title = void 0;
|
158 | if (typeof children === 'string') {
|
159 | title = children;
|
160 | }
|
161 | if (isSimple) {
|
162 | if (!itemProps.disabled) {
|
163 | itemProps.onClick = this.handleClick;
|
164 | }
|
165 |
|
166 | return React.createElement(Item, _extends({ title: title }, itemProps));
|
167 | }
|
168 |
|
169 | return React.createElement(CheckboxItem, _extends({
|
170 | checked: checked,
|
171 | onChange: onCheck.bind(this, item.value),
|
172 | title: title
|
173 | }, itemProps));
|
174 | };
|
175 |
|
176 | return TransferItem;
|
177 | }(Component), _class.menuChildType = CheckboxItem.menuChildType, _class.propTypes = {
|
178 | prefix: PropTypes.string,
|
179 | mode: PropTypes.oneOf(['normal', 'simple']),
|
180 | value: PropTypes.array,
|
181 | disabled: PropTypes.bool,
|
182 | item: PropTypes.object,
|
183 | onCheck: PropTypes.func,
|
184 | onClick: PropTypes.func,
|
185 | needHighlight: PropTypes.bool,
|
186 | itemRender: PropTypes.func,
|
187 | draggable: PropTypes.bool,
|
188 | onDragStart: PropTypes.func,
|
189 | onDragOver: PropTypes.func,
|
190 | onDragEnd: PropTypes.func,
|
191 | onDrop: PropTypes.func,
|
192 | dragPosition: PropTypes.oneOf(['left', 'right']),
|
193 | dragValue: PropTypes.string,
|
194 | dragOverValue: PropTypes.string,
|
195 | panelPosition: PropTypes.oneOf(['left', 'right'])
|
196 | }, _temp);
|
197 | TransferItem.displayName = 'TransferItem';
|
198 | export { TransferItem as default }; |
\ | No newline at end of file |