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

package/dist/Popup/style.scss

@@ -0,0 +1,129 @@
+@use "../style/variable" as variable;
+
+$trionesPopupCls: 'triones-antm-popup';
+
+.#{$trionesPopupCls} {
+  &-overlay {
+    display: flex;
+
+    .#{$trionesPopupCls} {
+      &-container {
+        position: relative;
+        background-color: white;
+
+        .#{$trionesPopupCls} {
+          &-header {
+            padding-block: variable.$trionesPaddingContentVertical;
+            padding-inline: variable.$trionesPaddingContentHorizontal;
+          }
+        }
+      }
+
+      &-title {
+        text-align: center;
+      }
+
+      &-close {
+        position: absolute;
+
+        &-top-right {
+          top: variable.$trionesPaddingContentVertical;
+          right: variable.$trionesPaddingContentHorizontal;
+        }
+
+        &-top-left {
+          top: variable.$trionesPaddingContentVertical;
+          left: variable.$trionesPaddingContentHorizontal;
+        }
+      }
+    }
+  }
+
+  &-top {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    .#{$trionesPopupCls} {
+      &-container {
+        width: 100%;
+        min-height: 20%;
+        max-height: 90%;
+      }
+
+      &-round {
+        border-bottom-left-radius: variable.$trionesBorderRadius;
+        border-bottom-right-radius: variable.$trionesBorderRadius;
+      }
+    }
+  }
+
+  &-bottom {
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: flex-end;
+
+    .#{$trionesPopupCls} {
+      &-container {
+        width: 100%;
+        min-height: 20%;
+        max-height: 90%;
+      }
+
+      &-round {
+        border-top-left-radius: variable.$trionesBorderRadius;
+        border-top-right-radius: variable.$trionesBorderRadius;
+      }
+    }
+  }
+
+  &-left {
+    flex-direction: row;
+    justify-content: flex-start;
+
+    .#{$trionesPopupCls} {
+      &-container {
+        height: 100%;
+        min-width: 20%;
+        max-width: 90%;
+      }
+
+      &-round {
+        border-top-right-radius: variable.$trionesBorderRadius;
+        border-bottom-right-radius: variable.$trionesBorderRadius;
+      }
+    }
+  }
+
+
+  &-right {
+    flex-direction: row;
+    justify-content: flex-end;
+
+    .#{$trionesPopupCls} {
+      &-container {
+        height: 100%;
+        min-width: 20%;
+        max-width: 90%;
+      }
+
+      &-round {
+        border-top-left-radius: variable.$trionesBorderRadius;
+        border-bottom-left-radius: variable.$trionesBorderRadius;
+      }
+    }
+  }
+
+  &-center {
+    justify-content: center;
+    align-items: center;
+
+    .#{$trionesPopupCls} {
+      &-round {
+        border-radius: variable.$trionesBorderRadius;
+      }
+    }
+  }
+
+
+}

package/dist/Progress/index.d.ts

@@ -1,3 +1,3 @@
-import { Progress, ProgressProps } from "./Progress";
+import { Progress, ProgressProps } from "@trionesdev/antd-mobile-base-react";
 export type { ProgressProps };
 export default Progress;

package/dist/Progress/index.js

@@ -1,2 +1,2 @@
-import { Progress } from "./Progress";
+import { Progress } from "@trionesdev/antd-mobile-base-react";
 export default Progress;

package/dist/Radio/demo/base.js

