@pinnacle0/web-ui 0.3.23 → 0.3.26

package/src/core/OverflowableText/index.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import {classNames} from "../../util/ClassNames";
-import {Tooltip} from "../Tooltip";
-import type {SafeReactChildren} from "../../internal/type";
-import "./index.less";
-
-interface Props {
-    children: SafeReactChildren;
-    maxWidth: number;
-    className?: string;
-    style?: React.CSSProperties;
-}
-
-interface States {
-    overflow: boolean;
-}
-
-export class OverflowableText extends React.PureComponent<Props, States> {
-    static displayName = "OverflowableText";
-
-    private readonly textRef = React.createRef<HTMLDivElement>();
-
-    constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            overflow: false,
-        };
-    }
-
-    componentDidUpdate(prevProps: Props) {
-        if (this.props.children !== prevProps.children) {
-            this.updateTextOverflow();
-        }
-    }
-
-    componentDidMount() {
-        this.updateTextOverflow();
-    }
-
-    updateTextOverflow = () => {
-        const {current} = this.textRef;
-        this.setState({overflow: (current && current.clientWidth > this.props.maxWidth) || false});
-    };
-
-    render() {
-        const {children, style, maxWidth, className} = this.props;
-
-        return (
-            <div className={classNames("g-overflowable-text", className)}>
-                {this.state.overflow ? (
-                    <Tooltip overlay={children}>
-                        <div className="wrap-text" style={{...style, width: maxWidth}}>
-                            {children}
-                        </div>
-                    </Tooltip>
-                ) : (
-                    <div style={{display: "inline-block", ...style}}>{children}</div>
-                )}
-                <div ref={this.textRef} className="shadow-text">
-                    {children}
-                </div>
-            </div>
-        );
-    }
-}

package/src/core/PagedList/index.less

