@trionesdev/antd-mobile-base-react 0.0.2-beta.2 → 0.0.2-beta.21

package/dist/InputNumber/style.scss

@@ -1,43 +1,100 @@
-@use "../style/variable" as *;
+@use "../style/variable" as variable;
+
 $trionesInputNumberCls: 'triones-antm-input-number';
 
+$inputNumberBg: #F5F5F5;
+$inputSm: 24Px;
+$inputLg: 40Px;
+$inputNumberControlHeight: 28Px;
+
 .#{$trionesInputNumberCls} {
   display: inline-flex;
-  align-items: center;
-  gap: 4Px;
-  border-radius: $trionesBorderRadius;
-  background-color: $trionesColorTextQuaternary;
-
-  input {
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
+  align-items: stretch;
+  gap: 2Px;
+  border-radius: variable.$trionesBorderRadiusXs;
+  overflow: hidden;
+
+  &--block {
+    display: flex;
+    width: 100%;
+
+    .#{$trionesInputNumberCls}-input {
+      flex: 1 1 auto;
+      min-width: 0;
     }
+  }
+
+  &-input {
+    display: flex;
+    align-items: stretch;
+    flex: 0 1 auto;
+    min-width: 36Px;
+    min-height: $inputNumberControlHeight;
 
-    border: 0;
-    text-align: center;
-    width: 30Px;
+    input {
+      width: 100%;
+      min-width: 0;
+      height: 100%;
+      min-height: $inputNumberControlHeight;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0 8Px;
+      border: 0;
+      border-radius: variable.$trionesBorderRadiusXs;
+      background-color: $inputNumberBg;
+      color: variable.$trionesColorText;
+      font-size: 14Px;
+      line-height: $inputNumberControlHeight;
+      text-align: center;
+      -moz-appearance: textfield;
+      appearance: textfield;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      &:focus {
+        outline: none;
+      }
 
-    &:focus {
-      outline: none;
+      &:disabled {
+        color: variable.$trionesColorTextDisabled;
+        cursor: not-allowed;
+      }
     }
   }
 
   &-button {
     cursor: pointer;
     display: flex;
+    flex-shrink: 0;
     font-size: 10Px;
-    height: 20Px;
-    width: 20Px;
+    height: $inputNumberControlHeight;
+    width: $inputNumberControlHeight;
     justify-content: center;
     align-items: center;
-    &-disabled{
+    background-color: $inputNumberBg;
+    border-radius: variable.$trionesBorderRadiusXs;
+
+    &-sm {
+      width: $inputSm;
+      height: $inputSm;
+    }
+
+    &-lg {
+      width: $inputLg;
+      height: $inputLg;
+    }
+
+    &-disabled {
       cursor: not-allowed;
-      color: $trionesColorTextDisabled;
+      color: variable.$trionesColorTextDisabled;
     }
-    .triones-antm-icon{
-      font-size: 10Px!important;
+
+    .triones-antm-icon {
+      font-size: 10Px !important;
     }
   }
 }

package/dist/Loading/DotLoading.d.ts

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+export type DotLoadingProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    color?: 'default' | 'primary' | 'white' | string;
+};
+export declare const DotLoading: FC<DotLoadingProps>;

package/dist/{Mask/mask-modal.js → Loading/DotLoading.js}

@@ -4,29 +4,29 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 classNames from "classnames";
-var maskCls = "triones-antm-mask2";
-export var MaskModal = function MaskModal(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    style = _ref.style,
-    zIndex = _ref.zIndex,
-    open = _ref.open,
-    _ref$maskClosable = _ref.maskClosable,
-    maskClosable = _ref$maskClosable === void 0 ? true : _ref$maskClosable,
-    onMaskClick = _ref.onMaskClick;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(maskCls, _defineProperty({}, "".concat(maskCls, "-open"), open)),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      zIndex: zIndex
-    }),
-    onClick: function onClick(e) {
-      if (maskClosable) {
-        onMaskClick === null || onMaskClick === void 0 || onMaskClick(e);
-      }
+import classNames from 'classnames';
+import React, { memo, useMemo } from 'react';
+var dotLoadingCls = 'triones-antm-dot-loading';
+export var DotLoading = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    styleProp = _ref.style,
+    _ref$color = _ref.color,
+    colorProp = _ref$color === void 0 ? 'default' : _ref$color;
+  var colors = ['default', 'primary', 'white'];
+  var rootStyle = useMemo(function () {
+    var style = _objectSpread({}, styleProp);
+    if (!colors.includes(colorProp)) {
+      style.color = colorProp;
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(maskCls, "-inner"), className)
-  }, children));
-};
+    return style;
+  }, [colorProp]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(className, dotLoadingCls, _defineProperty({}, "".concat(dotLoadingCls, "-").concat(colorProp), colors.includes(colorProp))),
+    style: rootStyle
+  }, [0, 1, 2].map(function (i) {
+    return /*#__PURE__*/React.createElement("i", {
+      key: i,
+      className: classNames("".concat(dotLoadingCls, "-dot"), "".concat(dotLoadingCls, "-dot-").concat(i))
+    });
+  }));
+});

