@widergy/mobile-ui 1.32.10 → 1.32.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/lib/components/UTBaseInputField/README.md +26 -25
  3. package/lib/components/UTBaseInputField/index.js +3 -1
  4. package/lib/components/UTBaseInputField/utils.js +2 -2
  5. package/lib/components/UTTextInput/versions/V1/README.md +34 -33
  6. package/lib/components/UTTextInput/versions/V1/components/TextInputField/index.js +3 -0
  7. package/lib/components/UTTextInput/versions/V1/index.js +3 -0
  8. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [1.32.11](https://github.com/widergy/mobile-ui/compare/v1.32.10...v1.32.11) (2024-12-06)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * autoCapitalize for text input ([#396](https://github.com/widergy/mobile-ui/issues/396)) ([af0814c](https://github.com/widergy/mobile-ui/commit/af0814c77fba0cc34faa43ab813bf5325dba7fcf))
7
+
1
8
  ## [1.32.10](https://github.com/widergy/mobile-ui/compare/v1.32.9...v1.32.10) (2024-12-06)
2
9
 
3
10
 
package/lib/components/UTBaseInputField/README.md CHANGED
@@ -6,31 +6,32 @@
6
6
 
7
7
  ## Props
8
8
 
9
- | Name | Type | Default | Description |
10
- | --------------------- | --------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------- |
11
- | alwaysShowPlaceholder | bool | false | Whether to always show the placeholder text, even when the field is focused. |
12
- | blurOnSubmit | bool | | If true, the input will be blurred when the user submits the text. |
13
- | disabled | bool | | Whether the input field is disabled. |
14
- | editable | bool | true | Whether the input field is editable. If false, it behaves like a disabled field. |
15
- | error | oneOfType([bool, string]) | | Error message to display, or `true` to indicate an error state without a message. |
16
- | id | oneOfType([number, string]) | | Unique identifier for the input field. |
17
- | value | oneOfType([string, number]) | null | The value of the input field. |
18
- | onChange | func | () => {} | Callback function to handle change events. |
19
- | inputSize | string | 'large' | Size of the input field. One of: `small`, `large`. |
20
- | leftAdornments | arrayOf(shape({ name: string, props: object })) | [] | Elements to display on the left side of the input field (e.g., prefix, icons). |
21
- | maxLength | number | | Maximum number of characters allowed in the input. |
22
- | maxRows | number | 1 | Maximum number of rows for multiline input. |
23
- | onBlur | func | | Callback function to handle blur events. |
24
- | onFocus | func | | Callback function to handle focus events. |
25
- | onSubmitEditing | func | | Callback function to handle submit events. |
26
- | placeholder | string | | Placeholder text for the input field. |
27
- | readOnly | bool | | Whether the input field is read-only. |
28
- | returnKeyType | string | | Type of return key to display on the keyboard. |
29
- | rightAdornments | arrayOf(shape({ name: string, props: object })) | [] | Elements to display on the right side of the input field (e.g., suffix, icons, action buttons). |
30
- | showCharacterCount | bool | | Whether to display the character count. |
31
- | style | shape({ container: object, input: object, root: object }) | {} | Custom styles to apply to the component. |
32
- | type | string | | Type of the input field (e.g., text, email, numeric, password). |
33
- | variant | string | 'white' | Variant of the input field. One of: `white`, `gray`. |
9
+ | Name | Type | Default | Description |
10
+ | --------------------- | --------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------- |
11
+ | alwaysShowPlaceholder | bool | false | Whether to always show the placeholder text, even when the field is focused. |
12
+ | autoCapitalize | oneOf('none','sentences','words','characters') | 'sentences' | Defines how to automatically capitalize certain characters. |
13
+ | blurOnSubmit | bool | | If true, the input will be blurred when the user submits the text. |
14
+ | disabled | bool | | Whether the input field is disabled. |
15
+ | editable | bool | true | Whether the input field is editable. If false, it behaves like a disabled field. |
16
+ | error | oneOfType([bool, string]) | | Error message to display, or `true` to indicate an error state without a message. |
17
+ | id | oneOfType([number, string]) | | Unique identifier for the input field. |
18
+ | value | oneOfType([string, number]) | null | The value of the input field. |
19
+ | onChange | func | () => {} | Callback function to handle change events. |
20
+ | inputSize | string | 'large' | Size of the input field. One of: `small`, `large`. |
21
+ | leftAdornments | arrayOf(shape({ name: string, props: object })) | [] | Elements to display on the left side of the input field (e.g., prefix, icons). |
22
+ | maxLength | number | | Maximum number of characters allowed in the input. |
23
+ | maxRows | number | 1 | Maximum number of rows for multiline input. |
24
+ | onBlur | func | | Callback function to handle blur events. |
25
+ | onFocus | func | | Callback function to handle focus events. |
26
+ | onSubmitEditing | func | | Callback function to handle submit events. |
27
+ | placeholder | string | | Placeholder text for the input field. |
28
+ | readOnly | bool | | Whether the input field is read-only. |
29
+ | returnKeyType | string | | Type of return key to display on the keyboard. |
30
+ | rightAdornments | arrayOf(shape({ name: string, props: object })) | [] | Elements to display on the right side of the input field (e.g., suffix, icons, action buttons). |
31
+ | showCharacterCount | bool | | Whether to display the character count. |
32
+ | style | shape({ container: object, input: object, root: object }) | {} | Custom styles to apply to the component. |
33
+ | type | string | | Type of the input field (e.g., text, email, numeric, password). |
34
+ | variant | string | 'white' | Variant of the input field. One of: `white`, `gray`. |
34
35
 
35
36
  ## Input Types
36
37
 
package/lib/components/UTBaseInputField/index.js CHANGED
@@ -23,6 +23,7 @@ const UTBaseInputField = forwardRef(
23
23
  (
24
24
  {
25
25
  alwaysShowPlaceholder = false,
26
+ autoCapitalize: autoCapitalize_,
26
27
  blurOnSubmit,
27
28
  disabled,
28
29
  editable = true,
@@ -57,7 +58,7 @@ const UTBaseInputField = forwardRef(
57
58
  const multiline = maxRows > 1;
58
59
  const hasCharactersCount = showCharacterCount && maxLength && !disabled && !readOnly;
59
60
 
60
- const { secureTextEntry, autoCapitalize, keyboardType } = getPropsByType(type);
61
+ const { secureTextEntry, autoCapitalize, keyboardType } = getPropsByType(type, autoCapitalize_);
61
62
 
62
63
  const setNativeText = useMemo(
63
64
  () => debounce(text => inputRef.current?.setNativeProps({ text }), DEBOUNCE_DELAY, DEBOUNCE_CONFIG),
@@ -223,6 +224,7 @@ UTBaseInputField.displayName = 'UTBaseInputField';
223
224
 
224
225
  UTBaseInputField.propTypes = {
225
226
  alwaysShowPlaceholder: bool,
227
+ autoCapitalize: string,
226
228
  blurOnSubmit: bool,
227
229
  disabled: bool,
228
230
  editable: bool,
package/lib/components/UTBaseInputField/utils.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { KEYBOARD_BY_TYPE, TYPES } from './constants';
2
2
 
3
- export const getPropsByType = type => {
4
- const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
3
+ export const getPropsByType = (type, autoCapitalize_) => {
4
+ const autoCapitalize = autoCapitalize_ ?? (type === TYPES.EMAIL ? 'none' : 'sentences');
5
5
  const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
6
6
  const secureTextEntry = [TYPES.PASSWORD, TYPES.PASSWORD_NUMERIC].includes(type);
7
7
 
package/lib/components/UTTextInput/versions/V1/README.md CHANGED
@@ -6,39 +6,40 @@
6
6
 
7
7
  ## Props
8
8
 
9
- | Name | Type | Default | Description |
10
- | --------------------- | --------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------- |
11
- | action | object | | Action button configuration object. |
12
- | alwaysShowPlaceholder | bool | false | Whether to always show the placeholder, even when the field is focused. |
13
- | blurOnSubmit | bool | false | Whether the input should lose focus after submitting. |
14
- | disabled | bool | false | Disables the input field. |
15
- | error | string | | Error message to be displayed below the input field. |
16
- | helpText | string | | Help text to be displayed below the input field. |
17
- | id | oneOfType([number, string]) | | Unique identifier for the input field. |
18
- | inputRef | oneOfType([func, instanceOf(Object)]) | | Reference to the input field to access methods like `focus`, `blur`, or `clear`. |
19
- | inputSize | string | 'large' | Size of the input field. One of: `small`, `large`. |
20
- | title | string | | Title text for the input field. |
21
- | titleVariant | string | 'large' | Variant of the title. Either `small` or `large`. |
22
- | LeftIcon | elementType | | Icon to be displayed on the left side of the input field. |
23
- | maxLength | number | | Maximum number of characters allowed in the input field. |
24
- | maxRows | number | 1 | Maximum number of rows allowed in the input field. |
25
- | onBlur | func | | Function to call when the input field loses focus. |
26
- | onChange | func | | Function to call when the input field value changes. |
27
- | onFocus | func | | Function to call when the input field gains focus. |
28
- | onSubmitEditing | func | | Function to call when the input field is submitted (e.g., pressing Enter on a keyboard). |
29
- | placeholder | string | | Placeholder text for the input field. |
30
- | prefix | string | | Prefix text to be displayed inside the input field before the entered value. |
31
- | readOnly | bool | false | Makes the input field read-only. |
32
- | required | bool | false | Marks the input field as required. |
33
- | returnKeyType | string | 'done' | Determines the return key type on the keyboard (e.g., `done`, `next`). |
34
- | RightIcon | elementType | | Icon to be displayed on the right side of the input field. |
35
- | showCharacterCount | bool | false | Whether the character count should be displayed (if `maxLength` is defined). |
36
- | style | shape({ container: object, input: object, root: object }) | | Style object to customize the input field. Can contain `root`, `container`, `input`, or `action` styles. |
37
- | suffix | string | | Suffix text to be displayed inside the input field after the entered value. |
38
- | tooltip | string | | Tooltip text to be displayed next to the input field. |
39
- | type | string | 'default' | Type of input field (e.g., 'text', 'password', 'email', 'numeric'). |
40
- | validations | validationDataProptypes | | Array of validation rules to be applied to the input field. |
41
- | value | string | '' | The current value of the input field. |
9
+ | Name | Type | Default | Description |
10
+ | --------------------- | --------------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------- |
11
+ | action | object | | Action button configuration object. |
12
+ | alwaysShowPlaceholder | bool | false | Whether to always show the placeholder, even when the field is focused. |
13
+ | autoCapitalize | oneOf('none','sentences','words','characters') | 'sentences' | Defines how to automatically capitalize certain characters. |
14
+ | blurOnSubmit | bool | false | Whether the input should lose focus after submitting. |
15
+ | disabled | bool | false | Disables the input field. |
16
+ | error | string | | Error message to be displayed below the input field. |
17
+ | helpText | string | | Help text to be displayed below the input field. |
18
+ | id | oneOfType([number, string]) | | Unique identifier for the input field. |
19
+ | inputRef | oneOfType([func, instanceOf(Object)]) | | Reference to the input field to access methods like `focus`, `blur`, or `clear`. |
20
+ | inputSize | string | 'large' | Size of the input field. One of: `small`, `large`. |
21
+ | title | string | | Title text for the input field. |
22
+ | titleVariant | string | 'large' | Variant of the title. Either `small` or `large`. |
23
+ | LeftIcon | elementType | | Icon to be displayed on the left side of the input field. |
24
+ | maxLength | number | | Maximum number of characters allowed in the input field. |
25
+ | maxRows | number | 1 | Maximum number of rows allowed in the input field. |
26
+ | onBlur | func | | Function to call when the input field loses focus. |
27
+ | onChange | func | | Function to call when the input field value changes. |
28
+ | onFocus | func | | Function to call when the input field gains focus. |
29
+ | onSubmitEditing | func | | Function to call when the input field is submitted (e.g., pressing Enter on a keyboard). |
30
+ | placeholder | string | | Placeholder text for the input field. |
31
+ | prefix | string | | Prefix text to be displayed inside the input field before the entered value. |
32
+ | readOnly | bool | false | Makes the input field read-only. |
33
+ | required | bool | false | Marks the input field as required. |
34
+ | returnKeyType | string | 'done' | Determines the return key type on the keyboard (e.g., `done`, `next`). |
35
+ | RightIcon | elementType | | Icon to be displayed on the right side of the input field. |
36
+ | showCharacterCount | bool | false | Whether the character count should be displayed (if `maxLength` is defined). |
37
+ | style | shape({ container: object, input: object, root: object }) | | Style object to customize the input field. Can contain `root`, `container`, `input`, or `action` styles. |
38
+ | suffix | string | | Suffix text to be displayed inside the input field after the entered value. |
39
+ | tooltip | string | | Tooltip text to be displayed next to the input field. |
40
+ | type | string | 'default' | Type of input field (e.g., 'text', 'password', 'email', 'numeric'). |
41
+ | validations | validationDataProptypes | | Array of validation rules to be applied to the input field. |
42
+ | value | string | '' | The current value of the input field. |
42
43
 
43
44
  ### action
44
45
 
package/lib/components/UTTextInput/versions/V1/components/TextInputField/index.js CHANGED
@@ -6,6 +6,7 @@ import { COMPONENT_KEYS } from '../../../../../UTBaseInputField/constants';
6
6
 
7
7
  const TextInputField = ({
8
8
  action,
9
+ autoCapitalize,
9
10
  alwaysShowPlaceholder,
10
11
  blurOnSubmit,
11
12
  disabled,
@@ -47,6 +48,7 @@ const TextInputField = ({
47
48
  return (
48
49
  <UTBaseInputField
49
50
  alwaysShowPlaceholder={alwaysShowPlaceholder}
51
+ autoCapitalize={autoCapitalize}
50
52
  blurOnSubmit={blurOnSubmit}
51
53
  disabled={disabled && !readOnly}
52
54
  error={error}
@@ -77,6 +79,7 @@ TextInputField.displayName = 'TextInputField';
77
79
  TextInputField.propTypes = {
78
80
  action: shape({ icon: elementType, action: func, colorTheme: string, text: string }),
79
81
  alwaysShowPlaceholder: bool,
82
+ autoCapitalize: string,
80
83
  blurOnSubmit: bool,
81
84
  disabled: bool,
82
85
  error: string,
package/lib/components/UTTextInput/versions/V1/index.js CHANGED
@@ -14,6 +14,7 @@ import TextInputField from './components/TextInputField';
14
14
  const UTTextInput = ({
15
15
  action,
16
16
  alwaysShowPlaceholder,
17
+ autoCapitalize,
17
18
  blurOnSubmit,
18
19
  disabled,
19
20
  error,
@@ -61,6 +62,7 @@ const UTTextInput = ({
61
62
  <TextInputField
62
63
  action={action}
63
64
  alwaysShowPlaceholder={alwaysShowPlaceholder}
65
+ autoCapitalize={autoCapitalize}
64
66
  blurOnSubmit={blurOnSubmit}
65
67
  disabled={disabled}
66
68
  error={error}
@@ -104,6 +106,7 @@ export const propTypes = {
104
106
  text: string
105
107
  }),
106
108
  alwaysShowPlaceholder: bool,
109
+ autoCapitalize: string,
107
110
  blurOnSubmit: bool,
108
111
  disabled: bool,
109
112
  error: string,
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@widergy/mobile-ui",
3
3
  "description": "Widergy Mobile Components",
4
4
  "author": "widergy",
5
- "version": "1.32.10",
5
+ "version": "1.32.11",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [