@digitalc/dxp-ui 0.0.6-alpha.4 → 0.0.6-alpha.8

package/es/components/BaseSpin/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.less';
+declare const BaseSpin: (props: {
+    [x: string]: any;
+    children: any;
+    className: any;
+}) => React.JSX.Element;
+export default BaseSpin;

package/es/components/BaseSpin/index.js

@@ -0,0 +1,44 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/spin/style";
+import _Spin from "antd/es/spin";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className"];
+import React from 'react';
+import { getToken } from "../../utils/tokenHelper";
+import "./index.less";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Loading = function Loading() {
+  return /*#__PURE__*/_jsx("div", {
+    className: "loadingWrap",
+    children: /*#__PURE__*/_jsx("div", {
+      className: "loadingContainer",
+      children: /*#__PURE__*/_jsxs("span", {
+        className: "ant-spin-dot ant-spin-dot-spin",
+        children: [/*#__PURE__*/_jsx("i", {
+          className: "ant-spin-dot-item"
+        }), /*#__PURE__*/_jsx("i", {
+          className: "ant-spin-dot-item"
+        }), /*#__PURE__*/_jsx("i", {
+          className: "ant-spin-dot-item"
+        }), /*#__PURE__*/_jsx("i", {
+          className: "ant-spin-dot-item"
+        })]
+      })
+    })
+  });
+};
+var BaseSpin = function BaseSpin(props) {
+  var children = props.children,
+    className = props.className,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/_jsx(_Spin, _objectSpread(_objectSpread({
+    style: {
+      color: getToken('colorButtonBackgroundPrimary')
+    },
+    wrapperClassName: "loading ".concat(className),
+    indicator: /*#__PURE__*/_jsx(Loading, {})
+  }, otherProps), {}, {
+    children: children
+  }));
+};
+export default BaseSpin;

package/es/components/BaseSpin/index.less

@@ -0,0 +1,32 @@
+.loadingWrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0;
+  top: 0;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  // background: rgba(255,255,255,0.5);
+  z-index: 1;
+
+  .loading {
+    // color: @primary-color;
+    font-size: 48px;
+    font-weight: 900;
+  }
+
+  .loadingContainer {
+    border-radius: 16px;
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: none;
+    img {
+      width: 60px;
+      height: 60px;
+    }
+  }
+}

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

