@pinnacle0/web-ui 0.3.35 → 0.3.36

package/src/admin/AdminPermissionSelector.tsx

@@ -0,0 +1,299 @@
+import React from "react";
+import {Popover} from "../core/Popover";
+import {Checkbox} from "../core/Checkbox";
+import {Progress} from "../core/Progress";
+import {Descriptions} from "../core/Descriptions";
+import type {NavigationGroupItem, NavigationModuleItem} from "../util/AdminNavigatorBase";
+import {ArrayUtil} from "../internal/ArrayUtil";
+import {i18n} from "../internal/i18n/admin";
+
+export interface Props<Feature, Field = undefined> {
+    navigationGroups: Array<NavigationGroupItem<Feature, Field>>;
+    boundPermissionsCalculator?: (permissions: Feature) => Feature[];
+    featureValue: Feature[];
+    onFeatureChange: (value: Feature[]) => void;
+    fieldValue?: Field[];
+    onFieldChange?: (value: Field[]) => void;
+    featurePermissionTranslator: (permission: Feature) => string;
+    fieldPermissionTranslator?: (permission: Field) => string;
+    editable: boolean;
+    extraPermissions?: Feature[]; // Used for special permissions not in NavigationGroup
+    moduleNameWidth?: number;
+    alwaysExpand?: boolean;
+}
+
+export class AdminPermissionSelector<Feature extends string, Field extends string = never> extends React.PureComponent<Props<Feature, Field>> {
+    static displayName = "AdminPermissionSelector";
+
+    private readonly navigationModuleItemContainerStyle: React.CSSProperties = {display: "flex"};
+    private readonly progressStyle: React.CSSProperties = {width: "100%", lineHeight: "32px"};
+    private readonly permissionCheckboxStyle: React.CSSProperties = {marginRight: 5, marginLeft: 0};
+    private readonly popoverStyle: React.CSSProperties = {width: 450};
+    private readonly descriptionItemStyle: React.CSSProperties = {minWidth: 450};
+    private readonly checkboxStyle: React.CSSProperties = {
+        width: this.props.moduleNameWidth || 130,
+        height: 32,
+        lineHeight: "32px",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+    };
+
+    triggerChangeEvent = (changedPermissions: Array<Feature | Field>, isChecked: boolean, isFieldPermission: boolean) => {
+        const {onFeatureChange, onFieldChange, fieldValue, featureValue, editable} = this.props;
+
+        const getNewPermissions = <T extends Feature | Field>(isChecked: boolean, value: T[]) => {
+            if (!value) {
+                return [];
+            }
+
+            return isChecked ? [...new Set([...value, ...(changedPermissions as T[])])] : value.filter(_ => !(changedPermissions as T[]).includes(_));
+        };
+
+        if (!editable) {
+            return;
+        }
+
+        if (!isFieldPermission) {
+            onFeatureChange(getNewPermissions(isChecked, featureValue));
+            return;
+        }
+
+        if (fieldValue && onFieldChange) {
+            onFieldChange(getNewPermissions(isChecked, fieldValue));
+        }
+    };
+
+    getNavigationModuleFeaturePermissions = (module: NavigationModuleItem<Feature, Field>): Feature[] => {
+        const permissions = module.featurePermissions;
+        if (permissions) {
+            return [...permissions];
+        }
+        return [];
+    };
+
+    getNavigationModuleFieldPermission = (module: NavigationModuleItem<Feature, Field>): Field[] => {
+        const permissions = module.fieldPermissions;
+        if (permissions) {
+            return [...permissions];
+        }
+        return [];
+    };
+
+    getNavigationGroupFeaturePermissions = (groupItem: NavigationGroupItem<Feature, Field>): Feature[] => {
+        return groupItem.modules.flatMap(this.getNavigationModuleFeaturePermissions);
+    };
+
+    getNavigationGroupFieldPermissions = (groupItem: NavigationGroupItem<Feature, Field>): Field[] => {
+        return groupItem.modules.flatMap(this.getNavigationModuleFieldPermission);
+    };
+
+    recursivelyGetBoundPermissions(permission: Feature | Field, includeSelf = true) {
+        const {boundPermissionsCalculator} = this.props;
+
+        const extractPermissions = (feature: Feature): Feature[] => {
+            const childPermissions = boundPermissionsCalculator?.(feature as Feature) || [];
+            return [...childPermissions, ...childPermissions.flatMap(extractPermissions)];
+        };
+
+        const permissions = extractPermissions(permission as Feature);
+
+        if (includeSelf) {
+            permissions.unshift(permission as Feature);
+        }
+
+        return [...new Set(permissions)];
+    }
+
+    onPermissionChange = (checked: boolean, permission: Feature | Field, isFieldPermission: boolean) => {
+        const {boundPermissionsCalculator} = this.props;
+        const changedPermissions: Array<Feature | Field> = (() => {
+            if (checked && boundPermissionsCalculator) {
+                // Also trigger bound permission checked event
+                return isFieldPermission ? [permission] : this.recursivelyGetBoundPermissions(permission);
+            }
+            return [permission];
+        })();
+
+        this.triggerChangeEvent(changedPermissions, checked, isFieldPermission);
+    };
+
+    renderExtraPermission = (extraPermissions: Feature[]) => {
+        const t = i18n();
+        const {featureValue, featurePermissionTranslator} = this.props;
+        const enabledPercentage = ArrayUtil.intersectionPercentage(extraPermissions, featureValue);
+
+        const titleNode = (
+            <Checkbox value={enabledPercentage > 0} indeterminate={enabledPercentage > 0 && enabledPercentage < 100} onChange={value => this.triggerChangeEvent(extraPermissions, value, false)}>
+                {t.extraPermission}
+            </Checkbox>
+        );
+
+        return (
+            <Descriptions>
+                <Descriptions.Item label={titleNode}>
+                    {extraPermissions.map(_ => (
+                        <Checkbox key={_} onChange={value => this.onPermissionChange(value, _, false)} value={featureValue.includes(_)} style={this.permissionCheckboxStyle}>
+                            {featurePermissionTranslator(_)}
+                        </Checkbox>
+                    ))}
+                </Descriptions.Item>
+            </Descriptions>
+        );
+    };
+
+    /**
+     *
+     * @param permissions
+     * type here is not accurate
+     * Feature[] | Field[] will cause TS error
+     * https://github.com/microsoft/TypeScript/issues/7294
+     * https://github.com/microsoft/TypeScript/issues/36390
+     */
+    renderPermissionGroup = (permissions: (Feature | Field)[], isFieldPermission: boolean) => {
+        if (permissions.length < 1) {
+            return null;
+        }
+
+        const t = i18n();
+        const {featureValue, fieldValue, editable, boundPermissionsCalculator, featurePermissionTranslator, fieldPermissionTranslator} = this.props;
+        const enabledPercentage = isFieldPermission ? ArrayUtil.intersectionPercentage(permissions as Field[], fieldValue!) : ArrayUtil.intersectionPercentage(permissions as Feature[], featureValue);
+
+        const titleNode = editable ? (
+            <Checkbox
+                value={enabledPercentage > 0}
+                indeterminate={enabledPercentage > 0 && enabledPercentage < 100}
+                onChange={value => this.triggerChangeEvent(isFieldPermission ? permissions : permissions.flatMap(_ => this.recursivelyGetBoundPermissions(_)), value, isFieldPermission)}
+            >
+                {isFieldPermission ? t.fieldPermission : t.featurePermission}
+            </Checkbox>
+        ) : isFieldPermission ? (
+            t.fieldPermission
+        ) : (
+            t.featurePermission
+        );
+
+        return (
+            <Descriptions.Item label={titleNode}>
+                {permissions.map(permission => {
+                    const isDisabled = !editable || (!isFieldPermission && featureValue.some(_ => boundPermissionsCalculator?.(_).includes(permission as Feature)));
+                    return (
+                        <Checkbox
+                            key={permission}
+                            disabled={isDisabled}
+                            onChange={value => this.onPermissionChange(value, permission, isFieldPermission)}
+                            value={isFieldPermission ? fieldValue?.includes(permission as Field) || false : featureValue.includes(permission as Feature)}
+                            style={this.permissionCheckboxStyle}
+                        >
+                            {isFieldPermission ? fieldPermissionTranslator?.(permission as Field) : featurePermissionTranslator(permission as Feature)}
+                        </Checkbox>
+                    );
+                })}
+            </Descriptions.Item>
+        );
+    };
+
+    renderNavigationModule = (module: NavigationModuleItem<Feature, Field>) => {
+        const {featureValue, fieldValue, alwaysExpand} = this.props;
+        const featurePermissions = module.featurePermissions;
+        const fieldPermission = module.fieldPermissions;
+
+        const hasFeaturePermissions = featurePermissions?.length;
+        const hasFieldPermissions = fieldPermission?.length;
+
+        if (!hasFeaturePermissions && !hasFieldPermissions) {
+            return null;
+        }
+
+        const moduleFeaturePermissions = this.getNavigationModuleFeaturePermissions(module);
+        const moduleFieldPermissions = this.getNavigationModuleFieldPermission(module);
+        const enabledPercentage = ArrayUtil.intersectionPercentage([...moduleFeaturePermissions, ...moduleFieldPermissions], [...featureValue, ...(fieldValue || [])]);
+
+        const popover = (
+            <Descriptions column={1}>
+                {featurePermissions ? this.renderPermissionGroup(featurePermissions, false) : null}
+                {fieldValue && fieldPermission ? this.renderPermissionGroup(fieldPermission, true) : null}
+            </Descriptions>
+        );
+
+        const navigationModuleItemContainer = (
+            <div style={this.navigationModuleItemContainerStyle}>
+                <Checkbox
+                    value={enabledPercentage > 0}
+                    indeterminate={enabledPercentage > 0 && enabledPercentage < 100}
+                    onChange={value => {
+                        this.triggerChangeEvent(moduleFieldPermissions, value, true);
+                        this.triggerChangeEvent(
+                            moduleFeaturePermissions.flatMap(_ => this.recursivelyGetBoundPermissions(_)),
+                            value,
+                            false
+                        );
+                    }}
+                    style={this.checkboxStyle}
+                >
+                    {module.title}
+                </Checkbox>
+                <Progress style={this.progressStyle} percent={enabledPercentage} size="small" showInfo={false} />
+            </div>
+        );
+
+        if (alwaysExpand) {
+            return (
+                <div key={module.title}>
+                    {navigationModuleItemContainer}
+                    {popover}
+                </div>
+            );
+        }
+
+        return (
+            <Popover overlayClassName="permission-group" placement="left" overlayStyle={this.popoverStyle} autoAdjustOverflow key={module.title} content={popover}>
+                {navigationModuleItemContainer}
+            </Popover>
+        );
+    };
+
+    renderNavigationGroup = (groupItem: NavigationGroupItem<Feature, Field>) => {
+        const {featureValue, fieldValue} = this.props;
+        const modulesWithSelectablePermissions = groupItem.modules.map(this.renderNavigationModule).filter(_ => _);
+
+        if (modulesWithSelectablePermissions.length === 0) {
+            return;
+        }
+
+        const groupFeaturePermissions = this.getNavigationGroupFeaturePermissions(groupItem);
+        const groupFieldPermissions = this.getNavigationGroupFieldPermissions(groupItem);
+        const enabledPercentage = ArrayUtil.intersectionPercentage([...groupFeaturePermissions, ...groupFieldPermissions], [...featureValue, ...(fieldValue || [])]);
+
+        const titleNode = (
+            <Checkbox
+                value={enabledPercentage > 0}
+                indeterminate={enabledPercentage > 0 && enabledPercentage < 100}
+                onChange={value => {
+                    this.triggerChangeEvent(groupFeaturePermissions, value, false);
+                    this.triggerChangeEvent(groupFieldPermissions, value, true);
+                }}
+            >
+                {groupItem.title}
+            </Checkbox>
+        );
+
+        return (
+            <Descriptions key={groupItem.title}>
+                <Descriptions.Item style={this.descriptionItemStyle} label={titleNode}>
+                    {modulesWithSelectablePermissions}
+                </Descriptions.Item>
+            </Descriptions>
+        );
+    };
+
+    render() {
+        const {navigationGroups, extraPermissions} = this.props;
+        return (
+            <div>
+                {navigationGroups.map(this.renderNavigationGroup)}
+                {extraPermissions && this.renderExtraPermission(extraPermissions)}
+            </div>
+        );
+    }
+}

