@pinnacle0/web-ui 0.3.35 → 0.3.36

package/src/core/NumberInput/NumberInputPercentage.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import {classNames} from "../../util/ClassNames";
+import {NumberInput} from "./index";
+import {truncate} from "./util";
+import type {PickOptional} from "../../internal/type";
+import type {Props as NumberInputProps} from "./index";
+
+type OmitPropsKeys = "displayRenderer" | "scale" | "step" | "min" | "max" | "value" | "onChange";
+
+export interface Props<AllowNull extends boolean> extends Omit<NumberInputProps<AllowNull>, OmitPropsKeys> {
+    /**
+     * Number of decimal points used for **percentage** values.
+     *
+     * Default value: `0`
+     *
+     * To use 2 decimal points (eg 12.34%) in percentage values, `props.percentageScale` should be `2`.
+     * Must be an integer, otherwise throws an Error.
+     */
+    percentageScale?: number;
+
+    /**
+     * Amount to increment/decrement by in **percentage** values.
+     *
+     * Default value is based on `props.percentageScale`:
+     * ```txt
+     * | % scale     | default % step |
+     * |-------------|----------------|
+     * |      0      |     1 (1%)     |
+     * |      1      |   0.1 (0.1%)   |
+     * |      2      |  0.01 (0.01%)  |
+     * ```
+     */
+    percentageStep?: number;
+
+    /**
+     * Minimum value in **decimal** number.
+     * Default value: `0`
+     * If the minimum is `10%`, then `props.min` should be `0.1`.
+     */
+    min?: number;
+
+    /**
+     * Maximum value in **decimal** number.
+     * Default value: `1`
+     * If the maximum is `90%`, then `props.max` should be `0.9`.
+     */
+    max?: number;
+
+    /**
+     * Value of input field in **decimal** number.
+     * If the value is `20%`, then `props.value` should be `0.2`.
+     */
+    value: AllowNull extends true ? number | null : number;
+
+    /**
+     * Callback when value of input field changed in **decimal** number.
+     * If the new value is `30%`, then the argument `newValue` will be `0.3`.
+     */
+    onChange: (newValue: AllowNull extends true ? number | null : number) => void;
+}
+
+export class NumberInputPercentage<AllowNull extends boolean> extends React.PureComponent<Props<AllowNull>> {
+    static displayName = "NumberInputPercentage";
+
+    static defaultProps: PickOptional<Props<any>> = {
+        percentageScale: 0,
+        min: 0,
+        max: 1,
+    };
+
+    percentageDisplayRenderer = (value: number) => {
+        const percentageValue = value;
+        const percentageScale = this.props.percentageScale!;
+        return `${percentageValue.toFixed(percentageScale)} %`;
+    };
+
+    onPercentageChange: Props<AllowNull>["onChange"] = newPercentageValue => {
+        const scale = this.props.percentageScale! + 2;
+        const onChange = this.props.onChange as (newValue: number | null) => void;
+        const newValue = typeof newPercentageValue === "number" ? truncate(newPercentageValue / 100, scale) : newPercentageValue;
+        onChange(newValue);
+    };
+
+    render() {
+        const {percentageScale, percentageStep, min, max, value, onChange, className, ...restProps} = this.props;
+        const percentageValue = (typeof value === "number" ? value * 100 : value) as AllowNull extends true ? number | null : number;
+        const percentageMin = min! * 100;
+        const percentageMax = max! * 100;
+        return (
+            <NumberInput<AllowNull>
+                className={classNames("percentage", className)}
+                value={percentageValue}
+                onChange={this.onPercentageChange}
+                min={percentageMin}
+                max={percentageMax}
+                scale={percentageScale}
+                step={percentageStep}
+                displayRenderer={this.percentageDisplayRenderer}
+                {...restProps}
+            />
+        );
+    }
+}

package/src/core/NumberInput/index.tsx

