@trionesdev/antd-mobile-base-react 0.0.2-beta.1 → 0.0.2-beta.11

package/dist/Rate/style.scss

@@ -1,37 +1,37 @@
-$rateCls: 'triones-antm-rate';
-
-.#{$rateCls} {
-  display: inline-flex;
-  align-items: center;
-
-  &-star-wrapper {
-    position: relative;
-    padding: 0 2px;
-    cursor: pointer;
-  }
-
-  &-star {
-    font-size: 20px;
-    color: var(--inactive-color, #e8e8e8);
-    transition: color 0.3s;
-
-    &-active {
-      color: var(--active-color, #ffb400);
-    }
-  }
-
-  &-star-half-item {
-    position: absolute;
-    left: 2px;
-    top: 0;
-    width: 42%;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  &-readonly {
-    .#{$rateCls}-star-wrapper {
-      cursor: default;
-    }
-  }
-}
+$rateCls: 'triones-antm-rate';
+
+.#{$rateCls} {
+  display: inline-flex;
+  align-items: center;
+
+  &-star-wrapper {
+    position: relative;
+    padding: 0 2px;
+    cursor: pointer;
+  }
+
+  &-star {
+    font-size: 20px;
+    color: var(--inactive-color, #e8e8e8);
+    transition: color 0.3s;
+
+    &-active {
+      color: var(--active-color, #ffb400);
+    }
+  }
+
+  &-star-half-item {
+    position: absolute;
+    left: 2px;
+    top: 0;
+    width: 42%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  &-readonly {
+    .#{$rateCls}-star-wrapper {
+      cursor: default;
+    }
+  }
+}

package/dist/Result/demo/base.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 declare const _default: () => React.JSX.Element;
 export default _default;
-//# sourceMappingURL=base.d.ts.map

package/dist/Result/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import { DemoBlock } from "../../DemoBlock";
 import React from 'react';

package/dist/Result/index.d.ts

@@ -1,4 +1,3 @@
 import { Result } from './result';
 export type { ResultProps } from './result';
 export default Result;
-//# sourceMappingURL=index.d.ts.map

package/dist/Result/result.d.ts

@@ -8,4 +8,3 @@ export type ResultProps = {
     icon?: ReactNode;
 } & NativeProps;
 export declare const Result: FC<ResultProps>;
-//# sourceMappingURL=result.d.ts.map

package/dist/Result/style.scss

@@ -1,73 +1,73 @@
-$class-prefix-result: 'triones-antm-result';
-/* prettier-ignore */
-.#{$class-prefix-result} {
-  padding: 32PX 12PX;
-  background-color: var(--triones-antm-color-background);
-
-  &-icon {
-    box-sizing: border-box;
-    width: 64PX;
-    height: 64PX;
-    margin: 0 auto 20PX auto;
-    padding: 6PX;
-
-    .antd-mobile-icon {
-      font-size: 52PX;
-    }
-  }
-
-  &-title {
-    color: var(--triones-antm-color-text);
-    font-size: var(--triones-antm-font-size-10);
-    line-height: 1.4;
-    text-align: center;
-  }
-
-  &-description {
-    margin-top: 8PX;
-    color: var(--triones-antm-color-weak);
-    font-size: var(--triones-antm-font-size-main);
-    line-height: 1.4;
-    text-align: center;
-  }
-}
-
-.#{$class-prefix-result}-success {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-primary);
-    }
-  }
-}
-
-.#{$class-prefix-result}-error {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-danger);
-    }
-  }
-}
-
-.#{$class-prefix-result}-info {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-primary);
-    }
-  }
-}
-
-.#{$class-prefix-result}-waiting {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-success);
-    }
-  }
-}
-
-.#{$class-prefix-result}-warning {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-warning);
-    }
-  }
-}
+$class-prefix-result: 'triones-antm-result';
+/* prettier-ignore */
+.#{$class-prefix-result} {
+  padding: 32PX 12PX;
+  background-color: var(--triones-antm-color-background);
+
+  &-icon {
+    box-sizing: border-box;
+    width: 64PX;
+    height: 64PX;
+    margin: 0 auto 20PX auto;
+    padding: 6PX;
+
+    .antd-mobile-icon {
+      font-size: 52PX;
+    }
+  }
+
+  &-title {
+    color: var(--triones-antm-color-text);
+    font-size: var(--triones-antm-font-size-10);
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  &-description {
+    margin-top: 8PX;
+    color: var(--triones-antm-color-weak);
+    font-size: var(--triones-antm-font-size-main);
+    line-height: 1.4;
+    text-align: center;
+  }
+}
+
+.#{$class-prefix-result}-success {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-error {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-danger);
+    }
+  }
+}
+
+.#{$class-prefix-result}-info {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-waiting {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-success);
+    }
+  }
+}
+
+.#{$class-prefix-result}-warning {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-warning);
+    }
+  }
+}

