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

package/lib/form/src/types.d.ts

@@ -0,0 +1,251 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import type { BuildInPlacements } from 'rc-trigger';
+import type { IFetch, IColumn, IRecord, IRowKey } from '../../table/src/table/types';
+import type { Nullable, CSSProperties, ComponentSize, JSXElement, ValueOf, AjaxResponse, IDict } from '../../_utils/types';
+export declare const DEFAULT_COL = 4;
+export declare const DEFAULT_ROWS = 1;
+export declare const DEFAULT_LABEL_WIDTH = 80;
+export declare const DEFAULT_COL_WIDTH = 300;
+export declare const DEFAULT_TRUE_VALUE = "1";
+export declare const DEFAULT_FALSE_VALUE = "0";
+export declare type ILabelAlign = 'left' | 'right';
+export declare type IFormType = 'default' | 'search' | 'onlyShow';
+export declare type IFormItemType = 'DIVIDER' | 'INPUT' | 'TEXT_AREA' | 'RANGE_INPUT' | 'INPUT_NUMBER' | 'RANGE_INPUT_NUMBER' | 'CHECKBOX' | 'MULTIPLE_CHECKBOX' | 'RADIO' | 'SWITCH' | 'DATE' | 'RANGE_DATE' | 'TIME' | 'RANGE_TIME' | 'SELECT' | 'MULTIPLE_SELECT' | 'IMMEDIATE' | 'SEARCH_HELPER' | 'TREE_SELECT' | 'MULTIPLE_TREE_SELECT' | 'CASCADER' | 'CITY_SELECT' | 'REGION_SELECT' | 'UPLOAD_FILE' | 'UPLOAD_IMG' | 'TINYMCE';
+export declare const ARRAY_TYPE: IFormItemType[];
+export declare const BUILT_IN_PLACEMENTS: BuildInPlacements;
+export declare type IDateType = 'date' | 'datetime' | 'exactdate' | 'week' | 'month' | 'quarter' | 'year';
+export declare enum EDateType {
+    'date' = "date",
+    'datetime' = "date",
+    'exactdate' = "date",
+    'week' = "week",
+    'month' = "month",
+    'quarter' = "quarter",
+    'year' = "year"
+}
+export declare enum EDateFormat {
+    'date' = "YYYY-MM-DD HH:mm:ss",
+    'datetime' = "YYYY-MM-DD HH:mm:ss",
+    'exactdate' = "YYYY-MM-DD",
+    'week' = "YYYY-wo",
+    'month' = "YYYY-MM",
+    'quarter' = "YYYY-[Q]Q",
+    'year' = "YYYY"
+}
+export declare enum ETimeType {
+    'hour' = "hour",
+    'hour-minute' = "hour-minute",
+    'hour-minute-second' = "hour-minute-second"
+}
+export declare enum ETimeFormat {
+    'hour' = "HH",
+    'hour-minute' = "HH:mm",
+    'hour-minute-second' = "HH:mm:ss"
+}
+export declare type IFormData = Record<string, string | number | any[] | undefined>;
+export declare type IFetchHeader = Record<string, string>;
+export declare type IFetchParams = Record<string, any>;
+export declare type IFieldData = {
+    name: string[];
+    errors?: string[];
+    touched?: boolean;
+    validating?: boolean;
+    value?: ValueOf<IFormData>;
+};
+export declare type IExtraData = Record<string, string>;
+export declare type IViewData = Record<string, string>;
+export declare type IExpandData = Record<string, boolean>;
+export declare type IFetchFn = (params?: Record<string, unknown>) => Promise<AjaxResponse>;
+export declare type IAuthConfig = {
+    fetch: {
+        api: IFetchFn;
+        params?: IFetchParams;
+        columnDataKey?: string;
+        exportDataKey?: string;
+        printDataKey?: string;
+    };
+};
+export declare type IFormItem = {
+    type: IFormItemType;
+    fieldName: string;
+    label?: string | IFormItem;
+    tooltip?: string;
+    labelWidth?: number | string;
+    hidden?: boolean;
+    noAuth?: boolean;
+    invisible?: boolean;
+    rules?: Record<string, any>[];
+    selfCol?: number;
+    offsetLeft?: number;
+    offsetRight?: number;
+    style?: CSSProperties;
+    className?: string;
+    placeholder?: string;
+    bordered?: boolean;
+    disabled?: boolean;
+    allowClear?: boolean;
+    readOnly?: boolean;
+    options?: {
+        itemList?: IDict[];
+        prefix?: React.ReactNode;
+        suffix?: React.ReactNode;
+        maxLength?: number;
+        step?: number;
+        min?: number;
+        max?: number;
+        precision?: number;
+        formatter?: (value: number | string) => string;
+        parser?: (value: string) => string | number;
+        falseValue?: string | number;
+        trueValue?: string | number;
+        showCount?: boolean;
+        autoSize?: {
+            minRows?: number;
+            maxRows?: number;
+        };
+        dateType?: IDateType;
+        minDateTime?: string;
+        maxDateTime?: string;
+        disableds?: [boolean, boolean];
+        timeType?: ETimeType;
+        hourStep?: number;
+        minuteStep?: number;
+        secondStep?: number;
+        filterable?: boolean;
+        collapseTags?: boolean;
+        openPyt?: boolean;
+        onlySelect?: boolean;
+        columns?: IColumn[];
+        fieldAliasMap?: (() => Record<string, string>) | Record<string, string>;
+        extraAliasMap?: (() => Record<string, string>) | Record<string, string>;
+        multiple?: boolean;
+        maxCount?: number;
+        onRemove?: (file: any) => void;
+        fixedSize?: [number, number] | undefined;
+        quality?: number;
+        height?: number | string;
+    };
+    searchHelper?: {
+        filters?: IFormItem[];
+        table?: {
+            fetch?: IFetch;
+            columns?: IColumn[];
+            rowKey?: ((row: IRecord, index: number) => IRowKey) | IRowKey;
+            webPagination?: boolean;
+        };
+        initialValue?: IFormData;
+        closeRemoteMatch?: boolean;
+        fieldAliasMap?: (() => Record<string, string>) | Record<string, string>;
+        extraAliasMap?: (() => Record<string, string>) | Record<string, string>;
+        filterAliasMap?: (() => string[]) | string[];
+        beforeOpen?: (formData: IFormData) => void | Promise<void> | boolean;
+        closed?: (rowData: Record<string, any>) => void;
+    };
+    request?: {
+        fetchApi?: IFetchFn;
+        params?: IFetchParams;
+        dataKey?: string;
+        valueKey?: string;
+        textKey?: string;
+    };
+    upload?: {
+        action?: string;
+        headers?: IFetchHeader;
+        withCredentials?: boolean;
+        params?: IFetchParams;
+        dataKey?: string;
+    };
+    extra?: {
+        style?: CSSProperties;
+        labelWidth?: number | string;
+        isTooltip?: boolean;
+    };
+    collapse?: {
+        defaultExpand?: boolean;
+        showLimit?: number;
+        remarkItems?: Array<{
+            fieldName: string;
+            showLabel?: boolean;
+        }>;
+    };
+    render?: (options: IFormItem, instance: any) => JSXElement;
+    onChange?: (value: ValueOf<IFormData> | boolean, others?: string | Nullable<IFormData>) => void;
+    onBlur?: (value: ValueOf<IFormData>) => void;
+    onEnter?: (value: ValueOf<IFormData>) => void;
+};
+export declare type IFormProps = {
+    items: IFormItem[];
+    initialValues?: IFormData;
+    initialExtras?: IExtraData;
+    size?: ComponentSize;
+    cols?: number;
+    labelWidth?: number | string;
+    labelAlign?: ILabelAlign;
+    formType?: IFormType;
+    uniqueKey?: string;
+    defaultRows?: number;
+    authConfig?: IAuthConfig;
+    isAutoFocus?: boolean;
+    isCollapse?: boolean;
+    isFieldsDefine?: boolean;
+    isSearchBtn?: boolean;
+    isSubmitBtn?: boolean;
+    fieldsChange?: (items: IFormItem[]) => void;
+    onValuesChange?: (changedValues: IFormData, initialValues: IFormData) => void;
+    onFieldsChange?: (changedFields: IFieldData[], allFields: IFieldData[]) => void;
+    onFinish?: (values: IFormData) => void;
+    onFinishFailed?: (errorFields: any) => void;
+    onCollapse?: (collapse: boolean) => void;
+};
+export declare const propTypes: {
+    items: PropTypes.Requireable<(PropTypes.InferProps<{
+        type: PropTypes.Validator<string>;
+        fieldName: PropTypes.Validator<string>;
+    }> | null | undefined)[]>;
+    initialValues: PropTypes.Requireable<object>;
+    initialExtras: PropTypes.Requireable<object>;
+    size: (props: any, propName: any, componentName: any) => void;
+    cols: PropTypes.Requireable<number>;
+    labelWidth: PropTypes.Requireable<string | number>;
+    labelAlign: PropTypes.Requireable<string>;
+    formType: PropTypes.Requireable<string>;
+    uniqueKey: PropTypes.Requireable<string>;
+    defaultRows: PropTypes.Requireable<number>;
+    authConfig: PropTypes.Requireable<PropTypes.InferProps<{
+        fetch: PropTypes.Requireable<PropTypes.InferProps<{
+            api: PropTypes.Validator<(...args: any[]) => any>;
+            params: PropTypes.Requireable<object>;
+            dataKey: PropTypes.Requireable<string>;
+        }>>;
+    }>>;
+    isAutoFocus: PropTypes.Requireable<boolean>;
+    isCollapse: PropTypes.Requireable<boolean>;
+    isFieldsDefine: PropTypes.Requireable<boolean>;
+    isSearchBtn: PropTypes.Requireable<boolean>;
+    isSubmitBtn: PropTypes.Requireable<boolean>;
+    fieldsChange: PropTypes.Requireable<(...args: any[]) => any>;
+    onValuesChange: PropTypes.Requireable<(...args: any[]) => any>;
+    onFieldsChange: PropTypes.Requireable<(...args: any[]) => any>;
+    onFinish: PropTypes.Requireable<(...args: any[]) => any>;
+    onFinishFailed: PropTypes.Requireable<(...args: any[]) => any>;
+    onCollapse: PropTypes.Requireable<(...args: any[]) => any>;
+};
+export declare const defaultProps: {
+    labelWidth: number;
+    labelAlign: string;
+    formType: string;
+    initialValues: {};
+    initialExtras: {};
+    defaultRows: number;
+    isAutoFocus: boolean;
+    isCollapse: boolean;
+    isFieldsDefine: boolean;
+    isSearchBtn: boolean;
+    onValuesChange: () => void;
+    onFieldsChange: () => void;
+    onFinish: () => void;
+    onFinishFailed: () => void;
+    onCollapse: () => void;
+    onFormItemsChange: () => void;
+};

