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

package/dist/NavBar/style.scss

@@ -1,61 +1,64 @@
-@use "../style/variable" as *;
-$trionesNavBarColorBg:$trionesColorBorderBg !default;
-$trionesNavBarColorText:$trionesColorTextBase !default;
-
-$class-prefix-nav-bar: 'triones-antm-nav-bar';
-/* prettier-ignore */
-.#{$class-prefix-nav-bar} {
-  --height: 45PX;
-  --border-bottom: none;
-  display: flex;
-  align-items: center;
-  height: var(--height);
-  border-bottom: var(--border-bottom);
-  padding: 0 12PX;
-  white-space: nowrap;
-  color: $trionesNavBarColorText;
-  background-color: $trionesNavBarColorBg;
-
-  &-left,
-  &-right {
-    flex: 1;
-  }
-  &-title {
-    flex: auto;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &-back {
-    display: flex;
-    align-items: center;
-    margin-right: 16PX;
-    padding: 6PX 0;
-    cursor: pointer;
-    &-arrow {
-      font-size: 20PX;
-      margin-right: 5PX;
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  &-left {
-    font-size: var(--triones-antm-font-size-7);
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  &-title {
-    justify-content: center;
-    white-space: nowrap;
-    font-size: var(--triones-antm-font-size-10);
-    padding: 0 12PX;
-  }
-
-  &-right {
-    text-align: right;
-  }
-}
+@use "../style/variable" as variable;
+
+$trionesNavBarColorBg: variable.$trionesColorBorderBg !default;
+$trionesNavBarColorText: variable.$trionesColorTextBase !default;
+
+$class-prefix-nav-bar: 'triones-antm-nav-bar';
+/* prettier-ignore */
+.#{$class-prefix-nav-bar} {
+  --height: 45PX;
+  --border-bottom: none;
+  display: flex;
+  align-items: center;
+  height: var(--height);
+  border-bottom: var(--border-bottom);
+  padding: 0 12PX;
+  white-space: nowrap;
+  color: $trionesNavBarColorText;
+  background-color: $trionesNavBarColorBg;
+
+  &-left,
+  &-right {
+    flex: 1;
+  }
+
+  &-title {
+    flex: auto;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-back {
+    display: flex;
+    align-items: center;
+    margin-right: 16PX;
+    padding: 6PX 0;
+    cursor: pointer;
+
+    &-arrow {
+      font-size: 20PX;
+      margin-right: 5PX;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &-left {
+    font-size: var(--triones-antm-font-size-7);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  &-title {
+    justify-content: center;
+    white-space: nowrap;
+    font-size: var(--triones-antm-font-size-10);
+    padding: 0 12PX;
+  }
+
+  &-right {
+    text-align: right;
+  }
+}

package/dist/NoticeBar/index.d.ts

@@ -1,4 +1,3 @@
 import { NoticeBar } from './notice-bar';
 export type { NoticeBarProps } from './notice-bar';
 export default NoticeBar;
-//# sourceMappingURL=index.d.ts.map

package/dist/NoticeBar/notice-bar.d.ts

@@ -62,4 +62,3 @@ export type NoticeBarProps = {
     bordered?: 'block' | boolean;
 } & NativeProps;
 export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;
-//# sourceMappingURL=notice-bar.d.ts.map

package/dist/NoticeBar/style.scss

@@ -1,130 +1,130 @@
-$class-prefix-notice-bar: 'triones-antm-notice-bar';
-/* prettier-ignore */
-.#{$class-prefix-notice-bar} {
-  --background-color: var(--triones-antm-color-weak);
-  --border-color: var(--triones-antm-color-weak);
-  --text-color: var(--triones-antm-color-text-light-solid);
-  --font-size: var(--triones-antm-font-size-7);
-  --icon-font-size: var(--triones-antm-font-size-10);
-  --height: 40PX;
-  --triones-antm-notice-bar-border-radius: 4PX;
-  --triones-antm-notice-bar-border-width: 1PX;
-
-  flex: 1 auto;
-  height: var(--height);
-  box-sizing: border-box;
-  font-size: var(--font-size);
-  padding: 0 12PX;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  border: solid var(--triones-antm-notice-bar-border-width) var(--border-color);
-  border-left-width: 0;
-  border-right-width: 0;
-  background-color: var(--background-color);
-  color: var(--text-color);
-  & > span[role='img'] {
-    color: var(--text-color);
-  }
-
-  &.#{$class-prefix-notice-bar}-alert {
-    --background-color: #fff9ed;
-    --border-color: #fff3e9;
-    --text-color: var(--triones-antm-color-orange);
-  }
-  &.#{$class-prefix-notice-bar}-error {
-    --background-color: #d9281e;
-    --border-color: #d9281e;
-    --text-color: #fff;
-  }
-  &.#{$class-prefix-notice-bar}-info {
-    --background-color: #d0e4ff;
-    --border-color: #bcd8ff;
-    --text-color: var(--triones-antm-color-primary);
-  }
-  &.#{$class-prefix-notice-bar}-success {
-    --background-color: #d1fff0;
-    --border-color: #a8f0d8;
-    --text-color: var(--triones-antm-color-success);
-  }
-
-  & .#{$class-prefix-notice-bar}-left {
-    flex-shrink: 0;
-    margin-right: 8PX;
-    font-size: var(--icon-font-size);
-  }
-  & .#{$class-prefix-notice-bar}-content {
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-    height: 100%;
-    display: flex;
-    align-items: center;
-
-    & .#{$class-prefix-notice-bar}-content-inner {
-      width: auto;
-      transition-timing-function: linear;
-      white-space: nowrap;
-    }
-  }
-
-  & .#{$class-prefix-notice-bar}-right {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    margin-left: 12PX;
-  }
-
-  &-close {
-    width: 24PX;
-    height: 24PX;
-    margin-right: -3PX;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--triones-antm-font-size-10);
-  }
-
-  &-wrap {
-    height: auto;
-    align-items: flex-start;
-    padding-top: 8PX;
-    padding-bottom: 8PX;
-    line-height: 22PX;
-  }
-
-  &-neutral {
-    border-radius: var(--triones-antm-notice-bar-border-radius);
-    -webkit-border-radius: var(--triones-antm-notice-bar-border-radius);
-    -moz-border-radius: var(--triones-antm-notice-bar-border-radius);
-    -ms-border-radius: var(--triones-antm-notice-bar-border-radius);
-    -o-border-radius: var(--triones-antm-notice-bar-border-radius);
-  }
-
-  &-rounded {
-    border-radius: 1000PX;
-    -webkit-border-radius: 1000PX;
-    -moz-border-radius: 1000PX;
-    -ms-border-radius: 1000PX;
-    -o-border-radius: 1000PX;
-}
-
-  &-bordered {
-    border-left-width: var(--triones-antm-notice-bar-border-width);
-    border-right-width: var(--triones-antm-notice-bar-border-width);
-  }
-
-  &-without-border {
-    border-top-width: 0;
-    border-bottom-width: 0;
-  }
-}
-
-.#{$class-prefix-notice-bar}.#{$class-prefix-notice-bar}-wrap {
-  .#{$class-prefix-notice-bar}-content {
-    .#{$class-prefix-notice-bar}-content-inner {
-      white-space: normal;
-    }
-  }
-}
+$class-prefix-notice-bar: 'triones-antm-notice-bar';
+/* prettier-ignore */
+.#{$class-prefix-notice-bar} {
+  --background-color: var(--triones-antm-color-weak);
+  --border-color: var(--triones-antm-color-weak);
+  --text-color: var(--triones-antm-color-text-light-solid);
+  --font-size: var(--triones-antm-font-size-7);
+  --icon-font-size: var(--triones-antm-font-size-10);
+  --height: 40PX;
+  --triones-antm-notice-bar-border-radius: 4PX;
+  --triones-antm-notice-bar-border-width: 1PX;
+
+  flex: 1 auto;
+  height: var(--height);
+  box-sizing: border-box;
+  font-size: var(--font-size);
+  padding: 0 12PX;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  border: solid var(--triones-antm-notice-bar-border-width) var(--border-color);
+  border-left-width: 0;
+  border-right-width: 0;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  & > span[role='img'] {
+    color: var(--text-color);
+  }
+
+  &.#{$class-prefix-notice-bar}-alert {
+    --background-color: #fff9ed;
+    --border-color: #fff3e9;
+    --text-color: var(--triones-antm-color-orange);
+  }
+  &.#{$class-prefix-notice-bar}-error {
+    --background-color: #d9281e;
+    --border-color: #d9281e;
+    --text-color: #fff;
+  }
+  &.#{$class-prefix-notice-bar}-info {
+    --background-color: #d0e4ff;
+    --border-color: #bcd8ff;
+    --text-color: var(--triones-antm-color-primary);
+  }
+  &.#{$class-prefix-notice-bar}-success {
+    --background-color: #d1fff0;
+    --border-color: #a8f0d8;
+    --text-color: var(--triones-antm-color-success);
+  }
+
+  & .#{$class-prefix-notice-bar}-left {
+    flex-shrink: 0;
+    margin-right: 8PX;
+    font-size: var(--icon-font-size);
+  }
+  & .#{$class-prefix-notice-bar}-content {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    & .#{$class-prefix-notice-bar}-content-inner {
+      width: auto;
+      transition-timing-function: linear;
+      white-space: nowrap;
+    }
+  }
+
+  & .#{$class-prefix-notice-bar}-right {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-left: 12PX;
+  }
+
+  &-close {
+    width: 24PX;
+    height: 24PX;
+    margin-right: -3PX;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--triones-antm-font-size-10);
+  }
+
+  &-wrap {
+    height: auto;
+    align-items: flex-start;
+    padding-top: 8PX;
+    padding-bottom: 8PX;
+    line-height: 22PX;
+  }
+
+  &-neutral {
+    border-radius: var(--triones-antm-notice-bar-border-radius);
+    -webkit-border-radius: var(--triones-antm-notice-bar-border-radius);
+    -moz-border-radius: var(--triones-antm-notice-bar-border-radius);
+    -ms-border-radius: var(--triones-antm-notice-bar-border-radius);
+    -o-border-radius: var(--triones-antm-notice-bar-border-radius);
+  }
+
+  &-rounded {
+    border-radius: 1000PX;
+    -webkit-border-radius: 1000PX;
+    -moz-border-radius: 1000PX;
+    -ms-border-radius: 1000PX;
+    -o-border-radius: 1000PX;
+}
+
+  &-bordered {
+    border-left-width: var(--triones-antm-notice-bar-border-width);
+    border-right-width: var(--triones-antm-notice-bar-border-width);
+  }
+
+  &-without-border {
+    border-top-width: 0;
+    border-bottom-width: 0;
+  }
+}
+
+.#{$class-prefix-notice-bar}.#{$class-prefix-notice-bar}-wrap {
+  .#{$class-prefix-notice-bar}-content {
+    .#{$class-prefix-notice-bar}-content-inner {
+      white-space: normal;
+    }
+  }
+}

