feat(ui): add dropdown component

Author: xiejay97

packages/site/src/app/components/route/DemoBox.tsx

@@ -6,21 +6,26 @@ import { useAsync, useImmer } from '@react-devui/ui/hooks';
 import { copy, getClassName } from '@react-devui/ui/utils';
 
 import './DemoBox.scss';
+import { toString } from './utils';
 
 export interface AppDemoBoxProps {
   id: string;
   renderer: React.ReactNode;
   title: string;
-  description: string;
-  tsx: string;
+  description: number[];
+  tsx: number[];
   scss?: string;
-  tsxSource: string;
+  tsxSource: number[];
   scssSource?: string;
 }
 
 export function AppDemoBox(props: AppDemoBoxProps) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { id, renderer, title, description, tsx, scss, tsxSource, scssSource } = props;
+  const { id, renderer, title, scss, scssSource } = props;
+
+  const description = toString(props.description);
+  const tsx = toString(props.tsx);
+  const tsxSource = toString(props.tsxSource);
 
   const asyncCapture = useAsync();
 

packages/site/src/app/components/route/RouteArticle.tsx

@@ -3,18 +3,22 @@ import { useTranslation } from 'react-i18next';
 import { DTooltip, DIcon, DAnchor, DAnchorLink } from '@react-devui/ui';
 
 import './RouteArticle.scss';
