@pinnacle0/web-ui 0.3.22 → 0.3.23

package/src/core/MutableTable/index.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import type {TableColumns} from "../Table";
+import {Table} from "../Table";
+import type {PickOptional} from "../../internal/type";
+import {i18n} from "../../internal/i18n/core";
+import "./index.less";
+
+/**
+ * A MutableTable is a table supporting add/minus rows.
+ * The table should contain at least 1 row.
+ * If props.nextRow is undefined, the (+) button should be disabled.
+ *
+ * Attention:
+ * dataSource must not be empty array.
+ */
+
+export interface SequenceColumnConfig {
+    title: string;
+    renderer: (index: number) => string;
+    width: number;
+    align: "left" | "center" | "right";
+}
+
+export interface Props<RowType extends object> {
+    dataSource: RowType[];
+    columns: TableColumns<RowType>;
+    onChange?: (values: RowType[]) => void;
+    onRowCountChange?: (type: "add-row" | "remove-row") => void;
+    nextRow?: RowType | true; // If true, onRowCountChange will be triggered when + is clicked, instead of onChange
+    fixedRowCount?: number;
+    shouldRenderIfUpdate?: any;
+    sequenceColumn?: Partial<SequenceColumnConfig> | "default";
+    scrollX?: "max-content" | "none" | number;
+    scrollY?: number;
+    bordered?: boolean;
+    disabled?: boolean;
+}
+
+export class MutableTable<RowType extends object> extends React.PureComponent<Props<RowType>> {
+    static displayName = "MutableTable";
+
+    static defaultProps: PickOptional<Props<any>> = {
+        scrollX: "none",
+    };
+
+    private readonly ref: React.RefObject<HTMLDivElement>;
+    private readonly defaultSequenceColumn: SequenceColumnConfig = {
+        title: i18n().sequence,
+        renderer: (index: number) => (index + 1).toString(),
+        width: 90,
+        align: "center",
+    };
+
+    constructor(props: Props<RowType>) {
+        super(props);
+        this.ref = React.createRef();
+    }
+
+    componentDidUpdate(prevProps: Props<RowType>) {
+        if (prevProps.dataSource.length < this.props.dataSource.length && Number(this.props.scrollY) > 0) {
+            const tableContainerRef = this.ref.current!.querySelector(".ant-table-body");
+            if (tableContainerRef) {
+                tableContainerRef.scrollTop = tableContainerRef.scrollHeight;
+            }
+        }
+    }
+
+    getColumns = (): TableColumns<RowType> => {
+        const {columns, dataSource, nextRow, fixedRowCount, scrollX, sequenceColumn, disabled} = this.props;
+        const newColumns = [...columns];
+        const t = i18n();
+        if (sequenceColumn) {
+            const finalSequenceColumn = sequenceColumn === "default" ? this.defaultSequenceColumn : {...this.defaultSequenceColumn, ...sequenceColumn};
+            newColumns.unshift({
+                title: finalSequenceColumn.title,
+                width: finalSequenceColumn.width,
+                align: finalSequenceColumn.align,
+                fixed: scrollX === "none" ? undefined : "left",
+                renderData: (_, index) => finalSequenceColumn.renderer(index),
+            });
+        }
+        newColumns.push({
+            title: t.action,
+            width: 100,
+            align: "center",
+            fixed: scrollX === "none" ? undefined : "right",
+            renderData: (_, index) => {
+                const dataSourceLength = dataSource.length;
+                return (
+                    <div className="operation">
+                        {(!fixedRowCount || fixedRowCount <= index) && (
+                            <button type="button" disabled={disabled || dataSourceLength === 1} onClick={() => this.onDeleteRow(index)}>
+                                &#65293;
+                            </button>
+                        )}
+                        {index === dataSourceLength - 1 && (
+                            <button disabled={disabled || nextRow === undefined} type="button" onClick={() => this.onAddRow(nextRow!)}>
+                                &#xff0b;
+                            </button>
+                        )}
+                    </div>
+                );
+            },
+        });
+        return newColumns;
+    };
+
+    onDeleteRow = (index: number) => {
+        const {dataSource, onChange, onRowCountChange} = this.props;
+        if (onRowCountChange) {
+            onRowCountChange("remove-row");
+        }
+
+        if (onChange) {
+            const newData = [...dataSource];
+            newData.splice(index, 1);
+            onChange(newData);
+        }
+    };
+
+    onAddRow = (nextRow: RowType | true) => {
+        const {dataSource, onChange, onRowCountChange} = this.props;
+        if (onRowCountChange) {
+            onRowCountChange("add-row");
+        }
+
+        if (nextRow !== true && onChange) {
+            const newData = [...dataSource];
+            newData.push(nextRow);
+            onChange(newData);
+        }
+    };
+
+    render() {
+        const {dataSource, shouldRenderIfUpdate, scrollX, scrollY, bordered} = this.props;
+        return (
+            <div ref={this.ref}>
+                <Table
+                    className="g-mutable-table"
+                    scrollX={scrollX}
+                    scrollY={scrollY}
+                    rowKey="index"
+                    columns={this.getColumns()}
+                    dataSource={dataSource}
+                    shouldRenderIfUpdate={shouldRenderIfUpdate}
+                    bordered={bordered}
+                />
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,105 @@
+.g-number-input {
+    user-select: none;
+    display: inline-block;
+
+    .ant-input-affix-wrapper,
+    .ant-input-group-wrapper {
+        width: initial;
+        vertical-align: middle;
+        padding: 0 10px;
+
+        > input {
+            height: 30px;
+        }
+    }
+
+    input {
+        vertical-align: middle;
+        display: inline-block;
+        border-radius: 0;
+        height: 32px;
+        background-color: transparent;
+        outline: none;
+        text-align: center;
+        font-size: 14px;
+        width: 90px;
+        padding: 4px 11px;
+        border: 1px solid #ccc;
+
+        &[disabled] {
+            cursor: not-allowed;
+            color: #b6bad1;
+            background-color: #ecedf3;
+        }
+    }
+
+    button {
+        vertical-align: middle;
+        display: inline-block;
+        width: 30px;
+        height: 32px;
+        line-height: 30px;
+        font-size: 20px;
+        text-align: center;
+        border: 1px solid #ccc;
+        padding: 0;
+
+        &:hover {
+            cursor: pointer;
+            background-color: #202c3a;
+            border-color: #202c3a;
+            color: #fff;
+        }
+
+        &[disabled] {
+            background: #eee;
+            border-color: #eee;
+            color: #ccc;
+
+            &:hover {
+                background: #eee;
+                cursor: not-allowed;
+            }
+        }
+
+        &.minus {
+            border-right: none;
+            border-radius: 5px 0 0 5px;
+        }
+
+        &.add {
+            border-left: none;
+            border-radius: 0 5px 5px 0;
+        }
+    }
+
+    &.stepper-none {
+        input {
+            border-radius: 2px;
+            text-align: left;
+        }
+
+        button {
+            display: none;
+        }
+    }
+
+    &.stepper-hover.disabled {
+        // In hover mode, disabled means no stepper
+        button {
+            display: none;
+        }
+    }
+
+    &.stepper-hover {
+        button {
+            opacity: 0;
+        }
+
+        &:hover {
+            button {
+                opacity: 1;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,29 @@
+.g-overflowable-text {
+    position: relative;
+
+    > .wrap-text {
+        &,
+        * {
+            max-width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            overflow-wrap: normal;
+            white-space: nowrap;
+            display: inline-block;
+            vertical-align: middle;
+            line-height: 1.5;
+        }
+    }
+
+    > .shadow-text {
+        position: fixed;
+        visibility: hidden;
+        z-index: -10000;
+        min-width: 0;
+
+        * {
+            white-space: nowrap;
+            display: inline-block;
+        }
+    }
+}