funda-ui 4.5.666 → 4.5.671

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 (65) hide show
  1. package/ColorPicker/index.js +3 -1
  2. package/Date/index.js +14 -1
  3. package/DragDropList/index.css +188 -0
  4. package/DragDropList/index.d.ts +44 -0
  5. package/DragDropList/index.js +1587 -0
  6. package/Input/index.d.ts +2 -0
  7. package/Input/index.js +14 -1
  8. package/LICENSE +21 -0
  9. package/MultipleSelect/index.css +237 -144
  10. package/MultipleSelect/index.d.ts +24 -10
  11. package/MultipleSelect/index.js +2240 -1225
  12. package/README.md +3 -1
  13. package/RangeSlider/index.js +14 -1
  14. package/Textarea/index.d.ts +2 -0
  15. package/Textarea/index.js +14 -1
  16. package/Tree/index.d.ts +1 -0
  17. package/Tree/index.js +29 -0
  18. package/Utils/useBoundedDrag.d.ts +125 -0
  19. package/Utils/useBoundedDrag.js +380 -0
  20. package/Utils/useDragDropPosition.d.ts +169 -0
  21. package/Utils/useDragDropPosition.js +456 -0
  22. package/Utils/useIsMobile.d.ts +2 -0
  23. package/Utils/useIsMobile.js +168 -0
  24. package/all.d.ts +1 -0
  25. package/all.js +1 -1
  26. package/lib/cjs/ColorPicker/index.js +3 -1
  27. package/lib/cjs/Date/index.js +14 -1
  28. package/lib/cjs/DragDropList/index.d.ts +44 -0
  29. package/lib/cjs/DragDropList/index.js +1587 -0
  30. package/lib/cjs/Input/index.d.ts +2 -0
  31. package/lib/cjs/Input/index.js +14 -1
  32. package/lib/cjs/MultipleSelect/index.d.ts +24 -10
  33. package/lib/cjs/MultipleSelect/index.js +2240 -1225
  34. package/lib/cjs/RangeSlider/index.js +14 -1
  35. package/lib/cjs/Textarea/index.d.ts +2 -0
  36. package/lib/cjs/Textarea/index.js +14 -1
  37. package/lib/cjs/Tree/index.d.ts +1 -0
  38. package/lib/cjs/Tree/index.js +29 -0
  39. package/lib/cjs/Utils/useBoundedDrag.d.ts +125 -0
  40. package/lib/cjs/Utils/useBoundedDrag.js +380 -0
  41. package/lib/cjs/Utils/useDragDropPosition.d.ts +169 -0
  42. package/lib/cjs/Utils/useDragDropPosition.js +456 -0
  43. package/lib/cjs/Utils/useIsMobile.d.ts +2 -0
  44. package/lib/cjs/Utils/useIsMobile.js +168 -0
  45. package/lib/cjs/index.d.ts +1 -0
  46. package/lib/cjs/index.js +1 -1
  47. package/lib/css/DragDropList/index.css +188 -0
  48. package/lib/css/MultipleSelect/index.css +237 -144
  49. package/lib/esm/ColorPicker/index.tsx +53 -49
  50. package/lib/esm/DragDropList/index.scss +245 -0
  51. package/lib/esm/DragDropList/index.tsx +494 -0
  52. package/lib/esm/Input/index.tsx +17 -3
  53. package/lib/esm/MultipleSelect/index.scss +288 -183
  54. package/lib/esm/MultipleSelect/index.tsx +305 -166
  55. package/lib/esm/MultipleSelect/utils/func.ts +21 -1
  56. package/lib/esm/Tabs/Tabs.tsx +1 -1
  57. package/lib/esm/Textarea/index.tsx +18 -1
  58. package/lib/esm/Tree/TreeList.tsx +32 -0
  59. package/lib/esm/Tree/index.tsx +3 -0
  60. package/lib/esm/Utils/hooks/useBoundedDrag.tsx +301 -0
  61. package/lib/esm/Utils/hooks/useDragDropPosition.tsx +420 -0
  62. package/lib/esm/Utils/hooks/useIsMobile.tsx +56 -0
  63. package/lib/esm/index.js +1 -0
  64. package/package.json +1 -1
  65. package/lib/esm/MultipleSelect/ItemList.tsx +0 -323