package/lib/form/src/utils.d.ts

@@ -0,0 +1,7 @@
+import dayjs, { Dayjs } from 'dayjs';
+export declare const getDate: (dateString: string | undefined, format: string) => dayjs.Dayjs | null;
+export declare const formatDate: (date: Dayjs | null, format: string) => string;
+export declare const deepMapList: (list: any[], valueKey: string, textKey: string) => any[];
+export declare const deepFind: (arr: any[], mark: string) => any;
+export declare const deepFindValues: <T>(arr: T[], str: string, depth?: number) => T[];
+export declare const deepGetPath: (arr: any[], value: string) => string[] | undefined;

package/lib/form/style/index.less

@@ -0,0 +1,243 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-01-10 10:05:49
+ */
+@import '../../style/common';
+
+@prefix-form: ~'@{qm-prefix}-form';
+
+.@{prefix-form} {
+  .ant-form-item {
+    margin-bottom: 12px;
+    &.ant-form-item-with-help {
+      margin-bottom: 0;
+    }
+    // label
+    .ant-form-item-label {
+      label[title=''] {
+        width: 100%;
+      }
+    }
+    // valigator
+    .ant-form-item-explain {
+      .text-overflow-cut();
+      display: flex;
+      gap: @--margin-md;
+      min-height: auto;
+      height: @--font-size-sm;
+      font-size: @--font-size-sm;
+      line-height: 1;
+    }
+    // textarea
+    .ant-input-textarea-show-count {
+      position: relative;
+      &::after {
+        position: absolute;
+        right: 3px;
+        bottom: 0;
+        margin: 0;
+      }
+    }
+    // input extra
+    .extra-tooltip {
+      color: @--text-color-secondary-dark;
+      vertical-align: -0.4em;
+      transform: scale(1.2);
+    }
+    .extra-text {
+      vertical-align: -0.3em;
+    }
+    .extra-overflow-cut {
+      .text-overflow-cut();
+    }
+    // range input
+    .site-input-split {
+      // background-color: @--body-background;
+    }
+    .site-input-left {
+      border-right-width: 0;
+      z-index: 1;
+    }
+    .site-input-left:hover,
+    .site-input-left:focus {
+      border-right-width: 1px;
+    }
+    .site-input-right {
+      border-left-width: 0;
+    }
+    .site-input-right:hover,
+    .site-input-right:focus {
+      border-left-width: 1px;
+    }
+  }
+  // ------ size ------
+  // 40  32  24
+  &--lg {
+  }
+  &--sm {
+  }
+}
+
+.ant-picker-footer-extra {
+  .ant-tag {
+    cursor: pointer;
+  }
+}
+
+// immediate
+.@{prefix-form}-immediate {
+  padding: 5px 15px;
+  .table {
+    width: 100%;
+    th,
+    td {
+      height: 32px;
+      text-align: left;
+      border-bottom: 1px solid @--border-color-secondary;
+    }
+    tbody {
+      tr td {
+        cursor: pointer;
+      }
+      tr:hover,
+      tr.active {
+        background-color: @--primary-1;
+      }
+    }
+  }
+  // 40  32  24
+  &--lg {
+    .table {
+      th,
+      td {
+        height: 40px;
+      }
+    }
+  }
+  &--sm {
+    .table {
+      th,
+      td {
+        height: 24px;
+      }
+    }
+  }
+}
+
+// city-select
+.@{prefix-form}-city-select {
+  padding: 15px 15px 10px;
+  max-width: 420px;
+  .container {
+    .city-drop {
+      &-toper {
+        margin-bottom: 10px;
+        display: flex;
+        &__type {
+          display: inline-block;
+        }
+        &__search {
+          margin-left: 10px;
+        }
+      }
+      &-letter {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 4px;
+        .tag {
+          list-style: none;
+          line-height: 1.75;
+          font-size: @--font-size-sm;
+          padding: 0 8px;
+          margin: 0 4px 4px 0;
+          border: 1px solid @--border-color-secondary;
+          border-radius: @--border-radius-base;
+          cursor: pointer;
+          &.actived {
+            color: @--white;
+            background-color: @--primary-color;
+            border-color: @--primary-color;
+          }
+        }
+      }
+      &-list {
+        margin-right: -2px;
+        max-height: 350px;
+        overflow-y: auto;
+        dl {
+          margin: 0;
+          dt {
+            float: left;
+            font-size: 13px;
+            font-weight: 700;
+            line-height: 20px;
+          }
+          dd {
+            white-space: normal;
+            margin-inline-start: 50px;
+            margin-bottom: 8px;
+            line-height: 20px;
+            li {
+              display: inline-block;
+              margin-right: 8px;
+              font-size: 13px;
+              cursor: pointer;
+              &:hover {
+                color: @--primary-color;
+              }
+              &.actived {
+                color: @--primary-color;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// region-select
+.@{prefix-form}-region-select {
+  padding: 10px 15px;
+  .container {
+    margin-top: -10px;
+    .region-box {
+      display: flex;
+      flex-wrap: wrap;
+      width: 440px;
+      line-height: @--line-height-base;
+      &__item {
+        margin: 0 5px;
+        width: 100px;
+        cursor: pointer;
+        .text-overflow-cut();
+        &:hover {
+          color: @--primary-color;
+        }
+        &.actived {
+          color: @--primary-color;
+        }
+      }
+    }
+  }
+}
+
+// fields-filter
+.@{prefix-form}-fields-filter {
+  .fields-list {
+    padding: 4px @--padding-md;
+    ul {
+      margin: 0;
+      li.item {
+        line-height: 1.75;
+        .text-overflow-cut();
+        .handle {
+          margin: 0 5px;
+          cursor: s-resize;
+        }
+      }
+    }
+  }
+}

package/lib/hooks/useForceUpdate.d.ts

@@ -0,0 +1 @@
+export default function useForceUpdate(): () => void;

package/lib/hooks/useOutsideClick.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function useOutsideClick(ref: React.RefObject<HTMLElement>, omitClassNames?: string[]): boolean;

package/lib/hooks/useResizeObserve.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export default function useResizeObserve(ref: React.RefObject<HTMLElement>): {
+    width: number;
+    height: number;
+};

package/lib/hooks/useUpdateEffect.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function useUpdateEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;

package/lib/index.d.ts

@@ -0,0 +1,42 @@
+export type { QmConfigProviderProps } from './config-provider';
+export { default as QmConfigProvider } from './config-provider';
+export type { QmButtonProps } from './button';
+export { default as QmButton } from './button';
+export type { QmSpaceProps } from './space';
+export { default as QmSpace } from './space';
+export type { QmDividerProps } from './divider';
+export { default as QmDivider } from './divider';
+export type { QmSplitProps, QmSplitPaneProps } from './split';
+export { default as QmSplit } from './split';
+export type { QmCountupProps } from './countup';
+export { default as QmCountup } from './countup';
+export type { QmEmptyProps } from './empty';
+export { default as QmEmpty } from './empty';
+export type { QmSpinProps } from './spin';
+export { default as QmSpin } from './spin';
+export type { QmDownloadProps } from './download';
+export { default as QmDownload } from './download';
+export type { QmAnchorProps, QmAnchorItemProps } from './anchor';
+export { default as QmAnchor } from './anchor';
+export type { QmTabsProps, QmTabPaneProps } from './tabs';
+export { default as QmTabs } from './tabs';
+export type { QmDrawerProps } from './drawer';
+export { default as QmDrawer } from './drawer';
+export type { QmModalProps } from './modal';
+export { default as QmModal } from './modal';
+export type { QmFormProps, QmFormItem, QmFormItemType } from './form';
+export { default as QmForm } from './form';
+export type { QmTinymceProps } from './tinymce';
+export { default as QmTinymce } from './tinymce';
+export type { QmCropperProps } from './cropper';
+export { default as QmCropper } from './cropper';
+export type { QmUploadFileProps } from './upload-file';
+export { default as QmUploadFile } from './upload-file';
+export type { QmUploadImgProps } from './upload-img';
+export { default as QmUploadImg } from './upload-img';
+export type { QmTableProps, QmTableColumn } from './table';
+export { default as QmTable } from './table';
+export type { QmSearchHelperProps } from './search-helper';
+export { default as QmSearchHelper } from './search-helper';
+export { default as version } from './version';
+export * from './antd';