@tarojs/components-react 4.1.5 → 4.1.6-beta.1

package/dist/components/image/index.js

@@ -2,9 +2,41 @@ import { __rest } from 'tslib';
 import './style/index.css.js';
 import classNames from 'classnames';
 import { createForwardRefComponent } from '../../utils/index.js';
-import { useRef, useState, useCallback, useEffect } from '../../utils/hooks.react.js';
+import { useRef, useState, useEffect, useCallback } from '../../utils/hooks.react.js';
 import { jsx } from 'react/jsx-runtime';
 
+const LEGO_CDN_URL = 'http://ossin.jd.com/swm-plus/h5Tag/tag.js';
+// 检查CDN脚本是否已加载
+const isLegoScriptLoaded = () => {
+  return document.querySelector(`script[src="${LEGO_CDN_URL}"]`) !== null;
+};
+// 插入CDN脚本
+const insertLegoScript = () => {
+  if (isLegoScriptLoaded()) return;
+  const script = document.createElement('script');
+  script.type = 'module';
+  script.src = LEGO_CDN_URL;
+  document.head.appendChild(script);
+};
+// 解析lego协议URL
+const parseLegoUrl = src => {
+  if (!src.startsWith('lego://')) return null;
+  try {
+    // 移除 'lego://' 前缀
+    const urlWithoutProtocol = src.substring(7);
+    // 分割tagId和参数
+    const [tagId, params] = urlWithoutProtocol.split('?');
+    // 解析参数
+    const text = params ? new URLSearchParams(params).get('text') || '' : '';
+    return {
+      tagId,
+      text
+    };
+  } catch (error) {
+    console.warn('Failed to parse lego URL:', src, error);
+    return null;
+  }
+};
 function Image(props) {
   const imgRef = useRef(null);
   const observer = useRef({});
@@ -19,7 +51,18 @@ function Image(props) {
       imgProps,
       forwardedRef
     } = props,
-    reset = __rest(props, ["className", "style", "src", "mode", "onError", "lazyLoad", "imgProps", "forwardedRef"]);
+    reset = __rest(props
+    // 检查是否为lego模式
+    , ["className", "style", "src", "mode", "onError", "lazyLoad", "imgProps", "forwardedRef"]);
+  // 检查是否为lego模式
+  const legoData = parseLegoUrl(src);
+  const isLegoMode = legoData !== null;
+  // 如果是lego模式，确保CDN脚本已加载
+  useEffect(() => {
+    if (isLegoMode) {
+      insertLegoScript();
+    }
+  }, [isLegoMode]);
   const cls = classNames('taro-img', {
     'taro-img__widthfix': mode === 'widthFix'
   }, className);
@@ -58,6 +101,21 @@ function Image(props) {
       (_b = (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
     };
   }, [lazyLoad, src]);
+  // 如果是lego模式，渲染canvas-tag
+  if (isLegoMode && legoData) {
+    return /*#__PURE__*/jsx("div", {
+      className: cls,
+      style: style,
+      ref: forwardedRef,
+      ...reset,
+      children: /*#__PURE__*/jsx("canvas-tag", {
+        tagId: legoData.tagId,
+        text: legoData.text,
+        ...imgProps
+      })
+    });
+  }
+  // 普通图片模式
   return /*#__PURE__*/jsx("div", {
     className: cls,
     style: style,

package/dist/components/image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/image/index.tsx"],"sourcesContent":["import './style/index.css'\n\nimport classNames from 'classnames'\n\nimport { createForwardRefComponent } from '../../utils'\nimport { useCallback, useEffect, useRef, useState } from '../../utils/hooks'\n\nimport type React from 'react'\n\ninterface IProps extends React.HTMLAttributes<HTMLDivElement> {\n  src: string\n  mode: string\n  onError: () => void\n  onLoad: (e) => void\n  lazyLoad?: boolean\n  imgProps?: Record<string, any>\n  forwardedRef?: React.MutableRefObject<HTMLDivElement>\n}\n\nfunction Image (props: IProps) {\n  const imgRef = useRef<HTMLImageElement | null>(null)\n  const observer = useRef<Partial<IntersectionObserver>>({})\n  const [, setIsLoaded] = useState(false)\n  const {\n    className,\n    style = {},\n    src,\n    mode,\n    onError,\n    lazyLoad,\n    imgProps,\n    forwardedRef,\n    ...reset\n  } = props\n  const cls = classNames(\n    'taro-img',\n    {\n      'taro-img__widthfix': mode === 'widthFix'\n    },\n    className\n  )\n  const imgCls = classNames(\n    'taro-img__mode-' +\n      (mode || 'scaleToFill').toLowerCase().replace(/\\s/g, '')\n  )\n\n  const imageOnLoad = useCallback((e) => {\n    const { onLoad } = props\n    Object.defineProperty(e, 'detail', {\n      enumerable: true,\n      writable: true,\n      value: {\n        width: e.target.width,\n        height: e.target.height\n      }\n    })\n\n    onLoad && onLoad(e)\n  }, [props])\n\n  useEffect(() => {\n    if (lazyLoad) {\n      observer.current = new IntersectionObserver(\n        entries => {\n          // 异步 api 关系\n          if (entries[entries.length - 1].isIntersecting) {\n            setIsLoaded(true)\n            // findDOMNode(this).children[0].src = src\n            imgRef.current!.src = src\n          }\n        },\n        {\n          rootMargin: '300px 0px'\n        }\n      )\n      observer.current.observe?.(imgRef.current!)\n    }\n\n    return () => {\n      observer.current?.disconnect?.()\n    }\n  }, [lazyLoad, src])\n\n  return (\n    <div className={cls} style={style} ref={forwardedRef} {...reset}>\n      {lazyLoad ? (\n        <img\n          ref={img => (imgRef.current = img)}\n          className={imgCls}\n          data-src={src}\n          onLoad={imageOnLoad}\n          onError={onError}\n          {...imgProps}\n        />\n      ) : (\n        <img\n          ref={img => (imgRef.current = img)}\n          className={imgCls}\n          src={src}\n          onLoad={imageOnLoad}\n          onError={onError}\n          {...imgProps}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default createForwardRefComponent(Image)\n"],"names":["Image","props","imgRef","useRef","observer","setIsLoaded","useState","className","style","src","mode","onError","lazyLoad","imgProps","forwardedRef","reset","__rest","cls","classNames","imgCls","toLowerCase","replace","imageOnLoad","useCallback","e","onLoad","Object","defineProperty","enumerable","writable","value","width","target","height","useEffect","current","IntersectionObserver","entries","length","isIntersecting","rootMargin","_b","_a","observe","call","disconnect","_jsx","ref","children","img","createForwardRefComponent"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/image/index.tsx"],"sourcesContent":["import './style/index.css'\n\nimport classNames from 'classnames'\n\nimport { createForwardRefComponent } from '../../utils'\nimport { useCallback, useEffect, useRef, useState } from '../../utils/hooks'\n\nimport type React from 'react'\n\ninterface IProps extends React.HTMLAttributes<HTMLDivElement> {\n  src: string\n  mode: string\n  onError: () => void\n  onLoad: (e) => void\n  lazyLoad?: boolean\n  imgProps?: Record<string, any>\n  forwardedRef?: React.MutableRefObject<HTMLDivElement>\n}\n\n// CDN脚本URL\nconst LEGO_CDN_URL = 'http://ossin.jd.com/swm-plus/h5Tag/tag.js'\n\n// 检查CDN脚本是否已加载\nconst isLegoScriptLoaded = (): boolean => {\n  return document.querySelector(`script[src=\"${LEGO_CDN_URL}\"]`) !== null\n}\n\n// 插入CDN脚本\nconst insertLegoScript = (): void => {\n  if (isLegoScriptLoaded()) return\n\n  const script = document.createElement('script')\n  script.type = 'module'\n  script.src = LEGO_CDN_URL\n  document.head.appendChild(script)\n}\n\n// 解析lego协议URL\nconst parseLegoUrl = (src: string): { tagId: string, text: string } | null => {\n  if (!src.startsWith('lego://')) return null\n\n  try {\n    // 移除 'lego://' 前缀\n    const urlWithoutProtocol = src.substring(7)\n\n    // 分割tagId和参数\n    const [tagId, params] = urlWithoutProtocol.split('?')\n\n    // 解析参数\n    const text = params ? new URLSearchParams(params).get('text') || '' : ''\n\n    return { tagId, text }\n  } catch (error) {\n    console.warn('Failed to parse lego URL:', src, error)\n    return null\n  }\n}\n\nfunction Image (props: IProps) {\n  const imgRef = useRef<HTMLImageElement | null>(null)\n  const observer = useRef<Partial<IntersectionObserver>>({})\n  const [, setIsLoaded] = useState(false)\n  const {\n    className,\n    style = {},\n    src,\n    mode,\n    onError,\n    lazyLoad,\n    imgProps,\n    forwardedRef,\n    ...reset\n  } = props\n\n  // 检查是否为lego模式\n  const legoData = parseLegoUrl(src)\n  const isLegoMode = legoData !== null\n\n  // 如果是lego模式，确保CDN脚本已加载\n  useEffect(() => {\n    if (isLegoMode) {\n      insertLegoScript()\n    }\n  }, [isLegoMode])\n\n  const cls = classNames(\n    'taro-img',\n    {\n      'taro-img__widthfix': mode === 'widthFix'\n    },\n    className\n  )\n  const imgCls = classNames(\n    'taro-img__mode-' +\n      (mode || 'scaleToFill').toLowerCase().replace(/\\s/g, '')\n  )\n\n  const imageOnLoad = useCallback((e) => {\n    const { onLoad } = props\n    Object.defineProperty(e, 'detail', {\n      enumerable: true,\n      writable: true,\n      value: {\n        width: e.target.width,\n        height: e.target.height\n      }\n    })\n\n    onLoad && onLoad(e)\n  }, [props])\n\n  useEffect(() => {\n    if (lazyLoad) {\n      observer.current = new IntersectionObserver(\n        entries => {\n          // 异步 api 关系\n          if (entries[entries.length - 1].isIntersecting) {\n            setIsLoaded(true)\n            // findDOMNode(this).children[0].src = src\n            imgRef.current!.src = src\n          }\n        },\n        {\n          rootMargin: '300px 0px'\n        }\n      )\n      observer.current.observe?.(imgRef.current!)\n    }\n\n    return () => {\n      observer.current?.disconnect?.()\n    }\n  }, [lazyLoad, src])\n\n  // 如果是lego模式，渲染canvas-tag\n  if (isLegoMode && legoData) {\n    return (\n      <div className={cls} style={style} ref={forwardedRef} {...reset}>\n        <canvas-tag\n          tagId={legoData.tagId}\n          text={legoData.text}\n          {...imgProps}\n        />\n      </div>\n    )\n  }\n\n  // 普通图片模式\n  return (\n    <div className={cls} style={style} ref={forwardedRef} {...reset}>\n      {lazyLoad ? (\n        <img\n          ref={img => (imgRef.current = img)}\n          className={imgCls}\n          data-src={src}\n          onLoad={imageOnLoad}\n          onError={onError}\n          {...imgProps}\n        />\n      ) : (\n        <img\n          ref={img => (imgRef.current = img)}\n          className={imgCls}\n          src={src}\n          onLoad={imageOnLoad}\n          onError={onError}\n          {...imgProps}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default createForwardRefComponent(Image)\n"],"names":["LEGO_CDN_URL","isLegoScriptLoaded","document","querySelector","insertLegoScript","script","createElement","type","src","head","appendChild","parseLegoUrl","startsWith","urlWithoutProtocol","substring","tagId","params","split","text","URLSearchParams","get","error","console","warn","Image","props","imgRef","useRef","observer","setIsLoaded","useState","className","style","mode","onError","lazyLoad","imgProps","forwardedRef","reset","__rest","legoData","isLegoMode","useEffect","cls","classNames","imgCls","toLowerCase","replace","imageOnLoad","useCallback","e","onLoad","Object","defineProperty","enumerable","writable","value","width","target","height","current","IntersectionObserver","entries","length","isIntersecting","rootMargin","_b","_a","observe","call","disconnect","_jsx","ref","children","img","createForwardRefComponent"],"mappings":"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"}

package/dist/components/picker/index.js

@@ -9,6 +9,17 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 
 const EMPTY_ARRAY = [];
 const EMPTY_OBJECT = {};
+// 语言映射函数
+function getLanguageText(lang) {
+  const isEnglish = lang === 'en-US' || lang === 'en-GB';
+  return {
+    confirm: isEnglish ? 'Confirm' : '确定',
+    cancel: isEnglish ? 'Cancel' : '取消',
+    year: isEnglish ? 'Year ' : '年',
+    month: isEnglish ? 'Month ' : '月',
+    day: isEnglish ? 'Day ' : '日'
+  };
+}
 // 数据验证函数
 function validateRegionData(data) {
   let componentName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Picker';
@@ -109,14 +120,15 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       level = 'region',
       regionData,
       textProps = EMPTY_OBJECT,
+      colors = EMPTY_OBJECT,
       onChange,
       onColumnChange,
       onCancel,
       children,
-      style,
-      formType
+      formType,
+      lang
     } = props,
-    restProps = __rest(props, ["mode", "disabled", "range", "rangeKey", "value", "start", "end", "fields", "headerText", "level", "regionData", "textProps", "onChange", "onColumnChange", "onCancel", "children", "style", "formType"]);
+    restProps = __rest(props, ["mode", "disabled", "range", "rangeKey", "value", "start", "end", "fields", "headerText", "level", "regionData", "textProps", "colors", "onChange", "onColumnChange", "onCancel", "children", "formType", "lang"]);
   const indexRef = React__default.useRef([]);
   const pickerDateRef = React__default.useRef();
   // 记录是否是用户滚动
@@ -171,8 +183,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     } else if (mode === 'date') {
       const val = value;
       let _value = verifyDate(val) || new Date(new Date().setHours(0, 0, 0, 0));
-      const _start = verifyDate(start) || new Date('1970/01/01');
-      const _end = verifyDate(end) || new Date('2999/01/01');
+      const _start = verifyDate(start) || new Date('1875/01/01');
+      const _end = verifyDate(end) || new Date('2100/01/01');
       if (!(_start <= _end)) {
         throw new Error(`Picker start time must be less than end time.`);
       }
@@ -264,15 +276,18 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   // 隐藏 Picker
   const hidePicker = React__default.useCallback(() => {
     isInitializationCompletedRef.current = false;
+    // 动画暂时不支持，暂时屏蔽相关样式挂载逻辑
+    // setState(prev => ({ ...prev, fadeOut: true }))
+    // setTimeout(() => {
+    //   setState(prev => ({
+    //     ...prev,
+    //     hidden: true,
+    //     fadeOut: false
+    //   }))
+    // }, 350)
     setState(prev => Object.assign(Object.assign({}, prev), {
-      fadeOut: true
+      hidden: true
     }));
-    setTimeout(() => {
-      setState(prev => Object.assign(Object.assign({}, prev), {
-        hidden: true,
-        fadeOut: false
-      }));
-    }, 350);
   }, []);
   // 更新索引
   const updateIndex = React__default.useCallback(function (index, columnId) {
@@ -586,6 +601,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             onColumnChange: handleColumnChange,
             columnId: String(index),
             selectedIndex: state.selectedIndices[index] // 传递对应列的selectedIndex
+            ,
+            colors: colors
           }, index));
         }
       case 'time':
@@ -596,12 +613,16 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             updateIndex: updateIndex,
             columnId: "0",
             selectedIndex: state.selectedIndices[0] // 传递小时列的selectedIndex
+            ,
+            colors: colors
           }, `hour-${state.timestamp}`), /*#__PURE__*/jsx(PickerGroup, {
             mode: "time",
             range: minutesRange,
             updateIndex: updateIndex,
             columnId: "1",
             selectedIndex: state.selectedIndices[1] // 传递分钟列的selectedIndex
+            ,
+            colors: colors
           }, `minute-${state.timestamp}`)];
         }
       case 'date':
@@ -614,9 +635,11 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
           } = pickerDateRef.current;
           const currentYear = _updateValue[0];
           const currentMonth = _updateValue[1];
-          const yearRange = getYearRange(_start.getFullYear(), _end.getFullYear()).map(item => `${item}年`);
-          const monthRange = getMonthRange(_start, _end, currentYear).map(item => `${item < 10 ? `0${item}` : item}月`);
-          const dayRange = getDayRange(_start, _end, currentYear, currentMonth).map(item => `${item < 10 ? `0${item}` : item}日`);
+          const langText = getLanguageText(lang);
+          const isEnglish = lang === 'en-US' || lang === 'en-GB';
+          const yearRange = getYearRange(_start.getFullYear(), _end.getFullYear()).map(item => isEnglish ? `${langText.year}${item}` : `${item}${langText.year}`);
+          const monthRange = getMonthRange(_start, _end, currentYear).map(item => isEnglish ? `${langText.month}${item < 10 ? `0${item}` : item}` : `${item < 10 ? `0${item}` : item}${langText.month}`);
+          const dayRange = getDayRange(_start, _end, currentYear, currentMonth).map(item => isEnglish ? `${langText.day}${item < 10 ? `0${item}` : item}` : `${item < 10 ? `0${item}` : item}${langText.day}`);
           const renderView = [/*#__PURE__*/jsx(PickerGroup, {
             mode: "date",
             range: yearRange,
@@ -624,6 +647,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             updateIndex: updateIndex,
             columnId: "0",
             selectedIndex: state.selectedIndices[0] // 传递年份列的selectedIndex
+            ,
+            colors: colors
           }, `year`)];
           if (fields === 'month' || fields === 'day') {
             renderView.push(/*#__PURE__*/jsx(PickerGroup, {
@@ -633,6 +658,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
               updateIndex: updateIndex,
               columnId: "1",
               selectedIndex: state.selectedIndices[1] // 传递月份列的selectedIndex
+              ,
+              colors: colors
             }, `month`));
           }
           if (fields === 'day') {
@@ -643,6 +670,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
               updateIndex: updateIndex,
               columnId: "2",
               selectedIndex: state.selectedIndices[2] // 传递日期列的selectedIndex
+              ,
+              colors: colors
             }, `day`));
           }
           return renderView;
