@chaomingd/design 0.0.68

package/dist/lib/PixelPlayer/useAutoLayoutContainer.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAutoLayoutContainer = void 0;
+var _react = require("react");
+/* eslint-disable @typescript-eslint/no-non-null-assertion -- assert it is not null */
+
+const useAutoLayoutContainer = (videoRef, positionOrigin) => {
+  const containerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const positionStyles = {
+      'top-left': {
+        top: 0,
+        left: 0
+      },
+      'top-right': {
+        top: 0,
+        right: 0
+      },
+      'bottom-left': {
+        bottom: 0,
+        left: 0
+      },
+      'bottom-right': {
+        bottom: 0,
+        right: 0
+      }
+    };
+    // 暂不支持自适应
+    const setup = () => {
+      if (!containerRef.current) {
+        requestAnimationFrame(setup);
+        return;
+      }
+      const clientWidth = containerRef.current.clientWidth;
+      const clientHeight = containerRef.current.clientHeight;
+      if (clientHeight === 0 && clientWidth === 0) {
+        // 重新查询
+        requestAnimationFrame(setup);
+        return;
+      }
+      const ratio = clientWidth / clientHeight;
+      const height = `${clientHeight}px`;
+      const width = `${clientWidth}px`;
+      const defaultRatio = 1920 / 1080;
+      if (ratio > defaultRatio) {
+        videoRef.current.style.width = width;
+      } else {
+        videoRef.current.style.height = height;
+      }
+      videoRef.current.style.position = 'absolute';
+      Object.assign(videoRef.current.style, positionStyles[positionOrigin]);
+    };
+    setup();
+  }, []);
+  return containerRef;
+};
+exports.useAutoLayoutContainer = useAutoLayoutContainer;

package/dist/lib/PixelPlayer/useVideoWithCustomEvent.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type PeerStream } from './lib/peer-stream';
+type EventHandlers = Record<string, (event: Event) => void>;
+export declare const useVideoWithCustomEvent: (eventHandlers: EventHandlers) => import("react").RefObject<PeerStream>;
+export {};

package/dist/lib/PixelPlayer/useVideoWithCustomEvent.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useVideoWithCustomEvent = void 0;
+var _react = require("react");
+function lowercaseFirstLetter(word) {
+  return word.charAt(0).toLowerCase() + word.slice(1);
+}
+const useVideoWithCustomEvent = eventHandlers => {
+  const videoRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    const addEventListeners = () => {
+      Object.entries(eventHandlers).forEach(([eventHandlerName, eventHandler]) => {
+        const eventName = lowercaseFirstLetter(eventHandlerName.replace(/^on/, ''));
+        videoRef.current?.addEventListener(eventName, eventHandler);
+      });
+    };
+    const removeEventListeners = () => {
+      Object.entries(eventHandlers).forEach(([eventHandlerName, eventHandler]) => {
+        const eventName = lowercaseFirstLetter(eventHandlerName.replace(/^on/, ''));
+        videoRef.current?.removeEventListener(eventName, eventHandler);
+      });
+    };
+    addEventListeners();
+
+    // Cleanup function
+    return () => {
+      removeEventListeners();
+    };
+  }, [eventHandlers]);
+  return videoRef;
+};
+exports.useVideoWithCustomEvent = useVideoWithCustomEvent;

package/dist/lib/Resizer/index.d.ts

@@ -0,0 +1,17 @@
+import { IConfig as IResizerConfig } from '@chaomingd/hooks';
+import { HTMLAttributes, MutableRefObject } from 'react';
+import './index.less';
+export interface ResizerProps extends HTMLAttributes<HTMLDivElement> {
+    resizerConfig?: Omit<IResizerConfig, 'elRef'>;
+    thumbClassName?: string;
+    thumbStyle?: ResizerProps['style'];
+    containerRef?: MutableRefObject<HTMLDivElement | null>;
+    manu?: boolean;
+    thumbColor?: string;
+    onResize?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+}
+declare const _default: import("react").NamedExoticComponent<ResizerProps>;
+export default _default;

