PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Improve Field ts definitions some more

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-06-17 02:14:20 +01:00
parent 3472fcdec5
commit 3dcf525382
1 changed files with 37 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/components/views/elements/Field.tsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React from 'react'; import React, {InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes} from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import * as sdk from '../../../index'; import * as sdk from '../../../index';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
@ -29,45 +29,61 @@ function getId() {
return `${BASE_ID}_${count++}`; return `${BASE_ID}_${count++}`;
} }
interface IProps extends React.InputHTMLAttributes<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement> { interface IProps {
// The field's ID, which binds the input and label together. Immutable. // The field's ID, which binds the input and label together. Immutable.
id?: string, id?: string;
// The element to create. Defaults to "input".
// To define options for a select, use <Field><option ... /></Field>
element?: "input" | "select" | "textarea",
// The field's type (when used as an <input>). Defaults to "text". // The field's type (when used as an <input>). Defaults to "text".
type?: string, type?: string;
// id of a <datalist> element for suggestions // id of a <datalist> element for suggestions
list?: string, list?: string;
// The field's label string. // The field's label string.
label?: string, label?: string;
// The field's placeholder string. Defaults to the label. // The field's placeholder string. Defaults to the label.
placeholder?: string, placeholder?: string;
// The field's value.
// This is a controlled component, so the value is required.
value: string,
// Optional component to include inside the field before the input. // Optional component to include inside the field before the input.
prefixComponent?: React.ReactNode, prefixComponent?: React.ReactNode;
// Optional component to include inside the field after the input. // Optional component to include inside the field after the input.
postfixComponent?: React.ReactNode, postfixComponent?: React.ReactNode;
// The callback called whenever the contents of the field // The callback called whenever the contents of the field
// changes. Returns an object with `valid` boolean field // changes. Returns an object with `valid` boolean field
// and a `feedback` react component field to provide feedback // and a `feedback` react component field to provide feedback
// to the user. // to the user.
onValidate?: (input: IFieldState) => Promise<IValidationResult>, onValidate?: (input: IFieldState) => Promise<IValidationResult>;
// If specified, overrides the value returned by onValidate. // If specified, overrides the value returned by onValidate.
flagInvalid?: boolean, flagInvalid?: boolean;
// If specified, contents will appear as a tooltip on the element and // If specified, contents will appear as a tooltip on the element and
// validation feedback tooltips will be suppressed. // validation feedback tooltips will be suppressed.
tooltipContent?: React.ReactNode, tooltipContent?: React.ReactNode;
// If specified alongside tooltipContent, the class name to apply to the // If specified alongside tooltipContent, the class name to apply to the
// tooltip itself. // tooltip itself.
tooltipClassName?: string, tooltipClassName?: string;
// If specified, an additional class name to apply to the field container // If specified, an additional class name to apply to the field container
className?: string, className?: string;
// All other props pass through to the <input>. // All other props pass through to the <input>.
} }
interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
// The element to create. Defaults to "input".
element?: "input";
// The input's value. This is a controlled component, so the value is required.
value: string;
}
interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
// To define options for a select, use <Field><option ... /></Field>
element: "select";
// The select's value. This is a controlled component, so the value is required.
value: string;
}
interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
element: "textarea";
// The textarea's value. This is a controlled component, so the value is required.
value: string;
}
type PropShapes = IInputProps | ISelectProps | ITextareaProps;
interface IState { interface IState {
valid: boolean, valid: boolean,
feedback: React.ReactNode, feedback: React.ReactNode,
@ -75,7 +91,7 @@ interface IState {
focused: boolean, focused: boolean,
} }
export default class Field extends React.PureComponent<IProps, IState> { export default class Field extends React.PureComponent<PropShapes, IState> {
private id: string; private id: string;
private input: HTMLInputElement; private input: HTMLInputElement;