@@ -1,91 +0,0 @@
-@import "../../css/variable";
-
-.g-paged-list {
-    display: flex;
-    color: white;
-    background-image: linear-gradient(to bottom, #2c2b30, #2c2b30), linear-gradient(to bottom, #d2ccc9, #fffaf5 20%, #fbfaf8 59%, #636363);
-
-    > .list-wrap {
-        overflow: hidden;
-        position: relative;
-
-        > .list {
-            display: flex;
-            flex-direction: row-reverse;
-            transition: transform 0.8s;
-            height: 100%;
-            align-items: center;
-        }
-
-        > .no-data {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-    }
-
-    > .navigation {
-        padding: 12px 24px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-
-        .next-button {
-            width: 0;
-            height: 0;
-            border-top: 6px solid transparent;
-            border-bottom: 6px solid transparent;
-            border-left: 8px solid white;
-            margin-right: 6px;
-        }
-
-        .previous-button {
-            width: 0;
-            height: 0;
-            border-top: 6px solid transparent;
-            border-bottom: 6px solid transparent;
-            border-right: 8px solid white;
-            margin-right: 6px;
-        }
-
-        .current-button {
-            width: 9px;
-            height: 9px;
-            border-radius: 50%;
-            background: white;
-            margin-right: 6px;
-        }
-
-        > * {
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-
-            &:first-child {
-                margin-bottom: 10px;
-            }
-
-            &:last-child {
-                margin-top: 10px;
-            }
-
-            &.disabled {
-                cursor: not-allowed;
-                color: @lib-border-gray;
-
-                .next-button {
-                    border-left: 8px solid @lib-border-gray;
-                }
-
-                .previous-button {
-                    border-right: 8px solid @lib-border-gray;
-                }
-
-                .current-button {
-                    background: @lib-border-gray;
-                }
-            }
-        }
-    }
-}

package/src/core/PagedList/index.tsx

@@ -1,93 +0,0 @@
-import React from "react";
-import {classNames} from "../../util/ClassNames";
-import {i18n} from "../../internal/i18n/core";
-import type {StringKey} from "../../internal/type";
-import "./index.less";
-
-export interface Props<T extends object> {
-    dataSource: T[];
-    rowKey: StringKey<T> | ((record: T, index: number) => string) | "index";
-    renderItem: React.ComponentType<{item: T; index: number}>;
-    itemWidth: number;
-    pageSize: number;
-}
-
-interface State {
-    currentItemIndex: number;
-}
-
-export class PagedList<T extends object> extends React.PureComponent<Props<T>, State> {
-    static displayName = "PagedList";
-
-    constructor(props: Props<T>) {
-        super(props);
-        this.state = {
-            currentItemIndex: 0,
-        };
-    }
-
-    getUpperLimit = () => this.props.dataSource.length - this.props.pageSize;
-
-    goPreviousPage = () => {
-        const {pageSize} = this.props;
-        const {currentItemIndex} = this.state;
-        this.setState({currentItemIndex: Math.max(0, Math.min(currentItemIndex + pageSize, this.getUpperLimit()))});
-    };
-
-    goNextPage = () => {
-        const {pageSize} = this.props;
-        const {currentItemIndex} = this.state;
-        this.setState({currentItemIndex: Math.max(0, currentItemIndex - pageSize)});
-    };
-
-    goCurrentPage = () => this.setState({currentItemIndex: 0});
-
-    getRowKey = (record: T, index: number): string | number => {
-        const {rowKey} = this.props;
-        if (rowKey === "index") {
-            return index;
-        } else if (typeof rowKey === "function") {
-            return rowKey(record, index);
-        } else {
-            return record[rowKey] as any;
-        }
-    };
-
-    render() {
-        const {dataSource, renderItem, itemWidth, pageSize} = this.props;
-        const {currentItemIndex} = this.state;
-        const isNextDisabled = currentItemIndex === 0;
-        const isPreviousDisabled = currentItemIndex >= this.getUpperLimit();
-        const t = i18n();
-        const Component = renderItem;
-
-        return (
-            <div className="g-paged-list">
-                <div className="list-wrap" style={{width: itemWidth * pageSize}}>
-                    <div className="list" style={{transform: `translateX(${currentItemIndex * itemWidth}px)`}}>
-                        {dataSource.map((_, index) => (
-                            <div style={{flex: `0 0 ${itemWidth}px`}} key={this.getRowKey(_, index)}>
-                                <Component index={index} item={_} />
-                            </div>
-                        ))}
-                    </div>
-                    {dataSource.length === 0 && <div className="no-data">{t.noData}</div>}
-                </div>
-                <div className="navigation">
-                    <div onClick={isNextDisabled ? undefined : this.goNextPage} className={classNames({disabled: isNextDisabled})}>
-                        <div className="next-button" />
-                        <div>{t.nextPage}</div>
-                    </div>
-                    <div onClick={isPreviousDisabled ? undefined : this.goPreviousPage} className={isPreviousDisabled ? "disabled" : ""}>
-                        <div className="previous-button" />
-                        <div>{t.prevPage}</div>
-                    </div>
-                    <div onClick={isNextDisabled ? undefined : this.goCurrentPage} className={classNames({disabled: isNextDisabled})}>
-                        <div className="current-button" />
-                        <div>{t.currentPage}</div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}

package/src/core/Pagination/index.less

@@ -1,14 +0,0 @@
-.g-pagination {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 15px;
-
-    .ant-pagination-options-size-changer.ant-select {
-        margin-right: 0;
-    }
-}
-
-.ant-pagination {
-    color: inherit;
-}

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.less

@@ -1,3 +0,0 @@
-.ant-popover {
-    max-width: 800px;
-}

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.less

@@ -1,6 +0,0 @@
-.ant-radio,
-.ant-radio-group,
-.ant-radio-wrapper,
-.ant-radio-button-wrapper {
-    color: inherit;
-}

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/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.less

@@ -1,7 +0,0 @@
-.ant-select,
-.ant-select-item:not(.ant-select-item-option-disabled),
-.ant-select-dropdown,
-.ant-select-arrow,
-.ant-select-item-empty {
-    color: inherit;
-}

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.less

@@ -1,33 +0,0 @@
-.g-slider {
-    display: flex;
-    flex: 1;
-
-    > .ant-slider {
-        flex: 1;
-    }
-
-    > .decrease-button,
-    > .increase-button {
-        width: 18px;
-        height: 18px;
-        line-height: 18px;
-        min-width: 18px;
-        margin-top: 7px;
-        padding: 0;
-        display: inline-block;
-
-        > span {
-            display: inline-block;
-            transform: scaleY(1.6) scaleX(0.6) translateY(-2px);
-            font-weight: 300;
-        }
-    }
-
-    > .decrease-button {
-        margin-right: 5px;
-    }
-
-    > .increase-button {
-        margin-left: 5px;
-    }
-}