@@ -603,6 +603,8 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
603
603
  htmlFor: idRes,
604
604
  className: "form-label"
605
605
  }, label)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
606
+ className: "position-relative"
607
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
606
608
  className: "input-group"
607
609
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
608
610
  ref: function ref(node) {
@@ -649,7 +651,7 @@ var ColorPicker = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
649
651
  className: "text-danger"
650
652
  }, "*"))) : '', changedVal === '' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
651
653
  className: "custom-colorpicker__transparent-placeholder"
652
- })) : null));
654
+ })) : null)));
653
655
  });
654
656
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ColorPicker);
655
657
  })();
package/Date/index.js CHANGED
@@ -1055,7 +1055,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1055
1055
  var funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_4__ = __nested_webpack_require_41372__(702);
1056
1056
  /* harmony import */
1057
1057
  var funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__nested_webpack_require_41372__.n(funda_utils_dist_cjs_useDebounce__WEBPACK_IMPORTED_MODULE_4__);
1058
- var _excluded = ["contentRef", "wrapperClassName", "controlClassName", "controlExClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "type", "disabled", "required", "placeholder", "pattern", "readOnly", "defaultValue", "value", "requiredLabel", "label", "units", "name", "step", "min", "max", "src", "size", "minLength", "maxLength", "alt", "inputMode", "id", "appendControl", "aiPredict", "aiPredictRemainingTextRGB", "aiPredictConfirmKey", "aiPredictFetchFuncAsync", "aiPredictFetchFuncMethod", "aiPredictFetchFuncMethodParams", "aiPredictFetchCallback", "iconLeft", "iconRight", "autoComplete", "autoCapitalize", "spellCheck", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "onChange", "onBlur", "onFocus", "onPressEnter"];
1058
+ var _excluded = ["contentRef", "wrapperClassName", "controlClassName", "controlExClassName", "controlGroupWrapperClassName", "controlGroupTextClassName", "type", "disabled", "required", "placeholder", "pattern", "readOnly", "defaultValue", "value", "requiredLabel", "label", "units", "name", "step", "min", "max", "src", "size", "minLength", "maxLength", "alt", "inputMode", "id", "appendControl", "aiPredict", "aiPredictRemainingTextRGB", "aiPredictConfirmKey", "aiPredictFetchFuncAsync", "aiPredictFetchFuncMethod", "aiPredictFetchFuncMethodParams", "aiPredictFetchCallback", "iconLeft", "iconRight", "autoComplete", "autoCapitalize", "spellCheck", "style", "tabIndex", "onChangeCallback", "onInputCallback", "onKeyPressedCallback", "onChange", "onBlur", "onFocus", "onPressEnter", "onKeyDown", "onKeyUp"];
1059
1059
  function _regeneratorRuntime() {
1060
1060
  "use strict";
1061
1061
 
@@ -1555,6 +1555,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1555
1555
  onBlur = props.onBlur,
1556
1556
  onFocus = props.onFocus,
1557
1557
  onPressEnter = props.onPressEnter,
1558
+ onKeyDown = props.onKeyDown,
1559
+ onKeyUp = props.onKeyUp,
1558
1560
  attributes = _objectWithoutProperties(props, _excluded);
1559
1561
  var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default()();
1560
1562
  var idRes = id || uniqueID;
@@ -1760,6 +1762,12 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1760
1762
  set: function set(value, cb) {
1761
1763
  setChangedVal("".concat(value));
1762
1764
  cb === null || cb === void 0 ? void 0 : cb();
1765
+ },
1766
+ aiPredictReset: function aiPredictReset() {
1767
+ setTimeout(function () {
1768
+ // Avoid conflicts with other asynchronous states, resulting in invalid clearing
1769
+ setCurrentSuggestion('');
1770
+ }, 0);
1763
1771
  }
1764
1772
  };
1765
1773
  }, [contentRef]);
