@pinnacle0/web-ui 0.3.38 → 0.3.39

package/src/core/Pagination/index.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-import AntPagination from "antd/lib/pagination";
-import {i18n} from "../../internal/i18n/core";
-import {TextUtil} from "../../internal/TextUtil";
-import "antd/lib/pagination/style";
-import "./index.less";
-
-export interface Props {
-    onChange: (pageIndex: number) => void;
-    totalCount: number;
-    totalPage: number;
-    pageIndex: number;
-    pageSize?: number;
-    onShowSizeChange?: (pageIndex: number, pageSize: number) => void;
-    small?: boolean;
-    renderSummary?: ((totalCount: number, pageIndex: number, totalPage: number) => React.ReactElement) | "none";
-    pageSizeOptions?: string[];
-    style?: React.CSSProperties;
-}
-
-export class Pagination extends React.PureComponent<Props> {
-    static displayName = "Pagination";
-
-    onChange = (pageIndex: number, pageSize?: number) => {
-        // TO prevent onChange triggered again by page-size change, in 4.5+ Antd version
-        if (this.props.onShowSizeChange === undefined || pageSize === this.props.pageSize) {
-            this.props.onChange(pageIndex);
-        }
-    };
-
-    renderSummary = (totalCount: number, pageIndex: number, totalPage: number) => {
-        const t = i18n();
-        return <div>{TextUtil.interpolate(t.paginationSummary, totalCount.toString(), pageIndex.toString(), totalPage.toString())}</div>;
-    };
-
-    render() {
-        const {onShowSizeChange, totalPage, pageIndex, totalCount, small, renderSummary = this.renderSummary, pageSize = 10, pageSizeOptions} = this.props;
-        // If last page is divisible by pageSize that it is full page, otherwise only use reminder as last page size.
-        const lastPageSize = totalCount % pageSize === 0 ? pageSize : totalCount % pageSize;
-        const totalAvailableRecords = pageSize * (totalPage - 1) + lastPageSize;
-        return (
-            totalCount > 0 && (
-                <div className="g-pagination">
-                    {renderSummary !== "none" && renderSummary(totalCount, pageIndex, totalPage)}
-                    <AntPagination
-                        showSizeChanger={onShowSizeChange !== undefined}
-                        onShowSizeChange={onShowSizeChange}
-                        size={small ? "small" : "default"}
-                        onChange={this.onChange}
-                        current={pageIndex}
-                        pageSize={pageSize}
-                        total={totalAvailableRecords}
-                        pageSizeOptions={pageSizeOptions}
-                    />
-                </div>
-            )
-        );
-    }
-}

package/src/core/Popover/index.tsx

@@ -1,15 +0,0 @@
-import type {PopoverProps} from "antd/lib/popover";
-import AntPopover from "antd/lib/popover";
-import "antd/lib/popover/style";
-import React from "react";
-import "./index.less";
-
-interface Props extends PopoverProps {}
-
-export class Popover extends React.PureComponent<Props> {
-    static displayName = "Popover";
-
-    render() {
-        return <AntPopover {...this.props} />;
-    }
-}

package/src/core/Progress.tsx

@@ -1,14 +0,0 @@
-import type {ProgressProps} from "antd/lib/progress";
-import AntProgress from "antd/lib/progress";
-import React from "react";
-import "antd/lib/progress/style";
-
-interface Props extends ProgressProps {}
-
-export class Progress extends React.PureComponent<Props> {
-    static displayName = "Progress";
-
-    render() {
-        return <AntProgress {...this.props} />;
-    }
-}

package/src/core/Radio/index.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import type {RadioChangeEvent, RadioProps} from "antd/lib/radio";
-import AntRadio from "antd/lib/radio";
-import "antd/lib/radio/style";
-import "./index.less";
-
-export interface Props extends RadioProps {}
-
-export class Radio extends React.PureComponent<Props> {
-    static displayName = "Radio";
-
-    static Button = AntRadio.Button;
-
-    static Group = AntRadio.Group;
-
-    render() {
-        return <AntRadio {...this.props} />;
-    }
-}
-
-export type {RadioChangeEvent};

package/src/core/RelativeTime.tsx