@@ -0,0 +1,192 @@
+import React from "react";
+import {classNames} from "../../util/ClassNames";
+import {Input} from "../Input";
+import {canAdd, canMinus, clamp, getDisplayValue, rectifyInputIfValid, truncate} from "./util";
+import {NumberInputPercentage} from "./NumberInputPercentage";
+import type {InputRef as AntInputRef} from "antd/lib";
+import type {ControlledFormValue} from "../../internal/type";
+import "./index.less";
+
+// NOTE: Use `this.typeSafeProps` instead of `this.props` inside this component for better type-safety.
+// The type argument on `Props<AllowNull extends boolean>` allows better type-inference for consumers of this component.
+// However it breaks type-inference inside the component class :(
+
+type DefaultPropsKeys = "scale" | "min" | "max" | "editable" | "stepperMode";
+
+type PropsWithDefault<AllowNull extends boolean = true> = {
+    [K in Exclude<keyof Props<AllowNull>, DefaultPropsKeys>]: Props<AllowNull>[K];
+} & {[K in DefaultPropsKeys]: NonNullable<Props<AllowNull>[K]>};
+
+export type InputRef = AntInputRef;
+
+export interface Props<AllowNull extends boolean> extends ControlledFormValue<AllowNull extends true ? number | null : number> {
+    /** Whether `null` is allowed in `value` */
+    allowNull: AllowNull;
+    /** Clear button to clear value */
+    allowClear?: boolean;
+    /** Set number of decimal points for `value`. Important due to floating point precision issues  */
+    scale?: number; // Very important for non-integer, due to floating point precision issues
+    /** Minimum value allowed as input. Out of range values are discarded onBlur, and does not trigger onChange. */
+    min?: number;
+    /** Maximum value allowed as input. Out of range values are discarded onBlur, and does not trigger onChange. */
+    max?: number;
+    /** Whether the input field should be editable */
+    editable?: boolean;
+    /** Set the increment/decrement stepper display options */
+    stepperMode?: "none" | "always" | "hover";
+    /** Set the interval to increment/decrement with stepper */
+    step?: number;
+    /** Callback function to render value onBlur */
+    displayRenderer?: (value: number) => string;
+    /** Whether the input field is disabled */
+    disabled?: boolean;
+    /** Placeholder text to display when input field is empty */
+    placeholder?: string;
+    /** Additional className for input field */
+    className?: string;
+    /** Additional style for input field */
+    inputStyle?: React.CSSProperties;
+    /** Additional component to render after input field */
+    suffix?: React.ReactChild;
+    /** Additional component to render before input field */
+    prefix?: React.ReactChild;
+    /** Optional Input Ref */
+    inputRef?: React.RefObject<InputRef>;
+}
+
+interface State {
+    // Used to display editing data, which may be non-numeric.
+    // Only blur, or press Enter will trigger onChange.
+    editingValue: string;
+    isEditing: boolean;
+}
+
+export class NumberInput<AllowNull extends boolean> extends React.PureComponent<Props<AllowNull>, State> {
+    static displayName = "NumberInput";
+
+    static defaultProps: Pick<Props<any>, DefaultPropsKeys> = {
+        scale: 0,
+        min: -99_999_999,
+        max: 99_999_999,
+        editable: true,
+        stepperMode: "none",
+    };
+
+    static Percentage = NumberInputPercentage;
+
+    private inputRef = React.createRef<InputRef>();
+
+    constructor(props: PropsWithDefault<AllowNull>) {
+        super(props);
+        this.state = {editingValue: props.value !== null ? props.value.toFixed(props.scale) : "", isEditing: false};
+    }
+
+    componentDidUpdate(prevProps: PropsWithDefault<AllowNull>) {
+        const {value, max, min, scale, onChange} = this.typeSafeProps;
+        const {isEditing} = this.state;
+        if (!isEditing && value !== prevProps.value) {
+            this.setState({editingValue: value === null ? "" : truncate(value, scale).toString()});
+        }
+        const shouldCallOnChange = max !== prevProps.max || min !== prevProps.min || scale !== prevProps.scale;
+        if (shouldCallOnChange) {
+            value === null ? onChange(value) : onChange(clamp({value: truncate(value, scale), min, max}));
+        }
+    }
+
+    getStep = () => {
+        const {step, scale} = this.typeSafeProps;
+        if (step !== undefined) {
+            return step;
+        }
+        return truncate(10 ** (-1 * scale), scale);
+    };
+
+    triggerParentOnChangeIfValid = (uncheckedValue: string) => {
+        this.setState({editingValue: uncheckedValue});
+
+        const typeSafeProps = this.typeSafeProps;
+        const {onChange, scale, allowNull} = typeSafeProps;
+        const checkedValue = rectifyInputIfValid(uncheckedValue, typeSafeProps);
+        // if `null` is not allowed, `checkedValue` will be invalid
+        if (checkedValue === "@@INVALID") {
+            return;
+        }
+        const normalizedParentValue = typeSafeProps.value === null ? null : truncate(typeSafeProps.value, scale);
+        // Only call onChange if values are different
+        if (checkedValue !== normalizedParentValue) {
+            onChange(checkedValue);
+        }
+    };
+
+    stopPropagation = (event: React.MouseEvent) => event.stopPropagation();
+
+    onMinusClick = () => {
+        const {value: parentValue} = this.typeSafeProps;
+        const step = this.getStep();
+        const nextValue: number = parentValue === null ? 0 : parentValue - step; // parentValue is kept in sync with latest valid user input, safe to use the parentValue for stepping
+        this.triggerParentOnChangeIfValid(nextValue.toString()); // The value is checked excessively but it's better than having a unguarded class method
+    };
+
+    onAddClick = () => {
+        const {value: parentValue} = this.typeSafeProps;
+        const step = this.getStep();
+        const prevValue: number = parentValue === null ? 0 : parentValue + step; // parentValue is kept in sync with latest valid user input, safe to use the parentValue for stepping
+        this.triggerParentOnChangeIfValid(prevValue.toString()); // The value is checked excessively but it's better than having a unguarded class method
+    };
+
+    onInputFocus = () => {
+        const {value, scale} = this.typeSafeProps;
+        this.setState({isEditing: true, editingValue: value === null ? "" : truncate(value, scale).toString()});
+    };
+
+    onInputBlur = () => {
+        this.triggerParentOnChangeIfValid(this.state.editingValue);
+        this.setState({isEditing: false});
+    };
+
+    onInputChange = (newValue: string) => this.triggerParentOnChangeIfValid(newValue);
+
+    onInputPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            (this.props.inputRef || this.inputRef).current?.blur();
+        }
+    };
+
+    render() {
+        const {disabled, className, editable, stepperMode, placeholder, inputStyle, suffix, prefix, allowClear, inputRef} = this.typeSafeProps;
+        const {editingValue, isEditing} = this.state;
+
+        return (
+            <div className={classNames("g-number-input", `stepper-${stepperMode}`, {disabled}, className)} onClick={this.stopPropagation}>
+                <button type="button" className="minus" disabled={disabled || !canMinus({...this.typeSafeProps, step: this.getStep()})} onClick={this.onMinusClick}>
+                    &#65293;
+                </button>
+                <Input
+                    inputRef={inputRef || this.inputRef}
+                    style={inputStyle}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    value={isEditing ? editingValue : getDisplayValue(this.typeSafeProps)}
+                    readOnly={!editable}
+                    onFocus={this.onInputFocus}
+                    onBlur={this.onInputBlur}
+                    onChange={this.onInputChange}
+                    onKeyPress={this.onInputPress}
+                    suffix={suffix}
+                    prefix={prefix}
+                    inputMode="decimal"
+                    className="count-input"
+                    allowClear={allowClear}
+                />
+                <button type="button" className="add" disabled={disabled || !canAdd({...this.typeSafeProps, step: this.getStep()})} onClick={this.onAddClick}>
+                    &#xff0b;
+                </button>
+            </div>
+        );
+    }
+
+    private get typeSafeProps() {
+        // Use a less restrictive type here (allow null) for type inference in various places to work
+        return this.props as unknown as PropsWithDefault;
+    }
+}

