{title}
{extra}
@@ -31,4 +59,4 @@ export const IDirective: ReactCFC = (props) => {
);
-};
+});
diff --git a/src/components/widgets/form-field/index.scss b/src/components/widgets/form-field/index.scss
index cd925b14..e40bf21b 100644
--- a/src/components/widgets/form-field/index.scss
+++ b/src/components/widgets/form-field/index.scss
@@ -98,8 +98,8 @@
margin: unset;
}
- &.error,
- &.warning,
+ &.danger,
+ &.warn,
&.success,
&.waiting {
font-size: var(--font-size-04);
diff --git a/src/components/widgets/form-field/index.tsx b/src/components/widgets/form-field/index.tsx
index e6bec5d7..53f78763 100644
--- a/src/components/widgets/form-field/index.tsx
+++ b/src/components/widgets/form-field/index.tsx
@@ -39,7 +39,7 @@ export const IFieldGrid: ReactCFC
= (props) => {
useResizeObserver(
ref,
- ({ scrollWidth }) => {
+ ({ target: { scrollWidth } }) => {
if (scrollWidth <= 260) {
setIMode('vertical');
} else if (scrollWidth <= 430) {
diff --git a/src/components/widgets/form-field/models/index.tsx b/src/components/widgets/form-field/models/index.tsx
index 96fcb1bb..56d83d2d 100644
--- a/src/components/widgets/form-field/models/index.tsx
+++ b/src/components/widgets/form-field/models/index.tsx
@@ -9,7 +9,7 @@ import type {
} from '../../control';
import type { IFlexProps } from '../../flex/models';
-export type IFieldStatus = 'error' | 'success' | 'warning';
+export type IFieldStatus = 'danger' | 'success' | 'warn';
export type IFieldGridMode =
| ControlUIDirection
diff --git a/src/components/widgets/index.tsx b/src/components/widgets/index.tsx
index cd6c07f6..ddd4e5cf 100644
--- a/src/components/widgets/index.tsx
+++ b/src/components/widgets/index.tsx
@@ -7,6 +7,7 @@ export * from './checkbox';
export * from './chip';
export * from './collapsible';
export * from './control';
+export * from './directive';
export * from './flex';
export * from './form-field';
export * from './form-wrap';
diff --git a/src/components/widgets/motion-panel/index.scss b/src/components/widgets/motion-panel/index.scss
index 7ece9a24..0bba8a54 100644
--- a/src/components/widgets/motion-panel/index.scss
+++ b/src/components/widgets/motion-panel/index.scss
@@ -13,8 +13,8 @@
height: max-content;
}
- &.error,
- &.warning,
+ &.warn,
+ &.danger,
&.success,
&.waiting {
font-size: inherit;
diff --git a/src/components/widgets/motion-panel/index.tsx b/src/components/widgets/motion-panel/index.tsx
index 9ab95f28..964a0de3 100644
--- a/src/components/widgets/motion-panel/index.tsx
+++ b/src/components/widgets/motion-panel/index.tsx
@@ -2,12 +2,12 @@
* @description 消息反馈组件
*/
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
import classNames from 'classnames';
import type { Target, Transition } from 'framer-motion';
import { AnimatePresence, motion } from 'framer-motion';
-import { useMemoFunc, useRecord, useResizeObserver } from '@/hooks';
+import { useRecord } from '@/hooks';
import type { ReactCFC } from '@/models';
import type { IMotionPanelProps, IMotionPanelRender } from './models';
@@ -34,21 +34,13 @@ export const IMotionPanel: ReactCFC = (props) => {
const target = useRef(null);
- const [height, setHeight] = useState();
-
const record = useRecord(children, visible && ghosting);
- const iSyncHeight = useMemoFunc(({ scrollHeight }: HTMLElement) => {
- scrollHeight !== height && setHeight(scrollHeight);
- });
-
- useResizeObserver(target, iSyncHeight, { enabled: visible });
-
return (
{visible && (
(
{
+export const iTrigonOpposite = (hypotenuse: number, degrees = 30) => {
const radians = degrees * (Math.PI / 180);
return Math.sin(radians) * hypotenuse;
};
@@ -19,7 +19,7 @@ export const iTrigoOpposite = (hypotenuse: number, degrees = 30) => {
* @param degrees 角度
* @returns 邻边
*/
-export const iTrigoAdjacent = (hypotenuse: number, degrees = 30) => {
+export const iTrigonAdjacent = (hypotenuse: number, degrees = 30) => {
const radians = degrees * (Math.PI / 180);
return Math.cos(radians) * hypotenuse;
};
@@ -30,10 +30,10 @@ export const iTrigoAdjacent = (hypotenuse: number, degrees = 30) => {
* @param y 中心点y
* @param r 以r为半径寻找正三角三个点坐标
*/
-export const iTrigo = (x: number, y: number, r: number) => {
+export const iTrigon = (x: number, y: number, r: number) => {
const point1 = `${x} ${y - r}`;
- const point2 = `${x - iTrigoAdjacent(r)} ${y + iTrigoOpposite(r)}`;
- const point3 = `${x + iTrigoAdjacent(r)} ${y + iTrigoOpposite(r)}`;
+ const point2 = `${x - iTrigonAdjacent(r)} ${y + iTrigonOpposite(r)}`;
+ const point3 = `${x + iTrigonAdjacent(r)} ${y + iTrigonOpposite(r)}`;
return `M${point1} L${point2} L${point3}Z`;
};
@@ -103,8 +103,8 @@ export const iAnimateLine = (type?: ISignType): Target[] => {
{
d: [
'M512 512',
- `L${512 + iTrigoAdjacent(112)} ${512 + iTrigoOpposite(112)}`,
- `L${512 + iTrigoAdjacent(224)} ${512 + iTrigoOpposite(224)}`,
+ `L${512 + iTrigonAdjacent(112)} ${512 + iTrigonOpposite(112)}`,
+ `L${512 + iTrigonAdjacent(224)} ${512 + iTrigonOpposite(224)}`,
].join(' '),
},
];
@@ -129,7 +129,7 @@ export const iAnimateLine = (type?: ISignType): Target[] => {
{ d: 'M704 320 L512 512 L320 704' },
];
case 'informer':
- return [{ d: 'M512 256 L512 256 L512 608' }, { d: iTrigo(512, 768, 8) }];
+ return [{ d: 'M512 256 L512 256 L512 608' }, { d: iTrigon(512, 768, 8) }];
default:
return [];
}
diff --git a/src/components/widgets/sign/line.tsx b/src/components/widgets/sign/line.tsx
index 1ae49b59..e71281c1 100644
--- a/src/components/widgets/sign/line.tsx
+++ b/src/components/widgets/sign/line.tsx
@@ -3,13 +3,13 @@ import { AnimatePresence, motion } from 'framer-motion';
import { IDollarPath } from './dollar';
import { IHelperPath } from './helper';
-import { iAnimateLine, initial, transition } from './helpers';
+import { iAnimateLine, initial, iTrigon, transition } from './helpers';
import { IMagnifierPath } from './magnifier';
import type { ISignLineProps } from './models';
export const ISignLine = forwardRef(
function SignLine(
- { type, rect, ring, style, animate, ...others },
+ { type, rect, ring, style, animate, trigon, ...others },
iForwardRef
) {
const ref = useRef(null);
@@ -47,8 +47,16 @@ export const ISignLine = forwardRef(
transition={transition}
/>
)}
-
-
+ {trigon && (
+
+ )}
{rect && (
(
transition={transition}
/>
))}
-
-
{type === 'dollar' && }
{type === 'helper' && }
{type === 'magnifier' && }
diff --git a/src/components/widgets/sign/magnifier.tsx b/src/components/widgets/sign/magnifier.tsx
index 0abfd00b..d66b27f4 100644
--- a/src/components/widgets/sign/magnifier.tsx
+++ b/src/components/widgets/sign/magnifier.tsx
@@ -4,8 +4,8 @@ import { motion } from 'framer-motion';
import {
iCirclePath,
initial,
- iTrigoAdjacent,
- iTrigoOpposite,
+ iTrigonAdjacent,
+ iTrigonOpposite,
transition,
} from './helpers';
@@ -22,9 +22,9 @@ const MagnifierPath: React.FC = () => (
{
type?: ISignType;
ring?: boolean;
rect?: boolean;
+ trigon?: boolean;
}
diff --git a/src/components/widgets/snackbar/hooks/index.tsx b/src/components/widgets/snackbar/hooks/index.tsx
index 3262f8b5..e3bd25f7 100644
--- a/src/components/widgets/snackbar/hooks/index.tsx
+++ b/src/components/widgets/snackbar/hooks/index.tsx
@@ -27,7 +27,7 @@ export const snackbar = {
return await useSnackbars.getState().emit(options);
},
...(() =>
- (['info', 'error', 'warn', 'success'] satisfies ISnackbarStatus[]).reduce(
+ (['info', 'danger', 'warn', 'success'] satisfies ISnackbarStatus[]).reduce(
(accom, status) => ({
...accom,
[status]: async (config: OmitOf, 'status'>) => {
diff --git a/src/components/widgets/snackbar/index.scss b/src/components/widgets/snackbar/index.scss
index f912ef67..5ff1664c 100644
--- a/src/components/widgets/snackbar/index.scss
+++ b/src/components/widgets/snackbar/index.scss
@@ -61,7 +61,7 @@
color: rgb(var(--warn-color) / 1);
}
}
-.error {
+.danger {
.icon {
color: rgb(var(--error-color) / 1);
}
diff --git a/src/components/widgets/snackbar/isnackbar.tsx b/src/components/widgets/snackbar/isnackbar.tsx
index 74b30897..398821a8 100644
--- a/src/components/widgets/snackbar/isnackbar.tsx
+++ b/src/components/widgets/snackbar/isnackbar.tsx
@@ -1,11 +1,4 @@
-import {
- forwardRef,
- useDeferredValue,
- useEffect,
- useImperativeHandle,
- useRef,
- useState,
-} from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import classNames from 'classnames';
import type {
AnimationDefinition,
@@ -19,12 +12,7 @@ import { isFinite, isObject, isTrue } from '@busymango/is-esm';
import { isEqual } from '@busymango/utils';
import type { EventStateParams } from '@/hooks';
-import {
- useEventState,
- useMemoFunc,
- useResizeObserver,
- useTimeout,
-} from '@/hooks';
+import { useEventState, useMemoFunc, useTimeout } from '@/hooks';
import type { ReactTargetType } from '@/models';
import type { ISignType } from '../sign';
@@ -36,8 +24,8 @@ import type { ISnackbarProps } from './models';
import * as styles from './index.scss';
-const iAnimate = (height?: number): Target => ({
- height,
+const iAnimate = (): Target => ({
+ height: 'auto',
scale: 1,
opacity: 1,
originY: 0,
@@ -68,7 +56,7 @@ const iSnackbarSign = (status?: ISnackbarProps['status']): ISignType => {
switch (status) {
case 'success':
return 'tick';
- case 'error':
+ case 'danger':
return 'cross';
default:
return 'informer';
@@ -94,16 +82,10 @@ export const ISnackbar = forwardRef(
const [scope, iShakeAnimate] = useShakeAnimate();
- const [height, setHeight] = useState();
-
const isHover = useEventState(iHoverParams(scope));
const iDestory = useSnackbars(({ destory }) => destory);
- useResizeObserver(scope, ({ scrollHeight }) => {
- if (height !== scrollHeight) setHeight(scrollHeight);
- });
-
useImperativeHandle(ref, () => scope.current);
const destory = useMemoFunc(() => iDestory(id));
@@ -135,7 +117,7 @@ export const ISnackbar = forwardRef(
return (
void;
};
-export type ISnackbarStatus = 'success' | 'info' | 'error' | 'warn';
+export type ISnackbarStatus = 'success' | 'info' | 'danger' | 'warn';
export interface ISnackbarProps extends OmitOf, 'id'> {
id: React.Key;
diff --git a/src/components/widgets/textarea/index.tsx b/src/components/widgets/textarea/index.tsx
index 79c5bc03..f13243cf 100644
--- a/src/components/widgets/textarea/index.tsx
+++ b/src/components/widgets/textarea/index.tsx
@@ -1,11 +1,11 @@
import { forwardRef, Fragment, useImperativeHandle, useRef } from 'react';
import classNames from 'classnames';
-import { useMemoFunc, useResizeObserver } from '@/hooks';
+import { useResizeObserver } from '@/hooks';
-import { useControlState } from '../control';
+import { onTextAreaCatch, useControlState } from '../control';
import { iTextareaSize } from './helpers';
-import type { ITextAreaEvent, ITextAreaProps, ITextareaRef } from './models';
+import type { ITextAreaProps, ITextareaRef } from './models';
import * as iStyles from '@/styles/widgets.scss';
import * as styles from './index.scss';
@@ -29,7 +29,10 @@ export const ITextArea = forwardRef(
useImperativeHandle(ref, () => input, [input]);
- const [value, onChange] = useControlState(other);
+ const [value, iChange] = useControlState({
+ onCatch: onTextAreaCatch,
+ ...other,
+ });
useResizeObserver(shadow, () => {
const { current: iInput } = input;
@@ -47,10 +50,6 @@ export const ITextArea = forwardRef(
}
});
- const iChange = useMemoFunc(({ target }: ITextAreaEvent) => {
- onChange?.(target.value);
- });
-
return (