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

package/dist/Space/style.scss

@@ -0,0 +1,77 @@
+$class-prefix-space: 'triones-antm-space';
+
+.#{$class-prefix-space}-item {
+  flex: none;
+  display: inline-flex;
+}
+/* prettier-ignore */
+.#{$class-prefix-space} {
+  display: inline-flex;
+  &-vertical {
+    flex-direction: column;
+    > .#{$class-prefix-space}-item {
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &-horizontal {
+    flex-direction: row;
+    > .#{$class-prefix-space}-item {
+      &:last-child {
+
+      }
+    }
+    &.#{$class-prefix-space}-wrap {
+      flex-wrap: wrap;
+      > .#{$class-prefix-space}-item {
+
+      }
+    }
+  }
+  &.#{$class-prefix-space}-block {
+    display: flex;
+    width: 100%;
+    .#{$class-prefix-space}-item{
+      display: flex;
+    }
+
+  }
+  &-align {
+    &-center {
+      align-items: center;
+    }
+    &-start {
+      align-items: flex-start;
+    }
+    &-end {
+      align-items: flex-end;
+    }
+    &-baseline {
+      align-items: baseline;
+    }
+  }
+  &-justify {
+    &-center {
+      justify-content: center;
+    }
+    &-start {
+      justify-content: flex-start;
+    }
+    &-end {
+      justify-content: flex-end;
+    }
+    &-between {
+      justify-content: space-between;
+    }
+    &-around {
+      justify-content: space-around;
+    }
+    &-evenly {
+      justify-content: space-evenly;
+    }
+    &-stretch {
+      justify-content: stretch;
+    }
+  }
+}

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

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

package/dist/SpinLoading/demo/base.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { DemoBlock } from "../../DemoBlock";
+import { SpinLoading } from "../spin-loading";
+import Space from "../../Space";
+export default (function () {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u7840\u4F7F\u7528"
+  }, /*#__PURE__*/React.createElement(SpinLoading, null)), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u989C\u8272"
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(SpinLoading, null), /*#__PURE__*/React.createElement(SpinLoading, {
+    color: "primary"
+  }), /*#__PURE__*/React.createElement(SpinLoading, {
+    color: "white"
+  }))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u5927\u5C0F"
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(SpinLoading, {
+    size: "small"
+  }), /*#__PURE__*/React.createElement(SpinLoading, null), /*#__PURE__*/React.createElement(SpinLoading, {
+    size: "large"
+  }))));
+});

package/dist/SpinLoading/index.d.ts

@@ -0,0 +1,3 @@
+import { SpinLoading, SpinLoadingProps } from "./spin-loading";
+export type { SpinLoadingProps };
+export default SpinLoading;

package/dist/SpinLoading/index.js

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

package/dist/SpinLoading/spin-loading.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import './spin-loading.scss';
+export type SpinLoadingProps = {
+    size?: 'small' | 'middle' | 'large' | number;
+    color?: 'default' | 'primary' | 'white' | string;
+};
+export declare function createSvgStr(props: {
+    stroke: string;
+}): string;
+export declare const SpinLoading: FC<SpinLoadingProps>;

package/dist/SpinLoading/spin-loading.js

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import Base64 from 'crypto-js/enc-base64';
+import Utf8 from 'crypto-js/enc-utf8';
+import React from 'react';
+import "./spin-loading.scss";
+var spinLoadingCls = 'triones-antm-spin-loading';
+export function createSvgStr(props) {
+  return "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"width:100%;height:100%\" viewBox=\"0 0 32 32\">\n            <circle r=\"15\" cx=\"16\" cy=\"16\"\n                stroke-width=\"2\"\n                stroke=\"".concat(props.stroke, "\"\n                fill=\"transparent\"\n                stroke-linecap=\"round\"\n                stroke-dasharray=\"").concat(15 * 3.14159265358979 * 2, "\"\n                stroke-dashoffset=\"").concat(15 * 3.14159265358979 * 0.5, "\"></circle>\n        </svg>");
+}
+export var SpinLoading = function SpinLoading(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color;
+  var computedSize = React.useMemo(function () {
+    var resSize = null;
+    if (size === 'small') {
+      resSize = '24Px';
+    } else if (size === 'middle') {
+      resSize = '32Px';
+    } else if (size === 'large') {
+      resSize = '48Px';
+    } else {
+      resSize = size;
+    }
+    if (typeof resSize === 'number') {
+      return "".concat(resSize, "Px");
+    } else {
+      return resSize;
+    }
+  }, [size]);
+  var computedColor = React.useMemo(function () {
+    if (color === 'default') {
+      return '#9D9D9D';
+    } else if (color === 'primary') {
+      return '#1677ff';
+    } else if (color === 'white') {
+      return '#ffffff';
+    } else {
+      return color;
+    }
+  }, [color]);
+  var completedStyle = React.useMemo(function () {
+    var maskImageSvg = createSvgStr({
+      stroke: computedColor
+    });
+    return {
+      '--size': computedSize,
+      '--color': computedColor,
+      '--maskImage': "url(data:image/svg+xml;base64,".concat(Base64.stringify(Utf8.parse(maskImageSvg)), ")")
+    };
+  }, [computedSize, computedColor]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(spinLoadingCls),
+    style: completedStyle
+  }, /*#__PURE__*/React.createElement("i", {
+    className: classNames("".concat(spinLoadingCls, "-loading"))
+  }));
+};

