@purr-react-styled-components/components.text-field 0.0.8 → 0.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/index.cjs +31 -0
- package/dist/index.d.cts +29 -0
- package/dist/index.d.ts +29 -0
- package/dist/index.js +31 -0
- package/package.json +8 -8
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use strict';var m=require('clsx'),r=require('react'),z=require('@purr-core/hooks.focus-with-callback'),M=require('@purr-core/hooks.sync-state-with-props'),x=require('styled-components'),utils_helpers=require('@purr-react-styled-components/utils.helpers');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var m__default=/*#__PURE__*/_interopDefault(m);var r__default=/*#__PURE__*/_interopDefault(r);var z__default=/*#__PURE__*/_interopDefault(z);var M__default=/*#__PURE__*/_interopDefault(M);var x__default=/*#__PURE__*/_interopDefault(x);var w=e=>{let t=0,i=0,n=e?.$variant==="standard"?0:14;return e?.$hasPreAdornment?t=32+n:t=n,e?.$hasPostAdornment?i=32+n:i=n,x.css`
|
|
2
|
+
padding: 0px ${i}px 0px ${t}px;
|
|
3
|
+
`},f={Container:x__default.default.div`
|
|
4
|
+
transition: all 200ms ease-in-out;
|
|
5
|
+
position: relative;
|
|
6
|
+
width: ${({$fullWidth:e})=>e?"100%":"210px"};
|
|
7
|
+
height: 56px;
|
|
8
|
+
border-radius: 4px;
|
|
9
|
+
${utils_helpers.getVariantStyle};
|
|
10
|
+
`,Input:x__default.default.input`
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
transition: all 200ms ease-in-out;
|
|
13
|
+
width: 100%;
|
|
14
|
+
margin-top: ${({$hasLabel:e})=>e?"12px":"0px"};
|
|
15
|
+
height: ${({$hasLabel:e})=>e?"44px":"56px"};
|
|
16
|
+
line-height: ${({$hasLabel:e})=>e?"44px":"56px"};
|
|
17
|
+
background-color: transparent;
|
|
18
|
+
color: #ffffff;
|
|
19
|
+
border-radius: 4px;
|
|
20
|
+
border: none;
|
|
21
|
+
font-size: 16px;
|
|
22
|
+
${w};
|
|
23
|
+
|
|
24
|
+
&:focus-visible {
|
|
25
|
+
outline: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&:disabled {
|
|
29
|
+
color: #ffffff80;
|
|
30
|
+
}
|
|
31
|
+
`};var N=r.lazy(()=>import('@purr-react-styled-components/components.post-adornment').then(e=>({default:e.PostAdornment}))),W=r.lazy(()=>import('@purr-react-styled-components/components.pre-adornment').then(e=>({default:e.PreAdornment}))),k=r.forwardRef(({value:e="",variant:t="standard",onChange:i,onFocus:n,onBlur:c,clear:u,htmlAttributes:b,inputHtmlAttributes:g,preAdornmentProps:a,postAdornmentProps:l,className:T="",fullWidth:p=false,disabled:o=false,required:d=false,error:v=null,isStandalone:P=false},y)=>{let{currentValue:F,setCurrentValue:S}=M__default.default(e,P),{captureOnFocus:C,captureOnBlur:A}=z__default.default({onFocus:n,onBlur:c}),V=s=>{i?.(s.target.value,s),S(s.target.value);};return r__default.default.createElement(f.Container,{...b,$fullWidth:p,$variant:t,$disabled:o,className:m__default.default("text-field",p&&"text-field--full-width",d&&"text-field--required",o&&"text-field--disabled",v&&"text-field--error",`text-field--variant-${t}`,T)},r__default.default.createElement(r.Suspense,null,!!a?.children&&r__default.default.createElement(W,{...a,hasLabel:true,variant:t})),r__default.default.createElement(f.Input,{...g,$variant:t,$hasPreAdornment:!!a?.children,$hasPostAdornment:!!u||!!l?.children,$hasLabel:true,ref:y,value:F,disabled:o,required:d,onChange:V,onFocus:C,onBlur:A,className:m__default.default("text-field-input",`text-field-input--variant-${t}`,o&&"text-field-input--disabled",d&&"text-field-input--required")}),r__default.default.createElement(r.Suspense,null,!!l?.children&&r__default.default.createElement(N,{...l,clear:u,variant:t})))});k.displayName="TextField";exports.TextField=k;
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React, { ChangeEvent, FocusEventHandler, HTMLAttributes, InputHTMLAttributes } from 'react';
|
|
2
|
+
import { FieldError } from 'react-hook-form';
|
|
3
|
+
import { IExtendable } from '@purr-core/utils.definitions';
|
|
4
|
+
import { IPostAdornmentProps } from '@purr-react-styled-components/components.post-adornment';
|
|
5
|
+
import { IPreAdornmentProps } from '@purr-react-styled-components/components.pre-adornment';
|
|
6
|
+
|
|
7
|
+
type TTextFieldVariant = "standard" | "outlined" | "filled";
|
|
8
|
+
interface ITextFieldProps {
|
|
9
|
+
value?: string;
|
|
10
|
+
variant?: TTextFieldVariant;
|
|
11
|
+
onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
|
|
12
|
+
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
13
|
+
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
14
|
+
clear?: () => void;
|
|
15
|
+
htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
|
|
16
|
+
inputHtmlAttributes?: InputHTMLAttributes<HTMLInputElement> & IExtendable;
|
|
17
|
+
preAdornmentProps?: IPreAdornmentProps;
|
|
18
|
+
postAdornmentProps?: IPostAdornmentProps;
|
|
19
|
+
className?: string;
|
|
20
|
+
fullWidth?: boolean;
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
required?: boolean;
|
|
23
|
+
error?: FieldError;
|
|
24
|
+
isStandalone?: boolean;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
declare const TextField: React.ForwardRefExoticComponent<ITextFieldProps & React.RefAttributes<HTMLInputElement>>;
|
|
28
|
+
|
|
29
|
+
export { type ITextFieldProps, type TTextFieldVariant, TextField };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React, { ChangeEvent, FocusEventHandler, HTMLAttributes, InputHTMLAttributes } from 'react';
|
|
2
|
+
import { FieldError } from 'react-hook-form';
|
|
3
|
+
import { IExtendable } from '@purr-core/utils.definitions';
|
|
4
|
+
import { IPostAdornmentProps } from '@purr-react-styled-components/components.post-adornment';
|
|
5
|
+
import { IPreAdornmentProps } from '@purr-react-styled-components/components.pre-adornment';
|
|
6
|
+
|
|
7
|
+
type TTextFieldVariant = "standard" | "outlined" | "filled";
|
|
8
|
+
interface ITextFieldProps {
|
|
9
|
+
value?: string;
|
|
10
|
+
variant?: TTextFieldVariant;
|
|
11
|
+
onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
|
|
12
|
+
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
13
|
+
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
14
|
+
clear?: () => void;
|
|
15
|
+
htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
|
|
16
|
+
inputHtmlAttributes?: InputHTMLAttributes<HTMLInputElement> & IExtendable;
|
|
17
|
+
preAdornmentProps?: IPreAdornmentProps;
|
|
18
|
+
postAdornmentProps?: IPostAdornmentProps;
|
|
19
|
+
className?: string;
|
|
20
|
+
fullWidth?: boolean;
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
required?: boolean;
|
|
23
|
+
error?: FieldError;
|
|
24
|
+
isStandalone?: boolean;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
declare const TextField: React.ForwardRefExoticComponent<ITextFieldProps & React.RefAttributes<HTMLInputElement>>;
|
|
28
|
+
|
|
29
|
+
export { type ITextFieldProps, type TTextFieldVariant, TextField };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import m from'clsx';import r,{lazy,forwardRef,Suspense}from'react';import z from'@purr-core/hooks.focus-with-callback';import M from'@purr-core/hooks.sync-state-with-props';import x,{css}from'styled-components';import {getVariantStyle}from'@purr-react-styled-components/utils.helpers';var w=e=>{let t=0,i=0,n=e?.$variant==="standard"?0:14;return e?.$hasPreAdornment?t=32+n:t=n,e?.$hasPostAdornment?i=32+n:i=n,css`
|
|
2
|
+
padding: 0px ${i}px 0px ${t}px;
|
|
3
|
+
`},f={Container:x.div`
|
|
4
|
+
transition: all 200ms ease-in-out;
|
|
5
|
+
position: relative;
|
|
6
|
+
width: ${({$fullWidth:e})=>e?"100%":"210px"};
|
|
7
|
+
height: 56px;
|
|
8
|
+
border-radius: 4px;
|
|
9
|
+
${getVariantStyle};
|
|
10
|
+
`,Input:x.input`
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
transition: all 200ms ease-in-out;
|
|
13
|
+
width: 100%;
|
|
14
|
+
margin-top: ${({$hasLabel:e})=>e?"12px":"0px"};
|
|
15
|
+
height: ${({$hasLabel:e})=>e?"44px":"56px"};
|
|
16
|
+
line-height: ${({$hasLabel:e})=>e?"44px":"56px"};
|
|
17
|
+
background-color: transparent;
|
|
18
|
+
color: #ffffff;
|
|
19
|
+
border-radius: 4px;
|
|
20
|
+
border: none;
|
|
21
|
+
font-size: 16px;
|
|
22
|
+
${w};
|
|
23
|
+
|
|
24
|
+
&:focus-visible {
|
|
25
|
+
outline: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&:disabled {
|
|
29
|
+
color: #ffffff80;
|
|
30
|
+
}
|
|
31
|
+
`};var N=lazy(()=>import('@purr-react-styled-components/components.post-adornment').then(e=>({default:e.PostAdornment}))),W=lazy(()=>import('@purr-react-styled-components/components.pre-adornment').then(e=>({default:e.PreAdornment}))),k=forwardRef(({value:e="",variant:t="standard",onChange:i,onFocus:n,onBlur:c,clear:u,htmlAttributes:b,inputHtmlAttributes:g,preAdornmentProps:a,postAdornmentProps:l,className:T="",fullWidth:p=false,disabled:o=false,required:d=false,error:v=null,isStandalone:P=false},y)=>{let{currentValue:F,setCurrentValue:S}=M(e,P),{captureOnFocus:C,captureOnBlur:A}=z({onFocus:n,onBlur:c}),V=s=>{i?.(s.target.value,s),S(s.target.value);};return r.createElement(f.Container,{...b,$fullWidth:p,$variant:t,$disabled:o,className:m("text-field",p&&"text-field--full-width",d&&"text-field--required",o&&"text-field--disabled",v&&"text-field--error",`text-field--variant-${t}`,T)},r.createElement(Suspense,null,!!a?.children&&r.createElement(W,{...a,hasLabel:true,variant:t})),r.createElement(f.Input,{...g,$variant:t,$hasPreAdornment:!!a?.children,$hasPostAdornment:!!u||!!l?.children,$hasLabel:true,ref:y,value:F,disabled:o,required:d,onChange:V,onFocus:C,onBlur:A,className:m("text-field-input",`text-field-input--variant-${t}`,o&&"text-field-input--disabled",d&&"text-field-input--required")}),r.createElement(Suspense,null,!!l?.children&&r.createElement(N,{...l,clear:u,variant:t})))});k.displayName="TextField";export{k as TextField};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purr-react-styled-components/components.text-field",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -25,15 +25,15 @@
|
|
|
25
25
|
"react": "*",
|
|
26
26
|
"styled-components": "*",
|
|
27
27
|
"clsx": "*",
|
|
28
|
-
"@purr-react-styled-components/components.post-adornment": "0.0.
|
|
29
|
-
"@purr-
|
|
30
|
-
"@purr-
|
|
31
|
-
"@purr-
|
|
32
|
-
"@purr-
|
|
33
|
-
"@purr-core/hooks.
|
|
28
|
+
"@purr-react-styled-components/components.post-adornment": "0.0.9",
|
|
29
|
+
"@purr-core/utils.definitions": "0.0.12",
|
|
30
|
+
"@purr-react-styled-components/utils.helpers": "0.0.8",
|
|
31
|
+
"@purr-core/hooks.sync-state-with-props": "0.0.9",
|
|
32
|
+
"@purr-react-styled-components/components.pre-adornment": "0.0.9",
|
|
33
|
+
"@purr-core/hooks.focus-with-callback": "0.0.9"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@purr-react-styled-components/components.icon": "0.0.
|
|
36
|
+
"@purr-react-styled-components/components.icon": "0.0.9"
|
|
37
37
|
},
|
|
38
38
|
"author": "@DinhThienPhuc",
|
|
39
39
|
"license": "ISC",
|