@servicetitan/form 14.3.0 → 16.0.2

package/src/original-number-input/ordinal-number-input.tsx

@@ -0,0 +1,111 @@
+import { Input, InputProps } from '@servicetitan/design-system';
+import { action, observable, makeObservable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Component, ChangeEvent } from 'react';
+
+export interface OrdinalNumberInputProps extends Omit<InputProps, 'onChange'> {
+    min: number;
+    max: number;
+    value?: number;
+    onChange?(value?: number): void;
+}
+
+@observer
+export class OrdinalNumberInput extends Component<OrdinalNumberInputProps> {
+    @observable hasFocus = false;
+
+    constructor(props: OrdinalNumberInputProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    render() {
+        const { min, max, value, onChange, ...props } = this.props;
+
+        return (
+            <Input
+                placeholder={this.getPlaceholder()}
+                {...props}
+                value={this.getDisplayValue()}
+                onFocus={this.handleFocus}
+                onBlur={this.handleBlur}
+                onChange={this.handleChange}
+            />
+        );
+    }
+
+    @action private handleFocus = () => (this.hasFocus = true);
+    @action private handleBlur = () => (this.hasFocus = false);
+
+    private handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        const parsed = parseIntIntoRange(e.currentTarget.value, this.props.min, this.props.max);
+        if (this.props.onChange) {
+            this.props.onChange(parsed);
+        }
+    };
+
+    private getPlaceholder() {
+        return `${this.props.min}‒${this.props.max}`;
+    }
+
+    private getDisplayValue() {
+        const value = this.props.value;
+        if (typeof value !== 'number') {
+            return '';
+        }
+        return this.hasFocus ? value.toString() : ordinalString(value);
+    }
+}
+
+export function parseIntIntoRange(input: string, min: number, max: number) {
+    let parsed = parseInt(input, 10);
+    if (Number.isNaN(parsed)) {
+        return undefined;
+    }
+    if (parsed < min) {
+        parsed = min;
+    } else if (parsed > max) {
+        parsed = max;
+    }
+    return parsed;
+}
+
+export function ordinalString(num: number): string {
+    switch (num % 100) {
+        case 11:
+        case 12:
+        case 13:
+            return num.toString() + 'th';
+        default:
+            switch (num % 10) {
+                case 1:
+                    return num.toString() + 'st';
+                case 2:
+                    return num.toString() + 'nd';
+                case 3:
+                    return num.toString() + 'rd';
+                default:
+                    return num.toString() + 'th';
+            }
+    }
+}
+
+export function ordinalSuffix(num: number): string {
+    switch (num % 100) {
+        case 11:
+        case 12:
+        case 13:
+            return 'th';
+        default:
+            switch (num % 10) {
+                case 1:
+                    return 'st';
+                case 2:
+                    return 'nd';
+                case 3:
+                    return 'rd';
+                default:
+                    return 'th';
+            }
+    }
+}

package/src/phone-number-input/index.ts

@@ -0,0 +1 @@
+export * from './phone-number-input';

package/src/phone-number-input/phone-number-input.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import InputMask from 'react-input-mask';
+
+import { Form, FormInputProps } from '@servicetitan/design-system';
+
+export interface PhoneNumberInputProps extends FormInputProps {
+    sip?: boolean;
+}
+
+export const PhoneNumberInput = forwardRef<HTMLInputElement, PhoneNumberInputProps>(
+    ({ sip, ...props }, ref) =>
+        sip ? (
+            <Form.Input {...props} ref={ref} />
+        ) : (
+            <InputMask maskChar={null} mask="(999) 999-9999" {...props}>
+                {() => <Form.Input ref={ref} {...props} />}
+            </InputMask>
+        )
+);