@ray-js/code-sandbox 0.0.3-beta-4 → 0.0.3-beta-6

package/README.md

@@ -1,17 +1,17 @@
 English | [简体中文](./README-zh_CN.md)
 
-# @ray/code-sandbox
+# @ray-js/code-sandbox
 
-[![latest](https://img.shields.io/npm/v/@ray/code-sandbox/latest.svg)](https://www.npmjs.com/package/@ray/code-sandbox) [![download](https://img.shields.io/npm/dt/@ray/code-sandbox.svg)](https://www.npmjs.com/package/@ray/code-sandbox)
+[![latest](https://img.shields.io/npm/v/@ray-js/code-sandbox/latest.svg)](https://www.npmjs.com/package/@ray-js/code-sandbox) [![download](https://img.shields.io/npm/dt/@ray-js/code-sandbox.svg)](https://www.npmjs.com/package/@ray-js/code-sandbox)
 
 > CodeSandBox container
 
 ## Installation
 
 ```sh
-$ npm install @ray/code-sandbox
+$ npm install @ray-js/code-sandbox
 # or
-$ yarn add @ray/code-sandbox
+$ yarn add @ray-js/code-sandbox
 ```
 
 ## Develop
@@ -30,14 +30,14 @@ yarn start:tuya
 Must -dependencies in installation
 
 ```sh
-yarn add @ray/code-sandbox @ray-js/ray @ray-js/smart-ui @tuya-miniapp/smart-ui
+yarn add @ray-js/code-sandbox @ray-js/ray
 ```
 
 Create a new Playground page in the PAGES directory, the content is as follows
 
 ```tsx
 import React from 'react';
-import CodeSandbox from '@ray/code-sandbox';
+import CodeSandbox from '@ray-js/code-sandbox';
 
 import * as RayComponents from '@ray-js/ray';
 
@@ -68,13 +68,13 @@ export default {
 Must -dependencies in installation
 
 ```sh
-yarn add @ray/code-sandbox antd axios styled-components lodash @saber2pr/monaco
+yarn add @ray-js/code-sandbox antd axios styled-components lodash @saber2pr/monaco
 ```
 
 Method 1: Introduce Codesandbox editor to the page:
 
 ```tsx
-import { CodeSandboxButton } from '@ray/code-sandbox/lib/txp'
+import { CodeSandboxButton } from '@ray-js/code-sandbox/lib/txp'
 
 <CodeSandboxButton
   title="Playground" // The title of Editor's pop -up window
@@ -96,7 +96,7 @@ After clicking the button, you will pop up the window to open the CodesandBox ed
 Method 2: Do not use the button pop -up window, directly access the editor+simulator:
 
 ```tsx
-import { CodeSandbox } from '@ray/code-sandbox/lib/txp'
+import { CodeSandbox } from '@ray-js/code-sandbox/lib/txp'
 
   <CodeSandbox
     title="Button 组件" // The title in DEMO container

package/lib/loading/index.js

@@ -1,6 +1,6 @@
-import { View } from '@ray-js/ray';
+import { Button, View } from '@ray-js/ray';
 import React from 'react';
-import { Loading, Button } from '@ray-js/smart-ui';
+import Loading from '@ray-js/components-ty-loading';
 import styles from './index.module.less';
 export const SandboxLoading = _ref => {
   let {
@@ -11,7 +11,9 @@ export const SandboxLoading = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement(View, {
     className: styles.loading
-  }, /*#__PURE__*/React.createElement(View, null, type === 'compile' ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(View, null, type === 'compile' ? /*#__PURE__*/React.createElement(Loading, {
+    size: "100rpx"
+  }) : /*#__PURE__*/React.createElement(Button, {
     onClick: () => {
       // reloadSandbox 方法是 ci 打包时注入的 api，和 txp 平台交互（postmessage）
       // @ts-ignore

package/lib/txp/codesandbox/code-editor/index.js

@@ -1,6 +1,6 @@
 import { Spin } from 'antd';
-import { getComponentResource } from '../../services';
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { getComponentResource } from '../../services';
 import { Editor } from '@saber2pr/monaco';
 const timeout = function () {
   let delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;

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/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-4",
+  "version": "0.0.3-beta-6",
   "description": "小程序 CodeSandbox 容器",
   "main": "lib/index",
   "files": [
@@ -40,10 +40,9 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@ray-js/cli": "^1.4.9",
+    "@ray-js/components-ty-loading": "^0.1.1",
     "@ray-js/ray": "^1.4.9",
-    "@ray-js/smart-ui": "^1.2.0",
     "@saber2pr/monaco": "^0.0.90",
-    "@tuya-miniapp/smart-ui": "^1.2.0",
     "antd": "^5.20.2",
     "axios": "^1.7.4",
     "core-js": "^3.19.1",