chore(portal-context): 改写名字代码 (#3060)

.changeset/little-rabbits-change.md

@@ -1,12 +1,12 @@
 ---
-"@hi-ui/core": patch
-"@hi-ui/container-context": patch
-"@hi-ui/drawer": patch
-"@hi-ui/hiui": patch
-"@hi-ui/loading": patch
-"@hi-ui/modal": patch
-"@hi-ui/preview": patch
-"@hi-ui/provider": patch
+"@hi-ui/core": minor
+"@hi-ui/container-context": minor
+"@hi-ui/drawer": minor
+"@hi-ui/hiui": minor
+"@hi-ui/loading": minor
+"@hi-ui/modal": minor
+"@hi-ui/preview": minor
+"@hi-ui/provider": minor
 ---
 
 feat(container-context): add container package (#3060)

packages/core/core/package.json

@@ -46,6 +46,6 @@
   "dependencies": {
     "@hi-ui/core-css": "^4.1.5",
     "@hi-ui/locale-context": "^4.0.8",
-    "@hi-ui/container-context": "^4.0.0"
+    "@hi-ui/portal-context": "^4.0.0"
   }
 }

packages/core/core/src/index.ts

@@ -74,5 +74,5 @@ export type HiBaseSizeEnum = ValueOf<typeof HiBaseSizeEnum>
 export { useLocaleContext, LocaleProvider } from '@hi-ui/locale-context'
 export type { UseLocaleContext, LocaleProviderProps } from '@hi-ui/locale-context'
 
-export { useContainerContext, ContainerProvider } from '@hi-ui/container-context'
-export type { UseContainerContext, ContainerProviderProps } from '@hi-ui/container-context'
+export { usePortalContext, PortalProvider } from '@hi-ui/portal-context'
+export type { UsePortalContext, PortalProviderProps } from '@hi-ui/portal-context'

packages/ui/drawer/src/Drawer.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useCallback, useEffect } from 'react'
 import { cx, getPrefixCls, getPrefixStyleVar } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
-import { HiBaseHTMLProps, useContainerContext } from '@hi-ui/core'
+import { HiBaseHTMLProps, usePortalContext } from '@hi-ui/core'
 import { CSSTransition } from 'react-transition-group'
 import { Portal } from '@hi-ui/portal'
 import { useModal, UseModalProps } from '@hi-ui/modal'
