Merge pull request #471 from hy916/dev

fix(CardCollapse): add Cardcollapse Document Instance

Author: ChenlingasMx

example/examples/src/routes/CardCollapse/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import {ScrollView, View, Image} from 'react-native';
-import {CardCollapse} from '@uiw/react-native';
+import { ScrollView, View, Image } from 'react-native';
+import { CardCollapse } from '@uiw/react-native';
 import Layout from '../../Layout';
 import map from 'lodash/map';
 
@@ -12,20 +12,20 @@ const contents = [
 ];
 
 const CardCollapseDemo = (props: any) => {
-  const {Header} = Layout;
-  const {route} = props;
+  const { Header } = Layout;
+  const { route } = props;
   const description = route.params.description;
   const title = route.params.title;
 
   const renderItem = (_: string, index: number) => {
     return (
-      <View key={index} style={{padding: 12}}>
-        <Image source={{uri: contents[index]}} style={{height: 180}} />
+      <View key={index} style={{ padding: 12 }}>
+        <Image source={{ uri: contents[index] }} style={{ height: 180 }} />
       </View>
     );
   };
   return (
-    <ScrollView style={{flex: 1}}>
+    <ScrollView style={{ flex: 1 }}>
       <Header title={title} description={description} />
       <Header description={'基本使用'} />
       <CardCollapse isCollapsed={false} disablePresses={false}>

packages/core/src/Calendar/index.tsx

@@ -298,10 +298,10 @@ const styles = StyleSheet.create({
   },
   calendarWeekdays: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'space-around',
     alignItems: 'center',
     paddingHorizontal: MainWidth < 1000 ? MainWidth / 7 - 33 : MainWidth / 30,
-    paddingTop: 10,
+    paddingTop: 12,
   },
   calendarWedText: {
     color: '#616161',
@@ -312,10 +312,10 @@ const styles = StyleSheet.create({
   },
   weekDay: {
     flexDirection: 'row',
-    paddingHorizontal: 2,
+    paddingHorizontal: 22,
   },
   dateBase: {
-    marginHorizontal: 2,
+    marginHorizontal: 8,
     width: MainWidth < 1000 ? MainWidth / 7 - 4.5 : MainWidth / 14,
     height: MainHeight < 300 ? MainWidth / 7 - 4.5 : MainWidth / 14,
     ...Platform.select({
@@ -327,15 +327,15 @@ const styles = StyleSheet.create({
   },
   currentMonth: {
     backgroundColor: '#329BCB',
-    borderRadius: 50,
+    borderRadius: 60,
   },
   selectMonth: {
     borderWidth: 1,
     borderColor: '#329BCB',
-    borderRadius: 50,
+    borderRadius: 60,
   },
   otherMonth: {
-    borderRadius: 50,
+    borderRadius: 60,
   },
   dayText: {
     textAlign: 'center',

packages/core/src/CardCollapse/README.md

@@ -3,56 +3,55 @@ CardCollapse 可折叠卡片列表
 
 可折叠卡片列表
 
-![](https://user-images.githubusercontent.com/66067296/137702190-e48c11e3-77d9-40c3-8d59-09ac6ddc9efb.gif)
-
 ### 基础示例
 
 <!--DemoStart--> 
-```jsx
-import React from 'react';
+```jsx mdx:preview
+import React,{ Component } from 'react';
 import { ScrollView, View,Image } from 'react-native';
 import { CardCollapse } from '@uiw/react-native';
-import Layout from '../../Layout';
+import Layout from '../Layout';
 import map from 'lodash/map'
 
+const { Header} = Layout;
 const contents = [
-  'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F04%2F22%2Fca22d8623fe7454ea9cdb33f3137d14e.jpeg&thumbnail=650x2147483647&quality=80&type=jpg',
-  'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F04%2F22%2Fca22d8623fe7454ea9cdb33f3137d14e.jpeg&thumbnail=650x2147483647&quality=80&type=jpg',
-  'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F04%2F22%2Fca22d8623fe7454ea9cdb33f3137d14e.jpeg&thumbnail=650x2147483647&quality=80&type=jpg',
-  'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2019%2F04%2F22%2Fca22d8623fe7454ea9cdb33f3137d14e.jpeg&thumbnail=650x2147483647&quality=80&type=jpg'
+  'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
+  'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
+  'https://wx1.sinaimg.cn/mw690/4718260ely1gt2cg5r9zij22yo1o0x6p.jpg',
+  'https://wx3.sinaimg.cn/mw690/4718260ely1gt2cg7t5udj23dw1wkhdu.jpg',
 ];
 
-const CardCollapseDemo = (props: any) => {
-  const { Header } = Layout;
-  const { route } = props;
-  const description = route.params.description;
-  const title = route.params.title;
-
-  const renderItem = (_: string, index: number) => {
+class Demo extends Component {
+  render() {
+  const renderItem = (_, index) => {
     return (
-      <View key={index} style={{ padding: 18 }}>
-        <Image source={{uri: contents[index]}} style={{ height: 150 }} />
+      <View key={index} style={{ padding: 20,backgroundColor: '#fff'}}>
+          <Image source={{uri: contents[index]}} style={{ height: 120 }} /> 
       </View>
     );
   }
-  return (
+    return (
     <ScrollView style={{ flex: 1 }}>
-      <Header title={title} description={description} />
       <Header description={'基本使用'} />
       <CardCollapse
-       isCollapsed
-       disablePresses={true}
+       isCollapsed={false}//是否折叠
+        disablePresses={true}//卡片是否可以点击
+        onCollapseWillChange={()=>{}}
+        onCollapseChanged={()=>{}}
       >
         {map(contents, (item, index) => {
           return renderItem(item, index);
         })}
       </CardCollapse>
     </ScrollView>
-  );
-};
-export default CardCollapseDemo;
+    )
+  }
+}
+
+export default Demo
 
 ```
+
 <!--End-->
 
 ### Props

packages/core/src/CardCollapse/index.tsx

@@ -92,17 +92,6 @@ export default function CardCollapse(props: CardCollapseProps) {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
   }, [collapsed]);
 
-  function getItemScale(index: number) {
-    if (collapsed) {
-      if (index === itemsCount - 2) {
-        return 0.95;
-      }
-      if (index === itemsCount - 1) {
-        return 0.9;
-      }
-    }
-    return 1;
-  }
   // 动画
   const animate = async () => {
     return Promise.all([animateValues(), animateCards()]);
@@ -133,6 +122,13 @@ export default function CardCollapse(props: CardCollapseProps) {
     });
   };
 
+  function getItemScale(index: number) {
+    if (collapsed) {
+      return 0.9;
+    }
+    return 1;
+  }
+
   const animateCards = () => {
     const promises = [];
     for (let index = 0; index < itemsCount; index++) {
@@ -210,21 +206,23 @@ export default function CardCollapse(props: CardCollapseProps) {
 
   const renderItem = (item: JSX.Element | JSX.Element[], index: number) => {
     return (
-      <Animated.View
+      < Animated.View
         key={index}
-        onLayout={index === 0 ? onLayout : undefined}
-        style={[
-          Platform.OS === 'ios' && styles.containerShadow,
-          getStyle(index),
-          {
-            borderRadius: Platform.OS === 'ios' ? itemBorderRadius : undefined,
-            alignSelf: 'center',
-            zIndex: itemsCount - index,
-            transform: [{ scaleX: animatedScaleArray[index] }],
-            width: Dimensions.get('screen').width - 40,
-            height: collapsed ? firstItemHeight : undefined,
-          },
-        ]}
+        onLayout={index === 0 ? onLayout : undefined
+        }
+        style={
+          [
+            Platform.OS === 'ios' && styles.containerShadow,
+            getStyle(index),
+            {
+              borderRadius: Platform.OS === 'ios' ? itemBorderRadius : undefined,
+              alignSelf: 'center',
+              zIndex: itemsCount - index,
+              transform: [{ scaleX: animatedScaleArray[index] }],
+              width: Dimensions.get('screen').width - 40,
+              height: collapsed ? firstItemHeight : undefined,
+            },
+          ]}
         collapsable={false}
       >
         <Container
@@ -237,7 +235,7 @@ export default function CardCollapse(props: CardCollapseProps) {
             </Animated.View>
           </TouchableOpacity>
         </Container>
-      </Animated.View>
+      </Animated.View >
     );
   };
   return (

packages/core/src/SearchBar/README.md

@@ -1,4 +1,4 @@
-SearchBar 模糊搜素组件
+SearchBar 模糊搜索组件
 ---
 
 ### 基础示例

website/src/routes/menus.ts

@@ -28,7 +28,7 @@ export const componentMenus: MenuData[] = [
   { path: '/components/segmentedcontrol', name: 'SegmentedControl 分段器' },
   { path: '/components/slider', name: 'Slider 滑块输入条' },
   { path: '/components/switch', name: 'Switch 开关' },
-  { path: '/components/searchbar', name: 'SearchBar 模糊搜素组件' },
+  { path: '/components/searchbar', name: 'SearchBar 模糊搜索组件' },
   { divider: true, name: 'Data Display' },
   { path: '/components/avatar', name: 'Avatar 头像' },
   { path: '/components/badge', name: 'Badge 标记' },