@toptal/picasso-input 3.0.8 → 3.0.9
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/dist-package/src/Input/Input.d.ts.map +1 -1
- package/dist-package/src/Input/Input.js +3 -1
- package/dist-package/src/Input/Input.js.map +1 -1
- package/package.json +1 -1
- package/src/Input/Input.tsx +7 -1
- package/src/Input/story/StatusHorizontal.example.tsx +25 -0
- package/src/Input/story/index.jsx +5 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,mBAAmB,EACnB,UAAU,EACX,MAAM,OAAO,CAAA;AACd,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAcjE,OAAO,KAAK,EACV,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,iCAAiC,CAAA;AACxC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -15,6 +15,7 @@ import { OutlinedInput } from '@toptal/picasso-outlined-input';
|
|
|
15
15
|
import { disableUnsupportedProps, usePropDeprecationWarning, } from '@toptal/picasso-utils';
|
|
16
16
|
import { InputLimitAdornment, InputIconAdornment, InputValidIconAdornment, } from '@toptal/picasso-input-adornment';
|
|
17
17
|
import { Container } from '@toptal/picasso-container';
|
|
18
|
+
import { useFieldsLayoutContext } from '@toptal/picasso-form';
|
|
18
19
|
const hasRemainingCounter = ({ counter, limit, }) => Boolean(counter === 'remaining' && limit);
|
|
19
20
|
const hasEnteredCounter = ({ counter }) => counter === 'entered';
|
|
20
21
|
const hasCounter = ({ counter, limit }) => hasRemainingCounter({ counter, limit }) || hasEnteredCounter({ counter });
|
|
@@ -44,7 +45,8 @@ const EndAdornment = (props) => {
|
|
|
44
45
|
return null;
|
|
45
46
|
};
|
|
46
47
|
const MultilineAdornment = ({ charsLength, counter, limit, showCounter, status, testIds, }) => {
|
|
47
|
-
|
|
48
|
+
const { layout } = useFieldsLayoutContext();
|
|
49
|
+
return (React.createElement(Container, { flex: true, className: layout === 'horizontal' ? '[grid-area:error]' : '' },
|
|
48
50
|
showCounter && (React.createElement(InputLimitAdornment, { testIds: testIds,
|
|
49
51
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
50
52
|
charsLength: charsLength,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;AAOA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EACL,uBAAuB,EACvB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/Input/Input.tsx
CHANGED
|
@@ -25,6 +25,7 @@ import type {
|
|
|
25
25
|
InputIconAdornmentProps,
|
|
26
26
|
} from '@toptal/picasso-input-adornment'
|
|
27
27
|
import type { BaseInputProps, Status } from '@toptal/picasso-outlined-input'
|
|
28
|
+
import { useFieldsLayoutContext } from '@toptal/picasso-form'
|
|
28
29
|
|
|
29
30
|
export interface Props
|
|
30
31
|
extends BaseProps,
|
|
@@ -195,8 +196,13 @@ const MultilineAdornment = ({
|
|
|
195
196
|
status,
|
|
196
197
|
testIds,
|
|
197
198
|
}: MultilineAdornmentProps) => {
|
|
199
|
+
const { layout } = useFieldsLayoutContext()
|
|
200
|
+
|
|
198
201
|
return (
|
|
199
|
-
<Container
|
|
202
|
+
<Container
|
|
203
|
+
flex
|
|
204
|
+
className={layout === 'horizontal' ? '[grid-area:error]' : ''}
|
|
205
|
+
>
|
|
200
206
|
{showCounter && (
|
|
201
207
|
<InputLimitAdornment
|
|
202
208
|
testIds={testIds}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Input, Form } from '@toptal/picasso'
|
|
3
|
+
|
|
4
|
+
const Example = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Form layout='horizontal'>
|
|
7
|
+
<Form.Field>
|
|
8
|
+
<Form.Label>Multiline Success</Form.Label>
|
|
9
|
+
<Input value='Ukraine' multiline rows={4} status='success' />
|
|
10
|
+
</Form.Field>
|
|
11
|
+
<Form.Field>
|
|
12
|
+
<Form.Label>Multiline Success With Counter</Form.Label>
|
|
13
|
+
<Input
|
|
14
|
+
value='Ukraine'
|
|
15
|
+
multiline
|
|
16
|
+
rows={4}
|
|
17
|
+
status='success'
|
|
18
|
+
counter='entered'
|
|
19
|
+
/>
|
|
20
|
+
</Form.Field>
|
|
21
|
+
</Form>
|
|
22
|
+
)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export default Example
|
|
@@ -32,6 +32,11 @@ page
|
|
|
32
32
|
)
|
|
33
33
|
.addExample('Input/story/Disabled.example.tsx', 'Disabled', 'base/Input')
|
|
34
34
|
.addExample('Input/story/Status.example.tsx', 'Status', 'base/Input')
|
|
35
|
+
.addExample(
|
|
36
|
+
'Input/story/StatusHorizontal.example.tsx',
|
|
37
|
+
'Multiline status horizontal',
|
|
38
|
+
'base/Input'
|
|
39
|
+
)
|
|
35
40
|
.addExample('Input/story/WithIcon.example.tsx', 'With icon', 'base/Input')
|
|
36
41
|
.addExample('Input/story/Sizes.example.tsx', 'Sizes', 'base/Input')
|
|
37
42
|
.addExample('Input/story/FullWidth.example.tsx', 'Full width', 'base/Input')
|