@@ -51,7 +51,7 @@ export const Drawer = forwardRef<HTMLDivElement | null, DrawerProps>(
   ) => {
     const [transitionVisible, transitionVisibleAction] = useToggle(false)
     const [transitionExited, transitionExitedAction] = useToggle(true)
-    const globalContainer = useContainerContext()
+    const globalContainer = usePortalContext()?.container
     const container = containerProp ?? globalContainer
 
     const { rootProps, getModalProps, getModalWrapperProps } = useModal({

packages/ui/hiui/src/index.ts

@@ -96,11 +96,11 @@ export { default as LocaleContext } from '@hi-ui/locale-context'
 /**
  * @deprecated Please use the `Provider` instead of it.
  */
-export * from '@hi-ui/container-context'
+export * from '@hi-ui/portal-context'
 /**
  * @deprecated Please use the `Provider` instead of it.
  */
-export { default as ContainerContext } from '@hi-ui/container-context'
+export { default as PortalContext } from '@hi-ui/portal-context'
 
 export * from '@hi-ui/menu'
 export { default as Menu } from '@hi-ui/menu'

packages/ui/loading/src/Loading.tsx

@@ -3,7 +3,7 @@ import { CSSTransition } from 'react-transition-group'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
 import { Portal } from '@hi-ui/portal'
-import { HiBaseHTMLProps, HiBaseSizeEnum, useContainerContext } from '@hi-ui/core'
+import { HiBaseHTMLProps, HiBaseSizeEnum, usePortalContext } from '@hi-ui/core'
 import { useLatestCallback } from '@hi-ui/use-latest'
 import Spinner from '@hi-ui/spinner'
 import { useLoading } from './use-loading'
@@ -38,7 +38,7 @@ export const Loading = forwardRef<null, LoadingProps>(
   ) => {
     const { internalVisible, setInternalVisible } = useLoading({ visible, delay })
 
-    const globalContainer = useContainerContext()
+    const globalContainer = usePortalContext()?.container
     const container = containerProp ?? globalContainer
 
     useImperativeHandle(innerRef, () => ({

packages/ui/modal/src/Modal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, forwardRef, useCallback, useImperativeHandle } from 'react'
 import { cx, getPrefixCls } from '@hi-ui/classname'
-import { HiBaseHTMLProps, HiBaseSizeEnum, useLocaleContext, useContainerContext } from '@hi-ui/core'
+import { HiBaseHTMLProps, HiBaseSizeEnum, useLocaleContext, usePortalContext } from '@hi-ui/core'
 import { __DEV__ } from '@hi-ui/env'
 import { CSSTransition } from 'react-transition-group'
 import { Portal } from '@hi-ui/portal'
@@ -74,7 +74,7 @@ export const Modal = forwardRef<HTMLDivElement | null, ModalProps>(
   ) => {
     const i18n = useLocaleContext()
 
-    const globalContainer = useContainerContext()
+    const globalContainer = usePortalContext()?.container
     const container = containerProp ?? globalContainer
 
     const cancelText = isUndef(cancelTextProp) ? i18n.get('modal.cancelText') : cancelTextProp

packages/ui/portal-context/README.md

@@ -0,0 +1,11 @@
+# `@hi-ui/portal-context`
+
+> TODO: description
+
+## Usage
+
+```
+const PortalContext = require('@hi-ui/portal-context');
+
+// TODO: DEMONSTRATE API
+```

packages/ui/portal-context/__tests__/portal-context.test.js

@@ -0,0 +1,5 @@
+const PortalContext = require('../src')
+
+describe('@hi-ui/portal-context', () => {
+  it('needs tests', () => {})
+})

packages/ui/container-context/hi-docs.config.mdx → packages/ui/portal-context/hi-docs.config.mdx

@@ -1,4 +1,4 @@
-# ContainerContext 语言上下文
+# PortalContext 上下文
 
 容器设置上下文。
 

packages/ui/container-context/package.json → packages/ui/portal-context/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@hi-ui/container-context",
+  "name": "@hi-ui/portal-context",
   "version": "4.0.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],

packages/ui/portal-context/src/PortalContext.tsx

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react'
+
+export const PortalContext = createContext<UsePortalContext>(null)
+
+export const usePortalContext = () => {
+  const context = useContext(PortalContext)
+
+  return context
+}
+
+export type UsePortalContext = { container?: HTMLElement | null | undefined } | null | undefined

packages/ui/portal-context/src/PortalProvider.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { PortalContext, UsePortalContext } from './PortalContext'
+import { __DEV__ } from '@hi-ui/env'
+
+export const PortalProvider: React.FC<PortalProviderProps> = ({ children, portal }) => {
+  return <PortalContext.Provider value={portal}>{children}</PortalContext.Provider>
+}
+
+export interface PortalProviderProps {
+  /**
+   * 指定 portal 的容器
+   */
+  portal?: UsePortalContext
+}
+
+if (__DEV__) {
+  PortalProvider.displayName = 'PortalProvider'
+}

packages/ui/portal-context/src/index.ts

@@ -0,0 +1,4 @@
+export * from './PortalContext'
+export * from './PortalProvider'
+
+export { PortalProvider as default } from './PortalProvider'

packages/ui/portal-context/stories/basic.stories.tsx

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react'
+import { PortalContext } from '../src'
+
+/**
+ * @title 基础用法
+ */
+export const Basic = () => {
+  useContext(PortalContext)
+
+  return (
+    <>
+      <h1>Basic</h1>
+      <div className="portal-context-basic__wrap"></div>
+    </>
+  )
+}

packages/ui/container-context/stories/index.stories.tsx → packages/ui/portal-context/stories/index.stories.tsx

@@ -3,6 +3,6 @@ import React from 'react'
 export * from './basic.stories'
 
 export default {
-  title: 'Private（暂不对外）/ContainerContext',
+  title: 'Private（暂不对外）/PortalContext',
   decorators: [(story: Function) => <div>{story()}</div>],
 }

packages/ui/preview/src/Preview.tsx

@@ -5,7 +5,7 @@ import { Portal } from '@hi-ui/portal'
 import { Watermark, WatermarkProps } from '@hi-ui/watermark'
 import { CSSTransition } from 'react-transition-group'
 import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state'
-import { HiBaseHTMLProps, useContainerContext } from '@hi-ui/core'
+import { HiBaseHTMLProps, usePortalContext } from '@hi-ui/core'
 import { useLatestCallback } from '@hi-ui/use-latest'
 import {
   ZoomInOutlined,
@@ -53,7 +53,7 @@ export const Preview = forwardRef<HTMLDivElement | null, PreviewProps>(
   ) => {
     const cls = cx(prefixCls, className)
 
-    const globalContainer = useContainerContext()
+    const globalContainer = usePortalContext()?.container
     const container = containerProp ?? globalContainer
 
     const [active, setActive] = useUncontrolledState(defaultCurrent || 0, current, onPreviewChange)

packages/ui/provider/src/Provider.tsx

@@ -3,8 +3,8 @@ import { __DEV__ } from '@hi-ui/env'
 import {
   LocaleProvider,
   LocaleProviderProps,
-  ContainerProvider,
-  ContainerProviderProps,
+  PortalProvider,
+  PortalProviderProps,
 } from '@hi-ui/core'
 import { DesignSystemAccentColorEnum, DesignSystemProps } from './types'
 import { createSystem, extendsTheme } from './theme'
@@ -18,7 +18,7 @@ export const Provider: React.FC<ProviderProps> & { extends: ProviderExtendsFunc
   languages,
   accentColor,
   theme,
-  container,
+  portal,
 }) => {
   /**
    * global css var config
@@ -37,17 +37,17 @@ export const Provider: React.FC<ProviderProps> & { extends: ProviderExtendsFunc
   }, [accentColor, theme])
 
   return (
-    <ContainerProvider container={container}>
+    <PortalProvider portal={portal}>
       <LocaleProvider locale={locale} languages={languages}>
         {children}
       </LocaleProvider>
-    </ContainerProvider>
+    </PortalProvider>
   )
 }
 
 export interface ProviderProps
   extends LocaleProviderProps,
-    ContainerProviderProps,
+    PortalProviderProps,
     ThemeProviderProps {}
 
 interface ThemeProviderProps {