@@ -1823,6 +1831,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1823
1831
  }
1824
1832
 
1825
1833
  function handleKeyPressed(event) {
1834
+ onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event, valRef.current);
1826
1835
  if (typeof onKeyPressedCallback === 'function') {
1827
1836
  var newData = onKeyPressedCallback(event, valRef.current);
1828
1837
  if (newData) setChangedVal(newData); // Avoid the error "react checkbox changing an uncontrolled input to be controlled"
@@ -1866,6 +1875,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1866
1875
  setCurrentSuggestion(tempMatchedSuggestion[currentSuggestionIndex.current] || '');
1867
1876
  }
1868
1877
  }
1878
+ function handleKeyUp(event) {
1879
+ onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp(event, valRef.current);
1880
+ }
1869
1881
  (0, react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
1870
1882
  // update default value
1871
1883
  //--------------
@@ -1957,6 +1969,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
1957
1969
  }
1958
1970
  },
1959
1971
  onKeyDown: handleKeyPressed,
1972
+ onKeyUp: handleKeyUp,
1960
1973
  onCompositionStart: handleComposition,
1961
1974
  onCompositionUpdate: handleComposition,
1962
1975
  onCompositionEnd: handleComposition,
@@ -0,0 +1,188 @@
1
+ /* ======================================================
2
+ <!-- DragDrop List -->
3
+ /* ====================================================== */
4
+ .custom-draggable-list {
5
+ --custom-draggable-content-bg: transparent;
6
+ --custom-draggable-content-color: inherit;
7
+ --custom-draggable-border-color: #ddd;
8
+ --custom-draggable-wrapper-radius: 0.25rem;
9
+ --custom-draggable-control-radius: 0.25rem;
10
+ --custom-draggable-primary-color: #ffa940;
11
+ --custom-draggable-content-diff-bg: #fafafa;
12
+ --custom-draggable-content-diff-border-color: #d9d9d9;
13
+ --custom-draggable-control-fs: 0.75rem;
14
+ --custom-draggable-control-w: 100px;
15
+ --custom-draggable-btn-confirm-bg: #52c41a;
16
+ --custom-draggable-btn-cancel-bg: #ff4d4f;
17
+ --custom-draggable-btn-color: #fff;
18
+ list-style: none;
19
+ padding: 0;
20
+ margin: 0;
21
+ width: 100%;
22
+ position: relative;
23
+ border: 1px solid var(--custom-draggable-border-color);
24
+ border-radius: var(--custom-draggable-wrapper-radius);
25
+ /* Fix the problem that mobile terminals cannot be touched, DO NOT USE "<svg>" */
26
+ /* FORM */
27
+ }
28
+ .custom-draggable-list li {
29
+ margin: 0;
30
+ padding: 0;
31
+ }
32
+ .custom-draggable-list .custom-draggable-list__item {
33
+ padding: 0;
34
+ position: relative;
35
+ transition: transform 0.15s ease;
36
+ position: relative;
37
+ }
38
+ .custom-draggable-list .custom-draggable-list__item .custom-draggable-list__itemcontent {
39
+ padding: 10px 15px;
40
+ background: var(--custom-draggable-content-bg);
41
+ color: var(--custom-draggable-content-color);
42
+ border-bottom: 1px solid var(--custom-draggable-border-color);
43
+ display: flex;
44
+ align-items: center;
45
+ user-select: none;
46
+ transition: all 0.15s ease;
47
+ }
48
+ .custom-draggable-list .custom-draggable-list__item .custom-draggable-list__itemcontent .custom-draggable-list__itemcontent-inner {
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: space-between;
52
+ width: 100%;
53
+ }
54
+ .custom-draggable-list .custom-draggable-list__item:last-child .custom-draggable-list__itemcontent {
55
+ border-bottom: none;
56
+ }
57
+ .custom-draggable-list .custom-draggable-list__item.disabled {
58
+ pointer-events: none !important;
59
+ opacity: 0.4 !important;
60
+ }
61
+ .custom-draggable-list.alternate-collapse .custom-draggable-list__collapse-arrow {
62
+ cursor: pointer;
63
+ display: inline-block;
64
+ width: 20px;
65
+ text-align: center;
66
+ user-select: none;
67
+ margin-left: 0.2rem;
68
+ }
69
+ .custom-draggable-list.alternate-collapse .custom-draggable-list__collapse-arrow svg {
70
+ transition: all 0.15s ease;
71
+ }
72
+ .custom-draggable-list.alternate-collapse .custom-draggable-list__collapse-arrow:hover {
73
+ opacity: 0.7;
74
+ }
75
+ .custom-draggable-list.alternate-collapse .custom-draggable-list__item.has-children {
76
+ position: relative;
77
+ }
78
+ .custom-draggable-list.alternate-collapse .custom-draggable-list__item.collapsed .custom-draggable-list__collapse-arrow svg {
79
+ transform: rotate(-90deg);
80
+ }
81
+ .custom-draggable-list .custom-draggable-list__item.draggable .custom-draggable-list__itemcontent {
82
+ padding-left: 1.5em;
83
+ }
84
+ .custom-draggable-list.handle-pos-right .custom-draggable-list__item.draggable .custom-draggable-list__itemcontent, .custom-draggable-list.icon-hide .custom-draggable-list__item.draggable .custom-draggable-list__itemcontent {
85
+ padding-left: 0.5rem;
86
+ }
87
+ .custom-draggable-list .custom-draggable-list__item.block.draggable {
88
+ cursor: move;
89
+ }
90
+ .custom-draggable-list .custom-draggable-list__item.dragging .custom-draggable-list__itemcontent {
91
+ background: #fff9e6;
92
+ border: 1px dashed #ffd591;
93
+ opacity: 0.8;
94
+ }
95
+ .custom-draggable-list .custom-draggable-list__item.drag-over .custom-draggable-list__itemcontent {
96
+ background: #fff9e6;
97
+ border: 2px solid #ffd591;
98
+ }
99
+ .custom-draggable-list .custom-draggable-list__item.drag-over-top::before {
100
+ content: "";
101
+ position: absolute;
102
+ top: -3px;
103
+ left: 0;
104
+ right: 0;
105
+ height: 2px;
106
+ background: var(--custom-draggable-primary-color);
107
+ border-radius: 1px;
108
+ }
109
+ .custom-draggable-list .custom-draggable-list__item.drag-over-bottom::after {
110
+ content: "";
111
+ position: absolute;
112
+ bottom: -3px;
113
+ left: 0;
114
+ right: 0;
115
+ height: 2px;
116
+ background: var(--custom-draggable-primary-color);
117
+ border-radius: 1px;
118
+ }
119
+ .custom-draggable-list .custom-draggable-list__handle {
120
+ color: #999;
121
+ padding: 5px;
122
+ cursor: move;
123
+ transition: color 0.15s ease;
124
+ position: absolute;
125
+ width: 1em;
126
+ height: 1em;
127
+ top: 50%;
128
+ transform: translateY(-50%);
129
+ z-index: 1;
130
+ display: flex;
131
+ align-items: center;
132
+ font-size: 0.75rem;
133
+ }
134
+ .custom-draggable-list .custom-draggable-list__handle.left {
135
+ left: 0;
136
+ }
137
+ .custom-draggable-list .custom-draggable-list__handle.right {
138
+ right: 1em;
139
+ }
140
+ .custom-draggable-list .custom-draggable-list__item,
141
+ .custom-draggable-list .custom-draggable-list__itemcontent {
142
+ transition: all 0.15s ease;
143
+ }
144
+ .custom-draggable-list .custom-draggable-list__item.editing .custom-draggable-list__itemcontent, .custom-draggable-list .custom-draggable-list__item:hover .custom-draggable-list__itemcontent {
145
+ background: var(--custom-draggable-content-diff-bg);
146
+ border-color: var(--custom-draggable-content-diff-border-color);
147
+ }
148
+ .custom-draggable-list .custom-draggable-list__item.block:hover .custom-draggable-list__handle {
149
+ color: var(--custom-draggable-primary-color);
150
+ }
151
+ .custom-draggable-list.handle .custom-draggable-list__handle:hover {
152
+ color: var(--custom-draggable-primary-color);
153
+ }
154
+ .custom-draggable-list .custom-draggable-list__edit-form {
155
+ display: flex;
156
+ flex: 1;
157
+ gap: 10px;
158
+ align-items: center;
159
+ }
160
+ .custom-draggable-list .custom-draggable-list__edit-form input {
161
+ padding: 4px 8px;
162
+ border: 1px solid var(--custom-draggable-border-color);
163
+ border-radius: var(--custom-draggable-control-radius);
164
+ font-size: var(--custom-draggable-control-fs);
165
+ width: var(--custom-draggable-control-w);
166
+ }
167
+ .custom-draggable-list .custom-draggable-list__edit-buttons {
168
+ display: flex;
169
+ gap: 5px;
170
+ }
171
+ .custom-draggable-list .custom-draggable-list__edit-buttons button {
172
+ padding: 0.2rem 0.5rem;
173
+ border: none;
174
+ font-size: 0.75rem;
175
+ border-radius: var(--custom-draggable-control-radius);
176
+ cursor: pointer;
177
+ }
178
+ .custom-draggable-list .custom-draggable-list__edit-buttons button:first-child {
179
+ background: var(--custom-draggable-btn-confirm-bg);
180
+ color: var(--custom-draggable-btn-color);
181
+ }
182
+ .custom-draggable-list .custom-draggable-list__edit-buttons button:last-child {
183
+ background: var(--custom-draggable-btn-cancel-bg);
184
+ color: var(--custom-draggable-btn-color);
185
+ }
186
+ .custom-draggable-list .custom-draggable-list__edit-buttons button:hover {
187
+ opacity: 0.8;
188
+ }
@@ -0,0 +1,44 @@
1
+ import React from 'react';
2
+ export interface ListItem {
3
+ id: number;
4
+ parentId?: number;
5
+ label: string;
6
+ listItemLabel: string;
7
+ value: string;
8
+ queryString: string;
9
+ depth?: number;
10
+ children?: ListItem[];
11
+ disabled?: boolean;
12
+ appendControl?: React.ReactNode;
13
+ [key: string]: any;
14
+ }
15
+ export interface DragDropListProps {
16
+ wrapperClassName?: string;
17
+ prefix?: string;
18
+ data?: ListItem[];
19
+ draggable?: boolean;
20
+ handleHide?: boolean;
21
+ handleIcon?: string;
22
+ handlePos?: 'left' | 'right';
23
+ dragMode?: 'handle' | 'block';
24
+ editable?: boolean;
25
+ itemStyle?: React.CSSProperties;
26
+ hierarchical?: boolean;
27
+ indentation?: string;
28
+ doubleIndent?: boolean;
29
+ alternateCollapse?: boolean;
30
+ arrow?: React.ReactNode;
31
+ onUpdate?: (items: ListItem[], curId: number) => void;
32
+ }
33
+ export interface EditValue {
34
+ [propName: string]: string | number;
35
+ }
36
+ export interface TouchOffset {
37
+ x: number;
38
+ y: number;
39
+ }
40
+ export interface OptionConfig {
41
+ [propName: string]: string | number | boolean | Function | any[];
42
+ }
43
+ declare const DragDropList: React.ForwardRefExoticComponent<DragDropListProps & React.RefAttributes<unknown>>;
44
+ export default DragDropList;