From 70be5aa6eebf1a855baed47fff7cf88918bbe2cb Mon Sep 17 00:00:00 2001 From: mango Date: Mon, 30 Sep 2024 17:51:00 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0input=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/themes/dark.css | 4 +- assets/themes/light.css | 6 +- docs/components/data-entry/input.mdx | 17 ++++ examples/chip/group.tsx | 2 +- examples/input/basic.tsx | 79 ++++++++++++++++ src/components/widgets/backdrop/backdrop.scss | 4 + src/components/widgets/backdrop/backdrop.tsx | 31 +++++++ src/components/widgets/backdrop/index.scss | 6 -- src/components/widgets/backdrop/index.tsx | 32 +------ .../widgets/backdrop/models/index.tsx | 14 ++- .../index.scss => backdrop/overlay.scss} | 5 +- .../index.tsx => backdrop/overlay.tsx} | 13 +-- .../widgets/control/control.warp.scss | 9 +- .../widgets/control/control.wrap.tsx | 6 +- src/components/widgets/form-field/index.tsx | 3 +- src/components/widgets/index.tsx | 2 +- src/components/widgets/input/hooks/index.tsx | 42 +++++++++ src/components/widgets/input/index.scss | 4 + src/components/widgets/input/index.tsx | 58 +++++------- src/components/widgets/input/models/index.tsx | 5 +- src/components/widgets/modal/index.scss | 6 +- src/components/widgets/modal/index.tsx | 88 ++++++++---------- src/components/widgets/picker/index.tsx | 93 +++++++++---------- src/components/widgets/selector/selector.tsx | 2 +- .../widgets/snackbar/isnackbar.portal.tsx | 29 +++--- src/components/widgets/switch/index.scss | 9 +- src/hooks/basic/resize.observer.tsx | 6 +- src/styles/root.css | 1 + 28 files changed, 343 insertions(+), 233 deletions(-) create mode 100644 examples/input/basic.tsx create mode 100644 src/components/widgets/backdrop/backdrop.scss create mode 100644 src/components/widgets/backdrop/backdrop.tsx delete mode 100644 src/components/widgets/backdrop/index.scss rename src/components/widgets/{overlay/index.scss => backdrop/overlay.scss} (50%) rename src/components/widgets/{overlay/index.tsx => backdrop/overlay.tsx} (89%) create mode 100644 src/components/widgets/input/hooks/index.tsx diff --git a/assets/themes/dark.css b/assets/themes/dark.css index 7f8411b5..dd61d234 100644 --- a/assets/themes/dark.css +++ b/assets/themes/dark.css @@ -176,7 +176,7 @@ /* 主题色 - 激活态 */ --primary-color-active: rgb(var(--blue-color-600) / 1); /* 主题色 - 禁用态 */ - --primary-color-disabled: rgb(var(--blue-color-200) / 0.4); + --primary-color-disabled: rgb(var(--blue-color-300) / 0.8); /* 次要颜色 - 默认 */ --secondary-color: rgb(var(--dodger-color-500) / 1); @@ -267,7 +267,7 @@ /* 背景色 - 浮层 */ --bg-color-float: rgb(var(--gray-color-025) / 0.9); /* 背景色 - 滑块 */ - --bg-color-thumb: rgb(var(--gray-color-900) / 1); + --bg-color-thumb: rgb(var(--gray-color-900) / 0.9); /* 背景色 - 强调 */ --bg-color-info: rgb(var(--blue-color-050) / 1); diff --git a/assets/themes/light.css b/assets/themes/light.css index 906e6ef3..1001f21a 100644 --- a/assets/themes/light.css +++ b/assets/themes/light.css @@ -172,7 +172,7 @@ /* 主题色 - 默认 */ --primary-color: rgb(var(--blue-color-500) / 1); /* 主题色 - 悬浮态 */ - --primary-color-hover: rgb(var(--blue-color-600) / 1); + --primary-color-hover: rgb(var(--blue-color-400) / 1); /* 主题色 - 激活态 */ --primary-color-active: rgb(var(--blue-color-600) / 1); /* 主题色 - 禁用态 */ @@ -267,7 +267,7 @@ /* 背景色 - 浮层 */ --bg-color-float: rgb(var(--gray-color-025) / 0.9); /* 背景色 - 滑块 */ - --bg-color-thumb: rgb(var(--gray-color-000) / 1); + --bg-color-thumb: rgb(var(--gray-color-000) / 0.9); /* 背景色 - 强调 */ --bg-color-info: rgb(var(--blue-color-050) / 1); @@ -305,7 +305,7 @@ /* 字体颜色 - 成功 */ --font-color-success: rgb(var(--green-color-700) / 1); /* 字体颜色 - 禁用 */ - --font-color-disabled: rgb(var(--gray-color-600) / 0.9); + --font-color-disabled: rgb(var(--gray-color-500) / 0.7); /* 字体颜色 - 高亮 */ --font-color-highlight: rgb(var(--blue-color-600) / 1); diff --git a/docs/components/data-entry/input.mdx b/docs/components/data-entry/input.mdx index e69de29b..993bcd98 100644 --- a/docs/components/data-entry/input.mdx +++ b/docs/components/data-entry/input.mdx @@ -0,0 +1,17 @@ +# Input 输入框 + +> 一个用于输入和编辑文本的组件。 + +使用 `import { IInput } from "@/components";` + +源码 `components/widgets/input` + +## 何时使用 + +* 传达用户可以采取的操作，触发相应的业务逻辑。 + +## 代码演示 + +### 基本用法 + + diff --git a/examples/chip/group.tsx b/examples/chip/group.tsx index d6cef3a8..c81926b6 100644 --- a/examples/chip/group.tsx +++ b/examples/chip/group.tsx @@ -81,9 +81,9 @@ const onPressEnter: React.KeyboardEventHandler = ({ const Creator: React.FC = () => ( } variant="filled"> keyword)} + width="auto" onBlur={onBlur} onChange={onChange} onPressEnter={onPressEnter} diff --git a/examples/input/basic.tsx b/examples/input/basic.tsx new file mode 100644 index 00000000..60bdd331 --- /dev/null +++ b/examples/input/basic.tsx @@ -0,0 +1,79 @@ +import { produce } from 'immer'; +import { create } from 'zustand'; + +import { isEmpty, isString } from '@busymango/is-esm'; +import { VariantControl } from '@examples/widgets'; + +import type { IControlWrapProps } from '@/components'; +import { IControlWrap, IFlex, IInput, ISignLine } from '@/components'; + +type InputStore = { + text?: string | null; + clear?: () => void; + change?: (text?: string | React.ChangeEvent) => void; +}; + +const useInputStore = create((set) => ({ + clear: () => { + set( + produce((state: InputStore) => { + state.text = null; + }) + ); + }, + change: (event) => { + set( + produce((state: InputStore) => { + if (isString(event)) { + state.text = event; + } + if (!isString(event)) { + state.text = event?.target.value; + } + }) + ); + }, +})); + +const App: React.FC = () => { + const { text, clear, change } = useInputStore(); + + const closeable = !isEmpty(text); + + return ( + + {({ variant }) => ( + + + } + variant={variant} + onSuffixClick={clear} + > + + + + )} + + ); +}; + +export default App; diff --git a/src/components/widgets/backdrop/backdrop.scss b/src/components/widgets/backdrop/backdrop.scss new file mode 100644 index 00000000..afd3c3ae --- /dev/null +++ b/src/components/widgets/backdrop/backdrop.scss @@ -0,0 +1,4 @@ +.wrap { + display: grid; + place-items: center; +} diff --git a/src/components/widgets/backdrop/backdrop.tsx b/src/components/widgets/backdrop/backdrop.tsx new file mode 100644 index 00000000..bc46f4bf --- /dev/null +++ b/src/components/widgets/backdrop/backdrop.tsx @@ -0,0 +1,31 @@ +import classNames from 'classnames'; +import { AnimatePresence } from 'framer-motion'; + +import { FloatingPortal } from '@floating-ui/react'; + +import { container } from '@/init'; +import type { ReactCFC } from '@/models'; +import { iFindElement } from '@/utils'; + +import type { IBackdropProps } from './models'; +import { IOverlay } from './overlay'; + +import * as styles from './backdrop.scss'; + +export const IBackdrop: ReactCFC = ({ + open, + children, + className, + root = container, + ...others +}) => ( + + + {open && ( + + {children} + + )} + + +); diff --git a/src/components/widgets/backdrop/index.scss b/src/components/widgets/backdrop/index.scss deleted file mode 100644 index f8005cdd..00000000 --- a/src/components/widgets/backdrop/index.scss +++ /dev/null @@ -1,6 +0,0 @@ -.wrap { - display: grid; - place-items: center; - z-index: var(--z-index-float); - background-color: var(--bg-color-mask); -} diff --git a/src/components/widgets/backdrop/index.tsx b/src/components/widgets/backdrop/index.tsx index 9ab76b1a..34964723 100644 --- a/src/components/widgets/backdrop/index.tsx +++ b/src/components/widgets/backdrop/index.tsx @@ -1,31 +1 @@ -import classNames from 'classnames'; -import { AnimatePresence } from 'framer-motion'; - -import { FloatingPortal } from '@floating-ui/react'; - -import { container } from '@/init'; -import type { ReactCFC } from '@/models'; -import { iFindElement } from '@/utils'; - -import { IOverlay } from '../overlay'; -import type { IBackdropProps } from './models'; - -import * as styles from './index.scss'; - -export const IBackdrop: ReactCFC = ({ - open, - children, - className, - root = container, - ...others -}) => ( - - - {open && ( - - {children} - - )} - - -); +export * from './backdrop'; diff --git a/src/components/widgets/backdrop/models/index.tsx b/src/components/widgets/backdrop/models/index.tsx index 9ccc3fb3..43e2ff89 100644 --- a/src/components/widgets/backdrop/models/index.tsx +++ b/src/components/widgets/backdrop/models/index.tsx @@ -1,11 +1,19 @@ -import type { ReactTargetFunc } from '@/models'; +import type { HTMLMotionProps } from 'framer-motion'; -import type { IOverlayProps } from '../../overlay'; +import type { ReactTargetType } from '@/models'; + +export interface IOverlayProps extends HTMLMotionProps<'div'> { + /** + * overlay will lock scrolling on the document body if is false. + * @default false + */ + scroll?: boolean; +} export interface IBackdropProps extends IOverlayProps { open?: boolean; /** * 浮层默认渲染到 root 上，也可以使用此方法指定根节点。 */ - root?: ReactTargetFunc; + root?: ReactTargetType; } diff --git a/src/components/widgets/overlay/index.scss b/src/components/widgets/backdrop/overlay.scss similarity index 50% rename from src/components/widgets/overlay/index.scss rename to src/components/widgets/backdrop/overlay.scss index 30355f44..cf349d22 100644 --- a/src/components/widgets/overlay/index.scss +++ b/src/components/widgets/backdrop/overlay.scss @@ -1,8 +1,5 @@ .wrap { - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; overflow: auto; position: fixed; } diff --git a/src/components/widgets/overlay/index.tsx b/src/components/widgets/backdrop/overlay.tsx similarity index 89% rename from src/components/widgets/overlay/index.tsx rename to src/components/widgets/backdrop/overlay.tsx index e8c6d656..ff60e8b2 100644 --- a/src/components/widgets/overlay/index.tsx +++ b/src/components/widgets/backdrop/overlay.tsx @@ -1,11 +1,12 @@ import { forwardRef, useId, useLayoutEffect } from 'react'; import classNames from 'classnames'; -import type { HTMLMotionProps } from 'framer-motion'; import { motion } from 'framer-motion'; import { isIOS } from '@/utils'; -import * as styles from './index.scss'; +import type { IOverlayProps } from './models'; + +import * as styles from './overlay.scss'; const iLocks = new Set(); @@ -20,14 +21,6 @@ const iScrollbarWidth = () => { return window.innerWidth - document.documentElement.clientWidth; }; -export interface IOverlayProps extends HTMLMotionProps<'div'> { - /** - * overlay will lock scrolling on the document body if is false. - * @default false - */ - scroll?: boolean; -} - export const IOverlay = forwardRef(function IOverlay( props: IOverlayProps, ref: React.ForwardedRef diff --git a/src/components/widgets/control/control.warp.scss b/src/components/widgets/control/control.warp.scss index 4d696989..64375d53 100644 --- a/src/components/widgets/control/control.warp.scss +++ b/src/components/widgets/control/control.warp.scss @@ -19,6 +19,8 @@ &:not(.read-pretty) { width: 100%; + border-width: 1px; + border-style: solid; border-radius: var(--border-radius-03); /** size */ @@ -81,6 +83,7 @@ } } .filled { + border-color: transparent; &.disabled { background-color: var(--natural-color-disabled); } @@ -98,13 +101,9 @@ } } .standard { + border-color: transparent; } .bordered { - &:not(.read-pretty) { - border-width: 1px; - border-style: solid; - } - &.disabled { border-color: var(--border-color-disabled); background-color: var(--natural-color-disabled); diff --git a/src/components/widgets/control/control.wrap.tsx b/src/components/widgets/control/control.wrap.tsx index 1b1591c3..5fa892de 100644 --- a/src/components/widgets/control/control.wrap.tsx +++ b/src/components/widgets/control/control.wrap.tsx @@ -2,6 +2,8 @@ import { forwardRef, useImperativeHandle, useRef } from 'react'; import classNames from 'classnames'; import { AnimatePresence, motion } from 'framer-motion'; +import { ifnot } from '@busymango/utils'; + import { useEventState } from '@/hooks'; import { useIFieldGridContext } from '../form-field/hooks'; @@ -76,7 +78,7 @@ export const IControlWrap = forwardRef( className={classNames(styles.iconWrap, { [styles.clickable]: isPrefixClickable, })} - onClick={onPrefixClick} + onClick={ifnot(isPrefixClickable && onPrefixClick)} > {prefix} @@ -91,7 +93,7 @@ export const IControlWrap = forwardRef( className={classNames(styles.iconWrap, { [styles.clickable]: isSuffixClickable, })} - onClick={onSuffixClick} + onClick={ifnot(isSuffixClickable && onSuffixClick)} > {isLoading ? : suffix} diff --git a/src/components/widgets/form-field/index.tsx b/src/components/widgets/form-field/index.tsx index 53f78763..a31c4332 100644 --- a/src/components/widgets/form-field/index.tsx +++ b/src/components/widgets/form-field/index.tsx @@ -40,6 +40,7 @@ export const IFieldGrid: ReactCFC = (props) => { useResizeObserver( ref, ({ target: { scrollWidth } }) => { + console.log(scrollWidth); if (scrollWidth <= 260) { setIMode('vertical'); } else if (scrollWidth <= 430) { @@ -93,7 +94,7 @@ export const IFieldCell: ReactCFC = (props) => { colon = ctx?.colon ?? ':', size = ctx?.size ?? 'medium', margin = ctx?.margin ?? false, - mode = ctx?.mode ?? 'vertical', + mode = ctx?.mode ?? 'horizontal', forceRenderTitle = ctx?.forceRenderTitle, children, ...others diff --git a/src/components/widgets/index.tsx b/src/components/widgets/index.tsx index ddd4e5cf..aa4d577d 100644 --- a/src/components/widgets/index.tsx +++ b/src/components/widgets/index.tsx @@ -2,6 +2,7 @@ * @description UI组件 */ +export * from './backdrop'; export * from './button'; export * from './checkbox'; export * from './chip'; @@ -17,7 +18,6 @@ export * from './marker'; export * from './modal'; export * from './motion-panel'; export * from './overflow'; -export * from './overlay'; export * from './picker'; export * from './popover'; export * from './radio'; diff --git a/src/components/widgets/input/hooks/index.tsx b/src/components/widgets/input/hooks/index.tsx new file mode 100644 index 00000000..86b669b6 --- /dev/null +++ b/src/components/widgets/input/hooks/index.tsx @@ -0,0 +1,42 @@ +import { useRef, useState } from 'react'; + +import { useResizeObserver } from '@/hooks'; + +import { iTextSize } from '../helpers'; + +export const useWidth = ({ + width, + shadow, + target, + isReadPretty, +}: { + target: React.RefObject; + shadow: React.RefObject; + width?: React.CSSProperties['width']; + isReadPretty?: boolean; +}) => { + const record = useRef(null); + + const [auto, setAuto] = useState(); + + const iWidth = width ?? (isReadPretty ? 'auto' : 'default'); + + const enabled = iWidth === 'auto'; + + useResizeObserver( + shadow, + () => { + const { current: iInput } = target; + const { current: iShadow } = shadow; + + if (iInput && iShadow) { + const width = iTextSize(iInput, iShadow); + if (record.current !== width) setAuto(width); + if (record.current !== width) record.current = width; + } + }, + { enabled } + ); + + return enabled ? auto : iWidth; +}; diff --git a/src/components/widgets/input/index.scss b/src/components/widgets/input/index.scss index 0da3b472..24d987d6 100644 --- a/src/components/widgets/input/index.scss +++ b/src/components/widgets/input/index.scss @@ -27,6 +27,10 @@ -webkit-background-clip: text; } + &.consistent { + min-width: 11em; + } + &.editable, &.disabled, &.read-only, diff --git a/src/components/widgets/input/index.tsx b/src/components/widgets/input/index.tsx index 893eef0f..163031ab 100644 --- a/src/components/widgets/input/index.tsx +++ b/src/components/widgets/input/index.tsx @@ -1,19 +1,11 @@ -import { - forwardRef, - Fragment, - useImperativeHandle, - useMemo, - useRef, -} from 'react'; +import { forwardRef, Fragment, useImperativeHandle, useRef } from 'react'; import classNames from 'classnames'; -import { assign, ifnot, sizeOf } from '@busymango/utils'; - -import { iComposingParams, useEventState, useResizeObserver } from '@/hooks'; +import { iComposingParams, useEventState } from '@/hooks'; import { iPressEvent } from '@/utils'; import { onInputCatch, useControlState, usePatternAssert } from '../control'; -import { iTextSize } from './helpers'; +import { useWidth } from './hooks'; import type { IInputProps } from './models'; import * as iStyles from '@/styles/widgets.scss'; @@ -23,7 +15,7 @@ export const IInput = forwardRef( function Input(props, ref) { const { style, - autoSize, + width, className, placeholder, defaultValue, @@ -35,16 +27,21 @@ export const IInput = forwardRef( ...others } = props; - const record = useRef(null); + const assert = usePatternAssert(pattern); const target = useRef(null); const shadow = useRef(null); - const assert = usePatternAssert(pattern); - const { isReadOnly, isDisabled, isReadPretty } = assert; + const iWidth = useWidth({ + width, + shadow, + target, + isReadPretty, + }); + const isComposing = useEventState(iComposingParams(target)); const [value, iChange] = useControlState( @@ -57,34 +54,21 @@ export const IInput = forwardRef( { isComposing } ); - useResizeObserver(shadow, () => { - const { current: iInput } = target; - const { current: iShadow } = shadow; - - if (iInput && iShadow) { - const width = `${iTextSize(iInput, iShadow)}px`; - if (record.current !== width) iInput.style.width = width; - if (record.current !== width) record.current = width; - } - }); - - // const clear = useMemoFunc(() => { - // // https://github.com/ant-design/ant-design-mobile/issues/5212 - // if (target.current && isIOS() && isComposing) { - // onClear?.(); - // } - // }); - - const width = ifnot((autoSize || isReadPretty) && `${sizeOf(value)}em`); - useImperativeHandle(ref, () => target.current!, [target]); return ( assign(style ?? {}, { width }), [style, width])} + className={classNames( + styles.input, + styles[pattern], + { + [styles.consistent]: iWidth === 'default', + }, + className + )} + style={{ width: iWidth, ...style }} onClick={props.onClick} onKeyDown={iPressEvent(onPressEnter, onKeyDown)} {...others} diff --git a/src/components/widgets/input/models/index.tsx b/src/components/widgets/input/models/index.tsx index 5a6e534a..14eac36d 100644 --- a/src/components/widgets/input/models/index.tsx +++ b/src/components/widgets/input/models/index.tsx @@ -4,9 +4,10 @@ import type { ReactInputProps } from '@/models'; import type { ControlPattern, ControlValue } from '../../control'; -export interface IInputProps extends OmitOf { +export interface IInputProps + extends OmitOf { /** 控件是否跟随文本宽度 */ - autoSize?: boolean; + width?: React.CSSProperties['width']; /** 控件值 */ value?: ControlValue; /** 控件交互模式 */ diff --git a/src/components/widgets/modal/index.scss b/src/components/widgets/modal/index.scss index 900a3d27..73cfa2da 100644 --- a/src/components/widgets/modal/index.scss +++ b/src/components/widgets/modal/index.scss @@ -1,7 +1,5 @@ -.overlay { - display: grid; - place-items: center; - background-color: rgb(0 0 0 / 0.5); +.mask { + z-index: var(--z-index-modal); & > .wrap { min-width: 80vw; diff --git a/src/components/widgets/modal/index.tsx b/src/components/widgets/modal/index.tsx index c0294f1e..1d384fe0 100644 --- a/src/components/widgets/modal/index.tsx +++ b/src/components/widgets/modal/index.tsx @@ -1,13 +1,11 @@ import { forwardRef, useImperativeHandle } from 'react'; import classNames from 'classnames'; -import { AnimatePresence } from 'framer-motion'; import { isTrue, type PlainObject } from '@busymango/is-esm'; import type { OmitOf } from '@busymango/utils'; import type { UseFloatingReturn } from '@floating-ui/react'; import { FloatingFocusManager, - FloatingPortal, useClick, useDismiss, useFloating, @@ -17,9 +15,9 @@ import { import { container } from '@/init'; import type { ReactWrapProps } from '@/models'; +import { IBackdrop } from '../backdrop'; import { IButton } from '../button'; import { IFlex } from '../flex'; -import { IOverlay } from '../overlay'; import * as styles from './index.scss'; @@ -82,53 +80,43 @@ export const IModal = forwardRef( ]); return ( - - - {context.open && ( - - -
- {(icon || title) && ( -

- - {icon} - {title} - -

- )} -
- {isTrue(close) ? 'close' : close} -
-
{children}
- - { - const { nativeEvent } = event; - onCancel?.(event); - context.onOpenChange?.(false, nativeEvent, 'click'); - }} - > - {cancelText ?? '取消'} - - - {confirmText ?? '确认'} - - -
- - - )} - - + + +
+ {(icon || title) && ( +

+ + {icon} + {title} + +

+ )} +
+ {isTrue(close) ? 'close' : close} +
+
{children}
+ + { + const { nativeEvent } = event; + onCancel?.(event); + context.onOpenChange?.(false, nativeEvent, 'click'); + }} + > + {cancelText ?? '取消'} + + + {confirmText ?? '确认'} + + +
+ + ); } ); diff --git a/src/components/widgets/picker/index.tsx b/src/components/widgets/picker/index.tsx index 080aaa9a..789f2f8b 100644 --- a/src/components/widgets/picker/index.tsx +++ b/src/components/widgets/picker/index.tsx @@ -11,7 +11,6 @@ import { import { isArray, isHTMLElement, isNil } from '@busymango/is-esm'; import { FRAME2MS, isEqual, type OmitOf } from '@busymango/utils'; import { - FloatingPortal, useClick, useDismiss, useFloating, @@ -28,11 +27,11 @@ import { container } from '@/init'; import type { ReactCFC } from '@/models'; import { isCentered } from '@/utils'; +import { IBackdrop } from '../backdrop'; import { IButton } from '../button'; import type { ControlOption } from '../control'; import { useControlState } from '../control'; import { IFlex } from '../flex'; -import { IOverlay } from '../overlay'; import { ISignLine } from '../sign'; import { DATA_ID_NAME, @@ -263,55 +262,53 @@ export const IPicker: React.FC = (props) => {
{inner}
- + - {(context.open || isPlaying) && ( - - - {context.open && ( - - - {title} - - 确定 - - -
- {columns?.map((colum, index) => ( - { - focus.current = focus.current?.map( - (e, i) => (i === index ? val : e) ?? e - ); - }} - /> - ))} - -
- - )} - - + {context.open && ( + + + {title} + + 确定 + + +
+ {columns?.map((colum, index) => ( + { + focus.current = focus.current?.map( + (e, i) => (i === index ? val : e) ?? e + ); + }} + /> + ))} + +
+ )} - + ); }; diff --git a/src/components/widgets/selector/selector.tsx b/src/components/widgets/selector/selector.tsx index 15106606..3d9877cb 100644 --- a/src/components/widgets/selector/selector.tsx +++ b/src/components/widgets/selector/selector.tsx @@ -88,7 +88,7 @@ const iScrollableRender: ISelectorScrollableRender = ({ ); const iSearchRender: ISelectorSearchRender = (props, { pattern }) => ( - + ); const iRootRender: ISelectorRootRender = ( diff --git a/src/components/widgets/snackbar/isnackbar.portal.tsx b/src/components/widgets/snackbar/isnackbar.portal.tsx index 6b89a33a..536dc5c5 100644 --- a/src/components/widgets/snackbar/isnackbar.portal.tsx +++ b/src/components/widgets/snackbar/isnackbar.portal.tsx @@ -8,7 +8,6 @@ import { container } from '@/init'; import type { ReactCFC } from '@/models'; import { IFlex } from '../flex'; -import { IOverlay } from '../overlay'; import { useSnackbars } from './hooks'; import { ISnackbar } from './isnackbar'; @@ -29,21 +28,19 @@ export const ISnackbarPortal: ReactCFC<{ return ( - - - - - {useDeferredValue(snackbars).map((rect, index) => ( - - ))} - - - - + + + + {useDeferredValue(snackbars).map((rect, index) => ( + + ))} + + + ); }; diff --git a/src/components/widgets/switch/index.scss b/src/components/widgets/switch/index.scss index 3e6872e6..d2b116cc 100644 --- a/src/components/widgets/switch/index.scss +++ b/src/components/widgets/switch/index.scss @@ -8,6 +8,7 @@ z-index: 1; opacity: 0; + cursor: inherit; } .label { @@ -15,11 +16,15 @@ display: flex; align-items: center; + cursor: inherit; + text-wrap: nowrap; font-size: inherit; } .thumb { + cursor: inherit; + flex-shrink: 0; border-radius: 50%; @@ -77,9 +82,7 @@ } &.editable { - & > input { - cursor: pointer; - } + cursor: pointer; } &.disabled { diff --git a/src/hooks/basic/resize.observer.tsx b/src/hooks/basic/resize.observer.tsx index 6cde0027..8bc7d490 100644 --- a/src/hooks/basic/resize.observer.tsx +++ b/src/hooks/basic/resize.observer.tsx @@ -29,12 +29,12 @@ export function useResizeObserver( const observer = new ResizeObserver((entries) => { callback(theLast(entries)!); - // const current = entries.find(({ target }) => target === element); - // current?.target && callback(current.target as HTMLElement); }); observer.observe(element); - return () => observer.disconnect(); + return () => { + observer.disconnect(); + }; } }, [target, enabled, wait, func]); } diff --git a/src/styles/root.css b/src/styles/root.css index 0ad8ecbb..99134c66 100644 --- a/src/styles/root.css +++ b/src/styles/root.css @@ -17,4 +17,5 @@ *::-webkit-scrollbar-thumb { border-radius: var(--border-radius-10); background-color: var(--bg-color-thumb); + box-shadow: var(--shadow-02); } \ No newline at end of file