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