@mi-avalon/libs 0.0.7 → 0.0.8

package/src/components/MForm/index.tsx

@@ -1,97 +0,0 @@
-/**
- * 表单组件
- */
-import { Col, Form, FormInstance, Row } from 'antd';
-import { Rule } from 'antd/es/form';
-import React from 'react';
-import { getClassName } from '../../utils';
-import CompThemeProvider from '../ThemeContext/CompThemeProvider';
-import './index.scss';
-import { MFormItemConst } from './MFormItemConst';
-import { IMFormItem, IMFormProps } from './type';
-
-const classname = (n: string = '') => {
-  const cn = 'm-form';
-  return getClassName(cn, n);
-};
-
-function MForm(props: IMFormProps) {
-  const {
-    formProps,
-    formItems = [],
-    column = 1,
-    form,
-    itemLayout,
-    formRowProps,
-  } = props;
-
-  const renderItem = (item: IMFormItem, form?: FormInstance) => {
-    if (item.render) {
-      return item.render(form);
-    }
-    const func = MFormItemConst[item.type];
-    if (item && item.type && func) {
-      const renderFunc = func as (item: IMFormItem) => React.ReactNode;
-      return renderFunc(item);
-    }
-
-    return <div className="error-message">Invalid form item configuration</div>;
-  };
-
-  const renderFormItem = (item: IMFormItem) => {
-    const { show = true } = item;
-    if (!show) return null;
-    const rules: Rule[] = [...(item.rules || [])];
-    if (item.required) {
-      rules.push({ required: true, message: item.required });
-    }
-
-    const formItemLayout = {
-      labelCol: MFormItemConst.labelCol,
-      wrapperCol: MFormItemConst.wrapperCol,
-      ...itemLayout,
-      ...item.itemLayout,
-    };
-    return (
-      <Col key={`col-${item.id}`} span={item.span || 24 / column}>
-        <div className={classname('item-wrapper')}>
-          <Form.Item
-            label={item.label}
-            name={item.id}
-            rules={rules}
-            initialValue={item.initialValue}
-            {...formItemLayout}
-            {...item.formItemProps}
-          >
-            {renderItem(item, form)}
-          </Form.Item>
-        </div>
-      </Col>
-    );
-  };
-
-  return (
-    <CompThemeProvider>
-      <Form
-        form={form}
-        {...formProps}
-        className={`${classname()} ${formProps?.className}`}
-      >
-        <Row
-          gutter={MFormItemConst.defaultRowGutter}
-          {...formRowProps}
-          className={`${classname('grid')} ${formRowProps?.className}`}
-        >
-          {formItems.map(e => renderFormItem(e))}
-        </Row>
-      </Form>
-    </CompThemeProvider>
-  );
-}
-
-MForm.displayName = 'MForm';
-
-export default MForm;
-
-export * from './MFormItemConst';
-export * from './type';

package/src/components/MForm/type.ts

