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

package/dist/Input/index.scss

@@ -1,223 +1,240 @@
-@use "../style/variable" as variable;
-
-$inputCls: 'triones-antm-input';
-$inputAffixWrapperCls: 'triones-antm-input-affix-wrapper';
-$inputGroupWrapperCls: 'triones-antm-input-group-wrapper';
-$inputPotCls: 'triones-antm-pot';
-
-$inputSm: 24Px;
-$inputMd: 32Px;
-$inputLg: 40Px;
-
-$placeholderColor: #808080;
-
-.#{$inputCls} {
-  box-sizing: border-box;
-  display: inline-block;
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  transition: all .2s;
-  outline: none;
-  box-shadow: none;
-  border: none;
-  border-radius: variable.$trionesBorderRadius;
-  font-size: variable.$trionesInputInputFontSize;
-  padding: variable.$trionesInputPaddingBlock 0;
-
-  &-sm {
-    max-height: $inputSm;
-  }
-
-  &-lg {
-    max-height: $inputLg;
-  }
-
-  &::placeholder {
-    font-size: variable.$trionesInputInputFontSize;
-    color: $placeholderColor
-  }
-
-
-}
-
-
-.#{$inputAffixWrapperCls} {
-  box-sizing: border-box;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-  //line-height: variable.$trionesLineHeight;
-  padding: variable.$trionesInputPaddingBlock 0;
-  gap: 4Px;
-
-  .#{$inputCls} {
-    padding: 0;
-    background-color: transparent;
-
-    &-prifix {
-    }
-
-    &-suffix {
-      display: inline-flex;
-      align-items: center;
-      flex-shrink: 0;
-      gap: 4Px;
-
-      .clear-icon {
-        color: rgba(0, 0, 0, 0.25);
-
-
-        &:hover {
-          color: rgba(0, 0, 0, 0.45);
-        }
-      }
-
-      .triones-antm-icon {
-        cursor: pointer;
-      }
-    }
-  }
-
-  input {
-    // height: 1.47059em;
-    line-height: 1.47059;
-
-    &::placeholder {
-      font-size: variable.$trionesInputInputFontSize;
-      color: $placeholderColor
-    }
-  }
-}
-
-.#{$inputCls} {
-  &-outlined {
-    border-radius: variable.$trionesBorderRadius;
-    border: 1Px solid variable.$trionesBorderColor;
-    padding-inline: 4Px;
-  }
-
-  &-filled {
-    border-radius: variable.$trionesBorderRadius;
-    background-color: variable.$trionesColorFillTertiary;
-    padding-inline: 4Px;
-    border: 0;
-  }
-  &-borderless {
-    border: 0;
-  }
-
-  &-underlined {
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
-    border-bottom: 1Px solid variable.$trionesBorderColor;
-  }
-}
-
-.#{$inputGroupWrapperCls} {
-}
-
-
-.#{$inputPotCls} {
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle;
-
-  &-wrapper {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    column-gap: 8Px;
-  }
-
-  &-input {
-    position: absolute;
-    background-color: transparent;
-    z-index: -1;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    opacity: 0;
-    -moz-appearance: textfield;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-
-  &-item {
-    text-align: center;
-    font-size: variable.$trionesInputInputFontSize;
-    height: 32Px;
-    width: 32Px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    &-sm {
-      width: $inputSm;
-      height: $inputSm;
-    }
-
-    &-lg {
-      width: $inputLg;
-      height: $inputLg;
-    }
-
-    &::placeholder {
-      font-size: variable.$trionesInputInputFontSize;
-      color: $placeholderColor
-    }
-
-    &-focus {
-      &::after {
-        content: ' ';
-        height: 100%;
-        width: 0.5Px;
-        background-color: #0a0a0a;
-        transition: transform 0.1s ease;
-        animation: blink 1s step-end infinite;
-      }
-    }
-
-  }
-
-  .#{$inputCls}-outlined {
-    font-size: variable.$trionesInputInputFontSize;
-    color: rgba(0, 0, 0, 0.88);
-    background: #ffffff;
-    border-width: 1Px;
-    border-style: solid;
-    border-color: #d9d9d9;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-  }
-}
-
-
-.#{$inputCls}-textarea {
-  box-sizing: border-box;
-  width: 100%;
-  outline: 0;
-  padding-block: variable.$trionesInputPaddingBlock;
-  font-size: variable.$trionesInputInputFontSize;
-
-  &::placeholder {
-    font-size: variable.$trionesInputInputFontSize;
-    color: $placeholderColor
-  }
-}
-
-@keyframes blink {
-  50% {
-    background-color: transparent;
-  }
-}
+@use "../style/variable" as variable;
+
+$inputCls: 'triones-antm-input';
+$inputAffixWrapperCls: 'triones-antm-input-affix-wrapper';
+$inputGroupWrapperCls: 'triones-antm-input-group-wrapper';
+$inputPotCls: 'triones-antm-pot';
+
+$inputSm: 24Px;
+$inputMd: 32Px;
+$inputLg: 40Px;
+
+$placeholderColor: #CCCCCC;
+
+.#{$inputCls} {
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  transition: all .2s;
+  outline: none;
+  box-shadow: none;
+  border: none;
+  border-radius: variable.$trionesBorderRadius;
+  font-size: variable.$trionesInputInputFontSize;
+  //padding: variable.$trionesInputPaddingBlock 0;
+
+  &-sm {
+    max-height: $inputSm;
+    //font-size: variable.$trionesInputPaddingInlineSm 0;
+  }
+
+  &-lg {
+    max-height: $inputLg;
+    //font-size: variable.$trionesInputPaddingInlineLg 0;
+  }
+
+  &::placeholder {
+    font-size: variable.$trionesInputInputFontSize;
+    color: $placeholderColor
+  }
+
+
+}
+
+
+.#{$inputAffixWrapperCls} {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  //line-height: variable.$trionesLineHeight;
+  //padding: variable.$trionesInputPaddingBlock 0;
+  gap: 4Px;
+
+  &-small {
+    padding: variable.$trionesInputPaddingBlockSm 0;
+    font-size: variable.$trionesInputInputFontSizeSm;
+  }
+
+  &-large {
+    padding: variable.$trionesInputPaddingBlockLg 0;
+    font-size: variable.$trionesInputInputFontSizeLg;
+  }
+
+  .#{$inputCls} {
+    padding: 0;
+    background-color: transparent;
+
+    &-prifix {
+    }
+
+    &-suffix {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      gap: 4Px;
+
+      .clear-icon {
+        color: rgba(0, 0, 0, 0.25);
+
+
+        &:hover {
+          color: rgba(0, 0, 0, 0.45);
+        }
+      }
+
+      .triones-antm-icon {
+        cursor: pointer;
+      }
+    }
+  }
+
+  input {
+    // height: 1.47059em;
+    line-height: 1.47059;
+
+    &::placeholder {
+      font-size: variable.$trionesInputInputFontSize;
+      color: $placeholderColor
+    }
+  }
+}
+
+.#{$inputCls} {
+  &-outlined {
+    padding-block: variable.$trionesInputPaddingBlock;
+    border-radius: variable.$trionesBorderRadius;
+    border: 1Px solid variable.$trionesBorderColor;
+    padding-inline: 4Px;
+    box-sizing: border-box;
+  }
+
+  &-filled {
+    border-radius: variable.$trionesBorderRadius;
+    background-color: variable.$trionesColorFillTertiary;
+    padding-inline: variable.$trionesInputPaddingBlock;
+    padding-block: variable.$trionesInputPaddingBlock;
+    box-sizing: border-box;
+    border: 0;
+  }
+
+  &-borderless {
+    border: 0;
+  }
+
+  &-underlined {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 1Px solid variable.$trionesBorderColor;
+    padding-block: variable.$trionesInputPaddingBlock;
+    box-sizing: border-box;
+  }
+}
+
+
+
+.#{$inputPotCls} {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  &-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    column-gap: 8Px;
+  }
+
+  &-input {
+    position: absolute;
+    background-color: transparent;
+    z-index: -1;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  &-item {
+    text-align: center;
+    font-size: variable.$trionesInputInputFontSize;
+    height: variable.$trionesControlHeight;
+    width: variable.$trionesControlHeight;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &-sm {
+      width: variable.$trionesControlHeightSm;
+      height: variable.$trionesControlHeightSm;
+    }
+
+    &-lg {
+      width: variable.$trionesControlHeightLg;
+      height: variable.$trionesControlHeightLg;
+    }
+
+    &::placeholder {
+      font-size: variable.$trionesInputInputFontSize;
+      color: $placeholderColor
+    }
+
+    &-focus {
+      &::after {
+        content: ' ';
+        height: 100%;
+        width: 0.5Px;
+        background-color: #0a0a0a;
+        transition: transform 0.1s ease;
+        animation: blink 1s step-end infinite;
+      }
+    }
+
+  }
+
+  .#{$inputCls}-outlined {
+    font-size: variable.$trionesInputInputFontSize;
+    color: rgba(0, 0, 0, 0.88);
+    background: #ffffff;
+    border-width: 1Px;
+    border-style: solid;
+    border-color: #d9d9d9;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+  }
+}
+
+
+.#{$inputCls}-textarea {
+  box-sizing: border-box;
+  width: 100%;
+  outline: 0;
+  //padding-block: variable.$trionesInputPaddingBlock;
+  font-size: variable.$trionesInputInputFontSize;
+
+  &::placeholder {
+    font-size: variable.$trionesInputInputFontSize;
+    color: $placeholderColor
+  }
+}
+
+@keyframes blink {
+  50% {
+    background-color: transparent;
+  }
+}

