@miot-rn/car-component 1.0.1 → 1.0.2

package/dist/components/airConditioningCard/index.js

@@ -1,6 +1,6 @@
 import React, { useContext, memo, useMemo } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
-import { Stepper, Separator, ColumnSeparator, LargeVariantSwitch, ConfigContext } from 'miot/ui/hyperOSUI';
+import { Stepper, Separator, ColumnSeparator, LargeListToggle, ConfigContext } from 'miot/ui/hyperOSUI';
 import { TitleContainer } from "../titleContainer";
 import { CardContainer } from "../cardContainer";
 function isEffectData(value) {
@@ -48,13 +48,13 @@ export const AirConditioningCard = /*#__PURE__*/memo(({
       }]
     }, isInsideTemperatureEffect && /*#__PURE__*/React.createElement(Text, {
       style: {
-        color: disabled ? colorToken.mj_color_gray_text_6 : colorToken.mj_color_gray_text_4
+        color: disabled ? colorToken.contentDisabledPrimary : colorToken.contentTertiaryNormal
       }
     }, insideTip), isInsideTemperatureEffect && isOutsideTemperatureEffect && /*#__PURE__*/React.createElement(ColumnSeparator, {
       style: styles.column
     }), isOutsideTemperatureEffect && /*#__PURE__*/React.createElement(Text, {
       style: {
-        color: disabled ? colorToken.mj_color_gray_text_6 : colorToken.mj_color_gray_text_4
+        color: disabled ? colorToken.contentDisabledPrimary : colorToken.contentTertiaryNormal
       }
     }, outsideTip)) : showTargetTemperature ? /*#__PURE__*/React.createElement(View, {
       style: {
@@ -68,20 +68,18 @@ export const AirConditioningCard = /*#__PURE__*/memo(({
     style: styles.stepper
   }, /*#__PURE__*/React.createElement(Stepper, {
     step: temperatureStep,
-    symbolType: "celsius",
+    symbolType: "degree",
     value: transformTargetTemperature,
     disabled: !hvacStatus || disabled,
     onChange: onHvacTemperatureChange,
     min: minTemperature,
     max: maxTemperature
-  })), showHvacDefroster && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, {
-    style: styles.separator
-  }), /*#__PURE__*/React.createElement(LargeVariantSwitch, {
+  })), showHvacDefroster && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(LargeListToggle, {
     title: hvacDefrosterTitle,
     disabled: disabled,
     subtitle: hvacDefrosterSubtitle,
-    value: hvacDefrosterStatus,
-    onValueChange: onHvacDefrosterChange
+    checked: hvacDefrosterStatus,
+    onChange: onHvacDefrosterChange
   })));
 });
 const styles = StyleSheet.create({

package/dist/components/carInfoHeader/carImage.js

@@ -18,7 +18,7 @@ export const CarImage = ({
   }) : /*#__PURE__*/React.createElement(View, {
     style: styles.placeholder
   }, /*#__PURE__*/React.createElement(MijiaLogo, {
-    fill: colorToken.mj_color_gray_icon_2
+    fill: colorToken.contentSecondaryNormal
   })));
 };
 const styles = StyleSheet.create({

package/dist/components/carInfoHeader/dualRangeIndicator.js

@@ -60,7 +60,7 @@ export const DualRangeIndicator = ({
     totalRange: electricRange,
     currentRange: currentElectricRange,
     icon: /*#__PURE__*/React.createElement(ElectricPower, {
-      fill: colorToken.mj_color_gray_icon_1
+      fill: colorToken.contentPrimaryNormal
     }),
     color: electricColor,
     progress: electricProgress
@@ -69,7 +69,7 @@ export const DualRangeIndicator = ({
     totalRange: fuelRange,
     currentRange: currentFuelRange,
     icon: /*#__PURE__*/React.createElement(FuelPower, {
-      fill: colorToken.mj_color_gray_icon_1
+      fill: colorToken.contentPrimaryNormal
     }),
     color: fuelColor,
     progress: fuelProgress
@@ -109,16 +109,16 @@ const styles = dynamicStyleSheet({
     height: 30
   },
   rangeValue: {
-    color: defaultColorToken.mj_color_gray_text_1,
+    color: defaultColorToken.contentPrimaryNormal,
     includeFontPadding: false,
-    ...Fonts.mj_text_custom_20_M
+    ...Fonts.fontSystem20Medium
   },
   unitSpacer: {
     fontSize: 6
   },
   unit: {
-    color: defaultColorToken.mj_color_gray_text_1,
+    color: defaultColorToken.contentPrimaryNormal,
     includeFontPadding: false,
-    ...Fonts.mj_text_custom_14_M
+    ...Fonts.fontSystem14Medium
   }
 });

package/dist/components/carInfoHeader/parkingStatus.js

@@ -88,12 +88,12 @@ const styles = dynamicStyleSheet({
   divider: {
     width: 1,
     height: 10,
-    backgroundColor: defaultColorToken.mj_color_gray_divider_1,
+    backgroundColor: defaultColorToken.dividerPrimary,
     marginHorizontal: 4
   },
   statusText: {
     ...Fonts.FontTextRegular,
-    color: defaultColorToken.mj_color_gray_text_4,
+    color: defaultColorToken.contentTertiaryNormal,
     includeFontPadding: false,
     textAlign: 'center'
   }

package/dist/components/carInfoHeader/rangeProgressBar.js

@@ -18,8 +18,8 @@ export const RangeProgressBar = ({
     if (Number.isNaN(progress)) return 0;
     return Math.min(Math.max(progress, 0), 1);
   }, [progress]);
-  const effectiveUnfilled = unfilledColor || colorToken.mj_color_gray_fill_1;
-  const fillColor = color || colorToken.mj_color_green_1;
+  const effectiveUnfilled = unfilledColor || colorToken.fillPrimary;
+  const fillColor = color || colorToken.accentGreenFill;
   const rawFilled = clamped * width;
   const hasGap = clamped > 0 && clamped < 1;
   const filledWidth = Math.max(0, Math.min(width, hasGap ? rawFilled - 1 / 2 : rawFilled));

package/dist/components/carInfoHeader/singleRangeIndicator.js

@@ -41,17 +41,17 @@ const styles = dynamicStyleSheet({
     justifyContent: 'center'
   },
   rangeValue: {
-    color: defaultColorToken.mj_color_gray_text_1,
+    color: defaultColorToken.contentPrimaryNormal,
     includeFontPadding: false,
-    ...Fonts.mj_text_custom_26_M,
+    ...Fonts.fontSystem26Medium,
     height: 34,
     lineHeight: 34
   },
   unit: {
     marginLeft: 2,
-    color: defaultColorToken.mj_color_gray_text_1,
+    color: defaultColorToken.contentPrimaryNormal,
     includeFontPadding: false,
-    ...Fonts.mj_text_custom_14_M,
+    ...Fonts.fontSystem14Medium,
     height: 25,
     lineHeight: 25
   }

package/dist/components/cardContainer/index.js

@@ -10,7 +10,7 @@ export const CardContainer = /*#__PURE__*/memo(({
   } = useContext(ConfigContext);
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
-      backgroundColor: colorToken.mj_color_gray_card_3
+      backgroundColor: colorToken.surfaceCardTranslucent
     }, style]
   }, children);
 });

package/dist/components/flatSelect/FlatOption.js

@@ -59,15 +59,15 @@ function FlatOption({
       case 'red':
       case 'yellow':
       case 'wathet':
-        return [primaryColor, disabled ? colorToken.mj_color_gray_text_8 : colorToken.mj_color_norm_white];
+        return [primaryColor, disabled ? colorToken.contentInverseDisabled : colorToken.staticWhite];
       default:
-        return [colorToken.mj_color_gray_card_4, disabled ? colorToken.mj_color_gray_text_6 : colorToken.mj_color_gray_text_2];
+        return [colorToken.fillQuaternary, disabled ? colorToken.contentDisabledPrimary : colorToken.contentSecondaryNormal];
     }
   }, [colorType, colorToken, disabled, primaryColor]);
   const generateIcon = useMemo(() => {
     if (/*#__PURE__*/isValidElement(icon) && colorType !== 'white' && selected) {
       return /*#__PURE__*/cloneElement(icon, {
-        fill: disabled ? colorToken.mj_color_gray_text_8 : colorToken.mj_color_norm_white
+        fill: disabled ? colorToken.contentInverseDisabled : colorToken.staticWhite
       });
     }
     return icon;
@@ -89,7 +89,7 @@ function FlatOption({
     style: [styles.icon]
   }, generateIcon), /*#__PURE__*/React.createElement(Text, {
     style: [styles.label, {
-      color: selected ? activeTextColor : disabled ? colorToken.mj_color_gray_text_6 : colorToken.mj_color_gray_text_2
+      color: selected ? activeTextColor : disabled ? colorToken.contentDisabledPrimary : colorToken.contentSecondaryNormal
     }],
     allowFontScaling: false,
     numberOfLines: 2,
@@ -109,7 +109,7 @@ const styles = StyleSheet.create({
     height: 20
   },
   label: {
-    ...Fonts.mj_text_custom_13_M,
+    ...Fonts.fontSystem13Medium,
     marginTop: 8,
     textAlign: 'center'
   }

package/dist/components/groupContainer/index.js

@@ -29,7 +29,7 @@ export function GroupContainer(props) {
     style: style
   }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.title, {
-      color: colorToken.mjcard_color_miui_1
+      color: colorToken.accentOsContent
     }]
   }, title), /*#__PURE__*/React.createElement(View, null, validatedChildrenOriginal));
 }
@@ -40,7 +40,7 @@ const styles = StyleSheet.create({
     paddingLeft: 20,
     paddingRight: 16,
     lineHeight: 22,
-    ...Fonts.mj_text_custom_14_R
+    ...Fonts.fontSystem14Regular
   },
   space: {
     height: 8

package/dist/components/largeEntrance/LargeEntrance.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LargeEntranceProps } from './interface';
+declare const LargeEntrance: React.FC<LargeEntranceProps>;
+export default LargeEntrance;

package/dist/components/largeEntrance/LargeEntrance.js

@@ -0,0 +1,143 @@
+import React, { isValidElement, cloneElement, useContext } from 'react';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
+import { ConfigContext, Fonts, TouchableView } from 'miot/ui/hyperOSUI';
+import { Right } from 'miot/ui/icons';
+const THIN_HEIGHT = 60;
+const PADDING = 16;
+const DOT_SIZE = 7;
+const DOT_RADIUS = DOT_SIZE / 2;
+const ICON_SIZE = 16;
+const MAX_LINE = 3;
+
+/**
+ * @export public
+ * @doc_name 大型入口控件
+ * @doc_index 2
+ * @doc_directory ui
+ * @since 10115
+ * @module Entrance
+ * @description 大型入口控件，用于首页等需要突出展示的场景
+ */
+const LargeEntrance = props => {
+  const {
+    colorToken
+  } = useContext(ConfigContext);
+  const {
+    title = '',
+    subtitle = '',
+    value = '',
+    onPress,
+    disabled = false,
+    hideRightIcon = false,
+    forceHideRightIconOnPressInvalid = false,
+    showDot = false,
+    leftIconSource = null,
+    customRenderer,
+    accessible,
+    accessibilityLabel,
+    accessibilityHint
+  } = props;
+  const isRTL = I18nManager.isRTL;
+  const subTitleIsString = typeof subtitle === 'string';
+  const shouldHideRightIcon = hideRightIcon || forceHideRightIconOnPressInvalid && !onPress;
+  return /*#__PURE__*/React.createElement(TouchableView, {
+    disabled: !onPress || disabled,
+    onPress: onPress,
+    viewStyle: styles.container,
+    accessible: accessible,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint
+  }, leftIconSource && /*#__PURE__*/React.createElement(View, {
+    style: [styles.leftIcon, {
+      opacity: disabled ? 0.3 : 1
+    }]
+  }, leftIconSource), /*#__PURE__*/React.createElement(View, {
+    style: styles.left
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: MAX_LINE,
+    allowFontScaling: false,
+    style: [Fonts.mj_text_custom_16_M, {
+      color: disabled ? colorToken.contentDisabledPrimary : colorToken.contentPrimaryNormal
+    }]
+  }, title), subtitle ? subTitleIsString ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: MAX_LINE,
+    allowFontScaling: false,
+    style: [Fonts.mj_text_custom_13_R, {
+      color: disabled ? colorToken.contentDisabledPrimary : colorToken.contentTertiaryNormal
+    }]
+  }, subtitle) : /*#__PURE__*/isValidElement(subtitle) ? (/*#__PURE__*/cloneElement(subtitle, {
+    disabled
+  })) : subtitle : null), /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: 10
+    }
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.right
+  }, customRenderer || /*#__PURE__*/React.createElement(React.Fragment, null, showDot && /*#__PURE__*/React.createElement(View, {
+    accessibilityLabel: "new notification",
+    style: [styles.dotLight, {
+      backgroundColor: disabled ? colorToken.accentRedLow : colorToken.accentRedFill
+    }]
+  }), value ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: MAX_LINE,
+    allowFontScaling: false,
+    style: [styles.rightText, Fonts.mj_text_body_2_R, {
+      color: disabled ? colorToken.contentDisabledPrimary : colorToken.contentQuaternaryNormal
+    }]
+  }, value) : null, !shouldHideRightIcon && /*#__PURE__*/React.createElement(View, {
+    style: [styles.icon, {
+      transform: [{
+        scaleX: isRTL ? -1 : 1
+      }]
+    }]
+  }, /*#__PURE__*/React.createElement(Right, {
+    fill: disabled ? colorToken.contentDisabledSecondary : colorToken.contentDisabledPrimary
+  })))));
+};
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: PADDING,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  left: {
+    flex: 1,
+    minHeight: THIN_HEIGHT,
+    paddingHorizontal: 4,
+    paddingVertical: 12,
+    justifyContent: 'center',
+    overflow: 'hidden'
+  },
+  right: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    minWidth: 52,
+    maxWidth: 116
+  },
+  rightText: {
+    flexShrink: 1,
+    flexGrow: 0,
+    textAlign: 'right',
+    marginLeft: 4
+  },
+  icon: {
+    marginLeft: 4,
+    width: ICON_SIZE,
+    height: ICON_SIZE
+  },
+  dotLight: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: DOT_RADIUS
+  },
+  leftIcon: {
+    width: 24,
+    height: 24,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 4
+  }
+});
+export default LargeEntrance;