@@ -1,229 +0,0 @@
-import {
-  CascaderAutoProps,
-  FormInstance,
-  FormItemProps,
-  FormProps,
-  InputNumberProps,
-  InputProps,
-  MentionsProps,
-  RadioGroupProps,
-  RowProps,
-  SelectProps,
-  SliderSingleProps,
-  TreeSelectProps,
-  UploadProps,
-} from 'antd';
-import { CheckboxGroupProps } from 'antd/es/checkbox';
-import { RangePickerProps } from 'antd/es/date-picker';
-import { Rule } from 'antd/es/form';
-import { TextAreaProps } from 'antd/es/input';
-import { SliderRangeProps } from 'antd/es/slider';
-import { DatePickerProps } from 'antd/lib';
-import { ReactElement } from 'react';
-
-export enum MFormItemTypeEnum {
-  Input = 'input',
-  InputNumber = 'inputNumber',
-  Text = 'text',
-  Password = 'password',
-  Radio = 'radio',
-  Select = 'select',
-  Checkbox = 'checkbox',
-  DatePicker = 'datePicker',
-  RangePicker = 'rangePicker',
-  Upload = 'upload',
-  Mentions = 'mentions',
-  Cascader = 'cascader',
-  TreeSelect = 'treeSelect',
-  Slider = 'slider',
-}
-
-export declare type MFormItemLayout = { span?: number; offset?: number };
-
-export interface IMFormProps {
-  /**
-   * 一行显示几个label 默认1个, 其他：2, 3, 4
-   */
-  column?: 1 | 2 | 3 | 4;
-  /**
-   * 需要的数据: [ { label: ...,id: ..., required: ..., type: ..., ... }, ... ]
-   */
-  formItems: IMFormItem[];
-  /**
-   * Antd const [form] = useForm()
-   */
-  form?: FormInstance;
-  /**
-   * 表单其他属性
-   */
-  formProps?: FormProps;
-  /**
-   * 全局 MFormItem layout， 默认为 {labelCol:{span: 7}, wrapperCol: {span: 7}}
-   * @type {{labelCol: MFormItemLayout, wrapperCol: MFormItemLayout}}
-   * @memberof MFormItem
-   */
-  itemLayout?: { labelCol?: MFormItemLayout; wrapperCol?: MFormItemLayout };
-  /**
-   * Antd Row 的其他属性
-   */
-  formRowProps?: RowProps;
-}
-
-export interface IMFormBaseItem {
-  /**
-   * 属性名
-   */
-  id: string;
-  /**
-   * label名称
-   */
-  label: string;
-  /**
-   * 组件是否禁用
-   */
-  disabled?: boolean;
-  /**
-   * form类型 FORM_TYPE
-   */
-  type?: MFormItemTypeEnum;
-  /**
-   * 初始值
-   */
-  initialValue?: any;
-  /**
-   * rules required的验证消息， 不填写则不验证
-   */
-  required?: string;
-  /**
-   * rule-max, 正则，验证消息
-   */
-  rules?: Rule[];
-  /**
-   * 自定义form
-   */
-  render?: (form?: FormInstance) => ReactElement;
-  /**
-   * Antd MForm.Item 的其他属性
-   */
-  formItemProps?: FormItemProps;
-  /**
-   *  MFormItem layout， 默认为 {labelCol:{span: 7}, wrapperCol: {span: 7}}
-   * @type {{labelCol: MFormItemLayout, wrapperCol: MFormItemLayout}}
-   * @memberof MFormItem
-   */
-  itemLayout?: { labelCol?: MFormItemLayout; wrapperCol?: MFormItemLayout };
-  /**
-   * 当前表单占据行的宽度 1-24 默认 24 / column
-   */
-  span?: number;
-  /**
-   * 是否显示当前组件 默认显示
-   */
-  show?: boolean;
-  /**
-   * item组件的其他属性
-   */
-  props?: any;
-}
-
-export interface IMFormInputItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.Input | MFormItemTypeEnum.Password;
-  props?: InputProps;
-  placeholder?: string;
-  maxLength?: number;
-}
-export interface IMFormInputNumItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.InputNumber;
-  props?: InputNumberProps;
-  placeholder?: string;
-  maxLength?: number;
-}
-
-export interface IMFormTextItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.Text;
-  props?: TextAreaProps;
-  placeholder?: string;
-  maxLength?: number;
-}
-
-// 单选
-export interface IMFormRadioGroupItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.Radio;
-  props?: RadioGroupProps;
-}
-
-// 多选
-export interface IMFormChkBoxGroupItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.Checkbox;
-  props?: CheckboxGroupProps;
-}
-
-// 下拉选择
-export interface IMFormSelectItem<T = any> extends IMFormBaseItem {
-  type: MFormItemTypeEnum.Select;
-  placeholder?: string;
-  props?: SelectProps<T>;
-}
-
-// 日期选择
-export interface IMFormDatePickerItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.DatePicker;
-  placeholder?: string;
-  props?: DatePickerProps;
-}
-
-// 日期范围选择
-export interface IMFormRangePickerItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.RangePicker;
-  placeholder?: [string, string];
-  props?: RangePickerProps;
-}
-
-// 文件上传
-export interface IMFormUploadItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.Upload;
-  children?: ReactElement;
-  props?: UploadProps;
-}
-
-// 提及
-export interface IMFormMentionsItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.Mentions;
-  placeholder?: string;
-  props?: MentionsProps;
-}
-
-// 联级选择
-export interface IMFormCascaderItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.Cascader;
-  placeholder?: string;
-  props?: CascaderAutoProps;
-}
-
-// 树选择
-export interface IMFormTreeSelectItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.TreeSelect;
-  placeholder?: string;
-  props?: TreeSelectProps;
-}
-
-// 滑块
-export interface IMFormSliderItem extends IMFormBaseItem {
-  type: MFormItemTypeEnum.Slider;
-  props?: SliderSingleProps | SliderRangeProps;
-}
-
-export type IMFormItem =
-  | IMFormInputItem
-  | IMFormInputNumItem
-  | IMFormSelectItem
-  | IMFormChkBoxGroupItem
-  | IMFormRadioGroupItem
-  | IMFormTextItem
-  | IMFormDatePickerItem
-  | IMFormRangePickerItem
-  | IMFormUploadItem
-  | IMFormMentionsItem
-  | IMFormCascaderItem
-  | IMFormTreeSelectItem
-  | IMFormSliderItem;

