@chaoswise/ui 2.5.5 → 2.5.6
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.
- package/lib/ColorPicker/SketchPicker/components/common/Alpha.js +133 -0
- package/lib/ColorPicker/SketchPicker/components/common/Checkboard.js +40 -0
- package/lib/ColorPicker/SketchPicker/components/common/ColorWrap.js +80 -0
- package/lib/ColorPicker/SketchPicker/components/common/EditableInput.js +172 -0
- package/lib/ColorPicker/SketchPicker/components/common/Hue.js +118 -0
- package/lib/ColorPicker/SketchPicker/components/common/Raised.js +91 -0
- package/lib/ColorPicker/SketchPicker/components/common/Saturation.js +139 -0
- package/lib/ColorPicker/SketchPicker/components/common/Swatch.js +62 -0
- package/lib/ColorPicker/SketchPicker/components/common/index.js +8 -0
- package/lib/ColorPicker/SketchPicker/components/sketch/SketchFields.js +148 -0
- package/lib/ColorPicker/SketchPicker/components/sketch/SketchPresetColors.js +72 -0
- package/lib/ColorPicker/SketchPicker/components/sketch/index.js +160 -0
- package/lib/ColorPicker/SketchPicker/helpers/alpha.js +46 -0
- package/lib/ColorPicker/SketchPicker/helpers/checkboard.js +29 -0
- package/lib/ColorPicker/SketchPicker/helpers/color.js +86 -0
- package/lib/ColorPicker/SketchPicker/helpers/hue.js +48 -0
- package/lib/ColorPicker/SketchPicker/helpers/index.js +2 -0
- package/lib/ColorPicker/SketchPicker/helpers/interaction.js +55 -0
- package/lib/ColorPicker/SketchPicker/helpers/saturation.js +28 -0
- package/lib/ColorPicker/index.js +2 -3
- package/lib/QuickTransfer/Drag.js +4 -2
- package/lib/QuickTransfer/DragList.js +27 -4
- package/lib/QuickTransfer/index.js +12 -5
- package/package.json +2 -4
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import each from 'lodash/each';
|
|
2
|
+
import tinycolor from 'tinycolor2';
|
|
3
|
+
export var simpleCheckForValidColor = function simpleCheckForValidColor(data) {
|
|
4
|
+
var keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
|
|
5
|
+
var checked = 0;
|
|
6
|
+
var passed = 0;
|
|
7
|
+
each(keysToCheck, function (letter) {
|
|
8
|
+
if (data[letter]) {
|
|
9
|
+
checked += 1;
|
|
10
|
+
if (!isNaN(data[letter])) {
|
|
11
|
+
passed += 1;
|
|
12
|
+
}
|
|
13
|
+
if (letter === 's' || letter === 'l') {
|
|
14
|
+
var percentPatt = /^\d+%$/;
|
|
15
|
+
if (percentPatt.test(data[letter])) {
|
|
16
|
+
passed += 1;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
return checked === passed ? data : false;
|
|
22
|
+
};
|
|
23
|
+
export var toState = function toState(data, oldHue) {
|
|
24
|
+
var color = data.hex ? tinycolor(data.hex) : tinycolor(data);
|
|
25
|
+
var hsl = color.toHsl();
|
|
26
|
+
var hsv = color.toHsv();
|
|
27
|
+
var rgb = color.toRgb();
|
|
28
|
+
var hex = color.toHex();
|
|
29
|
+
if (hsl.s === 0) {
|
|
30
|
+
hsl.h = oldHue || 0;
|
|
31
|
+
hsv.h = oldHue || 0;
|
|
32
|
+
}
|
|
33
|
+
var transparent = hex === '000000' && rgb.a === 0;
|
|
34
|
+
return {
|
|
35
|
+
hsl: hsl,
|
|
36
|
+
hex: transparent ? 'transparent' : "#".concat(hex),
|
|
37
|
+
rgb: rgb,
|
|
38
|
+
hsv: hsv,
|
|
39
|
+
oldHue: data.h || oldHue || hsl.h,
|
|
40
|
+
source: data.source
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
export var isValidHex = function isValidHex(hex) {
|
|
44
|
+
if (hex === 'transparent') {
|
|
45
|
+
return true;
|
|
46
|
+
}
|
|
47
|
+
// disable hex4 and hex8
|
|
48
|
+
var lh = String(hex).charAt(0) === '#' ? 1 : 0;
|
|
49
|
+
return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
|
|
50
|
+
};
|
|
51
|
+
export var getContrastingColor = function getContrastingColor(data) {
|
|
52
|
+
if (!data) {
|
|
53
|
+
return '#fff';
|
|
54
|
+
}
|
|
55
|
+
var col = toState(data);
|
|
56
|
+
if (col.hex === 'transparent') {
|
|
57
|
+
return 'rgba(0,0,0,0.4)';
|
|
58
|
+
}
|
|
59
|
+
var yiq = (col.rgb.r * 299 + col.rgb.g * 587 + col.rgb.b * 114) / 1000;
|
|
60
|
+
return yiq >= 128 ? '#000' : '#fff';
|
|
61
|
+
};
|
|
62
|
+
export var red = {
|
|
63
|
+
hsl: {
|
|
64
|
+
a: 1,
|
|
65
|
+
h: 0,
|
|
66
|
+
l: 0.5,
|
|
67
|
+
s: 1
|
|
68
|
+
},
|
|
69
|
+
hex: '#ff0000',
|
|
70
|
+
rgb: {
|
|
71
|
+
r: 255,
|
|
72
|
+
g: 0,
|
|
73
|
+
b: 0,
|
|
74
|
+
a: 1
|
|
75
|
+
},
|
|
76
|
+
hsv: {
|
|
77
|
+
h: 0,
|
|
78
|
+
s: 1,
|
|
79
|
+
v: 1,
|
|
80
|
+
a: 1
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
export var isvalidColorString = function isvalidColorString(string, type) {
|
|
84
|
+
var stringWithoutDegree = string.replace('°', '');
|
|
85
|
+
return tinycolor("".concat(type, " (").concat(stringWithoutDegree, ")"))._ok;
|
|
86
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
export var calculateChange = function calculateChange(e, direction, hsl, container) {
|
|
2
|
+
var containerWidth = container.clientWidth;
|
|
3
|
+
var containerHeight = container.clientHeight;
|
|
4
|
+
var x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
|
|
5
|
+
var y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
|
|
6
|
+
var left = x - (container.getBoundingClientRect().left + window.pageXOffset);
|
|
7
|
+
var top = y - (container.getBoundingClientRect().top + window.pageYOffset);
|
|
8
|
+
if (direction === 'vertical') {
|
|
9
|
+
var h;
|
|
10
|
+
if (top < 0) {
|
|
11
|
+
h = 359;
|
|
12
|
+
} else if (top > containerHeight) {
|
|
13
|
+
h = 0;
|
|
14
|
+
} else {
|
|
15
|
+
var percent = -(top * 100 / containerHeight) + 100;
|
|
16
|
+
h = 360 * percent / 100;
|
|
17
|
+
}
|
|
18
|
+
if (hsl.h !== h) {
|
|
19
|
+
return {
|
|
20
|
+
h: h,
|
|
21
|
+
s: hsl.s,
|
|
22
|
+
l: hsl.l,
|
|
23
|
+
a: hsl.a,
|
|
24
|
+
source: 'hsl'
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
} else {
|
|
28
|
+
var _h;
|
|
29
|
+
if (left < 0) {
|
|
30
|
+
_h = 0;
|
|
31
|
+
} else if (left > containerWidth) {
|
|
32
|
+
_h = 359;
|
|
33
|
+
} else {
|
|
34
|
+
var _percent = left * 100 / containerWidth;
|
|
35
|
+
_h = 360 * _percent / 100;
|
|
36
|
+
}
|
|
37
|
+
if (hsl.h !== _h) {
|
|
38
|
+
return {
|
|
39
|
+
h: _h,
|
|
40
|
+
s: hsl.s,
|
|
41
|
+
l: hsl.l,
|
|
42
|
+
a: hsl.a,
|
|
43
|
+
source: 'hsl'
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
return null;
|
|
48
|
+
};
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
|
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
4
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
5
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
6
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
7
|
+
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
8
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
9
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
10
|
+
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
11
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
12
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
13
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
14
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
15
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
16
|
+
/* eslint-disable no-invalid-this */
|
|
17
|
+
import React from 'react';
|
|
18
|
+
export var handleFocus = function handleFocus(Component) {
|
|
19
|
+
var Span = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'span';
|
|
20
|
+
return /*#__PURE__*/function (_React$Component) {
|
|
21
|
+
_inherits(Focus, _React$Component);
|
|
22
|
+
function Focus() {
|
|
23
|
+
var _this;
|
|
24
|
+
_classCallCheck(this, Focus);
|
|
25
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
26
|
+
args[_key] = arguments[_key];
|
|
27
|
+
}
|
|
28
|
+
_this = _callSuper(this, Focus, [].concat(args));
|
|
29
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
30
|
+
focus: false
|
|
31
|
+
});
|
|
32
|
+
_defineProperty(_assertThisInitialized(_this), "handleFocus", function () {
|
|
33
|
+
return _this.setState({
|
|
34
|
+
focus: true
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
_defineProperty(_assertThisInitialized(_this), "handleBlur", function () {
|
|
38
|
+
return _this.setState({
|
|
39
|
+
focus: false
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
return _this;
|
|
43
|
+
}
|
|
44
|
+
_createClass(Focus, [{
|
|
45
|
+
key: "render",
|
|
46
|
+
value: function render() {
|
|
47
|
+
return /*#__PURE__*/React.createElement(Span, {
|
|
48
|
+
onFocus: this.handleFocus,
|
|
49
|
+
onBlur: this.handleBlur
|
|
50
|
+
}, /*#__PURE__*/React.createElement(Component, _extends({}, this.props, this.state)));
|
|
51
|
+
}
|
|
52
|
+
}]);
|
|
53
|
+
return Focus;
|
|
54
|
+
}(React.Component);
|
|
55
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export var calculateChange = function calculateChange(e, hsl, container) {
|
|
2
|
+
var _container$getBoundin = container.getBoundingClientRect(),
|
|
3
|
+
containerWidth = _container$getBoundin.width,
|
|
4
|
+
containerHeight = _container$getBoundin.height;
|
|
5
|
+
var x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
|
|
6
|
+
var y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
|
|
7
|
+
var left = x - (container.getBoundingClientRect().left + window.pageXOffset);
|
|
8
|
+
var top = y - (container.getBoundingClientRect().top + window.pageYOffset);
|
|
9
|
+
if (left < 0) {
|
|
10
|
+
left = 0;
|
|
11
|
+
} else if (left > containerWidth) {
|
|
12
|
+
left = containerWidth;
|
|
13
|
+
}
|
|
14
|
+
if (top < 0) {
|
|
15
|
+
top = 0;
|
|
16
|
+
} else if (top > containerHeight) {
|
|
17
|
+
top = containerHeight;
|
|
18
|
+
}
|
|
19
|
+
var saturation = left / containerWidth;
|
|
20
|
+
var bright = 1 - top / containerHeight;
|
|
21
|
+
return {
|
|
22
|
+
h: hsl.h,
|
|
23
|
+
s: saturation,
|
|
24
|
+
v: bright,
|
|
25
|
+
a: hsl.a,
|
|
26
|
+
source: 'hsv'
|
|
27
|
+
};
|
|
28
|
+
};
|
package/lib/ColorPicker/index.js
CHANGED
|
@@ -21,10 +21,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
21
21
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
22
22
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
23
|
import React, { useEffect, useState } from "react";
|
|
24
|
-
import
|
|
24
|
+
import SketchPicker from "./SketchPicker/components/sketch";
|
|
25
25
|
import classnames from "classnames";
|
|
26
26
|
import { formatRgbaObj, hexToRgba } from "./utils";
|
|
27
|
-
import langConfig from
|
|
27
|
+
import langConfig from "./locale";
|
|
28
28
|
import { formatMessage } from "../utils";
|
|
29
29
|
import PropTypes from "prop-types";
|
|
30
30
|
import "./index.less";
|
|
@@ -98,7 +98,6 @@ var ColorPicker = function ColorPicker(_ref) {
|
|
|
98
98
|
}, [_value]);
|
|
99
99
|
//颜色变化触发值改变
|
|
100
100
|
var onChangeColor = function onChangeColor(colorObj) {
|
|
101
|
-
console.log(colorObj, "colorObj");
|
|
102
101
|
var rgbColor = typeof colorObj.rgb == "string" ? colorObj.rgb : formatRgbaObj(colorObj.rgb);
|
|
103
102
|
if (colorType === "single") {
|
|
104
103
|
setColorInfo(_objectSpread(_objectSpread({}, colorInfo), {}, {
|
|
@@ -16,7 +16,8 @@ var Drag = function Drag(props) {
|
|
|
16
16
|
render = props.render,
|
|
17
17
|
renderColumns = props.renderColumns,
|
|
18
18
|
dragList = props.dragList,
|
|
19
|
-
useDndProvider = props.useDndProvider
|
|
19
|
+
useDndProvider = props.useDndProvider,
|
|
20
|
+
isHoverSwitching = props.isHoverSwitching;
|
|
20
21
|
var moveList = function moveList(dragIndex, hoverIndex) {
|
|
21
22
|
var tmp = checkValue[dragIndex]; //临时储存文件
|
|
22
23
|
checkValue.splice(dragIndex, 1); //移除拖拽项
|
|
@@ -40,7 +41,8 @@ var Drag = function Drag(props) {
|
|
|
40
41
|
handleDelete: handleDelete,
|
|
41
42
|
moveList: moveList,
|
|
42
43
|
dragList: dragList,
|
|
43
|
-
hasPrefixIcon: hasPrefixIcon
|
|
44
|
+
hasPrefixIcon: hasPrefixIcon,
|
|
45
|
+
isHoverSwitching: isHoverSwitching
|
|
44
46
|
});
|
|
45
47
|
};
|
|
46
48
|
return /*#__PURE__*/React.createElement(Fragment, null, useDndProvider ? /*#__PURE__*/React.createElement(DndProvider, {
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
1
2
|
import _Icon from "@chaoswise/ui/lib/Icon";
|
|
2
3
|
import "@chaoswise/ui/lib/Tooltip/index.less";
|
|
3
4
|
import _Tooltip from "@chaoswise/ui/lib/Tooltip";
|
|
4
5
|
import _useLocale2 from "@chaoswise/ui/lib/useLocale";
|
|
5
6
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
7
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
9
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
6
10
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
7
11
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
8
12
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
@@ -14,7 +18,7 @@ import { useDrag, useDrop } from "react-dnd";
|
|
|
14
18
|
import classnames from "classnames";
|
|
15
19
|
import LockSvg from "./assets/LockSvg";
|
|
16
20
|
import DragSvg from "./assets/DragSvg";
|
|
17
|
-
import langConfig from
|
|
21
|
+
import langConfig from "./locale";
|
|
18
22
|
import { formatMessage } from "../utils";
|
|
19
23
|
var DragList = function DragList(_ref) {
|
|
20
24
|
var index = _ref.index,
|
|
@@ -25,7 +29,8 @@ var DragList = function DragList(_ref) {
|
|
|
25
29
|
handleDelete = _ref.handleDelete,
|
|
26
30
|
moveList = _ref.moveList,
|
|
27
31
|
dragList = _ref.dragList,
|
|
28
|
-
hasPrefixIcon = _ref.hasPrefixIcon
|
|
32
|
+
hasPrefixIcon = _ref.hasPrefixIcon,
|
|
33
|
+
isHoverSwitching = _ref.isHoverSwitching;
|
|
29
34
|
var title = listItem.title,
|
|
30
35
|
disabled = listItem.disabled;
|
|
31
36
|
// 获取当前语言
|
|
@@ -43,6 +48,7 @@ var DragList = function DragList(_ref) {
|
|
|
43
48
|
var _useDrop = useDrop({
|
|
44
49
|
accept: "transferDrag",
|
|
45
50
|
hover: function hover(item) {
|
|
51
|
+
if (!isHoverSwitching) return;
|
|
46
52
|
//拖拽目标的Index
|
|
47
53
|
var dragIndex = item.index;
|
|
48
54
|
//放置目标Index
|
|
@@ -53,10 +59,27 @@ var DragList = function DragList(_ref) {
|
|
|
53
59
|
}
|
|
54
60
|
moveList(dragIndex, hoverIndex); //调用方法完成交换
|
|
55
61
|
item.index = hoverIndex; //重新赋值index,否则会出现无限交换情况
|
|
62
|
+
},
|
|
63
|
+
collect: function collect(monitor) {
|
|
64
|
+
var _ref2 = monitor.getItem() || {},
|
|
65
|
+
dragIndex = _ref2.index;
|
|
66
|
+
if (dragIndex === index) {
|
|
67
|
+
return {};
|
|
68
|
+
}
|
|
69
|
+
return {
|
|
70
|
+
isOver: monitor.isOver(),
|
|
71
|
+
dropClassName: dragIndex < index ? "drop-over-downward" : "drop-over-upward"
|
|
72
|
+
};
|
|
73
|
+
},
|
|
74
|
+
drop: function drop(item) {
|
|
75
|
+
if (isHoverSwitching) return;
|
|
76
|
+
moveList(item.index, index);
|
|
56
77
|
}
|
|
57
78
|
}),
|
|
58
79
|
_useDrop2 = _slicedToArray(_useDrop, 2),
|
|
59
|
-
|
|
80
|
+
_useDrop2$ = _useDrop2[0],
|
|
81
|
+
isOver = _useDrop2$.isOver,
|
|
82
|
+
dropClassName = _useDrop2$.dropClassName,
|
|
60
83
|
drop = _useDrop2[1];
|
|
61
84
|
var renderTable = function renderTable(listItem) {
|
|
62
85
|
return /*#__PURE__*/React.createElement("div", null, renderColumns.map(function (item, index) {
|
|
@@ -91,7 +114,7 @@ var DragList = function DragList(_ref) {
|
|
|
91
114
|
}
|
|
92
115
|
} : {};
|
|
93
116
|
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
|
|
94
|
-
className: classnames("cw-transfer-right-content-main")
|
|
117
|
+
className: classnames("cw-transfer-right-content-main", _defineProperty({}, dropClassName, isOver && !isHoverSwitching))
|
|
95
118
|
}, dragProps), renderItemContent));
|
|
96
119
|
};
|
|
97
120
|
export default DragList;
|
|
@@ -100,7 +100,9 @@ var QuickTransfer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
100
100
|
_props$searchOption = props.searchOption,
|
|
101
101
|
searchOption = _props$searchOption === void 0 ? {} : _props$searchOption,
|
|
102
102
|
_props$caseSensitive = props.caseSensitive,
|
|
103
|
-
caseSensitive = _props$caseSensitive === void 0 ? false : _props$caseSensitive
|
|
103
|
+
caseSensitive = _props$caseSensitive === void 0 ? false : _props$caseSensitive,
|
|
104
|
+
_props$isHoverSwitchi = props.isHoverSwitching,
|
|
105
|
+
isHoverSwitching = _props$isHoverSwitchi === void 0 ? true : _props$isHoverSwitchi;
|
|
104
106
|
var _searchOption$leftSea = searchOption.leftSearchOption,
|
|
105
107
|
_searchOption$leftSea2 = _searchOption$leftSea === void 0 ? {} : _searchOption$leftSea,
|
|
106
108
|
_searchOption$leftSea3 = _searchOption$leftSea2.onChange,
|
|
@@ -323,10 +325,10 @@ var QuickTransfer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
323
325
|
return newCheckedValue;
|
|
324
326
|
};
|
|
325
327
|
var searchCheckedValue = useMemo(function () {
|
|
326
|
-
return type === "tree" ? handleRightSearch(saveSearchValueRight).filter(function (i) {
|
|
328
|
+
return type === "tree" && treeSelect === "leafNode" ? handleRightSearch(saveSearchValueRight).filter(function (i) {
|
|
327
329
|
return Boolean(i.isLeaf);
|
|
328
330
|
}) : handleRightSearch(saveSearchValueRight);
|
|
329
|
-
}, [checkValue, saveSearchValueRight, type]);
|
|
331
|
+
}, [checkValue, saveSearchValueRight, type, treeSelect]);
|
|
330
332
|
// type为list下全选框按钮的样式统一处理
|
|
331
333
|
var setListCheckedStyle = function setListCheckedStyle(listCheckedKeys, dataSource) {
|
|
332
334
|
// 设置列表左侧判断全选状态实际选中的key,重新搜索之后会改变
|
|
@@ -719,7 +721,8 @@ var QuickTransfer = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
719
721
|
renderColumns: renderColumns ? renderColumns : newRenderColumns,
|
|
720
722
|
dragList: dragList,
|
|
721
723
|
handlePreviewList: handlePreviewList,
|
|
722
|
-
useDndProvider: useDndProvider
|
|
724
|
+
useDndProvider: useDndProvider,
|
|
725
|
+
isHoverSwitching: isHoverSwitching
|
|
723
726
|
}) : /*#__PURE__*/React.createElement(NoDrag, {
|
|
724
727
|
checkValue: searchCheckedValue,
|
|
725
728
|
handleDelete: handleDelete,
|
|
@@ -928,6 +931,10 @@ QuickTransfer.propTypes = {
|
|
|
928
931
|
* allSelectedTextRender(listCheckedKeys,data)
|
|
929
932
|
* }
|
|
930
933
|
*/
|
|
931
|
-
caseSensitive: PropTypes.bool
|
|
934
|
+
caseSensitive: PropTypes.bool,
|
|
935
|
+
/**
|
|
936
|
+
* 开启拖拽后的交互模式,默认为true(true为悬停即交换,false为鼠标松开再交换)
|
|
937
|
+
*/
|
|
938
|
+
isHoverSwitching: PropTypes.bool
|
|
932
939
|
};
|
|
933
940
|
export default QuickTransfer;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chaoswise/ui",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.6",
|
|
4
4
|
"description": "公共UI库",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -102,7 +102,6 @@
|
|
|
102
102
|
"rc-tree-cascader": "npm:rc-tree@5.7.12",
|
|
103
103
|
"rc-util": "^5.20.0",
|
|
104
104
|
"re-resizable": "^6.9.0",
|
|
105
|
-
"react-color": "^2.19.3",
|
|
106
105
|
"react-custom-scrollbars": "^4.2.1",
|
|
107
106
|
"react-dnd": "^13.1.1",
|
|
108
107
|
"react-dnd-html5-backend": "^12.1.1",
|
|
@@ -146,6 +145,5 @@
|
|
|
146
145
|
"publishConfig": {
|
|
147
146
|
"access": "public"
|
|
148
147
|
},
|
|
149
|
-
"license": "MIT"
|
|
150
|
-
"gitHead": "46b2853aff3fc06cda3a575fcf49dc688b547551"
|
|
148
|
+
"license": "MIT"
|
|
151
149
|
}
|