taro-react-uilib 1.4.21 → 1.4.22-1

package/dist/styles/components/icon.scss

@@ -24,6 +24,10 @@
   font-size: 20PX;
 }
 
+.xh-icon-report:before {
+  content: "\e634";
+}
+
 .xh-icon-safety:before {
   content: "\e635";
 }
@@ -247,4 +251,4 @@
 
 .xh-icon-arrowRight:before {
   content: "\e603";
-}
+}

package/dist/styles/components/index.scss

@@ -27,6 +27,7 @@
 @import './loading.scss';
 @import './mask.scss';
 @import './navbar.scss';
+@import './notice.scss';
 @import './numberkeyboard.scss';
 @import './page.scss';
 @import './passwordinput.scss';
@@ -44,5 +45,6 @@
 @import './step.scss';
 @import './switch.scss';
 @import './tabbar.scss';
+@import './tabnav.scss';
 @import './themeprovider.scss';
 @import './toast.scss';

package/dist/styles/components/notice.scss

@@ -0,0 +1,43 @@
+.xh-notice {
+  width: 100%;
+  height: 72px;
+  padding: 0 20px 0 30px;
+  background-color: #F3F6FD;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  border-radius: 12px;
+  overflow: hidden;
+
+  &-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    height: 100%;
+    margin-left: 12px;
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    // overflow: hidden;
+
+    &-marquee {
+      overflow: hidden;
+      height: 72px;
+      line-height: 72px;
+      flex-shrink: 0;
+
+      &-text {
+        font-size: 26px;
+        color: #212121;
+        white-space: nowrap;
+        // display: inline-block;
+      }
+    }
+  }
+
+  &-right {
+    font-size: 24px;
+    color: var(--color-primary-secondary);
+    display: flex;
+    align-items: center;
+  }
+}

package/dist/styles/components/tabnav.scss

