enr 2.0.0-alpha.3 → 2.0.0

package/README.md

@@ -1,4 +1,4 @@
-# enReact UI
+# en React
 
 ## 一、安装
 
@@ -19,7 +19,7 @@ npm install  --save earthnut
 - 在同时配置了 `imgUrl`、`background-image`、`background-color` 时仅会显示一个效果（混合效果暂时并未实现）。优先展示 `imgUrl`，然后是 `background-image`，之后是 `background-color` 。如果都未设置则会展示默认的老式地板砖背景图
 - 尽量不要是使用透明色或是当前的主背景色，否则导致涟漪的效果不明显
 
-开发者提示：**切换背景最好不要通过设置**
+开发者提示：**切换背景最好不要通过设置样式，显示使用 `param.imgUrl` 效果更佳**
 
 ## 三、自定义钩子
 
@@ -27,25 +27,25 @@ npm install  --save earthnut
 
 就是 `useRef` 和 `useEffect` 的简单使用。
 
-```tsx
+```jsx
 import { useTimeId } from 'enr';
 
 export function Home() {
   const timeId = useTimeId();
 
+  const cf = () => {
+    timeId.current = setTimeout(
+      () => console.log('没有感情的按钮 A 打印了一条没有感情的消息'),
+      2500,
+    );
+  };
+
+  const clearTimeoutId = () => clearTimeout(timeId.current);
+
   return (
     <>
-      <button
-        onclick={() => {
-          timeId.current = setTimeout(
-            () => console.log('没有感情的按钮 A 打印了一条没有感情的消息'),
-            2500,
-          );
-        }}
-      >
-        没有感情的按钮 A
-      </button>
-      <button onclick={() => clearTimeout(timeId.current)}>没有感情的按钮 B</button>
+      <button onclick={cf}>没有感情的按钮 A</button>
+      <button onclick={clearTimeoutId}>没有感情的按钮 B</button>
     </>
   );
 }
@@ -112,15 +112,18 @@ export default defineConfig({
 });
 ```
 
-为了防止意外覆盖别人的自定义 css 属性，该样式皆以 `en-` 为前缀。譬如：
+为了防止意外覆盖别人的自定义 css 属性，该样式皆以 `en-` 为前缀。但是如果使用 `en()` 函数导入，可能不需要显式的添加 `en-` 前缀。譬如：
 
 ```tsx
+import { xcn } from 'xcn';
 import { _en } from 'enr';
 
 export function Home() {
   return (
     <div>
-      <p className={_en('text-in-one-line')}>无论我字数多少，仅会会在同一行就行打印。</p>
+      <p className={xcn(_en('text-in-one-line'), 'en-light')}>
+        无论我字数多少，仅会会在同一行就行打印。
+      </p>
     </div>
   );
 }
