@trionesdev/antd-mobile-base-react 0.0.2-beta.0 → 0.0.2-beta.10

package/dist/Ellipsis/style.scss

@@ -1,13 +1,13 @@
-$class-prefix-ellipsis: 'triones-antm-ellipsis';
-/* prettier-ignore */
-.#{$class-prefix-ellipsis} {
-  overflow: hidden;
-  line-height: 1.5;
-  word-break: break-word;
-
-  &-icon {
-    display: inline-block;
-    color: #1677ff;
-    cursor: pointer;
-  }
-}
+$class-prefix-ellipsis: 'triones-antm-ellipsis';
+/* prettier-ignore */
+.#{$class-prefix-ellipsis} {
+  overflow: hidden;
+  line-height: 1.5;
+  word-break: break-word;
+
+  &-icon {
+    display: inline-block;
+    color: #1677ff;
+    cursor: pointer;
+  }
+}

package/dist/Empty/style.scss

@@ -1,29 +1,29 @@
-.triones-antm-empty {
-  text-align: center;
-
-  &-wrapper {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-  }
-
-  &-image {
-    //margin-bottom: 8Px;
-    :global {
-      img,
-      image {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-  }
-
-  &-description {
-    color: rgba(0, 0, 0, 45%);
-    font-size: 14Px;
-    padding: 8Px;
-  }
-}
+.triones-antm-empty {
+  text-align: center;
+
+  &-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  &-image {
+    //margin-bottom: 8Px;
+    :global {
+      img,
+      image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+
+  &-description {
+    color: rgba(0, 0, 0, 45%);
+    font-size: 14Px;
+    padding: 8Px;
+  }
+}

package/dist/ErrorBlock/demo/base.js

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

package/dist/ErrorBlock/style.scss

@@ -1,62 +1,62 @@
-$class-prefix-error-block: 'triones-antm-error-block';
-/* prettier-ignore */
-.#{$class-prefix-error-block} {
-  --color: var(--triones-antm-color-text);
-  --image-height: var(--triones-antm-error-block-image-height, 100PX);
-  --image-height-full-page: var(
-    --triones-antm-error-block-image-height-full-page,
-    200PX
-  );
-  --image-width: var(--triones-antm-error-block-image-width, auto);
-  --image-width-full-page: var(
-    --triones-antm-error-block-image-width-full-page,
-    auto
-  );
-  width: 100%;
-  box-sizing: border-box;
-  text-align: center;
-
-  &-image {
-    height: var(--image-height);
-    width: var(--image-width);
-    max-width: 100%;
-
-    & svg,
-    img {
-      height: 100%;
-    }
-  }
-
-  &-description {
-    font-size: var(--triones-antm-font-size-4);
-    color: var(--triones-antm-color-weak);
-    line-height: 1.4;
-    margin-top: 12PX;
-    &-title {
-      font-size: var(--triones-antm-font-size-7);
-    }
-    &-subtitle {
-      margin-top: 8PX;
-    }
-  }
-
-  &-content {
-    margin-top: 12PX;
-  }
-
-  &-full-page {
-    padding-top: calc(50vh - var(--image-height-full-page));
-    .#{$class-prefix-error-block}-image {
-      height: var(--image-height-full-page);
-      width: var(--image-width-full-page);
-    }
-    .#{$class-prefix-error-block}-description {
-      margin-top: 20PX;
-      font-size: var(--triones-antm-font-size-main);
-      &-title {
-        font-size: 20PX;
-        color: var(--triones-antm-color-text);
-      }
-    }
-  }
-}
+$class-prefix-error-block: 'triones-antm-error-block';
+/* prettier-ignore */
+.#{$class-prefix-error-block} {
+  --color: var(--triones-antm-color-text);
+  --image-height: var(--triones-antm-error-block-image-height, 100PX);
+  --image-height-full-page: var(
+    --triones-antm-error-block-image-height-full-page,
+    200PX
+  );
+  --image-width: var(--triones-antm-error-block-image-width, auto);
+  --image-width-full-page: var(
+    --triones-antm-error-block-image-width-full-page,
+    auto
+  );
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+
+  &-image {
+    height: var(--image-height);
+    width: var(--image-width);
+    max-width: 100%;
+
+    & svg,
+    img {
+      height: 100%;
+    }
+  }
+
+  &-description {
+    font-size: var(--triones-antm-font-size-4);
+    color: var(--triones-antm-color-weak);
+    line-height: 1.4;
+    margin-top: 12PX;
+    &-title {
+      font-size: var(--triones-antm-font-size-7);
+    }
+    &-subtitle {
+      margin-top: 8PX;
+    }
+  }
+
+  &-content {
+    margin-top: 12PX;
+  }
+
+  &-full-page {
+    padding-top: calc(50vh - var(--image-height-full-page));
+    .#{$class-prefix-error-block}-image {
+      height: var(--image-height-full-page);
+      width: var(--image-width-full-page);
+    }
+    .#{$class-prefix-error-block}-description {
+      margin-top: 20PX;
+      font-size: var(--triones-antm-font-size-main);
+      &-title {
+        font-size: 20PX;
+        color: var(--triones-antm-color-text);
+      }
+    }
+  }
+}