package/dist/Input/input-affix-wrapper.d.ts

@@ -1,7 +1,9 @@
 import React, { FC, PropsWithChildren } from 'react';
 import { BaseInputProps } from './base-input';
-import { variantType } from "./types";
+import { variantType } from './types';
+import { AntSize } from "@trionesdev/antd-mobile-base-react";
 export type InputAffixWrapperProps = BaseInputProps & {
+    size?: AntSize;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     variant?: variantType;

package/dist/Input/input-affix-wrapper.js

@@ -1,28 +1,28 @@
 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); }
-var _excluded = ["children", "prefix", "suffix", "variant", "allowClear", "value", "onChange", "onClear"];
+var _excluded = ["children", "size", "prefix", "suffix", "variant", "allowClear", "value", "onClear"];
 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); }
 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 { CloseCircleFill } from "../../../antd-mobile-icons-react";
 import classNames from 'classnames';
 import React from 'react';
 import { inputAffixWrapperCls, inputCls } from "./types";
+import { CloseCircleFill } from "@trionesdev/antd-mobile-icons-react";
 export var InputAffixWrapper = function InputAffixWrapper(_ref) {
   var children = _ref.children,
+    size = _ref.size,
     prefix = _ref.prefix,
     suffix = _ref.suffix,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'borderless' : _ref$variant,
     allowClear = _ref.allowClear,
     value = _ref.value,
-    onChange = _ref.onChange,
     onClear = _ref.onClear,
     rest = _objectWithoutProperties(_ref, _excluded);
   var innerStyle = rest.style || {};
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([inputAffixWrapperCls, _defineProperty({}, "".concat(inputCls, "-").concat(variant), variant), rest.className]),
+    className: classNames([inputAffixWrapperCls, "".concat(inputAffixWrapperCls, "-").concat(size), _defineProperty({}, "".concat(inputCls, "-").concat(variant), variant), rest.className]),
     style: innerStyle
   }, prefix && /*#__PURE__*/React.createElement("div", {
     className: classNames(["".concat(inputCls, "-prefix")])

package/dist/Input/input.d.ts

@@ -1,9 +1,11 @@
+import { AntSize } from '@trionesdev/antd-mobile-base-react';
 import React, { FC } from 'react';
 import './index.scss';
-import { variantType } from "./types";
+import { variantType } from './types';
 export type InputProps = {
     className?: string;
     style?: React.CSSProperties;
+    size?: AntSize;
     placeholder?: string;
     type?: 'text' | 'password' | 'textarea';
     variant?: variantType;

package/dist/Input/input.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "style", "placeholder", "type", "disabled", "allowClear", "prefix", "suffix", "defaultValue", "value", "onChange"];
+var _excluded = ["className", "style", "size", "placeholder", "type", "disabled", "allowClear", "prefix", "suffix", "defaultValue", "value", "onChange"];
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -15,6 +15,8 @@ import { InputAffixWrapper } from "./input-affix-wrapper";
 export var Input = function Input(_ref) {
   var className = _ref.className,
     style = _ref.style,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     placeholder = _ref.placeholder,
     type = _ref.type,
     disabled = _ref.disabled,
@@ -25,7 +27,7 @@ export var Input = function Input(_ref) {
     value = _ref.value,
     _onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _React$useState = React.useState(value),
+  var _React$useState = React.useState(value || defaultValue),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     innerValue = _React$useState2[0],
     setInnerValue = _React$useState2[1];
@@ -40,6 +42,7 @@ export var Input = function Input(_ref) {
   return /*#__PURE__*/React.createElement(InputAffixWrapper, _extends({}, rest, {
     className: className,
     style: style,
+    size: size,
     placeholder: placeholder,
     prefix: prefix,
     suffix: suffix,

package/dist/Loading/DotLoading.d.ts

@@ -0,0 +1 @@
+export { DotLoading } from '@trionesdev/antd-mobile-base-react';

package/dist/Loading/DotLoading.js

@@ -0,0 +1 @@
+export { DotLoading } from '@trionesdev/antd-mobile-base-react';

package/dist/Loading/SpinLoading.d.ts

@@ -0,0 +1 @@
+export { SpinLoading } from '@trionesdev/antd-mobile-base-react';

package/dist/Loading/SpinLoading.js

@@ -0,0 +1 @@
+export { SpinLoading } from '@trionesdev/antd-mobile-base-react';

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

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

package/dist/{SpinLoading → Loading}/demo/base.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { DemoBlock } from "../../DemoBlock";
-import SpinLoading from "../index";
 import Space from "../../Space";
+import { SpinLoading } from "../../index";
 export default (function () {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DemoBlock, {
     title: "\u57FA\u7840\u4F7F\u7528"
@@ -9,8 +9,14 @@ export default (function () {
     title: "\u989C\u8272"
   }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(SpinLoading, null), /*#__PURE__*/React.createElement(SpinLoading, {
     color: "primary"
-  }), /*#__PURE__*/React.createElement(SpinLoading, {
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: "#333"
+    }
+  }, /*#__PURE__*/React.createElement(SpinLoading, {
     color: "white"
+  })), /*#__PURE__*/React.createElement(SpinLoading, {
+    color: "red"
   }))), /*#__PURE__*/React.createElement(DemoBlock, {
     title: "\u5927\u5C0F"
   }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(SpinLoading, {

package/dist/Loading/demo/dot-loading.d.ts

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

package/dist/Loading/demo/dot-loading.js

@@ -0,0 +1,25 @@
+import { DemoBlock } from "../../DemoBlock";
+import React from "react";
+import { DotLoading } from "../../index";
+export default (function () {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u7840\u4F7F\u7528"
+  }, /*#__PURE__*/React.createElement(DotLoading, null)), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u7840\u4F7F\u7528"
+  }, /*#__PURE__*/React.createElement(DotLoading, {
+    color: "primary"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u7840\u4F7F\u7528"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: '#0000004a',
+      padding: '10px'
+    }
+  }, /*#__PURE__*/React.createElement(DotLoading, {
+    color: "white"
+  }))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u7840\u4F7F\u7528"
+  }, /*#__PURE__*/React.createElement(DotLoading, {
+    color: "red"
+  })));
+});

package/dist/Loading/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { DotLoadingProps, SpinLoadingProps } from '@trionesdev/antd-mobile-base-react';
+export declare const SpinLoading: import("react").FC<SpinLoadingProps>;
+export declare const DotLoading: import("react").FC<DotLoadingProps>;
+export type { SpinLoadingProps, DotLoadingProps };

package/dist/Loading/index.js

@@ -0,0 +1,3 @@
+import { DotLoading as BaseDotLoading, SpinLoading as BaseSpinLoading } from '@trionesdev/antd-mobile-base-react';
+export var SpinLoading = BaseSpinLoading;
+export var DotLoading = BaseDotLoading;

package/dist/NavBar/demo/base.scss

@@ -1,5 +1,5 @@
-.my-nav-bar {
-  &-subtitle {
-    font-size: 12px;
-  }
-}
+.my-nav-bar {
+  &-subtitle {
+    font-size: 12px;
+  }
+}