@pinnacle0/web-ui 0.3.22 → 0.3.23

package/src/core/OverflowableText/index.tsx

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,91 @@
+@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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,14 @@
+.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

@@ -0,0 +1,59 @@
+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

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

package/src/core/Popover/index.tsx

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,14 @@
+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

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

package/src/core/Radio/index.tsx

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,7 @@
+.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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,33 @@
+.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;
+    }
+}