package/dist/lib/Resizer/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _hooks = require("@chaomingd/hooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+require("./index.less");
+var _jsxRuntime = require("react/jsx-runtime");
+const Resizer = ({
+  children,
+  resizerConfig,
+  thumbClassName,
+  style,
+  thumbStyle,
+  containerRef,
+  className,
+  manu,
+  thumbColor,
+  onResize,
+  ...props
+}) => {
+  const thumbRef = (0, _react.useRef)();
+  const elRef = (0, _react.useRef)(null);
+  const [resizing, setResizing] = (0, _react.useState)(false);
+  const direction = resizerConfig?.direction || 'left';
+  (0, _hooks.useResizer)({
+    elRef: thumbRef,
+    firstUpdate: true,
+    ...(resizerConfig || {}),
+    updator: state => {
+      const el = elRef.current;
+      if (!el) return;
+      if (manu !== true) {
+        if (direction === 'left' || direction === 'right') {
+          el.style.width = state.deltaX + 'px';
+        } else {
+          el.style.height = state.deltaY + 'px';
+        }
+      }
+      resizerConfig?.updator?.(state);
+      onResize?.({
+        width: state.deltaX,
+        height: state.deltaY
+      });
+    },
+    resizingChange: setResizing
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ...props,
+    ref: el => {
+      elRef.current = el;
+      if (containerRef) {
+        containerRef.current = el;
+      }
+    },
+    style: {
+      ...style,
+      transition: resizing ? 'none' : undefined
+    },
+    className: (0, _classnames.default)('laf-resizer', className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: thumbRef,
+      style: {
+        ...(thumbStyle || {}),
+        '--laf-resizer-thumb-color': thumbColor
+      },
+      className: (0, _classnames.default)('laf-resizer-thumb', thumbClassName, resizing && 'laf-resizer-thumb-resizing', `laf-resizer-thumb-direction-${direction}`)
+    }), children]
+  });
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(Resizer);

package/dist/lib/Resizer/index.less

@@ -0,0 +1,73 @@
+.laf-resizer {
+  position: relative;
+
+  &-thumb {
+    position: absolute;
+    z-index: 1000;
+    background-color: transparent;
+    transition: background-color 0.3s;
+    user-select: none;
+
+    &:hover {
+      background-color: var(--laf-resizer-thumb-color);
+    }
+
+    &-resizing {
+      background-color: var(--laf-resizer-thumb-color);
+
+      &::after {
+        display: block;
+      }
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 200px;
+      height: 200px;
+      min-width: 100%;
+      min-height: 100%;
+      cursor: inherit;
+      display: none;
+    }
+
+    &-direction-left {
+      width: 2px;
+      left: 0;
+      top: 0;
+      transform: translateX(-50%);
+      height: 100%;
+      cursor: col-resize;
+    }
+
+    &-direction-right {
+      width: 2px;
+      right: 0;
+      top: 0;
+      transform: translateX(50%);
+      height: 100%;
+      cursor: col-resize;
+    }
+
+    &-direction-top {
+      width: 100%;
+      left: 0;
+      top: 0;
+      transform: translateY(-50%);
+      height: 2px;
+      cursor: row-resize;
+    }
+
+    &-direction-bottom {
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      transform: translateY(50%);
+      height: 2px;
+      cursor: row-resize;
+    }
+  }
+}

package/dist/lib/SetupAntApp/index.d.ts

@@ -0,0 +1 @@
+export default function SetupAntApp(): null;

package/dist/lib/SetupAntApp/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SetupAntApp;
+var _react = require("react");
+var _antd = require("antd");
+var _getAntApp = require("../getAntApp");
+function SetupAntApp() {
+  const antApp = _antd.App.useApp();
+  (0, _react.useEffect)(() => {
+    (0, _getAntApp.setAntApp)(antApp);
+  }, []);
+  return null;
+}

