Merge pull request #552 from nullptr-z/dev

ChenlingasMx · web-flow · commit 71ccf9f49e59 · 2023-03-08T17:19:14.000+08:00
fix(Preview): 示例预览组件将节点挂在到div下
diff --git a/packages/core/src/DragDrawer/README.md b/packages/core/src/DragDrawer/README.md
@@ -1,7 +1,7 @@
 DragDrawer 拖曳抽屉
 ---
 
-![](https://user-images.githubusercontent.com/66067296/143187302-bee614b4-7799-49d1-9cab-470ad8228372.gif)
+<img src="https://user-images.githubusercontent.com/66067296/143187302-bee614b4-7799-49d1-9cab-470ad8228372.gif" style="width:300px;height:620px"/>
 
 可自定义拖曳抽屉高度。
 
diff --git a/packages/core/src/Empty/README.md b/packages/core/src/Empty/README.md
@@ -3,11 +3,11 @@ Empty 空状态
 
 空状态时的展示占位图。
 
-![](https://user-images.githubusercontent.com/66067296/137707848-8603fc59-3904-437d-9908-53cd621a1a0e.png)
+<img src="https://user-images.githubusercontent.com/66067296/137707848-8603fc59-3904-437d-9908-53cd621a1a0e.png" style="width:300px;height:620px"/>
 
 ### 基础示例
 
-<!--DemoStart--> 
+<!--DemoStart-->
 ```js
 import { Empty } from '@uiw/react-native';
 
@@ -24,7 +24,7 @@ export default Demo
 
 ### 自定义文字
 
-<!--DemoStart--> 
+<!--DemoStart-->
 ```js
 import { Empty } from '@uiw/react-native';
 
@@ -41,7 +41,7 @@ export default Demo
 
 ### 替换默认图标
 
-<!--DemoStart--> 
+<!--DemoStart-->
 ```js
 import { Empty } from '@uiw/react-native';
 
@@ -82,7 +82,7 @@ export default Demo
 
 ### 自定义图标尺寸
 
-<!--DemoStart--> 
+<!--DemoStart-->
 ```js
 import { Empty } from '@uiw/react-native';
 
@@ -99,7 +99,7 @@ export default Demo
 
 ### 自定义文字样式
 
-<!--DemoStart--> 
+<!--DemoStart-->
 ```js
 import { Empty } from '@uiw/react-native';
 
@@ -116,7 +116,7 @@ export default Demo
 
 ### 提示更多内容
 
-<!--DemoStart--> 
+<!--DemoStart-->
 ```js
 import { Empty } from '@uiw/react-native';
 import {View, Text } from 'react-native';
diff --git a/packages/core/src/Form/comps/label.tsx b/packages/core/src/Form/comps/label.tsx
@@ -16,7 +16,7 @@ const Label = ({ v }: { v: Partial<FormItemsProps> }) => {
 
 const styles = StyleSheet.create({
   label: {
-    width: 110,
+    width: 'auto',
     fontSize: 16,
     color: '#434343',
     fontWeight: '500',
diff --git a/packages/core/src/Form/styles.tsx b/packages/core/src/Form/styles.tsx
@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   warpper: {
-    backgroundColor: '#fff',
+    backgroundColor: '#fff5',
   },
   form_items_container: {
     flex: 1,
diff --git a/packages/core/src/SpeedDial/README.md b/packages/core/src/SpeedDial/README.md
@@ -11,38 +11,48 @@ SpeedDial 悬浮标记组件按下时，浮动动作按钮可以以快速显示
 ### 基础示例
 
 ```jsx mdx:preview&background=#bebebe29
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { SpeedDial, Icon } from '@uiw/react-native';
 import { View, Text, Dimensions } from 'react-native';
 
+const bodyHeight = window.screen.height
+
 function Demo() {
+  const refs = useRef()
+  const [position, usePosition]= useState(0)
+  useEffect(() => {
+      const parent= refs.current.getBoundingClientRect();
+      console.log('parent: ', parent);
+      usePosition(parent.y)
+  },[refs.current])
+
   return (
-    <View style={{ height: 180, background: '#ddd' }}>
+    <div ref={refs} style={{ height: 200 }}>
       <SpeedDial
         onOpen={()=>console.log('onOpen2')}
         onClose={()=>console.log('onClose')}
-        bottom={750}
+        bottom={bodyHeight-position}
         children={[
           {
             icon: 'plus',
             title: <Text>Add</Text>,
             onPress:()=>console.log('Add')
           },
           {
-            icon: <Icon name='star-on' color="#fff" size={18} />,
+            icon: <Icon name='star-on' size={18} />,
             title: 'Star'
           },
           {
-            icon: <Icon name='mail' color="#fff" size={18} />,
+            icon: <Icon name='mail' size={18} />,
             title: 'Mail'
           },
           {
-            icon: <Icon name='share' color="#fff" size={18} />,
+            icon: <Icon name='share' size={18} />,
             title: 'Share'
           }
         ]}
       />
-    </View>
+    </div>
   );
 }
 export default Demo
@@ -51,39 +61,47 @@ export default Demo
 ### 设置动画时间
 
 ```jsx mdx:preview&background=#bebebe29
-import React, { Fragment } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { SpeedDial, Icon } from '@uiw/react-native';
 import { View, Text, Dimensions } from 'react-native';
 
+const bodyHeight = window.screen.height
 function Demo() {
+  const refs = useRef()
+  const [position, usePosition]= useState(0)
+  useEffect(() => {
+      const parent= refs.current.getBoundingClientRect();
+      usePosition(parent.y)
+  },[refs.current])
+
   return (
-    <View style={{ height: 180, background: '#ddd' }}>
+    <div ref={refs} style={{ height: 200 }}>
       <SpeedDial
        transitionDuration={2000}
         onOpen={()=>console.log('onOpen')}
         onClose={()=>console.log('onClose')}
-        bottom={750}
+        bottom={bodyHeight-(position/2)}
         children={[
           {
             icon: 'plus',
             title: <Text>Add</Text>,
             onPress:()=>console.log('Add')
           },
           {
-            icon: <Icon name='star-on' color="#fff" size={18} />,
+            icon: <Icon name='star-on' size={18} />,
             title: 'Star'
           },
           {
-            icon: <Icon name='mail' color="#fff" size={18} />,
+            icon: <Icon name='mail' size={18} />,
             title: 'Mail'
           },
           {
-            icon: <Icon name='share' color="#fff" size={18} />,
+            icon: <Icon name='share' size={18} />,
             title: 'Share'
           }
         ]}
       />
-    </View>
+    </div>
   );
 }
 export default Demo
diff --git a/packages/core/src/SwipeAction/README.md b/packages/core/src/SwipeAction/README.md
@@ -2,7 +2,7 @@ SwipeAction 滑动操作组件。
 ---
 结合手势操作，从屏幕一侧唤出操作。
 
-![](https://user-images.githubusercontent.com/57083007/146733663-6c83fca4-72df-424d-8364-47533f57ece6.gif)
+<img src="https://user-images.githubusercontent.com/57083007/146733663-6c83fca4-72df-424d-8364-47533f57ece6.gif" style="width:300px;height:620px"/>
 
 ### 基础示例
 
diff --git a/website/src/component/Preview/index.js b/website/src/component/Preview/index.js
@@ -34,9 +34,6 @@ const getBooleanValue = (param, field, defaultValue) => {
 };
 
 const Preview = ({ path, ...mdData }) => {
-  const Preview = CodeLayout.Preview;
-  const Code = CodeLayout.Code;
-  const Toolbar = CodeLayout.Toolbar;
   const $dom = useRef(null);
   return (
     <Wrapper ref={$dom}>
@@ -46,41 +43,49 @@ const Preview = ({ path, ...mdData }) => {
         // transformImageUri={transformImageUri}
         source={mdData.source}
         rehypeRewrite={(node, index, parent) => {
-          if (node.type === 'element' && parent && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) {
-            const child = node.children && node.children[0];
-            if (child && child.properties && child.properties.ariaHidden === 'true') {
-              child.children = [];
+          if (node.type === 'element' && node.tagName === 'pre' && node.children[0].data?.meta) {
+            const meta = node.children[0].data?.meta;
+            if (isMeta(meta)) {
+              node.tagName = 'div';
+              if (!node.properties) {
+                node.properties = {};
+              }
+              node.properties['data-md'] = meta;
+              node.properties['data-meta'] = 'preview';
             }
           }
         }}
         components={{
-          code: ({ inline, node, ...props }) => {
-            const { 'data-meta': meta, ...rest } = props;
-            if (inline || !isMeta(meta)) {
-              return <code {...props} />;
-            }
-            const line = node.position?.start.line;
-            const metaId = getMetaId(meta) || String(line);
-            const Child = mdData.components[`${metaId}`];
-            if (metaId && typeof Child === 'function') {
-              const code = mdData.data[metaId].value || '';
-              const param = getURLParameters(meta);
-              return (
-                <CodeLayout
-                  disableCheckered={getBooleanValue(param, 'disableCheckered', true)}
-                  bordered={getBooleanValue(param, 'bordered', true)}
-                >
-                  <Preview>
+          div: ({ node, ...props }) => {
+            const { 'data-meta': meta, 'data-md': metaData } = props;
+            if (meta === 'preview') {
+              const line = node.position?.start.line;
+              const metaId = getMetaId(meta) || String(line);
+              const Child = mdData.components[`${metaId}`];
+              if (metaId && typeof Child === 'function') {
+                const code = mdData.data[metaId].value || '';
+                const param = getURLParameters(metaData);
+                return (
+                  <CodeLayout
+                    disableCheckered={getBooleanValue(param, 'disableCheckered', true)}
+                    disableToolbar={getBooleanValue(param, 'disableToolbar', false)}
+                    disableCode={getBooleanValue(param, 'disableCode', false)}
+                    disablePreview={getBooleanValue(param, 'disablePreview', false)}
+                    bordered={getBooleanValue(param, 'bordered', true)}
+                    copied={getBooleanValue(param, 'copied', true)}
+                    background={param.background}
+                    toolbar={param.title || '示例'}
+                    codeProps={{ style: { padding: 0 } }}
+                    style={{ padding: 0 }}
+                    code={<pre {...props} />}
+                    text={code}
+                  >
                     <Child />
-                  </Preview>
-                  <Toolbar text={code} copied={getBooleanValue(param, 'copied', true)}>
-                    {param.title || '示例'}
-                  </Toolbar>
-                  <Code>{code}</Code>
-                </CodeLayout>
-              );
+                  </CodeLayout>
+                );
+              }
             }
-            return <code {...rest} />;
+            return <div {...props} />;
           },
         }}
       />