package/dist/Result/use-result-icon.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
 export declare const useResultIcon: (status?: 'success' | 'error' | 'info' | 'waiting' | 'warning') => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null;
-//# sourceMappingURL=use-result-icon.d.ts.map

package/dist/SafeArea/index.d.ts

@@ -2,4 +2,3 @@ import { SafeArea } from './safe-area';
 import './style.scss';
 export type { SafeAreaProps } from './safe-area';
 export default SafeArea;
-//# sourceMappingURL=index.d.ts.map

package/dist/SafeArea/safe-area.d.ts

@@ -12,4 +12,3 @@ export type SafeAreaProps = {
     bottom?: boolean;
 } & NativeProps;
 export declare const SafeArea: FC<SafeAreaProps>;
-//# sourceMappingURL=safe-area.d.ts.map

package/dist/SafeArea/style.scss

@@ -1,18 +1,20 @@
-@use "../style/variable" as *;
-
-$class-prefix-safe-area: 'triones-antm-safe-area';
-
-.#{$class-prefix-safe-area} {
-  height: 100%;
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-
-  &-position-top {
-    padding-top: calc(env(safe-area-inset-top) * $trionesSafeAreaMultiple);
-  }
-
-  &-position-bottom {
-    padding-bottom: calc(env(safe-area-inset-bottom) * $trionesSafeAreaMultiple);
-  }
-}
+@use "../style/variable" as variable;
+
+$class-prefix-safe-area: 'triones-antm-safe-area';
+
+$safeAreaMultiple : variable.$trionesSafeAreaMultiple;
+
+.#{$class-prefix-safe-area} {
+  height: 100%;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+
+  &-position-top {
+    padding-top: calc(env(safe-area-inset-top) * $safeAreaMultiple);
+  }
+
+  &-position-bottom {
+    padding-bottom: calc(env(safe-area-inset-bottom) * $safeAreaMultiple);
+  }
+}

package/dist/Scaffold/index.d.ts

@@ -1,4 +1,3 @@
 import { Scaffold, ScaffoldProps } from './scaffold';
 export type { ScaffoldProps };
 export default Scaffold;
-//# sourceMappingURL=index.d.ts.map

package/dist/Scaffold/scaffold.d.ts

@@ -9,4 +9,3 @@ export type ScaffoldProps = {
     bottomSafeArea?: boolean;
 };
 export declare const Scaffold: FC<ScaffoldProps>;
-//# sourceMappingURL=scaffold.d.ts.map

package/dist/Scaffold/style.scss

@@ -1,16 +1,17 @@
-@use "../style/variable" as *;
-
-
-$trionesScaffoldCls: 'triones-antm-scaffold';
-
-.#{$trionesScaffoldCls} {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  &-body {
-    flex: 1 auto;
-    overflow: hidden;
-  }
-}
+@use "../style/variable" as variable;
+
+
+$trionesScaffoldCls: 'triones-antm-scaffold';
+
+.#{$trionesScaffoldCls} {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: variable.$trionesColorBgScaffold;
+
+  &-body {
+    flex: 1 auto;
+    overflow: hidden;
+  }
+}

package/dist/Skeleton/Skeleton.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import './style.scss';
+export interface SkeletonProps {
+    /** 是否显示骨架屏 */
+    loading?: boolean;
+    /** 骨架屏类型：text, circle, rect */
+    type?: 'text' | 'circle' | 'rect';
+    /** 宽度 */
+    width?: string | number;
+    /** 高度 */
+    height?: string | number;
+    /** 圆角大小，仅在type为circle时生效 */
+    radius?: string | number;
+    /** 显示多行文本骨架，仅在type为text时生效 */
+    rows?: number;
+    /** 是否显示动画效果 */
+    animated?: boolean;
+    /** 自定义样式类名 */
+    className?: string;
+    /** 自定义内联样式 */
+    style?: React.CSSProperties;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 是否是圆角矩形 */
+    round?: boolean;
+}
+export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/Skeleton/Skeleton.js

