fcr-ui-scene 1.0.0

package/lib/fcr-ui-kit/src/components/avatar/helper.d.ts

@@ -0,0 +1,2 @@
+export declare const getNameColor: (userName: string) => string;
+export declare const splitName: (userName: string) => string[];

package/lib/fcr-ui-kit/src/components/avatar/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import './index.css';
+export declare type AvatarProps = {
+    size: number;
+    textSize: number;
+    nickName: string;
+};
+export declare const Avatar: FC<AvatarProps>;

package/lib/fcr-ui-kit/src/components/button/index.d.ts

@@ -0,0 +1,82 @@
+import React, { FC } from 'react';
+import { SvgIconEnum } from '../svg-img';
+import './index.css';
+import { PopoverProps } from '../popover';
+export declare type ButtonSize = 'XL' | 'L' | 'M' | 'S' | 'XS' | 'XXS';
+export declare type ButtonType = 'primary' | 'secondary' | 'text' | 'link';
+export declare type ButtonShape = 'circle' | 'rounded';
+export declare type ButtonStyleType = 'danger' | 'gray' | 'white';
+export interface ButtonProps {
+    /**
+     * 按钮尺寸，可选值为 'XL' | 'L' | 'M' | 'S' | 'XS' | 'XXS'，默认为'L'
+     */
+    /** @en
+     * Set the size of button, can be set to 'XL' | 'L' | 'M' | 'S' | 'XS' | 'XXS', default value is 'L'.
+     */
+    size?: ButtonSize;
+    /**
+     * 按钮类型，可选值为 'primary' | 'secondary' | 'text' | 'link'，默认为'primary'
+     */
+    /** @en
+     * Set the type of button,can be set to 'primary' | 'secondary' | 'text' | 'link', default value is 'primary'.
+     */
+    type?: ButtonType;
+    /**
+     * 按钮形状，可选值为 'circle' | 'rounded'，默认为'circle'
+     */
+    /** @en
+     * Set the shape of button,can be set to 'circle' | 'rounded', default value is 'circle'.
+     */
+    shape?: ButtonShape;
+    /**
+     * 按钮样式类型，可选值为 'danger' | 'gray'
+     */
+    /** @en
+     * Set the style type of button, can be set to 'danger' | 'gray'.
+     */
+    styleType?: ButtonStyleType;
+    /**
+     * 设置按钮前置图标
+     */
+    /** @en
+     * Set the icon before the button text.
+     */
+    preIcon?: SvgIconEnum;
+    /**
+     * 设置按钮后置图标
+     */
+    /** @en
+     * Set the icon after the button text.
+     */
+    postIcon?: SvgIconEnum;
+    /**
+     * 设置按钮加载状态
+     */
+    /** @en
+     * Set the loading status of button.
+     */
+    loading?: boolean;
+    /**
+     * 按钮禁用状态
+     */
+    /** @en
+     * Disabled state of button.
+     */
+    disabled?: boolean;
+    /**
+     * 点击按钮时的回调
+     */
+    /** @en
+     * Set the handler to handle click event.
+     */
+    onClick?: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * 将按钮宽度调整为其父宽度的选项，默认为false
+     */
+    /** @en
+     * Option to fit button width to its parent width, default value is false.
+     */
+    block?: boolean;
+    extra?: Partial<PopoverProps>;
+}
+export declare const Button: FC<React.PropsWithChildren<ButtonProps>>;

package/lib/fcr-ui-kit/src/components/checkbox/index.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+import './index.css';
+export interface CheckboxProps {
+    label?: ReactNode;
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean) => void;
+    styleType?: 'brand' | 'white';
+    size?: 'medium' | 'small';
+    style?: CSSProperties;
+}
+export declare const Checkbox: FC<CheckboxProps>;