package/dist/{SpinLoading/spin-loading.d.ts → Loading/SpinLoading.d.ts}

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import './spin-loading.scss';
 export type SpinLoadingProps = {
     size?: 'small' | 'middle' | 'large' | number;
     color?: 'default' | 'primary' | 'white' | string;

package/dist/Loading/SpinLoading.js

@@ -0,0 +1,69 @@
+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 _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 classNames from 'classnames';
+import Base64 from 'crypto-js/enc-base64';
+import Utf8 from 'crypto-js/enc-utf8';
+import React from 'react';
+var spinLoadingCls = 'triones-antm-spin-loading';
+export function createSvgStr(props) {
+  return "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"width:100%;height:100%\" viewBox=\"0 0 32 32\">\n            <circle r=\"15\" cx=\"16\" cy=\"16\"\n                stroke-width=\"2\"\n                stroke=\"".concat(props.stroke, "\"\n                fill=\"transparent\"\n                stroke-linecap=\"round\"\n                stroke-dasharray=\"").concat(15 * 3.14159265358979 * 2, "\"\n                stroke-dashoffset=\"").concat(15 * 3.14159265358979 * 0.5, "\"></circle>\n        </svg>");
+}
+export var SpinLoading = function SpinLoading(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    _ref$color = _ref.color,
+    colorProp = _ref$color === void 0 ? 'default' : _ref$color;
+  var colors = ['default', 'primary', 'white'];
+  var computedSize = React.useMemo(function () {
+    var resSize = null;
+    if (size === 'small') {
+      resSize = '24Px';
+    } else if (size === 'middle') {
+      resSize = '32Px';
+    } else if (size === 'large') {
+      resSize = '48Px';
+    } else {
+      resSize = size;
+    }
+    if (typeof resSize === 'number') {
+      return "".concat(resSize, "Px");
+    } else {
+      return resSize;
+    }
+  }, [size]);
+
+  // const computedColor = React.useMemo(() => {
+  //   if (colorProp === 'default') {
+  //     return '#9D9D9D';
+  //   } else if (colorProp === 'primary') {
+  //     return '#1677ff';
+  //   } else if (colorProp === 'white') {
+  //     return '#ffffff';
+  //   } else {
+  //     return colorProp;
+  //   }
+  // }, [colorProp]);
+
+  var completedStyle = React.useMemo(function () {
+    var maskImageSvg = createSvgStr({
+      stroke: 'currentColor'
+    });
+    var style = {
+      '--size': computedSize,
+      // '--color': computedColor,
+      '--maskImage': "url(data:image/svg+xml;base64,".concat(Base64.stringify(Utf8.parse(maskImageSvg)), ")")
+    };
+    if (!colors.includes(colorProp)) {
+      style.color = colorProp;
+    }
+    return style;
+  }, [computedSize, colorProp]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(spinLoadingCls, _defineProperty({}, "".concat(spinLoadingCls, "-").concat(colorProp), colors.includes(colorProp))),
+    style: completedStyle
+  }, /*#__PURE__*/React.createElement("i", {
+    className: classNames("".concat(spinLoadingCls, "-spin"))
+  }));
+};

package/dist/Loading/index.d.ts

@@ -0,0 +1,6 @@
+import { SpinLoading, SpinLoadingProps } from './SpinLoading';
+import "./style.scss";
+export { DotLoading } from './DotLoading';
+export type { DotLoadingProps } from './DotLoading';
+export type { SpinLoadingProps };
+export { SpinLoading };

package/dist/Loading/index.js

@@ -0,0 +1,4 @@
+import { SpinLoading } from "./SpinLoading";
+import "./style.scss";
+export { DotLoading } from "./DotLoading";
+export { SpinLoading };

package/dist/Loading/style.scss

