@iit/precision-ui 0.8.39 → 0.8.40
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.
|
@@ -11,6 +11,7 @@ interface SearchInputWithButtonProps {
|
|
|
11
11
|
onClickSubmitButton?: () => void;
|
|
12
12
|
onClickClearButton?: () => void;
|
|
13
13
|
withoutBottomBorder?: boolean;
|
|
14
|
+
submitButtonClassName?: string;
|
|
14
15
|
}
|
|
15
16
|
declare const SearchInputWithButton: React.FC<SearchInputWithButtonProps>;
|
|
16
17
|
export default SearchInputWithButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInputWithButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/SearchInputWithButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"SearchInputWithButton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/input/SearchInputWithButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAQ1D,UAAU,0BAA0B;IAClC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC/D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAClE,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAA;IAChC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAA;CAC/B;AAED,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA4F/D,CAAA;AAED,eAAe,qBAAqB,CAAA"}
|
package/dist/index.es14.js
CHANGED
|
@@ -1,44 +1,45 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t, { useState as p, useRef as N, useEffect as S } from "react";
|
|
2
2
|
import { Button as m } from "./index.es2.js";
|
|
3
|
-
import { Close16X16 as
|
|
4
|
-
import { Input as
|
|
5
|
-
import { SearchIcon as
|
|
3
|
+
import { Close16X16 as k } from "@iit/precision-ui-icons";
|
|
4
|
+
import { Input as R } from "./index.es11.js";
|
|
5
|
+
import { SearchIcon as B } from "lucide-react";
|
|
6
6
|
import { cn as a } from "./index.es55.js";
|
|
7
|
-
const
|
|
7
|
+
const C = ({
|
|
8
8
|
id: h,
|
|
9
9
|
placeholder: f,
|
|
10
10
|
className: v,
|
|
11
|
-
containerClassName:
|
|
11
|
+
containerClassName: d,
|
|
12
12
|
value: r = "",
|
|
13
|
-
onChange:
|
|
14
|
-
onKeyDown:
|
|
13
|
+
onChange: e,
|
|
14
|
+
onKeyDown: b,
|
|
15
15
|
onClickSubmitButton: g,
|
|
16
16
|
onClickClearButton: l,
|
|
17
17
|
withoutBottomBorder: y,
|
|
18
|
-
|
|
18
|
+
submitButtonClassName: w,
|
|
19
|
+
...x
|
|
19
20
|
}) => {
|
|
20
|
-
const [o,
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
const [o, n] = p(r), [i, u] = p(!1), s = N(null);
|
|
22
|
+
S(() => {
|
|
23
|
+
n(r);
|
|
23
24
|
}, [r]);
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
},
|
|
27
|
-
|
|
25
|
+
const E = (c) => {
|
|
26
|
+
n(c.target.value), e && e(c);
|
|
27
|
+
}, I = () => {
|
|
28
|
+
n(""), s.current && s.current.focus(), e && e({
|
|
28
29
|
target: { value: "" }
|
|
29
30
|
}), l && l();
|
|
30
31
|
};
|
|
31
|
-
return /* @__PURE__ */
|
|
32
|
+
return /* @__PURE__ */ t.createElement(
|
|
32
33
|
"div",
|
|
33
34
|
{
|
|
34
|
-
className: a("relative w-full max-w-2xl",
|
|
35
|
+
className: a("relative w-full max-w-2xl", d),
|
|
35
36
|
onMouseEnter: () => u(!0),
|
|
36
37
|
onMouseLeave: () => u(!1)
|
|
37
38
|
},
|
|
38
|
-
/* @__PURE__ */
|
|
39
|
-
|
|
39
|
+
/* @__PURE__ */ t.createElement(
|
|
40
|
+
R,
|
|
40
41
|
{
|
|
41
|
-
ref:
|
|
42
|
+
ref: s,
|
|
42
43
|
id: h,
|
|
43
44
|
placeholder: f,
|
|
44
45
|
className: a(
|
|
@@ -47,42 +48,43 @@ const B = ({
|
|
|
47
48
|
y && "border-b border-transparent"
|
|
48
49
|
),
|
|
49
50
|
value: o,
|
|
50
|
-
onChange:
|
|
51
|
-
onKeyDown:
|
|
52
|
-
...
|
|
51
|
+
onChange: E,
|
|
52
|
+
onKeyDown: b,
|
|
53
|
+
...x
|
|
53
54
|
}
|
|
54
55
|
),
|
|
55
|
-
/* @__PURE__ */
|
|
56
|
+
/* @__PURE__ */ t.createElement(
|
|
56
57
|
m,
|
|
57
58
|
{
|
|
58
59
|
type: "button",
|
|
59
60
|
variant: "ghost",
|
|
60
61
|
size: "icon",
|
|
61
62
|
className: a(
|
|
62
|
-
"absolute right-14 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground p-0 hover:bg-navy group",
|
|
63
|
+
"absolute right-14 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground p-0 hover:bg-navy group duration-200 transition-colors",
|
|
63
64
|
i ? "bg-white" : "bg-navy-opacity-8"
|
|
64
65
|
),
|
|
65
|
-
onClick:
|
|
66
|
-
style: { display: o ? "block" : "none" }
|
|
66
|
+
onClick: I,
|
|
67
|
+
style: { display: o.length >= 3 ? "block" : "none" }
|
|
67
68
|
},
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
/* @__PURE__ */
|
|
69
|
+
/* @__PURE__ */ t.createElement(k, { className: "h-[10px] w-[10px] left-[5px] top-0 relative text-navy group-hover:text-whitish" }),
|
|
70
|
+
/* @__PURE__ */ t.createElement("span", { className: "sr-only" }, "Очистить")
|
|
70
71
|
),
|
|
71
|
-
/* @__PURE__ */
|
|
72
|
+
/* @__PURE__ */ t.createElement(
|
|
72
73
|
m,
|
|
73
74
|
{
|
|
74
75
|
className: a(
|
|
75
|
-
"absolute right-2 top-1/2 -translate-y-1/2 text-navy h-10 w-10 hover:bg-navy group/submit disabled:pointer-events-auto active:transform active:scale-90",
|
|
76
|
+
"absolute right-2 top-1/2 -translate-y-1/2 text-navy h-10 w-10 hover:bg-navy group/submit disabled:pointer-events-auto active:transform active:scale-90 duration-200 transition-colors",
|
|
77
|
+
w,
|
|
76
78
|
i ? "bg-white" : "bg-navy-opacity-8"
|
|
77
79
|
),
|
|
78
|
-
disabled:
|
|
80
|
+
disabled: o.length < 3,
|
|
79
81
|
onClick: g || void 0
|
|
80
82
|
},
|
|
81
|
-
/* @__PURE__ */
|
|
83
|
+
/* @__PURE__ */ t.createElement(B, { className: "h-4 w-4 group-hover/submit:text-whitish" })
|
|
82
84
|
)
|
|
83
85
|
);
|
|
84
|
-
},
|
|
86
|
+
}, L = C;
|
|
85
87
|
export {
|
|
86
|
-
|
|
88
|
+
L as default
|
|
87
89
|
};
|
|
88
90
|
//# sourceMappingURL=index.es14.js.map
|
package/dist/index.es14.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es14.js","sources":["../src/components/ui/input/SearchInputWithButton.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from
|
|
1
|
+
{"version":3,"file":"index.es14.js","sources":["../src/components/ui/input/SearchInputWithButton.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\r\n\r\nimport { Button } from '../button'\r\nimport { Close16X16 } from '@iit/precision-ui-icons'\r\nimport { Input } from '@/components/ui/input'\r\nimport { SearchIcon } from 'lucide-react'\r\nimport { cn } from '@/lib/utils/cn'\r\n\r\ninterface SearchInputWithButtonProps {\r\n id?: string\r\n placeholder?: string\r\n className?: string\r\n containerClassName?: string\r\n value?: string\r\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void\r\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void\r\n onClickSubmitButton?: () => void\r\n onClickClearButton?: () => void\r\n withoutBottomBorder?: boolean\r\n submitButtonClassName?: string\r\n}\r\n\r\nconst SearchInputWithButton: React.FC<SearchInputWithButtonProps> = ({\r\n id,\r\n placeholder,\r\n className,\r\n containerClassName,\r\n value = '',\r\n onChange,\r\n onKeyDown,\r\n onClickSubmitButton,\r\n onClickClearButton,\r\n withoutBottomBorder,\r\n submitButtonClassName,\r\n ...props\r\n}) => {\r\n const [inputValue, setInputValue] = useState(value)\r\n const [isHovered, setIsHovered] = useState(false) // Track hover state\r\n const inputRef = useRef<HTMLInputElement>(null)\r\n\r\n useEffect(() => {\r\n setInputValue(value)\r\n }, [value])\r\n\r\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n setInputValue(event.target.value)\r\n if (onChange) {\r\n onChange(event)\r\n }\r\n }\r\n\r\n const handleClearClick = () => {\r\n setInputValue('')\r\n if (inputRef.current) {\r\n inputRef.current.focus()\r\n }\r\n if (onChange) {\r\n onChange({\r\n target: { value: '' },\r\n } as React.ChangeEvent<HTMLInputElement>)\r\n }\r\n if (onClickClearButton) {\r\n onClickClearButton()\r\n }\r\n }\r\n\r\n return (\r\n <div\r\n className={cn('relative w-full max-w-2xl', containerClassName)}\r\n onMouseEnter={() => setIsHovered(true)}\r\n onMouseLeave={() => setIsHovered(false)}\r\n >\r\n <Input\r\n ref={inputRef}\r\n id={id}\r\n placeholder={placeholder}\r\n className={cn(\r\n 'w-full pl-8 pr-20 hover:bg-navy-opacity-4-absolute rounded-full bg-whitish h-14',\r\n className,\r\n withoutBottomBorder && 'border-b border-transparent'\r\n )}\r\n value={inputValue}\r\n onChange={handleInputChange}\r\n onKeyDown={onKeyDown}\r\n {...props}\r\n />\r\n <Button\r\n type=\"button\"\r\n variant=\"ghost\"\r\n size=\"icon\"\r\n className={cn(\r\n 'absolute right-14 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground p-0 hover:bg-navy group duration-200 transition-colors',\r\n isHovered ? 'bg-white' : 'bg-navy-opacity-8'\r\n )}\r\n onClick={handleClearClick}\r\n style={{ display: inputValue.length >= 3 ? 'block' : 'none' }}\r\n >\r\n <Close16X16 className=\"h-[10px] w-[10px] left-[5px] top-0 relative text-navy group-hover:text-whitish\" />\r\n <span className=\"sr-only\">Очистить</span>\r\n </Button>\r\n\r\n <Button\r\n className={cn(\r\n 'absolute right-2 top-1/2 -translate-y-1/2 text-navy h-10 w-10 hover:bg-navy group/submit disabled:pointer-events-auto active:transform active:scale-90 duration-200 transition-colors',\r\n submitButtonClassName,\r\n isHovered ? 'bg-white' : 'bg-navy-opacity-8'\r\n )}\r\n disabled={inputValue.length < 3}\r\n onClick={onClickSubmitButton || undefined}\r\n >\r\n <SearchIcon className=\"h-4 w-4 group-hover/submit:text-whitish\" />\r\n </Button>\r\n </div>\r\n )\r\n}\r\n\r\nexport default SearchInputWithButton\r\n"],"names":["SearchInputWithButton","id","placeholder","className","containerClassName","value","onChange","onKeyDown","onClickSubmitButton","onClickClearButton","withoutBottomBorder","submitButtonClassName","props","inputValue","setInputValue","useState","isHovered","setIsHovered","inputRef","useRef","useEffect","handleInputChange","event","handleClearClick","React","cn","Input","Button","Close16X16","SearchIcon","SearchInputWithButton$1"],"mappings":";;;;;;AAsBA,MAAMA,IAA8D,CAAC;AAAA,EACnE,IAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASV,CAAK,GAC5C,CAACW,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1CG,IAAWC,EAAyB,IAAI;AAE9C,EAAAC,EAAU,MAAM;AACd,IAAAN,EAAcT,CAAK;AAAA,EAAA,GAClB,CAACA,CAAK,CAAC;AAEJ,QAAAgB,IAAoB,CAACC,MAA+C;AAC1D,IAAAR,EAAAQ,EAAM,OAAO,KAAK,GAC5BhB,KACFA,EAASgB,CAAK;AAAA,EAChB,GAGIC,IAAmB,MAAM;AAC7B,IAAAT,EAAc,EAAE,GACZI,EAAS,WACXA,EAAS,QAAQ,SAEfZ,KACOA,EAAA;AAAA,MACP,QAAQ,EAAE,OAAO,GAAG;AAAA,IAAA,CACkB,GAEtCG,KACiBA;EACrB;AAIA,SAAAe,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,6BAA6BrB,CAAkB;AAAA,MAC7D,cAAc,MAAMa,EAAa,EAAI;AAAA,MACrC,cAAc,MAAMA,EAAa,EAAK;AAAA,IAAA;AAAA,IAEtCO,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,KAAKR;AAAA,QACL,IAAAjB;AAAA,QACA,aAAAC;AAAA,QACA,WAAWuB;AAAA,UACT;AAAA,UACAtB;AAAA,UACAO,KAAuB;AAAA,QACzB;AAAA,QACA,OAAOG;AAAA,QACP,UAAUQ;AAAA,QACV,WAAAd;AAAA,QACC,GAAGK;AAAA,MAAA;AAAA,IACN;AAAA,IACAY,gBAAAA,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAWF;AAAA,UACT;AAAA,UACAT,IAAY,aAAa;AAAA,QAC3B;AAAA,QACA,SAASO;AAAA,QACT,OAAO,EAAE,SAASV,EAAW,UAAU,IAAI,UAAU,OAAO;AAAA,MAAA;AAAA,MAE5DW,gBAAAA,EAAA,cAACI,GAAW,EAAA,WAAU,iFAAiF,CAAA;AAAA,MACtGJ,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAU,UAAA,GAAU,UAAQ;AAAA,IACpC;AAAA,IAEAA,gBAAAA,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,WAAWF;AAAA,UACT;AAAA,UACAd;AAAA,UACAK,IAAY,aAAa;AAAA,QAC3B;AAAA,QACA,UAAUH,EAAW,SAAS;AAAA,QAC9B,SAASL,KAAuB;AAAA,MAAA;AAAA,MAEhCgB,gBAAAA,EAAA,cAACK,GAAW,EAAA,WAAU,0CAA0C,CAAA;AAAA,IAClE;AAAA,EAAA;AAGN,GAEAC,IAAe9B;"}
|