package/lib/fcr-ui-kit/src/components/dialog/class-dialog.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from 'react';
+import { ButtonProps } from '../button';
+import { BaseDialogProps } from '.';
+import './class-dialog.css';
+export interface ClassDialogProps extends BaseDialogProps {
+    /**
+     * 对话框标题
+     */
+    /** @en
+     * The dialog Title.
+     */
+    title?: ReactNode;
+    /**
+     * 对话框底部元素
+     */
+    /** @en
+     * Footer content
+     */
+    footer?: ReactNode;
+    /**
+     * 对话框顶部图片地址
+     */
+    /** @en
+     * Set the url for the image on the top of dialog.
+     */
+    imgUrl?: string;
+    /**
+     * 对话框描述内容
+     */
+    /** @en
+     * The dialog content
+     */
+    content?: ReactNode;
+    /**
+     * 对话框按钮组，会在描述内容下方渲染若干操作按钮
+     */
+    /** @en
+     * Set the action buttons on the bottom of the dialog content.
+     */
+    actions?: (ButtonProps & {
+        text?: string;
+    })[];
+    /**
+     * 是否显示取消按钮
+     */
+    /** @en
+     * Wheter the cancel button is visible on bottom of the dialog or not.
+     */
+    cancelBtn?: boolean;
+}
+export declare const ClassDialog: FC<React.PropsWithChildren<ClassDialogProps>>;

package/lib/fcr-ui-kit/src/components/dialog/confirm-dialog.d.ts

@@ -0,0 +1,70 @@
+import { FC, ReactNode } from 'react';
+import { ButtonProps } from '../button';
+import { CheckboxProps } from '../checkbox';
+import { BaseDialogProps } from '.';
+import './confirm-dialog.css';
+export interface ConfirmDialogProps extends BaseDialogProps {
+    /**
+     * 对话框标题
+     */
+    /** @en
+     * The dialog's title.
+     */
+    title?: ReactNode;
+    /**
+     * 对话框底部元素
+     */
+    /** @en
+     * Footer content
+     */
+    footer?: ReactNode;
+    /**
+     * 点击对话框确认按钮回调
+     */
+    /** @en
+     * Specify a function that will be called when a user clicks the OK button
+     */
+    onOk?: () => void;
+    /**
+     * 是否展示对话框checkbox
+     */
+    /** @en
+     * Wheter the chekcbox is visibleon bottom left of the dialog or not.
+     */
+    checkable?: boolean;
+    /**
+     * 对话框checkbox属性
+     */
+    /** @en
+     * The checkbox props.
+     */
+    checkedProps?: CheckboxProps;
+    /**
+     * 对话框确认按钮文案
+     */
+    /** @en
+     * Text of the OK button
+     */
+    okText?: ReactNode;
+    /**
+     * 对话框取消按钮文案
+     */
+    /** @en
+     * Text of the cancel button
+     */
+    cancelText?: ReactNode;
+    /**
+     * 对话框图标
+     */
+    /** @en
+     * Set the icon on the left of the dialog title and content.
+     */
+    icon?: ReactNode;
+    content?: ReactNode;
+    okButtonProps?: ButtonProps;
+    cancelButtonProps?: ButtonProps;
+    okButtonVisible?: boolean;
+    cancelButtonVisible?: boolean;
+    onCancel?: () => void;
+}
+export declare const ConfirmDialog: FC<React.PropsWithChildren<ConfirmDialogProps>>;

package/lib/fcr-ui-kit/src/components/dialog/global-dialog.d.ts

@@ -0,0 +1,11 @@
+import './global-dialog.css';
+import { PropsWithChildren, ReactNode, CSSProperties } from 'react';
+export interface GlobalDialogProps {
+    visible: boolean;
+    afterClose?: () => void;
+    onClose?: () => void;
+    width?: number;
+    header?: ReactNode;
+    headerWrapperStyle?: CSSProperties;
+}
+export declare const GlobalDialog: (props: PropsWithChildren<GlobalDialogProps>) => JSX.Element;

package/lib/fcr-ui-kit/src/components/dialog/index.d.ts

