fix: 放大模式和国际化

hippy-contrib · Nov 15, 2024 · 1e2e51f · 1e2e51f
1 parent 1641ae9
commit 1e2e51f
Show file tree

Hide file tree

Showing 13 changed files with 369 additions and 27 deletions.
diff --git a/guide/I18n.md b/guide/I18n.md
@@ -0,0 +1,25 @@
+通过 `Provider.themeConfigFunc` 配置：
+
+```jsx
+// preview
+
+<Provider
+  style={{flex: 1}}
+  themeConfigFunc={({theme, defaultConfig}) => {
+    return {
+      ...defaultConfig,
+      emptyTxtDesc: "Empty data!",
+      loadingTipTxtEmpty: 'Empty data',
+      loadingTipTxtLoading: 'Loading',
+      loadingTipTxtFinish: 'Finish',
+      loadingTipTxtError: 'Error',
+      loadingTipTxtMore: 'Load more',
+      commonTxtBtn: 'button',
+      commonTxtChecked: 'checked',
+    };
+  }}
+>
+  <Empty/>
+  <LoadingTip status={LoadingTip.status.error} hasData={false}/>
+</Provider>
+```
diff --git a/guide/Scale.md b/guide/Scale.md
@@ -0,0 +1,277 @@
+通过 `Provider.renderInfo` 配置：
+
+```jsx
+// preview
+
+/**
+ * 功能：文字放大1.5倍，宽高放大1.2倍
+ * 参数：SetStyleWithScaleOptions {
+  ignore?: string[];
+  overwrite?: Record<string, (num: number) => number>;
+}
+ * */
+function setStyleWithScale(style, options) {
+  if (Object.prototype.toString.call(style).slice(8, -1) === 'Object') {
+    const _style = style;
+    const { ignore = [], overwrite = {} } = options || {};
+    Object.keys(_style).forEach(key => {
+      if (typeof _style[key] === "number" && !ignore.includes(key)) {
+        if (["fontSize", "lineHeight"].includes(key)) {
+          _style[key] = overwrite[key] ? overwrite[key](_style[key]) : (_style[key] * 1.5);
+        } else if (
+          [
+            "height",
+            "width",
+            "borderRadius",
+            "minWidth",
+            "maxWidth",
+            "minHeight",
+            "maxHeight",
+            "borderTopLeftRadius",
+            "borderTopRightRadius",
+            "borderBottomLeftRadius",
+            "borderBottomRightRadius"
+          ].includes(key)
+        ) {
+          _style[key] = overwrite[key] ? overwrite[key](_style[key]) : (_style[key] * 1.2);
+        }
+      }
+    });
+  } else if (Array.isArray(style)) {
+    style.forEach((item) => {
+      setStyleWithScale(item);
+    });
+  }
+  return style;
+}
+/**
+ * 功能：自动转化renderInfo里各种自定义style
+ * 参数：params: {
+  defaultRenderInfo: T;
+  propsKey?: (string | ({ propsKey: string } & SetStyleWithScaleOptions))[]; // 如 renderInfo.cascader 包含 itemTxtProps: {style: Style} | Array<{style: Style}>
+  styleKey?: string[]; // 如 renderInfo.cascader 包含 wrapStyle: Style
+  fnPropsKey?: string[]; // 如 renderInfo.cascader 包含 scrollViewPropsFn: () => {style: Style}
+  fnStyleKey?: string[]; // 如 renderInfo.table 包含 rowStyleFn: () => Style
+  elementKey?: string[]; // 如 renderInfo.empty 包含 img: ReactElement | ReactElement[]
+}
+ * */
+function renderInfoPropsStyleWithScale(params) {
+  const { defaultRenderInfo, propsKey, styleKey, fnPropsKey, fnStyleKey } = params;
+  if (getObjectType(defaultRenderInfo) !== ObjectType.Object) {
+    return defaultRenderInfo;
+  }
+  propsKey && propsKey.forEach(key => {
+    const propsOptions = typeof key === "string" ? { propsKey: key } : key;
+    const { propsKey, ...options } = propsOptions;
+    const propsList = Array.isArray(defaultRenderInfo[propsKey])
+      ? defaultRenderInfo[propsKey]
+      : [defaultRenderInfo[propsKey]];
+    propsList.forEach(props => {
+      if (props && props.style) {
+        props.style = setStyleWithScale(props.style, options);
+      }
+    });
+  });
+  styleKey && styleKey.forEach(key => {
+    if (defaultRenderInfo[key]) {
+      defaultRenderInfo[key] = setStyleWithScale(defaultRenderInfo[key]);
+    }
+  });
+  fnPropsKey && fnPropsKey.forEach(key => {
+    if (typeof defaultRenderInfo[key] === "function") {
+      const defaultFn = defaultRenderInfo[key];
+      defaultRenderInfo[key] = function() {
+        const result = defaultFn.apply(this, arguments);
+        if (getObjectType(result) === ObjectType.Object && result && result.style) {
+          result.style = setStyleWithScale(result.style);
+        }
+        return result;
+      };
+    }
+  });
+  fnStyleKey && fnStyleKey.forEach(key => {
+    if (typeof defaultRenderInfo[key] === "function") {
+      const defaultFn = defaultRenderInfo[key];
+      defaultRenderInfo[key] = function() {
+        const result = defaultFn.apply(this, arguments);
+        return setStyleWithScale(result);
+      };
+    }
+  });
+  return defaultRenderInfo;
+}
+
+<Provider
+  style={{flex: 1}}
+  renderInfo={{
+    badge: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({ defaultRenderInfo, propsKey: ["badgeProps", "wrapProps"] });
+    },
+    button: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["textProps", "wrapProps", "imageProps", "badgeProps", "pressProps"]
+      });
+    },
+    cascader: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["itemActiveTxtProps", "itemTxtProps"],
+        styleKey: ["wrapStyle", "markStyle", "itemStyle", "itemActiveStyle"],
+        fnPropsKey: ["scrollViewPropsFn"]
+      });
+    },
+    divider: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["dividerProps"]
+      });
+    },
+    empty: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["wrapProps"],
+        elementKey: ["img", "text"]
+      });
+    },
+    hiText: ({ defaultRenderInfo, props }) => {
+
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["textProps"]
+      });
+    },
+    indicator: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["wrapProps"],
+        elementKey: ["itemList"]
+      });
+    },
+    listItem: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["wrapProps", "leftProps", "leftInfoProps", "buttonProps"],
+        elementKey: ["rank", "thumb", "title", "note", "moreNote"]
+      });
+    },
+    loading: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["loadingProps"],
+        elementKey: ["txt"]
+      });
+    },
+    mask: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["maskProps"]
+      });
+    },
+    modal: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: [
+          "modalProps",
+          "footerDefaultBtnCancelProps",
+          "footerDefaultBtnConfirmProps",
+          "footerDefaultTxtConfirmProps",
+          "footerDefaultTxtCancelProps",
+          "footerPrimaryBtnCancelProps",
+          "footerPrimaryBtnConfirmProps",
+          "footerVerticalBtnCancelProps",
+          "footerVerticalBtnConfirmProps",
+          "footerVerticalTxtConfirmProps",
+          "footerVerticalTxtCancelProps"
+        ],
+        elementKey: ["title", "content", "closeIcon"],
+        styleKey: ["footerDefaultWrapStyle", "footerPrimaryWrapStyle", "footerVerticalWrapStyle"]
+      });
+    },
+    navigator: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        elementKey: ["title", "back"],
+        styleKey: ["wrapStyle", "statusBarStyle", "navigatorStyle"]
+      });
+    },
+    popup: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["mainProps"]
+      });
+    },
+    radio: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["wrapProps", "imgProps"]
+      });
+    },
+    search: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["wrapProps", "inputProps"],
+        elementKey: ["leftIcon", "rightIcon", "clearIcon"]
+      });
+    },
+    slider: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["wrapProps", "lineProps", "activeLineProps", "blockProps", "blockImageProps"]
+      });
+    },
+    switch: ({ defaultRenderInfo }) => {
+      const result = renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["wrapProps", "circleProps", "activeLineProps", "blockProps", "blockImageProps"]
+      });
+      return result;
+    },
+    table: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["wrapProps", "lineProps", "activeLineProps", "blockProps", "blockImageProps"],
+        fnStyleKey: ["rowStyleFn", "cellStyleFn", "headerCellStyleFn"],
+        styleKey: ["headerStyle"]
+      });
+    },
+    tabs: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: [
+          "wrapProps",
+          {
+            propsKey: "itemPropsList",
+            overwrite: {
+              fontSize: n => revertFontToLayoutScale(n),
+              lineHeight: n => revertFontToLayoutScale(n)
+            }
+          }
+        ],
+        elementKey: ["underline"]
+      });
+    },
+    tag: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["tagProps"],
+        elementKey: ["txtNode"]
+      });
+    },
+    toast: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["mainProps"]
+      });
+    },
+    uImage: ({ defaultRenderInfo }) => {
+      return renderInfoPropsStyleWithScale({
+        defaultRenderInfo,
+        propsKey: ["imgProps"]
+      });
+    }
+  }}
+>
+  <Button>放大按钮</Button>
+</Provider>
+```
diff --git a/packages/hippy_ui_react/src/components/Empty/config.ts b/packages/hippy_ui_react/src/components/Empty/config.ts
@@ -9,6 +9,7 @@ export interface ThemeConfigEmpty {
   emptyWrap: ViewProps;
   emptyImg: ImageProps;
   emptyText: HiTextProps;
+  emptyTxtDesc: ReactNode;
 }
 
 /** 自定义渲染：空状态 */
