@digitalc/dxp-ui 0.0.5-alpha.10 → 0.0.5-alpha.11

package/lib/components/Image/index.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 export type backImageRadio = 1 | 2 | 0.68;
+export declare const BackImageEunm: Record<string, backImageRadio>;
 export interface IImageProps {
     src?: string;
     radio?: backImageRadio;
     imageSize?: number | string;
     style?: React.CSSProperties;
+    className?: string;
 }
 declare const Image: (props: IImageProps) => React.JSX.Element;
 export default Image;

package/lib/components/Image/index.js

@@ -55,21 +55,31 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Image/index.tsx
 var Image_exports = {};
 __export(Image_exports, {
+  BackImageEunm: () => BackImageEunm,
   default: () => Image_default
 });
 module.exports = __toCommonJS(Image_exports);
 var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_constants = require("../../constants");
+var BackImageEunm = {
+  whRadio1: 1,
+  whRadio2: 2,
+  whRadio3: 0.68
+};
 var Image = (props) => {
   const _a = props, {
     src,
     style,
     imageSize,
-    radio = 2
+    radio = BackImageEunm.whRadio2,
+    className
   } = _a, otherProps = __objRest(_a, [
     "src",
     "style",
     "imageSize",
-    "radio"
+    "radio",
+    "className"
   ]);
   const mergedStyle = imageSize ? __spreadValues({
     width: imageSize,
@@ -77,6 +87,16 @@ var Image = (props) => {
     aspectRatio: `${radio}`,
     objectFit: "cover"
   }, style) : __spreadValues({}, style);
-  return /* @__PURE__ */ import_react.default.createElement("img", __spreadValues({ src, style: mergedStyle }, otherProps));
+  return /* @__PURE__ */ import_react.default.createElement(
+    "img",
+    __spreadValues({
+      className: (0, import_classnames.default)(
+        `${import_constants.cssClasses.PREFIX}-image}`,
+        className
+      ),
+      src,
+      style: mergedStyle
+    }, otherProps)
+  );
 };
 var Image_default = Image;

package/lib/components/ListItem/designTokens.d.ts

@@ -0,0 +1,30 @@
+declare const designTokens: {
+    sizingListItemIconImage: any;
+    sizingListItemIconIcon: any;
+    sizingListItemIconIconStatus: any;
+    sizingListItemImageImage: any;
+    sizingListItemImageIcon: any;
+    sizingListItemImageIconLg: any;
+    sizingListItemImageThumbnail: any;
+    sizingListItemIcon: any;
+    sizingListItemIconLg: any;
+    spacingListItemIconStatusPaddingRight: any;
+    spacingListItemIconPaddingLeft: any;
+    spacingListItemImagePaddingRight: any;
+    spacingListItemIconImagePaddingVertical: any;
+    spacingListItemIconImagePaddingHorizontal: any;
+    spacingListItemIconIconPaddingVertical: any;
+    spacingListItemIconIconPaddingHorizontal: any;
+    spacingListItemImageIconPaddingRight: any;
+    spacingListItemImagePointsPaddingTop: any;
+    colorListItemIconBackground: any;
+    colorListItemIconSubtle: any;
+    colorListItemIcon: any;
+    borderRadiusListItem: any;
+    colorListItemBackground: any;
+    spacingListItemTextPaddingHorizontal: any;
+    colorListItemTextTitle: any;
+    colorListItemTextSubtitle: any;
+    colorListItemTextPoints: any;
+};
+export default designTokens;

package/lib/components/ListItem/designTokens.js

@@ -0,0 +1,65 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ListItem/designTokens.ts
+var designTokens_exports = {};
+__export(designTokens_exports, {
+  default: () => designTokens_default
+});
+module.exports = __toCommonJS(designTokens_exports);
+var import_tokenManager = __toESM(require("../../utils/tokenManager"));
+var designTokens = {
+  sizingListItemIconImage: import_tokenManager.default.tokenKey("sizingListItemIconImage"),
+  sizingListItemIconIcon: import_tokenManager.default.tokenKey("sizingListItemIconIcon"),
+  sizingListItemIconIconStatus: import_tokenManager.default.tokenKey("sizingListItemIconIconStatus"),
+  sizingListItemImageImage: import_tokenManager.default.tokenKey("sizingListItemImageImage"),
+  sizingListItemImageIcon: import_tokenManager.default.tokenKey("sizingListItemImageIcon"),
+  sizingListItemImageIconLg: import_tokenManager.default.tokenKey("sizingListItemImageIconLg"),
+  sizingListItemImageThumbnail: import_tokenManager.default.tokenKey("sizingListItemImageThumbnail"),
+  sizingListItemIcon: import_tokenManager.default.tokenKey("sizingListItemIcon"),
+  sizingListItemIconLg: import_tokenManager.default.tokenKey("sizingListItemIconLg"),
+  spacingListItemIconStatusPaddingRight: import_tokenManager.default.tokenKey("spacingListItemIconStatusPaddingRight"),
+  spacingListItemIconPaddingLeft: import_tokenManager.default.tokenKey("spacingListItemIconPaddingLeft"),
+  spacingListItemImagePaddingRight: import_tokenManager.default.tokenKey("spacingListItemImagePaddingRight"),
+  spacingListItemIconImagePaddingVertical: import_tokenManager.default.tokenKey("spacingListItemIconImagePaddingVertical"),
+  spacingListItemIconImagePaddingHorizontal: import_tokenManager.default.tokenKey("spacingListItemIconImagePaddingHorizontal"),
+  spacingListItemIconIconPaddingVertical: import_tokenManager.default.tokenKey("spacingListItemIconIconPaddingVertical"),
+  spacingListItemIconIconPaddingHorizontal: import_tokenManager.default.tokenKey("spacingListItemIconIconPaddingHorizontal"),
+  spacingListItemImageIconPaddingRight: import_tokenManager.default.tokenKey("spacingListItemImageIconPaddingRight"),
+  spacingListItemImagePointsPaddingTop: import_tokenManager.default.tokenKey("spacingListItemImagePointsPaddingTop"),
+  colorListItemIconBackground: import_tokenManager.default.tokenKey("colorListItemIconBackground"),
+  colorListItemIconSubtle: import_tokenManager.default.tokenKey("colorListItemIconSubtle"),
+  colorListItemIcon: import_tokenManager.default.tokenKey("colorListItemIcon"),
+  borderRadiusListItem: import_tokenManager.default.tokenKey("borderRadiusListItem"),
+  colorListItemBackground: import_tokenManager.default.tokenKey("colorListItemBackground"),
+  spacingListItemTextPaddingHorizontal: import_tokenManager.default.tokenKey("spacingListItemTextPaddingHorizontal"),
+  colorListItemTextTitle: import_tokenManager.default.tokenKey("colorListItemTextTitle"),
+  colorListItemTextSubtitle: import_tokenManager.default.tokenKey("colorListItemTextSubtitle"),
+  colorListItemTextPoints: import_tokenManager.default.tokenKey("colorListItemTextPoints")
+};
+var designTokens_default = designTokens;

package/lib/components/ListItem/index.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import './style/index.less';
+export declare const ListItemTypes: {
+    readonly ListItemIcon: "ListItemIcon";
+    readonly ListItemImage: "ListItemImage";
+    readonly ListItemOther: "ListItemOther";
+};
+export declare const TAPPABLE_AREAS: {
+    readonly ALL: "ALL";
+    readonly EXPECT_IMAGE: "EXPECT_IMAGE";
+};
+export declare const ListItemRightTypes: {
+    readonly Toggle: "Toggle";
+    readonly Link: "Link";
+    readonly Status: "Status";
+    readonly Default: "Default";
+};
+export type ListItemType = typeof ListItemTypes[keyof typeof ListItemTypes];
+export type ListItemRightType = typeof ListItemRightTypes[keyof typeof ListItemRightTypes];
+export type TappableAreaType = typeof TAPPABLE_AREAS[keyof typeof TAPPABLE_AREAS];
+export interface IIconConfig {
+    iconStyle: React.CSSProperties;
+    iconName: string;
+}
+export interface ISubIconValueConfig {
+    value: string;
+    iconName: string;
+}
+export interface IListItemProps {
+    listType: ListItemType;
+    leftIcon?: IIconConfig;
+    leftImageSrc?: string;
+    title: string;
+    subTitle?: string;
+    listItemRightType?: ListItemRightType;
+    showToggle?: boolean;
+    toggleChecked?: boolean;
+    onToggleChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    showLink?: boolean;
+    LinkName?: string;
+    onLinkClick?: () => void;
+    showStatus?: boolean;
+    statusIconName?: string;
+    statusIconColor?: string;
+    subTitleUp?: boolean;
+    tagName?: string;
+    showTag?: boolean;
+    subIconObj?: ISubIconValueConfig;
+    leftThumbnail?: string;
+    showRightBtn?: boolean;
+    onRightBtnClick?: () => void;
+    rightBtnTxt?: string;
+    showRightIcon?: boolean;
+    rightIconName?: string;
+    onRightIconClick?: () => void;
+    tappableArea?: TappableAreaType;
+    tappableAreaClick?: () => void;
+}
+declare const ListItem: React.FC<IListItemProps>;
+export default ListItem;

package/lib/components/ListItem/index.js

@@ -0,0 +1,348 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ListItem/index.tsx
+var ListItem_exports = {};
+__export(ListItem_exports, {
+  ListItemRightTypes: () => ListItemRightTypes,
+  ListItemTypes: () => ListItemTypes,
+  TAPPABLE_AREAS: () => TAPPABLE_AREAS,
+  default: () => ListItem_default
+});
+module.exports = __toCommonJS(ListItem_exports);
+var import_react = __toESM(require("react"));
+var import_designTokens = __toESM(require("./designTokens"));
+var import_cssinjs = require("@ant-design/cssinjs");
+var import_lodash = require("lodash");
+var import_theme = require("../../utils/theme");
+var import__ = require("../index");
+var import_constants = require("../../constants");
+var import_style = require("./style/index.less");
+var ListItemTypes = {
+  ListItemIcon: "ListItemIcon",
+  ListItemImage: "ListItemImage",
+  ListItemOther: "ListItemOther"
+};
+var TAPPABLE_AREAS = {
+  ALL: "ALL",
+  // 点击全部区域
+  EXPECT_IMAGE: "EXPECT_IMAGE"
+  // 除了坐车的图片区域
+};
+var ListItemRightTypes = {
+  Toggle: "Toggle",
+  Link: "Link",
+  Status: "Status",
+  Default: "Default"
+};
+var ListItem = (_a) => {
+  var _b = _a, {
+    listType,
+    leftIcon,
+    leftImageSrc,
+    title,
+    subTitle,
+    onToggleChange,
+    toggleChecked,
+    showToggle,
+    showLink,
+    LinkName,
+    onLinkClick,
+    showStatus,
+    statusIconName = "icon-Attention",
+    statusIconColor = "#BC1430",
+    subTitleUp = false,
+    tagName,
+    showTag = false,
+    subIconObj,
+    leftThumbnail,
+    showRightBtn = false,
+    onRightBtnClick,
+    rightBtnTxt,
+    showRightIcon = false,
+    rightIconName,
+    onRightIconClick,
+    tappableArea,
+    tappableAreaClick
+  } = _b, restProps = __objRest(_b, [
+    "listType",
+    "leftIcon",
+    "leftImageSrc",
+    "title",
+    "subTitle",
+    "onToggleChange",
+    "toggleChecked",
+    "showToggle",
+    "showLink",
+    "LinkName",
+    "onLinkClick",
+    "showStatus",
+    "statusIconName",
+    "statusIconColor",
+    "subTitleUp",
+    "tagName",
+    "showTag",
+    "subIconObj",
+    "leftThumbnail",
+    "showRightBtn",
+    "onRightBtnClick",
+    "rightBtnTxt",
+    "showRightIcon",
+    "rightIconName",
+    "onRightIconClick",
+    "tappableArea",
+    "tappableAreaClick"
+  ]);
+  const {
+    sizingListItemImageImage,
+    borderRadiusListItem,
+    colorListItemBackground,
+    // spacingListItemIconImagePaddingHorizontal,
+    // spacingListItemIconImagePaddingVertical,
+    colorListItemIconBackground,
+    // sizingListItemIconImage,
+    spacingListItemTextPaddingHorizontal,
+    sizingListItemIconIcon,
+    colorListItemTextTitle,
+    colorListItemTextSubtitle,
+    colorListItemIconSubtle,
+    // sizingListItemImageIconLg,
+    sizingListItemImageIcon,
+    spacingListItemImageIconPaddingRight,
+    colorListItemTextPoints,
+    sizingListItemImageThumbnail,
+    sizingListItemIconLg
+  } = import_designTokens.default;
+  const useCustomButtonStyle = () => {
+    const hashId = (0, import_cssinjs.useStyleRegister)({
+      theme: import_theme.theme,
+      token: {},
+      path: [`${import_constants.cssClasses.PREFIX}-list-item `]
+    }, () => `
+      .${import_constants.cssClasses.PREFIX}-list-item  {
+        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.12);
+        border-radius: ${borderRadiusListItem || 8}px;
+        background-color:${colorListItemBackground || "#fff"};
+        &.noShadow{
+          box-shadow:none !important;
+        }
+        .${import_constants.cssClasses.PREFIX}-icon-container {
+          background:${colorListItemIconBackground || "#F5F5F8"};
+          margin-right:${spacingListItemTextPaddingHorizontal}px;
+        }
+        .${import_constants.cssClasses.PREFIX}-image-container {
+          margin-right:${spacingListItemTextPaddingHorizontal}px;
+        }
+      }
+      .${import_constants.cssClasses.PREFIX}-item-right {
+        padding-right:${spacingListItemTextPaddingHorizontal}px;
+      }
+      .${import_constants.cssClasses.PREFIX}-status-warp {
+        padding-left: ${spacingListItemTextPaddingHorizontal}px;
+      }
+      .${import_constants.cssClasses.PREFIX}-item-title {
+        color:${colorListItemTextTitle};
+      }
+      .${import_constants.cssClasses.PREFIX}-item-subTitle {
+        color:${colorListItemTextSubtitle};
+      }
+     
+      .${import_constants.cssClasses.PREFIX}-sub-icon-title {
+        color:${colorListItemTextPoints};
+        margin-left:${spacingListItemImageIconPaddingRight}px;
+      }
+      .${import_constants.cssClasses.PREFIX}-right-btn {
+         min-width:60px !important;
+      }
+    `);
+    return hashId;
+  };
+  useCustomButtonStyle();
+  const onAllClick = () => {
+    if (tappableArea === TAPPABLE_AREAS.ALL && tappableAreaClick) {
+      tappableAreaClick();
+    }
+    ;
+  };
+  const onExceptImgClick = (e) => {
+    if (tappableArea === TAPPABLE_AREAS.EXPECT_IMAGE && tappableAreaClick) {
+      e == null ? void 0 : e.stopPropagation();
+      tappableAreaClick();
+    }
+    ;
+  };
+  const onTextLinkClick = (e) => {
+    e == null ? void 0 : e.stopPropagation();
+    if (onLinkClick) {
+      onLinkClick();
+    }
+  };
+  const onSwicthChange = (checked, event) => {
+    event == null ? void 0 : event.stopPropagation();
+    if (onToggleChange) {
+      onToggleChange(checked, event);
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    __spreadProps(__spreadValues({
+      className: `
+        ${import_constants.cssClasses.PREFIX}-list-item 
+        ${listType === ListItemTypes.ListItemOther ? "noShadow" : ""}
+      `
+    }, restProps), {
+      onClick: onAllClick
+    }),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `
+        ${import_constants.cssClasses.PREFIX}-item-left 
+      `
+      },
+      listType === ListItemTypes.ListItemIcon && !(0, import_lodash.isEmpty)(leftIcon) && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${import_constants.cssClasses.PREFIX}-icon-container`
+        },
+        /* @__PURE__ */ import_react.default.createElement(import__.Icon, { name: leftIcon ? leftIcon.iconName : "", size: sizingListItemIconIcon, style: leftIcon ? leftIcon.iconStyle : {} })
+      ),
+      listType === ListItemTypes.ListItemImage && leftImageSrc && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${import_constants.cssClasses.PREFIX}-image-container`
+        },
+        /* @__PURE__ */ import_react.default.createElement(import__.Image, { radio: 1, src: leftImageSrc, imageSize: sizingListItemImageImage || 104 }),
+        showTag && /* @__PURE__ */ import_react.default.createElement(
+          import__.Tag,
+          {
+            types: "red",
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              justifyContent: "center"
+            },
+            block: true
+          },
+          tagName
+        )
+      ),
+      listType === ListItemTypes.ListItemOther && leftThumbnail && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${import_constants.cssClasses.PREFIX}-image-container`
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import__.Image,
+          {
+            radio: import__.BackImageEunm.whRadio1,
+            src: leftThumbnail,
+            imageSize: sizingListItemImageThumbnail || 56,
+            style: { borderRadius: `${borderRadiusListItem}px`, margin: "10px 0" }
+          }
+        )
+      )
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `
+        ${import_constants.cssClasses.PREFIX}-item-right 
+      `,
+        onClick: onExceptImgClick
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-title-sub-warp` }, subTitleUp && /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", className: `${import_constants.cssClasses.PREFIX}-item-subTitle` }, subTitle), /* @__PURE__ */ import_react.default.createElement(
+        import__.Text,
+        {
+          size: "ContentC14Bold",
+          className: `${import_constants.cssClasses.PREFIX}-item-title     
+               ${subTitle ? "line1" : "line2"} 
+              }`
+        },
+        title
+      ), !subTitleUp && /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", className: `${import_constants.cssClasses.PREFIX}-item-subTitle` }, subTitle), !(0, import_lodash.isEmpty)(subIconObj) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-sub-icon` }, /* @__PURE__ */ import_react.default.createElement(import__.Icon, { name: subIconObj.iconName, color: colorListItemIconSubtle, size: sizingListItemImageIcon || 20 }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { size: "ContentC12Regular", className: `${import_constants.cssClasses.PREFIX}-sub-icon-title` }, subIconObj.value))),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-status-warp` }, showToggle && /* @__PURE__ */ import_react.default.createElement(import__.Toggle, { size: "small", checked: toggleChecked, onChange: onSwicthChange }), showLink && /* @__PURE__ */ import_react.default.createElement(import__.TextLink, { className: `${import_constants.cssClasses.PREFIX}-right-link`, type: import__.TextLinkEnum.default, text: LinkName, onClick: onTextLinkClick }), showStatus && /* @__PURE__ */ import_react.default.createElement(import__.Icon, { name: statusIconName || "", size: sizingListItemIconIcon, color: statusIconColor }), showRightBtn && /* @__PURE__ */ import_react.default.createElement(
+        import__.Button,
+        {
+          className: `${import_constants.cssClasses.PREFIX}-right-btn`,
+          onClick: (e) => {
+            e.stopPropagation();
+            if (onRightBtnClick) {
+              onRightBtnClick();
+            }
+          }
+        },
+        rightBtnTxt
+      ), showRightIcon && /* @__PURE__ */ import_react.default.createElement(
+        import__.Icon,
+        {
+          name: rightIconName || "",
+          size: sizingListItemIconLg,
+          onClick: (e) => {
+            e.stopPropagation();
+            if (onRightIconClick) {
+              onRightIconClick();
+            }
+          }
+        }
+      ))
+    )
+  );
+};
+var ListItem_default = ListItem;

package/lib/components/ListItem/style/index.less

@@ -0,0 +1,77 @@
+@import './variables.less';
+
+.@{prefix}-list-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow: hidden;
+
+  .@{prefix}-item-left {
+
+    .@{prefix}-icon-container {
+      width: 80px;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .@{prefix}-image-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      position: relative;
+    }
+
+  }
+
+  .@{prefix}-item-right {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .@{prefix}-title-sub-warp {
+      flex: 1;
+      overflow: hidden;
+
+      .@{prefix}-item-title {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-box-orient: vertical;
+
+        &.line1 {
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        &.line2 {
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+
+      .@{prefix}-item-subTitle {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .@{prefix}-sub-icon {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+}

package/lib/components/ListItem/style/variables.less

@@ -0,0 +1 @@
+@import '../../../style/variables.less';

package/lib/components/Navigation/index.d.ts

@@ -23,6 +23,7 @@ export interface INavigationProps {
     className?: string;
     goBack?: () => void;
     isInverse?: boolean;
+    noRight?: boolean;
 }
 declare const Navigation: React.FC<INavigationProps>;
 export default Navigation;