@@ -676,7 +705,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
               rangeKey: "value",
               updateIndex: updateIndex,
               columnId: String(i),
-              selectedIndex: state.selectedIndices[i]
+              selectedIndex: state.selectedIndices[i],
+              colors: colors
             }, `region-${i}`));
           }
           return columns;
@@ -688,9 +718,11 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
           updateIndex: updateIndex,
           columnId: "0",
           selectedIndex: state.selectedIndices[0] // 传递selector模式的selectedIndex
+          ,
+          colors: colors
         });
     }
-  }, [mode, range, rangeKey, fields, updateIndex, updateDay, handleColumnChange, pickerDateRef.current, level, regionData, state.selectedIndices, columnsCount]);
+  }, [mode, range, rangeKey, fields, updateIndex, updateDay, handleColumnChange, pickerDateRef.current, level, regionData, state.selectedIndices, columnsCount, lang, colors]);
   // 动画类名控制逻辑
   const clsMask = classNames('taro-picker__mask-overlay', 'taro-picker__animate-fade-in', {
     'taro-picker__animate-fade-out': state.fadeOut
@@ -703,14 +735,15 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     showPicker,
     hidePicker
   }));
+  // 获取语言文本
+  const langText = getLanguageText(lang);
   return /*#__PURE__*/jsxs(View, {
     ref: ref // 直接绑定 ref
     ,
-    style: style,
     ...(formType ? {
       'data-form-type': formType
     } : {}),
-    ...omit(restProps, ['mode', 'disabled', 'range', 'rangeKey', 'value', 'start', 'end', 'fields', 'name', 'textProps', 'onChange', 'onColumnChange', 'onCancel', 'children', 'style', 'formType']),
+    ...omit(restProps, ['mode', 'disabled', 'range', 'rangeKey', 'value', 'start', 'end', 'fields', 'name', 'textProps', 'onChange', 'onColumnChange', 'onCancel', 'children', 'formType']),
     children: [/*#__PURE__*/jsx(View, {
       onClick: showPicker,
       children: children
@@ -726,14 +759,20 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
           children: [/*#__PURE__*/jsx(View, {
             className: "taro-picker__action",
             onClick: handleCancel,
-            children: (_a = textProps.cancelText) !== null && _a !== void 0 ? _a : '取消'
+            style: {
+              color: colors.cancelButtonColor
+            },
+            children: (_a = textProps.cancelText) !== null && _a !== void 0 ? _a : langText.cancel
           }), headerText && /*#__PURE__*/jsx(View, {
             className: "taro-picker__title",
             children: headerText
           }), /*#__PURE__*/jsx(View, {
             className: "taro-picker__action",
             onClick: handleChange,
-            children: (_b = textProps.okText) !== null && _b !== void 0 ? _b : '确定'
+            style: {
+              color: colors.confirmButtonColor
+            },
+            children: (_b = textProps.okText) !== null && _b !== void 0 ? _b : langText.confirm
           })]
         }), /*#__PURE__*/jsx(View, {
           className: "taro-picker__bd",