Forráskód Böngészése

fix: 修正组件导出问题

xyh 2 éve
szülő
commit
05a3b5c7af

+ 39 - 0
packages/app/src/components/filter-field/Field.tsx

@@ -0,0 +1,39 @@
+import css from './index.module.css';
+import {Col, Row, Input} from 'antd';
+import {ChangeEventHandler, FC} from 'react';
+
+type Props = {
+  label: string;
+  name: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+};
+
+const FilterField: FC<Props> = function({label, name, placeholder, value, onChange}) {
+  const onInputChange: ChangeEventHandler<{value: string}> = function(e) {
+    onChange(e.target.value);
+  };
+
+  return (
+    <Col span={6}>
+      <Row>
+        <Col>
+          <label htmlFor={`filter_${name}`} className={css.fieldLabel}>{label}: </label>
+        </Col>
+        <Col span={16}>
+          <Input
+            id={`filter_${name}`}
+            name={name}
+            placeholder={placeholder ?? '请输入'}
+            value={value.length ? value : void 0}
+            onChange={onInputChange}
+          />
+        </Col>
+      </Row>
+    </Col>
+  );
+};
+
+export default FilterField;
+

+ 1 - 38
packages/app/src/components/filter-field/index.tsx

@@ -1,41 +1,4 @@
-import css from './index.module.css';
-import {Col, Row, Input} from 'antd';
-import {ChangeEventHandler, FC} from 'react';
-
-type Props = {
-  label: string;
-  name: string;
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-};
-
-const FilterField: FC<Props> = function({label, name, placeholder, value, onChange}) {
-  const onInputChange: ChangeEventHandler<{value: string}> = function(e) {
-    onChange(e.target.value);
-  };
-
-  return (
-    <Col span={6}>
-      <Row>
-        <Col>
-          <label htmlFor={`filter_${name}`} className={css.fieldLabel}>{label}: </label>
-        </Col>
-        <Col span={16}>
-          <Input
-            id={`filter_${name}`}
-            name={name}
-            placeholder={placeholder ?? '请输入'}
-            value={value.length ? value : void 0}
-            onChange={onInputChange}
-          />
-        </Col>
-      </Row>
-    </Col>
-  );
-};
-
-export default FilterField;
+export {default as FilterField} from './Field';
 
 export {default as FilterDatePicker} from './Date';
 export * from './Date';

+ 0 - 5
packages/app/src/components/index.tsx

@@ -1,12 +1,7 @@
-export {default as FilterField} from './filter-field';
 export {default as FilterButtonGroup} from './filter-button-group';
 export * from './filter-field';
-
 export * from './operation-field';
-
-export {default as Modal} from './modal';
 export * from './modal';
-
 export {default as Loading} from './loading';
 export {default as ErrorBoundary} from './error-boundary';
 export {default as Jurisdiction} from './jurisdiction';

+ 78 - 0
packages/app/src/components/modal/Modal.tsx

@@ -0,0 +1,78 @@
+import css from './index.module.css';
+import {FC, FormEventHandler, ReactNode} from 'react';
+import ReactModal from 'react-modal';
+import {CloseCircleFilled} from '@ant-design/icons';
+import ModalBtnGroup from './BtnGroup';
+import {Space} from 'antd';
+import addIcon from '@assets/images/dialog/add.webp';
+import editIcon from '@assets/images/dialog/edit.webp';
+
+type ReactModalStyle = ReactModal.Styles;
+
+const styles: ReactModalStyle = {
+  content: {
+    height: '560px',
+    width: '680px',
+    overflow: 'visible',
+    borderRadius: '10px',
+  },
+};
+
+type Props = {
+  visible: boolean,
+  title: string,
+  onClose?: () => void,
+  isLoading?: boolean,
+  onSubmit?: FormEventHandler<HTMLFormElement>
+  children?: ReactNode,
+  testId?: string,
+};
+
+const Modal: FC<Props> = function({
+  visible,
+  title,
+  onClose,
+  isLoading,
+  onSubmit,
+  children,
+  testId,
+}) {
+  return (
+    <ReactModal
+      isOpen={visible}
+      style={styles}
+      closeTimeoutMS={200}
+      ariaHideApp={false}
+      shouldCloseOnOverlayClick
+      onRequestClose={onClose}
+    >
+      <section className={css.dialog} data-testid={testId}>
+        <div className={css.dialogTitle}>
+          <h3>{title}</h3>
+        </div>
+
+        <CloseCircleFilled className={css.dialogClose} onClick={onClose} />
+
+        <div className={css.dialogDecorate}>
+          <span className={css.dialogDecorateIcon1} />
+          <div className={css.dialogDecorateCircle}>
+            <img src={title.includes('新增') ? addIcon : editIcon} />
+          </div>
+          <span className={css.dialogDecorateIcon2} />
+        </div>
+
+        <form onSubmit={onSubmit} className={css.dialogForm}>
+          <div className={css.dialogContent}>
+            <Space direction='vertical' className='width-full'>
+              {children}
+            </Space>
+          </div>
+          <ModalBtnGroup isLoading={isLoading} onClose={onClose} />
+        </form>
+      </section>
+    </ReactModal>
+  );
+};
+
+export default Modal;
+