package/src/components/MSearch/index.scss

@@ -1,63 +0,0 @@
-$comp-name: 'm-search';
-
-.#{$comp-name} {
-	position: relative;
-	border-radius: 8px;
-
-	.ant-card {
-		margin: 0;
-		padding: 16px 0;
-
-		.ant-card-body {
-			padding: 0;
-			border-radius: 0;
-		}
-	}
-
-	&-form {
-		position: relative;
-		margin-right: 20px;
-	}
-
-	&-btn-wrapper {
-		display: inline-block;
-	}
-
-	&-collapsed {
-	}
-
-	&-collapsed &-btn-wrapper {
-		position: absolute;
-		right: 0px;
-		top: 0;
-		display: flex;
-		height: 100%;
-		align-items: center;
-	}
-
-	& .ant-form-item {
-		margin-bottom: 10px;
-	}
-
-	&-collapsed .ant-form-item {
-		margin-bottom: 0;
-	}
-
-	&-footer {
-		text-align: right;
-		padding: 10px 20px;
-	}
-
-	&-btn {
-		margin-left: 10px;
-	}
-
-	&-btn-collapse {
-		display: inline-block;
-		cursor: pointer;
-	}
-
-	& .ant-calendar-picker {
-		width: auto !important;
-	}
-}

package/src/components/MSearch/index.tsx

