@jiaozhiye/qm-design-react 1.0.0-beta.1

package/lib/cropper/index.d.ts

@@ -0,0 +1,3 @@
+import Cropper from './src/cropper';
+export type { QmCropperProps } from './src/cropper';
+export default Cropper;

package/lib/cropper/src/cropper.d.ts

@@ -0,0 +1,213 @@
+import React, { Component } from 'react';
+import { CSSProperties, AnyObject, AnyFunction } from '../../_utils/types';
+declare type IProps = {
+    src: string;
+    alt?: string;
+    imgStyle?: CSSProperties;
+    style?: CSSProperties;
+    className?: string;
+    viewMode?: number;
+    dragMode?: string;
+    initialAspectRatio?: number;
+    aspectRatio?: number;
+    data?: AnyObject<any>;
+    preview?: string;
+    responsive?: boolean;
+    restore?: boolean;
+    checkCrossOrigin?: boolean;
+    checkOrientation?: boolean;
+    crossorigin?: string;
+    guides?: boolean;
+    center?: boolean;
+    highlight?: boolean;
+    background?: boolean;
+    autoCrop?: boolean;
+    autoCropArea?: number;
+    movable?: boolean;
+    rotatable?: boolean;
+    scalable?: boolean;
+    zoomable?: boolean;
+    zoomOnTouch?: boolean;
+    zoomOnWheel?: boolean;
+    wheelZoomRatio?: number;
+    cropBoxMovable?: boolean;
+    cropBoxResizable?: boolean;
+    toggleDragModeOnDblclick?: boolean;
+    minCanvasWidth?: number;
+    minCanvasHeight?: number;
+    minCropBoxWidth?: number;
+    minCropBoxHeight?: number;
+    minContainerWidth?: number;
+    minContainerHeight?: number;
+    ready?: AnyFunction<void>;
+    cropstart?: AnyFunction<void>;
+    cropmove?: AnyFunction<void>;
+    cropend?: AnyFunction<void>;
+    crop?: AnyFunction<void>;
+    zoom?: AnyFunction<void>;
+};
+export declare type QmCropperProps = IProps;
+declare class QmCropper extends Component<IProps> {
+    static defaultProps: {
+        src: string;
+        responsive: boolean;
+        restore: boolean;
+        checkCrossOrigin: boolean;
+        checkOrientation: boolean;
+        modal: boolean;
+        guides: boolean;
+        center: boolean;
+        highlight: boolean;
+        background: boolean;
+        autoCrop: boolean;
+        movable: boolean;
+        rotatable: boolean;
+        scalable: boolean;
+        zoomable: boolean;
+        zoomOnTouch: boolean;
+        zoomOnWheel: boolean;
+        cropBoxMovable: boolean;
+        cropBoxResizable: boolean;
+        toggleDragModeOnDblclick: boolean;
+    };
+    private imgRef;
+    private cropper;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    reset(): any;
+    clear(): any;
+    initCrop(): any;
+    /**
+     * Replace the image's src and rebuild the cropper
+     * @param {string} url - The new URL.
+     * @param {boolean} [onlyColorChanged] - Indicate if the new image only changed color.
+     * @returns {Object} this
+     */
+    replace(url: any, onlyColorChanged?: boolean): any;
+    enable(): any;
+    disable(): any;
+    destroy(): any;
+    /**
+     * Move the canvas with relative offsets
+     * @param {number} offsetX - The relative offset distance on the x-axis.
+     * @param {number} offsetY - The relative offset distance on the y-axis.
+     * @returns {Object} this
+     */
+    move(offsetX: any, offsetY: any): any;
+    /**
+     * Move the canvas to an absolute point
+     * @param {number} x - The x-axis coordinate.
+     * @param {number} [y=x] - The y-axis coordinate.
+     * @returns {Object} this
+     */
+    moveTo(x: any, y?: any): any;
+    /**
+     * Zoom the canvas with a relative ratio
+     * @param {number} ratio - The target ratio.
+     * @param {Event} _originalEvent - The original event if any.
+     * @returns {Object} this
+     */
+    relativeZoom(ratio: any, _originalEvent: any): any;
+    /**
+     * Zoom the canvas to an absolute ratio
+     * @param {number} ratio - The target ratio.
+     * @param {Event} _originalEvent - The original event if any.
+     * @returns {Object} this
+     */
+    zoomTo(ratio: any, _originalEvent: any): any;
+    /**
+     * Rotate the canvas with a relative degree
+     * @param {number} degree - The rotate degree.
+     * @returns {Object} this
+     */
+    rotate(degree: any): any;
+    /**
+     * Rotate the canvas to an absolute degree
+     * @param {number} degree - The rotate degree.
+     * @returns {Object} this
+     */
+    rotateTo(degree: any): any;
+    /**
+     * Scale the image on the x-axis.
+     * @param {number} scaleX - The scale ratio on the x-axis.
+     * @returns {Object} this
+     */
+    scaleX(scaleX: any): any;
+    /**
+     * Scale the image on the y-axis.
+     * @param {number} scaleY - The scale ratio on the y-axis.
+     * @returns {Object} this
+     */
+    scaleY(scaleY: any): any;
+    /**
+     * Scale the image
+     * @param {number} scaleX - The scale ratio on the x-axis.
+     * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.
+     * @returns {Object} this
+     */
+    scale(scaleX: any, scaleY?: any): any;
+    /**
+     * Get the cropped area position and size data (base on the original image)
+     * @param {boolean} [rounded=false] - Indicate if round the data values or not.
+     * @returns {Object} The result cropped data.
+     */
+    getData(rounded?: boolean): any;
+    /**
+     * Set the cropped area position and size with new data
+     * @param {Object} data - The new data.
+     * @returns {Object} this
+     */
+    setData(data: any): any;
+    /**
+     * Get the container size data.
+     * @returns {Object} The result container data.
+     */
+    getContainerData(): any;
+    /**
+     * Get the image position and size data.
+     * @returns {Object} The result image data.
+     */
+    getImageData(): any;
+    /**
+     * Get the canvas position and size data.
+     * @returns {Object} The result canvas data.
+     */
+    getCanvasData(): any;
+    /**
+     * Set the canvas position and size with new data.
+     * @param {Object} data - The new canvas data.
+     * @returns {Object} this
+     */
+    setCanvasData(data: any): any;
+    /**
+     * Get the crop box position and size data.
+     * @returns {Object} The result crop box data.
+     */
+    getCropBoxData(): any;
+    /**
+     * Set the crop box position and size with new data.
+     * @param {Object} data - The new crop box data.
+     * @returns {Object} this
+     */
+    setCropBoxData(data: any): any;
+    /**
+     * Get a canvas drawn the cropped image.
+     * @param {Object} [options={}] - The config options.
+     * @returns {HTMLCanvasElement} - The result canvas.
+     */
+    getCroppedCanvas(options?: {}): any;
+    /**
+     * Change the aspect ratio of the crop box.
+     * @param {number} aspectRatio - The new aspect ratio.
+     * @returns {Object} this
+     */
+    setAspectRatio(aspectRatio: any): any;
+    /**
+     * Change the drag mode.
+     * @param {string} mode - The new drag mode.
+     * @returns {Object} this
+     */
+    setDragMode(mode: any): any;
+    render(): React.ReactElement;
+}
+export default QmCropper;

