@tendaui/components 1.0.0

package/common/Portal.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef, useMemo, useImperativeHandle } from "react";
+import { createPortal } from "react-dom";
+import { AttachNode, AttachNodeReturnValue } from "../common";
+import { canUseDocument } from "../utils/dom";
+import useConfig from "../hooks/useConfig";
+import useIsomorphicLayoutEffect from "../hooks/useLayoutEffect";
+
+export interface PortalProps {
+  /**
+   * 指定挂载的 HTML 节点, false 为挂载在 body
+   */
+  attach?: React.ReactElement | AttachNode | boolean;
+  /**
+   * 触发元素
+   */
+  triggerNode?: HTMLElement;
+  children: React.ReactNode;
+}
+
+export function getAttach(attach: PortalProps["attach"], triggerNode?: HTMLElement): AttachNodeReturnValue {
+  if (!canUseDocument) return null;
+
+  let el: AttachNodeReturnValue;
+  if (typeof attach === "string") {
+    el = document.querySelector(attach);
+  }
+  if (typeof attach === "function") {
+    el = attach(triggerNode);
+  }
+  if (typeof attach === "object" && attach instanceof window.HTMLElement) {
+    el = attach;
+  }
+
+  // fix el in iframe
+  if (el && el.nodeType === 1) return el;
+
+  return document.body;
+}
+
+const Portal = forwardRef((props: PortalProps, ref) => {
+  const { attach, children, triggerNode } = props;
+  const { classPrefix } = useConfig();
+
+  const container = useMemo(() => {
+    if (!canUseDocument) return null;
+    const el = document.createElement("div");
+    el.className = `${classPrefix}-portal-wrapper`;
+    return el;
+  }, [classPrefix]);
+
+  useIsomorphicLayoutEffect(() => {
+    const parentElement = getAttach(attach, triggerNode);
+    parentElement?.appendChild?.(container);
+
+    return () => {
+      parentElement?.removeChild?.(container);
+    };
+  }, [container, attach, triggerNode]);
+
+  useImperativeHandle(ref, () => container);
+
+  return canUseDocument ? createPortal(children, container) : null;
+});
+
+Portal.displayName = "Portal";
+
+export default Portal;

package/common.ts

@@ -0,0 +1,76 @@
+import React, { CSSProperties, ReactElement, FormEvent } from "react";
+export interface StyledProps {
+  style?: React.CSSProperties;
+  className?: string;
+}
+export type FormResetEvent = FormEvent<HTMLFormElement>;
+export type FormSubmitEvent = FormEvent<HTMLFormElement>;
+export type AttachNodeReturnValue = HTMLElement | Element | Document | null;
+export type AttachNode = CSSSelector | ((triggerNode?: HTMLElement) => AttachNodeReturnValue);
+
+export type CSSSelector = string;
+
+export type Styles = CSSProperties;
+
+export type TNode<T = undefined> = T extends undefined
+  ? React.ReactNode
+  : React.ReactNode | ((props: T) => React.ReactNode);
+
+export type ClassName = string | string[] | { [key: string]: boolean };
+
+export type SizeEnum = "small" | "medium" | "large";
+
+export type ShapeEnum = "circle" | "round";
+
+export type HorizontalAlignEnum = "left" | "center" | "right";
+
+export type VerticalAlignEnum = "top" | "middle" | "bottom";
+
+export type LayoutEnum = "vertical" | "horizontal";
+// TElement 表示 API 只接受传入组件
+export type TElement<T = undefined> = T extends undefined ? ReactElement : (props: T) => ReactElement;
+
+export interface TScroll {
+  /**
+   * 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白
+   * @default 20
+   */
+  bufferSize?: number;
+  /**
+   * 表示每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值
+   * @default false
+   */
+  isFixedRowHeight?: boolean;
+  /**
+   * 行高，不会给元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为每行平均高度，从而使得滚动过程更加平滑
+   */
+  rowHeight?: number;
+  /**
+   * 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动
+   * @default 100
+   */
+  threshold?: number;
+  /**
+   * 滚动加载类型，有两种：懒加载和虚拟滚动。<br />值为 `lazy` ，表示滚动时会进行懒加载，非可视区域内的内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；<br />值为`virtual`时，表示会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，仅渲染该可视区域内的内容，当需要展示的数据量较大时，建议开启该特性
+   */
+  type: "lazy" | "virtual";
+}
+export interface ScrollToElementParams {
+  /** 跳转元素下标 */
+  index?: number;
+  /** 跳转元素距离顶部的距离 */
+  top?: number;
+  /** 单个元素高度非固定场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒 */
+  time?: number;
+  behavior?: "auto" | "smooth";
+}
+
+/**
+ * 通用全局类型
+ * */
+export type PlainObject = { [key: string]: unknown };
+
+/**
+ * @deprecated use TScroll instead
+ */
+export type InfinityScroll = TScroll;

