Skip to content

Commit

Permalink
fix: added typescript types to fluidTextArea and FluidTextAreaSkeleton
Browse files Browse the repository at this point in the history
  • Loading branch information
riddhybansal committed Sep 6, 2024
1 parent 2e82ab9 commit 97ee2a6
Show file tree
Hide file tree
Showing 4 changed files with 165 additions and 36 deletions.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import PropTypes from 'prop-types';
import React from 'react';
import classnames from 'classnames';
import { usePrefix } from '../../internal/usePrefix';
import { FormContext } from '../FluidForm/FormContext';

export interface FluidTextAreaSkeletonProps {
/**
* Specify an optional className to be applied to the outer FluidForm wrapper
*/
className?: string;
}

function FluidTextAreaSkeleton({ className, ...other }) {
const prefix = usePrefix();

const FluidTextAreaSkeleton: React.FC<FluidTextAreaSkeletonProps> = ({
className,
...other
}) => {
const prefix = usePrefix();

return (
<FormContext.Provider value={{ isFluid: true }}>
<div
className={classnames(
`${prefix}--form-item ${prefix}--text-area--fluid__skeleton`,
className
)}
{...other}>
<span className={`${prefix}--label ${prefix}--skeleton`} />
<div className={`${prefix}--skeleton ${prefix}--text-area`} />
</div>
</FormContext.Provider>
);
};
}

FluidTextAreaSkeleton.propTypes = {
/**
* Specify an optional className to be applied to the outer FluidForm wrapper
*/
className: PropTypes.string,
};

export default FluidTextAreaSkeleton;
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,117 @@ import deprecate from '../../prop-types/deprecate';
import { usePrefix } from '../../internal/usePrefix';
import { FormContext } from '../FluidForm/FormContext';

function FluidTextArea({ className, ...other }) {
export interface FluidTextAreaProps {
/**
* Provide a custom className that is applied directly to the underlying
* `<textarea>` node
*/
className?: string;

/**
* Specify the `cols` attribute for the underlying `<textarea>` node
*/
cols?: number;

/**
* Optionally provide the default value of the `<textarea>`
*/
defaultValue?: string | number;

/**
* Specify whether the control is disabled
*/
disabled?: boolean;

/**
* Specify whether to display the character counter
*/
enableCounter?: boolean;

/**
* Provide text that is used alongside the control label for additional help
*/
helperText?: React.ReactNode;

/**
* Specify whether you want the underlying label to be visually hidden
*/
hideLabel?: boolean;

/**
* Provide a unique identifier for the control
*/
id?: string;

/**
* Specify whether the control is currently invalid
*/
invalid?: boolean;

/**
* Provide the text that is displayed when the control is in an invalid state
*/
invalidText?: React.ReactNode;

/**
* Provide the text that will be read by a screen reader when visiting this
* control
*/
labelText: React.ReactNode;

/**
* `true` to use the light version. For use on $ui-01 backgrounds only.
* Don't use this to make tile background color same as container background color.
*/
light?: boolean;

/**
* Max character count allowed for the textarea. This is needed in order for enableCounter to display
*/
maxCount?: number;

/**
* Optionally provide an `onChange` handler that is called whenever `<textarea>`
* is updated
*/
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;

/**
* Optionally provide an `onClick` handler that is called whenever the
* `<textarea>` is clicked
*/
onClick?: React.MouseEventHandler<HTMLTextAreaElement>;

/**
* Specify the placeholder attribute for the `<textarea>`
*/
placeholder?: string;

/**
* Specify the rows attribute for the `<textarea>`
*/
rows?: number;

/**
* Provide the current value of the `<textarea>`
*/
value?: string | number;

/**
* 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 FluidTextArea: React.FC<FluidTextAreaProps> = ({
className,
...other
}) => {
const prefix = usePrefix();
const classNames = classnames(`${prefix}--text-area--fluid`, className);

Expand All @@ -22,7 +132,7 @@ function FluidTextArea({ className, ...other }) {
<TextArea className={classNames} {...other} />
</FormContext.Provider>
);
}
};

FluidTextArea.propTypes = {
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,12 @@
*/

import FluidTextArea from './FluidTextArea';

import { type FluidTextAreaProps } from './FluidTextArea';
import { type FluidTextAreaSkeletonProps } from './FluidTextArea.Skeleton';
export default FluidTextArea;
export { FluidTextArea };
export {
FluidTextArea,
type FluidTextAreaProps,
type FluidTextAreaSkeletonProps,
};
export { default as FluidTextAreaSkeleton } from './FluidTextArea.Skeleton';

0 comments on commit 97ee2a6

Please sign in to comment.