@@ -0,0 +1,68 @@
+import { ConfirmDialog } from "./confirm-dialog";
+import { ClassDialog } from "./class-dialog";
+import { CSSProperties, FC, ReactNode } from "react";
+import "./index.css";
+export interface BaseDialogProps {
+    /**
+     * 对话框是否显示
+     */
+    /** @en
+     * Whether the dialog is visible or not.
+     */
+    visible?: boolean;
+    /**
+     * 对话框关闭的回调，点击关闭按钮或蒙层时触发
+     */
+    /** @en
+     * Specify a function that will be called when a user clicks mask, close button on top right or Cancel button
+     */
+    onClose?: () => void;
+    /**
+     * 是否可以点击蒙层关闭
+     */
+    /** @en
+     * Whether to close the modal dialog when the mask (area outside the modal) is clicked
+     */
+    maskClosable?: boolean;
+    /**
+     * 对话框宽度
+     */
+    /** @en
+     * Width of the dialog
+     */
+    width?: number;
+    /**
+     * 对话框类名
+     */
+    /** @en
+     * classname of the dialog
+     */
+    classNames?: string;
+    /**
+     * 是否显示对话框关闭按钮
+     */
+    /** @en
+     * Whether a close (x) button is visible on top right of the dialog or not
+     */
+    closable?: boolean;
+    /**
+     * 自定义对话框关闭按钮
+     */
+    /** @en
+     * Custom close icon
+     */
+    closeIcon?: ReactNode;
+    afterClose?: () => void;
+    mask?: boolean;
+    bodyStyle?: CSSProperties;
+    wrapClassName?: string;
+    getContainer?: false | string | HTMLElement | (() => HTMLElement) | undefined;
+    center?: boolean;
+    destroyOnClose?: boolean;
+    maskStyle?: CSSProperties;
+    wrapStyle?: CSSProperties;
+    zIndex?: number;
+    forceRender?: boolean;
+}
+declare const BaseDialog: FC<React.PropsWithChildren<BaseDialogProps>>;
+export { ConfirmDialog, ClassDialog, BaseDialog };

package/lib/fcr-ui-kit/src/components/dropdown/index.d.ts

@@ -0,0 +1,58 @@
+import { FC } from 'react';
+import './index.css';
+export declare type DropdownProps = {
+    /**
+     * 下拉框选中的值
+     */
+    /** @en
+     * The dropdown selected value
+     */
+    value?: string;
+    /**
+     * 下拉框的提示符
+     */
+    /** @en
+     * Placeholder of the dropdown
+     */
+    placeholder?: string;
+    /**
+     * 下拉框选项
+     */
+    /** @en
+     * The dropdown options
+     */
+    options?: {
+        text: string;
+        value: string;
+    }[];
+    /**
+     * 输入框的尺寸：
+     * small - 小
+     * medium - 中等(default)
+     * large - 大
+     */
+    /** @en
+     * Size of the dropdown:
+     * small
+     * medium
+     * large
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * 值变更事件
+     * @param value 变更值
+     */
+    /** @en
+     * Change event of the input's value
+     * @param value changed value
+     */
+    onChange?: (value: string) => void;
+    /**
+     * 下拉框是否禁用
+     */
+    /** @en
+     * Whether the dropdown is disabled
+     */
+    disabled?: boolean;
+};
+export declare const Dropdown: FC<DropdownProps>;

package/lib/fcr-ui-kit/src/components/input/index.d.ts