@@ -49,4 +50,5 @@ export const emptyConfig: ThemeConfigEmpty = {
       marginTop: 15,
     },
   },
+  emptyTxtDesc: '数据为空',
 };
diff --git a/packages/hippy_ui_react/src/components/Empty/index.tsx b/packages/hippy_ui_react/src/components/Empty/index.tsx
@@ -8,10 +8,6 @@ import getRenderInfo from './renderInfo';
  * @visibleName Empty 空状态
  */
 export class Empty extends Component<EmptyProps, {}> {
-  static defaultProps = {
-    desc: '数据为空',
-  };
-
   render() {
     return (
       <Consumer>

diff --git a/packages/hippy_ui_react/src/components/Empty/renderInfo.tsx b/packages/hippy_ui_react/src/components/Empty/renderInfo.tsx
@@ -3,15 +3,17 @@ import { Image } from '@hippy/react';
 import HiText from '../HiText';
 import { transferStyle } from '../../utils/Styles';
 import { EmptyRenderInfo, EmptyRenderParams, emptyConfig } from './config';
+import { ThemeConfig } from '../../themeConfig';
 
 /** Empty：获取渲染信息 */
 export default function getRenderInfo(params: EmptyRenderParams): EmptyRenderInfo {
   const {
     consumerValue: { themeConfig: _themeConfig, renderInfo },
-    props: { onPress, style, image, desc },
+    props,
   } = params;
+  const themeConfig: ThemeConfig = { ...emptyConfig, ..._themeConfig };
+  const { onPress, style, image, desc = themeConfig.emptyTxtDesc } = props;
 
-  const themeConfig = { ...emptyConfig, ..._themeConfig };
   const result: EmptyRenderInfo = {
     wrapProps: {
       ...themeConfig.emptyWrap,

diff --git a/packages/hippy_ui_react/src/components/LoadingTip/config.ts b/packages/hippy_ui_react/src/components/LoadingTip/config.ts
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+/** 主题配置：加载提示 */
+export interface ThemeConfigLoadingTip {
+  loadingTipTxtEmpty: ReactNode;
+  loadingTipTxtLoading: ReactNode;
+  loadingTipTxtFinish: ReactNode;
+  loadingTipTxtError: ReactNode;
+  loadingTipTxtMore: ReactNode;
+}
+
+/**
+ * LoadingTip 组件
+ */
+export const loadingTipConfig: ThemeConfigLoadingTip = {
+  loadingTipTxtEmpty: '数据为空',
+  loadingTipTxtLoading: '加载中',
+  loadingTipTxtFinish: '加载完成',
+  loadingTipTxtError: '加载异常',
+  loadingTipTxtMore: '加载更多',
+};