feat(ui): badge support custom text

Author: xiejay97

packages/ui/src/components/badge/Badge.tsx

@@ -5,6 +5,7 @@ import { getClassName } from '@react-devui/utils';
 import { registerComponentMate, TTANSITION_DURING_BASE } from '../../utils';
 import { DTransition } from '../_transition';
 import { useComponentConfig, usePrefixConfig } from '../root';
+import { DBadgeText } from './BadgeText';
 import { DNumber } from './Number';
 
 export interface DBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -19,7 +20,10 @@ export interface DBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 }
 
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DBadge' as const });
-export function DBadge(props: DBadgeProps): JSX.Element | null {
+export const DBadge: {
+  (props: DBadgeProps): JSX.Element | null;
+  Text: typeof DBadgeText;
+} = (props) => {
   const {
     dValue,
     dTheme = 'danger',
@@ -122,4 +126,6 @@ export function DBadge(props: DBadgeProps): JSX.Element | null {
       }}
     </DTransition>
   );
-}
+};
+
+DBadge.Text = DBadgeText;

packages/ui/src/components/badge/BadgeText.tsx

@@ -0,0 +1,85 @@
+import { getClassName } from '@react-devui/utils';
+
+import { registerComponentMate, TTANSITION_DURING_BASE } from '../../utils';
+import { DTransition } from '../_transition';
+import { useComponentConfig, usePrefixConfig } from '../root';
+
+export interface DBadgeTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  dText: string;
+  dTheme?: 'primary' | 'success' | 'warning' | 'danger';
+  dColor?: string;
+  dOffset?: [number | string, number | string];
+  dAlone?: boolean;
+}
+
+const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DBadge.Text' as const });
+export function DBadgeText(props: DBadgeTextProps): JSX.Element | null {
+  const {
+    dText,
+    dTheme = 'danger',
+    dColor,
+    dOffset = [0, '100%'],
+    dAlone = false,
+
+    ...restProps
+  } = useComponentConfig(COMPONENT_NAME, props);
+
+  //#region Context
+  const dPrefix = usePrefixConfig();
+  //#endregion
+
+  return (
+    <DTransition dIn={dText.length > 0} dDuring={TTANSITION_DURING_BASE}>
+      {(state) => {
+        let transitionStyle: React.CSSProperties = {};
+        switch (state) {
+          case 'enter':
+            transitionStyle = { transform: 'scale(0)', opacity: 0 };
+            break;
+
+          case 'entering':
+            transitionStyle = {
+              transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
+            };
+            break;
+
+          case 'leaving':
+            transitionStyle = {
+              transform: 'scale(0)',
+              opacity: 0,
+              transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
+            };
+            break;
+
+          default:
+            break;
+        }
+
+        return state === 'leaved' ? null : (
+          <div
+            {...restProps}
+            className={getClassName(restProps.className, `${dPrefix}badge`, {
+              [`t-${dTheme}`]: dTheme,
+              [`${dPrefix}badge--alone`]: dAlone,
+            })}
+            style={{
+              ...restProps.style,
+              ...(dAlone
+                ? {}
+                : {
+                    top: dOffset[0],
+                    left: dOffset[1],
+                  }),
+              [`--${dPrefix}badge-color`]: dColor,
+            }}
+            title={restProps.title ?? dText}
+          >
+            <div className={`${dPrefix}badge__wrapper`} style={transitionStyle}>
+              {dText}
+            </div>
+          </div>
+        );
+      }}
+    </DTransition>
+  );
+}

packages/ui/src/components/badge/demos/1.Basic.md

@@ -24,6 +24,9 @@ export default function Demo() {
       <div className="app-demo-badge">
         <DBadge dValue={5} />
       </div>
+      <div className="app-demo-badge">
+        <DBadge.Text dText="M" />
+      </div>
     </>
   );
 }

packages/ui/src/components/badge/demos/2.Theme.md

@@ -38,6 +38,9 @@ export default function Demo() {
       <div className="app-demo-badge">
         <DBadge dValue={5} dTheme={theme} />
       </div>
+      <div className="app-demo-badge">
+        <DBadge.Text dText="M" dTheme={theme} />
+      </div>
     </>
   );
 }

packages/ui/src/components/badge/demos/3.Color.md

@@ -24,12 +24,18 @@ export default function Demo() {
       <div className="app-demo-badge">
         <DBadge dValue={5} dColor="#21b0b5" />
       </div>
+      <div className="app-demo-badge">
+        <DBadge.Text dText="M" dColor="#21b0b5" />
+      </div>
       <div className="app-demo-badge">
         <DBadge dValue={5} dDot dColor="#7b4acb" />
       </div>
       <div className="app-demo-badge">
         <DBadge dValue={5} dColor="#7b4acb" />
       </div>
+      <div className="app-demo-badge">
+        <DBadge.Text dText="M" dColor="#7b4acb" />
+      </div>
     </>
   );
 }

packages/ui/src/components/badge/demos/7.Alone.md

@@ -20,6 +20,7 @@ export default function Demo() {
     <>
       <DBadge dValue={5} dDot dAlone />
       <DBadge dValue={5} dAlone />
+      <DBadge.Text dText="M" dAlone />
     </>
   );
 }

packages/ui/src/components/badge/index.ts

@@ -1 +1,2 @@
 export * from './Badge';
+export * from './BadgeText';

packages/ui/src/components/index.ts

@@ -16,7 +16,7 @@ export { DAutoComplete } from './auto-complete';
 export type { DAvatarProps } from './avatar';
 export { DAvatar } from './avatar';
 
-export type { DBadgeProps } from './badge';
+export type { DBadgeProps, DBadgeTextProps } from './badge';
 export { DBadge } from './badge';
 
 export type { DBreadcrumbProps } from './breadcrumb';

packages/ui/src/components/root/contex.ts

@@ -6,7 +6,7 @@ import type { DAlertProps } from '../alert';
 import type { DAnchorProps } from '../anchor';
 import type { DAutoCompleteProps } from '../auto-complete';
 import type { DAvatarProps } from '../avatar';
-import type { DBadgeProps } from '../badge';
+import type { DBadgeProps, DBadgeTextProps } from '../badge';
 import type { DBreadcrumbProps } from '../breadcrumb';
 import type { DButtonProps } from '../button';
 import type { DCardProps, DCardActionsProps, DCardActionProps, DCardHeaderProps, DCardContentProps } from '../card';
@@ -74,6 +74,7 @@ export type DComponentConfig = {
   DAutoComplete: DAutoCompleteProps<any>;
   DAvatar: DAvatarProps;
   DBadge: DBadgeProps;
+  'DBadge.Text': DBadgeTextProps;
   DBreadcrumb: DBreadcrumbProps<any, any>;
   DButton: DButtonProps;
   DCard: DCardProps;