@@ -0,0 +1,113 @@
+@use "../style/variable";
+
+$dotLoadingCls: triones-antm-dot-loading;
+$spinLoadingCls: triones-antm-spin-loading;
+
+.#{$dotLoadingCls} {
+  display: inline-flex;
+  align-items: center;
+  height: 1em;
+  vertical-align: -0.125em;
+  /* 18 / 40 * 1em — horizontal gap between dots in antd-mobile viewBox */
+  gap: 0.45em;
+
+  &-default {
+    color: #9D9D9D;
+  }
+
+  &-primary {
+    color: variable.$trionesColorPrimary;
+  }
+
+  &-white {
+    color: white;
+  }
+
+  &-dot {
+    display: block;
+    flex-shrink: 0;
+    /* 8×8 in a 40-unit-tall viewBox, height = 1em */
+    width: 0.2em;
+    height: 0.2em;
+    background: currentColor;
+    //mask-image: var(--dotLoadingMask);
+    //-webkit-mask-image: var(--dotLoadingMask);
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    -webkit-mask-size: 100% 100%;
+    mask-position: center;
+    -webkit-mask-position: center;
+    animation: triones-antm-dot-loading-bounce 2s infinite linear;
+    animation-fill-mode: backwards;
+  }
+
+  &-dot-0 {
+    animation-delay: 0s;
+  }
+
+  &-dot-1 {
+    animation-delay: 0.2s;
+  }
+
+  &-dot-2 {
+    animation-delay: 0.4s;
+  }
+}
+
+/* Mirrors antd-mobile SMIL: values 16;6;26;16;16, keyTimes 0;0.1;0.3;0.4;1, viewBox height 40 */
+@keyframes triones-antm-dot-loading-bounce {
+  0%,
+  40%,
+  100% {
+    transform: translateY(0);
+  }
+
+  10% {
+    transform: translateY(-0.25em);
+  }
+
+  30% {
+    transform: translateY(0.25em);
+  }
+}
+
+
+
+
+.#{$spinLoadingCls} {
+  --size: 32Px;
+  width: var(--size);
+  height: var(--size);
+
+  &-default{
+    color: #9D9D9D;
+  }
+  &-primary{
+    color: variable.$trionesColorPrimary;
+  }
+  &-white{
+    color: #ffffff;
+  }
+
+  &-spin {
+    //color: var(--color);
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    background: currentColor;
+    mask-image: var(--maskImage);
+    -webkit-mask-image: var(--maskImage);
+    animation: adm-spin-loading-rotate 2s infinite linear;
+  }
+
+}
+
+@keyframes adm-spin-loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/NavBar/nav-bar.d.ts

@@ -26,6 +26,7 @@ export type NavBarProps = {
      * @description 标题
      */
     children?: ReactNode;
+    className?: string;
     style?: CSSProperties;
 };
 export declare const NavBar: FC<NavBarProps>;

package/dist/NavBar/nav-bar.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { withNativeProps } from "../utils/native-props";
 import ConfigProvider from "../ConfigProvider";
 import { mergeProp, mergeProps } from "../utils/with-default-props";
-import { LeftOutline } from "../../../antd-mobile-icons-react";
+import { LeftOutline } from '@trionesdev/antd-mobile-icons-react';
 import "./style.scss";
 var classPrefix = "triones-antm-nav-bar";
 var defaultBackIcon = /*#__PURE__*/React.createElement(LeftOutline, null);
@@ -17,7 +17,8 @@ export var NavBar = function NavBar(props) {
   var mergedDefaultBackIcon = componentConfig.backIcon || defaultBackIcon;
   var mergedBackIcon = mergeProp(defaultBackIcon, componentConfig.backIcon, backIcon === true ? mergedDefaultBackIcon : backIcon);
   return withNativeProps(mergedProps, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix)
+    className: classNames(classPrefix, mergedProps.className),
+    style: mergedProps.style
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-left"),
     role: "button"

package/dist/NavBar/style.scss

@@ -1,6 +1,7 @@
-@use "../style/variable" as *;
-$trionesNavBarColorBg:$trionesColorBorderBg !default;
-$trionesNavBarColorText:$trionesColorTextBase !default;
+@use "../style/variable" as variable;
+
+$trionesNavBarColorBg: variable.$trionesColorBorderBg !default;
+$trionesNavBarColorText: variable.$trionesColorTextBase !default;
 
 $class-prefix-nav-bar: 'triones-antm-nav-bar';
 /* prettier-ignore */
@@ -8,6 +9,7 @@ $class-prefix-nav-bar: 'triones-antm-nav-bar';
   --height: 45PX;
   --border-bottom: none;
   display: flex;
+  flex: none;
   align-items: center;
   height: var(--height);
   border-bottom: var(--border-bottom);
@@ -20,6 +22,7 @@ $class-prefix-nav-bar: 'triones-antm-nav-bar';
   &-right {
     flex: 1;
   }
+
   &-title {
     flex: auto;
     text-align: center;
@@ -33,6 +36,7 @@ $class-prefix-nav-bar: 'triones-antm-nav-bar';
     margin-right: 16PX;
     padding: 6PX 0;
     cursor: pointer;
+
     &-arrow {
       font-size: 20PX;
       margin-right: 5PX;

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 ? 'medium' : _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 {};