@trionesdev/antd-taro-react 0.0.1-beta.3

package/dist/Radio/style.scss

@@ -0,0 +1,116 @@
+@import "../style/variable";
+
+$checkboxDisabledColor:rgba(0,0,0,0.25) !default;
+
+$class-prefix-radio: 'triones-antm-radio';
+
+.#{$class-prefix-radio}-wrapper{
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 8Px;
+  .#{$class-prefix-radio}{
+    &-fake{
+      width: 22PX;
+      height: 22PX;
+      .triones-antm-icon{
+        position: absolute;
+      }
+
+      &-checked{
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        background-color: $trionesColorPrimary;
+        color: white;
+        border-radius: 50vh;
+        box-sizing: border-box;
+        overflow: hidden;
+
+      }
+      &-unchecked{
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50vh;
+        border: 1PX solid $trionesBorderColor;
+        box-sizing: border-box;
+      }
+
+    }
+  }
+
+  &.#{$class-prefix-radio}-disabled{
+    color: $checkboxDisabledColor;
+    pointer-events: none;
+    .#{$class-prefix-radio}-fake-checked{
+      background-color: $checkboxDisabledColor;
+    }
+  }
+
+}
+
+
+.#{$class-prefix-radio}-group {
+  display: flex;
+}
+
+.#{$class-prefix-radio}-button-group {
+  display: flex;
+}
+
+.#{$class-prefix-radio}-button-wrapper {
+  display: inline-flex;
+  position: relative;
+  border-top: 1PX solid $trionesBorderColor;
+  border-bottom: 1PX solid $trionesBorderColor;
+  border-right: 1PX solid $trionesBorderColor;
+
+  &:first-child {
+    border-left: 1PX solid $trionesBorderColor;
+    border-top-left-radius: $trionesBorderRadius;
+    border-bottom-left-radius: $trionesBorderRadius;
+  }
+
+  &:last-child {
+    border-right: 1PX solid $trionesBorderColor;
+    border-top-right-radius: $trionesBorderRadius;
+    border-bottom-right-radius: $trionesBorderRadius;
+  }
+
+  &-checked {
+    border-top: 1PX solid $trionesColorPrimary;
+    border-bottom: 1PX solid $trionesColorPrimary;
+    color: $trionesColorPrimary;
+
+    &:first-child {
+      border: 1PX solid $trionesColorPrimary;
+    }
+
+    &:not(:first-child) {
+      &::before {
+        content: " ";
+        width: 1PX;
+        background-color: $trionesColorPrimary;
+        position: absolute;
+        inset-block-start: -1Px;
+        inset-inline-start: -1Px;
+        height: 100%;
+        padding-block: 1Px;
+      }
+
+      border-right: 1PX solid $trionesColorPrimary;
+    }
+  }
+
+  .#{$class-prefix-radio}-button {
+    cursor: pointer;
+    display: inline-flex;
+    padding: 8Px 12Px;
+
+  }
+}

package/dist/Radio/types.d.ts

@@ -0,0 +1,55 @@
+import React, { ReactNode } from 'react';
+import { RadioValue } from './radio';
+export declare const classPrefix = "triones-antm-radio";
+export type RadioProps = {
+    className?: string;
+    /**
+     * @description 是否选中
+     */
+    checked?: boolean;
+    /**
+     * @description 默认是否选中
+     */
+    defaultChecked?: boolean;
+    /**
+     * @description 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * @description 选中变化
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * @description 值
+     */
+    value?: RadioValue;
+    /**
+     * @description 块级样式
+     */
+    block?: boolean;
+    /**
+     * @description 图标
+     */
+    icon?: (checked: boolean) => ReactNode;
+    /**
+     * @description 子元素
+     */
+    children?: ReactNode;
+    /**
+     * @description 点击事件
+     */
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+};
+export interface RadioGroupProps {
+    children?: ReactNode;
+    className?: string;
+    value?: any;
+    onChange?: (val: any) => void;
+    defaultValue?: any;
+    disabled?: boolean;
+    shape?: 'button' | 'round';
+    items?: {
+        label: React.ReactNode;
+        value: any;
+    }[];
+}

package/dist/Radio/types.js

@@ -0,0 +1 @@
+export var classPrefix = "triones-antm-radio";

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

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

package/dist/Rate/demo/base.js

