@fairys/taro-tools-react 0.0.1

package/src/styles/index.css

@@ -0,0 +1,515 @@
+@unocss preflights;
+@unocss default;
+
+/* fairys_taro_loading */
+@keyframes fairys_taro_loading_transform {
+  0% {
+    --fairys-enter-loading-transform-color: #00a98e;
+  }
+
+  1.25% {
+    --fairys-enter-loading-transform-color: #00a996;
+  }
+
+  2.5% {
+    --fairys-enter-loading-transform-color: #00a99f;
+  }
+
+  3.75% {
+    --fairys-enter-loading-transform-color: #00a9a7;
+  }
+
+  5% {
+    --fairys-enter-loading-transform-color: #00a9b0;
+  }
+
+  6.25% {
+    --fairys-enter-loading-transform-color: #00a9b8;
+  }
+
+  7.5% {
+    --fairys-enter-loading-transform-color: #00a9c0;
+  }
+
+  8.75% {
+    --fairys-enter-loading-transform-color: #00a8c7;
+  }
+
+  10% {
+    --fairys-enter-loading-transform-color: #00a8cf;
+  }
+
+  11.25% {
+    --fairys-enter-loading-transform-color: #00a7d5;
+  }
+
+  12.5% {
+    --fairys-enter-loading-transform-color: #00a6dc;
+  }
+
+  13.75% {
+    --fairys-enter-loading-transform-color: #00a6e2;
+  }
+
+  15% {
+    --fairys-enter-loading-transform-color: #00a4e7;
+  }
+
+  16.25% {
+    --fairys-enter-loading-transform-color: #00a3ec;
+  }
+
+  17.5% {
+    --fairys-enter-loading-transform-color: #00a2f1;
+  }
+
+  18.75% {
+    --fairys-enter-loading-transform-color: #00a0f4;
+  }
+
+  20% {
+    --fairys-enter-loading-transform-color: #009ff7;
+  }
+
+  21.25% {
+    --fairys-enter-loading-transform-color: #009dfa;
+  }
+
+  22.5% {
+    --fairys-enter-loading-transform-color: #009bfc;
+  }
+
+  23.75% {
+    --fairys-enter-loading-transform-color: #0098fd;
+  }
+
+  25% {
+    --fairys-enter-loading-transform-color: #0096fd;
+  }
+
+  26.25% {
+    --fairys-enter-loading-transform-color: #0093fd;
+  }
+
+  27.5% {
+    --fairys-enter-loading-transform-color: #2e90fc;
+  }
+
+  28.75% {
+    --fairys-enter-loading-transform-color: #4d8dfa;
+  }
+
+  30% {
+    --fairys-enter-loading-transform-color: #638af8;
+  }
+
+  31.25% {
+    --fairys-enter-loading-transform-color: #7587f5;
+  }
+
+  32.5% {
+    --fairys-enter-loading-transform-color: #8583f1;
+  }
+
+  33.75% {
+    --fairys-enter-loading-transform-color: #9280ed;
+  }
+
+  35% {
+    --fairys-enter-loading-transform-color: #9f7ce9;
+  }
+
+  36.25% {
+    --fairys-enter-loading-transform-color: #aa78e3;
+  }
+
+  37.5% {
+    --fairys-enter-loading-transform-color: #b574dd;
+  }
+
+  38.75% {
+    --fairys-enter-loading-transform-color: #be71d7;
+  }
+
+  40% {
+    --fairys-enter-loading-transform-color: #c76dd1;
+  }
+
+  41.25% {
+    --fairys-enter-loading-transform-color: #cf69c9;
+  }
+
+  42.5% {
+    --fairys-enter-loading-transform-color: #d566c2;
+  }
+
+  43.75% {
+    --fairys-enter-loading-transform-color: #dc63ba;
+  }
+
+  45% {
+    --fairys-enter-loading-transform-color: #e160b3;
+  }
+
+  46.25% {
+    --fairys-enter-loading-transform-color: #e65eab;
+  }
+
+  47.5% {
+    --fairys-enter-loading-transform-color: #e95ca2;
+  }
+
+  48.75% {
+    --fairys-enter-loading-transform-color: #ed5a9a;
+  }
+
+  50% {
+    --fairys-enter-loading-transform-color: #ef5992;
+  }
+
+  51.25% {
+    --fairys-enter-loading-transform-color: #f15989;
+  }
+
+  52.5% {
+    --fairys-enter-loading-transform-color: #f25981;
+  }
+
+  53.75% {
+    --fairys-enter-loading-transform-color: #f25a79;
+  }
+
+  55% {
+    --fairys-enter-loading-transform-color: #f25c71;
+  }
+
+  56.25% {
+    --fairys-enter-loading-transform-color: #f15e69;
+  }
+
+  57.5% {
+    --fairys-enter-loading-transform-color: #ef6061;
+  }
+
+  58.75% {
+    --fairys-enter-loading-transform-color: #ed635a;
+  }
+
+  60% {
+    --fairys-enter-loading-transform-color: #eb6552;
+  }
+
+  61.25% {
+    --fairys-enter-loading-transform-color: #e8694b;
+  }
+
+  62.5% {
+    --fairys-enter-loading-transform-color: #e46c44;
+  }
+
+  63.75% {
+    --fairys-enter-loading-transform-color: #e06f3d;
+  }
+
+  65% {
+    --fairys-enter-loading-transform-color: #db7336;
+  }
+
+  66.25% {
+    --fairys-enter-loading-transform-color: #d77630;
+  }
+
+  67.5% {
+    --fairys-enter-loading-transform-color: #d17a2a;
+  }
+
+  68.75% {
+    --fairys-enter-loading-transform-color: #cc7d24;
+  }
+
+  70% {
+    --fairys-enter-loading-transform-color: #c6811e;
+  }
+
+  71.25% {
+    --fairys-enter-loading-transform-color: #bf8418;
+  }
+
+  72.5% {
+    --fairys-enter-loading-transform-color: #b98713;
+  }
+
+  73.75% {
+    --fairys-enter-loading-transform-color: #b28a0f;
+  }
+
+  75% {
+    --fairys-enter-loading-transform-color: #ab8d0c;
+  }
+
+  76.25% {
+    --fairys-enter-loading-transform-color: #a3900b;
+  }
+
+  77.5% {
+    --fairys-enter-loading-transform-color: #9c920d;
+  }
+
+  78.75% {
+    --fairys-enter-loading-transform-color: #949510;
+  }
+
+  80% {
+    --fairys-enter-loading-transform-color: #8b9715;
+  }
+
+  81.25% {
+    --fairys-enter-loading-transform-color: #83991b;
+  }
+
+  82.5% {
+    --fairys-enter-loading-transform-color: #7a9b21;
+  }
+
+  83.75% {
+    --fairys-enter-loading-transform-color: #719d27;
+  }
+
+  85% {
+    --fairys-enter-loading-transform-color: #679e2e;
+  }
+
+  86.25% {
+    --fairys-enter-loading-transform-color: #5da035;
+  }
+
+  87.5% {
+    --fairys-enter-loading-transform-color: #51a13c;
+  }
+
+  88.75% {
+    --fairys-enter-loading-transform-color: #44a244;
+  }
+
+  90% {
+    --fairys-enter-loading-transform-color: #34a44b;
+  }
+
+  91.25% {
+    --fairys-enter-loading-transform-color: #1ba553;
+  }
+
+  92.5% {
+    --fairys-enter-loading-transform-color: #00a65b;
+  }
+
+  93.75% {
+    --fairys-enter-loading-transform-color: #00a663;
+  }
+
+  95% {
+    --fairys-enter-loading-transform-color: #00a76c;
+  }
+
+  96.25% {
+    --fairys-enter-loading-transform-color: #00a874;
+  }
+
+  97.5% {
+    --fairys-enter-loading-transform-color: #00a87d;
+  }
+
+  98.75% {
+    --fairys-enter-loading-transform-color: #00a985;
+  }
+
+  100% {
+    --fairys-enter-loading-transform-color: #00a98e;
+  }
+}
+.fairys_taro_loading {
+  --fairys-enter-loading-transform-color: #00a98e;
+  animation: fairys_taro_loading_transform 20s linear infinite;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--fairys-enter-loading-transform-color);
+  user-select: none;
+}
+.fairys_taro_loading *::before,
+.fairys_taro_loading *::after {
+  box-sizing: content-box;
+}
+.fairys_taro_loading .fairys_taro_loading-main {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 2.4rem;
+  height: 2.4rem;
+}
+.fairys_taro_loading .fairys_taro_loading-main .square {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.2rem;
+  height: 1.2rem;
+}
+.fairys_taro_loading .fairys_taro_loading-main .square::before {
+  width: 0.5rem;
+  height: 0.5rem;
+  content: '';
+  border: 3px solid var(--fairys-enter-loading-transform-color);
+  border-radius: 15%;
+  animation: square-to-dot-animation 2s linear infinite;
+}
+.fairys_taro_loading .fairys_taro_loading-main .square:nth-child(1)::before {
+  animation-delay: calc(150ms * 1);
+}
+.fairys_taro_loading .fairys_taro_loading-main .square:nth-child(2)::before {
+  animation-delay: calc(150ms * 2);
+}
+.fairys_taro_loading .fairys_taro_loading-main .square:nth-child(3)::before {
+  animation-delay: calc(150ms * 3);
+}
+.fairys_taro_loading .fairys_taro_loading-main .square:nth-child(4)::before {
+  animation-delay: calc(150ms * 4);
+}
+@keyframes square-to-dot-animation {
+  15%,
+  25% {
+    width: 0;
+    height: 0;
+    margin: 0.2rem;
+    border-width: 0.2rem;
+    border-radius: 100%;
+  }
+  40% {
+    width: 0.5rem;
+    height: 0.5rem;
+    margin: initial;
+    border-width: 3px;
+    border-radius: 15%;
+  }
+}
+.fairys_taro_loading .name {
+  position: relative;
+  margin-top: 1.5rem;
+  font-size: 0.8rem;
+}
+
+.fairys_taro_loading .tips {
+  position: relative;
+  margin-top: 1rem;
+  font-size: 0.8rem;
+  opacity: 0.5;
+}
+.fairys_taro_loading .loading-dots {
+  display: inline-block;
+  text-align: left;
+}
+.fairys_taro_loading .loading-dots::after {
+  content: '';
+  animation: fairys_taro_loading_dots 1.5s steps(4) infinite;
+}
+@keyframes fairys_taro_loading_dots {
+  0% {
+    content: '';
+  }
+  25% {
+    content: '.';
+  }
+  50% {
+    content: '..';
+  }
+  75% {
+    content: '...';
+  }
+  100% {
+    content: '';
+  }
+}
+
+/* 信息图标 */
+.ant-design--info-circle-outlined {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372'/%3E%3Cpath fill='%23000' d='M464 336a48 48 0 1 0 96 0a48 48 0 1 0-96 0m72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8'/%3E%3C/svg%3E");
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.fairys_taro-ui-message-icon-info {
+  border-color: rgb(145, 202, 255);
+  background-color: rgb(230, 244, 255);
+}
+
+.ant-design--check-circle-outlined {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7'/%3E%3Cpath fill='%23000' d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372'/%3E%3C/svg%3E");
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.fairys_taro-ui-message-icon-success {
+  border-color: rgb(183, 235, 143);
+  background-color: rgb(246, 255, 237);
+}
+
+.ant-design--exclamation-circle-outlined {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372'/%3E%3Cpath fill='%23000' d='M464 688a48 48 0 1 0 96 0a48 48 0 1 0-96 0m24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8'/%3E%3C/svg%3E");
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.fairys_taro-ui-message-icon-warning {
+  border-color: rgb(255, 229, 143);
+  background-color: rgb(255, 251, 230);
+}
+
+.ant-design--close-circle-outlined {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960S64 759.4 64 512S264.6 64 512 64m0 76c-205.4 0-372 166.6-372 372s166.6 372 372 372s372-166.6 372-372s-166.6-372-372-372m128.013 198.826c.023.007.042.018.083.059l45.02 45.019c.04.04.05.06.058.083a.12.12 0 0 1 0 .07c-.007.022-.018.041-.059.082L557.254 512l127.861 127.862a.3.3 0 0 1 .05.06l.009.023a.12.12 0 0 1 0 .07c-.007.022-.018.041-.059.082l-45.019 45.02c-.04.04-.06.05-.083.058a.12.12 0 0 1-.07 0c-.022-.007-.041-.018-.082-.059L512 557.254L384.14 685.115c-.042.041-.06.052-.084.059a.12.12 0 0 1-.07 0c-.022-.007-.041-.018-.082-.059l-45.02-45.019a.2.2 0 0 1-.058-.083a.12.12 0 0 1 0-.07c.007-.022.018-.041.059-.082L466.745 512l-127.86-127.86a.3.3 0 0 1-.05-.061l-.009-.023a.12.12 0 0 1 0-.07c.007-.022.018-.041.059-.082l45.019-45.02c.04-.04.06-.05.083-.058a.12.12 0 0 1 .07 0c.022.007.041.018.082.059L512 466.745l127.862-127.86c.04-.041.06-.052.083-.059a.12.12 0 0 1 .07 0Z'/%3E%3C/svg%3E");
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.fairys_taro-ui-message-icon-error {
+  border-color: rgb(255, 204, 199);
+  background-color: rgb(255, 242, 240);
+}

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './valtio';
+export * from './useId';
+export * from './navigate';
+export * from './request';

package/src/utils/navigate.ts

@@ -0,0 +1,159 @@
+import Taro from '@tarojs/taro';
+
+class NavigateInstance {
+  /**判断是否已登录(方法需要在项目入口文件中进行挂载)*/
+  public isAuth: (url: string) => Promise<boolean> | boolean;
+
+  private _isAuth = async (url?: string) => {
+    let isAuthTo = true;
+    if (url && typeof this.isAuth === 'function') {
+      isAuthTo = await this.isAuth(url);
+    }
+    if (isAuthTo === false) {
+      // 无权访问页面
+      Taro.showToast({ title: '无权访问', icon: 'none' });
+      return false;
+    }
+    return true;
+  };
+
+  /**
+   * 判断是否当前页面
+   */
+  isCurrentPage = (route: string) => {
+    /**处理路由前缀*/
+    const _route = route.replace(/^\//, '');
+    const currentPath = (Taro.getCurrentInstance().router?.path || '').replace(/^\//, '');
+    return currentPath === _route;
+  };
+
+  /** 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
+   * @supported weapp, h5, rn, tt, harmony, harmony_hybrid
+   * @example
+   * ```json
+   * {
+   *   "tabBar": {
+   *     "list": [{
+   *       "pagePath": "index",
+   *       "text": "首页"
+   *     },{
+   *       "pagePath": "other",
+   *       "text": "其他"
+   *     }]
+   *   }
+   * }
+   * ```
+   *
+   * ```tsx
+   * Taro.switchTab({
+   *   url: '/index'
+   * })
+   * ```
+   * @see https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
+   */
+  switchTab = async (options: Taro.switchTab.Option) => {
+    const isAuthTo = await this._isAuth(options.url);
+    if (isAuthTo === false) {
+      return undefined;
+    }
+    return Taro.switchTab(options);
+  };
+  /** 关闭所有页面，打开到应用内的某个页面
+   * @supported weapp, h5, rn, tt, harmony, harmony_hybrid
+   * @example
+   * ```tsx
+   * Taro.reLaunch({
+   *   url: 'test?id=1'
+   * })
+   * ```
+   * @see https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.reLaunch.html
+   */
+  reLaunch = async (options: Taro.reLaunch.Option) => {
+    const isAuthTo = await this._isAuth(options.url);
+    if (isAuthTo === false) {
+      return undefined;
+    }
+    return Taro.reLaunch(options);
+  };
+
+  /** 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
+   * @supported weapp, h5, rn, tt, harmony, harmony_hybrid
+   * @h5 未针对 tabbar 页面做限制处理
+   * @example
+   * ```tsx
+   * Taro.redirectTo({
+   *   url: 'test?id=1'
+   * })
+   * ```
+   * @see https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.redirectTo.html
+   */
+  redirectTo = async (options: Taro.redirectTo.Option) => {
+    const isAuthTo = await this._isAuth(options.url);
+    if (isAuthTo === false) {
+      return undefined;
+    }
+    return Taro.redirectTo(options);
+  };
+
+  /** 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 Taro.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
+   * @supported weapp, h5, rn, tt, harmony, harmony_hybrid
+   * @h5 未针对 tabbar 页面做限制处理
+   * @example
+   * ```tsx
+   * Taro.navigateTo({
+   *   url: 'test?id=1',
+   *   events: {
+   *     // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
+   *     acceptDataFromOpenedPage: function(data) {
+   *       console.log(data)
+   *     },
+   *     someEvent: function(data) {
+   *       console.log(data)
+   *     }
+   *     ...
+   *   },
+   *   success: function (res) {
+   *     // 通过eventChannel向被打开页面传送数据
+   *     res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
+   *   }
+   * })
+   * ```
+   * @see https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.html
+   */
+  navigateTo = async (options: Taro.navigateTo.Option) => {
+    const isAuthTo = await this._isAuth(options.url);
+    if (isAuthTo === false) {
+      return undefined;
+    }
+    return Taro.navigateTo(options);
+  };
+
+  /** 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
+   * @supported weapp, h5, rn, tt, harmony, harmony_hybrid
+   * @h5 若入参 delta 大于现有页面数时，返回应用打开的第一个页面（如果想要返回首页请使用 reLaunch 方法）。
+   * @example
+   * ```tsx
+   * // 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
+   * // 此处是A页面
+   * Taro.navigateTo({
+   *   url: 'B?id=1'
+   * })
+   * // 此处是B页面
+   * Taro.navigateTo({
+   *   url: 'C?id=1'
+   * })
+   * // 在C页面内 navigateBack，将返回A页面
+   * Taro.navigateBack({
+   *   delta: 2
+   * })
+   * ```
+   * @see https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html
+   */
+  navigateBack = (options?: Taro.navigateBack.Option) => {
+    return Taro.navigateBack(options);
+  };
+}
+
+/**路由跳转*/
+export const navigate = new NavigateInstance();
+export default navigate;