mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2025-10-16 12:05:41 +00:00
[formol] Add types for "formol" package (#38754)
* [formol] Add types for formol package * [formol] Add types for formol package. Fix TS dependency version
This commit is contained in:
today-
Ryan Cavanaugh
parent
2b36bdd43e
commit
c39ed51b6b
121
types/formol/formol-tests.tsx
Normal file
121
types/formol/formol-tests.tsx
Normal file
@ -0,0 +1,121 @@
|
||||
import * as React from 'react';
|
||||
import Formol, { Field, Conditional, Inliner } from 'formol';
|
||||
|
||||
class UpdateForm extends React.PureComponent {
|
||||
render() {
|
||||
return (
|
||||
<article>
|
||||
<Formol item={{}}>
|
||||
<Field>Name</Field>
|
||||
<Field type="number">Value</Field>
|
||||
</Formol>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ComplexForm extends React.PureComponent {
|
||||
render() {
|
||||
const item = { firstname: 'first', lastname: 'last' };
|
||||
|
||||
return (
|
||||
<article>
|
||||
<Formol
|
||||
item={item}
|
||||
validator={({ firstname, lastname }) => ({
|
||||
firstname:
|
||||
(firstname ? firstname.length : 0) + (lastname ? lastname.length : 0) <= 6
|
||||
? 'Your full name must be greater than 6 characters.'
|
||||
: null,
|
||||
})}
|
||||
>
|
||||
<Field name="firstname" required>
|
||||
First Name
|
||||
</Field>
|
||||
<Field name="lastname" required minLength={3}>
|
||||
Last Name
|
||||
</Field>
|
||||
<Field
|
||||
name="birth"
|
||||
type="calendar"
|
||||
validator={v => (new Date(v) < new Date('1950-01-01') ? 'You can’t be too old' : '')}
|
||||
>
|
||||
Day of birth
|
||||
</Field>
|
||||
<Inliner>
|
||||
<Field name="address.zip" size={5}>
|
||||
Zip code
|
||||
</Field>
|
||||
<Conditional readOnly={({ address: { zip } }) => !zip}>
|
||||
<Field name="address.city">City</Field>
|
||||
</Conditional>
|
||||
</Inliner>
|
||||
<Field
|
||||
name="address.continent"
|
||||
type="select-menu"
|
||||
choices={[
|
||||
'Africa',
|
||||
'Antarctica',
|
||||
'Asia',
|
||||
'Europe',
|
||||
'North America',
|
||||
'Australia/Oceania',
|
||||
'South America',
|
||||
]}
|
||||
>
|
||||
Continent
|
||||
</Field>
|
||||
<Conditional
|
||||
show={({ address: { continent } }) =>
|
||||
['Asia', 'North America', 'South America'].indexOf(continent) !== -1
|
||||
}
|
||||
>
|
||||
<Field name="fastShipping" type="switch" title="Fast shipping includes an extra cost">
|
||||
Fast shipping
|
||||
</Field>
|
||||
</Conditional>
|
||||
<Conditional
|
||||
value={({ firstname, lastname, address: { zip, city, continent } }) =>
|
||||
(firstname ? firstname.length : 0) +
|
||||
(lastname ? lastname.length : 0) +
|
||||
(zip ? zip.length : 0) +
|
||||
(city ? city.length : 0) +
|
||||
(continent ? continent.length : 0)
|
||||
}
|
||||
>
|
||||
<Field
|
||||
name="price"
|
||||
type="money"
|
||||
title={'This price equals the number of letters ' + 'in this form (because why not)'}
|
||||
max={100}
|
||||
disabled
|
||||
readOnly
|
||||
>
|
||||
Indicative price
|
||||
</Field>
|
||||
</Conditional>
|
||||
<Field
|
||||
name="colors"
|
||||
type="checkbox-set"
|
||||
choices={Object.keys({
|
||||
Red: '#ff0000',
|
||||
Yellow: '#ffff00',
|
||||
Olive: '#808000',
|
||||
Lime: '#00ff00',
|
||||
Green: '#008000',
|
||||
Aqua: '#00ffff',
|
||||
Teal: '#008080',
|
||||
Blue: '#0000ff',
|
||||
Navy: '#000080',
|
||||
Fuchsia: '#ff00ff',
|
||||
Purple: '#800080',
|
||||
})}
|
||||
dangerousRawHTMLLabels
|
||||
>
|
||||
Choose some colors
|
||||
</Field>
|
||||
</Formol>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
}
|
||||
136
types/formol/index.d.ts
vendored
Normal file
136
types/formol/index.d.ts
vendored
Normal file
@ -0,0 +1,136 @@
|
||||
// Type definitions for formol 2.7
|
||||
// Project: https://github.com/Kozea/formol
|
||||
// Definitions by: today- <https://github.com/today->
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
import * as React from "react";
|
||||
|
||||
export const ConditionalContext: {
|
||||
Consumer: any;
|
||||
Provider: any;
|
||||
};
|
||||
|
||||
export const FormolContext: {
|
||||
Consumer: any;
|
||||
Provider: any;
|
||||
};
|
||||
|
||||
interface FormolProps<V = any> {
|
||||
item?: V;
|
||||
types?: ReadonlyArray<string>;
|
||||
i18n?: any;
|
||||
className?: string;
|
||||
readOnly?: boolean;
|
||||
submitText?: any;
|
||||
cancelText?: any;
|
||||
noCancel?: any;
|
||||
allowUnmodifiedSubmit?: any;
|
||||
extra?: React.ReactNode;
|
||||
classes?: any;
|
||||
onSubmit?: (e: Event) => void;
|
||||
validator?: (v: V) => {[K in keyof V]?: string | null};
|
||||
}
|
||||
|
||||
declare const Formol: React.ComponentType<FormolProps>;
|
||||
export default Formol;
|
||||
|
||||
export const Inliner: React.ComponentType;
|
||||
|
||||
interface FieldSetProps<V = any> {
|
||||
type?: string;
|
||||
isChecked?: boolean;
|
||||
value?: V;
|
||||
choices?: ReadonlyArray<any>;
|
||||
elementRef?: React.Ref<any>;
|
||||
dangerousRawHTMLLabels?: boolean;
|
||||
onChange?: () => void;
|
||||
}
|
||||
|
||||
export const FieldSet: React.ComponentType<FieldSetProps>;
|
||||
|
||||
interface SwitchButtonProps {
|
||||
type?: string;
|
||||
i18n?: { yes: React.ReactNode, no: React.ReactNode } & { [k: string]: any };
|
||||
leftLabel?: React.ReactNode;
|
||||
rightLabel?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const SwitchButton: React.ComponentType<SwitchButtonProps>;
|
||||
|
||||
interface ConditionalProps<V = any> {
|
||||
show?: ((val: V) => boolean) | boolean;
|
||||
readOnly?: ((val: V) => boolean) | boolean;
|
||||
context?: any;
|
||||
value?: (v: V) => any;
|
||||
}
|
||||
|
||||
export const Conditional: React.ComponentType<ConditionalProps>;
|
||||
|
||||
export function ConditionalContextWrapper(e: React.Component<any>): React.Component<any>;
|
||||
|
||||
interface FieldProps<V = any> {
|
||||
register?: (name: string, element: React.Ref<any>, validator: any, validityErrors: any) => void;
|
||||
unregister?: (name: string) => void;
|
||||
name?: string;
|
||||
validator?: (v: V) => string;
|
||||
validityErrors?: any;
|
||||
value?: V;
|
||||
normalizer?: (v: V) => V;
|
||||
handleChange?: (name: string, v: V) => void;
|
||||
handleEntered?: (name: string, v: V) => void;
|
||||
dangerousRawHTMLLabels?: boolean;
|
||||
type?: string;
|
||||
title?: string;
|
||||
modified?: boolean;
|
||||
className?: string;
|
||||
readOnly?: boolean;
|
||||
disabled?: boolean;
|
||||
unit?: React.ReactNode;
|
||||
extras?: React.ReactNode;
|
||||
formatter?: (v: V) => V;
|
||||
unformatter?: (v: V) => V;
|
||||
children?: any;
|
||||
classNameModifiers?: any;
|
||||
TypeField?: React.ComponentType;
|
||||
i18n?: any;
|
||||
error?: React.ReactNode;
|
||||
choices?: ReadonlyArray<any>;
|
||||
size?: number;
|
||||
max?: number;
|
||||
required?: boolean;
|
||||
minLength?: number;
|
||||
}
|
||||
|
||||
export const Field: React.ComponentType<FieldProps>;
|
||||
|
||||
export const NoRequestNeeded: Error;
|
||||
|
||||
export function FormolContextWrapper(WrappedComponent: React.Component<any>): React.Component<any>;
|
||||
|
||||
export function choicesAdapter(WrappedComponent: React.Component<any>): React.Component<any>;
|
||||
|
||||
export function memoizedChoices(WrappedComponent: React.Component<any>): React.Component<any>;
|
||||
|
||||
export function multipleAdapter(WrappedComponent: React.Component<any>): React.Component<any>;
|
||||
|
||||
export function copy(o: any, names: ReadonlyArray<string>): any;
|
||||
|
||||
export function diff(newItem: any, oldItem: any, names: ReadonlyArray<string>): any;
|
||||
|
||||
export function emptyStringToNull(v: string): string | null;
|
||||
|
||||
export function fieldPropsAdapter(v: any): any;
|
||||
|
||||
export function get(data: any, key: string): any;
|
||||
|
||||
export function insert(transientItem: any, name: string, value: any, names: ReadonlyArray<string>): any;
|
||||
|
||||
export function isModified(newItem: any, oldItem: any, names: ReadonlyArray<string>): boolean;
|
||||
|
||||
export function nullishToEmptyString(v?: string): string;
|
||||
|
||||
export function set(data: any, key: string, value: any, noArray?: boolean): any;
|
||||
|
||||
export function unrest(e: any, ...args: any[]): any;
|
||||
24
types/formol/tsconfig.json
Normal file
24
types/formol/tsconfig.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictFunctionTypes": true,
|
||||
"strictNullChecks": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"jsx": "react"
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"formol-tests.tsx"
|
||||
]
|
||||
}
|
||||
1
types/formol/tslint.json
Normal file
1
types/formol/tslint.json
Normal file
@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Loading…
Reference in New Issue
Block a user