package/src/core/NumberInput/util.ts

@@ -0,0 +1,55 @@
+export const truncate = (value: number, scale: number): number => {
+    return parseFloat(value.toFixed(scale));
+};
+
+export const clamp = (_: {value: number; min: number; max: number}): number => {
+    return Math.max(_.min, Math.min(_.max, _.value));
+};
+
+export const canAdd = (_: {value: number | null; step: number; max: number; scale: number}): boolean => {
+    if (_.value === null) {
+        return true;
+    } else {
+        const nextStep = truncate(_.value + _.step, _.scale);
+        return nextStep <= truncate(_.max, _.scale);
+    }
+};
+
+export const canMinus = (_: {value: number | null; step: number; min: number; scale: number}): boolean => {
+    if (_.value === null) {
+        return true;
+    } else {
+        const prevStep = truncate(_.value - _.step, _.scale);
+        return prevStep >= truncate(_.min, _.scale);
+    }
+};
+
+export const getDisplayValue = (_: {value: number | null; scale: number; displayRenderer?: (value: number) => string}): string => {
+    if (_.value === null) {
+        return "";
+    } else if (_.displayRenderer) {
+        return _.displayRenderer(truncate(_.value, _.scale));
+    } else {
+        return truncate(_.value, _.scale).toFixed(_.scale);
+    }
+};
+
+/**
+ * @param userInput Raw text from the input field, may or may not be convertible to `null` or a valid number
+ * @param config    Defines the range and scale of a valid number, and if `null` is allowed to be returned
+ * @returns         A number that is ensured to be valid and is not `NaN`; or `null` if `allowNull` is true and `userInput` is an empty string; or `"@@INVALID"` if userInput cannot be converted
+ */
+export const rectifyInputIfValid = (userInput: string, config: {min: number; max: number; scale: number; allowNull: boolean}): null | number | "@@INVALID" => {
+    const numOrNan = Number(userInput);
+    if (userInput === "") {
+        return config.allowNull ? null : "@@INVALID";
+    } else if (isNaN(numOrNan)) {
+        return "@@INVALID";
+    } else {
+        return clamp({
+            value: truncate(numOrNan, config.scale),
+            min: config.min,
+            max: config.max,
+        });
+    }
+};

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.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.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.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.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};