@laser-ui/components 0.0.5 → 0.1.1

package/time-picker/TimePicker.js

@@ -5,13 +5,13 @@ import { ReactComponent as CancelFilled } from '@material-design-icons/svg/fille
 import { ReactComponent as AccessTimeOutlined } from '@material-design-icons/svg/outlined/access_time.svg';
 import { ReactComponent as SwapHorizOutlined } from '@material-design-icons/svg/outlined/swap_horiz.svg';
 import { isNull, isUndefined } from 'lodash';
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { TimePickerPanel } from './internal/TimePickerPanel';
 import { deepCompareDate, orderTime } from './utils';
 import { CLASSES } from './vars';
 import { Button } from '../button';
 import dayjs from '../dayjs';
-import { useComponentProps, useControlled, useDesign, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useControlled, useDesign, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
 import { Portal } from '../internal/portal';
 import { Transition } from '../internal/transition';
@@ -23,6 +23,7 @@ export const TimePicker = forwardRef((props, ref) => {
     const _c = useComponentProps('TimePicker', props), { styleOverrides, styleProvider, formControl, model, defaultModel, visible: visibleProp, defaultVisible, placeholder, range = false, format = 'HH:mm:ss', order: orderProp = 'ascend', clearable: clearableProp = false, size: sizeProp, disabled: disabledProp = false, config, escClosable = true, inputRef, inputRender, onModelChange, onVisibleChange, onClear, afterVisibleChange } = _c, restProps = __rest(_c, ["styleOverrides", "styleProvider", "formControl", "model", "defaultModel", "visible", "defaultVisible", "placeholder", "range", "format", "order", "clearable", "size", "disabled", "config", "escClosable", "inputRef", "inputRender", "onModelChange", "onVisibleChange", "onClear", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { 'time-picker': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker'], 'time-picker-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['time-picker-popup'] }, styleOverrides);
+    const sheet = useJSS();
     const { t } = useTranslation();
     const forceUpdate = useForceUpdate();
     const async = useAsync();
@@ -104,11 +105,7 @@ export const TimePicker = forwardRef((props, ref) => {
     const { size, disabled } = useScopedProps({ size: sizeProp, disabled: disabledProp || (formControl === null || formControl === void 0 ? void 0 : formControl.control.disabled) });
     const maxZIndex = useMaxIndex(visible);
     const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const [transformOrigin, setTransformOrigin] = useState();
-    const [popupPositionStyle, setPopupPositionStyle] = useState({
-        top: '-200vh',
-        left: '-200vw',
-    });
+    const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
         if (visible && boxRef.current && popupRef.current) {
             const height = popupRef.current.offsetHeight;
@@ -118,12 +115,16 @@ export const TimePicker = forwardRef((props, ref) => {
                 placement: 'bottom-left',
                 inWindow: WINDOW_SPACE,
             });
-            setTransformOrigin(position.transformOrigin);
-            setPopupPositionStyle({
+            transformOrigin.current = position.transformOrigin;
+            if (sheet.classes.position) {
+                popupRef.current.classList.toggle(sheet.classes.position, false);
+            }
+            sheet.replaceRule('position', {
                 top: position.top,
                 left: position.left,
                 maxWidth,
             });
+            popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
@@ -304,7 +305,7 @@ export const TimePicker = forwardRef((props, ref) => {
                             case 'entering':
                                 transitionStyle = {
                                     transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
-                                    transformOrigin,
+                                    transformOrigin: transformOrigin.current,
                                 };
                                 break;
                             case 'leaving':
@@ -312,7 +313,7 @@ export const TimePicker = forwardRef((props, ref) => {
                                     transform: 'scaleY(0.7)',
                                     opacity: 0,
                                     transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                    transformOrigin,
+                                    transformOrigin: transformOrigin.current,
                                 };
                                 break;
                             case 'leaved':
@@ -322,7 +323,7 @@ export const TimePicker = forwardRef((props, ref) => {
                                 break;
                         }
                         return (_jsxs("div", Object.assign({}, mergeCS(styled('time-picker-popup'), {
-                            style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                            style: Object.assign({ zIndex }, transitionStyle),
                         }), { ref: popupRef, onMouseDown: (e) => {
                                 preventBlur(e);
                             }, onMouseUp: (e) => {

package/tooltip/Tooltip.js

@@ -2,9 +2,9 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEventCallback, useRefExtra } from '@laser-ui/hooks';
 import { isFunction, isUndefined } from 'lodash';
-import { cloneElement, forwardRef, useId, useImperativeHandle, useRef, useState } from 'react';
+import { cloneElement, forwardRef, useId, useImperativeHandle, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';
-import { useComponentProps, useControlled, useMaxIndex, useNamespace, useStyled } from '../hooks';
+import { useComponentProps, useControlled, useJSS, useMaxIndex, useNamespace, useStyled } from '../hooks';
 import { Popup } from '../internal/popup';
 import { Portal } from '../internal/portal';
 import { Transition } from '../internal/transition';
@@ -14,35 +14,38 @@ export const Tooltip = forwardRef((props, ref) => {
     const _b = useComponentProps('Tooltip', props), { children, styleOverrides, styleProvider, title, visible: visibleProp, defaultVisible, trigger = 'hover', placement: placementProp = 'top', placementFixed = false, arrow = true, escClosable = true, gap = 10, inWindow = false, mouseEnterDelay = 150, mouseLeaveDelay = 200, skipFirstTransition = true, destroyAfterClose = true, zIndex: zIndexProp, scrolling, onVisibleChange, afterVisibleChange } = _b, restProps = __rest(_b, ["children", "styleOverrides", "styleProvider", "title", "visible", "defaultVisible", "trigger", "placement", "placementFixed", "arrow", "escClosable", "gap", "inWindow", "mouseEnterDelay", "mouseLeaveDelay", "skipFirstTransition", "destroyAfterClose", "zIndex", "scrolling", "onVisibleChange", "afterVisibleChange"]);
     const namespace = useNamespace();
     const styled = useStyled(CLASSES, { tooltip: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tooltip }, styleOverrides);
+    const sheet = useJSS();
     const uniqueId = useId();
     const id = (_a = restProps.id) !== null && _a !== void 0 ? _a : `${namespace}-tooltip-${uniqueId}`;
     const triggerRef = useRefExtra(() => document.querySelector(`[aria-describedby="${id}"]`));
-    const popupRef = useRef(null);
+    const tooltipRef = useRef(null);
     const scrollingRef = useRefExtra(scrolling);
     const [visible, changeVisible] = useControlled(defaultVisible !== null && defaultVisible !== void 0 ? defaultVisible : false, visibleProp, onVisibleChange);
     const maxZIndex = useMaxIndex(visible);
     const zIndex = !isUndefined(zIndexProp) ? zIndexProp : `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const [popupPositionStyle, setPopupPositionStyle] = useState({
-        top: '-200vh',
-        left: '-200vw',
-    });
-    const [transformOrigin, setTransformOrigin] = useState();
-    const [placement, setPlacement] = useState(placementProp);
+    const transformOrigin = useRef();
+    const placement = useRef(placementProp);
     const updatePosition = useEventCallback(() => {
-        if (visible && triggerRef.current && popupRef.current) {
-            const position = getPopupPosition(triggerRef.current, { width: popupRef.current.offsetWidth, height: popupRef.current.offsetHeight }, {
+        if (visible && triggerRef.current && tooltipRef.current) {
+            const position = getPopupPosition(triggerRef.current, { width: tooltipRef.current.offsetWidth, height: tooltipRef.current.offsetHeight }, {
                 placement: placementProp,
-                placementFallback: placement,
+                placementFallback: placement.current,
                 placementFixed,
                 gap,
                 inWindow,
             });
-            setPopupPositionStyle({
+            transformOrigin.current = position.transformOrigin;
+            tooltipRef.current.classList.toggle(`${namespace}-tooltip--${placement.current}`, false);
+            placement.current = position.placement;
+            tooltipRef.current.classList.toggle(`${namespace}-tooltip--${placement.current}`, true);
+            if (sheet.classes.position) {
+                tooltipRef.current.classList.toggle(sheet.classes.position, false);
+            }
+            sheet.replaceRule('position', {
                 top: position.top,
                 left: position.left,
             });
-            setTransformOrigin(position.transformOrigin);
-            setPlacement(position.placement);
+            tooltipRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     useImperativeHandle(ref, () => ({
@@ -51,7 +54,7 @@ export const Tooltip = forwardRef((props, ref) => {
     return (_jsx(Popup, { visible: visible, trigger: trigger, mouseEnterDelay: mouseEnterDelay, mouseLeaveDelay: mouseLeaveDelay, updatePosition: {
             fn: updatePosition,
             triggerRef,
-            popupRef,
+            popupRef: tooltipRef,
             containerRefs: [scrollingRef],
         }, onVisibleChange: changeVisible, children: ({ renderTrigger, renderPopup }) => {
             const render = (el) => renderTrigger(cloneElement(el, {
@@ -87,7 +90,7 @@ export const Tooltip = forwardRef((props, ref) => {
                                     case 'entering':
                                         transitionStyle = {
                                             transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING.enter}ms ease-out`).join(', '),
-                                            transformOrigin,
+                                            transformOrigin: transformOrigin.current,
                                         };
                                         break;
                                     case 'leaving':
@@ -95,7 +98,7 @@ export const Tooltip = forwardRef((props, ref) => {
                                             transform: 'scale(0.3)',
                                             opacity: 0,
                                             transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING.leave}ms ease-in`).join(', '),
-                                            transformOrigin,
+                                            transformOrigin: transformOrigin.current,
                                         };
                                         break;
                                     case 'leaved':
@@ -104,10 +107,10 @@ export const Tooltip = forwardRef((props, ref) => {
                                     default:
                                         break;
                                 }
-                                return renderPopup(_jsxs("div", Object.assign({}, restProps, mergeCS(styled('tooltip', `tooltip--${placement}`), {
+                                return renderPopup(_jsxs("div", Object.assign({}, restProps, mergeCS(styled('tooltip'), {
                                     className: restProps.className,
-                                    style: Object.assign(Object.assign(Object.assign(Object.assign({}, restProps.style), { zIndex }), popupPositionStyle), transitionStyle),
-                                }), { ref: popupRef, id: id, role: "tooltip", children: [arrow && _jsx("div", Object.assign({}, styled('tooltip__arrow'))), title] })));
+                                    style: Object.assign(Object.assign(Object.assign({}, restProps.style), { zIndex }), transitionStyle),
+                                }), { ref: tooltipRef, id: id, role: "tooltip", children: [arrow && _jsx("div", Object.assign({}, styled('tooltip__arrow'))), title] })));
                             } }) })] }));
         } }));
 });

package/tree-select/TreeSelect.js

@@ -11,7 +11,7 @@ import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef,
 import { TreeSelectSearchPanel } from './internal/TreeSelectSearchPanel';
 import { CLASSES } from './vars';
 import { Dropdown } from '../dropdown';
-import { useComponentProps, useControlled, useDesign, useFocusVisible, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
+import { useComponentProps, useControlled, useDesign, useFocusVisible, useJSS, useLayout, useListenGlobalScrolling, useMaxIndex, useNamespace, useScopedProps, useStyled, useTranslation, } from '../hooks';
 import { Icon } from '../icon';
 import { CircularProgress } from '../internal/circular-progress';
 import { Portal } from '../internal/portal';
@@ -33,6 +33,7 @@ function TreeSelectFC(props, ref) {
         tree: styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider.tree,
         'tree-select-popup': styleProvider === null || styleProvider === void 0 ? void 0 : styleProvider['tree-select-popup'],
     }, styleOverrides);
+    const sheet = useJSS();
     const dataRef = useRef({
         expands: new Set(),
     });
@@ -179,11 +180,7 @@ function TreeSelectFC(props, ref) {
     })();
     const maxZIndex = useMaxIndex(visible);
     const zIndex = `calc(var(--${namespace}-zindex-fixed) + ${maxZIndex})`;
-    const [transformOrigin, setTransformOrigin] = useState();
-    const [popupPositionStyle, setPopupPositionStyle] = useState({
-        top: '-200vh',
-        left: '-200vw',
-    });
+    const transformOrigin = useRef();
     const updatePosition = useEventCallback(() => {
         if (visible && boxRef.current && popupRef.current) {
             const boxWidth = boxRef.current.offsetWidth;
@@ -194,13 +191,17 @@ function TreeSelectFC(props, ref) {
                 placement: 'bottom-left',
                 inWindow: WINDOW_SPACE,
             });
-            setTransformOrigin(position.transformOrigin);
-            setPopupPositionStyle({
+            transformOrigin.current = position.transformOrigin;
+            if (sheet.classes.position) {
+                popupRef.current.classList.toggle(sheet.classes.position, false);
+            }
+            sheet.replaceRule('position', {
                 top: position.top,
                 left: position.left,
                 minWidth: Math.min(boxWidth, maxWidth),
                 maxWidth,
             });
+            popupRef.current.classList.toggle(sheet.classes.position, true);
         }
     });
     const listenGlobalScrolling = useListenGlobalScrolling(updatePosition, !visible);
@@ -475,7 +476,7 @@ function TreeSelectFC(props, ref) {
                             case 'entering':
                                 transitionStyle = {
                                     transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-out`).join(', '),
-                                    transformOrigin,
+                                    transformOrigin: transformOrigin.current,
                                 };
                                 break;
                             case 'leaving':
@@ -483,7 +484,7 @@ function TreeSelectFC(props, ref) {
                                     transform: 'scaleY(0.7)',
                                     opacity: 0,
                                     transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_POPUP}ms ease-in`).join(', '),
-                                    transformOrigin,
+                                    transformOrigin: transformOrigin.current,
                                 };
                                 break;
                             case 'leaved':
@@ -493,7 +494,7 @@ function TreeSelectFC(props, ref) {
                                 break;
                         }
                         return (_jsxs("div", Object.assign({}, mergeCS(styled('tree-select-popup'), {
-                            style: Object.assign(Object.assign({ zIndex }, popupPositionStyle), transitionStyle),
+                            style: Object.assign({ zIndex }, transitionStyle),
                         }), { ref: popupRef, onMouseDown: (e) => {
                                 preventBlur(e);
                             }, onMouseUp: (e) => {