package/lib/cropper/style/index.less

@@ -0,0 +1,13 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-08-27 13:28:50
+ */
+@import '~cropperjs/dist/cropper.css';
+@import '../../style/common';
+
+@prefix-cropper: ~'@{qm-prefix}-cropper';
+
+.@{prefix-cropper} {
+}

package/lib/divider/index.d.ts

@@ -0,0 +1,3 @@
+import Divider from './src/divider';
+export type { QmDividerProps } from './src/divider';
+export default Divider;

package/lib/divider/src/divider.d.ts

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ComponentSize, CSSProperties, JSXElement } from '../../_utils/types';
+declare type IProps = {
+    label: string;
+    size?: ComponentSize;
+    extra?: JSXElement | string;
+    collapse?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    onCollapseChange?: (collapse: boolean) => void;
+};
+export declare type QmDividerProps = IProps;
+declare class QmDivider extends Component<IProps> {
+    static propTypes: {
+        label: PropTypes.Requireable<string>;
+        size: (props: any, propName: any, componentName: any) => void;
+        extra: PropTypes.Requireable<string | PropTypes.ReactElementLike>;
+        collapse: PropTypes.Requireable<boolean>;
+    };
+    static contextType: React.Context<import("../../config-provider/context").IConfig | undefined>;
+    clickHandle: () => void;
+    render(): React.ReactElement;
+}
+export default QmDivider;

