midsuit
/
prasi-bun
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix add npm

This commit is contained in:
Rizky 2023-10-26 18:01:58 +07:00
parent b4041e6733
commit 49564083c7
1 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/web/src/render/ed/panel/popup/npm/npm-import.tsx
View File

@ -11,8 +11,11 @@ export const EdNpmImport = ({ mode }: { mode: "page" | "site" }) => {
const local = useLocal({ const local = useLocal({
search: { search: {
text: "", text: "",
timeout: null as any,
loading: false,
result: [] as AlgoliaResult[], result: [] as AlgoliaResult[],
options: [] as { label: string; value: string }[], options: [] as { label: string; value: string }[],
el: null as null | HTMLInputElement,
}, },
status: "init" as "init" | "ready", status: "init" as "init" | "ready",
size: 0, size: 0,
@ -43,23 +46,30 @@ export const EdNpmImport = ({ mode }: { mode: "page" | "site" }) => {
}, [mode === "page" ? p.page.cur.id : p.site.id]); }, [mode === "page" ? p.page.cur.id : p.site.id]);
return ( return (
<div className="flex flex-1 flex-col items-stretch text-[14px]"> <div className={cx("flex flex-1 flex-col items-stretch text-[14px]", mode)}>
<div className="border-b h-[30px] relative"> <div className="border-b h-[30px] relative">
<div className="absolute inset-0 z-10 flex justify-between flex items-stretch"> <div className="absolute inset-0 z-10 flex justify-between flex items-stretch">
<div className="uppercase px-2 flex items-center font-mono text-[11px]"> <div className="uppercase px-2 flex items-center font-mono text-[11px]">
{mode} {mode}
</div> </div>
<Select <Select
noOptionsMessage={() => "No packages found"} noOptionsMessage={() =>
local.search.loading ? "Loading..." : "No packages found..."
}
className={selectStyle} className={selectStyle}
unstyled unstyled
classNamePrefix={"sel"} classNamePrefix={"sel"}
placeholder="Search Packages" placeholder="Search Packages"
value={null}
inputValue={local.search.text} inputValue={local.search.text}
openMenuOnClick={false} openMenuOnClick={false}
openMenuOnFocus={false} openMenuOnFocus={false}
onInputChange={async (text) => { onInputChange={async (text) => {
local.search.text = text; local.search.text = text;
local.search.loading = true;
local.render();
clearTimeout(local.search.timeout);
local.search.timeout = setTimeout(async () => {
local.search.result = await searchPackage(text); local.search.result = await searchPackage(text);
local.search.options = []; local.search.options = [];
for (const r of local.search.result) { for (const r of local.search.result) {
@ -68,12 +78,18 @@ export const EdNpmImport = ({ mode }: { mode: "page" | "site" }) => {
value: `${r.name}-><-${r.version}`, value: `${r.name}-><-${r.version}`,
}); });
} }
local.search.loading = false;
local.render(); local.render();
}, 500);
}} }}
options={local.search.options} options={local.search.options}
onChange={async (e) => { onChange={async (e) => {
local.search.text = "";
local.render();
if (e) { if (e) {
const [name, version] = e.value.split("-><-"); const [name, version] = e.value.split("-><-");
if (mode === "page") { if (mode === "page") {
await db.npm_page.create({ await db.npm_page.create({
data: { id_page: p.page.cur.id, module: name, version }, data: { id_page: p.page.cur.id, module: name, version },
@ -85,6 +101,16 @@ export const EdNpmImport = ({ mode }: { mode: "page" | "site" }) => {
} }
reload(); reload();
} }
setTimeout(() => {
const el = document.querySelector(
`.${mode} .sel__input`
) as HTMLInputElement;
if (el) {
el.focus();
el.select();
}
});
}} }}
/> />
<div className="w-[100px] flex items-center justify-center"> <div className="w-[100px] flex items-center justify-center">
@ -133,9 +159,6 @@ const selectStyle = css`
border-left: 1px solid #ececeb; border-left: 1px solid #ececeb;
border-right: 1px solid #ececeb; border-right: 1px solid #ececeb;
} }
.sel__control--is-focused {
box-shadow: none !important;
}
.sel__menu { .sel__menu {
border-radius: 0px; border-radius: 0px;
background: white; background: white;
@ -147,9 +170,10 @@ const selectStyle = css`
.sel__option { .sel__option {
padding: 2px 5px; padding: 2px 5px;
border-bottom: 1px solid #ececeb; border-bottom: 1px solid #ececeb;
&:hover {
background: #e0e9fa;
} }
.sel__option--is-selected,
.sel__option--is-focused {
background: #e0e9fa;
} }
.sel__indicator { .sel__indicator {
width: 15px; width: 15px;