@@ -1,173 +0,0 @@
-import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
-import { Button, ButtonProps, Card, Form } from 'antd';
-import { FormInstance } from 'antd/lib';
-import React, { useEffect, useRef, useState } from 'react';
-import { getClassName, removeNull } from '../../utils';
-import MForm, { IMFormItem } from '../MForm';
-import CompThemeProvider from '../ThemeContext/CompThemeProvider';
-import './index.scss';
-
-const ENTER_KEY_CODE = 13; // 回车键的值为13
-
-const classname = (n: string = '') => {
-  const cn = 'm-search';
-  return getClassName(cn, n);
-};
-
-export interface IMSearchProps {
-  form?: FormInstance;
-  /**
-   * 需要的数据: [ { lable: ...,id: ..., required: ..., type: ..., }, ... ]
-   */
-  searchItems: IMFormItem[];
-  className?: string;
-  /**
-   * 搜索按钮 params返回form表单的数据
-   */
-  onSearch?: (params: any, isReset: boolean) => any;
-  /**
-   * 搜索项默认展开，不填写默认false
-   */
-  defaultShowAll?: boolean;
-  /**
-   * 自定义按钮
-   */
-  customButtons?: ButtonProps[];
-}
-
-interface IKeyObj {
-  keyCode: number;
-}
-
-const MSearch: React.FC<IMSearchProps> = props => {
-  const {
-    className,
-    searchItems = [],
-    onSearch,
-    defaultShowAll = false,
-    customButtons = [],
-    form: propsForm,
-  } = props;
-  const [showAll, setShowAll] = useState(defaultShowAll);
-  const [curForm] = Form.useForm();
-  const searchWrap = useRef<HTMLDivElement>(null);
-
-  const form = propsForm ?? curForm;
-
-  // 键盘按下事件处理
-  const onEnterKeySearch = (keyObj: IKeyObj) => {
-    const { keyCode } = keyObj;
-    if (keyCode === ENTER_KEY_CODE) {
-      search();
-    }
-  };
-
-  // 添加和移除事件监听
-  useEffect(() => {
-    const currentWrap = searchWrap.current;
-    currentWrap?.addEventListener('keydown', onEnterKeySearch);
-
-    return () => {
-      currentWrap?.removeEventListener('keydown', onEnterKeySearch);
-    };
-  }, []);
-
-  // 重置表单
-  const reset = () => {
-    form?.resetFields();
-    search(true);
-  };
-
-  // 搜索函数
-  const search = (isReset = false) => {
-    form?.validateFields().then(values => {
-      removeNull(values);
-      onSearch?.(values, isReset);
-    });
-  };
-
-  // 渲染搜索按钮
-  const renderSearchButtons = () => {
-    const hasMore = searchItems.length > 2;
-
-    return (
-      <div className={classname('btn-wrapper')}>
-        {customButtons?.length > 0 ? (
-          <>
-            {customButtons.map((buttonProps, index) => (
-              <Button
-                key={`custom-btn-${index}`}
-                className={classname('btn')}
-                {...buttonProps}
-              >
-                {buttonProps.children}
-              </Button>
-            ))}
-          </>
-        ) : (
-          <>
-            <Button className={classname('btn btn-reset')} onClick={reset}>
-              重置
-            </Button>
-            <Button
-              className={classname('btn btn-search')}
-              onClick={() => search()}
-              type="primary"
-            >
-              搜索
-            </Button>
-          </>
-        )}
-        {hasMore && (
-          <div
-            className={classname('btn btn-collapse')}
-            onClick={() => setShowAll(!showAll)}
-          >
-            <span>{showAll ? '收起' : '展开'}</span>
-            {showAll ? <CaretUpOutlined /> : <CaretDownOutlined />}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  // 处理搜索项显示/隐藏
-  const processedSearchItems = searchItems.map((item, idx) => {
-    const newItem = { ...item };
-    if (searchItems.length > 2 && idx >= 2 && !showAll) {
-      newItem.formItemProps = {
-        ...item.formItemProps,
-        style: {
-          ...item.formItemProps?.style,
-          display: 'none',
-        },
-      };
-    }
-    return newItem;
-  });
-
-  const hasMore = searchItems.length > 2;
-
-  return (
-    <CompThemeProvider>
-      <div
-        className={`${classname('')} ${
-          showAll ? '' : classname('collapsed')
-        } ${className || ''}`}
-        ref={searchWrap}
-      >
-        <Card>
-          <div className={classname('form')}>
-            <MForm form={form} formItems={processedSearchItems} column={3} />
-            {(!hasMore || (hasMore && !showAll)) && renderSearchButtons()}
-          </div>
-          {hasMore && showAll && (
-            <div className={classname('footer')}>{renderSearchButtons()}</div>
-          )}
-        </Card>
-      </div>
-    </CompThemeProvider>
-  );
-};
-
-export default MSearch;

package/src/components/MTable/index.tsx

@@ -1,22 +0,0 @@
-/**
- * 表格
- */
-import { Table, TableProps } from 'antd';
-import { ColumnsType } from 'antd/es/table';
-import React from 'react';
-import CompThemeProvider from '../ThemeContext/CompThemeProvider';
-
-export interface IMTableProps extends TableProps {}
-
-function MTable(props: IMTableProps) {
-	const columns: ColumnsType<any> = props.columns?.map(e => ({ ...e, dataIndex: e.key })) ?? [];
-	return (
-		<CompThemeProvider>
-			<Table rowKey={e => e.id} {...props} columns={columns} />;
-		</CompThemeProvider>
-	);
-}
-
-MTable.displayName = 'MTable';
-
-export default MTable;

package/src/components/MiModal/index.tsx

@@ -1,106 +0,0 @@
-import { Modal as AntModal, ConfigProvider, theme, ThemeConfig } from 'antd';
-import React, { Component } from 'react';
-import { IModalBaseProps, openModal } from '../../utils';
-
-export type IMiModalProps = IModalBaseProps & {
-  mode?: string;
-};
-
-// 全局状态管理
-let globalMode: string = 'default';
-const modalInstances: Array<{
-  update: (config: Partial<IMiModalProps>) => void;
-}> = [];
-let getThemeConfig = (mode: string): ThemeConfig => {
-  switch (mode) {
-    case 'light':
-      return {
-        algorithm: [theme.defaultAlgorithm],
-      };
-    case 'dark':
-      return {
-        algorithm: [theme.darkAlgorithm],
-      };
-    default:
-      return {
-        algorithm: [theme.defaultAlgorithm],
-      };
-  }
-};
-
-class MiModal extends Component<IMiModalProps> {
-  // 静态方法设置全局模式并更新所有弹窗
-  static setMode = (mode: string) => {
-    globalMode = mode;
-    // 更新所有已打开的弹窗
-    modalInstances.forEach(instance => {
-      instance.update({ mode });
-    });
-  };
-
-  // 静态方法设置全局ThemeConfig
-  static setThemeConfig = (fn: (m: string) => ThemeConfig) => {
-    getThemeConfig = fn;
-  };
-
-  static open = (props: IMiModalProps) => {
-    const instance = openModal(MiModal, {
-      mode: globalMode, // 默认使用全局主题
-      ...props,
-    });
-
-    // 注册实例以便全局更新
-    modalInstances.push(instance);
-
-    // 添加销毁时的清理逻辑
-    const originalDestroy = instance.destroy;
-    instance.destroy = (...args) => {
-      const index = modalInstances.indexOf(instance);
-      if (index !== -1) {
-        modalInstances.splice(index, 1);
-      }
-      return originalDestroy(...args);
-    };
-
-    return instance;
-  };
-
-  getTheme() {
-    const mode = this.props.mode || globalMode;
-    return getThemeConfig(mode);
-  }
-
-  handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
-    this.props.onCancel?.(e);
-    this.props.onClosed?.({ cancel: true });
-  };
-
-  handleOk = (e: React.MouseEvent<HTMLButtonElement>) => {
-    this.props.onOk?.(e);
-    this.props.onClosed?.({ ok: true });
-  };
-
-  render() {
-    return (
-      <ConfigProvider
-        theme={this.getTheme()} // 确保内部组件能正确继承主题
-        componentSize="middle"
-        componentDisabled={false}
-      >
-        <AntModal
-          maskClosable={false}
-          open={this.props.open}
-          onCancel={this.handleCancel}
-          onOk={this.handleOk}
-          okText="确定"
-          cancelText="取消"
-          {...this.props}
-        >
-          {this.props.children}
-        </AntModal>
-      </ConfigProvider>
-    );
-  }
-}
-
-export default MiModal;

package/src/components/ThemeContext/CompThemeProvider.tsx

@@ -1,19 +0,0 @@
-/**
- * CompThemeProvider
- */
-import { ConfigProvider } from 'antd';
-import React from 'react';
-import { useMiThemeConfig } from '.';
-
-interface IProps {
-	children: React.ReactNode;
-}
-
-function CompThemeProvider(props: IProps) {
-	const { theme } = useMiThemeConfig();
-	return <ConfigProvider theme={theme}>{props.children}</ConfigProvider>;
-}
-
-CompThemeProvider.displayName = 'CompThemeProvider';
-
-export default CompThemeProvider;