|
- import * as React from 'react';
- import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
-
- export type PhoneNumberInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'style'> & {
- /**
- * Short textual description indicating the nature of the component's value.
- */
- label?: React.ReactNode,
- /**
- * Short textual description as guidelines for valid input values.
- */
- hint?: React.ReactNode,
- /**
- * Size of the component.
- */
- size?: TextControlBase.TextControlSize,
- /**
- * Additional description, usually graphical, indicating the nature of the component's value.
- */
- indicator?: React.ReactNode,
- /**
- * Should the component display a border?
- */
- border?: boolean,
- /**
- * Should the component occupy the whole width of its parent?
- */
- block?: boolean,
- /**
- * Style of the component.
- */
- style?: TextControlBase.TextControlStyle,
- /**
- * Is the label hidden?
- */
- hiddenLabel?: boolean,
- }
-
- /**
- * Component for inputting phone number values.
- */
- export const PhoneNumberInput = React.forwardRef<HTMLInputElement, PhoneNumberInputProps>(
- (
- {
- label = '',
- hint = '',
- indicator = null,
- size = TextControlBase.TextControlSize.MEDIUM,
- border = false,
- block = false,
- style = TextControlBase.TextControlStyle.DEFAULT,
- hiddenLabel = false,
- type: _type,
- className: _className,
- placeholder: _placeholder,
- as: _as,
- ...etcProps
- }: PhoneNumberInputProps,
- ref,
- ) => {
- const styleArgs = React.useMemo<TextControlBase.TextControlBaseArgs>(() => ({
- block,
- border,
- size,
- indicator: Boolean(indicator),
- style,
- resizable: false,
- predefinedValues: false,
- }), [block, border, size, indicator, style]);
-
- return (
- <div
- className={TextControlBase.Root(styleArgs)}
- >
- <input
- {...etcProps}
- className={TextControlBase.Input(styleArgs)}
- ref={ref}
- aria-label={label}
- type="tel"
- data-testid="input"
- />
- {
- border && (
- <span
- data-testid="border"
- />
- )
- }
- {
- label && !hiddenLabel && (
- <div
- data-testid="label"
- className={TextControlBase.LabelWrapper(styleArgs)}
- >
- {label}
- </div>
- )
- }
- {hint && (
- <div
- className={TextControlBase.HintWrapper(styleArgs)}
- data-testid="hint"
- >
- <div
- className={TextControlBase.Hint()}
- >
- {hint}
- </div>
- </div>
- )}
- {indicator && (
- <div
- className={TextControlBase.IndicatorWrapper(styleArgs)}
- >
- {indicator}
- </div>
- )}
- </div>
- );
- }
- );
-
- PhoneNumberInput.displayName = 'PhoneNumberInput';
|