package/lib/divider/style/index.less

@@ -0,0 +1,54 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-08-21 20:34:44
+ */
+@import '../../style/common';
+
+@prefix-divider: ~'@{qm-prefix}-divider';
+
+.@{prefix-divider} {
+  .reset-component;
+  display: flex;
+  align-items: center;
+  padding: 0 @--padding-md;
+  height: @--height-md;
+  border: 1px solid @--border-color-base;
+  border-radius: @--border-radius-base;
+  background-color: @--background-color-cecondary;
+  position: relative;
+  &::before {
+    content: ' ';
+    position: absolute;
+    width: 6px;
+    left: -1px;
+    top: -1px;
+    bottom: -1px;
+    background-color: @--primary-color;
+  }
+  &__title {
+    margin-left: 5px;
+  }
+  &__extra {
+    .text-overflow-cut();
+    flex: 1;
+    margin-left: @--margin-md;
+  }
+  &__collapse {
+    margin-left: @--margin-md;
+    padding-left: 0;
+    padding-right: 0;
+    .anticon {
+      margin-left: 4px !important;
+    }
+  }
+  // ------ size ------
+  // 40  32  24
+  &--lg {
+    height: @--height-lg;
+  }
+  &--sm {
+    height: @--height-sm;
+  }
+}

package/lib/download/index.d.ts

@@ -0,0 +1,3 @@
+import Download from './src/download';
+export type { QmDownloadProps } from './src/download';
+export default Download;

package/lib/download/src/download.d.ts

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import type { ButtonProps } from '../../antd';
+import { AnyFunction, AnyObject } from '../../_utils/types';
+declare type HttpRequestHeader = {
+    [key: string]: string;
+};
+declare type ActionConfig = {
+    api: AnyFunction<Promise<any>>;
+    params?: AnyObject<unknown>;
+};
+declare type IProps = Omit<ButtonProps, 'prefixCls' | 'ghost' | 'danger' | 'block'> & {
+    action: string | ActionConfig;
+    fileName?: string;
+    headers?: HttpRequestHeader;
+    withCredentials?: boolean;
+    params?: AnyObject<unknown>;
+    beforeDownload?: AnyFunction<boolean>;
+    onSuccess: AnyFunction<void>;
+    onError: AnyFunction<void>;
+};
+declare type IState = {
+    loading: boolean;
+};
+export declare type QmDownloadProps = IProps;
+declare class QmDownload extends Component<IProps, IState> {
+    static propTypes: {
+        action: PropTypes.Requireable<string | PropTypes.InferProps<{
+            api: PropTypes.Validator<(...args: any[]) => any>;
+            params: PropTypes.Requireable<object>;
+        }>>;
+        fileName: PropTypes.Requireable<string>;
+        headers: PropTypes.Requireable<object>;
+        withCredentials: PropTypes.Requireable<boolean>;
+        params: PropTypes.Requireable<object>;
+        beforeDownload: PropTypes.Requireable<(...args: any[]) => any>;
+        onSuccess: PropTypes.Requireable<(...args: any[]) => any>;
+        onError: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        icon: JSX.Element;
+        children: string;
+        withCredentials: boolean;
+    };
+    state: IState;
+    getActionUrl(): Promise<string>;
+    downloadFile(url: string): Promise<void>;
+    downloadHandle: () => Promise<void>;
+    render(): React.ReactElement;
+}
+export default QmDownload;

package/lib/download/style/index.less

@@ -0,0 +1,12 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-08-02 18:00:03
+ */
+@import '../../style/common';
+
+@prefix-download: ~'@{qm-prefix}-download';
+
+.@{prefix-download} {
+}

package/lib/drawer/index.d.ts

@@ -0,0 +1,3 @@
+import Drawer from './src/drawer';
+export type { QmDrawerProps } from './src/drawer';
+export default Drawer;

