@ray-js/code-sandbox 0.0.3-beta-3 → 0.0.3-beta-5

package/lib/txp/codesandbox/index.d.ts

@@ -1,3 +1,4 @@
+import { DrawerProps } from 'antd';
 import React from 'react';
 export interface CodeSandboxProps {
     code: string;
@@ -12,14 +13,32 @@ export interface CodeSandboxProps {
 }
 export declare const CodeSandbox: React.FC<CodeSandboxProps>;
 export declare const checkShowCodeSandbox: (code: string) => boolean;
+export interface UseCodeSandboxDrawerOps {
+    getContainer?: DrawerProps['getContainer'];
+    title: string;
+    height?: string;
+    placement?: DrawerProps['placement'];
+    txpCode: string;
+    pageName: string;
+    baseUri: string;
+    emptyText?: string;
+    isZhLanguage?: boolean;
+    code: string;
+    langKey?: string;
+}
+export declare const useCodeSandboxDrawer: ({ getContainer, title, height, placement, isZhLanguage, pageName, txpCode, emptyText, langKey, baseUri, code, }: UseCodeSandboxDrawerOps) => {
+    modal: React.JSX.Element;
+    show: boolean;
+    setShow: React.Dispatch<React.SetStateAction<boolean>>;
+};
 export declare const CodeSandboxButton: React.FC<{
     code: string;
     title: string;
-    txpCode: string;
+    langKey?: string;
     tooltip?: string;
+    txpCode: string;
     pageName: string;
     baseUri: string;
-    langKey?: string;
     emptyText?: string;
     isZhLanguage?: boolean;
 }>;

package/lib/txp/codesandbox/index.js

@@ -1,3 +1,6 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["tooltip"];
 import { Button, Drawer, Tooltip } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -71,19 +74,62 @@ export const checkShowCodeSandbox = code => {
   }
   return false;
 };
-export const CodeSandboxButton = _ref2 => {
+export const useCodeSandboxDrawer = _ref2 => {
   let {
-    code,
+    getContainer,
     title,
-    txpCode,
-    tooltip = '在线编辑预览效果！',
+    height = '90vh',
+    placement = 'bottom',
+    isZhLanguage,
     pageName,
-    baseUri,
+    txpCode,
     emptyText,
     langKey,
-    isZhLanguage
+    baseUri,
+    code
   } = _ref2;
   const [show, setShow] = useState(false);
+  return {
+    modal: /*#__PURE__*/React.createElement(Drawer, {
+      getContainer: getContainer,
+      title: `${title}`,
+      height: height,
+      contentWrapperStyle: {
+        padding: 0
+      },
+      style: {
+        padding: 0
+      },
+      placement: placement,
+      destroyOnClose: true,
+      open: show,
+      onClose: () => {
+        setShow(false);
+      }
+    }, /*#__PURE__*/React.createElement(CodeSandbox, {
+      isZhLanguage: isZhLanguage,
+      emptyText: emptyText,
+      langKey: langKey,
+      baseUri: baseUri,
+      txpCode: txpCode,
+      pageName: pageName,
+      show: show,
+      title: title,
+      code: code
+    })),
+    show,
+    setShow
+  };
+};
+export const CodeSandboxButton = _ref3 => {
+  let {
+      tooltip
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  const api = useCodeSandboxDrawer(_objectSpread(_objectSpread({}, props), {}, {
+    height: '90vh',
+    getContainer: () => ref.current
+  }));
   const ref = useRef();
   return /*#__PURE__*/React.createElement(DrawerContain, {
     ref: ref
@@ -102,32 +148,6 @@ export const CodeSandboxButton = _ref2 => {
       alignItems: 'center',
       justifyContent: 'center'
     },
-    onClick: () => setShow(true)
-  })), /*#__PURE__*/React.createElement(Drawer, {
-    getContainer: () => ref.current,
-    title: `${title}`,
-    height: "90vh",
-    contentWrapperStyle: {
-      padding: 0
-    },
-    style: {
-      padding: 0
-    },
-    placement: "bottom",
-    destroyOnClose: true,
-    open: show,
-    onClose: () => {
-      setShow(false);
-    }
-  }, /*#__PURE__*/React.createElement(CodeSandbox, {
-    isZhLanguage: isZhLanguage,
-    emptyText: emptyText,
-    langKey: langKey,
-    baseUri: baseUri,
-    txpCode: txpCode,
-    pageName: pageName,
-    show: show,
-    title: title,
-    code: code
-  })));
+    onClick: () => api.setShow(true)
+  })), api.modal);
 };

package/lib/txp/demo/index.js

@@ -16,7 +16,7 @@ export const Demo = /*#__PURE__*/React.forwardRef((_ref, parentRef) => {
     emptyText
   } = _ref;
   let path = `${createCompnentUri(baseUri, txpCode, `index.html`)}?t=${ts || Date.now()}`;
-  path += `#!/pages/${comId}/index&langKey=${langKey}`;
+  path += `#!/pages/${comId}/index?langKey=${langKey}`;
   const ref = useRef();
   useImperativeHandle(parentRef, () => ({
     postMsg: data => {

package/lib/txp/index.d.ts

@@ -1,3 +1,3 @@
-import { CodeSandboxButton, CodeSandbox } from './codesandbox';
+import { CodeSandboxButton, CodeSandbox, useCodeSandboxDrawer } from './codesandbox';
 export * from './codesandbox';
-export { CodeSandbox, CodeSandboxButton };
+export { CodeSandbox, CodeSandboxButton, useCodeSandboxDrawer };

package/lib/txp/index.js

@@ -1,3 +1,3 @@
-import { CodeSandboxButton, CodeSandbox } from './codesandbox';
+import { CodeSandboxButton, CodeSandbox, useCodeSandboxDrawer } from './codesandbox';
 export * from './codesandbox';
-export { CodeSandbox, CodeSandboxButton };
+export { CodeSandbox, CodeSandboxButton, useCodeSandboxDrawer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/code-sandbox",
-  "version": "0.0.3-beta-3",
+  "version": "0.0.3-beta-5",
   "description": "小程序 CodeSandbox 容器",
   "main": "lib/index",
   "files": [