Wx (#103)

ChenlingasMx · web-flow · commit 8c64661f85c0 · 2021-06-19T11:41:59.000+08:00
* fix:解决MenuDropdown组件下拉报错

* fix:SearchBar组件

* fix:Table表格

* fix:展开组件封装,修复xcode14.5无法运行问题

* fix:update package.json
diff --git a/components/ExpandableSection/README.md b/components/ExpandableSection/README.md
@@ -0,0 +1,44 @@
+ExpandableSection 展开缩放
+---
+
+展开缩放
+
+### 基础示例
+
+<!--DemoStart--> 
+```js
+import { ExpandableSection,H5 } from '@uiw/react-native';
+
+class Demo extends Component {
+  state={
+    expanded:false,
+    top:false
+  }
+  render() {
+    return (
+       <ExpandableSection
+          expanded={this.state.expanded}
+          onPress={() => this.setState({ expanded: !this.state.expanded })}
+          sectionHeader={<H5>我是标题</H5>}
+          top={this.state.top}
+        >
+        <View>
+          <Text style={{ color: 'red' }}>展开的内容</Text>
+        </View>
+      </ExpandableSection>
+    )
+  }
+}
+```
+<!--End-->
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|-----|------|
+| `sectionHeader` | 设置标题 | JSX.Element | - |
+| `children` | 展开内容| ReactNode | - |
+| `labelStyle` | 设置提示文本样式 | TextProps['style'] | - |
+| `expanded` | 是否展开 | boolean | - |
+| `top` | 展开后显示位置 标题上或标题下 | boolean | - |
+| `top` | 点击事件 | void | - |
diff --git a/components/ExpandableSection/index.tsx b/components/ExpandableSection/index.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { LayoutAnimation, StyleSheet, View, TouchableOpacity } from 'react-native';
+
+export type ExpandableSectionProps = {
+  /**
+   * 标题
+   */
+  sectionHeader?: JSX.Element;
+  /**
+   * 折叠内容
+   */
+  children?: React.ReactNode;
+  /**
+   * 是否展开
+   */
+  expanded?: boolean;
+  /**
+   * 展开后显示位置 标题上或标题下
+   */
+  top?: boolean;
+  /**
+   * 点击事件
+   */
+  onPress?: () => void;
+};
+
+
+function ExpandableSection(props: ExpandableSectionProps) {
+  const { expanded, sectionHeader, children, top } = props;
+
+  const onPress = () => {
+    props.onPress?.();
+    LayoutAnimation.configureNext({ ...LayoutAnimation.Presets.easeInEaseOut, duration: 300 });
+  };
+
+  return (
+    <View style={styles.container}>
+      {top && expanded && children}
+      <TouchableOpacity onPress={onPress}>{sectionHeader}</TouchableOpacity>
+      {!top && expanded && children}
+    </View>
+  );
+}
+
+export default ExpandableSection;
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden'
+  }
+});
diff --git a/components/SearchBar/svg.js b/components/SearchBar/svg.js
@@ -0,0 +1,3 @@
+export const down = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8">
+<polyline fill="none" stroke="#C7C7CC" stroke-width="2" points="365 203 370.45 208.45 365 213.9" transform="rotate(90 289.725 -74.55)"/>
+</svg>`;
diff --git a/components/index.tsx b/components/index.tsx
@@ -27,6 +27,7 @@ export {default as Toast} from './Toast';
 export {default as SwipeAction} from './SwipeAction';
 export {default as Input} from './Input';
 export {default as SelectCascader} from './SelectCascader';
+export {default as ExpandableSection} from './ExpandableSection';
 
 /**
  * Typography
diff --git a/ios/Podfile b/ios/Podfile
@@ -20,10 +20,9 @@ target 'UIW' do
   # Enables Flipper.
   #
   # Note that if you have use_frameworks! enabled, Flipper will not work and
-  # you should disable the next line.
-  use_flipper!()
-
+  # you should disable these next few lines.
+  use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.87.0', 'Flipper-RSocket' => '1.3.1' })
   post_install do |installer|
-    react_native_post_install(installer)
+    flipper_post_install(installer)
   end
 end
diff --git a/src/image/chevronDown.png b/src/image/chevronDown.png
diff --git a/src/image/chevronUp.png b/src/image/chevronUp.png
diff --git a/src/routes.tsx b/src/routes.tsx
@@ -257,4 +257,12 @@ export const stackPageData: Routes[] = [
       description: '表格Table',
     },
   },
+  {
+    name: 'ExpandableSection',
+    component: require('./routes/ExpandableSection').default,
+    params: {
+      title: 'ExpandableSection 折叠展开',
+      description: '折叠展开ExpandableSection',
+    },
+  },
 ];
diff --git a/src/routes/ExpandableSection/index.tsx b/src/routes/ExpandableSection/index.tsx
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import { Text, StyleSheet, Image, View } from 'react-native';
+import Layout, { Container } from '../../Layout';
+import { ExpandableSection } from '../../../components';
+import { ComProps } from '../../typings';
+const { Header, Body, Card, Footer } = Layout;
+
+export interface ExpandableSection extends ComProps { }
+
+export default class MenuDropdownView extends Component<ExpandableSection> {
+  state = {
+    expanded: false,
+    top: false
+  }
+  getChevron() {
+    if (this.state.expanded) {
+      return this.state.top ? <Image style={styles.icon} source={require('../../image/chevronDown.png')} /> :  <Image style={styles.icon} source={require('../../image/chevronUp.png')} /> 
+    }
+    return this.state.top ? <Image style={styles.icon} source={require('../../image/chevronUp.png')} /> :  <Image style={styles.icon} source={require('../../image/chevronDown.png')} /> 
+  }
+  getHeaderElement() {
+    return (
+      <View style={styles.row}>
+        <Text>
+          {!this.state.expanded ? '展开' : '折叠'}
+        </Text>
+        {this.getChevron()}
+      </View>
+    );
+  }
+  render() {
+    const { route } = this.props;
+    const { expanded, top } = this.state
+    const description = route.params.description;
+    const title = route.params.title;
+    return (
+      <Container>
+        <Layout>
+          <Header title={title} description={description} />
+          <Body>
+            <Card title="基础实例" style={styles.card}>
+              <ExpandableSection
+                expanded={expanded}
+                onPress={() => this.setState({ expanded: !expanded })}
+                sectionHeader={this.getHeaderElement()}
+                top={top}
+              >
+                <Card title="我是展开的内容" style={styles.card} />
+                <Card title="我是展开的内容" style={styles.card} />
+                <Card title="我是展开的内容" style={styles.card} />
+              </ExpandableSection>
+            </Card>
+          </Body>
+          <Footer />
+        </Layout>
+      </Container>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  icon: {
+    alignSelf: 'center'
+  },
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: 10
+  }
+});
diff --git a/yarn.lock b/yarn.lock
@@ -1098,10 +1098,10 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.10.tgz#5dda643e19e587793bc2034dd9bf7398ad43d401"
   integrity sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==
 
-"@react-native-picker/picker@1.16.0":
-  version "1.16.0"
-  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-1.16.0.tgz#3e5268da892349a35c66ab7bd75e834147621e5a"
-  integrity sha512-kQcL8U5CYQRgmNtlyhEH1BIp06Eaxhj7Lybd7rV4asd4Q90kCEm52b5x5WnE0J6WdVvC6sRzdcbPCb0s9yc4mQ==
+"@react-native-picker/picker@1.12.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-1.12.0.tgz#215d7c950935c8f1a834af0832a93122b4bab0f1"
+  integrity sha512-LxtFcuQ/jxsNwH9byM4mMSusqGfaj0LHXTh6fJgvIKOBjAWwV+FjWHszQSPCbnycdezirf8dFLhF9phcNuE8CA==
 
 "@react-native/assets@1.0.0":
   version "1.0.0"
@@ -1118,23 +1118,23 @@
   resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-1.0.0.tgz#05bb0031533598f9458cf65a502b8df0eecae780"
   integrity sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w==
 
-"@react-navigation/core@^5.15.3":
-  version "5.15.3"
-  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.15.3.tgz#dce7090bf3ea0d302993d742c706825e495b812e"
-  integrity sha512-3ZdyDInh8qg1kygCNkmh9lFgpDf29lTvPsaMe2mm/qvmxLKSgttWBz07P2fc181aV9jTdgQpzYfWZ5KWT036zw==
+"@react-navigation/core@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.15.2.tgz#6aa374c7bcb6ffcaac8e2a7f8bdb2f9aba469b31"
+  integrity sha512-jNSP0FMu1N6Pa1Slsy8b/JbmlTAXcVeXVwnxrEMVGWeiNqUVYl+tx1FuQAqi3q1m4cg9ygXkGsgLgRmnXAEC8g==
   dependencies:
     "@react-navigation/routers" "^5.7.2"
     escape-string-regexp "^4.0.0"
     nanoid "^3.1.15"
     query-string "^6.13.6"
     react-is "^16.13.0"
 
-"@react-navigation/native@5.9.4":
-  version "5.9.4"
-  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.4.tgz#414c044423c58aa1cdde1b6494309e0b51da08b8"
-  integrity sha512-BUCrOXfZDdKWBqM8OhOKQhCX5we4HUo5XG6tCQtVqQAep+7UcApZmMUuemUXDxVe8NPESUpoUlB0RaEpyIdfTQ==
+"@react-navigation/native@5.9.3":
+  version "5.9.3"
+  resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.9.3.tgz#3859f439adc9a744b79a98fbc7606bdd459574d5"
+  integrity sha512-xaRlCDRVuFGxHsP/IetwLdNvLJwIJBYCUIx/ufWs6QkT9Q0EB0DtKzXCItuHydjMEVPd1Cy7lfjUlSM6hZ6Q3Q==
   dependencies:
-    "@react-navigation/core" "^5.15.3"
+    "@react-navigation/core" "^5.15.2"
     escape-string-regexp "^4.0.0"
     nanoid "^3.1.15"
 
@@ -1145,10 +1145,10 @@
   dependencies:
     nanoid "^3.1.15"
 
-"@react-navigation/stack@5.14.5":
-  version "5.14.5"
-  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.14.5.tgz#dc615cd7d270ba79e3330dcb50c2819d0e1f3850"
-  integrity sha512-hpdn1SS0tc3/3atkV2Q2y++n5B4e0rUcCj4W43PODMu72yX2m0LkKAAcpkPDCWAvwnLLIoLAEl5BEifZigl/6A==
+"@react-navigation/stack@5.14.3":
+  version "5.14.3"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.14.3.tgz#3d15fcd2cf8d0d2a1248686565c6a85e2d8e1c55"
+  integrity sha512-7rHc13DHsYP7l7GcgBcLEyX2/IAuCcRZ1Iu3MtOZSayjvFXxBBYKFKw0OyY9NxOfZUdLl3Q3mLiUHVFZkHMcuA==
   dependencies:
     color "^3.1.3"
     react-native-iphone-x-helper "^1.3.0"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	+export const down = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8">
	`2`	`+<polyline fill="none" stroke="#C7C7CC" stroke-width="2" points="365 203 370.45 208.45 365 213.9" transform="rotate(90 289.725 -74.55)"/>`
	`3`	+</svg>`;