package/dist/Footer/style.scss

@@ -1,55 +1,55 @@
-$class-prefix-footer: 'triones-antm-footer';
-/* prettier-ignore */
-.#{$class-prefix-footer} {
-  --background-color: #ffffff;
-
-  color: #333333;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: var(--background-color);
-
-  &-label {
-    width: 100%;
-    .triones-antm-divider {
-      color: #cccccc;
-    }
-  }
-  &-links {
-    margin: 8PX 0;
-    color: #1677ff;
-    white-space: nowrap;
-    &-item {
-      display: inline-block;
-    }
-  }
-  &-content {
-    display: flex;
-    align-items: center;
-    margin: 8PX 0;
-    color: #cccccc;
-  }
-  &-chips {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    margin: 8PX 0;
-  }
-  &-chip {
-    white-space: nowrap;
-    margin-right: 20PX;
-    font-size: 12PX;
-    background-color: #f5f5f5;
-    color: #999999;
-    padding: 4PX 12PX;
-    border-radius: 100PX;
-    &-link {
-      cursor: pointer;
-      background-color: #e7f1ff;
-      color: #1677ff;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}
+$class-prefix-footer: 'triones-antm-footer';
+/* prettier-ignore */
+.#{$class-prefix-footer} {
+  --background-color: #ffffff;
+
+  color: #333333;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--background-color);
+
+  &-label {
+    width: 100%;
+    .triones-antm-divider {
+      color: #cccccc;
+    }
+  }
+  &-links {
+    margin: 8PX 0;
+    color: #1677ff;
+    white-space: nowrap;
+    &-item {
+      display: inline-block;
+    }
+  }
+  &-content {
+    display: flex;
+    align-items: center;
+    margin: 8PX 0;
+    color: #cccccc;
+  }
+  &-chips {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    margin: 8PX 0;
+  }
+  &-chip {
+    white-space: nowrap;
+    margin-right: 20PX;
+    font-size: 12PX;
+    background-color: #f5f5f5;
+    color: #999999;
+    padding: 4PX 12PX;
+    border-radius: 100PX;
+    &-link {
+      cursor: pointer;
+      background-color: #e7f1ff;
+      color: #1677ff;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

package/dist/Form/context.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormLayout, FormLayoutAlign, RequiredMark } from "./form";
+import { FormLayout, FormLayoutAlign, RequiredMark } from "./types";
 export interface FormContextProps {
     colon?: boolean;
     layout?: FormLayout;
@@ -8,5 +8,6 @@ export interface FormContextProps {
     requiredMark?: RequiredMark;
     form?: any;
     hiddenError?: boolean;
+    extra?: React.ReactNode;
 }
 export declare const FormContext: React.Context<FormContextProps>;

package/dist/Form/form.d.ts

@@ -3,13 +3,7 @@ import type { FormProps as RcFormProps } from 'rc-field-form/lib/Form';
 import type { FormRef } from 'rc-field-form/lib/interface';
 import React from 'react';
 import { FormInstance } from './interface';
-import './style.scss';
-export type RequiredMark = boolean | 'optional' | ((labelNode: React.ReactNode, info: {
-    required: boolean;
-}) => React.ReactNode);
-export type FormLayout = 'horizontal' | 'inline' | 'vertical';
-export type FormItemLayout = 'horizontal' | 'vertical';
-export type FormLayoutAlign = 'left' | 'right';
+import { FormLayout, FormLayoutAlign, RequiredMark } from "./types";
 export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form' | 'component'> {
     /**
      * @description 配置 Form.Item 的 colon 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效)
@@ -38,6 +32,7 @@ export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form
      * @default false
      */
     hiddenError?: boolean;
+    extra?: React.ReactNode;
 }
 export declare const InternalForm: React.ForwardRefRenderFunction<FormRef, FormProps>;
 export { useWatch };

package/dist/Form/form.js

@@ -1,11 +1,10 @@
-var _excluded = ["children", "layout", "labelAlign", "labelWidth", "requiredMark", "hiddenError"];
+var _excluded = ["children", "layout", "labelAlign", "labelWidth", "requiredMark", "hiddenError", "extra"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import FieldForm, { useWatch } from 'rc-field-form';
 import React from 'react';
 import { FormContext } from "./context";
-import "./style.scss";
 export var InternalForm = function InternalForm(_ref, ref) {
   var children = _ref.children,
     layout = _ref.layout,
@@ -14,6 +13,7 @@ export var InternalForm = function InternalForm(_ref, ref) {
     requiredMark = _ref.requiredMark,
     _ref$hiddenError = _ref.hiddenError,
     hiddenError = _ref$hiddenError === void 0 ? false : _ref$hiddenError,
+    extra = _ref.extra,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: {
@@ -21,7 +21,8 @@ export var InternalForm = function InternalForm(_ref, ref) {
       labelAlign: labelAlign || 'left',
       labelWidth: labelWidth,
       requiredMark: requiredMark || true,
-      hiddenError: hiddenError
+      hiddenError: hiddenError,
+      extra: extra
     }
   }, /*#__PURE__*/React.createElement(FieldForm, _extends({}, props, {
     component: false

package/dist/Form/index.d.ts

@@ -1,12 +1,14 @@
+import FieldForm from 'rc-field-form';
 import InternalForm, { FormProps, useWatch } from "./form";
-import FormItem, { FormItemProps } from "./FormItem";
 import useForm from "./hooks/useForm";
+import { FormItemLayout, FormLayout, FormLayoutAlign } from "./types";
+export { useFormContext } from "./hooks/useFormContext";
 type InternalFormType = typeof InternalForm;
 type CompoundedComponent = InternalFormType & {
     useForm: typeof useForm;
-    Item: typeof FormItem;
+    List: typeof FieldForm.List;
     useWatch: typeof useWatch;
 };
 declare const Form: CompoundedComponent;
-export type { FormProps, FormItemProps };
+export type { FormProps, FormLayout, FormLayoutAlign, FormItemLayout };
 export default Form;

package/dist/Form/index.js

@@ -1,8 +1,10 @@
+import FieldForm from 'rc-field-form';
 import InternalForm, { useWatch } from "./form";
-import FormItem from "./FormItem";
 import useForm from "./hooks/useForm";
+export { useFormContext } from "./hooks/useFormContext";
 var Form = InternalForm;
+Form.List = FieldForm.List;
 Form.useForm = useForm;
-Form.Item = FormItem;
+// Form.Item = FormItem;
 Form.useWatch = useWatch;
 export default Form;

package/dist/Form/types.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export type RequiredMark = boolean | 'optional' | ((labelNode: React.ReactNode, info: {
+    required: boolean;
+}) => React.ReactNode);
+export type FormLayout = 'horizontal' | 'inline' | 'vertical';
+export type FormItemLayout = 'horizontal' | 'vertical';
+export type FormLayoutAlign = 'left' | 'right';

package/dist/Grid/style.scss

@@ -1,17 +1,17 @@
-$class-prefix-grid: 'triones-antm-grid';
-/* prettier-ignore */
-.#{$class-prefix-grid} {
-  --gap: 0;
-  --gap-horizontal: var(--gap);
-  --gap-vertical: var(--gap);
-
-  display: grid;
-  grid-gap: 10PX;
-  column-gap: var(--gap-horizontal);
-  row-gap: var(--gap-vertical);
-  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
-  align-items: stretch;
-  &-item {
-    grid-column-end: span var(--item-span);
-  }
-}
+$class-prefix-grid: 'triones-antm-grid';
+/* prettier-ignore */
+.#{$class-prefix-grid} {
+  --gap: 0;
+  --gap-horizontal: var(--gap);
+  --gap-vertical: var(--gap);
+
+  display: grid;
+  grid-gap: 10PX;
+  column-gap: var(--gap-horizontal);
+  row-gap: var(--gap-vertical);
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  align-items: stretch;
+  &-item {
+    grid-column-end: span var(--item-span);
+  }
+}

package/dist/Icon/demo/base.js

@@ -1,9 +1,9 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import React from "react";
 import * as icons from "../../../../antd-mobile-icons-react";
-import { map, omit } from "lodash";
+import { map, omit } from "lodash-es";
 import { DemoBlock } from "../../DemoBlock";
 export default (function () {
   return /*#__PURE__*/React.createElement(DemoBlock, {

package/dist/IndexedStack/IndexedStack.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+export interface IndexedStackProps {
+    children: ReactNode[];
+    activeIndex: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const IndexedStack: React.FC<IndexedStackProps>;
+export { IndexedStack };

package/dist/IndexedStack/IndexedStack.js

@@ -0,0 +1,27 @@
+import React from 'react';
+var IndexedStack = function IndexedStack(_ref) {
+  var children = _ref.children,
+    _ref$activeIndex = _ref.activeIndex,
+    activeIndex = _ref$activeIndex === void 0 ? 0 : _ref$activeIndex,
+    className = _ref.className,
+    style = _ref.style;
+  // 确保 activeIndex 在有效范围内
+  var validActiveIndex = Math.max(0, Math.min(activeIndex, children.length - 1));
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: style
+  }, React.Children.map(children, function (child, index) {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      style: {
+        display: index === validActiveIndex ? 'block' : 'none',
+        width: '100%',
+        height: '100%'
+      }
+    }, child);
+  }));
+};
+export { IndexedStack };

package/dist/IndexedStack/index.d.ts

@@ -0,0 +1,3 @@
+import { IndexedStack, IndexedStackProps } from './IndexedStack';
+export type { IndexedStackProps };
+export default IndexedStack;

package/dist/IndexedStack/index.js

@@ -0,0 +1,2 @@
+import { IndexedStack } from "./IndexedStack";
+export default IndexedStack;

package/dist/InputNumber/input-number.d.ts

@@ -1,12 +1,15 @@
 import React from "react";
 import { FC } from "react";
 import "./style.scss";
+import { SizeType } from "../types";
 export type InputNumberProps = {
+    size?: SizeType;
     value?: number;
     onChange?: (value: number) => void;
     step?: number;
     min?: number;
     max?: number;
+    disabled?: boolean;
     className?: string;
     style?: React.CSSProperties;
 };

package/dist/InputNumber/input-number.js

@@ -13,11 +13,14 @@ import classNames from "classnames";
 import { AddOutline, MinusOutline } from "../../../antd-mobile-icons-react";
 import "./style.scss";
 export var InputNumber = function InputNumber(_ref) {
-  var value = _ref.value,
+  var size = _ref.size,
+    value = _ref.value,
     _onChange = _ref.onChange,
     step = _ref.step,
     min = _ref.min,
     max = _ref.max,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     className = _ref.className,
     style = _ref.style;
   var _React$useState = React.useState(value || 0),
@@ -38,7 +41,7 @@ export var InputNumber = function InputNumber(_ref) {
     className: classNames(trionesInputNumberCls, className),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(trionesInputNumberCls, "-button"), _defineProperty({}, "".concat(trionesInputNumberCls, "-button-disabled"), minMatch)),
+    className: classNames("".concat(trionesInputNumberCls, "-button"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(trionesInputNumberCls, "-button-sm"), size == 'small'), "".concat(trionesInputNumberCls, "-button-lg"), size == 'large'), "".concat(trionesInputNumberCls, "-button-disabled"), minMatch || disabled)),
     onClick: function onClick() {
       if (minMatch) {
         return;
@@ -49,6 +52,7 @@ export var InputNumber = function InputNumber(_ref) {
     }
   }, /*#__PURE__*/React.createElement(MinusOutline, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
     type: "number",
+    disabled: disabled,
     value: internalValue,
     onChange: function onChange(e) {
       var newVal = Number(e.target.value);
@@ -56,7 +60,7 @@ export var InputNumber = function InputNumber(_ref) {
       _onChange === null || _onChange === void 0 || _onChange(newVal);
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames("".concat(trionesInputNumberCls, "-button"), _defineProperty({}, "".concat(trionesInputNumberCls, "-button-disabled"), maxMatch)),
+    className: classNames("".concat(trionesInputNumberCls, "-button"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(trionesInputNumberCls, "-button-sm"), size == 'small'), "".concat(trionesInputNumberCls, "-button-lg"), size == 'large'), "".concat(trionesInputNumberCls, "-button-disabled"), maxMatch || disabled)),
     onClick: function onClick() {
       if (maxMatch) {
         return;