package/src/admin/RichEditor/index.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import type {ControlType, EditorState, ImageControlType, MediaType} from "braft-editor";
+import BraftEditor from "braft-editor";
+import {LocaleUtil} from "../../util/LocaleUtil";
+import type {ControlledFormValue} from "../../internal/type";
+import type {UploaderProps} from "../../util/UploadUtil/type";
+import "braft-editor/dist/index.css";
+import "./index.less";
+import {UploadUtil} from "../../util/UploadUtil";
+
+/**
+ * onChange/value is of the HTML content.
+ * If the HTML content is only empty rows (e.g: pure <p/>), onChange also emit "".
+ *
+ * CAVEAT:
+ * This component is storing the editor state internally (un-controlled).
+ * The props.value only represents the initial value.
+ * Because createEditorState must only be created only ONCE, in the constructor.
+ * Therefore, we cannot create new editor state every time based on current props.value.
+ *
+ * Ref: https://www.yuque.com/braft-editor/be/lzwpnr#1bbbb204
+ */
+export interface Props<SuccessResponseType, ErrorResponseType> extends ControlledFormValue<string>, UploaderProps<SuccessResponseType, ErrorResponseType> {
+    imageURLParser: (response: SuccessResponseType) => string;
+}
+
+interface State {
+    editorState: EditorState;
+}
+
+export class RichEditor<SuccessResponseType, ErrorResponseType> extends React.PureComponent<Props<SuccessResponseType, ErrorResponseType>, State> {
+    static displayName = "RichEditor";
+
+    // API reference: https://www.yuque.com/braft-editor/be/gz44tn
+    private readonly editorControls: ControlType[] = [
+        "font-size",
+        "text-align",
+        "text-color",
+        "bold",
+        "italic",
+        "underline",
+        "strike-through",
+        "separator",
+        "list-ul",
+        "list-ol",
+        "separator",
+        "link",
+        "media",
+        "separator",
+        "remove-styles",
+    ];
+    private readonly imageControls: ImageControlType[] = [];
+    private readonly mediaConfig: MediaType = {
+        pasteImage: false,
+        accepts: {
+            image: "image/png,image/jpeg,image/gif,image/svg",
+            video: false,
+            audio: false,
+        },
+        externals: {
+            image: false,
+            audio: false,
+            video: false,
+            embed: false,
+        },
+        uploadFn: params => {
+            const {formField, uploadURL, imageURLParser, onUploadFailure, onUploadSuccess} = this.props;
+            const {file, success, progress} = params;
+
+            UploadUtil.createRequest({
+                uploadURL,
+                file,
+                formField,
+                onSuccess: (logEntry, response) => {
+                    const imageURL = imageURLParser(response);
+                    success({
+                        url: imageURL,
+                        meta: {
+                            id: imageURL,
+                            title: "",
+                            alt: "image",
+                            // Below are for video settings, not available here
+                            loop: true,
+                            autoPlay: true,
+                            controls: true,
+                            poster: "",
+                        },
+                    });
+                    onUploadSuccess?.(logEntry, response);
+                },
+                onError: onUploadFailure,
+                onProgress: progress,
+            });
+        },
+    };
+
+    constructor(props: Props<SuccessResponseType, ErrorResponseType>) {
+        super(props);
+        this.state = {editorState: BraftEditor.createEditorState(this.props.value)};
+    }
+
+    onChange = (editorState: EditorState) => {
+        this.setState({editorState});
+        const {onChange} = this.props;
+        const textContent = editorState.toText().trim();
+        onChange(textContent === "" ? "" : editorState.toHTML());
+    };
+
+    render() {
+        const {editorState} = this.state;
+        return (
+            <BraftEditor
+                language={LocaleUtil.current()}
+                controls={this.editorControls}
+                media={this.mediaConfig}
+                imageControls={this.imageControls}
+                value={editorState}
+                stripPastedStyles
+                onChange={this.onChange}
+            />
+        );
+    }
+}