package/dist/PageIndicator/index.d.ts

@@ -1,4 +1,3 @@
 import { PageIndicator } from './page-indicator';
 export type { PageIndicatorProps } from './page-indicator';
 export default PageIndicator;
-//# sourceMappingURL=index.d.ts.map

package/dist/PageIndicator/page-indicator.d.ts

@@ -8,4 +8,3 @@ export type PageIndicatorProps = {
     color?: 'primary' | 'white';
 } & NativeProps<'--dot-color' | '--active-dot-color' | '--dot-size' | '--active-dot-size' | '--dot-border-radius' | '--active-dot-border-radius' | '--dot-spacing'>;
 export declare const PageIndicator: React.NamedExoticComponent<PageIndicatorProps>;
-//# sourceMappingURL=page-indicator.d.ts.map

package/dist/PageIndicator/style.scss

@@ -1,59 +1,59 @@
-/* prettier-ignore */
-.triones-antm-page-indicator {
-  display: flex;
-  width: auto;
-
-  --dot-color: #ccc;
-  --active-dot-color: #1677ff;
-  --dot-size: 3PX;
-  --active-dot-size: 13PX;
-  --dot-border-radius: 1PX;
-  --active-dot-border-radius: var(--dot-border-radius);
-  --dot-spacing: 3PX;
-
-  &-dot {
-    display: block;
-    width: var(--dot-size);
-    height: var(--dot-size);
-    border-radius: var(--dot-border-radius);
-    background: var(--dot-color);
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    &-active {
-      border-radius: var(--active-dot-border-radius);
-      background: var(--active-dot-color);
-    }
-  }
-
-  &-color-white {
-    --dot-color: rgba(255, 255, 255, 50%);
-    --active-dot-color: #fff;
-  }
-
-  &-horizontal {
-    flex-direction: row;
-
-    .triones-antm-page-indicator-dot {
-      margin-right: var(--dot-spacing);
-
-      &-active {
-        width: var(--active-dot-size);
-      }
-    }
-  }
-
-  &-vertical {
-    flex-direction: column;
-
-    .triones-antm-page-indicator-dot {
-      margin-bottom: var(--dot-spacing);
-
-      &-active {
-        height: var(--active-dot-size);
-      }
-    }
-  }
-}
+/* prettier-ignore */
+.triones-antm-page-indicator {
+  display: flex;
+  width: auto;
+
+  --dot-color: #ccc;
+  --active-dot-color: #1677ff;
+  --dot-size: 3PX;
+  --active-dot-size: 13PX;
+  --dot-border-radius: 1PX;
+  --active-dot-border-radius: var(--dot-border-radius);
+  --dot-spacing: 3PX;
+
+  &-dot {
+    display: block;
+    width: var(--dot-size);
+    height: var(--dot-size);
+    border-radius: var(--dot-border-radius);
+    background: var(--dot-color);
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &-active {
+      border-radius: var(--active-dot-border-radius);
+      background: var(--active-dot-color);
+    }
+  }
+
+  &-color-white {
+    --dot-color: rgba(255, 255, 255, 50%);
+    --active-dot-color: #fff;
+  }
+
+  &-horizontal {
+    flex-direction: row;
+
+    .triones-antm-page-indicator-dot {
+      margin-right: var(--dot-spacing);
+
+      &-active {
+        width: var(--active-dot-size);
+      }
+    }
+  }
+
+  &-vertical {
+    flex-direction: column;
+
+    .triones-antm-page-indicator-dot {
+      margin-bottom: var(--dot-spacing);
+
+      &-active {
+        height: var(--active-dot-size);
+      }
+    }
+  }
+}

