se-design 0.0.179 → 0.0.180
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/components/SearchBox/index.d.ts +1 -0
- package/dist/index38.js +13 -13
- package/dist/index38.js.map +1 -1
- package/package.json +1 -1
package/dist/index38.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import n, { useState as p, useRef as V, useEffect as r, useMemo as $ } from "react";
|
|
2
|
-
import { Icon as
|
|
2
|
+
import { Icon as g } from "./index5.js";
|
|
3
3
|
import { LabelChip as D } from "./index9.js";
|
|
4
4
|
import { debounce as F } from "./index167.js";
|
|
5
5
|
/* empty css */
|
|
6
|
-
function q(
|
|
6
|
+
function q(d) {
|
|
7
7
|
const {
|
|
8
|
-
disabled:
|
|
8
|
+
disabled: v = !1,
|
|
9
9
|
placeholder: N = "Search",
|
|
10
|
-
debounceDuration:
|
|
10
|
+
debounceDuration: h = 500,
|
|
11
11
|
onInputChange: c = () => {
|
|
12
12
|
},
|
|
13
13
|
onSearchClear: S = () => {
|
|
@@ -20,7 +20,7 @@ function q(h) {
|
|
|
20
20
|
chips: s = [],
|
|
21
21
|
showSearchIcon: w = !0,
|
|
22
22
|
renderFilterComponent: b = null
|
|
23
|
-
} =
|
|
23
|
+
} = d, [a, l] = p(""), [t, C] = p(!d?.collapsible), [i, E] = p(s || []), m = V(null);
|
|
24
24
|
r(() => {
|
|
25
25
|
t && m.current && setTimeout(() => m?.current?.focus(), 0);
|
|
26
26
|
}, [t]), r(() => {
|
|
@@ -28,7 +28,7 @@ function q(h) {
|
|
|
28
28
|
}, [o]), r(() => {
|
|
29
29
|
E(s);
|
|
30
30
|
}, [s]);
|
|
31
|
-
const u = $(() => F(c,
|
|
31
|
+
const u = $(() => F(c, h), [c, h]);
|
|
32
32
|
r(() => () => {
|
|
33
33
|
u.cancel();
|
|
34
34
|
}, [u]);
|
|
@@ -39,8 +39,8 @@ function q(h) {
|
|
|
39
39
|
}, B = () => {
|
|
40
40
|
f && a?.trimEnd() === "" && C(!1);
|
|
41
41
|
}, H = (e) => {
|
|
42
|
-
E(i.filter((_) => _?.
|
|
43
|
-
},
|
|
42
|
+
E(i.filter((_) => _?.id !== e?.id)), I(e);
|
|
43
|
+
}, x = i?.length > 0;
|
|
44
44
|
return /* @__PURE__ */ n.createElement("div", {
|
|
45
45
|
className: `se-search-box ${t ? "expand-box" : "shrink-box"}`,
|
|
46
46
|
style: {
|
|
@@ -49,15 +49,15 @@ function q(h) {
|
|
|
49
49
|
}, t && /* @__PURE__ */ n.createElement("div", {
|
|
50
50
|
className: "search-box-container"
|
|
51
51
|
}, /* @__PURE__ */ n.createElement("div", {
|
|
52
|
-
className: `chips-and-search-box-container${
|
|
53
|
-
},
|
|
52
|
+
className: `chips-and-search-box-container${x ? " has-chips" : ""}`
|
|
53
|
+
}, x && i?.map((e) => /* @__PURE__ */ n.createElement(D, {
|
|
54
54
|
key: e?.value,
|
|
55
55
|
label: e?.label,
|
|
56
56
|
icon: "close",
|
|
57
57
|
onIconClick: () => H(e)
|
|
58
58
|
})), /* @__PURE__ */ n.createElement("div", {
|
|
59
59
|
className: "search-input-container"
|
|
60
|
-
}, w && /* @__PURE__ */ n.createElement(
|
|
60
|
+
}, w && /* @__PURE__ */ n.createElement(g, {
|
|
61
61
|
name: "search",
|
|
62
62
|
className: "search-icon img-wrap",
|
|
63
63
|
onClick: () => f && C((e) => !e)
|
|
@@ -69,9 +69,9 @@ function q(h) {
|
|
|
69
69
|
placeholder: N,
|
|
70
70
|
onChange: (e) => R(e.target.value),
|
|
71
71
|
value: a,
|
|
72
|
-
disabled:
|
|
72
|
+
disabled: v,
|
|
73
73
|
onBlur: B
|
|
74
|
-
}), !!a && /* @__PURE__ */ n.createElement(
|
|
74
|
+
}), !!a && /* @__PURE__ */ n.createElement(g, {
|
|
75
75
|
name: "close",
|
|
76
76
|
className: "cross-icon img-wrap",
|
|
77
77
|
onClick: y
|
package/dist/index38.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index38.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\ninterface ChipType {\n label: string;\n value: string;\n [key: string]: any;\n}\n\nexport interface SearchBoxProps {\n disabled?: boolean;\n placeholder?: string;\n debounceDuration?: number;\n onInputChange?: (value: string) => void;\n onSearchClear?: () => void;\n onChipRemove?: (chip: ChipType) => void;\n updateSearchString?: string;\n collapsible?: boolean;\n width?: string;\n chips?: ChipType[];\n showSearchIcon?: boolean;\n renderFilterComponent?: () => React.ReactNode;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n const {\n disabled = false,\n placeholder = 'Search',\n debounceDuration = 500,\n onInputChange = () => {},\n onSearchClear = () => {},\n onChipRemove = () => {},\n updateSearchString = '',\n collapsible = false,\n width = '200px',\n chips = [],\n showSearchIcon = true,\n renderFilterComponent = null\n } = props;\n const [inputValue, setInputValue] = useState('');\n const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n const [searchChips, setSearchChips] = useState<ChipType[]>(chips || []);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (isExpanded && inputRef.current) {\n setTimeout(() => inputRef?.current?.focus(), 0);\n }\n }, [isExpanded]);\n\n // Manually update the searchbox text\n useEffect(() => {\n if (updateSearchString !== inputValue) {\n setInputValue(updateSearchString);\n }\n }, [updateSearchString]);\n\n useEffect(() => {\n setSearchChips(chips);\n }, [chips]);\n\n const debouncedOnInputChange = useMemo(\n () => debounce(onInputChange, debounceDuration),\n [onInputChange, debounceDuration]\n );\n\n useEffect(() => {\n return () => {\n debouncedOnInputChange.cancel();\n };\n }, [debouncedOnInputChange]);\n\n const onChangeHandler = (value: string) => {\n setInputValue(value);\n debouncedOnInputChange(value);\n };\n\n const iconClickHandler = () => {\n setInputValue('');\n onInputChange('');\n onSearchClear();\n };\n\n const onBlurHandler = () => {\n if (collapsible && inputValue?.trimEnd() === '') {\n setIsExpanded(false);\n }\n };\n\n const removeChip = (chip: ChipType) => {\n setSearchChips(searchChips.filter((c) => c?.
|
|
1
|
+
{"version":3,"file":"index38.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\ninterface ChipType {\n label: string;\n value: string;\n id: string | number;\n [key: string]: any;\n}\n\nexport interface SearchBoxProps {\n disabled?: boolean;\n placeholder?: string;\n debounceDuration?: number;\n onInputChange?: (value: string) => void;\n onSearchClear?: () => void;\n onChipRemove?: (chip: ChipType) => void;\n updateSearchString?: string;\n collapsible?: boolean;\n width?: string;\n chips?: ChipType[];\n showSearchIcon?: boolean;\n renderFilterComponent?: () => React.ReactNode;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n const {\n disabled = false,\n placeholder = 'Search',\n debounceDuration = 500,\n onInputChange = () => {},\n onSearchClear = () => {},\n onChipRemove = () => {},\n updateSearchString = '',\n collapsible = false,\n width = '200px',\n chips = [],\n showSearchIcon = true,\n renderFilterComponent = null\n } = props;\n const [inputValue, setInputValue] = useState('');\n const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n const [searchChips, setSearchChips] = useState<ChipType[]>(chips || []);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (isExpanded && inputRef.current) {\n setTimeout(() => inputRef?.current?.focus(), 0);\n }\n }, [isExpanded]);\n\n // Manually update the searchbox text\n useEffect(() => {\n if (updateSearchString !== inputValue) {\n setInputValue(updateSearchString);\n }\n }, [updateSearchString]);\n\n useEffect(() => {\n setSearchChips(chips);\n }, [chips]);\n\n const debouncedOnInputChange = useMemo(\n () => debounce(onInputChange, debounceDuration),\n [onInputChange, debounceDuration]\n );\n\n useEffect(() => {\n return () => {\n debouncedOnInputChange.cancel();\n };\n }, [debouncedOnInputChange]);\n\n const onChangeHandler = (value: string) => {\n setInputValue(value);\n debouncedOnInputChange(value);\n };\n\n const iconClickHandler = () => {\n setInputValue('');\n onInputChange('');\n onSearchClear();\n };\n\n const onBlurHandler = () => {\n if (collapsible && inputValue?.trimEnd() === '') {\n setIsExpanded(false);\n }\n };\n\n const removeChip = (chip: ChipType) => {\n setSearchChips(searchChips.filter((c) => c?.id !== chip?.id));\n onChipRemove(chip);\n };\n\n const hasChips = searchChips?.length > 0;\n\n return (\n <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }}>\n {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n {isExpanded && (\n <div className=\"search-box-container\">\n <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n {hasChips &&\n searchChips?.map((chip) => (\n <LabelChip\n key={chip?.value}\n label={chip?.label}\n icon=\"close\"\n onIconClick={() => removeChip(chip)}\n />\n ))}\n <div className=\"search-input-container\">\n {showSearchIcon && (\n <Icon\n name=\"search\"\n className=\"search-icon img-wrap\"\n onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n />\n )}\n <input\n ref={inputRef}\n className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n id=\"search_bar\"\n type=\"text\"\n placeholder={placeholder}\n onChange={(e) => onChangeHandler(e.target.value)}\n value={inputValue}\n disabled={disabled}\n onBlur={onBlurHandler}\n />\n {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n </div>\n </div>\n {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n </div>\n )}\n </div>\n );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","id","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","Icon","name","onClick","prev","ref","type","onChange","e","target","onBlur"],"mappings":"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"}
|