@pinnacle0/web-ui 0.3.23 → 0.3.26

package/src/core/MutableTable/index.tsx

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

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

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

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

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

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