@@ -20,6 +20,7 @@ export interface INavigationProps {
     hidegoback?: boolean;
     rightLink?: RightLinkConfig;
     titleIconBadge?: TitleIconBadgeConfig;
+    titleStyle?: React.CSSProperties;
     title?: string;
     hideBorder?: boolean;
     className?: string;

package/es/components/Navigation/index.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["hideBorder", "className", "rightIcons", "rightLink", "title", "goBack", "isInverse", "titleIconBadge", "imgBackground", "noRight", "leftIconName", "leftIconSize", "hidegoback"];
+var _excluded = ["hideBorder", "className", "rightIcons", "rightLink", "title", "goBack", "isInverse", "titleIconBadge", "imgBackground", "noRight", "leftIconName", "leftIconSize", "hidegoback", "titleStyle"];
 import React from 'react';
 import { useDesignTokens } from "./designTokens";
 import { useStyleRegister } from '@ant-design/cssinjs';
@@ -29,6 +29,8 @@ var Navigation = function Navigation(_ref) {
     leftIconSize = _ref.leftIconSize,
     _ref$hidegoback = _ref.hidegoback,
     hidegoback = _ref$hidegoback === void 0 ? false : _ref$hidegoback,
+    _ref$titleStyle = _ref.titleStyle,
+    titleStyle = _ref$titleStyle === void 0 ? {} : _ref$titleStyle,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var designTokens = useDesignTokens();
   var spacingTopNavigationPaddingHorizontal = designTokens.spacingTopNavigationPaddingHorizontal,
@@ -87,6 +89,7 @@ var Navigation = function Navigation(_ref) {
           },
           type: titleIconBadge.iconName
         }), /*#__PURE__*/_jsx(Text, {
+          style: titleStyle,
           inverse: isInverse,
           size: "NavigationBold",
           className: "".concat(cssClasses.PREFIX, "-title ").concat(isInverse ? 'inverse' : '', " "),
@@ -96,6 +99,7 @@ var Navigation = function Navigation(_ref) {
           children: +titleIconBadge.badge > 99 ? '99+' : titleIconBadge.badge
         })]
       }) : /*#__PURE__*/_jsx(Text, {
+        style: titleStyle,
         inverse: isInverse,
         size: "NavigationBold",
         className: "".concat(cssClasses.PREFIX, "-title ").concat(isInverse ? 'inverse' : '', " "),

package/es/components/index.d.ts

@@ -67,3 +67,4 @@ export { default as AppStyleWrapper } from './AppStyleWrapper';
 export { default as Row } from './Row';
 export { default as Col } from './Col';
 export { default as GlobalTokenProvider } from './GlobalTokenProvider';
+export { default as BaseSpin } from './BaseSpin';

package/es/components/index.js

@@ -41,4 +41,5 @@ export { default as Radio } from "./Radio";
 export { default as AppStyleWrapper } from "./AppStyleWrapper";
 export { default as Row } from "./Row";
 export { default as Col } from "./Col";
-export { default as GlobalTokenProvider } from "./GlobalTokenProvider";
+export { default as GlobalTokenProvider } from "./GlobalTokenProvider";
+export { default as BaseSpin } from "./BaseSpin";

package/es/utils/deviceType.js

@@ -14,7 +14,10 @@ export var checkIsMobile = function checkIsMobile() {
   }
 
   // Check for touch points (more reliable for modern devices)
-  if (navigator.maxTouchPoints > 0) {
+  //  优先检测触摸屏 + 小屏幕（避免误判带触摸屏的台式机）
+  var hasTouch = navigator.maxTouchPoints > 0;
+  var isSmallScreen = window.matchMedia('(max-width: 768px)').matches;
+  if (hasTouch && isSmallScreen) {
     return true;
   }
 

package/es/utils/scaleTool.js

@@ -1,3 +1,4 @@
+import { checkIsMobile } from "./deviceType";
 var getViewportSize = function getViewportSize() {
   var _document$documentEle, _document$body, _document$documentEle2, _document$body2;
   if (typeof document === 'undefined') {
@@ -21,7 +22,7 @@ export var viewportSize = function viewportSize() {
 export var wScale = function wScale(size) {
   var _getViewportSize = getViewportSize(),
     width = _getViewportSize.width;
-  if (width < 375 || width > 768) {
+  if (width < 375 || width > 768 || !checkIsMobile()) {
     return size || 0;
   }
   return parseFloat((width / DesignWidth * (size || 0)).toFixed(1));
@@ -30,7 +31,7 @@ export var hScale = function hScale(size) {
   var _getViewportSize2 = getViewportSize(),
     height = _getViewportSize2.height,
     width = _getViewportSize2.width;
-  if (width < 375 || width > 768) {
+  if (width < 375 || width > 768 || !checkIsMobile()) {
     return size;
   }
   return parseFloat((height / DesignHeight * size).toFixed(1));

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.less';
+declare const BaseSpin: (props: {
+    [x: string]: any;
+    children: any;
+    className: any;
+}) => React.JSX.Element;
+export default BaseSpin;

package/lib/components/BaseSpin/index.js

@@ -0,0 +1,70 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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 __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/BaseSpin/index.tsx
+var BaseSpin_exports = {};
+__export(BaseSpin_exports, {
+  default: () => BaseSpin_default
+});
+module.exports = __toCommonJS(BaseSpin_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_tokenHelper = require("../../utils/tokenHelper");
+var import_index = require("./index.less");
+var Loading = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "loadingWrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "loadingContainer" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "ant-spin-dot ant-spin-dot-spin" }, /* @__PURE__ */ import_react.default.createElement("i", { className: "ant-spin-dot-item" }), /* @__PURE__ */ import_react.default.createElement("i", { className: "ant-spin-dot-item" }), /* @__PURE__ */ import_react.default.createElement("i", { className: "ant-spin-dot-item" }), /* @__PURE__ */ import_react.default.createElement("i", { className: "ant-spin-dot-item" }))));
+var BaseSpin = (props) => {
+  const _a = props, { children, className } = _a, otherProps = __objRest(_a, ["children", "className"]);
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, __spreadValues({ style: { color: (0, import_tokenHelper.getToken)("colorButtonBackgroundPrimary") }, wrapperClassName: `loading ${className}`, indicator: /* @__PURE__ */ import_react.default.createElement(Loading, null) }, otherProps), children);
+};
+var BaseSpin_default = BaseSpin;

package/lib/components/BaseSpin/index.less

@@ -0,0 +1,32 @@
+.loadingWrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0;
+  top: 0;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  // background: rgba(255,255,255,0.5);
+  z-index: 1;
+
+  .loading {
+    // color: @primary-color;
+    font-size: 48px;
+    font-weight: 900;
+  }
+
+  .loadingContainer {
+    border-radius: 16px;
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: none;
+    img {
+      width: 60px;
+      height: 60px;
+    }
+  }
+}

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

@@ -20,6 +20,7 @@ export interface INavigationProps {
     hidegoback?: boolean;
     rightLink?: RightLinkConfig;
     titleIconBadge?: TitleIconBadgeConfig;
+    titleStyle?: React.CSSProperties;
     title?: string;
     hideBorder?: boolean;
     className?: string;

package/lib/components/Navigation/index.js

@@ -81,7 +81,8 @@ var Navigation = (_a) => {
     noRight = false,
     leftIconName,
     leftIconSize,
-    hidegoback = false
+    hidegoback = false,
+    titleStyle = {}
   } = _b, restProps = __objRest(_b, [
     "hideBorder",
     "className",
@@ -95,7 +96,8 @@ var Navigation = (_a) => {
     "noRight",
     "leftIconName",
     "leftIconSize",
-    "hidegoback"
+    "hidegoback",
+    "titleStyle"
   ]);
   var _a2;
   const designTokens = (0, import_designTokens.useDesignTokens)();
@@ -178,7 +180,7 @@ var Navigation = (_a) => {
       )
     }, restProps),
     !hidegoback && /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { className: `${import_constants.cssClasses.PREFIX}-header-back`, customIconSize: leftIconSize, inverse: isInverse, size: "medium", name: leftIconName || "icon-a-Backarrow-copy", onClick: onGoBack }),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${import_constants.cssClasses.PREFIX}-title-warp`, { hasIconBage: !(0, import_lodash.isEmpty)(titleIconBadge) }) }, !(0, import_lodash.isEmpty)(titleIconBadge) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-title-badge` }, /* @__PURE__ */ import_react.default.createElement(import__.Icon, { inverse: isInverse, size: 24, style: { marginRight: "4px" }, type: titleIconBadge.iconName }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, titleIconBadge.title), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-badge` }, +titleIconBadge.badge > 99 ? "99+" : titleIconBadge.badge)) : /* @__PURE__ */ import_react.default.createElement(import__.Text, { inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, title)),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${import_constants.cssClasses.PREFIX}-title-warp`, { hasIconBage: !(0, import_lodash.isEmpty)(titleIconBadge) }) }, !(0, import_lodash.isEmpty)(titleIconBadge) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-title-badge` }, /* @__PURE__ */ import_react.default.createElement(import__.Icon, { inverse: isInverse, size: 24, style: { marginRight: "4px" }, type: titleIconBadge.iconName }), /* @__PURE__ */ import_react.default.createElement(import__.Text, { style: titleStyle, inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, titleIconBadge.title), /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_constants.cssClasses.PREFIX}-badge` }, +titleIconBadge.badge > 99 ? "99+" : titleIconBadge.badge)) : /* @__PURE__ */ import_react.default.createElement(import__.Text, { style: titleStyle, inverse: isInverse, size: "NavigationBold", className: `${import_constants.cssClasses.PREFIX}-title ${isInverse ? "inverse" : ""} ` }, title)),
     !noRight && /* @__PURE__ */ import_react.default.createElement(import__.IconButtonGroup, { className: `${import_constants.cssClasses.PREFIX}-rightWarp` }, (_a2 = rightIcons == null ? void 0 : rightIcons.slice(0, 3)) == null ? void 0 : _a2.map((i, index) => /* @__PURE__ */ import_react.default.createElement(import__.IconButton, { inverse: isInverse, key: index, name: i.iconName, size: "medium", onClick: i.onIconClick })), !(0, import_lodash.isEmpty)(rightLink) && /* @__PURE__ */ import_react.default.createElement(import__.TextLink, { inverse: isInverse, className: `${import_constants.cssClasses.PREFIX}-right-link`, type: import__.TextLinkEnum.default, text: rightLink.linkText, onClick: rightLink.onLinkClick }))
   );
 };

