@kdcloudjs/kdesign 1.7.34 → 1.7.37
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/CHANGELOG.md +11 -0
- package/dist/kdesign-complete.less +244 -77
- package/dist/kdesign.css +263 -42
- package/dist/kdesign.css.map +1 -1
- package/dist/kdesign.js +614 -168
- package/dist/kdesign.js.map +1 -1
- package/dist/kdesign.min.css +3 -3
- package/dist/kdesign.min.js +5 -5
- package/dist/kdesign.min.js.map +1 -1
- package/es/city-picker/city-picker.js +1 -1
- package/es/clipboard/clipboard.d.ts +21 -0
- package/es/clipboard/clipboard.js +106 -0
- package/es/clipboard/index.d.ts +4 -0
- package/es/clipboard/index.js +3 -0
- package/es/clipboard/style/css.js +2 -0
- package/es/clipboard/style/index.css +190 -0
- package/es/clipboard/style/index.d.ts +2 -0
- package/es/clipboard/style/index.js +2 -0
- package/es/clipboard/style/index.less +32 -0
- package/es/clipboard/style/mixin.less +39 -0
- package/es/clipboard/style/token.less +52 -0
- package/es/clipboard/util.d.ts +13 -0
- package/es/clipboard/util.js +197 -0
- package/es/color-picker/color-picker-panel.js +15 -6
- package/es/color-picker/color-picker.js +17 -3
- package/es/color-picker/interface.d.ts +5 -0
- package/es/color-picker/style/index.css +30 -13
- package/es/color-picker/style/index.less +49 -43
- package/es/config-provider/compDefaultProps.d.ts +5 -0
- package/es/config-provider/compDefaultProps.js +5 -0
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -1
- package/es/locale/locale.d.ts +2 -0
- package/es/locale/zh-CN.d.ts +2 -0
- package/es/locale/zh-CN.js +3 -1
- package/es/message/content.js +1 -4
- package/es/select/interface.d.ts +1 -0
- package/es/select/select.js +15 -12
- package/es/select/style/index.css +12 -9
- package/es/select/style/index.less +22 -12
- package/es/select/style/token.less +1 -0
- package/es/tree/style/index.css +22 -15
- package/es/tree/style/index.less +33 -18
- package/es/tree/tree.d.ts +1 -0
- package/es/tree/tree.js +29 -13
- package/es/tree/treeHooks.d.ts +2 -2
- package/es/tree/treeHooks.js +11 -6
- package/es/tree/treeNode.d.ts +2 -3
- package/es/tree/treeNode.js +6 -5
- package/es/tree/utils/treeUtils.d.ts +2 -2
- package/es/tree/utils/treeUtils.js +5 -6
- package/es/tree-select/interface.d.ts +1 -0
- package/es/tree-select/style/index.css +7 -4
- package/es/tree-select/style/index.less +12 -4
- package/es/tree-select/style/token.less +1 -0
- package/es/tree-select/tree-select.js +6 -2
- package/lib/city-picker/city-picker.js +1 -1
- package/lib/clipboard/clipboard.d.ts +21 -0
- package/lib/clipboard/clipboard.js +121 -0
- package/lib/clipboard/index.d.ts +4 -0
- package/lib/clipboard/index.js +11 -0
- package/lib/clipboard/style/css.js +4 -0
- package/lib/clipboard/style/index.css +190 -0
- package/lib/clipboard/style/index.d.ts +2 -0
- package/lib/clipboard/style/index.js +4 -0
- package/lib/clipboard/style/index.less +32 -0
- package/lib/clipboard/style/mixin.less +39 -0
- package/lib/clipboard/style/token.less +52 -0
- package/lib/clipboard/util.d.ts +13 -0
- package/lib/clipboard/util.js +204 -0
- package/lib/color-picker/color-picker-panel.js +16 -7
- package/lib/color-picker/color-picker.js +17 -3
- package/lib/color-picker/interface.d.ts +5 -0
- package/lib/color-picker/style/index.css +30 -13
- package/lib/color-picker/style/index.less +49 -43
- package/lib/config-provider/compDefaultProps.d.ts +5 -0
- package/lib/config-provider/compDefaultProps.js +5 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +7 -0
- package/lib/locale/locale.d.ts +2 -0
- package/lib/locale/zh-CN.d.ts +2 -0
- package/lib/locale/zh-CN.js +3 -1
- package/lib/message/content.js +1 -4
- package/lib/select/interface.d.ts +1 -0
- package/lib/select/select.js +15 -12
- package/lib/select/style/index.css +12 -9
- package/lib/select/style/index.less +22 -12
- package/lib/select/style/token.less +1 -0
- package/lib/style/components.less +1 -0
- package/lib/tree/style/index.css +22 -15
- package/lib/tree/style/index.less +33 -18
- package/lib/tree/tree.d.ts +1 -0
- package/lib/tree/tree.js +28 -12
- package/lib/tree/treeHooks.d.ts +2 -2
- package/lib/tree/treeHooks.js +10 -5
- package/lib/tree/treeNode.d.ts +2 -3
- package/lib/tree/treeNode.js +6 -5
- package/lib/tree/utils/treeUtils.d.ts +2 -2
- package/lib/tree/utils/treeUtils.js +5 -6
- package/lib/tree-select/interface.d.ts +1 -0
- package/lib/tree-select/style/index.css +7 -4
- package/lib/tree-select/style/index.less +12 -4
- package/lib/tree-select/style/token.less +1 -0
- package/lib/tree-select/tree-select.js +6 -2
- package/package.json +1 -1
- package/es/color-picker/utils/hooks/useOnClickOutside.d.ts +0 -2
- package/es/color-picker/utils/hooks/useOnClickOutside.js +0 -16
- package/lib/color-picker/utils/hooks/useOnClickOutside.d.ts +0 -2
- package/lib/color-picker/utils/hooks/useOnClickOutside.js +0 -23
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 获取元素的内容
|
|
3
|
+
* @param {HTMLElement} element
|
|
4
|
+
* @return {string}
|
|
5
|
+
*/
|
|
6
|
+
var getContent = function getContent(element) {
|
|
7
|
+
var content;
|
|
8
|
+
if (element.nodeName === 'SELECT') {
|
|
9
|
+
content = element.value;
|
|
10
|
+
} else if (element.nodeName === 'INPUT') {
|
|
11
|
+
content = element.value;
|
|
12
|
+
} else if (element.nodeName === 'TEXTAREA') {
|
|
13
|
+
content = element.value;
|
|
14
|
+
} else {
|
|
15
|
+
// 其他类型通过 select 与 range 来获取文本
|
|
16
|
+
// 获取 select
|
|
17
|
+
var selection = window.getSelection();
|
|
18
|
+
// 创建 range
|
|
19
|
+
var range = document.createRange();
|
|
20
|
+
// 设置 range 的元素
|
|
21
|
+
range.selectNodeContents(element);
|
|
22
|
+
// 重置 select
|
|
23
|
+
selection.removeAllRanges();
|
|
24
|
+
// 设置 select 的 range
|
|
25
|
+
selection.addRange(range);
|
|
26
|
+
// 获取选中的文本
|
|
27
|
+
content = selection.toString();
|
|
28
|
+
// 获取到文本后清空选中范围
|
|
29
|
+
selection.removeAllRanges();
|
|
30
|
+
}
|
|
31
|
+
return content;
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* 清空元素的内容
|
|
35
|
+
* @param {HTMLElement} element
|
|
36
|
+
*/
|
|
37
|
+
var clearElement = function clearElement(element) {
|
|
38
|
+
if (element.nodeName === 'SELECT') {
|
|
39
|
+
;
|
|
40
|
+
element.value = '';
|
|
41
|
+
} else if (element.nodeName === 'INPUT') {
|
|
42
|
+
;
|
|
43
|
+
element.value = '';
|
|
44
|
+
} else if (element.nodeName === 'TEXTAREA') {
|
|
45
|
+
;
|
|
46
|
+
element.value = '';
|
|
47
|
+
} else {
|
|
48
|
+
element.innerHTML = '';
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
/**
|
|
52
|
+
* 由将被复制的文本为 value 创建一个 HTMLTextAreaElement 容器
|
|
53
|
+
* @param {String} value
|
|
54
|
+
* @return {HTMLTextAreaElement}
|
|
55
|
+
*/
|
|
56
|
+
var createContainer = function createContainer(value) {
|
|
57
|
+
var isRTL = document.documentElement.getAttribute('dir') === 'rtl';
|
|
58
|
+
var container = document.createElement('textarea');
|
|
59
|
+
// 防止在 ios 上缩放
|
|
60
|
+
container.style.fontSize = '12pt';
|
|
61
|
+
// 重置样式
|
|
62
|
+
container.style.border = '0';
|
|
63
|
+
container.style.padding = '0';
|
|
64
|
+
container.style.margin = '0';
|
|
65
|
+
// 把元素定位在视窗外
|
|
66
|
+
container.style.position = 'absolute';
|
|
67
|
+
container.style[isRTL ? 'right' : 'left'] = '-9999px';
|
|
68
|
+
var yPosition = window.pageYOffset || document.documentElement.scrollTop;
|
|
69
|
+
container.style.top = "".concat(yPosition, "px");
|
|
70
|
+
// 设置为只读
|
|
71
|
+
container.setAttribute('readonly', '');
|
|
72
|
+
// 将文本赋值给元素
|
|
73
|
+
container.value = value;
|
|
74
|
+
document.body.appendChild(container);
|
|
75
|
+
return container;
|
|
76
|
+
};
|
|
77
|
+
/**
|
|
78
|
+
* 删除元素
|
|
79
|
+
* @param {HTMLElement} container
|
|
80
|
+
*/
|
|
81
|
+
var removeContainer = function removeContainer(container) {
|
|
82
|
+
document.body.removeChild(container);
|
|
83
|
+
};
|
|
84
|
+
/**
|
|
85
|
+
* 添加选中状态
|
|
86
|
+
* @param {HTMLElement} element
|
|
87
|
+
*/
|
|
88
|
+
var addSelection = function addSelection(element) {
|
|
89
|
+
// 在 Firefox, Edge (非 Chromium 版本) 及 Internet Explorer 中,getSelection() 对 <textarea> 及 <input> 元素不起作用
|
|
90
|
+
// 使用 select 对 <textarea> 及 <input> 单独处理
|
|
91
|
+
if (element.nodeName === 'INPUT') {
|
|
92
|
+
;
|
|
93
|
+
element.select();
|
|
94
|
+
} else if (element.nodeName === 'TEXTAREA') {
|
|
95
|
+
;
|
|
96
|
+
element.select();
|
|
97
|
+
} else {
|
|
98
|
+
var selection = window.getSelection();
|
|
99
|
+
var range = document.createRange();
|
|
100
|
+
range.selectNodeContents(element);
|
|
101
|
+
selection.removeAllRanges();
|
|
102
|
+
selection.addRange(range);
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
/**
|
|
106
|
+
* 移除选中状态
|
|
107
|
+
* @param {HTMLElement} element
|
|
108
|
+
*/
|
|
109
|
+
var removeSelection = function removeSelection(element) {
|
|
110
|
+
var _a;
|
|
111
|
+
// 在 Firefox, Edge (非 Chromium 版本) 及 Internet Explorer 中,getSelection() 对 <textarea> 及 <input> 元素不起作用
|
|
112
|
+
// 使用 setSelectRange 对 <textarea> 及 <input> 单独处理
|
|
113
|
+
if (element.nodeName === 'INPUT') {
|
|
114
|
+
;
|
|
115
|
+
element.setSelectionRange(0, 0);
|
|
116
|
+
} else if (element.nodeName === 'TEXTAREA') {
|
|
117
|
+
;
|
|
118
|
+
element.setSelectionRange(0, 0);
|
|
119
|
+
} else {
|
|
120
|
+
(_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
/**
|
|
124
|
+
* 剪贴板复制操作
|
|
125
|
+
* @param {string | HTMLElement} target
|
|
126
|
+
* @return {string}
|
|
127
|
+
*/
|
|
128
|
+
var onClipboardCopy = function onClipboardCopy(target) {
|
|
129
|
+
var copiedValue;
|
|
130
|
+
if (typeof target === 'string') {
|
|
131
|
+
// 如果传的是字符串,直接复制值
|
|
132
|
+
copiedValue = target;
|
|
133
|
+
if (navigator.clipboard) {
|
|
134
|
+
// navigator.clipboard api 存在时,优先使用其进行复制操作
|
|
135
|
+
if (copiedValue !== '') {
|
|
136
|
+
navigator.clipboard.writeText(copiedValue).then(null, function () {
|
|
137
|
+
throw new Error("failed to copy to clipboard of value '".concat(copiedValue, "'"));
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
} else {
|
|
141
|
+
var container = createContainer(copiedValue);
|
|
142
|
+
addSelection(container);
|
|
143
|
+
document.execCommand('copy');
|
|
144
|
+
removeSelection(container);
|
|
145
|
+
removeContainer(container);
|
|
146
|
+
}
|
|
147
|
+
} else {
|
|
148
|
+
// 通过元素来复制
|
|
149
|
+
copiedValue = getContent(target);
|
|
150
|
+
if (navigator.clipboard) {
|
|
151
|
+
if (copiedValue !== '') {
|
|
152
|
+
navigator.clipboard.writeText(copiedValue).then(null, function () {
|
|
153
|
+
throw new Error("failed to copy to clipboard of value '".concat(copiedValue, "'"));
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
} else {
|
|
157
|
+
addSelection(target);
|
|
158
|
+
document.execCommand('copy');
|
|
159
|
+
removeSelection(target);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
return copiedValue;
|
|
163
|
+
};
|
|
164
|
+
/**
|
|
165
|
+
* 剪贴板剪切操作
|
|
166
|
+
* @param {HTMLElement} target
|
|
167
|
+
* @return {string}
|
|
168
|
+
*/
|
|
169
|
+
var onClipboardCut = function onClipboardCut(target) {
|
|
170
|
+
var cutValue = getContent(target);
|
|
171
|
+
if (target.nodeName === 'SELECT' || target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
|
|
172
|
+
// 对于输入框,使用 document.execCommand('cut') 来剪切,防止受控的输入框无法清空内容
|
|
173
|
+
if (document.execCommand) {
|
|
174
|
+
addSelection(target);
|
|
175
|
+
document.execCommand('cut');
|
|
176
|
+
removeSelection(target);
|
|
177
|
+
} else {
|
|
178
|
+
// document.execCommand 命令不兼容,则抛出异常,因为受控的输入框无法清空元素内容
|
|
179
|
+
throw new Error("failed to cut to clipboard through unavailable api \"document.execCommand\"");
|
|
180
|
+
}
|
|
181
|
+
} else {
|
|
182
|
+
// 对于其他标签的元素,使用 navigator 写入剪贴板,并手动清空内容,防止其他标签无法清空内容
|
|
183
|
+
if (navigator.clipboard) {
|
|
184
|
+
if (cutValue !== '') {
|
|
185
|
+
navigator.clipboard.writeText(cutValue).then(null, function () {
|
|
186
|
+
throw new Error("failed to cut to clipboard of value '".concat(cutValue, "'"));
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
clearElement(target);
|
|
190
|
+
} else {
|
|
191
|
+
// navigator.clipboard 命令不兼容,则抛出异常,因为非输入框无法适用 document.execCommand('cut')
|
|
192
|
+
throw new Error("failed to cut to clipboard through unavailable api \"navigator.clipboard\"");
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
return cutValue;
|
|
196
|
+
};
|
|
197
|
+
export { onClipboardCopy, onClipboardCut };
|
|
@@ -13,7 +13,7 @@ import { toLowerCase } from './utils/convertLetters';
|
|
|
13
13
|
import Color from 'color';
|
|
14
14
|
import { ChromePicker } from 'react-color';
|
|
15
15
|
import devWarning from '../_utils/devwarning';
|
|
16
|
-
import useOnClickOutside from '
|
|
16
|
+
import { useOnClickOutside } from '../_utils/hooks';
|
|
17
17
|
var ColorPickerPanel = function ColorPickerPanel(props) {
|
|
18
18
|
var _classNames, _context;
|
|
19
19
|
var setCorrectColorValue = props.setCorrectColorValue,
|
|
@@ -26,6 +26,7 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
|
|
|
26
26
|
setColTypeArr = props.setColTypeArr,
|
|
27
27
|
setCurrentColorType = props.setCurrentColorType,
|
|
28
28
|
onChange = props.onChange,
|
|
29
|
+
onVisibleChange = props.onVisibleChange,
|
|
29
30
|
alpha = props.alpha,
|
|
30
31
|
alphaNoVerifyVal = props.alphaNoVerifyVal,
|
|
31
32
|
clickedColorIndex = props.clickedColorIndex,
|
|
@@ -43,7 +44,9 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
|
|
|
43
44
|
showPresetColor = props.showPresetColor,
|
|
44
45
|
showColorPickerBox = props.showColorPickerBox,
|
|
45
46
|
showColorPickerPanel = props.showColorPickerPanel,
|
|
46
|
-
value = props.value
|
|
47
|
+
value = props.value,
|
|
48
|
+
visible = props.visible,
|
|
49
|
+
showPanel = props.showPanel;
|
|
47
50
|
var panelInputRef = useRef(null);
|
|
48
51
|
var panelClsRef = useRef(null);
|
|
49
52
|
var Option = Select.Option;
|
|
@@ -55,8 +58,9 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
|
|
|
55
58
|
var panelCls = classNames("".concat(colorPickerPrefixCls, "-panel"));
|
|
56
59
|
var panelChromePickerCls = classNames("".concat(colorPickerPrefixCls, "-panel-chrome"), (_classNames = {}, _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-box"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showBox)), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-hue"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showHue)), _defineProperty(_classNames, "".concat(colorPickerPrefixCls, "-panel-chrome-no-opacity"), !(showColorPickerBox === null || showColorPickerBox === void 0 ? void 0 : showColorPickerBox.showOpacity)), _classNames));
|
|
57
60
|
var panelFollowThemeCls = classNames("".concat(colorPickerPrefixCls, "-panel-switch"));
|
|
58
|
-
var
|
|
59
|
-
var
|
|
61
|
+
var panelContainerCls = classNames("".concat(colorPickerPrefixCls, "-panel-container"));
|
|
62
|
+
var panelInputCls = classNames("".concat(colorPickerPrefixCls, "-panel-container-input"));
|
|
63
|
+
var transparentCls = classNames("".concat(colorPickerPrefixCls, "-panel-container-transparent"));
|
|
60
64
|
var colorDivContainerCls = classNames("".concat(colorPickerPrefixCls, "-panel-colorDivContainer"), _defineProperty({}, "".concat(colorPickerPrefixCls, "-panel-colorDivContainer-unset-color"), (presetColor === null || presetColor === void 0 ? void 0 : presetColor.length) === 0));
|
|
61
65
|
var colorLiClick = function colorLiClick(index, colorValue) {
|
|
62
66
|
var formatArr = colorFormat(colorValue, alpha);
|
|
@@ -171,7 +175,10 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
|
|
|
171
175
|
return isTrueFormat;
|
|
172
176
|
};
|
|
173
177
|
useOnClickOutside([panelClsRef, inputRef], function () {
|
|
174
|
-
|
|
178
|
+
if (typeof visible === 'undefined') {
|
|
179
|
+
setShowPanel(false);
|
|
180
|
+
}
|
|
181
|
+
showPanel && onVisibleChange && onVisibleChange(false);
|
|
175
182
|
});
|
|
176
183
|
return /*#__PURE__*/React.createElement(React.Fragment, null, showColorPickerPanel && /*#__PURE__*/React.createElement("div", {
|
|
177
184
|
className: panelCls,
|
|
@@ -185,7 +192,9 @@ var ColorPickerPanel = function ColorPickerPanel(props) {
|
|
|
185
192
|
}, /*#__PURE__*/React.createElement("span", null, (switchName === null || switchName === void 0 ? void 0 : switchName.internationalName) && locale.getLangMsg('ColorPicker', switchName.internationalName) || switchName.name), /*#__PURE__*/React.createElement(Switch, {
|
|
186
193
|
checked: isFollow,
|
|
187
194
|
onChange: handleSwitchChange
|
|
188
|
-
})), showColorTransfer && /*#__PURE__*/React.createElement(
|
|
195
|
+
})), showColorTransfer && /*#__PURE__*/React.createElement("div", {
|
|
196
|
+
className: panelContainerCls
|
|
197
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
189
198
|
className: panelInputCls,
|
|
190
199
|
ref: panelInputRef
|
|
191
200
|
}, /*#__PURE__*/React.createElement(Select, {
|
|
@@ -36,8 +36,10 @@ var ColorPicker = function ColorPicker(props) {
|
|
|
36
36
|
placeholder = colorPickerProps.placeholder,
|
|
37
37
|
defaultValue = colorPickerProps.defaultValue,
|
|
38
38
|
defaultOpen = colorPickerProps.defaultOpen,
|
|
39
|
+
visible = colorPickerProps.visible,
|
|
39
40
|
suffixIcon = colorPickerProps.suffixIcon,
|
|
40
|
-
onChange = colorPickerProps.onChange
|
|
41
|
+
onChange = colorPickerProps.onChange,
|
|
42
|
+
onVisibleChange = colorPickerProps.onVisibleChange;
|
|
41
43
|
var _useState = useState(defaultValue || ''),
|
|
42
44
|
_useState2 = _slicedToArray(_useState, 2),
|
|
43
45
|
inputColorValue = _useState2[0],
|
|
@@ -54,7 +56,7 @@ var ColorPicker = function ColorPicker(props) {
|
|
|
54
56
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
55
57
|
colTypeArr = _useState8[0],
|
|
56
58
|
setColTypeArr = _useState8[1];
|
|
57
|
-
var _useState9 = useState(defaultOpen),
|
|
59
|
+
var _useState9 = useState(typeof visible === 'undefined' ? !!defaultOpen : !!visible),
|
|
58
60
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
59
61
|
showPanel = _useState10[0],
|
|
60
62
|
setShowPanel = _useState10[1];
|
|
@@ -118,8 +120,16 @@ var ColorPicker = function ColorPicker(props) {
|
|
|
118
120
|
functionalColor && showSwitch && setIsFollow(false);
|
|
119
121
|
};
|
|
120
122
|
var handleClick = function handleClick() {
|
|
121
|
-
|
|
123
|
+
if (typeof visible === 'undefined') {
|
|
124
|
+
setShowPanel(!showPanel);
|
|
125
|
+
}
|
|
126
|
+
onVisibleChange && onVisibleChange(!showPanel);
|
|
122
127
|
};
|
|
128
|
+
useEffect(function () {
|
|
129
|
+
if (typeof visible !== 'undefined') {
|
|
130
|
+
setShowPanel(visible);
|
|
131
|
+
}
|
|
132
|
+
}, [visible]);
|
|
123
133
|
useEffect(function () {
|
|
124
134
|
if (value) {
|
|
125
135
|
setIconColor(value);
|
|
@@ -169,6 +179,9 @@ var ColorPicker = function ColorPicker(props) {
|
|
|
169
179
|
switchName: switchName,
|
|
170
180
|
presetColor: presetColor,
|
|
171
181
|
value: value,
|
|
182
|
+
visible: visible,
|
|
183
|
+
showPanel: showPanel,
|
|
184
|
+
onVisibleChange: onVisibleChange,
|
|
172
185
|
// private
|
|
173
186
|
setInputColorValue: setInputColorValue,
|
|
174
187
|
setCorrectColorValue: setCorrectColorValue,
|
|
@@ -195,6 +208,7 @@ var ColorPicker = function ColorPicker(props) {
|
|
|
195
208
|
placement: 'bottomLeft',
|
|
196
209
|
defaultVisible: showPanel,
|
|
197
210
|
visible: showPanel,
|
|
211
|
+
onVisibleChange: null,
|
|
198
212
|
clickToClose: false
|
|
199
213
|
});
|
|
200
214
|
return usePopper(colorInputEle, panel, popperProps);
|
|
@@ -32,7 +32,9 @@ export interface IColorPickerProps extends PopperProps {
|
|
|
32
32
|
showOpacity: boolean;
|
|
33
33
|
};
|
|
34
34
|
defaultOpen: boolean;
|
|
35
|
+
visible: boolean;
|
|
35
36
|
onChange: (inputValue: string, formatColorArr: Array<IColorTypesObj>) => void;
|
|
37
|
+
onVisibleChange: (visible: boolean) => void;
|
|
36
38
|
}
|
|
37
39
|
export interface IColorPickerPanelProps {
|
|
38
40
|
alpha: number;
|
|
@@ -60,6 +62,8 @@ export interface IColorPickerPanelProps {
|
|
|
60
62
|
};
|
|
61
63
|
showColorPickerPanel: boolean;
|
|
62
64
|
value: string;
|
|
65
|
+
visible: boolean;
|
|
66
|
+
showPanel: boolean;
|
|
63
67
|
setCurrentColorType: (currentColorType: IColorTypesObj['type']) => void;
|
|
64
68
|
setColTypeArr: (colTypeArr: Array<IColorTypesObj>) => void;
|
|
65
69
|
setClickedColorIndex: (clickedColorIndex: number) => void;
|
|
@@ -70,4 +74,5 @@ export interface IColorPickerPanelProps {
|
|
|
70
74
|
setInputColorValue: (colorValue: string) => void;
|
|
71
75
|
setShowPanel: (showPanel: boolean) => void;
|
|
72
76
|
onChange?: (inputValue: string, formatColorArr: Array<IColorTypesObj>) => void;
|
|
77
|
+
onVisibleChange?: (visible: boolean) => void;
|
|
73
78
|
}
|
|
@@ -105,6 +105,7 @@
|
|
|
105
105
|
/* ----------- zIndex ——————---- end */
|
|
106
106
|
.kd-color-picker-container {
|
|
107
107
|
position: relative;
|
|
108
|
+
width: var(--kd-c-color-picker-input-sizing-width, 230px);
|
|
108
109
|
}
|
|
109
110
|
.kd-color-picker-container .kd-color-picker-input {
|
|
110
111
|
width: var(--kd-c-color-picker-input-sizing-width, 230px);
|
|
@@ -146,6 +147,9 @@
|
|
|
146
147
|
transition: transform 0.2s ease-in-out;
|
|
147
148
|
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
|
|
148
149
|
}
|
|
150
|
+
.kd-color-picker-pop {
|
|
151
|
+
width: var(--kd-c-color-picker-panel-sizing-width, 304px);
|
|
152
|
+
}
|
|
149
153
|
.kd-color-picker-pop.topLeft.hidden,
|
|
150
154
|
.kd-color-picker-pop.bottomLeft.hidden,
|
|
151
155
|
.kd-color-picker-pop.topRight.hidden,
|
|
@@ -255,19 +259,30 @@
|
|
|
255
259
|
vertical-align: middle;
|
|
256
260
|
margin-right: 9px;
|
|
257
261
|
}
|
|
258
|
-
.kd-color-picker-pop .kd-color-picker-panel-
|
|
262
|
+
.kd-color-picker-pop .kd-color-picker-panel-container {
|
|
263
|
+
display: -webkit-box;
|
|
264
|
+
display: -ms-flexbox;
|
|
265
|
+
display: flex;
|
|
266
|
+
-ms-flex-wrap: nowrap;
|
|
267
|
+
flex-wrap: nowrap;
|
|
268
|
+
margin-top: 10px;
|
|
269
|
+
}
|
|
270
|
+
.kd-color-picker-pop .kd-color-picker-panel-container-input {
|
|
271
|
+
-webkit-box-flex: 1;
|
|
272
|
+
-ms-flex: 1 1 auto;
|
|
273
|
+
flex: 1 1 auto;
|
|
259
274
|
display: inline-block;
|
|
260
275
|
position: relative;
|
|
261
|
-
margin-top: 12px;
|
|
262
276
|
font-size: var(--kd-c-color-picker-panel-select-font-size, var(--kd-g-font-size-middle, 14px));
|
|
263
277
|
}
|
|
264
|
-
.kd-color-picker-pop .kd-color-picker-panel-input-
|
|
265
|
-
margin
|
|
278
|
+
.kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-dropdown-panel {
|
|
279
|
+
margin: 0 !important;
|
|
266
280
|
}
|
|
267
|
-
.kd-color-picker-pop .kd-color-picker-panel-input .kd-select.bottomLeft,
|
|
268
|
-
.kd-color-picker-pop .kd-color-picker-panel-input .kd-select.topLeft {
|
|
281
|
+
.kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-dropdown-panel.bottomLeft,
|
|
282
|
+
.kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-dropdown-panel.topLeft {
|
|
269
283
|
position: absolute;
|
|
270
284
|
width: 60px !important;
|
|
285
|
+
min-width: unset !important;
|
|
271
286
|
background: #FFFFFF;
|
|
272
287
|
right: 0;
|
|
273
288
|
left: unset !important;
|
|
@@ -275,7 +290,7 @@
|
|
|
275
290
|
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
|
|
276
291
|
border-radius: 2px;
|
|
277
292
|
}
|
|
278
|
-
.kd-color-picker-pop .kd-color-picker-panel-input .kd-select .kd-select-dropdown .kd-select-item-option {
|
|
293
|
+
.kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-dropdown-panel .kd-select-dropdown .kd-select-item-option {
|
|
279
294
|
display: -webkit-box;
|
|
280
295
|
display: -ms-flexbox;
|
|
281
296
|
display: flex;
|
|
@@ -284,21 +299,23 @@
|
|
|
284
299
|
justify-content: center;
|
|
285
300
|
min-width: unset;
|
|
286
301
|
}
|
|
287
|
-
.kd-color-picker-pop .kd-color-picker-panel-input .kd-select-bordered {
|
|
302
|
+
.kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-bordered {
|
|
288
303
|
border-radius: 2px;
|
|
289
304
|
width: var(--kd-c-color-picker-panel-select-sizing-width, 212px);
|
|
290
305
|
height: var(--kd-c-color-picker-panel-select-sizing-height, 28px);
|
|
291
306
|
min-height: 28px;
|
|
292
|
-
|
|
307
|
+
padding: 0 28px 0 0;
|
|
293
308
|
}
|
|
294
|
-
.kd-color-picker-pop .kd-color-picker-panel-input .kd-select-bordered .kd-select-placeholder {
|
|
309
|
+
.kd-color-picker-pop .kd-color-picker-panel-container-input .kd-select-bordered .kd-select-placeholder {
|
|
295
310
|
left: 8px;
|
|
296
311
|
}
|
|
297
|
-
.kd-color-picker-pop .kd-color-picker-panel-input .active-option {
|
|
312
|
+
.kd-color-picker-pop .kd-color-picker-panel-container-input .active-option {
|
|
298
313
|
background-color: var(--kd-c-color-picker-panel-option-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
|
|
299
314
|
}
|
|
300
|
-
.kd-color-picker-pop .kd-color-picker-panel-transparent {
|
|
301
|
-
|
|
315
|
+
.kd-color-picker-pop .kd-color-picker-panel-container-transparent {
|
|
316
|
+
-webkit-box-flex: 0;
|
|
317
|
+
-ms-flex: 0 0 60px;
|
|
318
|
+
flex: 0 0 60px;
|
|
302
319
|
height: 28px;
|
|
303
320
|
margin-left: 8px;
|
|
304
321
|
text-align: center;
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
.@{color-picker-prefix-cls}-container {
|
|
8
8
|
position: relative;
|
|
9
|
+
width: @color-picker-input-sizing-width;
|
|
9
10
|
|
|
10
11
|
.@{color-picker-prefix-cls}-input {
|
|
11
12
|
width: @color-picker-input-sizing-width;
|
|
@@ -52,6 +53,7 @@
|
|
|
52
53
|
}
|
|
53
54
|
|
|
54
55
|
.@{color-picker-prefix-cls}-pop {
|
|
56
|
+
width: @color-picker-panel-sizing-width;
|
|
55
57
|
|
|
56
58
|
&.topLeft.hidden,
|
|
57
59
|
&.bottomLeft.hidden,
|
|
@@ -202,63 +204,67 @@
|
|
|
202
204
|
}
|
|
203
205
|
}
|
|
204
206
|
|
|
205
|
-
&-
|
|
206
|
-
display:
|
|
207
|
-
|
|
208
|
-
margin-top:
|
|
209
|
-
font-size: @color-picker-panel-select-font-size;
|
|
207
|
+
&-container {
|
|
208
|
+
display: flex;
|
|
209
|
+
flex-wrap: nowrap;
|
|
210
|
+
margin-top: 10px;
|
|
210
211
|
|
|
211
|
-
&-
|
|
212
|
-
|
|
213
|
-
|
|
212
|
+
&-input {
|
|
213
|
+
flex: 1 1 auto;
|
|
214
|
+
display: inline-block;
|
|
215
|
+
position: relative;
|
|
216
|
+
font-size: @color-picker-panel-select-font-size;
|
|
217
|
+
|
|
218
|
+
.@{kd-prefix}-select-dropdown-panel {
|
|
219
|
+
margin: 0 !important;
|
|
220
|
+
|
|
221
|
+
&.bottomLeft,
|
|
222
|
+
&.topLeft {
|
|
223
|
+
position: absolute;
|
|
224
|
+
width: 60px !important;
|
|
225
|
+
min-width: unset !important;
|
|
226
|
+
background: #FFFFFF;
|
|
227
|
+
right: 0;
|
|
228
|
+
left: unset !important;
|
|
229
|
+
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
|
|
230
|
+
border-radius: 2px;
|
|
231
|
+
}
|
|
214
232
|
|
|
215
|
-
|
|
233
|
+
.@{kd-prefix}-select-dropdown {
|
|
234
|
+
.@{kd-prefix}-select-item-option {
|
|
235
|
+
display: flex;
|
|
236
|
+
justify-content: center;
|
|
237
|
+
min-width: unset;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
}
|
|
216
241
|
|
|
217
|
-
|
|
218
|
-
&.topLeft {
|
|
219
|
-
position: absolute;
|
|
220
|
-
width: 60px !important;
|
|
221
|
-
background: #FFFFFF;
|
|
222
|
-
right: 0;
|
|
223
|
-
left: unset !important;
|
|
224
|
-
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
|
|
242
|
+
.@{kd-prefix}-select-bordered {
|
|
225
243
|
border-radius: 2px;
|
|
226
|
-
|
|
244
|
+
width: @color-picker-panel-select-sizing-width;
|
|
245
|
+
height: @color-picker-panel-select-sizing-height;
|
|
246
|
+
min-height: 28px;
|
|
247
|
+
padding: 0 28px 0 0;
|
|
227
248
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
display: flex;
|
|
231
|
-
justify-content: center;
|
|
232
|
-
min-width: unset;
|
|
249
|
+
.@{kd-prefix}-select-placeholder {
|
|
250
|
+
left: 8px;
|
|
233
251
|
}
|
|
234
252
|
}
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
.@{kd-prefix}-select-bordered {
|
|
238
|
-
border-radius: 2px;
|
|
239
|
-
width: @color-picker-panel-select-sizing-width;
|
|
240
|
-
height: @color-picker-panel-select-sizing-height;
|
|
241
|
-
min-height: 28px;
|
|
242
|
-
margin-top: -2px;
|
|
243
253
|
|
|
244
|
-
|
|
245
|
-
|
|
254
|
+
.active-option {
|
|
255
|
+
background-color: @color-picker-panel-option-color-background;
|
|
246
256
|
}
|
|
247
257
|
}
|
|
248
258
|
|
|
249
|
-
|
|
250
|
-
|
|
259
|
+
&-transparent {
|
|
260
|
+
flex: 0 0 60px;
|
|
261
|
+
height: 28px;
|
|
262
|
+
margin-left: 8px;
|
|
263
|
+
text-align: center;
|
|
264
|
+
font-size: @color-picker-panel-alpha-font-size;
|
|
251
265
|
}
|
|
252
266
|
}
|
|
253
267
|
|
|
254
|
-
&-transparent {
|
|
255
|
-
width: 60px;
|
|
256
|
-
height: 28px;
|
|
257
|
-
margin-left: 8px;
|
|
258
|
-
text-align: center;
|
|
259
|
-
font-size: @color-picker-panel-alpha-font-size;
|
|
260
|
-
}
|
|
261
|
-
|
|
262
268
|
&-colorDivContainer {
|
|
263
269
|
display: grid;
|
|
264
270
|
grid-template-columns: repeat(12, 1fr);
|
|
@@ -479,6 +479,11 @@ var compDefaultProps = {
|
|
|
479
479
|
showDescription: true,
|
|
480
480
|
optionHighlightProps: 'highlightText',
|
|
481
481
|
allowClear: true
|
|
482
|
+
},
|
|
483
|
+
Clipboard: {
|
|
484
|
+
action: 'copy',
|
|
485
|
+
disabled: false,
|
|
486
|
+
size: 'middle'
|
|
482
487
|
}
|
|
483
488
|
};
|
|
484
489
|
export default compDefaultProps;
|
package/es/index.d.ts
CHANGED
package/es/index.js
CHANGED
|
@@ -54,4 +54,5 @@ export { default as Stepper } from './stepper';
|
|
|
54
54
|
export { default as BaseData } from './base-data';
|
|
55
55
|
export { default as Link } from './link';
|
|
56
56
|
export { default as TreeSelect } from './tree-select';
|
|
57
|
-
export { default as ColorPicker } from './color-picker';
|
|
57
|
+
export { default as ColorPicker } from './color-picker';
|
|
58
|
+
export { default as Clipboard } from './clipboard';
|
package/es/locale/locale.d.ts
CHANGED
|
@@ -98,6 +98,8 @@ declare class LocaleCache {
|
|
|
98
98
|
'Table.notIsNull': string;
|
|
99
99
|
'Table.resetFilter': string;
|
|
100
100
|
'Table.confirmFilter': string;
|
|
101
|
+
'Select.selectAll': string;
|
|
102
|
+
'Select.seleted': string;
|
|
101
103
|
'DatePicker.placeholder': string;
|
|
102
104
|
'DatePicker.yearPlaceholder': string;
|
|
103
105
|
'DatePicker.quarterPlaceholder': string;
|
package/es/locale/zh-CN.d.ts
CHANGED
|
@@ -72,6 +72,8 @@ declare const locale: {
|
|
|
72
72
|
'Table.notIsNull': string;
|
|
73
73
|
'Table.resetFilter': string;
|
|
74
74
|
'Table.confirmFilter': string;
|
|
75
|
+
'Select.selectAll': string;
|
|
76
|
+
'Select.seleted': string;
|
|
75
77
|
'DatePicker.placeholder': string;
|
|
76
78
|
'DatePicker.yearPlaceholder': string;
|
|
77
79
|
'DatePicker.quarterPlaceholder': string;
|
package/es/locale/zh-CN.js
CHANGED
|
@@ -75,6 +75,8 @@ var locale = _extends(_extends({
|
|
|
75
75
|
'Table.isNull': '为空',
|
|
76
76
|
'Table.notIsNull': '不为空',
|
|
77
77
|
'Table.resetFilter': '重置',
|
|
78
|
-
'Table.confirmFilter': '确定'
|
|
78
|
+
'Table.confirmFilter': '确定',
|
|
79
|
+
'Select.selectAll': '全选',
|
|
80
|
+
'Select.seleted': '已选{size}项'
|
|
79
81
|
});
|
|
80
82
|
export default locale;
|
package/es/message/content.js
CHANGED
|
@@ -58,16 +58,13 @@ var Content = function Content(args) {
|
|
|
58
58
|
}));
|
|
59
59
|
};
|
|
60
60
|
var getMainElement = function getMainElement() {
|
|
61
|
-
if (typeof content === 'string') {
|
|
61
|
+
if (typeof content === 'string' || /*#__PURE__*/React.isValidElement(content)) {
|
|
62
62
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
63
63
|
className: "".concat(classPrefix, "-main")
|
|
64
64
|
}, renderIcon(), /*#__PURE__*/React.createElement("div", {
|
|
65
65
|
className: "".concat(classPrefix, "-text")
|
|
66
66
|
}, content)), renderCloseIcon());
|
|
67
67
|
}
|
|
68
|
-
if ( /*#__PURE__*/React.isValidElement(content)) {
|
|
69
|
-
return content;
|
|
70
|
-
}
|
|
71
68
|
return null;
|
|
72
69
|
};
|
|
73
70
|
return /*#__PURE__*/React.createElement(React.Fragment, null, getMainElement());
|
package/es/select/interface.d.ts
CHANGED
|
@@ -53,6 +53,7 @@ export interface ISelectProps<T extends SelectValue> extends AbstractSelectProps
|
|
|
53
53
|
defaultValue?: T;
|
|
54
54
|
mode?: Mode;
|
|
55
55
|
autoFocus?: boolean;
|
|
56
|
+
status?: 'error';
|
|
56
57
|
onChange?: (value?: T, option?: React.ReactElement<any> | React.ReactElement<any>[]) => void;
|
|
57
58
|
onSelect?: (value?: T extends (infer I)[] ? I : T, option?: React.ReactElement<any>) => void;
|
|
58
59
|
onDeselect?: (value?: T extends (infer I)[] ? I : T, option?: React.ReactElement<any>) => void;
|