From c49b590297411af79f17be770258a531674a86e4 Mon Sep 17 00:00:00 2001 From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com> Date: Thu, 12 Sep 2024 20:25:49 +0530 Subject: [PATCH] Add typescript types to fluid number input (#17373) * fix: rename js files to tsx files * fix: added typescript types to fluid numberinput and skeleton --------- Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com> Co-authored-by: Taylor Jones --- ...leton.js => FluidNumberInput.Skeleton.tsx} | 15 ++- ...uidNumberInput.js => FluidNumberInput.tsx} | 113 +++++++++++++++++- .../FluidNumberInput/{index.js => index.tsx} | 4 +- 3 files changed, 124 insertions(+), 8 deletions(-) rename packages/react/src/components/FluidNumberInput/{FluidNumberInput.Skeleton.js => FluidNumberInput.Skeleton.tsx} (79%) rename packages/react/src/components/FluidNumberInput/{FluidNumberInput.js => FluidNumberInput.tsx} (56%) rename packages/react/src/components/FluidNumberInput/{index.js => index.tsx} (61%) diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.tsx similarity index 79% rename from packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.js rename to packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.tsx index 7de75db1d488..f44aa840e323 100644 --- a/packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.js +++ b/packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.tsx @@ -11,9 +11,18 @@ import classnames from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -function FluidNumberInputSkeleton({ className, ...other }) { - const prefix = usePrefix(); +export interface FluidNumberInputSkeletonProps { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className?: string; +} +const FluidNumberInputSkeleton: React.FC = ({ + className, + ...other +}) => { + const prefix = usePrefix(); return (
); -} +}; FluidNumberInputSkeleton.propTypes = { /** diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.tsx similarity index 56% rename from packages/react/src/components/FluidNumberInput/FluidNumberInput.js rename to packages/react/src/components/FluidNumberInput/FluidNumberInput.tsx index ed45d60fadb9..a04e26d46b55 100644 --- a/packages/react/src/components/FluidNumberInput/FluidNumberInput.js +++ b/packages/react/src/components/FluidNumberInput/FluidNumberInput.tsx @@ -12,10 +12,115 @@ import { NumberInput } from '../NumberInput'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -const FluidNumberInput = React.forwardRef(function FluidNumberInput( - { className, ...other }, - ref -) { +export interface FluidNumberInputProps { + /** + * `true` to allow empty string. + */ + allowEmpty?: boolean; + + /** + * Specify an optional className to be applied to the wrapper node + */ + className?: string; + + /** + * Optional starting value for uncontrolled state + */ + defaultValue?: number | string; + + /** + * Specify if the wheel functionality for the input should be disabled, or not + */ + disableWheel?: boolean; + + /** + * Specify if the control should be disabled, or not + */ + disabled?: boolean; + + /** + * Provide a description for up/down icons that can be read by screen readers + */ + iconDescription?: string; + + /** + * Specify a custom `id` for the input + */ + id: string; + + /** + * Specify if the currently value is invalid. + */ + invalid?: boolean; + + /** + * Message which is displayed if the value is invalid. + */ + invalidText?: React.ReactNode; + + /** + * Generic `label` that will be used as the textual representation of what + * this field is for + */ + label?: React.ReactNode; + + /** + * The maximum value. + */ + max?: number; + + /** + * The minimum value. + */ + min?: number; + + onChange?: ( + event: React.MouseEvent, + state: { value: number | string; direction: string } + ) => void; + + /** + * Provide an optional function to be called when the up/down button is clicked + */ + onClick?: ( + event: React.MouseEvent, + state?: { value: number | string; direction: string } + ) => void; + /** + * Provide an optional function to be called when a key is pressed in the number input + */ + onKeyUp?: React.KeyboardEventHandler; + + /** + * Specify how much the values should increase/decrease upon clicking on up/down button + */ + step?: number; + + /** + * Provide custom text for the component for each translation id + */ + translateWithId?: (id: string) => string; + + /** + * Specify the value of the input + */ + value?: number | string; + + /** + * Specify whether the control is currently in warning state + */ + warn?: boolean; + + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText?: React.ReactNode; +} + +const FluidNumberInput: React.FC = React.forwardRef< + HTMLInputElement, + FluidNumberInputProps +>(function FluidNumberInput({ className, ...other }, ref) { const prefix = usePrefix(); const classNames = classnames(`${prefix}--number-input--fluid`, className); diff --git a/packages/react/src/components/FluidNumberInput/index.js b/packages/react/src/components/FluidNumberInput/index.tsx similarity index 61% rename from packages/react/src/components/FluidNumberInput/index.js rename to packages/react/src/components/FluidNumberInput/index.tsx index f74405e5134c..8ff834291761 100644 --- a/packages/react/src/components/FluidNumberInput/index.js +++ b/packages/react/src/components/FluidNumberInput/index.tsx @@ -4,7 +4,9 @@ * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ - +import { FluidNumberInputProps } from './FluidNumberInput'; +import { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton'; +export { type FluidNumberInputProps, type FluidNumberInputSkeletonProps }; export { default, default as FluidNumberInput } from './FluidNumberInput'; export { default as FluidNumberInputSkeleton } from './FluidNumberInput.Skeleton';