@@ -1,59 +0,0 @@
-import moment from "moment";
-import React from "react";
-import {LocaleUtil} from "../util/LocaleUtil";
-
-export interface Props {
-    date: Date;
-}
-
-interface State {
-    elapsedText: string;
-}
-
-export class RelativeTime extends React.PureComponent<Props, State> {
-    static displayName = "RelativeTime";
-
-    private repaintTimeout: number | undefined;
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            elapsedText: "-",
-        };
-    }
-
-    componentDidMount() {
-        this.repaint();
-    }
-
-    componentDidUpdate(prevProps: Readonly<Props>) {
-        if (prevProps.date !== this.props.date) {
-            this.repaint();
-        }
-    }
-
-    componentWillUnmount() {
-        clearTimeout(this.repaintTimeout);
-    }
-
-    repaint = () => {
-        clearTimeout(this.repaintTimeout);
-
-        const momentLocale = LocaleUtil.current() === "zh" ? "zh-cn" : "en";
-        const propsMoment = moment(this.props.date).locale(momentLocale);
-        const currentMoment = moment();
-        const elapsedText = propsMoment.from(currentMoment);
-        this.setState({elapsedText});
-
-        // Moment threshold uses 45 minutes for "an hour ago" and 45 seconds for "a minute ago".
-        // Repaint after 15 minutes / seconds interval should be good enough for now.
-        // See: https://momentjs.com/docs/#/displaying/fromnow/
-        const isAnHourAgo = Date.now() - this.props.date.getTime() > 3600 * 1000;
-        const timeoutDuration = isAnHourAgo ? 15 * 1000 * 60 : 15 * 1000;
-        this.repaintTimeout = window.setTimeout(this.repaint, timeoutDuration);
-    };
-
-    render() {
-        return this.state.elapsedText;
-    }
-}

package/src/core/ResizeObserver.tsx

@@ -1,2 +0,0 @@
-export {default as ResizeObserver} from "rc-resize-observer";
-export type {OnResize, ResizeObserverProps, SizeInfo} from "rc-resize-observer";

package/src/core/SearchableSelect.tsx

@@ -1,17 +0,0 @@
-import type {Props as SelectProps, SelectValue, SelectOptionProps} from "./Select";
-import {Select} from "./Select";
-import React from "react";
-
-export interface Props<ValueType extends SelectValue> extends Omit<SelectProps<ValueType>, "optionFilterProp" | "showSearch" | "optionLabelProp" | "options"> {
-    options?: Array<{value: string; label: string}>;
-}
-
-export class SearchableSelect<ValueType extends SelectValue> extends React.PureComponent<Props<ValueType>> {
-    static displayName = "SearchableSelect";
-
-    static Option = Select.Option as React.ComponentType<SelectOptionProps & {children: string}>;
-
-    render() {
-        return <Select optionFilterProp={this.props.options ? "label" : "children"} showSearch {...this.props} />;
-    }
-}

package/src/core/Select/index.tsx

@@ -1,25 +0,0 @@
-import type {SelectProps, SelectValue} from "antd/lib/select";
-import AntSelect from "antd/lib/select";
-import type {OptionProps as SelectOptionProps} from "rc-select/lib/Option";
-import type {DefaultOptionType} from "rc-select/lib/Select";
-import React from "react";
-import "antd/lib/select/style";
-import "./index.less";
-
-export interface Props<ValueType extends SelectValue> extends Omit<SelectProps<ValueType>, "options"> {
-    options?: Array<DefaultOptionType>;
-}
-
-export class Select<ValueType extends SelectValue> extends React.PureComponent<Props<ValueType>> {
-    static displayName = "Select";
-
-    static Option = AntSelect.Option;
-
-    static OptGroup = AntSelect.OptGroup;
-
-    render() {
-        return <AntSelect {...this.props} />;
-    }
-}
-
-export type {SelectValue, SelectOptionProps};

