@spark-web/text-input 1.0.3 → 1.1.0
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.
- package/README.md +80 -13
- package/dist/declarations/src/InputAdornment.d.ts +46 -0
- package/dist/declarations/src/TextInput.d.ts +1868 -932
- package/dist/declarations/src/childrenToAdornments.d.ts +12 -0
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/spark-web-text-input.cjs.dev.js +189 -31
- package/dist/spark-web-text-input.cjs.prod.js +189 -31
- package/dist/spark-web-text-input.esm.js +190 -33
- package/package.json +10 -7
- package/CHANGELOG.md +0 -75
- package/src/TextInput.stories.tsx +0 -35
- package/src/TextInput.tsx +0 -95
- package/src/index.ts +0 -5
package/README.md
CHANGED
|
@@ -7,23 +7,90 @@ Text input provides a way for inputting text. The component must be nested
|
|
|
7
7
|
within a [`Field`](/package/field). See [`Field`](/package/field) for more
|
|
8
8
|
details.
|
|
9
9
|
|
|
10
|
+
## Examples
|
|
11
|
+
|
|
12
|
+
### Controlled
|
|
13
|
+
|
|
14
|
+
A `TextInput` can be either controlled or uncontrolled. To control a `TextInput`
|
|
15
|
+
provide a `value`, as well as an `onChange` function to set the new value when
|
|
16
|
+
the select is updated.
|
|
17
|
+
|
|
18
|
+
```jsx live
|
|
19
|
+
const [value, setValue] = React.useState(1000000.101);
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<Stack gap="large">
|
|
23
|
+
<Field label="Example controlled">
|
|
24
|
+
<TextInput value={value} onChange={e => setValue(e.target.value)} />
|
|
25
|
+
</Field>
|
|
26
|
+
<Text>The current value is: {value}</Text>
|
|
27
|
+
</Stack>
|
|
28
|
+
);
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Uncontrolled
|
|
32
|
+
|
|
33
|
+
A `TextInput` can also be uncontrolled, managing it's own internal state. To
|
|
34
|
+
access the value, instead of writing an onChange handler, you would use a ref to
|
|
35
|
+
get form values from the DOM.
|
|
36
|
+
|
|
37
|
+
```jsx live
|
|
38
|
+
const inputRef = React.useRef(null);
|
|
39
|
+
const [value, setValue] = React.useState('');
|
|
40
|
+
const showValueHandler = React.useCallback(() => {
|
|
41
|
+
setValue(inputRef.current?.value);
|
|
42
|
+
}, [setValue]);
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<Stack gap="large">
|
|
46
|
+
<Field label="Example uncontrolled">
|
|
47
|
+
<FloatInput ref={inputRef} />
|
|
48
|
+
</Field>
|
|
49
|
+
<Button onClick={showValueHandler}>Show input value</Button>
|
|
50
|
+
<Text>The input value is: {value}</Text>
|
|
51
|
+
</Stack>
|
|
52
|
+
);
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Input Adornments
|
|
56
|
+
|
|
57
|
+
You can also add adornments to the `TextInput` component (at the start or end).
|
|
58
|
+
|
|
10
59
|
```jsx live
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
60
|
+
const [value, setValue] = React.useState(10000.101);
|
|
61
|
+
|
|
62
|
+
return (
|
|
63
|
+
<Stack gap="large">
|
|
64
|
+
<Field label="Example">
|
|
65
|
+
<TextInput type="numeric" onChange={e => setValue(e.target.value)}>
|
|
66
|
+
<InputAdornment placement="start">
|
|
67
|
+
<Text>~</Text>
|
|
68
|
+
</InputAdornment>
|
|
69
|
+
<InputAdornment placement="end">
|
|
70
|
+
<Text>%</Text>
|
|
71
|
+
</InputAdornment>
|
|
72
|
+
</TextInput>
|
|
73
|
+
</Field>
|
|
74
|
+
<Text>The current value is: {value}</Text>
|
|
75
|
+
</Stack>
|
|
76
|
+
);
|
|
14
77
|
```
|
|
15
78
|
|
|
16
79
|
## Props
|
|
17
80
|
|
|
18
|
-
| Prop | Type
|
|
19
|
-
| ------------ |
|
|
20
|
-
| data? | [DataAttributeMap][data-attribute-map]
|
|
21
|
-
| type? | 'text' \| 'password' \| 'email' \| 'search' \| 'number' \| 'tel' \| 'url'
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
81
|
+
| Prop | Type | Default | Description |
|
|
82
|
+
| ------------ | ----------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------- |
|
|
83
|
+
| data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes for the component. |
|
|
84
|
+
| type? | 'text' \| 'password' \| 'email' \| 'search' \| 'number' \| 'tel' \| 'url' | 'text' | Sets the type attribute for the component. |
|
|
85
|
+
| mode? | 'none' \| 'text' \| 'tel' \| 'url' \| 'email' \| 'numeric' \| 'decimal' \| 'search' | | Sets the input mode attribute for the component. |
|
|
86
|
+
| onBlur? | React.FocusEventHandler\<HTMLInputElement\> | | Callback function when input field component loses focuses. |
|
|
87
|
+
| onFocus? | React.FocusEventHandler\<HTMLInputElement\> | | Callback function when the input field component is in focus. |
|
|
88
|
+
| onChange? | React.FormEventHandler\<HTMLInputElement\> | | Callback function when value of the input field has been changed. |
|
|
89
|
+
| placeholder? | string | | Specifies a short hint that describes the expected value (type of value) of the input field. |
|
|
90
|
+
| value? | string \| number \| readonly string[] | | Specifies the value of the input field. |
|
|
91
|
+
| children? | [AdornmentChildren][adornment-children] | | Allows setting of adornments at the start and/or end of the input component. |
|
|
27
92
|
|
|
28
93
|
[data-attribute-map]:
|
|
29
|
-
https://
|
|
94
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|
|
95
|
+
[adornment-children]:
|
|
96
|
+
https://github.com/brighte-labs/spark-web/blob/d4da46200f2d6e5e9291d3c650eaaff7e53f411b/packages/text-input/src/childrenToAdornments.tsx#L12
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
declare type InputAdornmentContextType = {
|
|
3
|
+
placement: PlacementType;
|
|
4
|
+
};
|
|
5
|
+
export declare const useInputAdornmentContext: () => InputAdornmentContextType | null;
|
|
6
|
+
declare const placementToPadding: {
|
|
7
|
+
readonly start: {
|
|
8
|
+
readonly paddingLeft: "medium";
|
|
9
|
+
readonly paddingRight: "xsmall";
|
|
10
|
+
};
|
|
11
|
+
readonly end: {
|
|
12
|
+
readonly paddingLeft: "xsmall";
|
|
13
|
+
readonly paddingRight: "medium";
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
declare type PlacementType = keyof typeof placementToPadding;
|
|
17
|
+
export declare type InputAdornmentProps = {
|
|
18
|
+
children: ReactElement;
|
|
19
|
+
/**
|
|
20
|
+
* When using another input component as an adornment, you may optionally
|
|
21
|
+
* override the parent field label.
|
|
22
|
+
*/
|
|
23
|
+
fieldLabel?: string;
|
|
24
|
+
/** Where to place the adornment. */
|
|
25
|
+
placement: PlacementType;
|
|
26
|
+
/**
|
|
27
|
+
* By default, the adornment element will be wrapped to provide alignment and
|
|
28
|
+
* spacing, use the "raw" property to opt-out of this behaviour.
|
|
29
|
+
*/
|
|
30
|
+
raw?: boolean;
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Places an element at the "start" or "end" of the input, only one adornment
|
|
34
|
+
* may be provided for each placement. By default, the adornment element will be
|
|
35
|
+
* wrapped to provide alignment and spacing, use the "raw" property to opt-out
|
|
36
|
+
* of this behaviour.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* <TextInput>
|
|
40
|
+
* <InputAdornment placement="start">
|
|
41
|
+
* <Text tone="placeholder">$</Text>
|
|
42
|
+
* </InputAdornment>
|
|
43
|
+
* </TextInput>
|
|
44
|
+
*/
|
|
45
|
+
export declare const InputAdornment: ({ children, fieldLabel, placement, raw, }: InputAdornmentProps) => JSX.Element;
|
|
46
|
+
export {};
|