package/lib/components/index.d.ts

@@ -67,3 +67,4 @@ export { default as AppStyleWrapper } from './AppStyleWrapper';
 export { default as Row } from './Row';
 export { default as Col } from './Col';
 export { default as GlobalTokenProvider } from './GlobalTokenProvider';
+export { default as BaseSpin } from './BaseSpin';

package/lib/components/index.js

@@ -37,6 +37,7 @@ __export(components_exports, {
   AmountTitleTypes: () => import_Amount.AmountTitleTypes,
   AppStyleWrapper: () => import_AppStyleWrapper.default,
   BackImageEnum: () => import_Image2.BackImageEnum,
+  BaseSpin: () => import_BaseSpin.default,
   Button: () => import_Button.default,
   Card: () => import_Card.default,
   Checkbox: () => import_Checkbox.default,
@@ -122,3 +123,4 @@ var import_AppStyleWrapper = __toESM(require("./AppStyleWrapper"));
 var import_Row = __toESM(require("./Row"));
 var import_Col = __toESM(require("./Col"));
 var import_GlobalTokenProvider = __toESM(require("./GlobalTokenProvider"));
+var import_BaseSpin = __toESM(require("./BaseSpin"));

package/lib/utils/deviceType.js

@@ -33,7 +33,9 @@ var checkIsMobile = () => {
   if (typeof window === "undefined") {
     return false;
   }
-  if (navigator.maxTouchPoints > 0) {
+  const hasTouch = navigator.maxTouchPoints > 0;
+  const isSmallScreen = window.matchMedia("(max-width: 768px)").matches;
+  if (hasTouch && isSmallScreen) {
     return true;
   }
   const userAgent = navigator.userAgent || navigator.vendor || window.opera;

package/lib/utils/scaleTool.js

@@ -27,6 +27,7 @@ __export(scaleTool_exports, {
   wScale: () => wScale
 });
 module.exports = __toCommonJS(scaleTool_exports);
+var import_deviceType = require("./deviceType");
 var getViewportSize = () => {
   var _a, _b, _c, _d;
   if (typeof document === "undefined") {
@@ -42,14 +43,14 @@ var DesignHeight = 812;
 var viewportSize = () => getViewportSize();
 var wScale = (size) => {
   const { width } = getViewportSize();
-  if (width < 375 || width > 768) {
+  if (width < 375 || width > 768 || !(0, import_deviceType.checkIsMobile)()) {
     return size || 0;
   }
   return parseFloat((width / DesignWidth * (size || 0)).toFixed(1));
 };
 var hScale = (size) => {
   const { height, width } = getViewportSize();
-  if (width < 375 || width > 768) {
+  if (width < 375 || width > 768 || !(0, import_deviceType.checkIsMobile)()) {
     return size;
   }
   return parseFloat((height / DesignHeight * size).toFixed(1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalc/dxp-ui",
-  "version": "0.0.6-alpha.4",
+  "version": "0.0.6-alpha.8",
   "description": "A UI library of Digitalc Design React Component",
   "type": "module",
   "keywords": [