package/src/core/Amount/AmountPercentage.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import type {Props as AmountProps} from "./index";
+import {Amount} from "./index";
+
+export interface Props extends Omit<AmountProps, "postfix" | "scale" | "value"> {
+    /**
+     * Value of display amount in decimal, e.g: 0.2 for 20%.
+     */
+    value: number | null | undefined;
+    /**
+     * Number of decimal points used for percentage values.
+     *
+     * 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;
+}
+
+export class AmountPercentage extends React.PureComponent<Props> {
+    static displayName = "AmountPercentage";
+
+    render() {
+        const {percentageScale, value, ...restProps} = this.props;
+        const percentageValue = value !== null && value !== undefined ? value * 100 : value;
+        return <Amount value={percentageValue} scale={percentageScale} postfix="%" {...restProps} />;
+    }
+}

package/src/core/Amount/index.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import {classNames} from "../../util/ClassNames";
+import type {PickOptional} from "../../internal/type";
+import {NumberUtil} from "../../internal/NumberUtil";
+import {AmountPercentage} from "./AmountPercentage";
+import "./index.less";
+
+export interface Props {
+    value: number | null | undefined;
+    scale: number; // Range [0, 10]
+    rounding?: "floor" | "ceil" | "round";
+    plusSignForPositive?: boolean;
+    thousandSplitter?: boolean;
+    nullText?: string;
+    prefix?: string;
+    postfix?: string;
+    colorScheme?: "green+red-" | "highlight" | "highlight+" | "green-red+";
+    bold?: boolean;
+    underline?: boolean;
+    del?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export class Amount extends React.PureComponent<Props> {
+    static displayName = "Amount";
+    static defaultProps: PickOptional<Props> = {
+        rounding: "round",
+        thousandSplitter: true,
+        nullText: "-",
+    };
+
+    static Percentage = AmountPercentage;
+
+    render() {
+        const {value, scale, rounding, thousandSplitter, plusSignForPositive, prefix, postfix, colorScheme, bold, del, underline, style, className, nullText} = this.props;
+        if (value !== null && value !== undefined && Number.isFinite(value)) {
+            const roundedString = NumberUtil.roundingToString(value, rounding!, scale);
+            const parts = roundedString.split(".");
+            if (thousandSplitter) {
+                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+            }
+            if (plusSignForPositive && value > 0) {
+                parts[0] = "+" + parts[0];
+            }
+
+            const fullClassNames = classNames("g-amount", {bold, del, underline}, className, {
+                "color-green": (colorScheme === "green+red-" && value > 0) || (colorScheme === "green-red+" && value < 0),
+                "color-red": (colorScheme === "green+red-" && value < 0) || (colorScheme === "green-red+" && value > 0),
+                "color-highlight": colorScheme === "highlight" || (colorScheme === "highlight+" && value > 0),
+            });
+
+            return (
+                <div className={fullClassNames} style={style}>
+                    {prefix && <div className="prefix">{prefix}</div>}
+                    <div className="digits">
+                        {parts[0]}
+                        {parts[1] && (
+                            <React.Fragment>
+                                .<small>{parts[1]}</small>
+                            </React.Fragment>
+                        )}
+                    </div>
+                    {postfix && <div className="postfix">{postfix}</div>}
+                </div>
+            );
+        } else {
+            return <span className={classNames("g-amount", "null-text", className)}>{nullText}</span>;
+        }
+    }
+}

package/src/core/AmountConditionInput.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import {NumberInput} from "./NumberInput";
+import {Input} from "./Input";
+import {EnumSelect} from "./EnumSelect";
+import type {ControlledFormValue} from "../internal/type";
+
+export enum Operator {
+    GREATER_THAN = "GREATER_THAN",
+    GREATER_EQUAL = "GREATER_EQUAL",
+    LESS_THAN = "LESS_THAN",
+    LESS_EQUAL = "LESS_EQUAL",
+    EQUALS = "EQUALS",
+    NOT_EQUALS = "NOT_EQUALS",
+}
+
+export interface AmountConditionValue {
+    condition: Operator;
+    amount: number | null;
+}
+
+export interface Props extends ControlledFormValue<AmountConditionValue> {
+    scale: number;
+    operators?: Operator[];
+}
+
+export class AmountConditionInput extends React.PureComponent<Props> {
+    static displayName = "AmountConditionInput";
+
+    private readonly operators: Operator[] = this.props.operators || [Operator.GREATER_THAN, Operator.GREATER_EQUAL, Operator.LESS_THAN, Operator.LESS_EQUAL, Operator.EQUALS];
+    private readonly selectStyle: React.CSSProperties = {width: 55};
+    private readonly inputStyle: React.CSSProperties = {width: 180, borderTopLeftRadius: 0, borderBottomLeftRadius: 0};
+
+    operatorTranslator = (value: Operator): string => {
+        switch (value) {
+            case Operator.GREATER_THAN:
+                return ">";
+            case Operator.GREATER_EQUAL:
+                return "≥";
+            case Operator.LESS_THAN:
+                return "<";
+            case Operator.LESS_EQUAL:
+                return "≤";
+            case Operator.EQUALS:
+                return "=";
+            case Operator.NOT_EQUALS:
+                return "≠";
+        }
+    };
+
+    onConditionChange = (value: Operator) => this.props.onChange({condition: value, amount: this.props.value.amount});
+
+    onAmountChange = (value: number | null) => this.props.onChange({condition: this.props.value.condition, amount: value});
+
+    render() {
+        const {scale, value} = this.props;
+        return (
+            <Input.Group compact>
+                <EnumSelect value={value.condition} onChange={this.onConditionChange} translator={this.operatorTranslator} list={this.operators} style={this.selectStyle} />
+                <NumberInput allowNull scale={scale} value={value.amount} onChange={this.onAmountChange} inputStyle={this.inputStyle} />
+            </Input.Group>
+        );
+    }
+}

package/src/core/AmountRangeInput.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {NumberInput} from "./NumberInput";
+import {Input} from "./Input";
+import type {ControlledFormValue, PickOptional} from "../internal/type";
+import {i18n} from "../internal/i18n/core";
+
+export type AmountRangeValue<T extends boolean> = T extends true ? [number | null, number | null] : [number, number];
+
+export interface Props<T extends boolean> extends ControlledFormValue<AmountRangeValue<T>> {
+    allowNull: T;
+    scale?: number;
+    disabled?: boolean;
+    min?: number;
+    shouldNotEqual?: true;
+    style?: React.CSSProperties;
+    inputStyle?: React.CSSProperties;
+}
+
+export class AmountRangeInput<T extends boolean> extends React.PureComponent<Props<T>> {
+    static displayName = "AmountRangeInput";
+
+    static defaultProps: PickOptional<Props<any>> = {
+        scale: 2,
+        min: 0,
+    };
+
+    private readonly minInputStyle: React.CSSProperties = {borderTopRightRadius: 0, borderBottomRightRadius: 0, width: 80, textAlign: "right"};
+    private readonly maxInputStyle: React.CSSProperties = {borderTopLeftRadius: 0, borderBottomLeftRadius: 0, width: 80, borderLeftWidth: 0, textAlign: "left"};
+    private readonly connectorStyle: React.CSSProperties = {width: 30, borderLeftWidth: 0, borderRightWidth: 0, backgroundColor: "#fff", pointerEvents: "none"};
+
+    onMinAmountChange = (value: number | null) => this.props.onChange([value, this.props.value[1]] as any);
+
+    onMaxAmountChange = (value: number | null) => this.props.onChange([this.props.value[0], value] as any);
+
+    onConnectorInputChange = () => {};
+
+    render() {
+        const {value, scale, disabled, min, shouldNotEqual, allowNull, style, inputStyle} = this.props;
+        const t = i18n();
+        return (
+            <Input.Group compact style={style}>
+                <NumberInput
+                    disabled={disabled}
+                    allowNull={allowNull!}
+                    min={min}
+                    scale={scale}
+                    placeholder={t.minimum}
+                    value={value[0] as any}
+                    onChange={this.onMinAmountChange}
+                    inputStyle={{...this.minInputStyle, ...inputStyle}}
+                />
+                <Input style={this.connectorStyle} disabled value="~" onChange={this.onConnectorInputChange} />
+                <NumberInput
+                    disabled={disabled}
+                    allowNull={allowNull!}
+                    min={value[0] !== null ? (shouldNotEqual ? value[0] + 1 : value[0]) : 0}
+                    scale={scale}
+                    placeholder={t.maximum}
+                    value={value[1] as any}
+                    onChange={this.onMaxAmountChange}
+                    inputStyle={{...this.maxInputStyle, ...inputStyle}}
+                />
+            </Input.Group>
+        );
+    }
+}