@@ -0,0 +1,59 @@
+import { PlayOutline } from '@trionesdev/antd-taro-icons-react';
+import { DemoBlock } from "../../DemoBlock";
+import React from 'react';
+import Rate from "../index";
+import Space from "../../Space";
+export default (function () {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u7840\u7528\u6CD5"
+  }, /*#__PURE__*/React.createElement(Rate, null)), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u9ED8\u8BA4\u503C"
+  }, /*#__PURE__*/React.createElement(Rate, {
+    defaultValue: 3
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u534A\u661F"
+  }, /*#__PURE__*/React.createElement(Rate, {
+    allowHalf: true,
+    defaultValue: 2.5
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u53EA\u8BFB"
+  }, /*#__PURE__*/React.createElement(Rate, {
+    value: 4,
+    readonly: true
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u6E05\u9664"
+  }, /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical"
+  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Rate, {
+    allowClear: true,
+    defaultValue: 3
+  }), /*#__PURE__*/React.createElement("div", null, "\u53EF\u6E05\u9664(\u70B9\u51FB\u540C\u4E00\u9897\u661F\u661F)")), /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Rate, {
+    allowClear: false,
+    defaultValue: 2
+  }), /*#__PURE__*/React.createElement("div", null, "\u4E0D\u53EF\u6E05\u9664")))), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u81EA\u5B9A\u4E49\u6570\u91CF"
+  }, /*#__PURE__*/React.createElement(Rate, {
+    count: 10,
+    defaultValue: 5
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u81EA\u5B9A\u4E49\u5B57\u7B26"
+  }, /*#__PURE__*/React.createElement(Space, {
+    direction: "vertical"
+  }, /*#__PURE__*/React.createElement(Rate, {
+    character: "A",
+    size: 40,
+    allowHalf: true
+  }), /*#__PURE__*/React.createElement(Rate, {
+    character: /*#__PURE__*/React.createElement(PlayOutline, {
+      style: {
+        fontSize: 20
+      }
+    }),
+    allowHalf: true,
+    defaultValue: 3.5,
+    style: {
+      '--active-color': '#46b37a',
+      '--inactive-color': '#1d78c9'
+    }
+  }))));
+});

package/dist/Rate/index.d.ts

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

package/dist/Rate/index.js

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

package/dist/Rate/rate.d.ts

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../utils/native-props';
+import './style.scss';
+type RateProps = {
+    /**
+     * 评分值
+     */
+    value?: number;
+    /**
+     * 默认评分值
+     */
+    defaultValue?: number;
+    /**
+     * 评分总数
+     */
+    count?: number;
+    /**
+     * 是否允许半星
+     */
+    allowHalf?: boolean;
+    /**
+     * 是否允许清除
+     */
+    allowClear?: boolean;
+    /**
+     * 是否只读
+     */
+    readonly?: boolean;
+    /**
+     * 评分改变时的回调
+     */
+    onChange?: (value: number) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 星星大小
+     */
+    size?: number;
+    /**
+     * 自定义字符
+     */
+    character?: React.ReactNode;
+    /**
+     * 自定义样式
+     */
+    style?: React.CSSProperties;
+} & NativeProps<'--active-color' | '--inactive-color'>;
+export declare const Rate: FC<RateProps>;
+export {};

package/dist/Rate/rate.js

