Skip to content

Commit 4451381

Browse files
ethansharethanshar
authored
Support UI presets for Incubator.TextField and set a 'default' preset (#1111)
1 parent 985982b commit 4451381

File tree

6 files changed

+1380
-42
lines changed

6 files changed

+1380
-42
lines changed

‎generatedTypes/incubator/TextField/index.d.ts

Lines changed: 73 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,70 @@
55
* 3. Passing typography preset that includes lineHeight usually cause alignment issues with
66
* other elements (leading/trailing accessories). It usually best to set lineHeight with undefined
77
*/
8-
import React from 'react';
8+
import React, { ReactElement } from 'react';
99
import { ViewStyle, TextStyle } from 'react-native';
10+
import { ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers, PaddingModifiers, TypographyModifiers, ColorsModifiers } from '../../commons/new';
1011
import { ValidationMessagePosition, Validator } from './types';
1112
import { InputProps } from './Input';
1213
import { ValidationMessageProps } from './ValidationMessage';
1314
import { LabelProps } from './Label';
1415
import { FloatingPlaceholderProps } from './FloatingPlaceholder';
1516
import { CharCounterProps } from './CharCounter';
17+
export declare type TextFieldProps = MarginModifiers & PaddingModifiers & TypographyModifiers & ColorsModifiers & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Omit<CharCounterProps, 'maxLength'> & {
18+
/**
19+
* Pass to render a leading element
20+
*/
21+
leadingAccessory?: ReactElement;
22+
/**
23+
* Pass to render a trailing element
24+
*/
25+
trailingAccessory?: ReactElement;
26+
/**
27+
* Pass to add floating placeholder support
28+
*/
29+
floatingPlaceholder?: boolean;
30+
/**
31+
* Custom style for the floating placeholder
32+
*/
33+
floatingPlaceholderStyle?: TextStyle;
34+
/**
35+
* A single or multiple validator. Can be a string (required, email) or custom function.
36+
*/
37+
validate?: Validator | Validator[];
38+
/**
39+
* Should validate when the TextField mounts
40+
*/
41+
validateOnStart?: boolean;
42+
/**
43+
* Should validate when the TextField value changes
44+
*/
45+
validateOnChange?: boolean;
46+
/**
47+
* Should validate when losing focus of TextField
48+
*/
49+
validateOnBlur?: boolean;
50+
/**
51+
* The position of the validation message (top/bottom)
52+
*/
53+
validationMessagePosition?: ValidationMessagePosition;
54+
/**
55+
* Internal style for the field container
56+
*/
57+
fieldStyle?: ViewStyle;
58+
/**
59+
* Container style of the whole component
60+
*/
61+
containerStyle?: ViewStyle;
62+
/**
63+
* Predefined preset to use for styling the field
64+
*/
65+
preset?: 'default' | undefined;
66+
};
67+
export declare type InternalTextFieldProps = TextFieldProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
1668
interface StaticMembers {
1769
validationMessagePositions: typeof ValidationMessagePosition;
1870
}
19-
declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "charCounterStyle" | "showCharCounter"> & {
71+
declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "showCharCounter" | "charCounterStyle"> & {
2072
/**
2173
* Pass to render a leading element
2274
*/
@@ -61,9 +113,13 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
61113
* Container style of the whole component
62114
*/
63115
containerStyle?: ViewStyle | undefined;
116+
/**
117+
* Predefined preset to use for styling the field
118+
*/
119+
preset?: "default" | undefined;
64120
} & {
65121
useCustomTheme?: boolean | undefined;
66-
}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "charCounterStyle" | "showCharCounter"> & {
122+
}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "showCharCounter" | "charCounterStyle"> & {
67123
/**
68124
* Pass to render a leading element
69125
*/
@@ -108,9 +164,13 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
108164
* Container style of the whole component
109165
*/
110166
containerStyle?: ViewStyle | undefined;
167+
/**
168+
* Predefined preset to use for styling the field
169+
*/
170+
preset?: "default" | undefined;
111171
} & {
112172
useCustomTheme?: boolean | undefined;
113-
}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "charCounterStyle" | "showCharCounter"> & {
173+
}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "showCharCounter" | "charCounterStyle"> & {
114174
/**
115175
* Pass to render a leading element
116176
*/
@@ -155,9 +215,13 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
155215
* Container style of the whole component
156216
*/
157217
containerStyle?: ViewStyle | undefined;
218+
/**
219+
* Predefined preset to use for styling the field
220+
*/
221+
preset?: "default" | undefined;
158222
} & {
159223
useCustomTheme?: boolean | undefined;
160-
}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "charCounterStyle" | "showCharCounter"> & {
224+
}) | (Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"black" | "white" | "dark10" | "dark20" | "dark30" | "dark40" | "dark50" | "dark60" | "dark70" | "dark80" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Pick<CharCounterProps, "showCharCounter" | "charCounterStyle"> & {
161225
/**
162226
* Pass to render a leading element
163227
*/
@@ -202,6 +266,10 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
202266
* Container style of the whole component
203267
*/
204268
containerStyle?: ViewStyle | undefined;
269+
/**
270+
* Predefined preset to use for styling the field
271+
*/
272+
preset?: "default" | undefined;
205273
} & {
206274
useCustomTheme?: boolean | undefined;
207275
}), any> & StaticMembers;

0 commit comments

Comments
 (0)