package/dist/Progress/Progress.d.ts

@@ -0,0 +1,39 @@
+import { FC } from "react";
+import { Size } from "./types";
+import "./style.scss";
+import { PercentPositionAlign, ProgressStatus } from "./types";
+import "./style.scss";
+export type ProgressProps = {
+    /**
+     * @description 内容的模板函数
+     * @default percent => `${percent}%`
+     */
+    format?: (percent: number) => string;
+    type?: 'line' | 'circle';
+    /**
+     * @description 百分比
+     * @default 0
+     */
+    percent?: number;
+    size?: Size;
+    /**
+     * @description 是否显示进度数值或状态图标
+     * @default true
+     */
+    showInfo?: boolean;
+    /**
+     * @description 未完成的分段的颜色
+     */
+    railColor?: string;
+    /**
+     * @description 进度条的色彩
+     */
+    strokeColor?: string;
+    strokeWidth?: number;
+    status?: ProgressStatus;
+    /**
+     * @description 进度数值位置
+     */
+    percentPositionAlign?: PercentPositionAlign;
+};
+export declare const Progress: FC<ProgressProps>;

package/dist/Progress/Progress.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { ProgressCircle } from "./ProgressCircle";
+import "./style.scss";
+import { ProgressLine } from "./ProgressLine";
+import { exceptionColor, successColor } from "./types";
+import "./style.scss";
+export var Progress = function Progress(_ref) {
+  var format = _ref.format,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'line' : _ref$type,
+    _ref$percent = _ref.percent,
+    percent = _ref$percent === void 0 ? 0 : _ref$percent,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    _ref$showInfo = _ref.showInfo,
+    showInfo = _ref$showInfo === void 0 ? true : _ref$showInfo,
+    _ref$railColor = _ref.railColor,
+    railColor = _ref$railColor === void 0 ? '#E5E5E5' : _ref$railColor,
+    _ref$strokeColor = _ref.strokeColor,
+    strokeColor = _ref$strokeColor === void 0 ? '#1777FF' : _ref$strokeColor,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? 6 : _ref$strokeWidth,
+    status = _ref.status,
+    percentPositionAlign = _ref.percentPositionAlign;
+  var handleComputedStrokeColor = function handleComputedStrokeColor() {
+    if (status === 'exception') {
+      return exceptionColor;
+    }
+    if (percent >= 100) {
+      return successColor;
+    }
+    return strokeColor;
+  };
+  if (type === 'line') {
+    return /*#__PURE__*/React.createElement(ProgressLine, {
+      format: format,
+      percent: percent,
+      size: size,
+      railColor: railColor,
+      strokeColor: handleComputedStrokeColor(),
+      status: status,
+      showInfo: showInfo,
+      percentPositionAlign: percentPositionAlign
+    });
+  }
+  return /*#__PURE__*/React.createElement(ProgressCircle, {
+    format: format,
+    percent: percent,
+    size: size,
+    railColor: railColor,
+    strokeColor: handleComputedStrokeColor(),
+    strokeWidth: strokeWidth,
+    showInfo: showInfo,
+    status: status
+  });
+};

package/dist/Progress/ProgressCircle.d.ts

@@ -0,0 +1,15 @@
+import { FC } from "react";
+import { ProgressStatus, Size } from "./types";
+type ProcessCircleProps = {
+    format?: (percent: number) => string;
+    percent?: number;
+    strokeWidth?: number;
+    size?: Size;
+    showInfo?: boolean;
+    railColor?: string;
+    strokeColor?: string;
+    strokeLineCap?: 'butt' | 'round' | 'square';
+    status?: ProgressStatus;
+};
+export declare const ProgressCircle: FC<ProcessCircleProps>;
+export {};