+ 1 - 2
packages/app/src/components/modal/PageModal.tsx

@@ -1,8 +1,7 @@
 import ReactModal from 'react-modal';
-import {ReactModalStyle} from '.';
 import {ChildrenFC} from '@utils';
 
-const styles: ReactModalStyle = {
+const styles: ReactModal.Styles = {
   content: {
     width: '80vw',
     height: '90vh',

+ 2 - 81
packages/app/src/components/modal/index.tsx

@@ -1,82 +1,3 @@
-import css from './index.module.css';
-import {FC, FormEventHandler, ReactNode} from 'react';
-import ReactModal from 'react-modal';
-import {CloseCircleFilled} from '@ant-design/icons';
-import ModalBtnGroup from './BtnGroup';
-import {Space} from 'antd';
-import addIcon from '@assets/images/dialog/add.webp';
-import editIcon from '@assets/images/dialog/edit.webp';
-
-type ReactModalStyle = ReactModal.Styles;
-
-const styles: ReactModalStyle = {
-  content: {
-    height: '560px',
-    width: '680px',
-    overflow: 'visible',
-    borderRadius: '10px',
-  },
-};
-
-type Props = {
-  visible: boolean,
-  title: string,
-  onClose?: () => void,
-  isLoading?: boolean,
-  onSubmit?: FormEventHandler<HTMLFormElement>
-  children?: ReactNode,
-  testId?: string,
-};
-
-const Modal: FC<Props> = function({
-  visible,
-  title,
-  onClose,
-  isLoading,
-  onSubmit,
-  children,
-  testId,
-}) {
-  return (
-    <ReactModal
-      isOpen={visible}
-      style={styles}
-      closeTimeoutMS={200}
-      ariaHideApp={false}
-      shouldCloseOnOverlayClick
-      onRequestClose={onClose}
-    >
-      <section className={css.dialog} data-testid={testId}>
-        <div className={css.dialogTitle}>
-          <h3>{title}</h3>
-        </div>
-
-        <CloseCircleFilled className={css.dialogClose} onClick={onClose} />
-
-        <div className={css.dialogDecorate}>
-          <span className={css.dialogDecorateIcon1} />
-          <div className={css.dialogDecorateCircle}>
-            <img src={title.includes('新增') ? addIcon : editIcon} />
-          </div>
-          <span className={css.dialogDecorateIcon2} />
-        </div>
-
-        <form onSubmit={onSubmit} className={css.dialogForm}>
-          <div className={css.dialogContent}>
-            <Space direction='vertical' className='width-full'>
-              {children}
-            </Space>
-          </div>
-          <ModalBtnGroup isLoading={isLoading} onClose={onClose} />
-        </form>
-      </section>
-    </ReactModal>
-  );
-};
-
-export default Modal;
-export {
-  ModalBtnGroup,
-};
-export type {ReactModalStyle};
+export {default as ModalBtnGroup} from './BtnGroup';
 export {default as PageModal} from './PageModal';
+export {default as Modal} from './Modal';