@canlooks/can-ui 0.0.93 → 0.0.95

package/dist/cjs/components/drawer/drawer.d.ts

@@ -15,6 +15,8 @@ export interface DrawerProps extends Omit<OverlayBaseProps, 'title'> {
     defaultOpen?: boolean;
     onClose?(reason: DrawerCloseReason): void;
     slideProps?: TransitionBaseProps<HTMLDivElement>;
+    onScrollToTop?(): void;
+    onScrollToBottom?(): void;
 }
 export type DrawerCloseReason = 'escape' | 'closed' | 'maskClicked';
-export declare function Drawer({ title, footer, showClose, size, placement, maskClosable, escapeClosable, defaultOpen, open, onClose, slideProps, ...props }: DrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Drawer({ title, footer, showClose, size, placement, maskClosable, escapeClosable, defaultOpen, open, onClose, slideProps, onScrollToTop, onScrollToBottom, ...props }: DrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/drawer/drawer.js

@@ -16,7 +16,7 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%', md: '50%', lg: '25%' }, placement = 'right', maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, slideProps, ...props }) {
+function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%', md: '50%', lg: '25%' }, placement = 'right', maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, slideProps, onScrollToTop, onScrollToBottom, ...props }) {
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
@@ -38,6 +38,12 @@ function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%
     const onScroll = () => {
         const el = bodyRef.current;
         el.dataset.bordered = (el.scrollHeight > el.clientHeight && el.scrollTop > 0).toString();
+        if (el.scrollTop === 0) {
+            onScrollToTop?.();
+        }
+        else if (el.scrollTop === el.scrollHeight - el.clientHeight) {
+            onScrollToBottom?.();
+        }
     };
     (0, react_1.useEffect)(() => {
         if (innerOpen.current) {

package/dist/cjs/components/treeSelect/treeSelect.js

@@ -14,6 +14,7 @@ const treeSelect_style_1 = require("./treeSelect.style");
 const selectionContext_1 = require("../selectionContext");
 const icon_1 = require("../icon");
 const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
+const placeholder_1 = require("../placeholder");
 exports.TreeSelect = (0, react_1.memo)(({ inputProps, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
 // 以下属性转发至<InputBase/>
 placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
@@ -71,7 +72,9 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
         }
         return ((0, jsx_runtime_1.jsx)("div", { className: treeSelect_style_1.classes.backfillWrap, children: optionsMap.get(innerValue)?.[props.labelKey] ?? innerValue }));
     };
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: (0, jsx_runtime_1.jsx)(tree_1.Tree, { primaryKey: "value", ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: options?.length
+            ? (0, jsx_runtime_1.jsx)(tree_1.Tree, { primaryKey: "value", ...props, nodes: options, value: innerValue, onChange: setInnerValue })
+            : (0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, {}), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
         }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { clearable: !!props.multiple, css: treeSelect_style_1.style, className: (0, utils_1.clsx)(treeSelect_style_1.classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: inputBaseProps => (0, jsx_runtime_1.jsxs)("div", { className: treeSelect_style_1.classes.contentWrap, children: [(0, utils_1.isNoValue)(innerValue)

package/dist/cjs/components/typography/typography.js

@@ -59,12 +59,6 @@ exports.Typography = (0, react_1.memo)(({ component: Component = 'p', color = 't
      * 省略
      */
     const [expanded, setExpanded] = (0, react_1.useState)(false);
-    (0, react_1.useLayoutEffect)(() => {
-        if (textRef.current && ellipsisRows > 1) {
-            const { lineHeight } = getComputedStyle(textRef.current);
-            textRef.current.style.height = parseFloat(lineHeight) * ellipsisRows + 'px';
-        }
-    });
     const style = (0, typography_style_1.useStyle)({ color: color || 'text.primary' });
     const EditComponent = multipleRows ? textarea_1.Textarea : input_1.Input;
     return editing

package/dist/esm/components/drawer/drawer.d.ts

@@ -15,6 +15,8 @@ export interface DrawerProps extends Omit<OverlayBaseProps, 'title'> {
     defaultOpen?: boolean;
     onClose?(reason: DrawerCloseReason): void;
     slideProps?: TransitionBaseProps<HTMLDivElement>;
+    onScrollToTop?(): void;
+    onScrollToBottom?(): void;
 }
 export type DrawerCloseReason = 'escape' | 'closed' | 'maskClicked';
-export declare function Drawer({ title, footer, showClose, size, placement, maskClosable, escapeClosable, defaultOpen, open, onClose, slideProps, ...props }: DrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Drawer({ title, footer, showClose, size, placement, maskClosable, escapeClosable, defaultOpen, open, onClose, slideProps, onScrollToTop, onScrollToBottom, ...props }: DrawerProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/drawer/drawer.js

@@ -13,7 +13,7 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-export function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%', md: '50%', lg: '25%' }, placement = 'right', maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, slideProps, ...props }) {
+export function Drawer({ title, footer, showClose = true, size = { xs: '100%', sm: '75%', md: '50%', lg: '25%' }, placement = 'right', maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, slideProps, onScrollToTop, onScrollToBottom, ...props }) {
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
@@ -35,6 +35,12 @@ export function Drawer({ title, footer, showClose = true, size = { xs: '100%', s
     const onScroll = () => {
         const el = bodyRef.current;
         el.dataset.bordered = (el.scrollHeight > el.clientHeight && el.scrollTop > 0).toString();
+        if (el.scrollTop === 0) {
+            onScrollToTop?.();
+        }
+        else if (el.scrollTop === el.scrollHeight - el.clientHeight) {
+            onScrollToBottom?.();
+        }
     };
     useEffect(() => {
         if (innerOpen.current) {

package/dist/esm/components/treeSelect/treeSelect.js

@@ -11,6 +11,7 @@ import { classes, style } from './treeSelect.style';
 import { useSelection } from '../selectionContext';
 import { Icon } from '../icon';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import { Placeholder } from '../placeholder';
 export const TreeSelect = memo(({ inputProps, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
 // 以下属性转发至<InputBase/>
 placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
@@ -68,7 +69,9 @@ placeholder = '请选择', autoFocus, clearable, onClear, ...props }) => {
         }
         return (_jsx("div", { className: classes.backfillWrap, children: optionsMap.get(innerValue)?.[props.labelKey] ?? innerValue }));
     };
-    return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { primaryKey: "value", ...props, nodes: options, value: innerValue, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
+    return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: options?.length
+            ? _jsx(Tree, { primaryKey: "value", ...props, nodes: options, value: innerValue, onChange: setInnerValue })
+            : _jsx(Placeholder, {}), ...popperProps, popperRef: popperRef, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
         }, children: _jsx(InputBase, { clearable: !!props.multiple, css: style, className: clsx(classes.root, props.className), "data-focused": open, value: innerValue, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [isNoValue(innerValue)

package/dist/esm/components/typography/typography.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { memo, useLayoutEffect, useRef, useState } from 'react';
+import { memo, useRef, useState } from 'react';
 import { clsx, cloneRef, useUnmounted } from '../../utils';
 import { useStyle, classes, editStyle } from './typography.style';
 import { Button } from '../button';
@@ -56,12 +56,6 @@ export const Typography = memo(({ component: Component = 'p', color = 'text.prim
      * 省略
      */
     const [expanded, setExpanded] = useState(false);
-    useLayoutEffect(() => {
-        if (textRef.current && ellipsisRows > 1) {
-            const { lineHeight } = getComputedStyle(textRef.current);
-            textRef.current.style.height = parseFloat(lineHeight) * ellipsisRows + 'px';
-        }
-    });
     const style = useStyle({ color: color || 'text.primary' });
     const EditComponent = multipleRows ? Textarea : Input;
     return editing

package/package.json

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