@@ -130,7 +133,6 @@ export function Home() {
 
 - `css`、`scss` 的直接导出仅是 `common.css`、`common.scss` 的别名
 - `reset.css`、`reset.scss` 不建议在非项目中使用，因为使用 `*` 修改了所有元素为 `border-box` 且定位为 `relative`。旧项目引入该文件可能会覆盖所有的已配置好的盒样式
-- 为了方便使用，包装了
 
 ## 文档
 

package/cjs/components/ThemeContext/index.js

@@ -3,7 +3,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var logProduction = require('../../shared/dist/es/log-production.js');
 var storageStore = require('../../shared/dist/es/storage-store.js');
 var sys = require('../../shared/dist/es/sys.js');
 var cookie = require('../../shared/dist/es/cookie.js');
@@ -64,10 +63,8 @@ function ThemeColorModeProvider({ children, initialTheme }) {
      * @param newColorMode
      */
     const autoChange = (newColorMode) => {
-        logProduction.dog.type = true;
         // 这是当前的
         const _auto = !storageStore.storageStore.theme;
-        logProduction.dog('手动切换当前的模式', _auto);
         if (_auto) {
             cookie.manageCookie.deleteItem('theme');
             storageStore.storageStore.theme = '';
@@ -79,17 +76,13 @@ function ThemeColorModeProvider({ children, initialTheme }) {
             }); // 将值同步到 cookie ，以防止水合有误
         window.document.documentElement.setAttribute('data-theme', newColorMode);
         setAuto(_auto);
-        logProduction.dog.type = true;
     };
     /**
      *  设置指定的色值
      * @param newColorMode
      */
     const setSpecifiedColorMode = (newColorMode) => {
-        logProduction.dog.type = true;
-        logProduction.dog('执行设置当前的主题样式模式', newColorMode);
         if (['light', 'dark'].indexOf(newColorMode) < 0) {
-            logProduction.dog('新设置的模式不正确不允许设置');
             return colorMode;
         }
         storageStore.storageStore.theme = newColorMode; // 将新的主题色值类型保存到本地
@@ -99,7 +92,6 @@ function ThemeColorModeProvider({ children, initialTheme }) {
         // 手动触发副作用
         else
             autoChange(colorMode);
-        logProduction.dog.type = true;
         return newColorMode;
     };
     /**  移除指定，设置为跟随系统  */

package/cjs/components/image/index.js

@@ -23,7 +23,7 @@ const Content = styled.styled.img `
 const Image = react.memo(({ loadingSrc = _default.default, ...props }) => {
     const { resultSrc, loadComplete } = useSrcChange.useSrcChange(props.src ?? loadingSrc);
     const { className, ..._props } = props;
-    return (jsxRuntime.jsx(Content, { src: resultSrc || loadingSrc, className: xcn.xcn(loadComplete === 1 && 'enr-loading', className), ..._props }));
+    return (jsxRuntime.jsx(Content, { src: resultSrc || loadingSrc, className: xcn.xcn(loadComplete === 1 && 'en-loading', className), ..._props }));
 });
 Image.displayName = 'enr-image';
 

package/cjs/components/layout/content.js

@@ -10,7 +10,7 @@ var index = require('../shared/EnLayoutContent/index.js');
  */
 const InternalValueC = props => {
     const { className, ..._props } = props;
-    return (jsxRuntime.jsx(index.LayoutContentContainer, { className: xcn.xcn('enr-layout-main', className), "data-enr-ui": "layout-content", ..._props }));
+    return (jsxRuntime.jsx(index.LayoutContentContainer, { className: xcn.xcn('en-layout-main', className), "data-enr-ui": "layout-content", ..._props }));
 };
 InternalValueC.displayName = 'LayoutContent';
 

package/cjs/components/layout/footer.js

@@ -14,7 +14,7 @@ var index = require('../shared/EnLayoutContent/index.js');
  */
 const InternalValueF = ({ height: _height, ...props }) => {
     const { className, ..._props } = props;
-    return (jsxRuntime.jsx(index.LayoutFooterContent, { className: xcn.xcn('enr-layout-footer', className), "data-enr-ui": "layout-footer", ..._props }));
+    return (jsxRuntime.jsx(index.LayoutFooterContent, { className: xcn.xcn('en-layout-footer', className), "data-enr-ui": "layout-footer", ..._props }));
 };
 InternalValueF.displayName = 'LayoutFooter';
 

package/cjs/components/layout/header.js

@@ -14,7 +14,7 @@ var index = require('../shared/EnLayoutContent/index.js');
  */
 const InternalValueH = ({ height: _height, noSticky: _noSticky, ...props }) => {
     const { className, ..._props } = props;
-    return (jsxRuntime.jsx(index.LayoutHeaderContainer, { className: xcn.xcn(['enr-layout-header'], className), "data-enr-ui": "layout-header", ..._props }));
+    return (jsxRuntime.jsx(index.LayoutHeaderContainer, { className: xcn.xcn(['en-layout-header'], className), "data-enr-ui": "layout-header", ..._props }));
 };
 InternalValueH.displayName = 'LayoutHeader';
 

package/cjs/components/layout/layout.js

@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var aTypeOfJs = require('a-type-of-js');
 var react = require('react');
 var xcn = require('xcn');
-var logProduction = require('../../shared/dist/es/log-production.js');
 var index = require('../shared/EnLayoutContent/index.js');
 var content = require('./content.js');
 var footer = require('./footer.js');
@@ -66,12 +65,9 @@ function isDecimal(value) {
 const Layout = ({ width = '100%', height = '100%', ...props }) => {
     const { style, className, children: _children, ..._props } = props;
     let children = _children;
-    logProduction.dog.type = false;
     /**  TODO ： React 不推荐使用 Children ，尽然当前版本依旧支持 */
     /**  子组件的个数  */
     const childCount = react.Children.count(children);
-    /**  头部 header 是否粘连影响下的样式  */
-    logProduction.dog('子元素个数', childCount);
     /**  头部 header 组件  */
     let Header, 
     /** 当前的样式   */
@@ -97,15 +93,15 @@ const Layout = ({ width = '100%', height = '100%', ...props }) => {
     /**  页脚的高度，缺省值为 `2rem`  */
     footerHeight = '2rem';
     /**  头字符串样式类  */
-    const $header = 'enr-layout-header', 
+    const $header = 'en-layout-header', 
     /**  内容字符串样式类  */
-    $content = 'enr-layout-content', 
+    $content = 'en-layout-content', 
     /**  主区字符串样式类  */
-    $main = 'enr-layout-main', 
+    $main = 'en-layout-main', 
     /**  侧边字符串样式类  */
-    $sidebar = 'enr-layout-sidebar', 
+    $sidebar = 'en-layout-sidebar', 
     /**  页脚字符串样式类  */
-    $footer = 'enr-layout-footer';
+    $footer = 'en-layout-footer';
     /**  由 Fragment 包裹的子元素完成解包  */
     if (childCount === 1) {
         /**  TODO ： React 不推荐使用 Children ，尽然当前版本依旧支持 */
@@ -178,7 +174,7 @@ const Layout = ({ width = '100%', height = '100%', ...props }) => {
         else if (!hasContent && child.type === Layout) {
             /**  组件  */
             const element = child;
-            Content = (jsxRuntime.jsx(index.LayoutContentWrapper, { "data-enr-ui": "layout-content", className: xcn.xcn($main, 'enr-layout-main'), children: element }));
+            Content = (jsxRuntime.jsx(index.LayoutContentWrapper, { "data-enr-ui": "layout-content", className: xcn.xcn($main, 'en-layout-main'), children: element }));
             hasContent = true;
         }
         else if (!hasFooter && child.type === footer.InternalValueF) {
@@ -225,7 +221,6 @@ const Layout = ({ width = '100%', height = '100%', ...props }) => {
     const shouldUseOnlySideLayout = /-only-side$/.test(layoutType);
     /**  确定布局结构  */
     const shouldUseSideFullLayout = /^side.*full/.test(layoutType);
-    logProduction.dog.type = true;
     return (jsxRuntime.jsx(index.EnLayoutContent, { "$headerNoSticky": headerNoSticky, "$layoutType": layoutType, "$header": $header, "$sidebar": $sidebar, "$main": $main, "$content": $content, "$footer": $footer, className: xcn.xcn(className), style: {
             '--layout-self-width': utils.getValue(width),
             '--layout-self-height': utils.getValue(height),

package/cjs/components/ripples/LazyRippleEle.js

@@ -57,6 +57,9 @@ const LazyBackgroundRipple = ({ option, ...props }) => {
         pause() {
             ripples.current?.pause();
         },
+        play() {
+            ripples.current?.play();
+        },
         set(options) {
             if (aTypeOfJs.isUndefined(options))
                 return;

package/cjs/components/ripples/RipplesEle.js

@@ -54,6 +54,9 @@ const BackgroundRipple = ({ option, ...props }) => {
         pause() {
             ripplesRef.current?.pause();
         },
+        play() {
+            ripplesRef.current?.play();
+        },
         set(options) {
             if (aTypeOfJs.isUndefined(options))
                 return;

package/cjs/components/ripples/useOptionUpdate.js

@@ -2,7 +2,6 @@
 
 var aTypeOfJs = require('a-type-of-js');
 var react = require('react');
-var logProduction = require('../../shared/dist/es/log-production.js');
 
 /**
  * 更新参数数据
@@ -10,13 +9,10 @@ var logProduction = require('../../shared/dist/es/log-production.js');
  * @param option
  */
 function useOptionUpdate(ripplesRef, option) {
-    logProduction.dog('执行打印', option);
     const oldOption = react.useRef({ ...option });
     /**  监听数据变化并给值  */
     react.useEffect(() => {
-        logProduction.dog.type = false;
         if (!option || !ripplesRef.current) {
-            logProduction.dog.type = true;
             return;
         }
         Object.keys(ripplesRef.current.defaults).forEach(e => {
@@ -25,15 +21,12 @@ function useOptionUpdate(ripplesRef, option) {
             /**  测试值是否相等  */
             const checkArr = ((v, ov) => (aTypeOfJs.isArray(v) && aTypeOfJs.isArray(ov) && (v.length !== ov.length || v.some((k, i) => k !== ov[i]))) ||
                 ((!aTypeOfJs.isArray(v) || !aTypeOfJs.isArray(ov)) && v !== ov))(value, oldOption.current[e]);
-            logProduction.dog('我在这里', value, oldOption.current[e]);
             if (ripplesRef.current && checkArr) {
-                logProduction.dog('设置值', e, value);
                 // 使用转化后的值
                 oldOption.current[e] = aTypeOfJs.isArray(value) ? [...value] : option[e];
                 ripplesRef.current.set(e, value);
             }
         });
-        logProduction.dog.type = true;
     }, [option]);
 }
 

package/cjs/customHooks/use-xcn/core.js

@@ -12,14 +12,14 @@ var xcn = require('xcn');
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-28 13:03
  * @version 2.0.0-alpha.0
- * @lastModified 2026-01-28 16:03
+ * @lastModified 2026-02-02 11:38
  */
 /**
  *  在 xcn 中使用 enr 样式类
  * @param classNameList
  */
 function _en(...classNameList) {
-    return xcn.xcn(...classNameList.map(e => 'enr-'.concat(e)));
+    return xcn.xcn(...classNameList.map(e => 'en-'.concat(e)));
 }
 
 exports._en = _en;

package/cjs/customHooks/useAnimationFrame.js

@@ -3,7 +3,6 @@
 
 var aTypeOfJs = require('a-type-of-js');
 var react = require('react');
-var logProduction = require('../shared/dist/es/log-production.js');
 
 /**
  * @module @enr/useAnimationFrame
@@ -14,7 +13,7 @@ var logProduction = require('../shared/dist/es/log-production.js');
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:23
  * @version 2.0.0-alpha.0
- * @lastModified 2026-01-25 19:11
+ * @lastModified 2026-02-01 06:12
  */
 /**
  *
@@ -85,13 +84,10 @@ function useAnimationFrame(callback, option = false) {
         isUnmounted: true,
         result: {
             cancel() {
-                logProduction.dog.type = false;
                 const { id } = animationFrame.current;
-                logProduction.dog('执行取消');
                 if (id)
                     window.cancelAnimationFrame(id);
                 animationFrame.current.result.canceled = true;
-                logProduction.dog.type = true;
             },
             canceled: false,
             render() {
@@ -117,38 +113,28 @@ function useAnimationFrame(callback, option = false) {
     }, [callback]);
     // 首次执行
     if (current.immediately && !current.noun && current.result.canceled) {
-        logProduction.dog('重复执行');
         current.noun = true;
         current.result.render();
     }
     react.useEffect(() => {
-        logProduction.dog.type = false;
-        logProduction.dog('回调更替', '此时的是否为第一次执行状态为', current.firstRunEffect, '当前取消执行状态', current.result.canceled);
         /// 非仅执行一次再次这里需要执行
         if (!current.once) {
             if (current.firstRunEffect) {
                 current.result.render();
                 current.firstRunEffect = false; //  标记为不允许执行
-                logProduction.dog.type = false;
-                logProduction.dog('第一次执行', '，执行后状态', current.result.canceled);
             }
             else if (!current.firstRunEffect && !current.result.canceled) {
                 /**  非第一次执行  */
                 current.result.render();
-                logProduction.dog.type = false;
-                logProduction.dog('非首次执行', '，执行后状态', current.result.canceled);
             }
         }
-        logProduction.dog.type = true;
     }, [callback]);
     /// 在组件退出时保证能正确的退出
     react.useEffect(() => {
-        logProduction.dog('执行');
         current.isUnmounted = false;
         return () => {
             current.isUnmounted = true;
             setTimeout(() => {
-                logProduction.dog('退出执行取消');
                 if (current.isUnmounted)
                     current.result.cancel();
             }, 0);