@@ -0,0 +1,97 @@
+.xh-tabnav {
+  background-color: #fff;
+  border-radius: 24px 24px 0 0;
+  box-shadow: 0 4px 24px 0 rgba(0, 42, 255, 0.08);
+
+  &-bar {
+    display: flex;
+    align-items: center;
+    position: relative;
+    height: 88px;
+    background: transparent;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    scrollbar-width: none;
+    /* Firefox */
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &-tab {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      font-size: 32px;
+      color: #356aff;
+      padding: 24px 32px 16px 32px;
+      position: relative;
+      border-radius: 20px 20px 0 0;
+      transition: background 0.2s, color 0.2s;
+      cursor: pointer;
+      white-space: nowrap;
+      position: relative;
+
+      &-underline {
+        position: absolute;
+        left: 50%;
+        bottom: 8px;
+        transform: translateX(-50%);
+        width: 36px;
+        height: 6px;
+        background: #fff;
+        border-radius: 3px;
+        box-shadow: 0 2px 8px 0 rgba(53, 106, 255, 0.15);
+      }
+
+      &.active {
+        background: linear-gradient(90deg, #4e8cff 0%, #356aff 100%);
+        color: #fff;
+
+        &::before,
+        &:not(:last-child)::after {
+          content: '';
+          width: 20px;
+          height: 20px;
+          bottom: 0;
+          position: absolute;
+        }
+
+        &::before {
+          left: -20px;
+          background: radial-gradient(circle at 0 0, transparent 20px, #356aff 20px);
+        }
+
+        &::after {
+          right: -20px;
+          background: radial-gradient(circle at 20px 0, transparent 20px, #356aff 20px);
+        }
+      }
+    }
+  }
+
+  $root: &;
+
+  &-scroll {
+    height: calc(100vh - 88px);
+    background-color: #f5f5f5;
+    padding: 28px 32px;
+    width: 100%;
+    box-sizing: border-box;
+
+    &-block {
+      &:not(:first-child) {
+        #{$root}-item {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
+
+  &-item {
+    min-height: 600px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "taro-react-uilib",
-  "version": "1.4.21",
+  "version": "1.4.22-1",
   "description": "基于taro的跨端组件库",
   "templateInfo": {
     "name": "default",
@@ -26,7 +26,7 @@
     "dev:tt": "npm run build:tt -- --watch",
     "dev": "yarn run dev:lib",
     "dev:lib": "tsc --project ./tsconfig.build.json --watch --incremental",
-    "build": "rimraf dist && yarn run build:rollup && yarn run build:lib",
+    "build": "rimraf dist && yarn run build:rollup",
     "build:lib": "tsc --project ./tsconfig.build.json --declaration --declarationDir types",
     "build:rollup": "rollup --config ./rollup.config.js",
     "prepublishOnly": "yarn run clean && yarn run build",

package/types/components/ActionSheet/index.d.ts

@@ -1,44 +1,43 @@
-import React, { ReactNode, ReactElement } from "react";
-import "./index.scss";
-export interface ActionSheetOption {
-    text: ReactNode;
-    value: string | number;
-    [key: string]: any;
-}
-export declare type ActionValue = string | ActionSheetOption;
-export interface ActionProps<T extends ActionValue = ActionValue> {
-    visible?: boolean;
-    title?: ReactNode;
-    data: T[];
-    defaultValue?: T;
-    className?: string;
-    style?: React.CSSProperties;
-    onConfirm?: (selectedValue: T, index: number) => void;
-    onCancel?: (bottom?: boolean) => void;
-    onClose?: () => void;
-    onClick?: (flag: boolean) => void;
-    children?: ReactNode;
-    description?: ReactNode;
-    /**
-     * @summary controlled模式下，组件为受控组件，需要外部来显示和隐藏
-     * @description submit 模式下会显示提交按钮，可以自定义，也可以显示取消按钮但是得传进来一个Toggle事件用来显示隐藏
-     */
-    mode?: "controlled";
-    cancelText?: ReactNode;
-    /**
-     * submit模式下，默认不展示取消按钮，可以设置
-     */
-    showCancel?: boolean;
-    submitText?: string;
-    renderItem?: (item: T, index: number) => ReactNode;
-    ItemWrapper?: React.FC<{}>;
-    onSubmit?: () => void;
-    justifyContent?: "start" | "end";
-    /**
-     * 显示右上角的关闭、默认只有不显示下面的取消的时候才出现
-     */
-    showClose?: boolean;
-    inline?: boolean;
-}
-declare const ActionSheet: <T extends ActionValue>(props: ActionProps<T>) => ReactElement;
-export default ActionSheet;
+import React, { ReactNode, ReactElement } from "react";
+export interface ActionSheetOption {
+    text: ReactNode;
+    value: string | number;
+    [key: string]: any;
+}
+export declare type ActionValue = string | ActionSheetOption;
+export interface ActionProps<T extends ActionValue = ActionValue> {
+    visible?: boolean;
+    title?: ReactNode;
+    data: T[];
+    defaultValue?: T;
+    className?: string;
+    style?: React.CSSProperties;
+    onConfirm?: (selectedValue: T, index: number) => void;
+    onCancel?: (bottom?: boolean) => void;
+    onClose?: () => void;
+    onClick?: (flag: boolean) => void;
+    children?: ReactNode;
+    description?: ReactNode;
+    /**
+     * @summary controlled模式下，组件为受控组件，需要外部来显示和隐藏
+     * @description submit 模式下会显示提交按钮，可以自定义，也可以显示取消按钮但是得传进来一个Toggle事件用来显示隐藏
+     */
+    mode?: "controlled";
+    cancelText?: ReactNode;
+    /**
+     * submit模式下，默认不展示取消按钮，可以设置
+     */
+    showCancel?: boolean;
+    submitText?: string;
+    renderItem?: (item: T, index: number) => ReactNode;
+    ItemWrapper?: React.FC<{}>;
+    onSubmit?: () => void;
+    justifyContent?: "start" | "end";
+    /**
+     * 显示右上角的关闭、默认只有不显示下面的取消的时候才出现
+     */
+    showClose?: boolean;
+    inline?: boolean;
+}
+declare const ActionSheet: <T extends ActionValue>(props: ActionProps<T>) => ReactElement;
+export default ActionSheet;

package/types/components/ActivityIndicator/index.d.ts

@@ -1,13 +1,12 @@
-import { CSSProperties, FC } from "react";
-import type { StandardLonghandProperties } from "csstype";
-import { XHComponentCommonProps } from "../../types";
-import "./index.scss";
-export declare type LoadingProps = {
-    style?: CSSProperties & {
-        "--loading-border-color"?: StandardLonghandProperties["color"];
-        "--loading-border-width"?: string;
-    };
-    size?: number;
-} & XHComponentCommonProps;
-declare const Activityindicator: FC<LoadingProps>;
-export default Activityindicator;
+import { CSSProperties, FC } from "react";
+import type { StandardLonghandProperties } from "csstype";
+import { XHComponentCommonProps } from "../../types";
+export declare type LoadingProps = {
+    style?: CSSProperties & {
+        "--loading-border-color"?: StandardLonghandProperties["color"];
+        "--loading-border-width"?: string;
+    };
+    size?: number;
+} & XHComponentCommonProps;
+declare const Activityindicator: FC<LoadingProps>;
+export default Activityindicator;

package/types/components/AmountInput/index.d.ts

@@ -1,26 +1,25 @@
-import React, { ReactNode } from "react";
-import "./index.scss";
-import { XHComponentCommonProps } from "../../types";
-export declare type AmountInputProps = {
-    space?: number;
-    value: string;
-    maxlength: number;
-    onFocus?: (e: any) => void;
-    unit?: string;
-    slot?: ReactNode;
-    shortcut?: ReactNode;
-    errTip?: string;
-    maxAmount?: number | string;
-    minAmount?: number | string;
-    showUpgrade?: boolean;
-    onUpgrade?: () => void;
-    loanOnekey?: () => void;
-    placeholder?: string;
-    focus?: boolean;
-    /** 借款步长 */
-    step?: number;
-    showBottom?: boolean;
-    title?: ReactNode;
-} & XHComponentCommonProps;
-declare const AmountInput: React.FC<AmountInputProps>;
-export default AmountInput;
+import React, { ReactNode } from "react";
+import { XHComponentCommonProps } from "../../types";
+export declare type AmountInputProps = {
+    space?: number;
+    value: string;
+    maxlength: number;
+    onFocus?: (e: any) => void;
+    unit?: string;
+    slot?: ReactNode;
+    shortcut?: ReactNode;
+    errTip?: string;
+    maxAmount?: number | string;
+    minAmount?: number | string;
+    showUpgrade?: boolean;
+    onUpgrade?: () => void;
+    loanOnekey?: () => void;
+    placeholder?: string;
+    focus?: boolean;
+    /** 借款步长 */
+    step?: number;
+    showBottom?: boolean;
+    title?: ReactNode;
+} & XHComponentCommonProps;
+declare const AmountInput: React.FC<AmountInputProps>;
+export default AmountInput;

package/types/components/AmountKeyboard/index.d.ts

@@ -1,36 +1,35 @@
-import { FC, MouseEvent, ReactNode } from "react";
-import "./index.scss";
-import { XHComponentCommonProps } from "../../types";
-export declare type NumberKeyboardProps = {
-    show: boolean;
-    /**
-     * 是否支持小数，小数保留小数点后两位，默认不支持
-     */
-    decimal?: boolean;
-    showClose?: boolean;
-    closeOnClickSpace?: boolean;
-    maxLength?: number;
-    onBlur?: (e: MouseEvent | Event) => void;
-    onClose?: (e: MouseEvent | Event) => void;
-    onChange?: (value: string) => void;
-    value: string;
-    header?: ReactNode;
-    /**
-     *
-     * @param value 输入值
-     * @param recommend 是否是点击推荐金额触发
-     * @returns void
-     */
-    onConfirm?: (value: string, recommend?: boolean) => void;
-    recommend?: Array<number | string>;
-    tip?: ReactNode;
-    disabled?: boolean;
-} & XHComponentCommonProps;
-export declare type KeyType = "number" | "delete" | "string" | "none" | "close";
-export interface IKey {
-    text: number | string;
-    value: number | string;
-    type: KeyType;
-}
-declare const AmountKeyboard: FC<NumberKeyboardProps>;
-export default AmountKeyboard;
+import { FC, MouseEvent, ReactNode } from "react";
+import { XHComponentCommonProps } from "../../types";
+export declare type NumberKeyboardProps = {
+    show: boolean;
+    /**
+     * 是否支持小数，小数保留小数点后两位，默认不支持
+     */
+    decimal?: boolean;
+    showClose?: boolean;
+    closeOnClickSpace?: boolean;
+    maxLength?: number;
+    onBlur?: (e: MouseEvent | Event) => void;
+    onClose?: (e: MouseEvent | Event) => void;
+    onChange?: (value: string) => void;
+    value: string;
+    header?: ReactNode;
+    /**
+     *
+     * @param value 输入值
+     * @param recommend 是否是点击推荐金额触发
+     * @returns void
+     */
+    onConfirm?: (value: string, recommend?: boolean) => void;
+    recommend?: Array<number | string>;
+    tip?: ReactNode;
+    disabled?: boolean;
+} & XHComponentCommonProps;
+export declare type KeyType = "number" | "delete" | "string" | "none" | "close";
+export interface IKey {
+    text: number | string;
+    value: number | string;
+    type: KeyType;
+}
+declare const AmountKeyboard: FC<NumberKeyboardProps>;
+export default AmountKeyboard;

package/types/components/Animated/Animated.d.ts

@@ -1,12 +1,11 @@
-import { FC, PropsWithChildren } from "react";
-import "./index.scss";
-export interface AnimatedProps extends PropsWithChildren<{}> {
-    in: boolean;
-    appear?: boolean;
-    timeout?: number;
-    name?: string;
-    onExited?: () => void;
-    unmountOnExit?: boolean;
-}
-declare const Animated: FC<AnimatedProps>;
-export default Animated;
+import { FC, PropsWithChildren } from "react";
+export interface AnimatedProps extends PropsWithChildren<{}> {
+    in: boolean;
+    appear?: boolean;
+    timeout?: number;
+    name?: string;
+    onExited?: () => void;
+    unmountOnExit?: boolean;
+}
+declare const Animated: FC<AnimatedProps>;
+export default Animated;

package/types/components/Animated/Fade/index.d.ts

@@ -1,9 +1,9 @@
-import { PropsWithChildren, FC } from "react";
-export interface FadeProps extends PropsWithChildren<{}> {
-    in: boolean;
-    timeout?: number;
-    onExited?: () => void;
-    unmountOnExit?: boolean;
-}
-declare const Fade: FC<FadeProps>;
-export default Fade;
+import { PropsWithChildren, FC } from "react";
+export interface FadeProps extends PropsWithChildren<{}> {
+    in: boolean;
+    timeout?: number;
+    onExited?: () => void;
+    unmountOnExit?: boolean;
+}
+declare const Fade: FC<FadeProps>;
+export default Fade;

package/types/components/Animated/Scale/index.d.ts

@@ -1,9 +1,9 @@
-import { PropsWithChildren, FC } from "react";
-export interface ScaleProps extends PropsWithChildren<{}> {
-    in: boolean;
-    timeout?: number;
-    onExited?: () => void;
-    unmountOnExit?: boolean;
-}
-declare const Scale: FC<ScaleProps>;
-export default Scale;
+import { PropsWithChildren, FC } from "react";
+export interface ScaleProps extends PropsWithChildren<{}> {
+    in: boolean;
+    timeout?: number;
+    onExited?: () => void;
+    unmountOnExit?: boolean;
+}
+declare const Scale: FC<ScaleProps>;
+export default Scale;

package/types/components/Animated/Slide/index.d.ts

@@ -1,11 +1,11 @@
-import { PropsWithChildren, FC } from "react";
-export declare type SlideDirection = "up" | "down" | "left" | "right";
-export interface SlideProps extends PropsWithChildren<{}> {
-    in: boolean;
-    timeout?: number;
-    direction?: SlideDirection;
-    onExited?: () => void;
-    unmountOnExit?: boolean;
-}
-declare const Slide: FC<SlideProps>;
-export default Slide;
+import { PropsWithChildren, FC } from "react";
+export declare type SlideDirection = "up" | "down" | "left" | "right";
+export interface SlideProps extends PropsWithChildren<{}> {
+    in: boolean;
+    timeout?: number;
+    direction?: SlideDirection;
+    onExited?: () => void;
+    unmountOnExit?: boolean;
+}
+declare const Slide: FC<SlideProps>;
+export default Slide;

package/types/components/Animated/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Slide } from "./Slide";
-export { default as Fade } from "./Fade";
-export { default as Scale } from "./Scale";
+export { default as Slide } from "./Slide";
+export { default as Fade } from "./Fade";
+export { default as Scale } from "./Scale";

package/types/components/Badge/index.d.ts

@@ -1,8 +1,7 @@
-import React from "react";
-import { XHComponentCommonProps } from "../../types";
-import "./index.scss";
-export declare type BadgeProps = {
-    content?: string;
-} & XHComponentCommonProps;
-declare const Badge: React.FC<BadgeProps>;
-export default Badge;
+import React from "react";
+import { XHComponentCommonProps } from "../../types";
+export declare type BadgeProps = {
+    content?: string;
+} & XHComponentCommonProps;
+declare const Badge: React.FC<BadgeProps>;
+export default Badge;

package/types/components/BankCardNumberInput/index.d.ts

@@ -1,48 +1,47 @@
-import React, { ReactNode } from "react";
-import "./index.scss";
-import { XHComponentCommonProps } from "../../types";
-export declare type PhoneNumberInputProps = {
-    showScan?: boolean;
-    label?: string;
-    /**
-     * 只有在direction为column才生效
-     */
-    bankName?: ReactNode;
-    onChange?: (value: string) => void;
-    value: string;
-    placeholder?: string;
-    readOnly?: boolean;
-    disabled?: boolean;
-    direction?: "column" | "row";
-    onScan?: () => void;
-    onError?: (msg: string) => void;
-    maxlength?: number;
-    slot?: ReactNode;
-    border?: boolean;
-    onBlur?: () => void;
-} & XHComponentCommonProps;
-export declare type BankCardNumberInputRef = {
-    isValid: boolean;
-    focus: () => void;
-};
-declare const BankCardNumberInput: React.ForwardRefExoticComponent<{
-    showScan?: boolean | undefined;
-    label?: string | undefined;
-    /**
-     * 只有在direction为column才生效
-     */
-    bankName?: ReactNode;
-    onChange?: ((value: string) => void) | undefined;
-    value: string;
-    placeholder?: string | undefined;
-    readOnly?: boolean | undefined;
-    disabled?: boolean | undefined;
-    direction?: "column" | "row" | undefined;
-    onScan?: (() => void) | undefined;
-    onError?: ((msg: string) => void) | undefined;
-    maxlength?: number | undefined;
-    slot?: ReactNode;
-    border?: boolean | undefined;
-    onBlur?: (() => void) | undefined;
-} & XHComponentCommonProps & React.RefAttributes<BankCardNumberInputRef>>;
-export default BankCardNumberInput;
+import React, { ReactNode } from "react";
+import { XHComponentCommonProps } from "../../types";
+export declare type PhoneNumberInputProps = {
+    showScan?: boolean;
+    label?: string;
+    /**
+     * 只有在direction为column才生效
+     */
+    bankName?: ReactNode;
+    onChange?: (value: string) => void;
+    value: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    direction?: "column" | "row";
+    onScan?: () => void;
+    onError?: (msg: string) => void;
+    maxlength?: number;
+    slot?: ReactNode;
+    border?: boolean;
+    onBlur?: () => void;
+} & XHComponentCommonProps;
+export declare type BankCardNumberInputRef = {
+    isValid: boolean;
+    focus: () => void;
+};
+declare const BankCardNumberInput: React.ForwardRefExoticComponent<{
+    showScan?: boolean | undefined;
+    label?: string | undefined;
+    /**
+     * 只有在direction为column才生效
+     */
+    bankName?: ReactNode;
+    onChange?: ((value: string) => void) | undefined;
+    value: string;
+    placeholder?: string | undefined;
+    readOnly?: boolean | undefined;
+    disabled?: boolean | undefined;
+    direction?: "column" | "row" | undefined;
+    onScan?: (() => void) | undefined;
+    onError?: ((msg: string) => void) | undefined;
+    maxlength?: number | undefined;
+    slot?: ReactNode;
+    border?: boolean | undefined;
+    onBlur?: (() => void) | undefined;
+} & XHComponentCommonProps & React.RefAttributes<BankCardNumberInputRef>>;
+export default BankCardNumberInput;