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

package/dist/Steps/VerticalSteps.js

@@ -75,11 +75,14 @@ var VerticalStepIem = function VerticalStepIem(_ref) {
   }, title && /*#__PURE__*/React.createElement("div", null, title), description && /*#__PURE__*/React.createElement("div", null, description)));
 };
 export var VerticalSteps = function VerticalSteps(_ref2) {
-  var current = _ref2.current,
+  var className = _ref2.className,
+    style = _ref2.style,
+    current = _ref2.current,
     _ref2$items = _ref2.items,
     items = _ref2$items === void 0 ? [] : _ref2$items;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(clsPrefixSteps, "".concat(clsPrefixSteps, "-vertical"))
+    className: classNames(clsPrefixSteps, "".concat(clsPrefixSteps, "-vertical"), className),
+    style: style
   }, items.map(function (item, index) {
     return /*#__PURE__*/React.createElement(VerticalStepIem, {
       key: index,

package/dist/Steps/style.scss

@@ -1,146 +1,153 @@
-$clsPrefixSteps: 'triones-antm-steps';
-$clsPrefixStep: 'triones-antm-step';
-
-.#{$clsPrefixSteps} {
-  &-horizontal {
-    display: flex;
-    flex-direction: row;
-
-    .#{$clsPrefixStep} {
-      //flex: 1 auto;
-      &-indicator {
-        display: flex;
-        flex-direction: row;
-
-        &-icon-before {
-          flex: 1 auto;
-          display: flex;
-          align-items: center;
-          min-width: 16Px;
-
-          &-line {
-            height: 1Px;
-            width: 100%;
-          }
-        }
-
-        &-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          min-height: 24Px;
-        }
-
-        &-icon-after {
-          flex: 1 auto;
-          display: flex;
-          align-items: center;
-          min-width: 16Px;
-
-          &-line {
-            height: 1Px;
-            width: 100%;
-          }
-        }
-      }
-
-      &-content {
-        text-align: center;
-      }
-
-      &:first-child {
-        .#{$clsPrefixStep} {
-          &-indicator {
-            &-icon-before {
-              &-line {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-
-      &:last-child {
-        .#{$clsPrefixStep} {
-          &-indicator {
-            &-icon-after {
-              &-line {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &-vertical {
-    .#{$clsPrefixStep} {
-      display: flex;
-      flex-direction: row;
-
-      &-indicator {
-        display: flex;
-        flex-direction: column;
-        padding-inline: 4Px;
-
-        &-icon-before {
-          display: flex;
-          justify-content: center;
-          min-height: 8Px;
-
-          &-line {
-            width: 1Px;
-            height: 100%;
-          }
-        }
-
-        &-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          min-width: 24Px;
-        }
-
-        &-icon-after {
-          flex: 1 auto;
-          display: flex;
-          justify-content: center;
-
-          &-line {
-            width: 1Px;
-            height: 100%;
-          }
-        }
-      }
-
-      &-content {
-        padding: 4Px;
-      }
-
-      &:first-child {
-        .#{$clsPrefixStep} {
-          &-indicator {
-            &-icon-before {
-              &-line {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-
-      &:last-child {
-        .#{$clsPrefixStep} {
-          &-indicator {
-            &-icon-after {
-              &-line {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
+$clsPrefixSteps: 'triones-antm-steps';
+$clsPrefixStep: 'triones-antm-step';
+
+.#{$clsPrefixSteps} {
+  &-horizontal {
+    display: flex;
+    flex-direction: row;
+
+    .#{$clsPrefixStep} {
+      //flex: 1 auto;
+      display: flex;
+      flex-direction: column;
+      gap: 4Px;
+      &-indicator {
+        display: flex;
+        flex-direction: row;
+
+        &-icon-before {
+          flex: 1 auto;
+          display: flex;
+          align-items: center;
+          min-width: 16Px;
+
+          &-line {
+            height: 1Px;
+            width: 100%;
+          }
+        }
+
+        &-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-height: 24Px;
+        }
+
+        &-icon-after {
+          flex: 1 auto;
+          display: flex;
+          align-items: center;
+          min-width: 16Px;
+
+          &-line {
+            height: 1Px;
+            width: 100%;
+          }
+        }
+      }
+
+      &-content {
+        text-align: center;
+        &-title{
+
+        }
+        &-desc{}
+      }
+
+      &:first-child {
+        .#{$clsPrefixStep} {
+          &-indicator {
+            &-icon-before {
+              &-line {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+      &:last-child {
+        .#{$clsPrefixStep} {
+          &-indicator {
+            &-icon-after {
+              &-line {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &-vertical {
+    .#{$clsPrefixStep} {
+      display: flex;
+      flex-direction: row;
+
+      &-indicator {
+        display: flex;
+        flex-direction: column;
+        padding-inline: 4Px;
+
+        &-icon-before {
+          display: flex;
+          justify-content: center;
+          min-height: 8Px;
+
+          &-line {
+            width: 1Px;
+            height: 100%;
+          }
+        }
+
+        &-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 24Px;
+        }
+
+        &-icon-after {
+          flex: 1 auto;
+          display: flex;
+          justify-content: center;
+
+          &-line {
+            width: 1Px;
+            height: 100%;
+          }
+        }
+      }
+
+      &-content {
+        padding: 4Px;
+      }
+
+      &:first-child {
+        .#{$clsPrefixStep} {
+          &-indicator {
+            &-icon-before {
+              &-line {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+      &:last-child {
+        .#{$clsPrefixStep} {
+          &-indicator {
+            &-icon-after {
+              &-line {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/Steps/types.d.ts

@@ -5,6 +5,8 @@ export type StepsItemProps = {
     description?: React.ReactNode;
 };
 export type BaseStepsProps = {
+    className?: string;
+    style?: React.CSSProperties;
     current?: number;
     items?: StepsItemProps[];
 };

package/dist/Switch/style.scss

@@ -1,128 +1,127 @@
-@use "../style/variable" as *;
-
-$class-prefix-switch: 'triones-antm-switch';
-
-@keyframes loading-rotate {
-  100% {
-    transform: rotate(1turn);
-  }
-}
-
-/* prettier-ignore */
-.#{$class-prefix-switch} {
-  --height: 24PX;
-  --width: 42PX;
-  --border-width: 2PX;
-
-  display: inline-block;
-  vertical-align: middle;
-  box-sizing: border-box;
-  position: relative;
-  align-self: center;
-  cursor: pointer;
-
-  input {
-    display: none;
-  }
-
-  &-checkbox {
-    min-width: var(--width);
-    height: var(--height);
-    box-sizing: border-box;
-    border-radius: 31PX;
-    background: $trionesBorderColor;
-    z-index: 0;
-    overflow: hidden;
-    line-height: var(--height);
-
-    &:before {
-      content: ' ';
-      position: absolute;
-      left: var(--border-width);
-      top: var(--border-width);
-      width: calc(100% - 2 * var(--border-width));
-      height: calc(var(--height) - 2 * var(--border-width));
-      border-radius: calc(var(--height) - 2 * var(--border-width));
-      box-sizing: border-box;
-      background: var(--triones-antm-color-background);
-      z-index: 1;
-      transition: all 200ms;
-      transform: scale(1);
-    }
-  }
-
-  &-handle {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: calc(var(--height) - 2 * var(--border-width));
-    height: calc(var(--height) - 2 * var(--border-width));
-    border-radius: calc(var(--height) - 2 * var(--border-width));
-    background: $trionesColorTextLightSolid;
-    position: absolute;
-    z-index: 2;
-    top: var(--border-width);
-    left: var(--border-width);
-    transition: all 200ms;
-    box-shadow: 0 0 2PX 0 rgba(0, 0, 0, 0.2),
-    0 2PX 11.5PX 0 rgba(0, 0, 0, 0.08),
-    -1PX 2PX 2PX 0 rgba(0, 0, 0, 0.1);
-
-    &-loading {
-      color: var(--color,$trionesColorPrimary);
-      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;
-    }
-  }
-
-  &-inner {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 8PX 0 calc(var(--height) - var(--border-width) + 5PX);
-    height: 100%;
-    color: var(--triones-antm-color-weak);
-    transition: margin 200ms;
-    font-size: var(--triones-antm-font-size-7);
-  }
-
-  /* 选中状态 */
-  &.#{$class-prefix-switch}-checked {
-    .#{$class-prefix-switch}-checkbox {
-      background: var(--checked-color, $trionesColorPrimary);
-
-      &:before {
-        transform: scale(0);
-      }
-    }
-
-    .#{$class-prefix-switch}-handle {
-      left: calc(100% - (var(--height) - var(--border-width)));
-    }
-
-    .#{$class-prefix-switch}-inner {
-      margin: 0 calc(var(--height) - var(--border-width) + 5PX) 0 8PX;
-      color: $trionesColorTextLightSolid;
-    }
-  }
-
-  /* 禁用状态 */
-  &.#{$class-prefix-switch}-disabled {
-    cursor: not-allowed;
-    opacity: 0.4;
-  }
-
-  /* loading图标 */
-  &-spin-icon {
-    width: 14PX;
-    height: 14PX;
-    animation: loading-rotate 1s linear infinite;
-  }
-}
+@use "../style/variable" as variable;
+
+$class-prefix-switch: 'triones-antm-switch';
+
+@keyframes loading-rotate {
+  100% {
+    transform: rotate(1turn);
+  }
+}
+
+/* prettier-ignore */
+.#{$class-prefix-switch} {
+  --height: 24PX;
+  --width: 42PX;
+  --border-width: 2PX;
+
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+
+  input {
+    display: none;
+  }
+
+  &-checkbox {
+    min-width: var(--width);
+    height: var(--height);
+    box-sizing: border-box;
+    border-radius: 31PX;
+    background: variable.$trionesBorderColor;
+    z-index: 0;
+    overflow: hidden;
+    line-height: var(--height);
+
+    &:before {
+      content: ' ';
+      position: absolute;
+      left: var(--border-width);
+      top: var(--border-width);
+      width: calc(100% - 2 * var(--border-width));
+      height: calc(var(--height) - 2 * var(--border-width));
+      border-radius: calc(var(--height) - 2 * var(--border-width));
+      box-sizing: border-box;
+      background: var(--triones-antm-color-background);
+      z-index: 1;
+      transition: all 200ms;
+      transform: scale(1);
+    }
+  }
+
+  &-handle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: calc(var(--height) - 2 * var(--border-width));
+    height: calc(var(--height) - 2 * var(--border-width));
+    border-radius: calc(var(--height) - 2 * var(--border-width));
+    background: variable.$trionesColorTextLightSolid;
+    position: absolute;
+    z-index: 2;
+    top: var(--border-width);
+    left: var(--border-width);
+    transition: all 200ms;
+    box-shadow: 0 0 2PX 0 rgba(0, 0, 0, 0.2),
+    0 2PX 11.5PX 0 rgba(0, 0, 0, 0.08),
+    -1PX 2PX 2PX 0 rgba(0, 0, 0, 0.1);
+
+    &-loading {
+      color: var(--color,variable.$trionesColorPrimary);
+      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;
+    }
+  }
+
+  &-inner {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 8PX 0 calc(var(--height) - var(--border-width) + 5PX);
+    height: 100%;
+    color: var(--triones-antm-color-weak);
+    transition: margin 200ms;
+    font-size: var(--triones-antm-font-size-7);
+  }
+
+  /* 选中状态 */
+  &.#{$class-prefix-switch}-checked {
+    .#{$class-prefix-switch}-checkbox {
+      background: var(--checked-color, variable.$trionesColorPrimary);
+
+      &:before {
+        transform: scale(0);
+      }
+    }
+
+    .#{$class-prefix-switch}-handle {
+      left: calc(100% - (var(--height) - var(--border-width)));
+    }
+
+    .#{$class-prefix-switch}-inner {
+      margin: 0 calc(var(--height) - var(--border-width) + 5PX) 0 8PX;
+      color: variable.$trionesColorTextLightSolid;
+    }
+  }
+
+  /* 禁用状态 */
+  &.#{$class-prefix-switch}-disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  /* loading图标 */
+  &-spin-icon {
+    width: 14PX;
+    height: 14PX;
+    animation: loading-rotate 1s linear infinite;
+  }
+}

package/dist/Switch/switch.d.ts

@@ -14,6 +14,8 @@ export type SwitchProps = {
     checkedColor?: string;
     width?: number;
     height?: number;
+    value?: boolean;
+    defaultValue?: boolean;
 };
 export declare function createSvgStr(props: {
     stroke: string;

package/dist/Switch/switch.js

@@ -23,27 +23,28 @@ import Base64 from "crypto-js/enc-base64";
 import Utf8 from "crypto-js/enc-utf8";
 var classPrefix = "triones-antm-switch";
 var defaultProps = {
-  defaultChecked: false
+  defaultChecked: false,
+  defaultValue: false
 };
 export function createSvgStr(props) {
   return "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"width:100%;height:100%\" viewBox=\"0 0 20 20\">\n            <circle r=\"9\" cx=\"10\" cy=\"10\"\n                stroke-width=\"1\"\n                stroke=\"".concat(props.stroke, "\"\n                fill=\"transparent\"\n                stroke-linecap=\"round\"\n                stroke-dasharray=\"").concat(10 * 3.14159265358979 * 2, "\"\n                stroke-dashoffset=\"").concat(10 * 3.14159265358979 * 0.5, "\"></circle>\n        </svg>");
 }
 export var Switch = function Switch(p) {
-  var _props$checked;
+  var _ref, _ref2, _ref3, _props$checked;
   var props = mergeProps(defaultProps, p);
   var disabled = props.disabled || props.loading || false;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     changing = _useState2[0],
     setChanging = _useState2[1];
-  var _useState3 = useState((_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : props.defaultChecked),
+  var _useState3 = useState((_ref = (_ref2 = (_ref3 = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : props.value) !== null && _ref3 !== void 0 ? _ref3 : props.defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : props.defaultValue) !== null && _ref !== void 0 ? _ref : false),
     _useState4 = _slicedToArray(_useState3, 2),
     checked = _useState4[0],
     setChecked = _useState4[1];
   var _ConfigProvider$useCo = ConfigProvider.useConfig(),
     locale = _ConfigProvider$useCo.locale;
   var handleClick = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -55,7 +56,7 @@ export var Switch = function Switch(p) {
       }, _callee);
     }));
     return function handleClick() {
-      return _ref.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var completedStyle = React.useMemo(function () {

package/dist/TabBar/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import React from "react";
 import { FaceRecognitionOutline, AppstoreOutline, UserOutline } from "../../../../antd-mobile-icons-react";

package/dist/TabBar/index.js

@@ -1,3 +1,4 @@
-import { TabBar as InternalTabBar } from "./tab-bar";
+import { TabBar as InternalTabBar, TabBarItem } from "./tab-bar";
 var TabBar = InternalTabBar;
+TabBar.Item = TabBarItem;
 export default TabBar;