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

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,61 +1,65 @@
-@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;
+  flex: none;
+  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/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;
+    }
+  }
+}