@@ -0,0 +1,100 @@
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 _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."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { StarFill } from '@trionesdev/antd-taro-icons-react';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { withNativeProps } from "../utils/native-props";
+import { mergeProps } from "../utils/with-default-props";
+import "./style.scss";
+var defaultProps = {
+  count: 5,
+  defaultValue: 0,
+  allowHalf: false,
+  readonly: false,
+  allowClear: true,
+  size: 20
+};
+export var Rate = function Rate(p) {
+  var props = mergeProps(defaultProps, p);
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    count = props.count,
+    allowHalf = props.allowHalf,
+    readonly = props.readonly,
+    allowClear = props.allowClear,
+    size = props.size,
+    character = props.character,
+    onChange = props.onChange;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var clsPrefix = 'triones-antm-rate';
+  var currentValue = value !== null && value !== void 0 ? value : internalValue;
+  var handleClick = function handleClick(index, isHalf) {
+    if (readonly) return;
+    var newValue = isHalf ? index + 0.5 : index + 1;
+    if (allowClear) {
+      if (!allowHalf && currentValue === newValue || allowHalf && currentValue === newValue && currentValue === index + (isHalf ? 0.5 : 1)) {
+        if (!value) {
+          setInternalValue(0);
+        }
+        onChange === null || onChange === void 0 || onChange(0);
+        return;
+      }
+    }
+    if (!value) {
+      setInternalValue(newValue);
+    }
+    onChange === null || onChange === void 0 || onChange(newValue);
+  };
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classNames(clsPrefix, _defineProperty({}, "".concat(clsPrefix, "-readonly"), readonly))
+  }, _toConsumableArray(Array(count)).map(function (_, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "".concat(clsPrefix, "-star-wrapper"),
+      onClick: function onClick(e) {
+        if (!allowHalf) {
+          handleClick(index, false);
+          return;
+        }
+        var rect = e.currentTarget.getBoundingClientRect();
+        var isHalf = e.clientX - rect.left < rect.width / 2;
+        handleClick(index, isHalf);
+      }
+    }, character ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(clsPrefix, "-star"), _defineProperty({}, "".concat(clsPrefix, "-star-active"), index + 1 <= currentValue)),
+      style: {
+        fontSize: size
+      }
+    }, character), allowHalf && /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(clsPrefix, "-star"), "".concat(clsPrefix, "-star-half-item"), _defineProperty({}, "".concat(clsPrefix, "-star-active"), index + 0.5 <= currentValue)),
+      style: {
+        fontSize: size
+      }
+    }, character)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StarFill, {
+      className: classNames("".concat(clsPrefix, "-star"), _defineProperty({}, "".concat(clsPrefix, "-star-active"), index + 1 <= currentValue)),
+      style: {
+        fontSize: size
+      }
+    }), allowHalf && /*#__PURE__*/React.createElement(StarFill, {
+      className: classNames("".concat(clsPrefix, "-star"), "".concat(clsPrefix, "-star-half-item"), _defineProperty({}, "".concat(clsPrefix, "-star-active"), index + 0.5 <= currentValue)),
+      style: {
+        fontSize: size
+      }
+    })));
+  })));
+};

package/dist/Rate/style.scss

@@ -0,0 +1,37 @@
+$rateCls: 'triones-antm-rate';
+
+.#{$rateCls} {
+  display: inline-flex;
+  align-items: center;
+
+  &-star-wrapper {
+    position: relative;
+    padding: 0 2px;
+    cursor: pointer;
+  }
+
+  &-star {
+    font-size: 20px;
+    color: var(--inactive-color, #e8e8e8);
+    transition: color 0.3s;
+
+    &-active {
+      color: var(--active-color, #ffb400);
+    }
+  }
+
+  &-star-half-item {
+    position: absolute;
+    left: 2px;
+    top: 0;
+    width: 42%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  &-readonly {
+    .#{$rateCls}-star-wrapper {
+      cursor: default;
+    }
+  }
+}

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

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

package/dist/Result/demo/base.js

@@ -0,0 +1,57 @@
+/**
+ * compact: true
+ */
+import { DemoBlock } from "../../DemoBlock";
+import React from 'react';
+import { FaceRecognitionOutline } from "@trionesdev/antd-taro-icons-react";
+import Result from "../index";
+export default (function () {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u6210\u529F\u72B6\u6001",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    status: "success",
+    title: "\u64CD\u4F5C\u6210\u529F",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u7B49\u5F85\u72B6\u6001",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    status: "waiting",
+    title: "\u7B49\u5F85\u5904\u7406",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u63D0\u793A\u72B6\u6001",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    status: "info",
+    title: "\u4FE1\u606F\u63D0\u793A",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u8B66\u544A\u72B6\u6001",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    status: "warning",
+    title: "\u8B66\u544A\u63D0\u793A",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u5931\u8D25\u72B6\u6001",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    status: "error",
+    title: "\u65E0\u6CD5\u5B8C\u6210\u64CD\u4F5C",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u81EA\u5B9A\u4E49\u56FE\u6807",
+    padding: "0"
+  }, /*#__PURE__*/React.createElement(Result, {
+    icon: /*#__PURE__*/React.createElement(FaceRecognitionOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }),
+    status: "success",
+    title: "Well done",
+    description: "\u5185\u5BB9\u8BE6\u60C5\u53EF\u6298\u884C\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u4E24\u884C"
+  })));
+});

package/dist/Result/index.d.ts

@@ -0,0 +1,3 @@
+import { Result } from './result';
+export type { ResultProps } from './result';
+export default Result;

