@arcblock/ux 3.4.14 → 3.5.0

package/src/Screenshot/BaseScreenshot/index.tsx

@@ -1,73 +0,0 @@
-import { type SxProps } from '@mui/material';
-
-import phone from './shells/Phone';
-import macbook from './shells/Macbook';
-import { styled } from '../../Theme';
-
-const map = {
-  phone,
-  macbook,
-};
-
-export interface ScreenshotProps extends React.ComponentProps<'div'> {
-  width?: number;
-  type?: string;
-  sx?: SxProps;
-}
-
-function Screenshot({ width = 0, children, type = 'phone', ...rest }: ScreenshotProps) {
-  const _type = type.toLowerCase();
-
-  const { Shell, ratio, screenData, width: defaultWidth } = map[(_type as keyof typeof map) || 'phone'];
-
-  const Root = styled('div')`
-    position: relative;
-    display: inline-block;
-    width: ${width || `${defaultWidth}px`};
-    &:after {
-      display: block;
-      content: '';
-      padding-bottom: ${ratio * 100}%;
-    }
-    > svg {
-      display: block;
-    }
-
-    .screenshot--container {
-      position: absolute;
-      left: ${screenData.x * 100}%;
-      top: ${screenData.y * 100}%;
-      width: ${screenData.width * 100}%;
-      height: ${screenData.height * 100}%;
-      ${screenData.radius ? `border-radius: ${screenData.radius}` : ''};
-      background-color: #fff;
-      overflow: hidden;
-      > img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        min-width: 100%;
-        min-height: 100%;
-      }
-    }
-
-    .absolute-size {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-    }
-  `;
-
-  return (
-    <div style={{ display: 'flex', justifyContent: 'center' }}>
-      <Root {...rest}>
-        <Shell className="absolute-size" />
-        <div className="screenshot--container">{children}</div>
-      </Root>
-    </div>
-  );
-}
-
-export default Screenshot;

package/src/Screenshot/BaseScreenshot/shells/Macbook.tsx

@@ -1,38 +0,0 @@
-export interface ShellProps extends React.ComponentProps<'svg'> {}
-
-export function Shell({ ...rest }: ShellProps) {
-  return (
-    <svg width="909" height="517" viewBox="0 0 909 517" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-      <path d="M48 16C48 7.16343 55.1634 0 64 0H845C853.837 0 861 7.16344 861 16V490H48V16Z" fill="black" />
-      <path fillRule="evenodd" clipRule="evenodd" d="M62 28H847V466H62V28Z" />
-      <path d="M0 490H909V493C909 506.255 898.255 517 885 517H24C10.7452 517 0 506.255 0 493V490Z" fill="#282828" />
-    </svg>
-  );
-}
-
-// 设备截图的实际尺寸
-export const width = 909;
-export const height = 517;
-
-// 屏幕的比例
-export const ratio = 438 / 785;
-
-// 屏幕相关数据
-export const screenData = {
-  // 屏幕坐标轴相对图片的百分比
-  x: 68 / 909,
-  y: 28 / 517,
-  // 屏幕尺寸相对图片尺寸的百分比
-  width: 773 / 909,
-  height: 438 / 517,
-  // 是否有圆角
-  radius: 'none',
-};
-
-export default {
-  Shell,
-  ratio,
-  screenData,
-  width,
-  height,
-};

package/src/Screenshot/BaseScreenshot/shells/Phone.tsx

@@ -1,35 +0,0 @@
-export const width = 268;
-export const height = 554;
-
-export interface ShellProps extends React.ComponentProps<'svg'> {}
-
-export function Shell({ ...rest }: ShellProps) {
-  return (
-    <svg width="268" height="554" viewBox="0 0 268 554" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-      <path
-        d="M37 7.5H230.929C247.222 7.5 260.429 20.7076 260.429 37V517C260.429 533.292 247.222 546.5 230.929 546.5H37C20.7076 546.5 7.5 533.292 7.5 517V37C7.5 20.7076 20.7076 7.5 37 7.5Z"
-        fill="#2F2F2F"
-        stroke="#2F2F2F"
-        strokeWidth="15"
-      />
-    </svg>
-  );
-}
-
-export const ratio = 798 / 386;
-
-export const screenData = {
-  x: 15 / 384,
-  y: 15 / 794,
-  width: 354 / 384,
-  height: 764 / 794,
-  radius: '10% / 5%',
-};
-
-export default {
-  Shell,
-  ratio,
-  screenData,
-  width,
-  height,
-};

package/src/Screenshot/Screenshot.stories.jsx

@@ -1,44 +0,0 @@
-import Basic from './demo/basic';
-
-export default {
-  title: 'Basic/Screenshot',
-  parameters: {
-    docs: {
-      description: {
-        component: 'A component that wraps its children content in a device frame.',
-      },
-    },
-  },
-};
-
-Basic.storyName = 'Screenshot';
-
-Basic.args = {
-  type: 'phone',
-};
-
-Basic.argTypes = {
-  type: {
-    control: 'select',
-    options: [
-      // 'iphone-x',
-      // 'iphone-8',
-      // 'ipad-pro',
-      // 'imac-pro',
-      // 'macbook',
-      // 'macbook-pro',
-      // 'surface-pro',
-      // 'surface-book',
-      // 'surface-studio',
-      // 'galaxy-s8',
-      // 'google-pixel',
-      // 'google-pixel-2-xl',
-      // 'apple-watch',
-      // ----⬆️ 放弃旧版实现的设备，⬇️都是使用svg组件模式实现设备
-      'phone',
-      'macbook',
-    ],
-  },
-};
-
-export { Basic };