@canlooks/can-ui 0.0.63 → 0.0.64
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/dist/cjs/components/popper/popper.js +1 -0
- package/dist/cjs/components/upload/dropArea.js +3 -2
- package/dist/cjs/components/upload/dropArea.style.js +18 -1
- package/dist/cjs/components/upload/upload.js +4 -2
- package/dist/esm/components/popper/popper.js +1 -0
- package/dist/esm/components/upload/dropArea.js +3 -2
- package/dist/esm/components/upload/dropArea.style.js +18 -1
- package/dist/esm/components/upload/upload.js +4 -2
- package/package.json +1 -1
|
@@ -38,6 +38,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
|
|
|
38
38
|
const unmounted = (0, utils_1.useUnmounted)();
|
|
39
39
|
const openHolding = (0, react_1.useRef)(0);
|
|
40
40
|
const hold = (open) => {
|
|
41
|
+
console.log('hold', open);
|
|
41
42
|
return open ? ++openHolding.current
|
|
42
43
|
: openHolding.current > 0 ? --openHolding.current
|
|
43
44
|
: openHolding.current;
|
|
@@ -7,7 +7,8 @@ const dropArea_style_1 = require("./dropArea.style");
|
|
|
7
7
|
const utils_1 = require("../../utils");
|
|
8
8
|
const __1 = require("../..");
|
|
9
9
|
const faInbox_1 = require("@fortawesome/free-solid-svg-icons/faInbox");
|
|
10
|
-
|
|
10
|
+
const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
|
|
11
|
+
exports.DropArea = (0, react_1.memo)(({ description = '点击选择文件，或将文件拖拽到这里', onDrop, ...props }) => {
|
|
11
12
|
const [draggingOver, setDraggingOver] = (0, react_1.useState)(false);
|
|
12
13
|
(0, react_1.useEffect)(() => {
|
|
13
14
|
const fn = (e) => e.preventDefault();
|
|
@@ -33,5 +34,5 @@ exports.DropArea = (0, react_1.memo)(({ description = '将文件拖拽到这里'
|
|
|
33
34
|
}, onDragLeave: e => {
|
|
34
35
|
props.onDragLeave?.(e);
|
|
35
36
|
setDraggingOver(false);
|
|
36
|
-
}, onDrop: dropHandler, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: faInbox_1.faInbox, className: dropArea_style_1.classes.icon }), (0, jsx_runtime_1.jsx)("div", { className: dropArea_style_1.classes.description, children: description })] }));
|
|
37
|
+
}, onDrop: dropHandler, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: faInbox_1.faInbox, className: dropArea_style_1.classes.icon, "data-hover": "false" }), (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faPlus_1.faPlus, className: dropArea_style_1.classes.icon, "data-hover": "true" }), (0, jsx_runtime_1.jsx)("div", { className: dropArea_style_1.classes.description, children: description })] }));
|
|
37
38
|
});
|
|
@@ -18,13 +18,30 @@ exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius,
|
|
|
18
18
|
background-color: ${gray(.1)};
|
|
19
19
|
border-radius: ${borderRadius}px;
|
|
20
20
|
color: ${text.disabled};
|
|
21
|
-
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
|
|
22
23
|
.${exports.classes.icon}, .${exports.classes.description} {
|
|
23
24
|
pointer-events: none;
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
.${exports.classes.icon} {
|
|
27
28
|
font-size: ${30 / 14}em;
|
|
29
|
+
|
|
30
|
+
&[data-hover="true"] {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:hover {
|
|
36
|
+
.${exports.classes.icon} {
|
|
37
|
+
&[data-hover="false"] {
|
|
38
|
+
display: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&[data-hover="true"] {
|
|
42
|
+
display: block;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
28
45
|
}
|
|
29
46
|
|
|
30
47
|
&[data-over=true] {
|
|
@@ -96,8 +96,10 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
|
|
|
96
96
|
newValue && setInnerValue(newValue);
|
|
97
97
|
};
|
|
98
98
|
return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: wrapperRef, css: upload_style_1.style, className: (0, utils_1.clsx)(upload_style_1.classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputProps?.ref), className: (0, utils_1.clsx)(upload_style_1.classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
|
|
99
|
-
? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [
|
|
100
|
-
|
|
99
|
+
? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [droppable
|
|
100
|
+
? (0, jsx_runtime_1.jsx)(dropArea_1.DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
|
|
101
|
+
: showButton &&
|
|
102
|
+
(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faUpload_1.faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.files, children: innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, children: (0, jsx_runtime_1.jsx)(fileItem_1.FileItem, { ref: r => {
|
|
101
103
|
r
|
|
102
104
|
? itemRefs.current.set(file.id, r)
|
|
103
105
|
: itemRefs.current.delete(file.id);
|
|
@@ -35,6 +35,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
|
|
|
35
35
|
const unmounted = useUnmounted();
|
|
36
36
|
const openHolding = useRef(0);
|
|
37
37
|
const hold = (open) => {
|
|
38
|
+
console.log('hold', open);
|
|
38
39
|
return open ? ++openHolding.current
|
|
39
40
|
: openHolding.current > 0 ? --openHolding.current
|
|
40
41
|
: openHolding.current;
|
|
@@ -4,7 +4,8 @@ import { classes, style } from './dropArea.style';
|
|
|
4
4
|
import { clsx } from '../../utils';
|
|
5
5
|
import { Icon } from '../..';
|
|
6
6
|
import { faInbox } from '@fortawesome/free-solid-svg-icons/faInbox';
|
|
7
|
-
|
|
7
|
+
import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
|
|
8
|
+
export const DropArea = memo(({ description = '点击选择文件，或将文件拖拽到这里', onDrop, ...props }) => {
|
|
8
9
|
const [draggingOver, setDraggingOver] = useState(false);
|
|
9
10
|
useEffect(() => {
|
|
10
11
|
const fn = (e) => e.preventDefault();
|
|
@@ -30,5 +31,5 @@ export const DropArea = memo(({ description = '将文件拖拽到这里', onDrop
|
|
|
30
31
|
}, onDragLeave: e => {
|
|
31
32
|
props.onDragLeave?.(e);
|
|
32
33
|
setDraggingOver(false);
|
|
33
|
-
}, onDrop: dropHandler, children: [_jsx(Icon, { icon: faInbox, className: classes.icon }), _jsx("div", { className: classes.description, children: description })] }));
|
|
34
|
+
}, onDrop: dropHandler, children: [_jsx(Icon, { icon: faInbox, className: classes.icon, "data-hover": "false" }), _jsx(Icon, { icon: faPlus, className: classes.icon, "data-hover": "true" }), _jsx("div", { className: classes.description, children: description })] }));
|
|
34
35
|
});
|
|
@@ -15,13 +15,30 @@ export const style = defineCss(({ spacing, gray, divider, borderRadius, text, co
|
|
|
15
15
|
background-color: ${gray(.1)};
|
|
16
16
|
border-radius: ${borderRadius}px;
|
|
17
17
|
color: ${text.disabled};
|
|
18
|
-
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
|
|
19
20
|
.${classes.icon}, .${classes.description} {
|
|
20
21
|
pointer-events: none;
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
.${classes.icon} {
|
|
24
25
|
font-size: ${30 / 14}em;
|
|
26
|
+
|
|
27
|
+
&[data-hover="true"] {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&:hover {
|
|
33
|
+
.${classes.icon} {
|
|
34
|
+
&[data-hover="false"] {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&[data-hover="true"] {
|
|
39
|
+
display: block;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
25
42
|
}
|
|
26
43
|
|
|
27
44
|
&[data-over=true] {
|
|
@@ -93,8 +93,10 @@ export const Upload = memo(({ inputProps, type = 'file', accept = type === 'imag
|
|
|
93
93
|
newValue && setInnerValue(newValue);
|
|
94
94
|
};
|
|
95
95
|
return (_jsxs("div", { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [_jsx("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: cloneRef(innerInputRef, inputProps?.ref), className: clsx(classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
|
|
96
|
-
? _jsxs(_Fragment, { children: [
|
|
97
|
-
|
|
96
|
+
? _jsxs(_Fragment, { children: [droppable
|
|
97
|
+
? _jsx(DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
|
|
98
|
+
: showButton &&
|
|
99
|
+
_jsx(Button, { variant: "outlined", prefix: _jsx(Icon, { icon: faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), _jsx(TransitionGroup, { className: classes.files, children: innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, children: _jsx(FileItem, { ref: r => {
|
|
98
100
|
r
|
|
99
101
|
? itemRefs.current.set(file.id, r)
|
|
100
102
|
: itemRefs.current.delete(file.id);
|