@@ -0,0 +1,69 @@
+import React, { CSSProperties, FC } from 'react';
+import { SvgIconEnum } from '../svg-img';
+import './index.css';
+export declare type InputProps = {
+    /**
+     * 输入框的提示符
+     */
+    /** @en
+     * Placeholder of the input box
+     */
+    placeholder?: string;
+    /**
+     * 输入框中的值
+     */
+    /** @en
+     * Value of the input box
+     */
+    value?: string;
+    /**
+     * 输入框的标签，一般展示在输入框的头部，提示用户需要输入的内容
+     */
+    /** @en
+     * The label of the input box, usually displayed at the head of the input box, prompting the user to enter the content
+     */
+    label?: string;
+    /**
+     * 输入框是否禁用
+     */
+    /** @en
+     * Whether the input box is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 输入框前置图标，仅在 variant = rounded 时生效
+     */
+    /** @en
+     * Input box front icon, takes effect only if variant = rounded
+     */
+    iconPrefix?: SvgIconEnum;
+    /**
+     * 输入框的尺寸：
+     * medium - 中等(default)
+     * large - 大
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    size?: 'large' | 'medium' | 'small' | 'mini';
+    /**
+     * 值变更事件
+     * @param value 变更值
+     */
+    /** @en
+     * Change event of the input's value
+     * @param value changed value
+     */
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    onKeyUp?: (event: React.KeyboardEvent) => void;
+    allowClear?: boolean;
+    autoFocus?: boolean;
+    style?: CSSProperties;
+    shape?: 'circle' | 'rounded';
+    maxLength?: number;
+};
+export declare const Input: FC<InputProps>;

package/lib/fcr-ui-kit/src/components/input-number/index.d.ts

@@ -0,0 +1,69 @@
+import { FC } from 'react';
+import './index.css';
+export declare type InputNumberProps = {
+    /**
+     * 输入框的提示符
+     */
+    /** @en
+     * Placeholder of the input box
+     */
+    placeholder?: string;
+    /**
+     * 输入框中的值
+     */
+    /** @en
+     * Value of the input box
+     */
+    value?: number;
+    /**
+     * 每次点变更的值
+     */
+    /**@en
+     * the value that changes each time click
+     */
+    step?: number;
+    /**
+     * 输入框最小值
+     */
+    /** @en
+     * Min value of the input
+     */
+    min?: number;
+    /**
+     * 输入框最大值
+     */
+    /** @en
+     * Max value of the input
+     */
+    max?: number;
+    /**
+     * 输入框是否禁用
+     */
+    /** @en
+     * Whether the input box is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 输入框的尺寸：
+     * small - 小
+     * medium - 中等(default)
+     * large - 大
+     */
+    /** @en
+     * Size of the input box:
+     * small
+     * medium(default)
+     * large
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * 值变更事件
+     * @param value 变更值
+     */
+    /** @en
+     * Change event of the input's value
+     * @param value changed value
+     */
+    onChange?: (value: number | null) => void;
+};
+export declare const InputNumber: FC<InputNumberProps>;

package/lib/fcr-ui-kit/src/components/pagination/index.d.ts

@@ -0,0 +1,27 @@
+import { FC, PropsWithChildren } from 'react';
+import './index.css';
+declare type PaginationProps = {
+    current: number;
+    total: number;
+    onChange?: (current: number) => void;
+};
+export declare const Pagination: FC<PaginationProps & {
+    size?: 'large' | 'small';
+}>;
+declare type HalfRoundedProps = PaginationProps & {
+    onAdd?: () => void;
+    addText: string;
+    showText: string;
+    hideText: string;
+};
+export declare const HalfRoundedPagination: FC<HalfRoundedProps>;
+interface FloatPaginationProps extends PaginationProps {
+    wrapperCls?: string;
+}
+export declare const FloatPagination: FC<FloatPaginationProps>;
+interface ListViewPaginationProps extends PaginationProps {
+    wrapperCls?: string;
+    direction?: 'row' | 'col';
+}
+export declare const ListViewPagination: FC<PropsWithChildren<ListViewPaginationProps>>;
+export {};

package/lib/fcr-ui-kit/src/components/popover/index.d.ts