package/src/core/SignedAmountInput.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-import {NumberInput} from "./NumberInput";
-import {Input} from "./Input";
-import {Select} from "./Select";
-import type {ControlledFormValue} from "../internal/type";
-import {i18n} from "../internal/i18n/core";
-
-export interface SignedAmountInputData {
-    isIncrease: boolean;
-    amount: number | null; // Always store positive number (or null for empty input), keep same as UI
-}
-
-export interface Props extends ControlledFormValue<SignedAmountInputData> {
-    labels: [string, string];
-    onSignChange?: (isIncrease: boolean) => void;
-    scale?: number; // Default: 2
-    max?: number;
-}
-
-export class SignedAmountInput extends React.PureComponent<Props> {
-    static displayName = "SignedAmountInput";
-
-    private readonly selectStyle: React.CSSProperties = {width: 96};
-    private readonly inputStyle: React.CSSProperties = {borderTopLeftRadius: 0, borderBottomLeftRadius: 0};
-
-    onInputChange = (amount: number | null) => {
-        const {value, onChange} = this.props;
-        onChange({isIncrease: value.isIncrease, amount});
-    };
-
-    onSelectChange = (newValue: "+" | "-") => {
-        const isIncrease = newValue === "+";
-        const {value, onChange, onSignChange} = this.props;
-        onChange({isIncrease, amount: value.amount});
-        if (onSignChange) {
-            onSignChange(isIncrease);
-        }
-    };
-
-    render() {
-        const {value, labels, scale, max} = this.props;
-        const t = i18n();
-        const safeScale = scale || 2;
-        const min = Number(Math.pow(0.1, safeScale).toFixed(safeScale));
-        return (
-            <Input.Group compact>
-                <Select onChange={this.onSelectChange} value={value.isIncrease ? "+" : "-"} style={this.selectStyle}>
-                    <Select.Option key="+" value="+">
-                        {labels[0] || t.depositPositive + " (+)"}
-                    </Select.Option>
-                    <Select.Option key="-" value="-">
-                        {labels[1] || t.depositNegative + " (-)"}
-                    </Select.Option>
-                </Select>
-                <NumberInput allowNull value={value.amount} min={min} max={max} scale={scale} onChange={this.onInputChange} inputStyle={this.inputStyle} />
-            </Input.Group>
-        );
-    }
-}

package/src/core/Skeleton.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import type {SkeletonProps} from "antd/lib/skeleton";
-import AntSkeleton from "antd/lib/skeleton";
-import "antd/lib/skeleton/style";
-
-export interface Props extends SkeletonProps {}
-
-export class Skeleton extends React.PureComponent<Props> {
-    static displayName = "Skeleton";
-
-    render() {
-        return <AntSkeleton {...this.props} />;
-    }
-}

package/src/core/Slider/RangeSlider.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import type {SliderRangeProps} from "antd/lib/slider";
-import AntSlider from "antd/lib/slider";
-import type {ControlledFormValue} from "../../internal/type";
-
-interface RangeProps extends Omit<SliderRangeProps, "range" | "value" | "onChange">, ControlledFormValue<[number, number]> {
-    draggable?: boolean;
-}
-
-export class RangeSlider extends React.PureComponent<RangeProps> {
-    static displayName = "RangeSlider";
-
-    render() {
-        const {draggable, ...rest} = this.props;
-        return <AntSlider range={{draggableTrack: draggable}} {...rest} />;
-    }
-}

package/src/core/Slider/index.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import AntSlider from "antd/lib/slider";
-import {classNames} from "../../util/ClassNames";
-import {Button} from "../Button";
-import {RangeSlider} from "./RangeSlider";
-import type {SliderSingleProps} from "antd/lib/slider";
-import type {ControlledFormValue} from "../../internal/type";
-import "antd/lib/slider/style";
-import "./index.less";
-
-interface Props extends Omit<SliderSingleProps, "range" | "value" | "onChange">, ControlledFormValue<number> {
-    showButton?: boolean;
-}
-
-export class Slider extends React.PureComponent<Props> {
-    static displayName = "Slider";
-    static Range = RangeSlider;
-
-    onChange = (newValue: number) => {
-        const {min, max, onChange} = this.props;
-        if (max && newValue > max) {
-            onChange(max);
-        } else if (min && newValue < min) {
-            onChange(min);
-        } else {
-            onChange(newValue);
-        }
-    };
-
-    render() {
-        const {showButton, onChange, value, step, className, ...rest} = this.props;
-        const safeStep = step || 1;
-
-        return (
-            <span className={classNames("g-slider", className)}>
-                {showButton && (
-                    <Button className="decrease-button" onClick={() => this.onChange(value - safeStep)}>
-                        <span>{"<"}</span>
-                    </Button>
-                )}
-                <AntSlider range={false} value={value} onChange={this.onChange} step={safeStep} {...rest} />
-                {showButton && (
-                    <Button className="increase-button" onClick={() => this.onChange(value + safeStep)}>
-                        <span>{">"}</span>
-                    </Button>
-                )}
-            </span>
-        );
-    }
-}