package/lib/drawer/src/drawer.d.ts

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { ComponentSize } from '../../_utils/types';
+import type { DrawerProps } from '../../antd';
+declare type IProps = DrawerProps & {
+    size?: ComponentSize;
+    loading?: boolean;
+};
+declare type IState = {
+    fullscreen: boolean;
+    spinning: boolean;
+};
+export declare type QmDrawerProps = IProps;
+declare class QmDrawer extends Component<IProps, IState> {
+    static contextType: React.Context<import("../../config-provider/context").IConfig | undefined>;
+    static propTypes: {
+        size: (props: any, propName: any, componentName: any) => void;
+        spinning: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        width: string;
+        destroyOnClose: boolean;
+        maskClosable: boolean;
+    };
+    state: IState;
+    private opened;
+    componentDidUpdate(prevProps: IProps): void;
+    afterVisibleChange: (visible: boolean) => void;
+    toggleHandle: (ev: any) => void;
+    renderTitle(): JSX.Element;
+    render(): React.ReactElement;
+}
+export default QmDrawer;

package/lib/drawer/style/index.less

@@ -0,0 +1,77 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-08-05 15:57:45
+ */
+@import '../../style/common';
+
+@prefix-drawer: ~'@{qm-prefix}-drawer';
+
+.@{prefix-drawer} {
+  .ant-drawer-header {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    height: 44px;
+    padding: 0 15px;
+    border-bottom: 1px solid @--border-color-secondary;
+    .ant-drawer-title {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: space-between;
+      padding-right: 20px;
+      .full-screen {
+        padding: @--padding-md 5px @--padding-md @--padding-md;
+        color: @--text-color-secondary;
+        transition: all 0.3s ease;
+        &:hover {
+          color: @--text-color;
+        }
+      }
+    }
+    .ant-drawer-close {
+      top: auto;
+      font-size: 17px;
+      padding: @--padding-md 15px @--padding-md 5px;
+    }
+  }
+  .ant-drawer-body {
+    padding: @--padding-md;
+  }
+  &-spin {
+    position: absolute;
+    top: 44px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.65);
+    z-index: 9999;
+    .ant-spin-text {
+      margin-top: 4px;
+    }
+  }
+  // ------ size ------
+  // 52  48  44
+  &--lg {
+    .ant-drawer-header {
+      height: 48px;
+    }
+    .qm-drawer-spin {
+      top: 48px;
+    }
+  }
+  &--sm {
+    .ant-drawer-header {
+      height: 40px;
+    }
+    .qm-drawer-spin {
+      top: 40px;
+    }
+  }
+}

package/lib/empty/index.d.ts

@@ -0,0 +1,3 @@
+import Empty from './src/empty';
+export type { QmEmptyProps } from './src/empty';
+export default Empty;

package/lib/empty/src/empty.d.ts

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import { ComponentSize } from '../../_utils/types';
+import type { EmptyProps } from '../../antd';
+declare type IProps = EmptyProps & {
+    size?: ComponentSize;
+};
+export declare type QmEmptyProps = IProps;
+declare class QmEmpty extends Component<IProps> {
+    static contextType: React.Context<import("../../config-provider/context").IConfig | undefined>;
+    static propTypes: {
+        size: (props: any, propName: any, componentName: any) => void;
+    };
+    render(): React.ReactElement;
+}
+export default QmEmpty;

package/lib/empty/style/index.less

@@ -0,0 +1,35 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2021-07-31 22:38:07
+ */
+@import '../../style/common';
+
+@prefix-empty: ~'@{qm-prefix}-empty';
+
+.@{prefix-empty} {
+  .ant-empty-image {
+    height: auto;
+  }
+  // ------ size ------
+  // 40  32  24
+  &--lg {
+    .ant-empty-image > svg {
+      width: 80px;
+      height: 50px;
+    }
+    .ant-empty-description {
+      font-size: @--font-size-base;
+    }
+  }
+  &--sm {
+    .ant-empty-image > svg {
+      width: 55px;
+      height: 35px;
+    }
+    .ant-empty-description {
+      font-size: @--font-size-sm;
+    }
+  }
+}

package/lib/form/index.d.ts

@@ -0,0 +1,4 @@
+import Form from './src/form';
+export type { QmFormProps } from './src/form';
+export type { IFormItem as QmFormItem, IFormItemType as QmFormItemType } from './src/types';
+export default Form;