From e74f89c3c9052bb664b6ad8fc884c0a68f24018b Mon Sep 17 00:00:00 2001 From: wanjinping Date: Mon, 16 Dec 2024 15:46:03 +0800 Subject: [PATCH 1/6] feat(container-context): add container package (#3060) --- .changeset/little-rabbits-change.md | 12 +++++ packages/core/core/package.json | 3 +- packages/core/core/src/index.ts | 3 ++ packages/ui/container-context/CHANGELOG.md | 7 +++ packages/ui/container-context/README.md | 11 ++++ .../__tests__/locale-context.test.js | 5 ++ .../ui/container-context/hi-docs.config.mdx | 15 ++++++ packages/ui/container-context/jest.config.js | 1 + packages/ui/container-context/package.json | 54 +++++++++++++++++++ .../src/ContainerContext.tsx | 11 ++++ .../src/ContainerProvider.tsx | 13 +++++ packages/ui/container-context/src/index.ts | 4 ++ .../stories/basic.stories.tsx | 16 ++++++ .../stories/index.stories.tsx | 8 +++ packages/ui/container-context/tsconfig.json | 4 ++ packages/ui/drawer/src/Drawer.tsx | 6 ++- .../ui/drawer/stories/container.stories.tsx | 29 +++++----- packages/ui/hiui/src/index.ts | 9 ++++ packages/ui/loading/src/Loading.tsx | 7 ++- packages/ui/modal/src/Modal.tsx | 7 ++- packages/ui/preview/src/Preview.tsx | 17 +++++- packages/ui/provider/src/Provider.tsx | 21 ++++++-- 22 files changed, 236 insertions(+), 27 deletions(-) create mode 100644 .changeset/little-rabbits-change.md create mode 100644 packages/ui/container-context/CHANGELOG.md create mode 100644 packages/ui/container-context/README.md create mode 100644 packages/ui/container-context/__tests__/locale-context.test.js create mode 100644 packages/ui/container-context/hi-docs.config.mdx create mode 100644 packages/ui/container-context/jest.config.js create mode 100644 packages/ui/container-context/package.json create mode 100644 packages/ui/container-context/src/ContainerContext.tsx create mode 100644 packages/ui/container-context/src/ContainerProvider.tsx create mode 100644 packages/ui/container-context/src/index.ts create mode 100644 packages/ui/container-context/stories/basic.stories.tsx create mode 100644 packages/ui/container-context/stories/index.stories.tsx create mode 100644 packages/ui/container-context/tsconfig.json diff --git a/.changeset/little-rabbits-change.md b/.changeset/little-rabbits-change.md new file mode 100644 index 000000000..bae3e287c --- /dev/null +++ b/.changeset/little-rabbits-change.md @@ -0,0 +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 +--- + +feat(container-context): add container package (#3060) diff --git a/packages/core/core/package.json b/packages/core/core/package.json index 51d288763..5cb6117c0 100644 --- a/packages/core/core/package.json +++ b/packages/core/core/package.json @@ -45,6 +45,7 @@ "devDependencies": {}, "dependencies": { "@hi-ui/core-css": "^4.1.5", - "@hi-ui/locale-context": "^4.0.8" + "@hi-ui/locale-context": "^4.0.8", + "@hi-ui/container-context": "^4.0.0" } } diff --git a/packages/core/core/src/index.ts b/packages/core/core/src/index.ts index e9f7afbbd..2386c22bf 100644 --- a/packages/core/core/src/index.ts +++ b/packages/core/core/src/index.ts @@ -73,3 +73,6 @@ export type HiBaseSizeEnum = ValueOf // 将 core 设为 peer:保证 context 实例引用一致性 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' diff --git a/packages/ui/container-context/CHANGELOG.md b/packages/ui/container-context/CHANGELOG.md new file mode 100644 index 000000000..66989f062 --- /dev/null +++ b/packages/ui/container-context/CHANGELOG.md @@ -0,0 +1,7 @@ +# @hi-ui/locale-context + +## 4.0.0 + +### Patch Changes + +- [#2393](https://github.com/XiaoMi/hiui/pull/2393) [`a7d47168b`](https://github.com/XiaoMi/hiui/commit/a7d47168b519cacfd7b34edf6ba239c5b0b92284) Thanks [@zyprepare](https://github.com/zyprepare)! - 优化多语言获取文案时的空值判断 diff --git a/packages/ui/container-context/README.md b/packages/ui/container-context/README.md new file mode 100644 index 000000000..3e227121e --- /dev/null +++ b/packages/ui/container-context/README.md @@ -0,0 +1,11 @@ +# `@hi-ui/container-context` + +> TODO: description + +## Usage + +``` +const ContainerContext = require('@hi-ui/container-context'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/ui/container-context/__tests__/locale-context.test.js b/packages/ui/container-context/__tests__/locale-context.test.js new file mode 100644 index 000000000..1280afc6d --- /dev/null +++ b/packages/ui/container-context/__tests__/locale-context.test.js @@ -0,0 +1,5 @@ +const ContainerContext = require('../src') + +describe('@hi-ui/container-context', () => { + it('needs tests', () => {}) +}) diff --git a/packages/ui/container-context/hi-docs.config.mdx b/packages/ui/container-context/hi-docs.config.mdx new file mode 100644 index 000000000..dfe717b4c --- /dev/null +++ b/packages/ui/container-context/hi-docs.config.mdx @@ -0,0 +1,15 @@ +# ContainerContext 语言上下文 + +容器设置上下文。 + +## 何时使用 + +组件使用场景中文介绍 + +## 使用示例 + + + +## Props + + diff --git a/packages/ui/container-context/jest.config.js b/packages/ui/container-context/jest.config.js new file mode 100644 index 000000000..e33c14b5d --- /dev/null +++ b/packages/ui/container-context/jest.config.js @@ -0,0 +1 @@ +module.exports = require('../../../jest.config') diff --git a/packages/ui/container-context/package.json b/packages/ui/container-context/package.json new file mode 100644 index 000000000..e0b3e0802 --- /dev/null +++ b/packages/ui/container-context/package.json @@ -0,0 +1,54 @@ +{ + "name": "@hi-ui/container-context", + "version": "4.0.0", + "description": "A sub-package for @hi-ui/hiui.", + "keywords": [], + "author": "HiUI ", + "homepage": "https://github.com/XiaoMi/hiui/tree/master/packages/ui/container-context#readme", + "license": "MIT", + "directories": { + "lib": "lib", + "test": "__tests__" + }, + "files": [ + "lib" + ], + "main": "lib/cjs/index.js", + "module": "lib/esm/index.js", + "types": "lib/types/index.d.ts", + "typings": "lib/types/index.d.ts", + "exports": { + ".": { + "require": "./lib/cjs/index.js", + "default": "./lib/esm/index.js" + } + }, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/XiaoMi/hiui.git" + }, + "scripts": { + "test": "jest", + "clean": "rimraf lib", + "prebuild": "yarn clean", + "build:esm": "hi-build ./src/index.ts --format esm -d ./lib/esm", + "build:cjs": "hi-build ./src/index.ts --format cjs -d ./lib/cjs", + "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types", + "build": "concurrently yarn:build:*" + }, + "bugs": { + "url": "https://github.com/XiaoMi/hiui/issues" + }, + "dependencies": {}, + "peerDependencies": { + "react": ">=16.8.6", + "react-dom": ">=16.8.6" + }, + "devDependencies": { + "react": "^17.0.1", + "react-dom": "^17.0.1" + } +} diff --git a/packages/ui/container-context/src/ContainerContext.tsx b/packages/ui/container-context/src/ContainerContext.tsx new file mode 100644 index 000000000..6d74605f8 --- /dev/null +++ b/packages/ui/container-context/src/ContainerContext.tsx @@ -0,0 +1,11 @@ +import { createContext, useContext } from 'react' + +export const ContainerContext = createContext(null) + +export const useContainerContext = () => { + const context = useContext(ContainerContext) + + return context +} + +export type UseContainerContext = HTMLElement | null | undefined diff --git a/packages/ui/container-context/src/ContainerProvider.tsx b/packages/ui/container-context/src/ContainerProvider.tsx new file mode 100644 index 000000000..2b6cc3edd --- /dev/null +++ b/packages/ui/container-context/src/ContainerProvider.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import { ContainerContext } from './ContainerContext' + +export const ContainerProvider: React.FC = ({ children, container }) => { + return {children} +} + +export interface ContainerProviderProps { + /** + * 指定 portal 的容器 + */ + container?: HTMLElement | null +} diff --git a/packages/ui/container-context/src/index.ts b/packages/ui/container-context/src/index.ts new file mode 100644 index 000000000..34ded8b11 --- /dev/null +++ b/packages/ui/container-context/src/index.ts @@ -0,0 +1,4 @@ +export * from './ContainerContext' +export * from './ContainerProvider' + +export { ContainerProvider as default } from './ContainerProvider' diff --git a/packages/ui/container-context/stories/basic.stories.tsx b/packages/ui/container-context/stories/basic.stories.tsx new file mode 100644 index 000000000..28e1f4795 --- /dev/null +++ b/packages/ui/container-context/stories/basic.stories.tsx @@ -0,0 +1,16 @@ +import React, { useContext } from 'react' +import { ContainerContext } from '../src' + +/** + * @title 基础用法 + */ +export const Basic = () => { + const container = useContext(ContainerContext) + + return ( + <> +

Basic

+
{container}
+ + ) +} diff --git a/packages/ui/container-context/stories/index.stories.tsx b/packages/ui/container-context/stories/index.stories.tsx new file mode 100644 index 000000000..3e14b4e19 --- /dev/null +++ b/packages/ui/container-context/stories/index.stories.tsx @@ -0,0 +1,8 @@ +import React from 'react' + +export * from './basic.stories' + +export default { + title: 'Private(暂不对外)/ContainerContext', + decorators: [(story: Function) =>
{story()}
], +} diff --git a/packages/ui/container-context/tsconfig.json b/packages/ui/container-context/tsconfig.json new file mode 100644 index 000000000..f7bbdb2fe --- /dev/null +++ b/packages/ui/container-context/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../tsconfig.json", + "include": ["./src"] +} diff --git a/packages/ui/drawer/src/Drawer.tsx b/packages/ui/drawer/src/Drawer.tsx index 32c359fc6..067ad1ff9 100644 --- a/packages/ui/drawer/src/Drawer.tsx +++ b/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 } from '@hi-ui/core' +import { HiBaseHTMLProps, useContainerContext } from '@hi-ui/core' import { CSSTransition } from 'react-transition-group' import { Portal } from '@hi-ui/portal' import { useModal, UseModalProps } from '@hi-ui/modal' @@ -33,7 +33,7 @@ export const Drawer = forwardRef( onExited: onExitedProp, title, footer, - container, + container: containerProp, closeIcon = defaultCloseIcon, width, height, @@ -51,6 +51,8 @@ export const Drawer = forwardRef( ) => { const [transitionVisible, transitionVisibleAction] = useToggle(false) const [transitionExited, transitionExitedAction] = useToggle(true) + const globalContainer = useContainerContext() + const container = containerProp ?? globalContainer const { rootProps, getModalProps, getModalWrapperProps } = useModal({ ...rest, diff --git a/packages/ui/drawer/stories/container.stories.tsx b/packages/ui/drawer/stories/container.stories.tsx index e5aa2c79b..1e65305fa 100644 --- a/packages/ui/drawer/stories/container.stories.tsx +++ b/packages/ui/drawer/stories/container.stories.tsx @@ -1,6 +1,7 @@ import React from 'react' import Drawer from '../src' import Button from '@hi-ui/button' +import Provider from '@hi-ui/provider' /** * @title 局部容器抽屉 @@ -31,19 +32,21 @@ export const Container = () => { zIndex: 0, }} > - - setVisible(false)} - > - 我是一段文字,也可以是表单、表格、步骤条等等 - + + + setVisible(false)} + > + 我是一段文字,也可以是表单、表格、步骤条等等 + + ) diff --git a/packages/ui/hiui/src/index.ts b/packages/ui/hiui/src/index.ts index 84635c55c..7a838dc8b 100644 --- a/packages/ui/hiui/src/index.ts +++ b/packages/ui/hiui/src/index.ts @@ -93,6 +93,15 @@ export * from '@hi-ui/locale-context' */ export { default as LocaleContext } from '@hi-ui/locale-context' +/** + * @deprecated Please use the `Provider` instead of it. + */ +export * from '@hi-ui/container-context' +/** + * @deprecated Please use the `Provider` instead of it. + */ +export { default as ContainerContext } from '@hi-ui/container-context' + export * from '@hi-ui/menu' export { default as Menu } from '@hi-ui/menu' diff --git a/packages/ui/loading/src/Loading.tsx b/packages/ui/loading/src/Loading.tsx index bb80c766d..866ab3ee3 100644 --- a/packages/ui/loading/src/Loading.tsx +++ b/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 } from '@hi-ui/core' +import { HiBaseHTMLProps, HiBaseSizeEnum, useContainerContext } from '@hi-ui/core' import { useLatestCallback } from '@hi-ui/use-latest' import Spinner from '@hi-ui/spinner' import { useLoading } from './use-loading' @@ -18,7 +18,7 @@ export const Loading = forwardRef( className, children, role = _role, - container, + container: containerProp, content, visible = true, full = false, @@ -38,6 +38,9 @@ export const Loading = forwardRef( ) => { const { internalVisible, setInternalVisible } = useLoading({ visible, delay }) + const globalContainer = useContainerContext() + const container = containerProp ?? globalContainer + useImperativeHandle(innerRef, () => ({ close: () => setInternalVisible(false), })) diff --git a/packages/ui/modal/src/Modal.tsx b/packages/ui/modal/src/Modal.tsx index b37e21984..7ce43fddb 100644 --- a/packages/ui/modal/src/Modal.tsx +++ b/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 } from '@hi-ui/core' +import { HiBaseHTMLProps, HiBaseSizeEnum, useLocaleContext, useContainerContext } from '@hi-ui/core' import { __DEV__ } from '@hi-ui/env' import { CSSTransition } from 'react-transition-group' import { Portal } from '@hi-ui/portal' @@ -57,7 +57,7 @@ export const Modal = forwardRef( onClose, onCancel, onConfirm, - container, + container: containerProp, closeIcon = defaultCloseIcon, showMask = true, showHeaderDivider = true, @@ -74,6 +74,9 @@ export const Modal = forwardRef( ) => { const i18n = useLocaleContext() + const globalContainer = useContainerContext() + const container = containerProp ?? globalContainer + const cancelText = isUndef(cancelTextProp) ? i18n.get('modal.cancelText') : cancelTextProp const confirmText = isUndef(confirmTextProp) ? i18n.get('modal.confirmText') : confirmTextProp diff --git a/packages/ui/preview/src/Preview.tsx b/packages/ui/preview/src/Preview.tsx index 8f7bf5ae1..561551fc5 100644 --- a/packages/ui/preview/src/Preview.tsx +++ b/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 } from '@hi-ui/core' +import { HiBaseHTMLProps, useContainerContext } from '@hi-ui/core' import { useLatestCallback } from '@hi-ui/use-latest' import { ZoomInOutlined, @@ -46,11 +46,16 @@ export const Preview = forwardRef( src, watermarkProps, disabledDownload = false, + container: containerProp, + disabledPortal = false, }, ref ) => { const cls = cx(prefixCls, className) + const globalContainer = useContainerContext() + const container = containerProp ?? globalContainer + const [active, setActive] = useUncontrolledState(defaultCurrent || 0, current, onPreviewChange) const [isMoving, setIsMoving] = useState(false) @@ -199,7 +204,7 @@ export const Preview = forwardRef( ) return ( - +
, 'onError'> { * 当前预览图片索引(受控) */ onPreviewChange?: (current: number) => void + /** + * 指定 portal 的容器 + */ + container?: HTMLElement | null + /** + * 是否禁用 portal + */ + disabledPortal?: boolean } if (__DEV__) { diff --git a/packages/ui/provider/src/Provider.tsx b/packages/ui/provider/src/Provider.tsx index 34c307e14..f76d730c6 100644 --- a/packages/ui/provider/src/Provider.tsx +++ b/packages/ui/provider/src/Provider.tsx @@ -1,6 +1,11 @@ import React, { useEffect } from 'react' import { __DEV__ } from '@hi-ui/env' -import { LocaleProvider, LocaleProviderProps } from '@hi-ui/core' +import { + LocaleProvider, + LocaleProviderProps, + ContainerProvider, + ContainerProviderProps, +} from '@hi-ui/core' import { DesignSystemAccentColorEnum, DesignSystemProps } from './types' import { createSystem, extendsTheme } from './theme' import { getAccentColorTheme } from './accent-color' @@ -13,6 +18,7 @@ export const Provider: React.FC & { extends: ProviderExtendsFunc languages, accentColor, theme, + container, }) => { /** * global css var config @@ -31,13 +37,18 @@ export const Provider: React.FC & { extends: ProviderExtendsFunc }, [accentColor, theme]) return ( - - {children} - + + + {children} + + ) } -export interface ProviderProps extends LocaleProviderProps, ThemeProviderProps {} +export interface ProviderProps + extends LocaleProviderProps, + ContainerProviderProps, + ThemeProviderProps {} interface ThemeProviderProps { /** From b163677a297d154f8979b84de6919873c7fe8ee6 Mon Sep 17 00:00:00 2001 From: wanjinping Date: Mon, 16 Dec 2024 21:08:50 +0800 Subject: [PATCH 2/6] =?UTF-8?q?chore(container-context):=20=E8=A7=84?= =?UTF-8?q?=E8=8C=83=E4=BB=A3=E7=A0=81=20(#3060)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/drawer/stories/container.stories.tsx | 29 +++++++++---------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/ui/drawer/stories/container.stories.tsx b/packages/ui/drawer/stories/container.stories.tsx index 1e65305fa..e5aa2c79b 100644 --- a/packages/ui/drawer/stories/container.stories.tsx +++ b/packages/ui/drawer/stories/container.stories.tsx @@ -1,7 +1,6 @@ import React from 'react' import Drawer from '../src' import Button from '@hi-ui/button' -import Provider from '@hi-ui/provider' /** * @title 局部容器抽屉 @@ -32,21 +31,19 @@ export const Container = () => { zIndex: 0, }} > - - - setVisible(false)} - > - 我是一段文字,也可以是表单、表格、步骤条等等 - - + + setVisible(false)} + > + 我是一段文字,也可以是表单、表格、步骤条等等 +
) From 51cdccc86cc1bac083af6ec4c4d4088e1c87a2f5 Mon Sep 17 00:00:00 2001 From: wanjinping Date: Tue, 17 Dec 2024 16:42:45 +0800 Subject: [PATCH 3/6] =?UTF-8?q?chore(portal-context):=20=E6=94=B9=E5=86=99?= =?UTF-8?q?=E5=90=8D=E5=AD=97=E4=BB=A3=E7=A0=81=20(#3060)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/little-rabbits-change.md | 16 ++++++++-------- packages/core/core/package.json | 2 +- packages/core/core/src/index.ts | 4 ++-- packages/ui/container-context/CHANGELOG.md | 7 ------- packages/ui/container-context/README.md | 11 ----------- .../__tests__/locale-context.test.js | 5 ----- .../container-context/src/ContainerContext.tsx | 11 ----------- .../src/ContainerProvider.tsx | 13 ------------- packages/ui/container-context/src/index.ts | 4 ---- .../stories/basic.stories.tsx | 16 ---------------- packages/ui/drawer/src/Drawer.tsx | 4 ++-- packages/ui/hiui/src/index.ts | 4 ++-- packages/ui/loading/src/Loading.tsx | 4 ++-- packages/ui/modal/src/Modal.tsx | 4 ++-- packages/ui/portal-context/README.md | 11 +++++++++++ .../__tests__/portal-context.test.js | 5 +++++ .../hi-docs.config.mdx | 2 +- .../jest.config.js | 0 .../package.json | 2 +- .../ui/portal-context/src/PortalContext.tsx | 11 +++++++++++ .../ui/portal-context/src/PortalProvider.tsx | 18 ++++++++++++++++++ packages/ui/portal-context/src/index.ts | 4 ++++ .../portal-context/stories/basic.stories.tsx | 16 ++++++++++++++++ .../stories/index.stories.tsx | 2 +- .../tsconfig.json | 0 packages/ui/preview/src/Preview.tsx | 4 ++-- packages/ui/provider/src/Provider.tsx | 12 ++++++------ 27 files changed, 95 insertions(+), 97 deletions(-) delete mode 100644 packages/ui/container-context/CHANGELOG.md delete mode 100644 packages/ui/container-context/README.md delete mode 100644 packages/ui/container-context/__tests__/locale-context.test.js delete mode 100644 packages/ui/container-context/src/ContainerContext.tsx delete mode 100644 packages/ui/container-context/src/ContainerProvider.tsx delete mode 100644 packages/ui/container-context/src/index.ts delete mode 100644 packages/ui/container-context/stories/basic.stories.tsx create mode 100644 packages/ui/portal-context/README.md create mode 100644 packages/ui/portal-context/__tests__/portal-context.test.js rename packages/ui/{container-context => portal-context}/hi-docs.config.mdx (81%) rename packages/ui/{container-context => portal-context}/jest.config.js (100%) rename packages/ui/{container-context => portal-context}/package.json (97%) create mode 100644 packages/ui/portal-context/src/PortalContext.tsx create mode 100644 packages/ui/portal-context/src/PortalProvider.tsx create mode 100644 packages/ui/portal-context/src/index.ts create mode 100644 packages/ui/portal-context/stories/basic.stories.tsx rename packages/ui/{container-context => portal-context}/stories/index.stories.tsx (71%) rename packages/ui/{container-context => portal-context}/tsconfig.json (100%) diff --git a/.changeset/little-rabbits-change.md b/.changeset/little-rabbits-change.md index bae3e287c..b52375da6 100644 --- a/.changeset/little-rabbits-change.md +++ b/.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) diff --git a/packages/core/core/package.json b/packages/core/core/package.json index 5cb6117c0..7db5b834e 100644 --- a/packages/core/core/package.json +++ b/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" } } diff --git a/packages/core/core/src/index.ts b/packages/core/core/src/index.ts index 2386c22bf..62fb093b8 100644 --- a/packages/core/core/src/index.ts +++ b/packages/core/core/src/index.ts @@ -74,5 +74,5 @@ export type HiBaseSizeEnum = ValueOf 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' diff --git a/packages/ui/container-context/CHANGELOG.md b/packages/ui/container-context/CHANGELOG.md deleted file mode 100644 index 66989f062..000000000 --- a/packages/ui/container-context/CHANGELOG.md +++ /dev/null @@ -1,7 +0,0 @@ -# @hi-ui/locale-context - -## 4.0.0 - -### Patch Changes - -- [#2393](https://github.com/XiaoMi/hiui/pull/2393) [`a7d47168b`](https://github.com/XiaoMi/hiui/commit/a7d47168b519cacfd7b34edf6ba239c5b0b92284) Thanks [@zyprepare](https://github.com/zyprepare)! - 优化多语言获取文案时的空值判断 diff --git a/packages/ui/container-context/README.md b/packages/ui/container-context/README.md deleted file mode 100644 index 3e227121e..000000000 --- a/packages/ui/container-context/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# `@hi-ui/container-context` - -> TODO: description - -## Usage - -``` -const ContainerContext = require('@hi-ui/container-context'); - -// TODO: DEMONSTRATE API -``` diff --git a/packages/ui/container-context/__tests__/locale-context.test.js b/packages/ui/container-context/__tests__/locale-context.test.js deleted file mode 100644 index 1280afc6d..000000000 --- a/packages/ui/container-context/__tests__/locale-context.test.js +++ /dev/null @@ -1,5 +0,0 @@ -const ContainerContext = require('../src') - -describe('@hi-ui/container-context', () => { - it('needs tests', () => {}) -}) diff --git a/packages/ui/container-context/src/ContainerContext.tsx b/packages/ui/container-context/src/ContainerContext.tsx deleted file mode 100644 index 6d74605f8..000000000 --- a/packages/ui/container-context/src/ContainerContext.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createContext, useContext } from 'react' - -export const ContainerContext = createContext(null) - -export const useContainerContext = () => { - const context = useContext(ContainerContext) - - return context -} - -export type UseContainerContext = HTMLElement | null | undefined diff --git a/packages/ui/container-context/src/ContainerProvider.tsx b/packages/ui/container-context/src/ContainerProvider.tsx deleted file mode 100644 index 2b6cc3edd..000000000 --- a/packages/ui/container-context/src/ContainerProvider.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' -import { ContainerContext } from './ContainerContext' - -export const ContainerProvider: React.FC = ({ children, container }) => { - return {children} -} - -export interface ContainerProviderProps { - /** - * 指定 portal 的容器 - */ - container?: HTMLElement | null -} diff --git a/packages/ui/container-context/src/index.ts b/packages/ui/container-context/src/index.ts deleted file mode 100644 index 34ded8b11..000000000 --- a/packages/ui/container-context/src/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './ContainerContext' -export * from './ContainerProvider' - -export { ContainerProvider as default } from './ContainerProvider' diff --git a/packages/ui/container-context/stories/basic.stories.tsx b/packages/ui/container-context/stories/basic.stories.tsx deleted file mode 100644 index 28e1f4795..000000000 --- a/packages/ui/container-context/stories/basic.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { useContext } from 'react' -import { ContainerContext } from '../src' - -/** - * @title 基础用法 - */ -export const Basic = () => { - const container = useContext(ContainerContext) - - return ( - <> -

Basic

-
{container}
- - ) -} diff --git a/packages/ui/drawer/src/Drawer.tsx b/packages/ui/drawer/src/Drawer.tsx index 067ad1ff9..0e9178545 100644 --- a/packages/ui/drawer/src/Drawer.tsx +++ b/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( ) => { 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({ diff --git a/packages/ui/hiui/src/index.ts b/packages/ui/hiui/src/index.ts index 7a838dc8b..85064388b 100644 --- a/packages/ui/hiui/src/index.ts +++ b/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' diff --git a/packages/ui/loading/src/Loading.tsx b/packages/ui/loading/src/Loading.tsx index 866ab3ee3..e71c49e11 100644 --- a/packages/ui/loading/src/Loading.tsx +++ b/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( ) => { const { internalVisible, setInternalVisible } = useLoading({ visible, delay }) - const globalContainer = useContainerContext() + const globalContainer = usePortalContext()?.container const container = containerProp ?? globalContainer useImperativeHandle(innerRef, () => ({ diff --git a/packages/ui/modal/src/Modal.tsx b/packages/ui/modal/src/Modal.tsx index 7ce43fddb..f3115b0e0 100644 --- a/packages/ui/modal/src/Modal.tsx +++ b/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( ) => { const i18n = useLocaleContext() - const globalContainer = useContainerContext() + const globalContainer = usePortalContext()?.container const container = containerProp ?? globalContainer const cancelText = isUndef(cancelTextProp) ? i18n.get('modal.cancelText') : cancelTextProp diff --git a/packages/ui/portal-context/README.md b/packages/ui/portal-context/README.md new file mode 100644 index 000000000..4dc431622 --- /dev/null +++ b/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 +``` diff --git a/packages/ui/portal-context/__tests__/portal-context.test.js b/packages/ui/portal-context/__tests__/portal-context.test.js new file mode 100644 index 000000000..3f29b2da5 --- /dev/null +++ b/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', () => {}) +}) diff --git a/packages/ui/container-context/hi-docs.config.mdx b/packages/ui/portal-context/hi-docs.config.mdx similarity index 81% rename from packages/ui/container-context/hi-docs.config.mdx rename to packages/ui/portal-context/hi-docs.config.mdx index dfe717b4c..9eb1b9a64 100644 --- a/packages/ui/container-context/hi-docs.config.mdx +++ b/packages/ui/portal-context/hi-docs.config.mdx @@ -1,4 +1,4 @@ -# ContainerContext 语言上下文 +# PortalContext 上下文 容器设置上下文。 diff --git a/packages/ui/container-context/jest.config.js b/packages/ui/portal-context/jest.config.js similarity index 100% rename from packages/ui/container-context/jest.config.js rename to packages/ui/portal-context/jest.config.js diff --git a/packages/ui/container-context/package.json b/packages/ui/portal-context/package.json similarity index 97% rename from packages/ui/container-context/package.json rename to packages/ui/portal-context/package.json index e0b3e0802..031673f4a 100644 --- a/packages/ui/container-context/package.json +++ b/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": [], diff --git a/packages/ui/portal-context/src/PortalContext.tsx b/packages/ui/portal-context/src/PortalContext.tsx new file mode 100644 index 000000000..cc1ad4650 --- /dev/null +++ b/packages/ui/portal-context/src/PortalContext.tsx @@ -0,0 +1,11 @@ +import { createContext, useContext } from 'react' + +export const PortalContext = createContext(null) + +export const usePortalContext = () => { + const context = useContext(PortalContext) + + return context +} + +export type UsePortalContext = { container?: HTMLElement | null | undefined } | null | undefined diff --git a/packages/ui/portal-context/src/PortalProvider.tsx b/packages/ui/portal-context/src/PortalProvider.tsx new file mode 100644 index 000000000..b07ac6fa5 --- /dev/null +++ b/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 = ({ children, portal }) => { + return {children} +} + +export interface PortalProviderProps { + /** + * 指定 portal 的容器 + */ + portal?: UsePortalContext +} + +if (__DEV__) { + PortalProvider.displayName = 'PortalProvider' +} diff --git a/packages/ui/portal-context/src/index.ts b/packages/ui/portal-context/src/index.ts new file mode 100644 index 000000000..b8bb08a2c --- /dev/null +++ b/packages/ui/portal-context/src/index.ts @@ -0,0 +1,4 @@ +export * from './PortalContext' +export * from './PortalProvider' + +export { PortalProvider as default } from './PortalProvider' diff --git a/packages/ui/portal-context/stories/basic.stories.tsx b/packages/ui/portal-context/stories/basic.stories.tsx new file mode 100644 index 000000000..798c4a5b4 --- /dev/null +++ b/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 ( + <> +