package/src/core/Space.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import type {SpaceProps} from "antd/lib/space";
-import AntSpace from "antd/lib/space";
-import "antd/lib/space/style";
-
-interface Props extends SpaceProps {}
-
-export class Space extends React.PureComponent<Props> {
-    static displayName = "Space";
-
-    render() {
-        return <AntSpace {...this.props} />;
-    }
-}

package/src/core/Spin.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import AntSpin from "antd/lib/spin";
-import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
-import type {SpinProps as AntSpinProps, SpinSize as AntSpinSize, SpinIndicator as AntSpinIndicator} from "antd/lib/spin";
-import "antd/lib/spin/style";
-
-export interface Props extends Omit<AntSpinProps, "spinning"> {
-    spinning: boolean;
-}
-
-export class Spin extends React.PureComponent<Props> {
-    static displayName = "Spin";
-
-    render() {
-        const {spinning, children, indicator, ...restProps} = this.props;
-        return (
-            <AntSpin spinning={spinning} indicator={indicator || <LoadingOutlined />} {...restProps}>
-                {children}
-            </AntSpin>
-        );
-    }
-}
-
-export type SpinSize = AntSpinSize;
-export type SpinIndicator = AntSpinIndicator;

package/src/core/StepFormContainer/index.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import {i18n} from "../../internal/i18n/core";
-import {classNames} from "../../util/ClassNames";
-import {Button} from "../Button";
-import {Form} from "../Form";
-import {Space} from "../Space";
-import {Steps} from "../Steps";
-import type {SafeReactChild} from "../../internal/type";
-import "./index.less";
-
-export interface StepItem {
-    title: string;
-    content: SafeReactChild;
-    description?: string;
-}
-
-export interface Props {
-    currentStep: number;
-    steps: StepItem[];
-    onStepChange: (step: number) => void;
-    onFinish: () => void;
-    stepLabelPlacement?: "horizontal" | "vertical"; // Default: horizontal
-    id?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    formLayout?: "horizontal" | "vertical";
-    buttonRenderer?: (prevButton: React.ReactElement, nextButton: React.ReactElement) => React.ReactElement;
-}
-
-export class StepFormContainer extends React.PureComponent<Props> {
-    static displayName = "StepFormContainer";
-
-    goToPrevStep = () => this.props.onStepChange(this.props.currentStep - 1);
-
-    goToNextStep = () => this.props.onStepChange(this.props.currentStep + 1);
-
-    renderButtons = (submitButton: React.ReactElement, isValidating: boolean) => {
-        const {currentStep, buttonRenderer = (prevButton, nextButton) => (currentStep > 0 ? [prevButton, nextButton] : nextButton)} = this.props;
-        const t = i18n();
-        const prevButton = (
-            <Button color="wire-frame" onClick={this.goToPrevStep} disabled={isValidating} key="prevButton">
-                {t.prevStep}
-            </Button>
-        );
-        return <Space>{buttonRenderer(prevButton, submitButton)}</Space>;
-    };
-
-    render() {
-        const {stepLabelPlacement, formLayout, currentStep, steps, onFinish, style, className, id} = this.props;
-        const t = i18n();
-        const nextButtonText = currentStep !== steps.length - 1 ? t.nextStep : t.finish;
-
-        return (
-            <div className={classNames("g-step-form-container", className)} id={id} style={style}>
-                <Steps current={currentStep} labelPlacement={stepLabelPlacement}>
-                    {steps.map((_, key) => (
-                        <Steps.Step key={key} title={_.title} description={_.description} />
-                    ))}
-                </Steps>
-                <Form layout={formLayout} onFinish={currentStep < steps.length - 1 ? this.goToNextStep : onFinish} buttonText={nextButtonText} buttonRenderer={this.renderButtons}>
-                    {steps[currentStep].content}
-                </Form>
-            </div>
-        );
-    }
-}

package/src/core/Steps/index.tsx

@@ -1,17 +0,0 @@
-import type {StepsProps} from "antd/lib/steps";
-import AntSteps from "antd/lib/steps";
-import React from "react";
-import "antd/lib/steps/style";
-import "./index.less";
-
-export interface Props extends StepsProps {}
-
-export class Steps extends React.PureComponent<Props> {
-    static displayName = "Steps";
-
-    static Step = AntSteps.Step;
-
-    render() {
-        return <AntSteps {...this.props} />;
-    }
-}