@@ -0,0 +1,47 @@
+import { FC, ReactNode } from 'react';
+import { ToolTipProps } from '../tooltip';
+import './index.css';
+export interface PopoverProps extends ToolTipProps {
+    /**
+     * 气泡操作面板的尺寸，可选值为 large | small
+     */
+    /** @en
+     * The size of popover dialog, can be set to large | small.
+     */
+    size?: 'large' | 'small';
+    afterVisibleChange?: (visible: boolean) => void;
+}
+export declare const Popover: FC<PopoverProps>;
+interface DoubleDeckPopoverProps extends ToolTipProps {
+    /**
+     * popover上部分的内容
+     */
+    /** @en
+     * The content of deck on top of the popover dialog.
+     */
+    topDeckContent?: ReactNode;
+    /**
+     * popover下部分的内容
+     */
+    /** @en
+     * The content of deck on bottom of the popover dialog.
+     */
+    bottomDeckContent?: ReactNode;
+}
+export declare const DoubleDeckPopover: FC<DoubleDeckPopoverProps>;
+interface FcrPopoverWithTooltip {
+    popoverProps?: PopoverProps;
+    toolTipProps?: ToolTipProps;
+    triggerCls?: string;
+}
+export declare const PopoverWithTooltip: import("react").ForwardRefExoticComponent<FcrPopoverWithTooltip & {
+    children: ReactNode;
+} & import("react").RefAttributes<{
+    closePopover: () => void;
+}>>;
+interface FcrDoubleDeckPopoverWithTooltip {
+    doulebDeckPopoverProps?: DoubleDeckPopoverProps;
+    toolTipProps?: ToolTipProps;
+}
+export declare const DoubleDeckPopoverWithTooltip: FC<React.PropsWithChildren<FcrDoubleDeckPopoverWithTooltip>>;
+export {};

package/lib/fcr-ui-kit/src/components/progress/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './index.css';
+interface ProgressProps {
+    strokeWidth?: number;
+    percent?: number;
+    backgroundColor?: string;
+    showPercentText?: boolean;
+    percentText?: string;
+}
+export declare const Progress: (props: ProgressProps) => JSX.Element;
+export {};

package/lib/fcr-ui-kit/src/components/radio/index.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+import './index.css';
+export interface RadioProps {
+    label?: ReactNode;
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    onClick?: () => void;
+    styleType?: 'brand' | 'white' | 'transparent';
+    name?: string;
+    value?: string;
+}
+export declare const Radio: FC<React.PropsWithChildren<RadioProps>>;
+interface RadioGroupProps<V> {
+    defaultValue?: any;
+    name?: string;
+    options?: RadioProps[];
+    value?: V;
+    onChange?: (value?: V) => void;
+}
+export declare const RadioGroup: <V>(props: import("react").PropsWithChildren<RadioGroupProps<V>>) => JSX.Element;
+export {};

package/lib/fcr-ui-kit/src/components/slider/index.d.ts

@@ -0,0 +1,22 @@
+import { FC } from "react";
+import "./index.css";
+import "rc-slider/assets/index.css";
+declare type VerticalSliderProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+};
+export declare const VerticalSlider: FC<VerticalSliderProps>;
+declare type HorizontalSliderProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+};
+export declare const HorizontalSlider: FC<HorizontalSliderProps>;
+export {};

package/lib/fcr-ui-kit/src/components/sound-player/index.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+declare type Props = {
+    url: string;
+};
+export declare const SoundPlayer: FC<Props>;
+export {};

package/lib/fcr-ui-kit/src/components/svg-img/clickable-icon.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { SvgIconEnum, SvgImgProps } from '.';
+import './clickable-icon.css';
+interface ClickableIconProps {
+    size?: 'large' | 'small' | 'mini';
+    icon: SvgIconEnum;
+    iconSize?: number;
+    disabled?: boolean;
+    classNames?: string;
+    onClick?: () => void;
+    iconProps?: SvgImgProps;
+}
+export declare const ClickableIcon: FC<ClickableIconProps>;
+export interface PretestDeviceIconProps {
+    icon: SvgIconEnum;
+    onClick?: () => void;
+    disabled?: boolean;
+    classNames?: string;
+    status: 'active' | 'inactive' | 'idle' | 'disabled';
+    tooltip: string;
+    iconProps?: Partial<SvgImgProps>;
+    size?: 'large' | 'small';
+}
+export declare const PretestDeviceIcon: FC<PretestDeviceIconProps>;
+export {};