💄 style(ui): Adopt directional icons with RTL languages (#261)

Author: alirezaImani79

src/Alert/index.tsx

@@ -6,6 +6,7 @@ import {
   AlertTriangle,
   CheckCircle,
   ChevronDown,
+  ChevronLeft,
   ChevronRight,
   Info,
   X,
@@ -16,6 +17,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import ActionIcon from '@/ActionIcon';
 import Icon from '@/Icon';
+import { useDirection } from '@/hooks/useDirection';
 
 import { useStyles } from './style';
 
@@ -69,6 +71,7 @@ const Alert = memo<AlertProps>(
       hasTitle: !!description,
       showIcon: !!showIcon,
     });
+    const direction = useDirection();
 
     const isInsideExtra = !extraIsolate && !!extra;
 
@@ -135,7 +138,7 @@ const Alert = memo<AlertProps>(
           >
             <ActionIcon
               color={colorfulText ? colors(theme, type) : undefined}
-              icon={expand ? ChevronDown : ChevronRight}
+              icon={expand ? ChevronDown : direction === 'rtl' ? ChevronLeft : ChevronRight}
               onClick={() => setExpand(!expand)}
               size={{ blockSize: 24, fontSize: 18 }}
             />

src/DraggablePanel/components/DraggablePanelHeader.tsx

@@ -1,9 +1,10 @@
-import { PanelLeft, Pin, PinOff } from 'lucide-react';
+import { PanelLeft, PanelRight, Pin, PinOff } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
 
 import ActionIcon from '@/ActionIcon';
+import { useDirection } from '@/hooks/useDirection';
 import { type DivProps } from '@/types';
 
 import { useStyles } from './style';
@@ -19,6 +20,7 @@ export interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
 const DraggablePanelHeader = memo<DraggablePanelHeaderProps>((props) => {
   const { pin, setPin, className, setExpand, title, position = 'left', ...rest } = props;
   const { cx, styles } = useStyles();
+  const direction = useDirection();
 
   const [isPinned, setIsPinned] = useControlledState(false, {
     onChange: setPin,
@@ -27,7 +29,7 @@ const DraggablePanelHeader = memo<DraggablePanelHeaderProps>((props) => {
 
   const panelIcon = (
     <ActionIcon
-      icon={PanelLeft}
+      icon={direction === 'rtl' ? PanelRight : PanelLeft}
       onClick={() => setExpand?.(false)}
       size={{ blockSize: 24, fontSize: 14 }}
     />

src/EmojiPicker/AvatarUploader.tsx

@@ -1,10 +1,11 @@
 import { Button, type GetProp, Upload, type UploadProps, message } from 'antd';
-import { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';
+import { ChevronLeftIcon, ChevronRightIcon, ImageUpIcon } from 'lucide-react';
 import { memo, useCallback, useRef, useState } from 'react';
 import AvatarEditor from 'react-avatar-editor';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import Icon from '@/Icon';
+import { useDirection } from '@/hooks/useDirection';
 
 import { useStyles } from './style';
 
@@ -36,6 +37,7 @@ const AvatarUploader = memo<AvatarUploaderProps>(
     const editor = useRef<any>(null);
     const [previewImage, setPreviewImage] = useState('');
     const { styles } = useStyles();
+    const direction = useDirection();
 
     const beforeUpload = useCallback((file: FileType) => {
       const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
@@ -90,7 +92,7 @@ const AvatarUploader = memo<AvatarUploaderProps>(
             </Flexbox>
             <Flexbox gap={8} horizontal style={{ position: 'relative' }} width={'100%'}>
               <Button
-                icon={<Icon icon={ChevronLeftIcon} />}
+                icon={<Icon icon={direction === 'rtl' ? ChevronRightIcon : ChevronLeftIcon} />}
                 onClick={() => setPreviewImage('')}
                 style={{ flex: 'none' }}
               />

src/Form/demos/StateControl.tsx

@@ -1,9 +1,11 @@
 import { Form, type FormProps } from '@lobehub/ui';
 import { StoryBook, useControls, useCreateStore } from '@lobehub/ui/storybook';
 import { InputNumber, Segmented, Select, Switch } from 'antd';
-import { Palette, PanelLeftClose } from 'lucide-react';
+import { Palette, PanelLeftClose, PanelRightClose } from 'lucide-react';
 import { useState } from 'react';
 
+import { useDirection } from '@/hooks/useDirection';
+
 const setting = {
   i18n: 'en',
   liteAnimation: false,
@@ -21,6 +23,7 @@ export default () => {
   const [active, setActive] = useState<ActiveKey[]>([ActiveKey.Theme, ActiveKey.Sidebar]);
 
   const store = useCreateStore();
+  const direction = useDirection();
 
   const { variant }: any = useControls(
     {
@@ -125,7 +128,7 @@ export default () => {
           value={active.includes(ActiveKey.Sidebar)}
         />
       ),
-      icon: PanelLeftClose,
+      icon: direction === 'rtl' ? PanelRightClose : PanelLeftClose,
       key: ActiveKey.Sidebar,
       title: 'Quick Setting Sidebar',
     },

src/Highlighter/FullFeatured.tsx

@@ -1,11 +1,12 @@
 import { Select, type SelectProps } from 'antd';
-import { ChevronDown, ChevronRight } from 'lucide-react';
+import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ActionIcon from '@/ActionIcon';
 import CopyButton from '@/CopyButton';
 import SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';
+import { useDirection } from '@/hooks/useDirection';
 import { languageMap } from '@/hooks/useHighlight';
 
 import { useStyles } from './style';
@@ -41,6 +42,7 @@ export const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps>(
     const [expand, setExpand] = useState(defalutExpand);
     const [lang, setLang] = useState(language);
     const { styles, cx } = useStyles(type);
+    const direction = useDirection();
 
     const size = { blockSize: 24, fontSize: 14, strokeWidth: 2 };
 
@@ -76,7 +78,7 @@ export const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps>(
       >
         <Flexbox align={'center'} className={styles.header} horizontal justify={'space-between'}>
           <ActionIcon
-            icon={expand ? ChevronDown : ChevronRight}
+            icon={expand ? ChevronDown : direction === 'rtl' ? ChevronLeft : ChevronRight}
             onClick={() => setExpand(!expand)}
             size={{ blockSize: 24, fontSize: 14, strokeWidth: 3 }}
           />

src/Markdown/demos/customPlugins/MarkdownElements/AntThinking/Component.tsx

@@ -1,8 +1,9 @@
 import { createStyles } from 'antd-style';
-import { ChevronDown, ChevronRight, SparkleIcon } from 'lucide-react';
+import { ChevronDown, ChevronLeft, ChevronRight, SparkleIcon } from 'lucide-react';
 import { PropsWithChildren, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useDirection } from '@/hooks/useDirection';
 import { Icon } from '@/index';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
@@ -12,11 +13,11 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     padding-block: 8px;
     padding-inline: 12px;
     padding-inline-end: 12px;
+    border-radius: 8px;
 
     color: ${token.colorText};
 
     background: ${token.colorFillTertiary};
-    border-radius: 8px;
 
     &:hover {
       background: ${isDarkMode ? '' : token.colorFillSecondary};
@@ -35,6 +36,7 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
 const Render = memo<PropsWithChildren>(({ children }) => {
   const { styles, theme } = useStyles();
+  const direction = useDirection();
 
   const [showDetail, setShowDetail] = useState(false);
 
@@ -51,7 +53,7 @@ const Render = memo<PropsWithChildren>(({ children }) => {
         <Flexbox gap={8} horizontal>
           <Icon color={theme.purple} icon={SparkleIcon} /> Thinking...
         </Flexbox>
-        <Icon icon={showDetail ? ChevronDown : ChevronRight} />
+        <Icon icon={showDetail ? ChevronDown : direction === 'rtl' ? ChevronLeft : ChevronRight} />
       </Flexbox>
       {showDetail && children}
     </Flexbox>

src/Mermaid/FullFeatured.tsx

@@ -1,9 +1,10 @@
-import { ChevronDown, ChevronRight } from 'lucide-react';
+import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
 import { ReactNode, memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ActionIcon from '@/ActionIcon';
 import CopyButton from '@/CopyButton';
+import { useDirection } from '@/hooks/useDirection';
 
 import { useStyles } from './style';
 import { MermaidProps } from './type';
@@ -13,6 +14,7 @@ export const MermaidFullFeatured = memo<
 >(({ showLanguage, content, children, className, copyable, actionsRender, style, ...rest }) => {
   const [expand, setExpand] = useState(true);
   const { styles, cx } = useStyles('block');
+  const direction = useDirection();
   const container = cx(styles.container, className);
 
   const size = { blockSize: 24, fontSize: 14, strokeWidth: 2 };
@@ -27,7 +29,7 @@ export const MermaidFullFeatured = memo<
     <div className={container} data-code-type="mermaid" style={style} {...rest}>
       <Flexbox align={'center'} className={styles.header} horizontal justify={'space-between'}>
         <ActionIcon
-          icon={expand ? ChevronDown : ChevronRight}
+          icon={expand ? ChevronDown : direction === 'rtl' ? ChevronLeft : ChevronRight}
           onClick={() => setExpand(!expand)}
           size={{ blockSize: 24, fontSize: 14, strokeWidth: 3 }}
         />

src/chat/ChatHeader/index.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { ChevronLeft } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { CSSProperties, ReactNode, memo } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
 import ActionIcon from '@/ActionIcon';
+import { useDirection } from '@/hooks/useDirection';
 
 import { useStyles } from './style';
 
@@ -44,6 +45,7 @@ const ChatHeader = memo<ChatHeaderProps>(
     ...rest
   }) => {
     const { cx, styles } = useStyles();
+    const direction = useDirection();
 
     return (
       <Flexbox
@@ -65,7 +67,7 @@ const ChatHeader = memo<ChatHeaderProps>(
         >
           {showBackButton && (
             <ActionIcon
-              icon={ChevronLeft}
+              icon={direction === 'rtl' ? ChevronRight : ChevronLeft}
               onClick={() => onBackClick?.()}
               size={{ fontSize: 24 }}
               style={{ marginRight: gaps?.left ? -gaps.left / 2 : -6 }}

src/hooks/useDirection.ts

@@ -0,0 +1,10 @@
+import { ConfigProvider } from 'antd';
+import { useContext, useMemo } from 'react';
+
+export const useDirection = () => {
+  const { direction } = useContext(ConfigProvider.ConfigContext);
+
+  return useMemo(() => {
+    return direction;
+  }, [direction]);
+};

src/mobile/MobileNavBar/index.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { ChevronLeft } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { CSSProperties, ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import ActionIcon from '@/ActionIcon';
+import { useDirection } from '@/hooks/useDirection';
 import MobileSafeArea from '@/mobile/MobileSafeArea';
 
 import { useStyles } from './style';
@@ -50,6 +51,7 @@ const MobileNavBar = memo<MobileNavBarProps>(
     contentStyles,
   }) => {
     const { styles, cx } = useStyles();
+    const direction = useDirection();
 
     return (
       <Flexbox className={cx(styles.container, className)} style={style}>
@@ -71,7 +73,7 @@ const MobileNavBar = memo<MobileNavBarProps>(
           >
             {showBackButton && (
               <ActionIcon
-                icon={ChevronLeft}
+                icon={direction === 'rtl' ? ChevronRight : ChevronLeft}
                 onClick={() => onBackClick?.()}
                 size={{ fontSize: 24 }}
               />