package/config-provider/ConfigContext.tsx

@@ -0,0 +1,21 @@
+import { createContext } from "react";
+import { GlobalConfigProvider } from "./type";
+import Icon from "@tendaui/icons";
+export const defaultClassPrefix = "t";
+
+export const defaultGlobalConfig: GlobalConfigProvider = {
+  classPrefix: defaultClassPrefix,
+  attach: null,
+  form: {},
+  icon: {} as Record<string, typeof Icon>,
+  isContextEffectPlugin: false
+};
+
+export const defaultContext = {
+  globalConfig: defaultGlobalConfig
+};
+
+export type Config = typeof defaultContext;
+
+const ConfigContext = createContext(defaultContext);
+export default ConfigContext;

package/config-provider/ConfigProvider.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+import { mergeWith as _mergeWith, cloneDeep } from "lodash-es";
+import ConfigContext, { defaultGlobalConfig, Config } from "./ConfigContext";
+import { GlobalConfigProvider } from "./type";
+
+export interface ConfigProviderProps extends Config {
+  children: React.ReactNode;
+  /**
+   * 不需要设置全局上下文信息
+   * 不传或者false：表示全局上下文变动，需要更新全局上下文的信息放入到变量中
+   * true：表示全局上下文信息不需要重新设置，
+   * 解决问题：当plugin调用的时候，单独包裹的Provider 也会传全局变量，仅自身可用，多次调用时相互之间不会冲突。
+   * 插件单独的config方法依然可用。自身属性通过props传递
+   * 例如：多处调用message.config 如果每次都更新全局上下文，插件调用时配置会相互影响，导致行为结果跟预期不一致。
+   */
+  notSet?: boolean;
+}
+
+export const merge = (src: GlobalConfigProvider, config: GlobalConfigProvider) =>
+  _mergeWith(src, config, (objValue, srcValue) => {
+    if (Array.isArray(objValue)) {
+      return srcValue;
+    }
+  });
+
+// 存放全局的上下文配置
+let globalConfig = defaultGlobalConfig;
+
+export const getGlobalConfig = (configInfo?: GlobalConfigProvider): GlobalConfigProvider =>
+  merge({ ...globalConfig }, configInfo);
+
+export const setGlobalConfig = (configInfo?: GlobalConfigProvider) => {
+  globalConfig = configInfo;
+};
+
+export default function ConfigProvider({ children, globalConfig, notSet }: ConfigProviderProps) {
+  const defaultData = cloneDeep(defaultGlobalConfig);
+  const mergedGlobalConfig = merge(defaultData, globalConfig);
+
+  useEffect(() => {
+    if (!notSet) {
+      // 需要设置的情况下，当配置信息变化时更新变量中的配置信息，方便plugin调用时获取
+      setGlobalConfig(mergedGlobalConfig);
+    }
+  }, [mergedGlobalConfig, notSet]);
+
+  return <ConfigContext.Provider value={{ globalConfig: mergedGlobalConfig }}>{children}</ConfigContext.Provider>;
+}
+
+ConfigProvider.getGlobalConfig = getGlobalConfig;
+ConfigProvider.setGlobalConfig = setGlobalConfig;
+
+ConfigProvider.displayName = "ConfigProvider";

package/config-provider/index.ts

@@ -0,0 +1,9 @@
+import ConfigProvider, { merge } from "./ConfigProvider";
+import ConfigContext from "./ConfigContext";
+
+export type { Config } from "./ConfigContext";
+export type { ConfigProviderProps } from "./ConfigProvider";
+export * from "./type";
+
+export { ConfigContext, ConfigProvider, merge };
+export default ConfigProvider;