+import { toString } from './utils';
 
 export interface AppRouteArticleProps {
   title: string;
   subtitle: string;
-  description: string;
-  api: string;
+  description: number[];
+  api: number[];
   demos: React.ReactNode;
   links: Array<{ href: string; title: string }>;
 }
 
 export function AppRouteArticle(props: AppRouteArticleProps) {
-  const { title, subtitle, description, api, demos, links } = props;
+  const { title, subtitle, demos, links } = props;
+
+  const description = toString(props.description);
+  const api = toString(props.api);
 
   const { t, i18n } = useTranslation();
 

packages/site/src/app/components/route/utils.ts

@@ -0,0 +1,3 @@
+export function toString(arr: number[]) {
+  return new TextDecoder().decode(Uint8Array.from(arr));
+}

packages/ui/src/components/_popup/Popup.tsx

@@ -17,6 +17,7 @@ export interface DTriggerRenderProps {
   onFocus?: React.FocusEventHandler<HTMLElement>;
   onBlur?: React.FocusEventHandler<HTMLElement>;
   onClick?: React.MouseEventHandler<HTMLElement>;
+  [key: `data-${string}popup-trigger`]: string;
 }
 
 export interface DPopupRef {
@@ -40,8 +41,11 @@ export interface DPopupProps extends React.HTMLAttributes<HTMLDivElement> {
   dDestroy?: boolean;
   dMouseEnterDelay?: number;
   dMouseLeaveDelay?: number;
-  dCustomPopup?: (popupEl: HTMLElement, triggerEl: HTMLElement) => { top: number; left: number; stateList: DTransitionStateList };
-  onTrigger?: (visible: boolean) => void;
+  dCustomPopup?: (
+    popupEl: HTMLElement,
+    triggerEl: HTMLElement
+  ) => { top: number; left: number; stateList: DTransitionStateList; arrowPosition?: React.CSSProperties };
+  onVisibleChange?: (visible: boolean) => void;
   afterVisibleChange?: (visible: boolean) => void;
 }
 
@@ -62,7 +66,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
     dMouseEnterDelay = 150,
     dMouseLeaveDelay = 200,
     dCustomPopup,
-    onTrigger,
+    onVisibleChange,
     afterVisibleChange,
     className,
     children,
@@ -89,10 +93,11 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
 
   const asyncCapture = useAsync();
   const [popupPositionStyle, setPopupPositionStyle] = useImmer<React.CSSProperties>({});
+  const [arrowPosition, setArrowStyle] = useImmer<React.CSSProperties | undefined>(undefined);
   const [zIndex, setZIndex] = useImmer(1000);
   const id = useId();
 
-  const [visible, changeVisible] = useTwoWayBinding(false, dVisible, onTrigger);
+  const [visible, changeVisible] = useTwoWayBinding(false, dVisible, onVisibleChange);
 
   const [autoPlacement, setAutoPlacement] = useImmer<DPlacement>(dPlacement);
 
@@ -219,7 +224,8 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
           'leave-to': { transform: 'scale(0)', opacity: '0', transition: 'transform 0.1s ease-in, opacity 0.1s ease-in', transformOrigin },
         };
       } else {
-        const { top, left, stateList } = dCustomPopup(popupEl, triggerRef.current);
+        const { top, left, stateList, arrowPosition } = dCustomPopup(popupEl, triggerRef.current);
+        setArrowStyle(arrowPosition);
         setPopupPositionStyle({
           position: fixed ? 'fixed' : 'absolute',
           top,
@@ -237,6 +243,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
     dDistance,
     dPlacement,
     popupEl,
+    setArrowStyle,
     setAutoPlacement,
     setPopupPositionStyle,
     triggerRef,
@@ -433,7 +440,7 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
   );
 
   const triggerRenderProps = useMemo<DTriggerRenderProps>(() => {
-    const _triggerRenderProps: DTriggerRenderProps = { [`data-${dPrefix}popup-trigger`]: id };
+    const _triggerRenderProps: DTriggerRenderProps = { [`data-${dPrefix}popup-trigger`]: String(id) };
     if (dTrigger === 'hover') {
       _triggerRenderProps.onMouseEnter = () => {
         dataRef.current.clearTid && dataRef.current.clearTid();
@@ -506,7 +513,14 @@ export const DPopup = React.forwardRef<DPopupRef, DPopupProps>((props, ref) => {
               onBlur={handleBlur}
               onClick={handleClick}
             >
-              {dArrow && <div className={`${dPrefix}popup__arrow`}></div>}
+              {dArrow && (
+                <div
+                  className={getClassName(`${dPrefix}popup__arrow`, {
+                    'is-custom': arrowPosition,
+                  })}
+                  style={arrowPosition}
+                ></div>
+              )}
               {dPopupContent}
             </div>,
             containerRef.current

packages/ui/src/components/_transition/transition.tsx

@@ -165,14 +165,14 @@ export const DTransition = React.forwardRef<DTransitionRef, DTransitionProps>((p
 });
 
 export interface DCollapseTransitionProps extends DTransitionProps {
-  dDirection?: 'width' | 'height';
+  dDirection?: 'horizontal' | 'vertical';
   dDuring?: number;
   dTimingFunction?: string | { enter: string; leave: string };
   dSpace?: number | string;
 }
 
 export const DCollapseTransition = React.forwardRef<DTransitionRef, DCollapseTransitionProps>((props, ref) => {
-  const { dEl, dCallbackList, dDirection = 'height', dTimingFunction, dDuring = 300, dSpace = 0, ...restProps } = props;
+  const { dEl, dCallbackList, dDirection = 'vertical', dTimingFunction, dDuring = 300, dSpace = 0, ...restProps } = props;
 
   const enterTimeFunction = dTimingFunction ? (isString(dTimingFunction) ? dTimingFunction : dTimingFunction.enter) : 'linear';
   const leaveTimeFunction = dTimingFunction ? (isString(dTimingFunction) ? dTimingFunction : dTimingFunction.leave) : 'linear';
@@ -182,6 +182,8 @@ export const DCollapseTransition = React.forwardRef<DTransitionRef, DCollapseTra
   const space = isNumber(dSpace) ? dSpace + 'px' : dSpace;
   const opacity = shouldHidden ? '0' : '1';
 
+  const attribute = dDirection === 'horizontal' ? 'width' : 'height';
+
   return (
     <DTransition
       {...restProps}
@@ -191,30 +193,30 @@ export const DCollapseTransition = React.forwardRef<DTransitionRef, DCollapseTra
         if (dEl) {
           const rect = dEl.getBoundingClientRect();
           // handle nested
-          if (rect[dDirection] === 0) {
+          if (rect[attribute] === 0) {
             return undefined;
           }
 
-          const size = rect[dDirection] + 'px';
+          const size = rect[attribute] + 'px';
 
           return {
-            'enter-from': { [dDirection]: space, opacity },
+            'enter-from': { [attribute]: space, opacity },
             'enter-active': { overflow: 'hidden' },
             'enter-to': {
-              [dDirection]: size,
-              transition: `${dDirection} ${dDuring}ms ${enterTimeFunction}, opacity ${dDuring}ms ${enterTimeFunction}`,
+              [attribute]: size,
+              transition: `${attribute} ${dDuring}ms ${enterTimeFunction}, opacity ${dDuring}ms ${enterTimeFunction}`,
             },
-            'leave-from': { [dDirection]: size },
+            'leave-from': { [attribute]: size },
             'leave-active': { overflow: 'hidden' },
             'leave-to': {
-              [dDirection]: space,
+              [attribute]: space,
               opacity,
-              transition: `${dDirection} ${dDuring}ms ${leaveTimeFunction}, opacity ${dDuring}ms ${leaveTimeFunction}`,
+              transition: `${attribute} ${dDuring}ms ${leaveTimeFunction}, opacity ${dDuring}ms ${leaveTimeFunction}`,
             },
           };
         }
       }}
-      dEndStyle={shouldHidden ? undefined : { leave: { [dDirection]: space } }}
+      dEndStyle={shouldHidden ? undefined : { leave: { [attribute]: space } }}
     />
   );
 });

packages/ui/src/components/button/Button.tsx

@@ -17,7 +17,7 @@ export interface DButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
   dShape?: 'circle' | 'round';
   dSize?: 'smaller' | 'larger';
   dIcon?: React.ReactNode;
-  dIconLeft?: boolean;
+  dIconRight?: boolean;
 }
 
 export const DButton = React.forwardRef<DButtonRef, DButtonProps>((props, ref) => {
@@ -29,7 +29,7 @@ export const DButton = React.forwardRef<DButtonRef, DButtonProps>((props, ref) =
     dShape,
     dSize,
     dIcon,
-    dIconLeft = true,
+    dIconRight = false,
     className,
     disabled,
     children,
@@ -39,7 +39,7 @@ export const DButton = React.forwardRef<DButtonRef, DButtonProps>((props, ref) =
 
   //#region Context
   const dPrefix = useDPrefixConfig();
-  const [{ buttonGroupType, buttonGroupColor, buttonGroupSize }] = useCustomContext(DButtonGroupContext);
+  const [{ buttonGroupType, buttonGroupColor, buttonGroupSize, buttonGroupDisabled }] = useCustomContext(DButtonGroupContext);
   //#endregion
 
   //#region Ref
@@ -54,9 +54,9 @@ export const DButton = React.forwardRef<DButtonRef, DButtonProps>((props, ref) =
 
   const handleClick = useCallback(
     (e) => {
-      if (!dLoading) {
-        onClick?.(e);
+      onClick?.(e);
 
+      if (!dLoading) {
         if (type === 'primary' || type === 'secondary' || type === 'outline' || type === 'dashed') {
           wave.next([e.currentTarget, `var(--${dPrefix}color-${color})`]);
         }
@@ -75,7 +75,7 @@ export const DButton = React.forwardRef<DButtonRef, DButtonProps>((props, ref) =
     <DCollapseTransition
       dEl={loadingEl}
       dVisible={dLoading}
-      dDirection="width"
+      dDirection="horizontal"
       dRender={(hidden) => (
         <button
           {...restProps}
@@ -87,21 +87,21 @@ export const DButton = React.forwardRef<DButtonRef, DButtonProps>((props, ref) =
             'is-only-icon': !children,
             'is-loading': dLoading,
           })}
-          disabled={disabled}
-          aria-disabled={disabled}
+          disabled={buttonGroupDisabled || disabled}
+          aria-disabled={buttonGroupDisabled || disabled}
           onClick={handleClick}
         >
-          {!dIconLeft && children}
+          {dIconRight && children}
           {dIcon ? (
-            <span className={getClassName(`${dPrefix}button__icon`, { 'is-right': !dIconLeft })}>{dLoading ? loadingIcon : dIcon}</span>
+            <span className={getClassName(`${dPrefix}button__icon`, { 'is-right': dIconRight })}>{dLoading ? loadingIcon : dIcon}</span>
           ) : (
             !hidden && (
-              <span ref={loadingRef} className={getClassName(`${dPrefix}button__icon`, { 'is-right': !dIconLeft })}>
+              <span ref={loadingRef} className={getClassName(`${dPrefix}button__icon`, { 'is-right': dIconRight })}>
                 {loadingIcon}
               </span>
             )
           )}
-          {dIconLeft && children}
+          {!dIconRight && children}
         </button>
       )}
     />

packages/ui/src/components/button/ButtonGroup.tsx

@@ -9,17 +9,27 @@ export interface DButtonGroupContextData {
   buttonGroupType: DButtonProps['dType'];
   buttonGroupColor: DButtonProps['dColor'];
   buttonGroupSize: DButtonProps['dSize'];
+  buttonGroupDisabled: boolean;
 }
 export const DButtonGroupContext = React.createContext<DButtonGroupContextData | null>(null);
 
 export interface DButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   dType?: DButtonProps['dType'];
   dColor?: DButtonProps['dColor'];
   dSize?: DButtonProps['dSize'];
+  dDisabled?: boolean;
 }
 
 export function DButtonGroup(props: DButtonGroupProps) {
-  const { dType = 'secondary', dColor = 'primary', dSize, className, children, ...restProps } = useDComponentConfig('button-group', props);
+  const {
+    dType = 'secondary',
+    dColor = 'primary',
+    dDisabled = false,
+    dSize,
+    className,
+    children,
+    ...restProps
+  } = useDComponentConfig('button-group', props);
 
   //#region Context
   const dPrefix = useDPrefixConfig();
@@ -30,8 +40,9 @@ export function DButtonGroup(props: DButtonGroupProps) {
       buttonGroupType: dType,
       buttonGroupColor: dColor,
       buttonGroupSize: dSize,
+      buttonGroupDisabled: dDisabled,
     }),
-    [dType, dColor, dSize]
+    [dType, dColor, dSize, dDisabled]
   );
 
   return (

packages/ui/src/components/button/README.md

@@ -25,7 +25,7 @@ Extend `React.ButtonHTMLAttributes<HTMLButtonElement>`.
 | dShape | Set the button shape | 'circle' \| 'round' | - |
 | dSize | Set button size | 'smaller' \| 'larger' | - |
 | dIcon | Set the icon of the button | React.ReactNode | - |
-| dIconLeft | Settings icon on the left | boolean | true |
+| dIconRight | Settings icon on the right | boolean | false |
 <!-- prettier-ignore-end -->
 
 ### DButtonRef
@@ -44,4 +44,5 @@ Extend `React.HTMLAttributes<HTMLDivElement>`.
 | dType | Set the shape of the buttons in the button group | Reference DButtonProps['dType'] | 'secondary' |
 | dColor | Set the color of the buttons in the button group | Reference DButtonProps['dColor'] | 'primary' |
 | dSize | Set the size of the buttons in the button group | Reference DButtonProps['dSize'] | - |
+| buttonGroupDisabled | Disable the buttons in the button group | boolean | false |
 <!-- prettier-ignore-end -->

packages/ui/src/components/button/README.zh-Hant.md

@@ -24,7 +24,7 @@ title: 按钮
 | dShape | 设置按钮形状 | 'circle' \| 'round' | - |
 | dSize | 设置按钮大小 | 'smaller' \| 'larger' | - |
 | dIcon | 设置按钮的图标 | React.ReactNode | - |
-| dIconLeft | 设置图标在左侧 | boolean | true |
+| dIconRight | 设置图标在右侧 | boolean | false |
 <!-- prettier-ignore-end -->
 
 ### DButtonRef
@@ -43,4 +43,5 @@ export type DButtonRef = HTMLButtonElement;
 | dType | 设置按钮组中按钮的形态 | 参考 DButtonProps['dType'] | 'secondary' |
 | dColor | 设置按钮组中按钮的颜色 | 参考 DButtonProps['dColor'] | 'primary' |
 | dSize | 设置按钮组中按钮的大小 | 参考 DButtonProps['dSize'] | - |
+| buttonGroupDisabled | 禁用按钮组中的按钮 | boolean | false |
 <!-- prettier-ignore-end -->

packages/ui/src/components/button/demos/3.Icon.md

@@ -33,7 +33,7 @@ export default function Demo() {
       <br />
       <br />
       <DButton dIcon={searchIcon}>Search</DButton>
-      <DButton dIcon={searchIcon} dIconLeft={false}>
+      <DButton dIcon={searchIcon} dIconRight>
         Search
       </DButton>
       <DButton dType="secondary" dIcon={searchIcon}>