fix: imperative-call

ZhongAnTech · Dec 15, 2022 · 936192f · 936192f
1 parent 7949cf5
commit 936192f
Show file tree

Hide file tree

Showing 70 changed files with 1,255 additions and 1,140 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,6 +15,7 @@ module.exports = {
         'react/sort-comp': 0,
         'react/destructuring-assignment': 0,
         'import/prefer-default-export': 0,
+        '@typescript-eslint/consistent-type-assertions': 0,
       },
       files: ['*.ts', '*.tsx'],
       extends: ['za/typescript-react', 'prettier'],

diff --git a/.prettierrc b/.prettierrc
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 100,
+  overrides: [{ files: '.prettierrc', options: { parser: 'json' } }],
+  plugins: [
+    require.resolve('prettier-plugin-packagejson'),
+    require.resolve('prettier-plugin-organize-imports'),
+  ],
+};
diff --git a/package.json b/package.json
@@ -34,6 +34,10 @@
       "stylelint --syntax scss"
     ]
   },
+  "resolutions": {
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9"
+  },
   "devDependencies": {
     "@babel/eslint-parser": "^7.16.3",
     "@babel/eslint-plugin": "^7.14.5",
@@ -54,6 +58,8 @@
     "husky": "^8.0.2",
     "lerna": "^4.0.0",
     "prettier": "^2.8.0",
+    "prettier-plugin-organize-imports": "^3.2.1",
+    "prettier-plugin-packagejson": "^2.3.0",
     "rimraf": "^3.0.2",
     "stylelint": "13.8.0",
     "stylelint-config-za": "0.3.0",

diff --git a/packages/site/demo/components/App/index.jsx b/packages/site/demo/components/App/index.jsx
@@ -1,13 +1,12 @@
-import React, { Suspense, lazy } from 'react';
-import { Route, Switch } from 'react-router-dom';
-import Loadable from 'react-loadable';
-import { Loading } from 'zarm';
-import { pascalCase } from 'change-case';
-import { components } from '@/site.config';
 import Container from '@/demo/components/Container';
 import Footer from '@/demo/components/Footer';
-import SentryBoundary from '@/demo/components/SentryBoundary';
 import Markdown from '@/demo/components/Markdown';
+import SentryBoundary from '@/demo/components/SentryBoundary';
+import { components } from '@/site.config';
+import { pascalCase } from 'change-case';
+import React, { lazy, Suspense } from 'react';
+import Loadable from 'react-loadable';
+import { Route, Switch } from 'react-router-dom';
 import './style.scss';
 
 const LoadableComponent = (component) => {
@@ -28,15 +27,15 @@ const LoadableComponent = (component) => {
         </Container>
       );
     },
-    loading: () => <Loading visible />,
+    loading: () => <></>,
   });
 };
 
 const App = () => {
   const { general, form, feedback, view, navigation, hooks, other } = components;
   return (
     <SentryBoundary>
-      <Suspense fallback={<Loading visible />}>
+      <Suspense fallback={<></>}>
         <Switch>
           <Route exact path="/" component={lazy(() => import('@/demo/pages/Index'))} />
           {[...general, ...form, ...feedback, ...view, ...navigation, ...hooks, ...other].map(

diff --git a/packages/site/site.config.js b/packages/site/site.config.js
@@ -204,13 +204,6 @@ module.exports = {
         source: 'zarm/toast/demo.md',
         style: true,
       },
-      {
-        key: 'loading',
-        name: '加载',
-        module: () => import('zarm/loading/demo.md'),
-        source: 'zarm/loading/demo.md',
-        style: false,
-      },
       {
         key: 'pull',
         name: '上拉加载下拉刷新',

diff --git a/packages/zarm-icons/src/icon/interface.ts b/packages/zarm-icons/src/icon/interface.ts
@@ -8,4 +8,5 @@ export interface BaseIconProps {
   component?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
   viewBox?: string;
   mode?: 'auto' | 'svg' | 'font';
+  children?: React.ReactNode;
 }
diff --git a/packages/zarm/package.json b/packages/zarm/package.json
@@ -87,8 +87,8 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@types/lodash": "^4.14.182",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@types/react-transition-group": "^4.4.5",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "@zarm-design/cli": "^0.0.41-alpha.0",

diff --git a/packages/zarm/src/__tests__/index.test.ts b/packages/zarm/src/__tests__/index.test.ts
@@ -90,6 +90,7 @@ describe('index', () => {
           "defaultProps": Object {
             "maskClosable": true,
           },
+          "prompt": [Function],
           "render": [Function],
         },
         "CascaderView": Object {
@@ -159,6 +160,7 @@ describe('index', () => {
             "minuteStep": 1,
             "mode": "date",
           },
+          "prompt": [Function],
           "render": [Function],
         },
         "DatePickerView": Object {
@@ -266,14 +268,6 @@ describe('index', () => {
           },
           "render": [Function],
         },
-        "Loading": Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "mask": true,
-          },
-          "render": [Function],
-          "useLoading": [Function],
-        },
         "Marquee": Object {
           "$$typeof": Symbol(react.forward_ref),
           "defaultProps": Object {
@@ -351,6 +345,7 @@ describe('index', () => {
             "destroy": false,
             "maskClosable": true,
           },
+          "prompt": [Function],
           "render": [Function],
         },
         "PickerView": Object {
@@ -553,13 +548,8 @@ describe('index', () => {
           "render": [Function],
         },
         "Toast": Object {
-          "$$typeof": Symbol(react.forward_ref),
-          "defaultProps": Object {
-            "mask": false,
-            "stayTime": 3000,
-            "visible": false,
-          },
-          "render": [Function],
+          "clear": [Function],
+          "show": [Function],
         },
         "Tooltip": Object {
           "$$typeof": Symbol(react.forward_ref),

diff --git a/packages/zarm/src/action-sheet/__tests__/__snapshots__/index.test.tsx.snap b/packages/zarm/src/action-sheet/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,3 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ActionSheet renders correctly 1`] = `<DocumentFragment />`;
+exports[`ActionSheet renders correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="za-mask "
+    style="background-color: rgba(0, 0, 0, 0.55);"
+  />
+  <div
+    class="za-popup__wrapper"
+  >
+    <div
+      class="za-popup za-popup--bottom "
+    >
+      <div
+        class="za-action-sheet"
+      >
+        <div
+          class="za-action-sheet__actions"
+        >
+          <div
+            class="za-action-sheet__item"
+          >
+            操作一
+          </div>
+          <div
+            class="za-action-sheet__item"
+          >
+            操作二
+          </div>
+          <div
+            class="za-action-sheet__item za-action-sheet__item--danger"
+          >
+            操作三
+          </div>
+        </div>
+        <div
+          class="za-action-sheet__cancel"
+        >
+          <div
+            class="za-action-sheet__item za-action-sheet__item--bold"
+          >
+            取消
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/zarm/src/action-sheet/demo.md b/packages/zarm/src/action-sheet/demo.md
@@ -162,7 +162,7 @@ const Demo = () => {
 ReactDOM.render(<Demo />, mountNode);
 ```
 
-## 静态方法
+## 指令式
 
 ```jsx
 import { ActionSheet, List, Button } from 'zarm';

diff --git a/packages/zarm/src/action-sheet/show.tsx b/packages/zarm/src/action-sheet/show.tsx
@@ -1,49 +1,7 @@
 import * as React from 'react';
+import { renderImperatively } from '../utils/dom';
 import ActionSheet, { ActionSheetProps } from './ActionSheet';
-import renderToContainer from '../utils/renderToContainer';
-import { RuntimeConfigProvider } from '../config-provider/ConfigProvider';
-
-interface ActionSheetRef {
-  close: () => void;
-}
 
 export const show = (props: Omit<ActionSheetProps, 'visible'>) => {
-  let unmount = () => {};
-
-  const Wrapper = React.forwardRef<ActionSheetRef>((_, wrapperRef) => {
-    const [visible, setVisible] = React.useState(false);
-
-    React.useEffect(() => {
-      setVisible(true);
-    }, []);
-
-    React.useImperativeHandle(wrapperRef, () => ({
-      close: () => {
-        setVisible(false);
-      },
-    }));
-
-    return (
-      <RuntimeConfigProvider>
-        <ActionSheet
-          {...props}
-          visible={visible}
-          afterClose={() => {
-            props.afterClose?.();
-            unmount();
-          }}
-          mountContainer={false}
-        />
-      </RuntimeConfigProvider>
-    );
-  });
-
-  const ref = React.createRef<ActionSheetRef>();
-  unmount = renderToContainer(<Wrapper ref={ref} />, props.mountContainer);
-
-  return {
-    close: () => {
-      ref.current?.close();
-    },
-  };
+  return renderImperatively(<ActionSheet {...props} />);
 };
diff --git a/packages/zarm/src/affix/index.tsx b/packages/zarm/src/affix/index.tsx
@@ -1,11 +1,11 @@
-import React, { useState, useEffect, forwardRef, useRef, useCallback, CSSProperties } from 'react';
 import { createBEM } from '@zarm-design/bem';
 import throttle from 'lodash/throttle';
+import React, { CSSProperties, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { ConfigContext } from '../config-provider';
 import { canUseDOM } from '../utils/dom';
 import Events from '../utils/events';
-import type { BaseAffixProps } from './interface';
 import type { HTMLProps } from '../utils/utilityTypes';
+import type { BaseAffixProps } from './interface';
 
 export interface AffixCssVars {
   '--zindex'?: React.CSSProperties['zIndex'];
@@ -22,7 +22,7 @@ export type AffixProps = BaseAffixProps & React.PropsWithChildren<HTMLProps<Affi
 
 const DEFAULT_SCROLL_CONTAINER = canUseDOM ? window : undefined;
 
-const Affix = forwardRef<unknown, AffixProps>((props, ref) => {
+const Affix = forwardRef<HTMLDivElement, AffixProps>((props, ref) => {
   const { className, children, offsetBottom, offsetTop, onChange, scrollContainer } = props;
   const { prefixCls } = React.useContext(ConfigContext);
   const bem = createBEM('affix', { prefixCls });

diff --git a/packages/zarm/src/alert/Alert.tsx b/packages/zarm/src/alert/Alert.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react';
 import { createBEM } from '@zarm-design/bem';
-import { ConfigContext } from '../config-provider';
+import * as React from 'react';
 import Modal from '../modal';
-import type { BaseAlertProps } from './interface';
+import { ConfigContext } from '../config-provider';
 import type { HTMLProps } from '../utils/utilityTypes';
+import type { BaseAlertProps } from './interface';
 
 export type AlertProps = BaseAlertProps & HTMLProps;
 
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
-  const { className, content, cancelText, onCancel, ...rest } = props;
+  const { className, content, confirmText, onConfirm, ...rest } = props;
   const { prefixCls, locale } = React.useContext(ConfigContext);
   const bem = createBEM('alert', { prefixCls });
   const cls = bem([className]);
@@ -20,8 +20,8 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
       className={cls}
       actions={[
         {
-          text: cancelText || locale?.Confirm.cancelText,
-          onClick: onCancel,
+          text: confirmText || locale?.Confirm.confirmText,
+          onClick: onConfirm,
           bold: true,
         },
       ]}

diff --git a/packages/zarm/src/alert/interface.ts b/packages/zarm/src/alert/interface.ts
@@ -3,6 +3,6 @@ import type { ModalProps } from '../modal';
 
 export interface BaseAlertProps extends ModalProps {
   content?: ReactNode;
-  cancelText?: ReactNode;
-  onCancel?: () => void | Promise<boolean | void>;
+  confirmText?: ReactNode;
+  onConfirm?: () => void | Promise<boolean | void>;
 }
diff --git a/packages/zarm/src/back-top/interface.ts b/packages/zarm/src/back-top/interface.ts
@@ -1,3 +1,4 @@
+import React from 'react';
 import type { MountContainer, ScrollContainer } from '../utils/dom';
 
 export interface BaseBackTopProps {
@@ -6,4 +7,5 @@ export interface BaseBackTopProps {
   scrollContainer?: ScrollContainer;
   mountContainer?: MountContainer;
   destroy?: boolean;
+  children?: React.ReactNode;
 }
diff --git a/packages/zarm/src/cascader/demo.md b/packages/zarm/src/cascader/demo.md
@@ -113,7 +113,7 @@ const Demo = () => {
 ReactDOM.render(<Demo />, mountNode);
 ```
 
-## 指令式调用
+## 指令式
 
 ```jsx
 import { useState, useEffect } from 'react';
@@ -308,6 +308,29 @@ ReactDOM.render(<Demo />, mountNode);
 | itemRender   | (data?: object) => data.label    | (data?: object) => data.label                            | 单个选项的展示                           |
 | onChange     | (value: CascaderValue[]) => void | -                                                        | 值变化时触发的回调函数                   |
 
+### 指令式调用
+
+Cascader 支持指令式调用，提供了 `prompt` 方法
+
+```tsx
+prompt: (props: Omit<CascaderProps, 'visible' | 'visible' | 'children'>) =>
+  Promise<CascaderValue[] | null>;
+```
+
+`prompt` 方法的返回值是一个 Promise，如果用户点击了确定，从 Promise 中可以解析到 `CascaderValue[]`，而如果用户是触发的取消操作，那么 Promise 中的值是 `null`。你可以通过 `await` 或 `.then()` 来获取到其中的值：
+
+```tsx
+const value = await Cascader.prompt({
+  dataSource: dataSourceConfig,
+});
+
+Cascader.prompt({
+  columns: dataSourceConfig,
+}).then((value) => {
+  // ...
+});
+```
+
 ### 仅 Cascader 支持的属性
 
 | 属性         | 类型                             | 默认值   | 说明                                           |