package/dist/Result/index.js

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

package/dist/Result/result.d.ts

@@ -0,0 +1,10 @@
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../utils/native-props';
+import './style.scss';
+export type ResultProps = {
+    status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+} & NativeProps;
+export declare const Result: FC<ResultProps>;

package/dist/Result/result.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useResultIcon } from "./use-result-icon";
+import { withNativeProps } from "../utils/native-props";
+import { mergeProps } from "../utils/with-default-props";
+import "./style.scss";
+var classPrefix = "triones-antm-result";
+var defaultProps = {
+  status: 'info'
+};
+export var Result = function Result(p) {
+  var props = mergeProps(defaultProps, p);
+  var status = props.status,
+    title = props.title,
+    description = props.description,
+    icon = props.icon;
+  var fallbackIcon = useResultIcon(status);
+  if (!status) return null;
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classNames(classPrefix, "".concat(classPrefix, "-").concat(status))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-icon")
+  }, icon || fallbackIcon), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-title")
+  }, title), !!description && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-description")
+  }, description)));
+};

package/dist/Result/style.scss

@@ -0,0 +1,73 @@
+$class-prefix-result: 'triones-antm-result';
+/* prettier-ignore */
+.#{$class-prefix-result} {
+  padding: 32PX 12PX;
+  background-color: var(--triones-antm-color-background);
+
+  &-icon {
+    box-sizing: border-box;
+    width: 64PX;
+    height: 64PX;
+    margin: 0 auto 20PX auto;
+    padding: 6PX;
+
+    .antd-mobile-icon {
+      font-size: 52PX;
+    }
+  }
+
+  &-title {
+    color: var(--triones-antm-color-text);
+    font-size: var(--triones-antm-font-size-10);
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  &-description {
+    margin-top: 8PX;
+    color: var(--triones-antm-color-weak);
+    font-size: var(--triones-antm-font-size-main);
+    line-height: 1.4;
+    text-align: center;
+  }
+}
+
+.#{$class-prefix-result}-success {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-error {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-danger);
+    }
+  }
+}
+
+.#{$class-prefix-result}-info {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-waiting {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-success);
+    }
+  }
+}
+
+.#{$class-prefix-result}-warning {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-warning);
+    }
+  }
+}

package/dist/Result/use-result-icon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useResultIcon: (status?: 'success' | 'error' | 'info' | 'waiting' | 'warning') => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null;

package/dist/Result/use-result-icon.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useConfig } from "../ConfigProvider";
+import { CheckCircleOutline, CloseCircleOutline, InformationCircleOutline, ClockCircleOutline, ExclamationTriangleOutline } from '@trionesdev/antd-taro-icons-react';
+export var useResultIcon = function useResultIcon(status) {
+  var _useConfig = useConfig(),
+    _useConfig$result = _useConfig.result,
+    componentConfig = _useConfig$result === void 0 ? {} : _useConfig$result;
+  var _ref = componentConfig || {},
+    _ref$successIcon = _ref.successIcon,
+    successIcon = _ref$successIcon === void 0 ? /*#__PURE__*/React.createElement(CheckCircleOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }) : _ref$successIcon,
+    _ref$errorIcon = _ref.errorIcon,
+    errorIcon = _ref$errorIcon === void 0 ? /*#__PURE__*/React.createElement(CloseCircleOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }) : _ref$errorIcon,
+    _ref$infoIcon = _ref.infoIcon,
+    infoIcon = _ref$infoIcon === void 0 ? /*#__PURE__*/React.createElement(InformationCircleOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }) : _ref$infoIcon,
+    _ref$waitingIcon = _ref.waitingIcon,
+    waitingIcon = _ref$waitingIcon === void 0 ? /*#__PURE__*/React.createElement(ClockCircleOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }) : _ref$waitingIcon,
+    _ref$warningIcon = _ref.warningIcon,
+    warningIcon = _ref$warningIcon === void 0 ? /*#__PURE__*/React.createElement(ExclamationTriangleOutline, {
+      style: {
+        fontSize: "48PX"
+      }
+    }) : _ref$warningIcon;
+  switch (status) {
+    case 'success':
+      return successIcon;
+    case 'error':
+      return errorIcon;
+    case 'info':
+      return infoIcon;
+    case 'waiting':
+      return waitingIcon;
+    case 'warning':
+      return warningIcon;
+    default:
+      return null;
+  }
+};