@@ -25,7 +25,7 @@ export default (function () {
     title: "\u9009\u9879\u7EC4"
   }, /*#__PURE__*/React.createElement(Radio.Group, {
     defaultValue: "1",
-    items: [{
+    options: [{
       label: '第一项',
       value: '1'
     }, {
@@ -68,7 +68,7 @@ export default (function () {
   }, /*#__PURE__*/React.createElement(Radio.Group, {
     defaultValue: "1",
     shape: 'button',
-    items: [{
+    options: [{
       label: '第一项',
       value: '1'
     }, {

package/dist/Radio/demo/base.scss

@@ -1,4 +1,4 @@
-.blockIndicator {
-  background-color: #f5f5f5;
-  border-radius: 2px;
-}
+.blockIndicator {
+  background-color: #f5f5f5;
+  border-radius: 2px;
+}

package/dist/Result/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import { DemoBlock } from "../../DemoBlock";
 import React from 'react';

package/dist/SafeArea/demo/base.scss

@@ -1,18 +1,18 @@
-$class-prefix-card: 'card-demo';
-
-.#{$class-prefix-card} {
-  &-content {
-    height: 50px;
-  }
-  &-footer {
-    padding-top: 11px;
-    border-top: 1px solid #e5e5e5;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  &-customBody {
-    color: green;
-  }
-
-}
+$class-prefix-card: 'card-demo';
+
+.#{$class-prefix-card} {
+  &-content {
+    height: 50px;
+  }
+  &-footer {
+    padding-top: 11px;
+    border-top: 1px solid #e5e5e5;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &-customBody {
+    color: green;
+  }
+
+}

package/dist/ScrollView/index.d.ts

@@ -1,3 +1,4 @@
-import { ScrollView, ScrollViewProps } from '@trionesdev/antd-mobile-base-react';
+import { ScrollView } from "./scroll-view";
+import type { ScrollViewProps } from "./types";
 export type { ScrollViewProps };
 export default ScrollView;

package/dist/ScrollView/index.js

@@ -1,2 +1,2 @@
-import { ScrollView } from '@trionesdev/antd-mobile-base-react';
+import { ScrollView } from "./scroll-view";
 export default ScrollView;

package/dist/ScrollView/scroll-view.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import './style.scss';
+import { ScrollViewProps } from "./types";
+export declare const ScrollView: FC<ScrollViewProps>;

package/dist/ScrollView/scroll-view.js

@@ -0,0 +1,55 @@
+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 React, { forwardRef, useEffect, useRef } from 'react';
+import "./style.scss";
+export var ScrollView = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    _onScroll = _ref.onScroll,
+    _ref$showScrollbar = _ref.showScrollbar,
+    showScrollbar = _ref$showScrollbar === void 0 ? true : _ref$showScrollbar,
+    scrollX = _ref.scrollX,
+    scrollY = _ref.scrollY,
+    scrollTop = _ref.scrollTop,
+    _ref$upperThreshold = _ref.upperThreshold,
+    upperThreshold = _ref$upperThreshold === void 0 ? 50 : _ref$upperThreshold,
+    _ref$lowerThreshold = _ref.lowerThreshold,
+    lowerThreshold = _ref$lowerThreshold === void 0 ? 50 : _ref$lowerThreshold,
+    onScrollToUpper = _ref.onScrollToUpper,
+    onScrollToLower = _ref.onScrollToLower;
+  var scrollRef = useRef();
+  var handleRef = function handleRef(node) {
+    scrollRef.current = node;
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+  useEffect(function () {
+    if (scrollTop !== undefined) {}
+  }, [scrollTop]);
+  var trionesScrollViewCls = 'triones-antm-scroll-view';
+  return /*#__PURE__*/React.createElement("div", {
+    ref: handleRef,
+    className: classNames("".concat(trionesScrollViewCls), className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(trionesScrollViewCls, "-scroll-x"), scrollX), "".concat(trionesScrollViewCls, "-scroll-y"), scrollY), "".concat(trionesScrollViewCls, "-scroll-bar-hidden"), !showScrollbar)),
+    style: style,
+    onScroll: function onScroll(e) {
+      // console.log(e);
+      _onScroll === null || _onScroll === void 0 || _onScroll({
+        detail: {
+          scrollLeft: e.target.scrollLeft,
+          scrollTop: e.target.scrollTop,
+          scrollHeight: e.target.scrollHeight,
+          scrollWidth: e.target.scrollWidth
+        }
+      });
+    }
+  }, children);
+});

package/dist/ScrollView/style.scss

@@ -0,0 +1,19 @@
+$trionesScrollViewCls: 'triones-antm-scroll-view';
+
+.#{$trionesScrollViewCls} {
+  scrollbar-width: thin;
+
+  &-scroll-x {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  &-scroll-y {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &-scroll-bar-hidden {
+    scrollbar-width: none;
+  }
+}

package/dist/ScrollView/types.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactNode } from "react";
+export type ScrollEvent = {
+    target?: any;
+    detail: {
+        deltaX?: number;
+        deltaY?: number;
+        scrollLeft?: number;
+        scrollTop?: number;
+        scrollHeight?: number;
+        scrollWidth?: number;
+    };
+};
+export type ScrollViewProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+    onScroll?: (e: ScrollEvent) => void;
+    showScrollbar?: boolean;
+    scrollX?: boolean;
+    scrollY?: boolean;
+    scrollTop?: number;
+    upperThreshold?: number;
+    lowerThreshold?: number;
+    onScrollToUpper?: () => void;
+    onScrollToLower?: () => void;
+};

package/dist/ScrollView/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Segmented/demo/base.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Segmented/demo/base.js

@@ -0,0 +1,33 @@
+import { Segmented } from "@trionesdev/antd-mobile-base-react";
+import React from "react";
+import { DemoBlock } from "../../DemoBlock";
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u672C\u4F7F\u7528"
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    options: [{
+      label: '选项1',
+      value: '1'
+    }, {
+      label: '选项2',
+      value: '2'
+    }, {
+      label: '选项3',
+      value: '3'
+    }]
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "block \u5C5E\u6027\u4F7F\u5176\u9002\u5408\u7236\u5143\u7D20\u5BBD\u5EA6"
+  }, /*#__PURE__*/React.createElement(Segmented, {
+    block: true,
+    options: [{
+      label: '选项1',
+      value: '1'
+    }, {
+      label: '选项2',
+      value: '2'
+    }, {
+      label: '选项3',
+      value: '3'
+    }]
+  })));
+});

package/dist/Segmented/index.d.ts

@@ -0,0 +1,3 @@
+import { Segmented, SegmentedProps } from "@trionesdev/antd-mobile-base-react";
+export type { SegmentedProps };
+export default Segmented;

package/dist/Segmented/index.js

@@ -0,0 +1,2 @@
+import { Segmented } from "@trionesdev/antd-mobile-base-react";
+export default Segmented;

package/dist/SideBar/index.d.ts

@@ -1,3 +1,3 @@
-import { SideBar, SideBarProps } from './side-bar';
+import { SideBar, SideBarProps } from "./side-bar";
 export type { SideBarProps };
 export default SideBar;

package/dist/SideBar/side-bar.js

@@ -70,8 +70,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
     };
   }();
 
