@trionesdev/antd-mobile-base-react 0.0.2-beta.1 → 0.0.2-beta.3

package/dist/Footer/index.d.ts

@@ -1,4 +1,3 @@
 import { Footer } from './footer';
 export type { FooterProps, ChipItem, LinkItem } from './footer';
 export default Footer;
-//# sourceMappingURL=index.d.ts.map

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,6 +8,6 @@ export interface FormContextProps {
     requiredMark?: RequiredMark;
     form?: any;
     hiddenError?: boolean;
+    extra?: React.ReactNode;
 }
 export declare const FormContext: React.Context<FormContextProps>;
-//# sourceMappingURL=context.d.ts.map

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,8 +32,8 @@ 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 };
 export default InternalForm;
-//# sourceMappingURL=form.d.ts.map

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/hooks/useForm.d.ts

@@ -1,3 +1,2 @@
 import { FormInstance } from '../interface';
 export default function useForm<Values = any>(form?: FormInstance<Values>): [FormInstance<Values>];
-//# sourceMappingURL=useForm.d.ts.map

package/dist/Form/hooks/useFormContext.d.ts

@@ -1,3 +1,2 @@
 import { FormContextProps } from "../context";
 export declare function useFormContext(): FormContextProps;
-//# sourceMappingURL=useFormContext.d.ts.map

package/dist/Form/index.d.ts

@@ -1,13 +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;
-//# sourceMappingURL=index.d.ts.map

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/interface.d.ts

@@ -1,4 +1,3 @@
 import type { FormInstance as RcFormInstance } from 'rc-field-form';
 export interface FormInstance<Values = any> extends RcFormInstance<Values> {
 }
-//# sourceMappingURL=interface.d.ts.map

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/Form/types.js

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

package/dist/Grid/grid.d.ts

@@ -14,4 +14,3 @@ export type GridItemProps = {
     children?: ReactNode;
 } & NativeProps;
 export declare const GridItem: FC<GridItemProps>;
-//# sourceMappingURL=grid.d.ts.map

package/dist/Grid/index.d.ts

@@ -5,4 +5,3 @@ type CompoundedComponent = typeof InternalGrid & {
 };
 declare const Grid: CompoundedComponent;
 export default Grid;
-//# sourceMappingURL=index.d.ts.map

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/check-icon.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { NativeProps } from '../utils/native-props';
 export declare const CheckIcon: React.NamedExoticComponent<NativeProps>;
-//# sourceMappingURL=check-icon.d.ts.map

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

@@ -4,4 +4,3 @@
 import React from "react";
 declare const _default: () => React.JSX.Element;
 export default _default;
-//# sourceMappingURL=base.d.ts.map

package/dist/Icon/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import React from "react";
 import * as icons from "../../../../antd-mobile-icons-react";

package/dist/InputNumber/index.d.ts

@@ -1,4 +1,3 @@
 import { InputNumber, InputNumberProps } from "./input-number";
 export type { InputNumberProps };
 export default InputNumber;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,14 +1,16 @@
 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;
 };
 export declare const InputNumber: FC<InputNumberProps>;
-//# sourceMappingURL=input-number.d.ts.map

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;

package/dist/InputNumber/style.scss

@@ -1,43 +1,63 @@
-@use "../style/variable" as *;
-$trionesInputNumberCls: 'triones-antm-input-number';
-
-.#{$trionesInputNumberCls} {
-  display: inline-flex;
-  align-items: center;
-  gap: 4Px;
-  border-radius: $trionesBorderRadius;
-  background-color: $trionesColorTextQuaternary;
-
-  input {
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    border: 0;
-    text-align: center;
-    width: 30Px;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &-button {
-    cursor: pointer;
-    display: flex;
-    font-size: 10Px;
-    height: 20Px;
-    width: 20Px;
-    justify-content: center;
-    align-items: center;
-    &-disabled{
-      cursor: not-allowed;
-      color: $trionesColorTextDisabled;
-    }
-    .triones-antm-icon{
-      font-size: 10Px!important;
-    }
-  }
-}
+@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;
+    }
+  }
+}

package/dist/Mask/index.d.ts

@@ -1,4 +1,3 @@
 import { Mask, MaskProps } from "./mask";
 export type { MaskProps };
 export default Mask;
-//# sourceMappingURL=index.d.ts.map

package/dist/Mask/mask-modal.d.ts

@@ -43,4 +43,3 @@ export type MaskModalProps = {
     onDestroy?: () => void;
 };
 export declare const MaskModal: FC<PropsWithChildren<MaskModalProps>>;
-//# sourceMappingURL=mask-modal.d.ts.map

package/dist/Mask/mask.d.ts

@@ -3,4 +3,3 @@ import "./style.scss";
 import { MaskModalProps } from "./mask-modal";
 export type MaskProps = Omit<MaskModalProps, 'onDestroy'>;
 export declare const Mask: FC<PropsWithChildren<MaskProps>>;
-//# sourceMappingURL=mask.d.ts.map

package/dist/Mask/style.scss

@@ -1,20 +1,20 @@
-$maskCls:'triones-antm-mask2';
-
-.#{$maskCls}{
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: none;
-  background-color: rgba(0, 0, 0, .15);
-  z-index: 1000;
-  &-open{
-    display: block;
-  }
-  &-inner{
-    height: 100%;
-    width: 100%;
-    position: relative;
-  }
-}
+$maskCls:'triones-antm-mask2';
+
+.#{$maskCls}{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: none;
+  background-color: rgba(0, 0, 0, .15);
+  z-index: 1000;
+  &-open{
+    display: block;
+  }
+  &-inner{
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+}

package/dist/NavBar/index.d.ts

@@ -1,4 +1,3 @@
 import { NavBar } from './nav-bar';
 export type { NavBarProps } from './nav-bar';
 export default NavBar;
-//# sourceMappingURL=index.d.ts.map

package/dist/NavBar/nav-bar.d.ts

@@ -26,7 +26,7 @@ export type NavBarProps = {
      * @description 标题
      */
     children?: ReactNode;
+    className?: string;
     style?: CSSProperties;
 };
 export declare const NavBar: FC<NavBarProps>;
-//# sourceMappingURL=nav-bar.d.ts.map

package/dist/NavBar/nav-bar.js

@@ -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"