package/dist/SpinLoading/spin-loading.scss

@@ -0,0 +1,40 @@
+$spinLoadingCls: triones-antm-spin-loading;
+
+.#{$spinLoadingCls} {
+  --size: 32Px;
+  --color: #1677ff;
+  width: var(--size);
+  height: var(--size);
+
+  &-svg {
+    width: 100%;
+    height: 100%;
+    //animation: adm-spin-loading-rotate 0.8s infinite linear;
+
+    > .#{$spinLoadingCls}-circle {
+      //stroke: #1677ff;
+      stroke: var(--color);
+    }
+  }
+
+  &-loading {
+    color: var(--color);
+    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;
+  }
+
+}
+
+@keyframes adm-spin-loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/Steps/HorizontalSteps.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { HorizontalStepsProps } from "./types";
+export declare const HorizontalSteps: FC<HorizontalStepsProps>;

package/dist/Steps/HorizontalSteps.js

@@ -0,0 +1,85 @@
+import React, { useContext } from "react";
+import { activeColor, clsPrefixStep, clsPrefixSteps, waitColor } from "./types";
+import classNames from "classnames";
+import { Point } from "./Point";
+import { StepsContext } from "./context";
+var HorizontalStepItem = function HorizontalStepItem(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    index = _ref.index;
+  var _useContext = useContext(StepsContext),
+    current = _useContext.current,
+    iconSize = _useContext.iconSize,
+    stretch = _useContext.stretch;
+  var handleBeforeLineColor = function handleBeforeLineColor() {
+    if (index <= current) {
+      return activeColor;
+    } else {
+      return waitColor;
+    }
+  };
+  var handleAfterLineColor = function handleAfterLineColor() {
+    if (index < current) {
+      return activeColor;
+    } else {
+      return waitColor;
+    }
+  };
+  var handlePointColor = function handlePointColor() {
+    if (index <= current) {
+      return activeColor;
+    } else {
+      return waitColor;
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep)),
+    style: {
+      flex: stretch ? '1 auto' : undefined
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator-icon-before"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator-icon-before-line")),
+    style: {
+      backgroundColor: handleBeforeLineColor()
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator-icon")),
+    style: {
+      width: iconSize,
+      height: iconSize
+    }
+  }, icon || /*#__PURE__*/React.createElement(Point, {
+    color: handlePointColor()
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator-icon-after"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator-icon-after-line")),
+    style: {
+      backgroundColor: handleAfterLineColor()
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-content"))
+  }, title && /*#__PURE__*/React.createElement("div", null, title), description && /*#__PURE__*/React.createElement("div", null, description)));
+};
+export var HorizontalSteps = function HorizontalSteps(_ref2) {
+  var _ref2$stretch = _ref2.stretch,
+    stretch = _ref2$stretch === void 0 ? true : _ref2$stretch,
+    _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(clsPrefixSteps, "".concat(clsPrefixSteps, "-horizontal"))
+  }, items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(HorizontalStepItem, {
+      icon: item.icon,
+      title: item.title,
+      description: item.description,
+      key: index,
+      index: index
+    });
+  }));
+};

package/dist/Steps/Point.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+type PointProps = {
+    color?: string;
+};
+export declare const Point: FC<PointProps>;
+export {};

package/dist/Steps/Point.js

@@ -0,0 +1,13 @@
+import React from "react";
+export var Point = function Point(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#1777FF' : _ref$color;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 10,
+      height: 10,
+      borderRadius: 90,
+      backgroundColor: color
+    }
+  });
+};

package/dist/Steps/Steps.d.ts

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

package/dist/Steps/Steps.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { HorizontalSteps } from "./HorizontalSteps";
+import { StepsContext } from "./context";
+import "./style.scss";
+import { VerticalSteps } from "./VerticalSteps";
+export var Steps = function Steps(_ref) {
+  var _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+    _ref$current = _ref.current,
+    current = _ref$current === void 0 ? 0 : _ref$current,
+    _ref$stretch = _ref.stretch,
+    stretch = _ref$stretch === void 0 ? true : _ref$stretch,
+    iconSize = _ref.iconSize,
+    items = _ref.items;
+  return /*#__PURE__*/React.createElement(StepsContext.Provider, {
+    value: {
+      current: current,
+      iconSize: iconSize,
+      stretch: stretch
+    }
+  }, direction === 'horizontal' && /*#__PURE__*/React.createElement(HorizontalSteps, {
+    items: items
+  }), direction === 'vertical' && /*#__PURE__*/React.createElement(VerticalSteps, {
+    items: items
+  }));
+};