package/dist/lib/Transition/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TransitionProps } from './type';
+declare const Transition: ({ children, visible, exitUnMount, transitionName, duration, appear, ...props }: TransitionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
+export default Transition;

package/dist/lib/Transition/index.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _store = require("@chaomingd/store");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _type = require("./type");
+var _utils = require("./utils");
+const Transition = ({
+  children,
+  visible,
+  exitUnMount = true,
+  transitionName,
+  duration = _utils.DEFAULT_DURATION,
+  appear = true,
+  ...props
+}) => {
+  const propsRef = (0, _ahooks.useLatest)(props);
+  const transitionModel = (0, _store.useModel)({
+    state: {
+      status: visible && !appear ? _type.ETransitionStatus.entered : _type.ETransitionStatus.exited
+    }
+  });
+  const transitionClassNames = (0, _react.useMemo)(() => {
+    let baseClassNames;
+    if (!transitionName) {
+      baseClassNames = ['transtion'];
+    } else {
+      baseClassNames = typeof transitionName === 'string' ? [transitionName] : transitionName;
+    }
+    return baseClassNames.map(baseClassName => {
+      const classNames = {};
+      Object.keys(_type.ETransitionStatus).forEach(status => {
+        classNames[status] = `${baseClassName}-${status}`;
+      });
+      return classNames;
+    });
+  }, [transitionName]);
+  const {
+    status
+  } = transitionModel.useGetState();
+  const transitionClassNamesWithStatus = (0, _react.useMemo)(() => {
+    return transitionClassNames.map(item => item[status]);
+  }, [transitionClassNames, status]);
+  const transitionTimerRef = (0, _react.useRef)();
+  const enteringTimerRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    clearTimeout(transitionTimerRef.current);
+    clearTimeout(enteringTimerRef.current);
+    const {
+      status: currentStatus
+    } = transitionModel.getState();
+    if (visible) {
+      if (![_type.ETransitionStatus.entering, _type.ETransitionStatus.entered].includes(currentStatus)) {
+        transitionModel.setState({
+          status: _type.ETransitionStatus.enter
+        });
+        propsRef.current?.onEnter?.();
+      }
+    } else {
+      if (![_type.ETransitionStatus.exited, _type.ETransitionStatus.exiting].includes(currentStatus)) {
+        transitionModel.setState({
+          status: _type.ETransitionStatus.exit
+        });
+        propsRef.current?.onExit?.();
+      }
+    }
+    // eslint-disable-next-line
+  }, [visible]);
+  // entering
+  (0, _react.useEffect)(() => {
+    if ([_type.ETransitionStatus.enter, _type.ETransitionStatus.exit].includes(status)) {
+      clearTimeout(enteringTimerRef.current);
+      enteringTimerRef.current = setTimeout(() => {
+        if (status === _type.ETransitionStatus.enter) {
+          transitionModel.setState({
+            status: _type.ETransitionStatus.entering
+          });
+          propsRef.current?.onEntering?.();
+        } else if (status === _type.ETransitionStatus.exit) {
+          transitionModel.setState({
+            status: _type.ETransitionStatus.exiting
+          });
+          propsRef.current?.onExiting?.();
+        }
+      }, 17);
+    }
+    // eslint-disable-next-line
+  }, [status]);
+  // entered
+  (0, _react.useEffect)(() => {
+    if ([_type.ETransitionStatus.entering, _type.ETransitionStatus.exiting].includes(status)) {
+      clearTimeout(transitionTimerRef.current);
+      transitionTimerRef.current = setTimeout(() => {
+        if (status === _type.ETransitionStatus.entering) {
+          transitionModel.setState({
+            status: _type.ETransitionStatus.entered
+          });
+          propsRef.current?.onEntered?.();
+        } else if (status === _type.ETransitionStatus.exiting) {
+          transitionModel.setState({
+            status: _type.ETransitionStatus.exited
+          });
+          propsRef.current?.onExited?.();
+        }
+      }, (0, _utils.getDuration)({
+        duration,
+        status: _type.ETransitionStatus.entering === status ? _type.ETransitionStatus.enter : _type.ETransitionStatus.exit
+      }));
+    }
+    // eslint-disable-next-line
+  }, [status]);
+  (0, _ahooks.useUnmount)(() => {
+    clearTimeout(transitionTimerRef.current);
+    clearTimeout(enteringTimerRef.current);
+  });
+  if (exitUnMount) {
+    if (status === _type.ETransitionStatus.exited) return null;
+  }
+  if (typeof children === 'function') {
+    return children(status, transitionClassNamesWithStatus[0], transitionClassNamesWithStatus);
+  }
+  return children;
+};
+var _default = exports.default = Transition;

package/dist/lib/Transition/type.d.ts

@@ -0,0 +1,33 @@
+import { ReactElement } from 'react';
+export interface TransitionProps {
+    visible?: boolean;
+    appear?: boolean;
+    exitUnMount?: boolean;
+    children: ReactElement | ((status: ETransitionStatus, transitionName: string, transitionNames: string[]) => ReactElement);
+    duration?: number | {
+        enter: number;
+        exit: number;
+    };
+    transitionName?: string | string[];
+    onEnter?: () => any;
+    onEntering?: () => any;
+    onEntered?: () => any;
+    onExit?: () => any;
+    onExiting?: () => any;
+    onExited?: () => any;
+}
+export declare enum ETransitionStatus {
+    none = "none",
+    enter = "enter",
+    entering = "entering",
+    entered = "entered",
+    exit = "exit",
+    exiting = "exiting",
+    exited = "exited"
+}
+export interface ITransitionState {
+    status: ETransitionStatus;
+}
+export declare const ENTER_STATUS_SQUENCE: ETransitionStatus[];
+export declare const EXIT_STATUS_SQUENCE: ETransitionStatus[];
+export type TransitionClassNames = Record<ETransitionStatus, string>;

package/dist/lib/Transition/type.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EXIT_STATUS_SQUENCE = exports.ETransitionStatus = exports.ENTER_STATUS_SQUENCE = void 0;
+let ETransitionStatus = exports.ETransitionStatus = /*#__PURE__*/function (ETransitionStatus) {
+  ETransitionStatus["none"] = "none";
+  ETransitionStatus["enter"] = "enter";
+  ETransitionStatus["entering"] = "entering";
+  ETransitionStatus["entered"] = "entered";
+  ETransitionStatus["exit"] = "exit";
+  ETransitionStatus["exiting"] = "exiting";
+  ETransitionStatus["exited"] = "exited";
+  return ETransitionStatus;
+}({});
+const ENTER_STATUS_SQUENCE = exports.ENTER_STATUS_SQUENCE = [ETransitionStatus.entering, ETransitionStatus.entered];
+const EXIT_STATUS_SQUENCE = exports.EXIT_STATUS_SQUENCE = [ETransitionStatus.exiting, ETransitionStatus.exited];

