@canlooks/can-ui 0.0.63 → 0.0.65

package/dist/cjs/components/popper/popper.js

@@ -38,6 +38,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
     const unmounted = (0, utils_1.useUnmounted)();
     const openHolding = (0, react_1.useRef)(0);
     const hold = (open) => {
+        console.log('hold', open);
         return open ? ++openHolding.current
             : openHolding.current > 0 ? --openHolding.current
                 : openHolding.current;

package/dist/cjs/components/upload/dropArea.js

@@ -7,7 +7,7 @@ const dropArea_style_1 = require("./dropArea.style");
 const utils_1 = require("../../utils");
 const __1 = require("../..");
 const faInbox_1 = require("@fortawesome/free-solid-svg-icons/faInbox");
-exports.DropArea = (0, react_1.memo)(({ description = '将文件拖拽到这里', onDrop, ...props }) => {
+exports.DropArea = (0, react_1.memo)(({ description = '点击选择文件，或将文件拖拽到这里', onDrop, ...props }) => {
     const [draggingOver, setDraggingOver] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         const fn = (e) => e.preventDefault();

package/dist/cjs/components/upload/dropArea.style.js

@@ -7,7 +7,7 @@ exports.classes = (0, utils_1.defineInnerClasses)('upload-drop-area', [
     'icon',
     'description'
 ]);
-exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius, text, colors }) => (0, react_1.css) `
+exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius, text, colors, easing }) => (0, react_1.css) `
     height: 100px;
     display: flex;
     gap: ${spacing[1]}px;
@@ -15,10 +15,21 @@ exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius,
     align-items: center;
     justify-content: center;
     border: 1px dashed ${divider};
-    background-color: ${gray(.1)};
     border-radius: ${borderRadius}px;
     color: ${text.disabled};
+    cursor: pointer;
+    background-color: ${gray(.1)};
+    transition: background-color .25s ${easing.easeOut};
 
+    &:hover {
+        background-color: ${gray(.15)};
+    }
+
+    &:active {
+        background-color: ${gray(.08)};
+        transition: background-color 0s;
+    }
+    
     .${exports.classes.icon}, .${exports.classes.description} {
         pointer-events: none;
     }

package/dist/cjs/components/upload/upload.js

@@ -96,8 +96,10 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
         newValue && setInnerValue(newValue);
     };
     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'
-                        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showButton &&
-                                    (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 => {
+                        ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [droppable
+                                    ? (0, jsx_runtime_1.jsx)(dropArea_1.DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
+                                    : showButton &&
+                                        (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 => {
                                                 r
                                                     ? itemRefs.current.set(file.id, r)
                                                     : itemRefs.current.delete(file.id);

package/dist/esm/components/popper/popper.js

@@ -35,6 +35,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const unmounted = useUnmounted();
     const openHolding = useRef(0);
     const hold = (open) => {
+        console.log('hold', open);
         return open ? ++openHolding.current
             : openHolding.current > 0 ? --openHolding.current
                 : openHolding.current;

package/dist/esm/components/upload/dropArea.js

@@ -4,7 +4,7 @@ import { classes, style } from './dropArea.style';
 import { clsx } from '../../utils';
 import { Icon } from '../..';
 import { faInbox } from '@fortawesome/free-solid-svg-icons/faInbox';
-export const DropArea = memo(({ description = '将文件拖拽到这里', onDrop, ...props }) => {
+export const DropArea = memo(({ description = '点击选择文件，或将文件拖拽到这里', onDrop, ...props }) => {
     const [draggingOver, setDraggingOver] = useState(false);
     useEffect(() => {
         const fn = (e) => e.preventDefault();

package/dist/esm/components/upload/dropArea.style.js

@@ -4,7 +4,7 @@ export const classes = defineInnerClasses('upload-drop-area', [
     'icon',
     'description'
 ]);
-export const style = defineCss(({ spacing, gray, divider, borderRadius, text, colors }) => css `
+export const style = defineCss(({ spacing, gray, divider, borderRadius, text, colors, easing }) => css `
     height: 100px;
     display: flex;
     gap: ${spacing[1]}px;
@@ -12,10 +12,21 @@ export const style = defineCss(({ spacing, gray, divider, borderRadius, text, co
     align-items: center;
     justify-content: center;
     border: 1px dashed ${divider};
-    background-color: ${gray(.1)};
     border-radius: ${borderRadius}px;
     color: ${text.disabled};
+    cursor: pointer;
+    background-color: ${gray(.1)};
+    transition: background-color .25s ${easing.easeOut};
 
+    &:hover {
+        background-color: ${gray(.15)};
+    }
+
+    &:active {
+        background-color: ${gray(.08)};
+        transition: background-color 0s;
+    }
+    
     .${classes.icon}, .${classes.description} {
         pointer-events: none;
     }

package/dist/esm/components/upload/upload.js

@@ -93,8 +93,10 @@ export const Upload = memo(({ inputProps, type = 'file', accept = type === 'imag
         newValue && setInnerValue(newValue);
     };
     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'
-                        ? _jsxs(_Fragment, { children: [showButton &&
-                                    _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 => {
+                        ? _jsxs(_Fragment, { children: [droppable
+                                    ? _jsx(DropArea, { onClick: () => innerInputRef.current.click(), onDrop: changeFn })
+                                    : showButton &&
+                                        _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 => {
                                                 r
                                                     ? itemRefs.current.set(file.id, r)
                                                     : itemRefs.current.delete(file.id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",