@trionesdev/antd-mobile-base-react 0.0.2-beta.15 → 0.0.2-beta.17

package/dist/InputNumber/style.scss

@@ -1,63 +1,100 @@
-@use "../style/variable" as variable;
-$trionesInputNumberCls: 'triones-antm-input-number';
-
-$inputNumberBg: #EEEEEE;
-$inputSm: 24Px;
-$inputLg: 40Px;
-
-.#{$trionesInputNumberCls} {
-  display: inline-flex;
-  align-items: center;
-  gap: 4Px;
-  border-radius: variable.$trionesBorderRadius;
-  background-color: $inputNumberBg;
-
-  input {
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    background-color: transparent;
-    border: 0;
-    text-align: center ;
-    width: 32Px;
-
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-
-  &-button {
-    cursor: pointer;
-    display: flex;
-    font-size: 10Px;
-    height: 32Px;
-    width: 32Px;
-    justify-content: center;
-    align-items: center;
-
-    &-sm {
-      width: $inputSm;
-      height: $inputSm;
-    }
-
-    &-lg {
-      width: $inputLg;
-      height: $inputLg;
-    }
-
-    &-disabled {
-      cursor: not-allowed;
-      color: variable.$trionesColorTextDisabled;
-    }
-
-    .triones-antm-icon {
-      font-size: 10Px !important;
-    }
-  }
-}
+@use "../style/variable" as variable;
+
+$trionesInputNumberCls: 'triones-antm-input-number';
+
+$inputNumberBg: #F5F5F5;
+$inputSm: 24Px;
+$inputLg: 40Px;
+$inputNumberControlHeight: 28Px;
+
+.#{$trionesInputNumberCls} {
+  display: inline-flex;
+  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;
+
+    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;
+      }
+
+      &:disabled {
+        color: variable.$trionesColorTextDisabled;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-button {
+    cursor: pointer;
+    display: flex;
+    flex-shrink: 0;
+    font-size: 10Px;
+    height: $inputNumberControlHeight;
+    width: $inputNumberControlHeight;
+    justify-content: center;
+    align-items: center;
+    background-color: $inputNumberBg;
+    border-radius: variable.$trionesBorderRadiusXs;
+
+    &-sm {
+      width: $inputSm;
+      height: $inputSm;
+    }
+
+    &-lg {
+      width: $inputLg;
+      height: $inputLg;
+    }
+
+    &-disabled {
+      cursor: not-allowed;
+      color: variable.$trionesColorTextDisabled;
+    }
+
+    .triones-antm-icon {
+      font-size: 10Px !important;
+    }
+  }
+}

package/dist/Loading/DotLoading.d.ts

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

package/dist/Loading/DotLoading.js

@@ -0,0 +1,33 @@
+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 classNames from 'classnames';
+import React, { memo, useMemo } from 'react';
+import "./dot-loading.scss";
+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;
+    }
+    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/Loading/SpinLoading.js

@@ -0,0 +1,70 @@
+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';
+import "./spin-loading.scss";
+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/dot-loading.scss

@@ -0,0 +1,72 @@
+@use "../style/variable" as variable;
+
+$dotLoadingCls: triones-antm-dot-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);
+  }
+}

package/dist/Loading/index.d.ts

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

package/dist/Loading/index.js

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

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

@@ -1,40 +1,39 @@
-$spinLoadingCls: triones-antm-spin-loading;
-
-.#{$spinLoadingCls} {
-  --size: 32Px;
-  --color: #1677ff;
-  width: var(--size);
-  height: var(--size);
-
-  &-svg {
-    width: 100%;
-    height: 100%;
-    //animation: adm-spin-loading-rotate 0.8s infinite linear;
-
-    > .#{$spinLoadingCls}-circle {
-      //stroke: #1677ff;
-      stroke: var(--color);
-    }
-  }
-
-  &-loading {
-    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);
-  }
-}
+@use "../style/variable" as variable;
+$spinLoadingCls: triones-antm-spin-loading;
+
+.#{$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/style.scss

@@ -1,64 +1,64 @@
-@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;
-  }
-}
+@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;
+  }
+}