From f9bd38a86e4724d42932af24f6d0a85b8d76e048 Mon Sep 17 00:00:00 2001
From: yatessss <897969073@qq.com>
Date: Fri, 26 May 2023 11:20:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0icon=20=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98&=E4=B8=BB=E9=A2=98=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                       | 21 ++++++++++
 example/src/App.tsx             | 17 ++++++--
 example/src/Test.tsx            | 18 ---------
 site/web/site.config.js         | 14 ++++++-
 src/components/Button/index.tsx |  3 +-
 src/theme/theme.md              | 69 +++++++++++++++++++++++++++++++++
 6 files changed, 119 insertions(+), 23 deletions(-)
 delete mode 100644 example/src/Test.tsx
 create mode 100644 src/theme/theme.md

diff --git a/README.md b/README.md
index 870dbb6..9ea2583 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,25 @@
 
 在项目根目录中运行`npm i`安装代码需要对应依赖，再进入对应 package 运行项目
 
+### 目录结构
+
+.
+├── CHANGELOG.md          
+├── DEVELOP_GUIDE.md
+├── README.md
+├── babel.config.js
+├── example               // demo运行目录
+├── jest-setup.js
+├── jest.config.js
+├── node_modules
+├── package-lock.json
+├── package.json
+├── scripts
+├── site                  // 文档站点目录
+├── src                   // 组件库源码
+├── tsconfig.json
+└── tsconfig.test.json
+
 ### 运行命令
 
 
@@ -26,3 +45,5 @@ subject-描述
 1. feat(button): 修改文案
 2. fix: fixbug
 3. refactor: 调整代码结构
+
+### 文档地址
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 4b683b5..42ec7f4 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -5,9 +5,8 @@ import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createDrawerNavigator, DrawerContentScrollView, useDrawerProgress } from '@react-navigation/drawer';
 import { createStackNavigator, CardStyleInterpolators } from '@react-navigation/stack';
 import Animated, { interpolate, useAnimatedStyle } from 'react-native-reanimated';
-import { useTheme } from '@src/theme';
+import { ThemeProvider, useTheme } from '@src/theme';
 import { Text, ScrollView, View, Button } from '@src/components';
-import ThemeProvider from '@src/theme/ThemeProvider';
 import { SafeAreaProvider, initialWindowMetrics, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { lazy, useCallback, Suspense } from 'react';
 import { ListItem } from './components/ListItem';
@@ -76,6 +75,7 @@ function DrawerMenu(props: any) {
         /> */}
         <View className="mx12">
           <Button
+            loading
             theme="primary"
             content="change theme"
             onPress={() => {
@@ -110,6 +110,11 @@ function App(): JSX.Element {
           colors: {
             fontGray2: 'red',
           },
+          classnames: {
+            test: {
+              backgroundColor: 'red',
+            },
+          },
         },
       }}
       theme="light"
@@ -117,7 +122,13 @@ function App(): JSX.Element {
       <GestureHandlerRootView style={{ flex: 1 }}>
         <SafeAreaProvider initialMetrics={initialWindowMetrics}>
           <NavigationContainer>
-            <Suspense fallback={<Text>loading...</Text>}>
+            <Suspense
+              fallback={
+                <View className="flex1 flexCenter">
+                  <Text>loading...</Text>
+                </View>
+              }
+            >
               <Stack.Navigator
                 initialRouteName="ExampleList"
                 screenOptions={{
diff --git a/example/src/Test.tsx b/example/src/Test.tsx
deleted file mode 100644
index d830046..0000000
--- a/example/src/Test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { View } from 'react-native';
-import { useTheme } from '@src/theme';
-import Button from '@src/components/Button';
-
-export const Test = () => {
-  const { setThemeName, themeName } = useTheme();
-  console.log('themeName', themeName);
-  return (
-    <View>
-      <Button
-        content="change2"
-        onPress={() => {
-          setThemeName(themeName === 'light' ? 'dark' : 'light');
-        }}
-      />
-    </View>
-  );
-};
diff --git a/site/web/site.config.js b/site/web/site.config.js
index a00e740..51c797a 100644
--- a/site/web/site.config.js
+++ b/site/web/site.config.js
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-relative-packages */
-import baseConfig from '@example/base-config.ts';
+import baseConfig from '@example/component-list.ts';
 
 const componentConfig = baseConfig.map((config) => {
   const result = {
@@ -46,6 +46,18 @@ const siteConfig = {
         },
       ],
     },
+    {
+      title: '全局配置',
+      type: 'config',
+      children: [
+        {
+          title: '主题',
+          name: 'theme',
+          path: '/react-native/theme',
+          component: () => import('tdesign-react-native/theme/theme.md'),
+        },
+      ],
+    },
     ...componentConfig,
     // {
     //   title: '基础组件',
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 95f4954..537bb0c 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -8,6 +8,7 @@ import Animated, {
   Easing,
   cancelAnimation,
 } from 'react-native-reanimated';
+import { LoadingIcon } from 'tdesign-icons-react-native/src';
 import { useTheme, ThemeType } from '../../theme';
 import { Text, View } from '../Base';
 import { Touchable } from '../Touchable';
@@ -200,7 +201,7 @@ export const Button = (props: IButtonProps) => {
   const loadingNode = (
     <View style={_iconStyle}>
       <Animated.View style={animatedStyle}>
-        <Text>loading</Text>
+        <LoadingIcon color={_iconColor} />
       </Animated.View>
     </View>
   );
diff --git a/src/theme/theme.md b/src/theme/theme.md
new file mode 100644
index 0000000..fa17772
--- /dev/null
+++ b/src/theme/theme.md
@@ -0,0 +1,69 @@
+---
+title: 主题配置
+spline: explain
+---
+
+### 使用主题
+
+在根组件外层添加`ThemeProvider`组件，在需要使用主题的组件中使用`useTheme`hook，获取到主题，使用对应token即可。
+
+```js
+import { ThemeProvider } from '@src/theme';
+
+function App() {
+    return (
+        <ThemeProvider>
+            <Root/>
+        </ThemeProvider>
+    )
+}
+
+import { useTheme } from '@src/theme';
+function Root() {
+    const { theme } = useTheme();
+    return <Text style={{color: theme.colors.fontGray1}}>测试</Text>
+}
+```
+
+### 使用className
+
+组件提供类似`Tailwind CSS`的便捷样式功能，需要配合组件库提供的View、Text等组件共同使用。可以查看`tdesign-react-native/src/theme/light/classnames.ts`支持哪些样式。
+
+```js
+import { Text, ScrollView, View, Button } from '@src/components';
+
+function Demo() {
+    return <View className="bg mt12">
+        <Text className="text4">测试</Text>
+    </View>
+}
+
+```
+
+### 自定义样式
+
+`ThemeProvider`组件接收`config`参数可以配置一些自定义样式或覆盖已有样式。
+
+```js
+<ThemeProvider config={{
+    light: {
+        // 覆盖样式
+        colors: {
+            fontGray2: 'red',
+        },
+        classnames: {
+            // 自定义样式
+            testBg: {
+                backgroundColor: 'red',
+            },
+        },
+    },
+    }}
+></ThemeProvider>
+
+function Demo() {
+    return <View className="testBg">
+        <Text className="fontGray2">测试</Text>
+    </View>
+}
+```