package/dist/lib/Transition/utils.d.ts

@@ -0,0 +1,6 @@
+import { TransitionProps, ETransitionStatus } from './type';
+export declare const DEFAULT_DURATION = 300;
+export declare function getDuration({ duration, status, }: {
+    duration?: TransitionProps['duration'];
+    status: ETransitionStatus;
+}): number;

package/dist/lib/Transition/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_DURATION = void 0;
+exports.getDuration = getDuration;
+const DEFAULT_DURATION = exports.DEFAULT_DURATION = 300;
+function getDuration({
+  duration,
+  status
+}) {
+  let dur;
+  if (duration === undefined) {
+    dur = DEFAULT_DURATION;
+  } else if (typeof duration === 'number') {
+    dur = duration;
+  } else {
+    dur = duration[status] ?? DEFAULT_DURATION;
+  }
+  return dur;
+}

package/dist/lib/UploadFile/components/IconButton/index.d.ts

@@ -0,0 +1,11 @@
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import './index.less';
+export interface IButtonIconProps extends HTMLAttributes<HTMLDivElement> {
+    icon?: ReactNode;
+    size?: 'default' | 'middle' | 'small' | 'large';
+    clickable?: boolean;
+    disabled?: boolean;
+    type?: 'primary' | 'default' | 'danger';
+}
+declare const IconButton: FC<IButtonIconProps>;
+export default IconButton;

package/dist/lib/UploadFile/components/IconButton/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _cssPrefix = require("../../../constants/cssPrefix");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+require("./index.less");
+var _jsxRuntime = require("react/jsx-runtime");
+const preCls = `${_cssPrefix.CSS_PREFIX}-icon-btn`;
+const IconButton = ({
+  size = 'default',
+  disabled,
+  clickable = true,
+  icon,
+  type = 'default',
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ...props,
+    className: (0, _classnames.default)(preCls, `${preCls}-size--${size}`, clickable && `${preCls}--clickable`, disabled && `${preCls}--disabled`, `${preCls}-type-${type}`, className),
+    children: icon
+  });
+};
+var _default = exports.default = IconButton;

package/dist/lib/UploadFile/components/IconButton/index.less

@@ -0,0 +1,58 @@
+@import '../../../styles/var.less';
+
+.buttonIconType(@type) {
+  &-type-@{type} {
+    color: ~'var(--cm-icon-btn-@{type}-color)';
+
+    &:hover {
+      color: ~'var(--cm-icon-btn-@{type}-color-hover)';
+    }
+
+    &:active {
+      color: ~'var(--cm-icon-btn-@{type}-color-active)';
+    }
+    
+  }
+  &--disabled&-type-@{type} {
+    color: ~'var(--cm-icon-btn-@{type}-color-disabled)';
+  }
+}
+
+@fontSizeMap: {
+  @large: 32px;
+  @default: 24px;
+  @middle: 18px;
+  @small: 16px;
+}
+
+.buttonSize(@size) {
+  &-size--@{size} {
+    font-size: @fontSizeMap[@@size];
+  }
+}
+
+@preCls: ~'@{prefix}-icon-btn';
+
+.@{preCls} {
+  display: inline-block;
+  line-height: 1em;
+  // size
+  .buttonSize(default);
+  .buttonSize(middle);
+  .buttonSize(small);
+  .buttonSize(large);
+
+  // type
+  .buttonIconType(default);
+  .buttonIconType(primary);
+  .buttonIconType(danger);
+
+  &--clickable {
+    cursor: pointer;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+}
+

package/dist/lib/UploadFile/components/Slash.d.ts

@@ -0,0 +1,2 @@
+declare const SlashSvg: () => import("react/jsx-runtime").JSX.Element;
+export default SlashSvg;

package/dist/lib/UploadFile/components/Slash.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+const SlashSvg = () => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M4.06689 13.8119L11.0669 1.6875L11.9329 2.1875L4.93292 14.3119L4.06689 13.8119Z"
+    })
+  });
+};
+var _default = exports.default = SlashSvg;

package/dist/lib/UploadFile/components/SvgIcons.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+type SvgIconProps = HTMLAttributes<HTMLOrSVGElement>;
+export declare const SlashSvg: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ZipSvg: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RarSvg: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DocSvg: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PdfSvg: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TxtSvg: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseSvg: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DeleteSvg: (props: SvgIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};