package/dist/Steps/VerticalSteps.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { VerticalStepsProps } from "./types";
+export declare const VerticalSteps: FC<VerticalStepsProps>;

package/dist/Steps/VerticalSteps.js

@@ -0,0 +1,92 @@
+import { useContext } from "react";
+import { activeColor, clsPrefixStep, clsPrefixSteps, waitColor } from "./types";
+import React from "react";
+import classNames from "classnames";
+import { StepsContext } from "./context";
+import { Point } from "./Point";
+var VerticalStepIem = function VerticalStepIem(_ref) {
+  var index = _ref.index,
+    icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description;
+  var _useContext = useContext(StepsContext),
+    current = _useContext.current,
+    iconSize = _useContext.iconSize,
+    stretch = _useContext.stretch;
+  var handleBeforeLineColor = function handleBeforeLineColor() {
+    if (index <= current) {
+      return activeColor;
+    } else {
+      return waitColor;
+    }
+  };
+  var handleAfterLineColor = function handleAfterLineColor() {
+    if (index < current) {
+      return activeColor;
+    } else {
+      return waitColor;
+    }
+  };
+  var handlePointColor = function handlePointColor() {
+    if (index <= current) {
+      return activeColor;
+    } else {
+      return waitColor;
+    }
+  };
+  var handleBeforeHeight = function handleBeforeHeight() {
+    if (iconSize > 28) {
+      return 0;
+    } else {
+      return (28 - iconSize) / 2;
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator-icon-before")),
+    style: {
+      minHeight: handleBeforeHeight()
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator-icon-before-line")),
+    style: {
+      backgroundColor: handleBeforeLineColor()
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator-icon")),
+    style: {
+      width: iconSize,
+      height: iconSize
+    }
+  }, icon || /*#__PURE__*/React.createElement(Point, {
+    color: handlePointColor()
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator-icon-after"))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-indicator-icon-after-line")),
+    style: {
+      backgroundColor: handleAfterLineColor()
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(clsPrefixStep, "-content"))
+  }, title && /*#__PURE__*/React.createElement("div", null, title), description && /*#__PURE__*/React.createElement("div", null, description)));
+};
+export var VerticalSteps = function VerticalSteps(_ref2) {
+  var 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"))
+  }, items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(VerticalStepIem, {
+      key: index,
+      index: index,
+      icon: item.icon,
+      title: item.title,
+      description: item.description
+    });
+  }));
+};

package/dist/Steps/context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type StepsContextType = {
+    current: number;
+    iconSize?: number;
+    stretch?: boolean;
+};
+export declare const StepsContext: import("react").Context<StepsContextType>;
+export {};

package/dist/Steps/context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+export var StepsContext = /*#__PURE__*/createContext({
+  current: 0,
+  stretch: true
+});

package/dist/Steps/index.d.ts

@@ -0,0 +1,4 @@
+import { Steps } from "./Steps";
+import { StepsProps, StepsItemProps } from "./types";
+export type { StepsProps, StepsItemProps };
+export default Steps;

package/dist/Steps/index.js

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

package/dist/Steps/style.scss

@@ -0,0 +1,146 @@
+$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;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/Steps/types.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export type StepsItemProps = {
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+};
+export type BaseStepsProps = {
+    current?: number;
+    items?: StepsItemProps[];
+};
+export type HorizontalStepsProps = BaseStepsProps & {
+    stretch?: boolean;
+};
+export type VerticalStepsProps = BaseStepsProps & {};
+export type StepsProps = {
+    direction?: 'horizontal' | 'vertical';
+    stretch?: boolean;
+    iconSize?: number;
+} & BaseStepsProps;
+export declare const clsPrefixSteps = "triones-antm-steps";
+export declare const clsPrefixStep = "triones-antm-step";
+export declare const activeColor = "#1777FF";
+export declare const waitColor = "#EEEEEE";

package/dist/Steps/types.js

@@ -0,0 +1,4 @@
+export var clsPrefixSteps = 'triones-antm-steps';
+export var clsPrefixStep = 'triones-antm-step';
+export var activeColor = "#1777FF";
+export var waitColor = "#EEEEEE";

package/dist/Switch/index.d.ts

@@ -0,0 +1,3 @@
+import { Switch } from './switch';
+export type { SwitchProps } from './switch';
+export default Switch;

package/dist/Switch/index.js

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