package/dist/components/largeEntrance/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LargeEntrance } from './LargeEntrance';
+export type { LargeEntranceProps } from './interface';

package/dist/components/largeEntrance/index.js

@@ -0,0 +1 @@
+export { default as LargeEntrance } from "./LargeEntrance";

package/dist/components/largeEntrance/interface.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AccessibilityProps } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+export interface LargeEntranceProps extends AccessibilityProps {
+    title: string;
+    subtitle?: string | React.ReactElement;
+    value?: string;
+    onPress?: () => void;
+    disabled?: boolean;
+    hideRightIcon?: boolean;
+    forceHideRightIconOnPressInvalid?: boolean;
+    showDot?: boolean;
+    leftIconSource?: React.ReactElement<SvgProps>;
+    customRenderer?: React.ReactElement;
+}

package/dist/components/largeEntrance/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/otherSettingCard/index.js

@@ -1,9 +1,10 @@
 import React, { useContext, useCallback, memo } from 'react';
-import { LargeEntrance, ConfigContext } from 'miot/ui/hyperOSUI';
+import { LargeListEntrance, ConfigContext } from 'miot/ui/hyperOSUI';
 import { Host, Device } from 'miot';
 import { CarInUsed, DeviceManage } from "../../icons";
 import { CardContainer } from "../cardContainer";
 import { GroupContainer } from "../groupContainer";