Basic

+
+ + ) +} diff --git a/packages/ui/container-context/stories/index.stories.tsx b/packages/ui/portal-context/stories/index.stories.tsx similarity index 71% rename from packages/ui/container-context/stories/index.stories.tsx rename to packages/ui/portal-context/stories/index.stories.tsx index 3e14b4e19..a856fc7e8 100644 --- a/packages/ui/container-context/stories/index.stories.tsx +++ b/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) =>
{story()}
], } diff --git a/packages/ui/container-context/tsconfig.json b/packages/ui/portal-context/tsconfig.json similarity index 100% rename from packages/ui/container-context/tsconfig.json rename to packages/ui/portal-context/tsconfig.json diff --git a/packages/ui/preview/src/Preview.tsx b/packages/ui/preview/src/Preview.tsx index 561551fc5..608368fd5 100644 --- a/packages/ui/preview/src/Preview.tsx +++ b/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( ) => { const cls = cx(prefixCls, className) - const globalContainer = useContainerContext() + const globalContainer = usePortalContext()?.container const container = containerProp ?? globalContainer const [active, setActive] = useUncontrolledState(defaultCurrent || 0, current, onPreviewChange) diff --git a/packages/ui/provider/src/Provider.tsx b/packages/ui/provider/src/Provider.tsx index f76d730c6..fdb1b4960 100644 --- a/packages/ui/provider/src/Provider.tsx +++ b/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 & { extends: ProviderExtendsFunc languages, accentColor, theme, - container, + portal, }) => { /** * global css var config @@ -37,17 +37,17 @@ export const Provider: React.FC & { extends: ProviderExtendsFunc }, [accentColor, theme]) return ( - + {children} - + ) } export interface ProviderProps extends LocaleProviderProps, - ContainerProviderProps, + PortalProviderProps, ThemeProviderProps {} interface ThemeProviderProps { From d238be620bce37856708b90b204ae010d89edbb5 Mon Sep 17 00:00:00 2001 From: wanjinping Date: Tue, 17 Dec 2024 17:20:56 +0800 Subject: [PATCH 4/6] =?UTF-8?q?chore(portal-context):=20=E8=A7=84=E8=8C=83?= =?UTF-8?q?=E8=AE=B0=E5=BD=95(#3060)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/little-rabbits-change.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/little-rabbits-change.md b/.changeset/little-rabbits-change.md index b52375da6..969a97d3a 100644 --- a/.changeset/little-rabbits-change.md +++ b/.changeset/little-rabbits-change.md @@ -9,4 +9,4 @@ "@hi-ui/provider": minor --- -feat(container-context): add container package (#3060) +feat(portal-context): Provider 增加 portal 参数,支持配置全局 container (#3060 ) From 8463a12ce91660a9387d2b7c3ec2ea78efcb691a Mon Sep 17 00:00:00 2001 From: wanjinping Date: Tue, 17 Dec 2024 17:24:44 +0800 Subject: [PATCH 5/6] =?UTF-8?q?chore(portal-context):=20=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E5=A4=9A=E4=BD=99=E4=BB=A3=E7=A0=81(#3060)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/hiui/src/index.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/ui/hiui/src/index.ts b/packages/ui/hiui/src/index.ts index 85064388b..84635c55c 100644 --- a/packages/ui/hiui/src/index.ts +++ b/packages/ui/hiui/src/index.ts @@ -93,15 +93,6 @@ export * from '@hi-ui/locale-context' */ export { default as LocaleContext } from '@hi-ui/locale-context' -/** - * @deprecated Please use the `Provider` instead of it. - */ -export * from '@hi-ui/portal-context' -/** - * @deprecated Please use the `Provider` instead of it. - */ -export { default as PortalContext } from '@hi-ui/portal-context' - export * from '@hi-ui/menu' export { default as Menu } from '@hi-ui/menu' From fd397b94af30afd0ac3440579f0792fe4f481b80 Mon Sep 17 00:00:00 2001 From: wanjinping Date: Tue, 17 Dec 2024 17:53:00 +0800 Subject: [PATCH 6/6] =?UTF-8?q?chore(portal-context):=20=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E5=A4=9A=E4=BD=99=E7=A9=BA=E6=A0=BC(#3060)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/little-rabbits-change.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/little-rabbits-change.md b/.changeset/little-rabbits-change.md index 969a97d3a..63083e1ed 100644 --- a/.changeset/little-rabbits-change.md +++ b/.changeset/little-rabbits-change.md @@ -9,4 +9,4 @@ "@hi-ui/provider": minor --- -feat(portal-context): Provider 增加 portal 参数,支持配置全局 container (#3060 ) +feat(portal-context): Provider 增加 portal 参数,支持配置全局 container (#3060)