Merge pull request #37 from liuxian496/developer

优化打包后的文件

.gitignore

@@ -15,6 +15,7 @@ package-lock.json
 
 # production
 /build
+/dist
 /storybook-static
 
 # npm

CHANGELOG.md

@@ -1,3 +1,7 @@
+# [0.9.0](https://github.com/liuxian496/litten/compare/v0.8.7...v0.9.0) (2024-04-18)
+
+
+
 ## [0.8.7](https://github.com/liuxian496/litten/compare/v0.8.6...v0.8.7) (2024-04-12)
 
 

package.json

@@ -1,13 +1,10 @@
 {
   "name": "litten",
-  "version": "0.8.7",
+  "version": "0.9.0",
   "private": false,
-  "main": "build/index.js",
-  "module": "build/index.mjs",
-  "types": "build/types/index.d.ts",
-  "files": [
-    "build"
-  ],
+  "module": "dist/index.js",
+  "type": "module",
+  "types": "dist/index.d.ts",
   "keywords": [
     "react",
     "javascript",

src/button.ts

@@ -0,0 +1 @@
+export { Button } from "./components/button/button";

src/checkbox.ts

@@ -0,0 +1 @@
+export { Checkbox } from "./components/checkbox/checkbox";

src/components/buttonBase/buttonBase.types.ts

@@ -1,7 +1,7 @@
 import { ReactNode, MouseEvent } from "react";
 
 import { Color, Mode, Size } from "../../global/enum";
-import { FocusControlProps } from "../control/userControl.types";
+import { FocusControlProps } from "../control/focusControl.types";
 import { DisabledControlProps } from "../control/disabledControl.types";
 
 export interface ButtonBaseProps

src/components/control/checkedControl.types.ts

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { ControlType } from "../../global/enum";
 import { ContentControlProps } from "./contentControl.types";
-import { FocusControlProps } from "./userControl.types";
+import { FocusControlProps } from "./focusControl.types";
 import { DisabledControlProps } from "./disabledControl.types";
 
 export interface CheckedControlProps<T>

src/components/control/contentControl.types.ts

@@ -1,4 +1,4 @@
-import { LittenValue, UserControlProps } from "./control.types";
+import { LittenValue, UserControlProps } from "./userControl.types";
 import { LittenContentChangeEventHandler } from "./littenEvent.types";
 
 export interface ContentControlProps<T = Element, V = LittenValue>

src/components/control/disabledControl.types.ts

@@ -1,4 +1,4 @@
-import { UserControlProps } from "./control.types";
+import { UserControlProps } from "./userControl.types";
 import { LittenDisabledChangeEventHandler } from "./littenEvent.types";
 
 export interface DisabledControlProps extends UserControlProps {

src/components/control/focusControl.tsx

@@ -1,7 +1,7 @@
 import { useState, FocusEvent } from "react";
-import { FocusControlProps } from "./userControl.types";
+import { FocusControlProps } from "./focusControl.types";
 import { FocusState, MouseState } from "../../global/enum";
-import { gettLabeMouseState, setLabeMouseState } from "../formLabel/formLabel";
+import { getLabelMouseState, setLabelMouseState } from "./userControl";
 
 /**
  * 获取用户控件的focused属性对应的值，以及onFocus和onBlur的事件处理函数
@@ -13,11 +13,13 @@ export function useFocusd<T>(props: FocusControlProps<T>) {
     const [focused, setFocused] = useState(false);
 
     function handleFocus(e: FocusEvent<T>) {
-        if (gettLabeMouseState() === MouseState.none) {
+        if (getLabelMouseState() === MouseState.none) {
             setFocused(true);
         } else {
-            setLabeMouseState(MouseState.none);
+            // 避免点击label时，控件显示焦点样式。
+            setLabelMouseState(MouseState.none);
         }
+
 
         onFocus?.(e);
     }

src/components/control/focusControl.types.ts

@@ -0,0 +1,20 @@
+import { FocusEvent } from "react";
+
+import { UserControlProps } from "./userControl.types";
+
+export interface FocusControlProps<T> extends UserControlProps {
+    /**
+     * 设置元素是否可以聚焦
+     */
+    tabIndex?: number;
+    /**
+     *
+     * @returns void
+     */
+    onFocus?: (e: FocusEvent<T>) => void;
+    /**
+     *
+     * @returns void
+     */
+    onBlur?: (e: FocusEvent<T>) => void;
+}

src/components/control/layoutControl.types.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { UserControlProps } from "./control.types";
+import { UserControlProps } from "./userControl.types";
 
 export interface LayoutControlProps extends UserControlProps {
     /**

src/components/control/littenEvent.types.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent } from "react";
 import { ControlType } from "../../global/enum";
-import { LittenValue } from "./control.types";
+import { LittenValue } from "./userControl.types";
 import { TextFieldValue } from "../textField/textField.types";
 
 /**

src/components/control/userControl.tsx

@@ -1,7 +1,27 @@
 import { MutableRefObject, useEffect, useState } from "react";
 import isString  from "lodash/isString";
+
+import { MouseState } from "../../global/enum";
 import { isEmptyString, usePrevious } from "../../global/util";
-import { RelativeRect } from "./control.types";
+import { RelativeRect } from "./userControl.types";
+
+let littenLabelMouseState = MouseState.none;
+
+/**
+ * 获取littenLabelMouseState
+ * @returns 
+ */
+export function getLabelMouseState() {
+    return littenLabelMouseState;
+}
+
+/**
+ * 设置littenLabelMouseState
+ * @param state 待设置的MouseState {MouseState}
+ */
+export function setLabelMouseState(state: MouseState) {
+    littenLabelMouseState = state;
+}
 
 /**
  * 获取控件css前缀

src/components/control/userControl.types.ts

@@ -1,20 +1,90 @@
-import { FocusEvent } from "react";
+import { CSSProperties } from "react";
 
-import { UserControlProps } from "./control.types";
+import {
+    EnableState,
+    FocusState,
+    MouseState,
+    ControlType,
+} from "../../global/enum";
 
-export interface FocusControlProps<T> extends UserControlProps {
+export interface UserControlProps {
     /**
-     * 设置元素是否可以聚焦
+     * 设置自定义控件前缀
      */
-    tabIndex?: number;
+    prefixCls?: string | undefined;
     /**
-     *
-     * @returns void
+     * 设置内联样式
      */
-    onFocus?: (e: FocusEvent<T>) => void;
+    style?: CSSProperties | undefined;
     /**
-     *
-     * @returns void
+     * UserControl类型，代表在litten中的唯一标识
      */
-    onBlur?: (e: FocusEvent<T>) => void;
+    controlType?: ControlType | undefined;
 }
+
+export type StyleValue<T> = T;
+
+export type ResponsiveStyleValue<T> = T | { [key: string]: T | null };
+
+export type LittenValue =
+    | string
+    | ReadonlyArray<string>
+    | number
+    | boolean
+    | undefined;
+
+/**
+ * 极值
+ */
+export type Extremum = {
+    readonly min: number;
+    readonly max: number;
+};
+
+/**
+ * 视觉状态组
+ */
+export interface VisualStates {
+    /**
+     * 设置一个值，该值表示控件的焦点状态。
+     */
+    focusState?: FocusState;
+    /**
+     * 设置一个值，表示是控件的可用状态。
+     */
+    enableState?: EnableState;
+    /**
+     * 设置一个值，该值表示控件的鼠标状态。
+     */
+    mouseState?: MouseState;
+}
+
+/**
+ * 相对于目标DOM节点的位置
+ */
+export type RelativeRect = {
+    /**
+     * 鼠标位置与目标DOM的相对位置的左坐标
+     */
+    readonly left: number;
+    /**
+     * 鼠标位置与目标DOM的相对位置的右坐标
+     */
+    readonly right: number;
+    /**
+     * 鼠标位置与目标DOM的相对位置的上坐标
+     */
+    readonly top: number;
+    /**
+     * 鼠标位置与目标DOM的相对位置的下坐标
+     */
+    readonly bottom: number;
+    /**
+     * 目标节点的宽度
+     */
+    readonly targetWidth: number;
+    /**
+     * 目标节点的高度
+     */
+    readonly targetHeight: number;
+};

src/components/exceptionBoundary/exceptionBoundary.types.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { UserControlProps } from "../control/control.types";
+import { UserControlProps } from "../control/userControl.types";
 
 export interface ExceptionBoundaryProps extends UserControlProps {
     /**

src/components/form/form.tsx

@@ -1,5 +1,4 @@
 import { createContext, useEffect, useState } from "react";
-import "./form.less";
 
 import classnames from "classnames";
 

src/components/form/form.types.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { UserControlProps } from "../control/control.types";
+import { UserControlProps } from "../control/userControl.types";
 
 export interface FormProps extends UserControlProps {
     /**

src/components/form/formControl.tsx

@@ -1,9 +1,8 @@
 import  { useContext, useEffect, useState } from "react";
-import "./form.less";
 
 import { ControlType } from "../../global/enum";
 
-import { LittenValue } from "../control/control.types";
+import { LittenValue } from "../control/userControl.types";
 import { getDefaultValueByDisplayName } from "../control/contentControl";
 import { ContentControlProps } from "../control/contentControl.types";
 import { LittenContentChangeEvent } from "../control/littenEvent.types";