feat:Ellipsis 增加弹出展示全部文本内容

Author: 杨楠

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

@@ -34,6 +34,14 @@ export default class DividerView extends React.Component<DividerViewProps> {
                 </Ellipsis>
               </WingBlank>
             </Card>
+            <Card title="点击展示文本全部内容">
+              <WingBlank>
+                <Ellipsis maxLen={5} placeholder="。。。。">
+                  用于文本过长，超出长度显示 用于文本过长，超出长度显示
+                  用于文本过长，超出长度显示 用于文本过长，超出长度显示
+                </Ellipsis>
+              </WingBlank>
+            </Card>
           </Body>
           <Footer />
         </Layout>

packages/core/src/Ellipsis/index.tsx

@@ -1,19 +1,50 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Text, TextProps } from 'react-native';
+import { View, Text, TextProps, Dimensions, TouchableOpacity } from 'react-native';
+import Icon from '../Icon';
+import { right } from './svg';
+import MaskLayer from '../MaskLayer';
 
+let MainHeight = Dimensions.get('window').height;
 export interface EllipsisProps extends TextProps {
   children?: React.ReactNode;
   placeholder?: string;
   maxLen?: number;
 }
 
 export default function Ellipsis({ maxLen, children, placeholder, ...props }: EllipsisProps) {
+  const [modalVisible, setModalVisible] = useState(false);
+
   let content = children;
+  let content1 = children;
   if (maxLen && content && typeof content === 'string') {
     content = content.length > maxLen ? content.substr(0, maxLen) + placeholder : content;
   }
-  return <Text {...props}>{content}</Text>;
+  return (
+    <>
+      <MaskLayer visible={modalVisible} onDismiss={() => setModalVisible(false)}>
+        <View
+          style={{
+            backgroundColor: '#fff',
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginTop: MainHeight * 0.2,
+            height: children.length + 30,
+          }}
+        >
+          <Text style={{ fontSize: 17 }}>{children}</Text>
+        </View>
+      </MaskLayer>
+
+      <TouchableOpacity
+        style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
+        onPress={() => setModalVisible(true)}
+      >
+        <Text {...props}>{content}</Text>
+        <Icon name="right" size={14} />
+      </TouchableOpacity>
+    </>
+  );
 }
 
 Ellipsis.propTypes = {

packages/core/src/Ellipsis/svg.tsx

@@ -0,0 +1,3 @@
+export const right: string = `
+<svg t="1635326971544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1198" width="200" height="200"><path d="M353.045333 86.826667L754.56 488.362667a32 32 0 0 1 2.090667 42.965333l-2.090667 2.282667L353.066667 935.168a8.533333 8.533333 0 0 1-6.037334 2.496h-66.368a8.533333 8.533333 0 0 1-6.037333-14.570667L686.72 511.018667 274.602667 98.901333a8.533333 8.533333 0 0 1 6.037333-14.570666h66.346667a8.533333 8.533333 0 0 1 6.058666 2.496z" fill="#333333" p-id="1199"></path></svg>
+`;