+import { useFeatureEnabled } from "../../utils/featureGate";
 export const OtherSettingCard = /*#__PURE__*/memo(props => {
   const {
     usedInCarTip,
@@ -19,20 +20,19 @@ export const OtherSettingCard = /*#__PURE__*/memo(props => {
   const toDeviceManage = useCallback(() => {
     Host.ui.openDeviceRoamingManager(Device.deviceID);
   }, []);
-
-  // 判断是不是米系车
   const isMiCar = !!Device.model.startsWith('micar.car.');
+  const showDeviceRoaming = isMiCar && useFeatureEnabled('deviceRoaming');
   return /*#__PURE__*/React.createElement(GroupContainer, {
     title: othersTip
-  }, /*#__PURE__*/React.createElement(CardContainer, null, /*#__PURE__*/React.createElement(LargeEntrance, {
-    leftIconSource: /*#__PURE__*/React.createElement(CarInUsed, {
-      fill: colorToken.mj_color_gray_icon_1
+  }, /*#__PURE__*/React.createElement(CardContainer, null, /*#__PURE__*/React.createElement(LargeListEntrance, {
+    leadingIcon: /*#__PURE__*/React.createElement(CarInUsed, {
+      fill: colorToken.contentPrimaryNormal
     }),
     title: usedInCarTip,
     onPress: toUsedInCar
-  }), isMiCar && /*#__PURE__*/React.createElement(LargeEntrance, {
-    leftIconSource: /*#__PURE__*/React.createElement(DeviceManage, {
-      fill: colorToken.mj_color_gray_icon_1
+  }), showDeviceRoaming && /*#__PURE__*/React.createElement(LargeListEntrance, {
+    leadingIcon: /*#__PURE__*/React.createElement(DeviceManage, {
+      fill: colorToken.contentPrimaryNormal
     }),
     title: deviceManageTip,
     onPress: toDeviceManage

package/dist/components/pageBackground/index.js

@@ -17,6 +17,6 @@ const styles = dynamicStyleSheet({
     top: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: defaultColorToken.mj_color_gray_bg_2
+    backgroundColor: defaultColorToken.surfacePageLow
   }
 });

package/dist/components/seatControl/index.js

@@ -62,13 +62,13 @@ const styles = dynamicStyleSheet({
     minHeight: 104
   },
   title: {
-    ...Fonts.mj_text_subtitle_3_M,
-    color: defaultColorToken.mj_color_gray_text_2,
+    ...Fonts.fontSystem14Medium,
+    color: defaultColorToken.contentSecondaryNormal,
     textAlign: 'center',
     lineHeight: 20
   },
   titleDisabled: {
-    color: defaultColorToken.mj_color_gray_text_6
+    color: defaultColorToken.contentDisabledPrimary
   },
   buttonsContainer: {
     flexDirection: 'row',
@@ -89,7 +89,7 @@ const styles = dynamicStyleSheet({
     borderRadius: 60,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: defaultColorToken.mj_color_control_fill_5
+    backgroundColor: defaultColorToken.fillTertiary
   },
   controlIcon: {
     width: 20,

package/dist/components/steeringWheelHotCard/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorType } from 'miot/ui/hyperOSUI';
+import { ColorType } from '../../config';
 interface OptionItem {
     value: string | number;
     colorType?: ColorType;

package/dist/components/steeringWheelHotCard/index.js

@@ -19,7 +19,7 @@ export const SteeringWheelHotCard = /*#__PURE__*/memo(({
     colorToken
   } = useContext(ConfigContext);
   const heatingLevelIcon = useMemo(() => {
-    const color = disabled ? colorToken.mj_color_gray_icon_7 : colorToken.mj_color_gray_icon_2;
+    const color = disabled ? colorToken.contentDisabledSecondary : colorToken.contentSecondaryNormal;
     const icons = {
       [SteeringWheelHotGear.OFF]: /*#__PURE__*/React.createElement(SteeringWheelHot, {
         fill: color

package/dist/components/titleContainer/TitleContainer.js

@@ -59,8 +59,8 @@ const TitleContainer = ({
     switch (type) {
       case WidgetType.SWITCH:
         return /*#__PURE__*/React.createElement(Switch, _extends({}, switchOption || {}, {
-          value: value,
-          onValueChange: _onValueChange,
+          checked: value,
+          onChange: _onValueChange,
           disabled: disabled,
           colorType: colorType
         }));
@@ -84,16 +84,16 @@ const TitleContainer = ({
   }, /*#__PURE__*/React.createElement(Text, _extends({
     numberOfLines: MAX_LINE,
     allowFontScaling: false,
-    style: [Fonts.mj_text_headline_2_M, styles.title, {
-      color: disabled ? colorToken.mj_color_gray_text_6 : colorToken.mj_color_gray_text_1
+    style: [Fonts.fontSystem16Medium, styles.title, {
+      color: disabled ? colorToken.contentDisabledPrimary : colorToken.contentPrimaryNormal
     }]
   }, getAccessibilityConfig({
     ...accessibilityTitle
   })), title)), subtitle ? subTitleIsString ? /*#__PURE__*/React.createElement(Text, _extends({
     numberOfLines: MAX_LINE,
     allowFontScaling: false,
-    style: [Fonts.mj_text_custom_13_R, {
-      color: disabled ? colorToken.mj_color_gray_text_6 : colorToken.mj_color_gray_text_4
+    style: [Fonts.fontSystem13Regular, {
+      color: disabled ? colorToken.contentDisabledPrimary : colorToken.contentTertiaryNormal
     }]
   }, getAccessibilityConfig({
     ...accessibilitySubtitle

package/dist/components/titleContainer/interface.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SwitchProps, ColorType } from 'miot/ui/hyperOSUI';
+import { ColorType } from '../../config';
 export declare enum RightIconType {
     ARROW = "arrow",
     SELECT = "select",
@@ -40,7 +40,12 @@ export interface TitleContainerProps {
     colorType?: ColorType;
     accessibilitySubtitle?: AccessibilityPropsType;
     accessibilityTitle?: AccessibilityPropsType;
-    switchOption?: SwitchProps;
+    switchOption?: {
+        checked?: boolean;
+        disabled?: boolean;
+        onChange?: (val: boolean) => void;
+        colorType?: ColorType;
+    };
     leftIcon?: React.ReactNode;
     showTitleArrow?: boolean;
     customRenderer?: React.ReactElement;

package/dist/components/warningForRunningCard/index.js

@@ -1,5 +1,6 @@
 import React, { useContext, memo } from 'react';
-import { LargeEntrance, ConfigContext } from 'miot/ui/hyperOSUI';
+import { ConfigContext } from 'miot/ui/hyperOSUI';
+import { LargeEntrance } from "../largeEntrance";
 import { Warning } from "../../icons";
 import { CardContainer } from "../cardContainer";
 export const WarningForRunningCard = /*#__PURE__*/memo(props => {
@@ -11,7 +12,7 @@ export const WarningForRunningCard = /*#__PURE__*/memo(props => {
   } = useContext(ConfigContext);
   return /*#__PURE__*/React.createElement(CardContainer, null, /*#__PURE__*/React.createElement(LargeEntrance, {
     leftIconSource: /*#__PURE__*/React.createElement(Warning, {
-      fill: colorToken.mjcard_color_yellow_1
+      fill: colorToken.accentYellowFill
     }),
     title: carRunningTip,
     hideRightIcon: true,

package/dist/config/index.d.ts

@@ -8,9 +8,12 @@ export declare const SteeringWheelHotGear: {
     readonly 'Level 2': "Level 2";
     readonly 'Level 3': "Level 3";
 };
+export declare const COLOR_TYPES: readonly ["green", "blue", "wathet", "purple", "orange"];
+export type ColorType = (typeof COLOR_TYPES)[number];
 export * from './seatGearLevel';
 export * from './seatFunctionType';
 export * from './seatPosition';
 export * from './seatRowConfig';
 export * from './seatI18nKeys';
 export * from './ConnectStatus';
+export * from './overseasConfig';

package/dist/config/index.js

@@ -8,9 +8,11 @@ export const SteeringWheelHotGear = {
   'Level 2': 'Level 2',
   'Level 3': 'Level 3'
 };
+export const COLOR_TYPES = ['green', 'blue', 'wathet', 'purple', 'orange'];
 export * from "./seatGearLevel";
 export * from "./seatFunctionType";
 export * from "./seatPosition";
 export * from "./seatRowConfig";
 export * from "./seatI18nKeys";
-export * from "./ConnectStatus";
+export * from "./ConnectStatus";
+export * from "./overseasConfig";

package/dist/config/overseasConfig.d.ts

@@ -0,0 +1,3 @@
+export declare const OverseasConfig: {
+    readonly disabledTrackingKeys: string[];
+};

package/dist/config/overseasConfig.js

@@ -0,0 +1,3 @@
+export const OverseasConfig = {
+  disabledTrackingKeys: []
+};

package/dist/hooks/useDualRangeData.js

@@ -35,8 +35,8 @@ export const useDualRangeData = ({
     return 'km';
   }, []);
   const getDualRangeDisplayData = useCallback(() => {
-    const electricColor = colorToken.mj_color_function_brandfill_normal;
-    const fuelColor = colorToken.mj_color_gray_text_2;
+    const electricColor = colorToken.accentGreenFill;
+    const fuelColor = colorToken.contentSecondaryNormal;
     const dcdType = Number(dcdRangeSOCTypeDisplayValue);
     const cltcEstimatedExtendEange = Number(cltcEstimatedExtendEangeValue);
     const cltcFuelEndurance = Number(cltcFuelEnduranceValue);

package/dist/hooks/useParkingStatusData.js

@@ -22,16 +22,16 @@ export const useParkingStatusData = ({
   const sentryWorkModeValue = useSpecState(specSentryInfoPropertiesSentryWorkMode);
   const parkingStatusIcon = useMemo(() => ({
     errorStatusIcon: /*#__PURE__*/React.createElement(ErrorStatus, {
-      fill: colorToken.mjcard_color_red_1
+      fill: colorToken.accentRedFill
     }),
     loadingIcon: /*#__PURE__*/React.createElement(Loading, {
-      stroke: colorToken.mj_color_gray_icon_4
+      stroke: colorToken.contentTertiaryNormal
     }),
     parkingStatusIcon: /*#__PURE__*/React.createElement(ParkingIcon, {
-      fill: colorToken.mj_color_gray_icon_4
+      fill: colorToken.contentTertiaryNormal
     }),
     sentryModeIcon: /*#__PURE__*/React.createElement(SentryMode, {
-      fill: colorToken.mj_color_gray_icon_4
+      fill: colorToken.contentTertiaryNormal
     })
   }), [colorToken]);
   const enterSentryInfoWorkMode = useMemo(() => {
@@ -50,7 +50,7 @@ export const useParkingStatusData = ({
     const gearStatus = Number(gearStatusValue);
     const centralLockState = Number(centralLockStateValue);
     const textStyle = {
-      color: colorToken.mj_color_gray_text_4
+      color: colorToken.contentTertiaryNormal
     };
 
     // 1. Connecting

package/dist/hooks/useSeatControlData.js

@@ -8,54 +8,54 @@ import { GearLevel, HeatingStateOrder, VentilationStateOrder, SeatI18nKeys } fro
 export const LEVEL_ICONS = colorToken => ({
   heating: {
     Off: /*#__PURE__*/React.createElement(SeatGearHeatingOff, {
-      fill: colorToken.mj_color_gray_icon_2
+      fill: colorToken.contentSecondaryNormal
     }),
     OffDisabled: /*#__PURE__*/React.createElement(SeatGearHeatingOff, {
-      fill: colorToken.mj_color_gray_icon_7
+      fill: colorToken.contentDisabledSecondary
     }),
     Three: /*#__PURE__*/React.createElement(SeatGearHeatingLevelThree, {
-      fill: colorToken.mj_color_norm_white
+      fill: colorToken.staticWhite
     }),
     ThreeDisabled: /*#__PURE__*/React.createElement(SeatGearHeatingLevelThree, {
-      fill: colorToken.mj_color_gray_icon_8
+      fill: colorToken.contentInverseDisabled
     }),
     Two: /*#__PURE__*/React.createElement(SeatGearHeatingLevelTwo, {
-      fill: colorToken.mj_color_norm_white
+      fill: colorToken.staticWhite
     }),
     TwoDisabled: /*#__PURE__*/React.createElement(SeatGearHeatingLevelTwo, {
-      fill: colorToken.mj_color_gray_icon_8
+      fill: colorToken.contentInverseDisabled
     }),
     One: /*#__PURE__*/React.createElement(SeatGearHeatingLevelOne, {
-      fill: colorToken.mj_color_norm_white
+      fill: colorToken.staticWhite
     }),
     OneDisabled: /*#__PURE__*/React.createElement(SeatGearHeatingLevelOne, {
-      fill: colorToken.mj_color_gray_icon_8
+      fill: colorToken.contentInverseDisabled
     })
   },
   ventilation: {
     Off: /*#__PURE__*/React.createElement(SeatGearVentilationOff, {
-      fill: colorToken.mj_color_gray_icon_2
+      fill: colorToken.contentSecondaryNormal
     }),
     OffDisabled: /*#__PURE__*/React.createElement(SeatGearVentilationOff, {
-      fill: colorToken.mj_color_gray_icon_7
+      fill: colorToken.contentDisabledSecondary
     }),
     Three: /*#__PURE__*/React.createElement(SeatGearVentilationLevelThree, {
-      fill: colorToken.mj_color_norm_white
+      fill: colorToken.staticWhite
     }),
     ThreeDisabled: /*#__PURE__*/React.createElement(SeatGearVentilationLevelThree, {
-      fill: colorToken.mj_color_gray_icon_8
+      fill: colorToken.contentInverseDisabled
     }),
     Two: /*#__PURE__*/React.createElement(SeatGearVentilationLevelTwo, {
-      fill: colorToken.mj_color_norm_white
+      fill: colorToken.staticWhite
     }),
     TwoDisabled: /*#__PURE__*/React.createElement(SeatGearVentilationLevelTwo, {
-      fill: colorToken.mj_color_gray_icon_8
+      fill: colorToken.contentInverseDisabled
     }),
     One: /*#__PURE__*/React.createElement(SeatGearVentilationLevelOne, {
-      fill: colorToken.mj_color_norm_white
+      fill: colorToken.staticWhite
     }),
     OneDisabled: /*#__PURE__*/React.createElement(SeatGearVentilationLevelOne, {
-      fill: colorToken.mj_color_gray_icon_8
+      fill: colorToken.contentInverseDisabled
     })
   }
 });
@@ -63,20 +63,20 @@ export const TYPE_CONFIG = (colorToken, levelIcons) => ({
   heating: {
     order: HeatingStateOrder,
     colors: {
-      on: colorToken.mjcard_color_orange_1,
-      onDisabled: colorToken.mjcard_color_orange_3,
-      off: colorToken.mj_color_gray_fill_2,
-      offDisabled: colorToken.mj_color_gray_fill_5
+      on: colorToken.accentOrangeFill,
+      onDisabled: colorToken.accentOrangeLow,
+      off: colorToken.fillSecondary,
+      offDisabled: colorToken.fillTertiary
     },
     icons: levelIcons.heating
   },
   ventilation: {
     order: VentilationStateOrder,
     colors: {
-      on: colorToken.mjcard_color_blue_1,
-      onDisabled: colorToken.mjcard_color_blue_3,
-      off: colorToken.mj_color_gray_fill_2,
-      offDisabled: colorToken.mj_color_gray_fill_5
+      on: colorToken.accentBlueFill,
+      onDisabled: colorToken.accentBlueLow,
+      off: colorToken.fillSecondary,
+      offDisabled: colorToken.fillTertiary
     },
     icons: levelIcons.ventilation
   }

package/dist/hooks/useSingleRangeData.js

@@ -40,11 +40,11 @@ export const useSingleRangeData = ({
         currentRange: 0,
         totalRange: 100,
         unit: '%',
-        color: colorToken.mjcard_color_green_2
+        color: colorToken.accentGreenContent
       };
     }
     const dcdType = Number(dcdRangeSOCTypeDisplayValue);
-    let color = colorToken.mjcard_color_green_2;
+    let color = colorToken.accentGreenContent;
     const lowSocWarning = Number(lowSocWarningValue);
     const batterySoCDisplay = Number(batterySoCDisplayValue);
     const batteryEstimatedMileage = Number(batteryEstimatedMileageValue);
@@ -52,9 +52,9 @@ export const useSingleRangeData = ({
 
     // Determine color based on low SOC warning level
     if (getValueBySpecDescription(specPowerBatteryPropertiesLowSocWarning, 'Level2 Warning') === lowSocWarning) {
-      color = colorToken.mjcard_color_yellow_2;
+      color = colorToken.accentYellowFill;
     } else if (getValueBySpecDescription(specPowerBatteryPropertiesLowSocWarning, 'Level1 Warning') === lowSocWarning) {
-      color = colorToken.mjcard_color_red_2;
+      color = colorToken.accentRedContent;
     }
 
     // 1. Battery SOC percentage
@@ -90,7 +90,7 @@ export const useSingleRangeData = ({
       currentRange: 0,
       totalRange: 100,
       unit: '%',
-      color: colorToken.mjcard_color_green_2
+      color: colorToken.accentGreenContent
     };
   }, [dcdRangeSOCTypeDisplayValue, lowSocWarningValue, batterySoCDisplayValue, batteryEstimatedMileageValue, cltcEstimatedRangeValue, specPowerBatteryPropertiesDCDRangeSOCTypeDisplay, specPowerBatteryPropertiesLowSocWarning, specPowerBatteryPropertiesBatterySoCDisplay, specPowerBatteryPropertiesBatteryEstimatedMileage, specPowerBatteryPropertiesCLTCEstimatedRange, distanceUnit, colorToken]);
   return useMemo(() => getRangeDisplayData(), [getRangeDisplayData]);

package/dist/index.d.ts

@@ -2,20 +2,22 @@ export { AirConditioningCard } from './components/airConditioningCard';
 export { CardContainer } from './components/cardContainer';
 export { default as ContainerWithGap } from './components/containerWithGap';
 export { FlatSelect, FlatOption } from './components/flatSelect';
+export { LargeEntrance, type LargeEntranceProps } from './components/largeEntrance';
 export { GroupContainer } from './components/groupContainer';
 export { OtherSettingCard } from './components/otherSettingCard';
 export { SteeringWheelHotCard } from './components/steeringWheelHotCard';
 export { TitleContainer } from './components/titleContainer';
 export { WarningForRunningCard } from './components/warningForRunningCard';
 export { CarInfoHeader } from './components/carInfoHeader';
-export type { SingleRangeData, DualRangeData, ParkingStatusData, CarInfoHeaderProps, } from './components/carInfoHeader';
-export { SeatControl, type SeatControlProps, type ControlButtonConfig, type OnButtonPressParams } from './components/seatControl';
+export type { SingleRangeData, DualRangeData, ParkingStatusData, CarInfoHeaderProps } from './components/carInfoHeader';
+export { SeatControl, type SeatControlProps, type ControlButtonConfig, type OnButtonPressParams, } from './components/seatControl';
 export { SeatCard, type SeatCardProps } from './components/seatControl/seatCard';
 export { PageBackground, type PageBackgroundProps } from './components/pageBackground';
 export { SeatControlGroup, type SeatControlGroupProps, type SeatConfig } from './components/seatControlGroup';
 export { useSingleRangeData, type RangeDisplayData, type UseSingleRangeDataProps } from './hooks/useSingleRangeData';
 export { useDualRangeData, type DualRangeDisplayData, type UseDualRangeDataProps } from './hooks/useDualRangeData';
-export { useParkingStatusData, type ParkingStatusInfo, type UseParkingStatusDataProps } from './hooks/useParkingStatusData';
-export { useSeatControlData, type SeatControlDataProps, SeatSpecs, LEVEL_ICONS, TYPE_CONFIG, SEAT_TITLES } from './hooks/useSeatControlData';
+export { useParkingStatusData, type ParkingStatusInfo, type UseParkingStatusDataProps, } from './hooks/useParkingStatusData';
+export { useSeatControlData, type SeatControlDataProps, SeatSpecs, LEVEL_ICONS, TYPE_CONFIG, SEAT_TITLES, } from './hooks/useSeatControlData';
 export * from './config';
 export * from './modules';
+export { isOverseas, isFeatureEnabled, useFeatureEnabled, type FeatureKey } from './utils/featureGate';

package/dist/index.js

@@ -2,6 +2,7 @@ export { AirConditioningCard } from "./components/airConditioningCard";
 export { CardContainer } from "./components/cardContainer";
 export { default as ContainerWithGap } from "./components/containerWithGap";
 export { FlatSelect, FlatOption } from "./components/flatSelect";
+export { LargeEntrance } from "./components/largeEntrance";
 export { GroupContainer } from "./components/groupContainer";
 export { OtherSettingCard } from "./components/otherSettingCard";
 export { SteeringWheelHotCard } from "./components/steeringWheelHotCard";
@@ -17,4 +18,5 @@ export { useDualRangeData } from "./hooks/useDualRangeData";
 export { useParkingStatusData } from "./hooks/useParkingStatusData";
 export { useSeatControlData, SeatSpecs, LEVEL_ICONS, TYPE_CONFIG, SEAT_TITLES } from "./hooks/useSeatControlData";
 export * from "./config";
-export * from "./modules";
+export * from "./modules";
+export { isOverseas, isFeatureEnabled, useFeatureEnabled } from "./utils/featureGate";

package/dist/modules/airconditionModule/README.md

@@ -158,7 +158,7 @@ const MyCustomAirCondition = ({ specs }) => {
   return (
     <View>
       <Text>{hvacTitle}</Text>
-      <Switch value={transformHvacStatus} onValueChange={onHvacStatusChange} />
+      <Switch checked={transformHvacStatus} onChange={onHvacStatusChange} />
       <Text>{insideCarTip}</Text>
       <Text>{outsideCarTip}</Text>
       <Slider

package/dist/utils/featureGate.d.ts

@@ -0,0 +1,5 @@
+export type FeatureKey = 'deviceRoaming' | 'smartScene' | 'automationEdit' | 'manualControlEdit';
+export declare const initFeatureGate: () => Promise<void>;
+export declare const isOverseas: () => boolean;
+export declare const isFeatureEnabled: (key: FeatureKey) => boolean;
+export declare const useFeatureEnabled: (key: FeatureKey) => boolean;

package/dist/utils/featureGate.js

@@ -0,0 +1,33 @@
+import { Service } from 'miot';
+import { create } from 'zustand';
+const OVERSEAS_DISABLED = {
+  deviceRoaming: true,
+  smartScene: true,
+  automationEdit: true,
+  manualControlEdit: true
+};
+const useFeatureGateStore = create(() => ({
+  isOverseas: false,
+  initialized: false
+}));
+export const initFeatureGate = () => {
+  if (useFeatureGateStore.getState().initialized) return Promise.resolve();
+  return Service.getServerName().then(res => {
+    const overseas = (res?.serverCode || 'cn') !== 'cn';
+    console.log(`[FeatureGate] init done: serverCode=${res?.serverCode}, isOverseas=${overseas}`);
+    useFeatureGateStore.setState({
+      isOverseas: overseas,
+      initialized: true
+    });
+  }).catch(() => {
+    useFeatureGateStore.setState({
+      initialized: true
+    });
+  });
+};
+export const isOverseas = () => useFeatureGateStore.getState().isOverseas;
+export const isFeatureEnabled = key => !(useFeatureGateStore.getState().isOverseas && OVERSEAS_DISABLED[key]);
+export const useFeatureEnabled = key => {
+  const overseas = useFeatureGateStore(s => s.isOverseas);
+  return !(overseas && OVERSEAS_DISABLED[key]);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miot-rn/car-component",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "./dist/index.js",
   "publishConfig": {
     "access": "public"
@@ -23,5 +23,5 @@
     "react-native": "^0.61.0",
     "react-native-svg": "9.5.3"
   },
-  "gitHead": "3e6285821f0cebb8cdce54ea0e2a6fa624453ef6"
+  "gitHead": "2920def2cc542a8d0efcf100814e477830d94bb3"
 }