@@ -0,0 +1,72 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import "./style.scss";
+export var Skeleton = function Skeleton(_ref) {
+  var _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? true : _ref$loading,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
+    width = _ref.width,
+    height = _ref.height,
+    radius = _ref.radius,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? 1 : _ref$rows,
+    _ref$animated = _ref.animated,
+    animated = _ref$animated === void 0 ? true : _ref$animated,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style,
+    children = _ref.children,
+    _ref$round = _ref.round,
+    round = _ref$round === void 0 ? false : _ref$round;
+  if (!loading || children) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  var getSkeletonStyle = function getSkeletonStyle() {
+    var style = {};
+    if (width !== undefined) {
+      style.width = typeof width === 'number' ? "".concat(width, "px") : width;
+    }
+    if (height !== undefined) {
+      style.height = typeof height === 'number' ? "".concat(height, "px") : height;
+    }
+    if (type === 'circle') {
+      style.borderRadius = '50%';
+      if (radius !== undefined) {
+        style.width = typeof radius === 'number' ? "".concat(radius, "px") : radius;
+        style.height = typeof radius === 'number' ? "".concat(radius, "px") : radius;
+      }
+    } else if (round) {
+      style.borderRadius = '8px';
+    } else if (radius !== undefined) {
+      style.borderRadius = typeof radius === 'number' ? "".concat(radius, "px") : radius;
+    }
+    return style;
+  };
+  var renderSkeletonItems = function renderSkeletonItems() {
+    if (type === 'text') {
+      return Array.from({
+        length: rows
+      }).map(function (_, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: index,
+          className: "skeleton-item skeleton-text ".concat(animated ? 'skeleton-animated' : '', " ").concat(className),
+          style: _objectSpread(_objectSpread({}, getSkeletonStyle()), style)
+        });
+      });
+    } else {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "skeleton-item skeleton-".concat(type, " ").concat(animated ? 'skeleton-animated' : '', " ").concat(className),
+        style: _objectSpread(_objectSpread({}, getSkeletonStyle()), style)
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "skeleton-container"
+  }, renderSkeletonItems());
+};

package/dist/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { Skeleton } from './Skeleton';

package/dist/Skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from "./Skeleton";

package/dist/Skeleton/style.scss

@@ -0,0 +1,48 @@
+.skeleton-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+
+  .skeleton-item {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    background-position: 100% 0;
+    animation: skeleton-loading 1.5s infinite linear;
+
+    &.skeleton-animated {
+      animation: skeleton-loading 1.5s infinite linear;
+    }
+  }
+
+  .skeleton-text {
+    width: 100%;
+    height: 32rpx;
+    border-radius: 8rpx;
+    margin-bottom: 12rpx;
+    &:last-child {
+      margin-bottom: 0;
+      width: 70%;
+    }
+  }
+
+  .skeleton-circle {
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: 50%;
+  }
+
+  .skeleton-rect {
+    width: 100%;
+    height: 128rpx;
+    border-radius: 16rpx;
+  }
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}

package/dist/Space/index.d.ts

@@ -1,4 +1,3 @@
 import { Space } from './space';
 export type { SpaceProps } from './space';
 export default Space;
-//# sourceMappingURL=index.d.ts.map

package/dist/Space/space.d.ts

@@ -34,6 +34,6 @@ export type SpaceProps = {
      */
     size?: Size | Size[];
     style?: CSSProperties;
+    separator?: ReactNode;
 };
 export declare const Space: FC<SpaceProps>;
-//# sourceMappingURL=space.d.ts.map

package/dist/Space/space.js

@@ -20,7 +20,8 @@ export var Space = function Space(_ref) {
     onClick = _ref.onClick,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'small' : _ref$size,
-    style = _ref.style;
+    style = _ref.style,
+    separator = _ref.separator;
   var sizeValue = function sizeValue(size) {
     if (typeof size === 'number') {
       return "".concat(size, "Px");
@@ -53,9 +54,19 @@ export var Space = function Space(_ref) {
       rowGap: rowGapValue
     }),
     onClick: onClick
-  }, React.Children.map(children, function (child) {
-    return child !== null && child !== undefined && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(classPrefix, "-item")
-    }, child);
-  }));
+  }, function () {
+    var items = [];
+    React.Children.map(children, function (child, index) {
+      if (child !== null && child !== undefined) {
+        items.push( /*#__PURE__*/React.createElement("div", {
+          key: "space-item-".concat(index),
+          className: "".concat(classPrefix, "-item")
+        }, child));
+        if (separator && index < React.Children.count(children) - 1) {
+          items.push(separator);
+        }
+      }
+    });
+    return items;
+  }());
 };