-  /**
-   * 计算当前页顶部，距离可滚动区域顶部的距离
+  /**
+   * 计算当前页顶部，距离可滚动区域顶部的距离
    */
   var computeReactiveOffsetTop = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
@@ -90,8 +90,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
     };
   }();
 
-  /**
-   * 计算当前页底部，距离可滚动区域顶部的距离
+  /**
+   * 计算当前页底部，距离可滚动区域顶部的距离
    */
   var computeReactiveOffsetBottom = /*#__PURE__*/function () {
     var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
@@ -138,8 +138,8 @@ var SideBarContent = /*#__PURE__*/memo(function (_ref2) {
     }
   }, [activeKey]);
 
-  /**
-   * 监听滚动变化，只有在人为操作的时候才监听滚动的位置是否需要切换tab，如果是切换tab 引发的滚动则不执行
+  /**
+   * 监听滚动变化，只有在人为操作的时候才监听滚动的位置是否需要切换tab，如果是切换tab 引发的滚动则不执行
    */
   useEffect(function () {
     // return;

package/dist/SideBar/style.scss

@@ -1,85 +1,85 @@
-@use "../style/variable" as *;
-
-$trionesSideBarCls: 'triones-antm-sidebar';
-
-.#{$trionesSideBarCls} {
-  display: flex;
-  height: 100%;
-
-
-  &-tabs {
-    min-width: 0;
-    background-color: $trionesColorFill;
-    overflow: auto;
-    scrollbar-width: thin;
-    flex-shrink: 0;
-  }
-
-  &-tab {
-    cursor: pointer;
-    padding: $trionesPadding $trionesPadding;
-    color: $trionesColorTextSecondary;
-
-    &-active {
-      color: $trionesColorPrimaryText;
-      background-color: $trionesColorBgBase;
-    }
-
-  }
-
-  &-content {
-    flex: 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    //overflow-y: auto;
-    //scrollbar-width: none;
-    position: relative;
-    user-select: none;
-    touch-action: none;
-
-
-    &-wheel {
-      width: 100%;
-      cursor: grab;
-      position: absolute;
-    }
-
-    &-item {
-
-      &-active {
-        display: block;
-      }
-    }
-  }
-
-  &-switch-mode {
-    .#{$trionesSideBarCls} {
-      &-content {
-
-        &-item {
-          height: 100%;
-          display: none;
-          &-active {
-            display: block;
-          }
-        }
-      }
-    }
-  }
-
-  &-scroll-mode {
-    .#{$trionesSideBarCls} {
-      &-content {
-
-        &-item {
-
-
-          &-active {
-            display: block;
-          }
-        }
-      }
-    }
-  }
-
-}
+@use "../style/variable" as variable;
+
+$trionesSideBarCls: 'triones-antm-sidebar';
+
+.#{$trionesSideBarCls} {
+  display: flex;
+  height: 100%;
+
+
+  &-tabs {
+    min-width: 0;
+    background-color: variable.$trionesColorFill;
+    overflow: auto;
+    scrollbar-width: thin;
+    flex-shrink: 0;
+  }
+
+  &-tab {
+    cursor: pointer;
+    padding: variable.$trionesPadding variable.$trionesPadding;
+    color: variable.$trionesColorTextSecondary;
+
+    &-active {
+      color: variable.$trionesColorPrimaryText;
+      background-color: variable.$trionesColorBgBase;
+    }
+
+  }
+
+  &-content {
+    flex: 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    //overflow-y: auto;
+    //scrollbar-width: none;
+    position: relative;
+    user-select: none;
+    touch-action: none;
+
+
+    &-wheel {
+      width: 100%;
+      cursor: grab;
+      position: absolute;
+    }
+
+    &-item {
+
+      &-active {
+        display: block;
+      }
+    }
+  }
+
+  &-switch-mode {
+    .#{$trionesSideBarCls} {
+      &-content {
+
+        &-item {
+          height: 100%;
+          display: none;
+          &-active {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+  &-scroll-mode {
+    .#{$trionesSideBarCls} {
+      &-content {
+
+        &-item {
+
+
+          &-active {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+}

package/dist/Skeleton/demo/base.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Skeleton/demo/base.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DemoBlock } from "../../DemoBlock";
+import { Skeleton } from "../../index";
+export default (function () {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u7840\u7528\u6CD5"
+  }, /*#__PURE__*/React.createElement(Skeleton, null)));
+});

package/dist/Skeleton/index.d.ts

@@ -0,0 +1,3 @@
+import { Skeleton } from '@trionesdev/antd-mobile-base-react';
+export type { SkeletonAvatarProps, SkeletonAvatarShape, SkeletonAvatarSize, SkeletonBlockType, SkeletonButtonProps, SkeletonButtonShape, SkeletonInputProps, SkeletonParagraphProps, SkeletonProps, SkeletonTitleProps, } from '@trionesdev/antd-mobile-base-react';
+export default Skeleton;

package/dist/Skeleton/index.js

@@ -0,0 +1,2 @@
+import { Skeleton } from '@trionesdev/antd-mobile-base-react';
+export default Skeleton;

package/dist/Space/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import { DemoBlock } from "../../DemoBlock";
 import React from 'react';

package/dist/Stepper/demo/base.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Stepper/demo/base.js

@@ -0,0 +1,23 @@
+import React from "react";
+import Stepper from "../index";
+import { DemoBlock } from "../../DemoBlock";
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u672C\u4F7F\u7528"
+  }, /*#__PURE__*/React.createElement(Stepper, null)), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u6700\u5927\u503C\u6700\u5C0F\u503C"
+  }, /*#__PURE__*/React.createElement(Stepper, {
+    min: 0,
+    max: 10
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u672C\u4F7F\u7528"
+  }, /*#__PURE__*/React.createElement(Stepper, {
+    max: 10
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u5360\u6EE1"
+  }, /*#__PURE__*/React.createElement(Stepper, {
+    block: true,
+    min: 0,
+    max: 10
+  })));
+});

package/dist/Stepper/index.d.ts

@@ -0,0 +1,3 @@
+import { Stepper, StepperProps } from "@trionesdev/antd-mobile-base-react";
+export type { StepperProps };
+export default Stepper;

package/dist/Stepper/index.js

@@ -0,0 +1,2 @@
+import { Stepper } from "@trionesdev/antd-mobile-base-react";
+export default Stepper;