Unverified Commit 23958025 authored by Jason Quense's avatar Jason Quense Committed by GitHub
Browse files

fix(types): more accurate form types (#5067)

* fix(types): more accurate form types

* WIP

* amend
parent 0df1ccd0
......@@ -15,7 +15,7 @@
"build": "node tools/build.js",
"build-docs": "yarn --cwd www build",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
"dtslint": "dtslint types",
"dtslint": "dtslint types --expectOnly",
"format": "eslint . --fix && npm run prettier -- --write",
"lint": "eslint . && npm run prettier -- -l",
"deploy-docs": "yarn --cwd www deploy",
......
......@@ -3,18 +3,17 @@ import * as React from 'react';
import AccordionCollapse from './AccordionCollapse';
import AccordionToggle from './AccordionToggle';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
export interface AccordionProps {
activeKey?: string;
defaultActiveKey?: string;
}
declare class Accordion<
As extends React.ElementType = 'div'
> extends BsPrefixComponent<As, AccordionProps> {
static Toggle: typeof AccordionToggle;
static Collapse: typeof AccordionCollapse;
declare interface Accordion
extends BsPrefixRefForwardingComponent<'div', AccordionProps> {
Toggle: typeof AccordionToggle;
Collapse: typeof AccordionCollapse;
}
declare const Accordion: Accordion;
export default Accordion;
import * as React from 'react';
import Collapse, { CollapseProps } from './Collapse';
import { CollapseProps } from './Collapse';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
export interface AccordionCollapseProps
extends CollapseProps,
......@@ -10,9 +10,8 @@ export interface AccordionCollapseProps
eventKey: string;
}
declare class AccordionCollapse extends BsPrefixComponent<
typeof Collapse,
AccordionCollapseProps
> {}
declare interface AccordionCollapse
extends BsPrefixRefForwardingComponent<'div', AccordionCollapseProps> {}
declare const AccordionCollapse: AccordionCollapse;
export default AccordionCollapse;
import * as React from 'react';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
export interface AccordionToggleProps {
eventKey: string;
......@@ -12,8 +12,8 @@ export function useAccordionToggle(
onClick: (event?: React.SyntheticEvent) => void,
): (event?: React.SyntheticEvent) => void;
declare class AccordionToggle<
As extends React.ElementType = 'button'
> extends BsPrefixComponent<As, AccordionToggleProps> {}
declare interface AccordionToggle
extends BsPrefixRefForwardingComponent<'div', AccordionToggleProps> {}
declare const AccordionToggle: AccordionToggle;
export default AccordionToggle;
import * as React from 'react';
import SafeAnchor, { SafeAnchorProps } from './SafeAnchor';
import { SafeAnchorProps } from './SafeAnchor';
import {
BsPrefixComponent,
......
......@@ -7,28 +7,27 @@ import FormGroup from './FormGroup';
import FormLabel from './FormLabel';
import FormText from './FormText';
import { BsPrefixComponent } from './helpers';
import { BsPrefixComponent, BsPrefixRefForwardingComponent } from './helpers';
export class FormRow<
As extends React.ElementType = 'div'
> extends BsPrefixComponent<As> {}
export interface FormProps {
innerRef?: React.LegacyRef<this>;
inline?: boolean;
validated?: boolean;
}
declare class Form<
As extends React.ElementType = 'form'
> extends BsPrefixComponent<As, FormProps> {
static Row: typeof FormRow;
static Group: typeof FormGroup;
static Control: typeof FormControl;
static Check: typeof FormCheck;
static File: typeof FormFile;
static Label: typeof FormLabel;
static Text: typeof FormText;
declare interface Form
extends BsPrefixRefForwardingComponent<'form', FormProps> {
Row: typeof FormRow;
Group: typeof FormGroup;
Control: typeof FormControl;
Check: typeof FormCheck;
File: typeof FormFile;
Label: typeof FormLabel;
Text: typeof FormText;
}
declare const Form: Form;
export default Form;
import * as React from 'react';
import FormCheckInput from './FormCheckInput';
import FormCheckLabel from './FormCheckLabel';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
export interface FormCheckProps {
bsCustomPrefix?: string;
innerRef?: React.LegacyRef<this>;
id?: string;
inline?: boolean;
disabled?: boolean;
......@@ -18,11 +17,12 @@ export interface FormCheckProps {
feedback?: React.ReactNode;
}
declare class FormCheck<
As extends React.ElementType = 'input'
> extends BsPrefixComponent<As, FormCheckProps> {
static Input: typeof FormCheckInput;
static Label: typeof FormCheckLabel;
declare interface FormCheck
extends BsPrefixRefForwardingComponent<'input', FormCheckProps> {
Input: typeof FormCheckInput;
Label: typeof FormCheckLabel;
}
declare const FormCheck: FormCheck;
export default FormCheck;
import * as React from 'react';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
export interface FormCheckInputProps {
id?: string;
......@@ -8,11 +6,11 @@ export interface FormCheckInputProps {
isStatic?: boolean;
isValid?: boolean;
isInvalid?: boolean;
innerRef?: React.LegacyRef<this>;
}
declare class FormCheckInput<
As extends React.ElementType = 'input'
> extends BsPrefixComponent<As, FormCheckInputProps> {}
declare interface FormCheckInput
extends BsPrefixRefForwardingComponent<'input', FormCheckInputProps> {}
declare const FormCheckInput: FormCheckInput;
export default FormCheckInput;
import * as React from 'react';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
export interface FormCheckLabelProps {
htmlFor?: string;
innerRef?: React.LegacyRef<this>;
}
declare class FormCheckLabel extends BsPrefixComponent<
'label',
FormCheckLabelProps
> {}
declare interface FormCheckLabel
extends BsPrefixRefForwardingComponent<'label', FormCheckLabelProps> {}
declare const FormCheckLabel: FormCheckLabel;
export default FormCheckLabel;
import * as React from 'react';
import Feedback from './Feedback';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
type FormControlElement =
| HTMLInputElement
......@@ -8,13 +8,12 @@ type FormControlElement =
| HTMLTextAreaElement;
export interface FormControlProps {
innerRef?: React.LegacyRef<FormControlElement>;
size?: 'sm' | 'lg';
plaintext?: boolean;
readOnly?: boolean;
disabled?: boolean;
value?: string | string[] | number;
onChange?: React.FormEventHandler<FormControlElement>;
onChange?: React.ChangeEventHandler<FormControlElement>;
custom?: boolean;
type?: string;
id?: string;
......@@ -22,10 +21,11 @@ export interface FormControlProps {
isInvalid?: boolean;
}
declare class FormControl<
As extends React.ElementType = 'input'
> extends BsPrefixComponent<As, FormControlProps> {
static Feedback: typeof Feedback;
declare interface FormControl
extends BsPrefixRefForwardingComponent<'input', FormControlProps> {
Feedback: typeof Feedback;
}
declare const FormControl: FormControl;
export default FormControl;
import * as React from 'react';
import FormFileInput from './FormFileInput';
import FormFileLabel from './FormFileLabel';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
export interface FormFileProps {
bsCustomPrefix?: string;
......@@ -15,11 +15,12 @@ export interface FormFileProps {
lang?: string;
}
declare class FormFile<
As extends React.ElementType = 'input'
> extends BsPrefixComponent<As, FormFileProps> {
static Input: typeof FormFileInput;
static Label: typeof FormFileLabel;
declare interface FormFile
extends BsPrefixRefForwardingComponent<'input', FormFileProps> {
Input: typeof FormFileInput;
Label: typeof FormFileLabel;
}
declare const FormFile: FormFile;
export default FormFile;
import * as React from 'react';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
export interface FormFileInputProps {
id?: string;
......@@ -9,8 +7,9 @@ export interface FormFileInputProps {
lang?: string;
}
declare class FormFileInput<
As extends React.ElementType = 'input'
> extends BsPrefixComponent<As, FormFileInputProps> {}
declare interface FormFileInput
extends BsPrefixRefForwardingComponent<'input', FormFileInputProps> {}
declare const FormFileInput: FormFileInput;
export default FormFileInput;
import * as React from 'react';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
export interface FormFileLabelProps {
htmlFor?: string;
}
declare class FormFileLabel extends BsPrefixComponent<
'label',
FormFileLabelProps
> {}
declare interface FormFileLabel
extends BsPrefixRefForwardingComponent<'label', FormFileLabelProps> {}
declare const FormFileLabel: FormFileLabel;
export default FormFileLabel;
import * as React from 'react';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
export interface FormGroupProps {
innerRef?: React.LegacyRef<this>;
controlId?: string;
}
declare class FormGroup<
As extends React.ElementType = 'div'
> extends BsPrefixComponent<As, FormGroupProps> {}
declare interface FormGroup
extends BsPrefixRefForwardingComponent<'div', FormGroupProps> {}
declare const FormGroup: FormGroup;
export default FormGroup;
......@@ -2,11 +2,10 @@ import * as React from 'react';
import { ColProps } from './Col';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
interface FormLabelBaseProps {
htmlFor?: string;
innerRef?: React.LegacyRef<this>;
srOnly?: boolean;
}
......@@ -20,8 +19,9 @@ export interface FormLabelWithColProps extends FormLabelBaseProps, ColProps {
export type FormLabelProps = FormLabelWithColProps | FormLabelOwnProps;
declare class FormLabel<
As extends React.ElementType = 'label'
> extends BsPrefixComponent<As, FormLabelProps> {}
declare interface FormLabel
extends BsPrefixRefForwardingComponent<'label', FormLabelProps> {}
declare const FormLabel: FormLabel;
export default FormLabel;
import * as React from 'react';
import { BsPrefixComponent } from './helpers';
import { BsPrefixRefForwardingComponent } from './helpers';
export interface FormTextProps {
innerRef?: React.LegacyRef<this>;
muted?: boolean;
}
declare class FormText<
As extends React.ElementType = 'small'
> extends BsPrefixComponent<As, FormTextProps> {}
declare interface FormText
extends BsPrefixRefForwardingComponent<'small', FormTextProps> {}
declare const FormText: FormText;
export default FormText;
......@@ -13,6 +13,20 @@ export interface BsPrefixProps<As extends React.ElementType> {
bsPrefix?: string;
}
export interface BsPrefixRefForwardingComponent<
TInitial extends React.ElementType,
P = {}
> {
<As extends React.ElementType = TInitial>(
props: React.PropsWithChildren<ReplaceProps<As, BsPrefixProps<As> & P>>,
context?: any,
): React.ReactElement | null;
propTypes?: any;
contextTypes?: any;
defaultProps?: Partial<P>;
displayName?: string;
}
export class BsPrefixComponent<
As extends React.ElementType,
P = {}
......
......@@ -173,8 +173,9 @@ import {
<Form.Control
type="email"
placeholder="name@example.com"
innerRef={React.createRef<HTMLInputElement>()}
onChange={(e: React.FormEvent<HTMLInputElement>) => {
ref={React.createRef<HTMLInputElement>()}
onChange={(e) => {
// $ExpectType ChangeEvent<FormControlElement>
e;
}}
/>
......@@ -183,8 +184,8 @@ import {
<Form.Label>Example select</Form.Label>
<Form.Control
as="select"
innerRef={React.createRef<HTMLSelectElement>()}
onChange={(e: React.FormEvent<HTMLSelectElement>) => {
ref={React.createRef<HTMLSelectElement>()}
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
e;
}}
>
......@@ -210,8 +211,8 @@ import {
<Form.Control
as="textarea"
rows={3}
innerRef={React.createRef<HTMLTextAreaElement>()}
onChange={(e: React.FormEvent<HTMLTextAreaElement>) => {
ref={React.createRef<HTMLTextAreaElement>()}
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
e;
}}
/>
......@@ -239,6 +240,7 @@ import {
label="Custom file input"
custom
/>
<Form.File.Input />
</Form>;
<div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment