@ baselayer- sdk/ 自动完成
由Baselayer的注册人支持,自动完成自己的产品
帮助打字的人选择正确的业务。 每个建议都是
已经与周围实体有联系的教会实体:企业
携带注册的州、官员、代理人和地址以及
business_token 让你的基地管理员的搜索 完全是为了那个事业.
它找到一种三种商业方式: 以它的名字, 由在 它,或者通过一个地址 它存档。 不管怎么说,挑剔就是生意.
释前. 至1.0,一个突破的更改会撞出小版本. 1.0冻结API.
- 无框架核心 (单位:千美元)
@baselayer-sdk/autocomplete: 会话,刷新, 退后,每个拒绝 API可以回答,为你处理. - 反应 (单位:千美元)
@baselayer-sdk/autocomplete/react:无头钩,并有风格 组件,BusinessAutocomplete, (中文(简体) ),PersonAutocomplete财务报告和审定财务报表AddressAutocomplete准备离开盒子, 并恢复到结束. - 服务器助手 (单位:千美元)
@baselayer-sdk/autocomplete/server: 一个终点 您的后端添加了此选项, 因此您的 API 密钥永远不会到达浏览器 .
安装
npm install @baselayer-sdk/autocomplete
反应 18 或 19 是可选的对等点; 核心和服务器助手需要 无论是反应还是DOM.
如何融为一体
- 当球场得到焦点, SDK 询问您的结束点一个会话 。 自己的饼干认证电话.
- 您的后端用您的 API 密钥将它薄荷化, 转发页面
Origin, (中文(简体) ), 并返回 Baselayer 的答案不变. - 每个按键都直接用页眉向下划线: 没有饼干,没有钥匙.
- 挑一排手拿起你的形体
business_token。 。 。 . - 您的后端发送符号
POST /searches因此,搜索 解决了被选中的事务.
你的API密钥留在后端 浏览器只持有短寿命 绑定在您的页面源头并带有自身请求的会话 预算.
要求重点提交:
两幅图都是网站的自有图,由 : pnpm diagrams页:1
当文件落在组件后方时, 测试失败 .
1. 在后端添加薄荷端点
Next.js (App路由器), 以 app/api/ac-session/route.ts数字 :
import { createMintHandler } from "@baselayer-sdk/autocomplete/server";
export const POST = createMintHandler({
apiKey: process.env.BASELAYER_API_KEY!,
allowedOrigins: ["https://app.example.com"],
});
快捷键 :
import { mintForOrigin } from "@baselayer-sdk/autocomplete/server";
app.post("/api/ac-session", requireLogin, async (req, res) => {
const origin = req.get("Origin");
if (!origin || !ALLOWED.has(origin)) {
return res.status(403).end();
}
const out = await mintForOrigin({
apiKey: process.env.BASELAYER_API_KEY!,
origin,
});
res.status(out.status).set(out.headers).json(out.body);
});
任何其他后端: 见 薄荷终端合同。 。 。 . 将路线放在自己认证的后面, 就像其它的 API : 每场比赛,你的终点薄荷 都与你的组织池无关.
2. 减少部分
import { useState } from "react";
import { BusinessAutocomplete } from "@baselayer-sdk/autocomplete/react";
import "@baselayer-sdk/autocomplete/react/styles.css";
export function LegalNameField() {
const [name, setName] = useState("");
const [businessToken, setBusinessToken] = useState<string>();
return (
<BusinessAutocomplete
id="legal-name"
label="Legal entity name"
baseUrl="https://api.baselayer.com"
mintUrl="/api/ac-session"
value={name}
onChange={value => {
setName(value);
setBusinessToken(undefined); // an edit is no longer the pick
}}
onPick={(_, pick) => setBusinessToken(pick.businessToken)}
/>
);
}
id 种子组合框的 id: 输入是 ${id}-input标签
${id}-label 菜单 ${id}-menu字段被控制 : value 实值
还有你 onChange 报告打字。 一通电话 onChange 与行
那么,犬形名称 onPick(suggestion, pick),所以清除符号在
onChange,如上,保持选择。 一个模糊的从不挑剔.
其中一个就是连接它:
mintUrl财务报告和审定财务报表baseUrl:你的终点,用你自己的饼干 (单位:千美元)defaultMint(mintUrl), (中文(简体) ),credentials: "same-origin") (中文(简体) ).mint财务报告和审定财务报表baseUrl: 属于您的MintFunction,任何其他电话.client,没有baseUrl: 客户端createAutocompleteClient, (中文(简体) ), 共享到多个字段; 组件从不重置它获得的客户端.
第一个 mint 或者说 mintUrl 用于组件的生命; 新的
baseUrl 重新创建其客户端。 其余是可选的:
mintOn(单位:千美元)"keystroke"当会话定了的时候MINT_TIMINGS(类型)MintTiming) (中文(简体) ).keystroke薄荷在第一个 按键中键, 重排打字的其余部分, 因此单击该类型 无所花去薄荷;focus薄荷随着田地的集中 所以 第一项答复只涉及其建议;request薄荷与第一个 请求,答案等待.enabled(单位:千美元)true: 关闭, 字段是一个简单的输入; 没有什么是刻薄的 而不问任何问题.limit(单位:千美元)5,或会议次数最多时: a. 键弦,从1到20的整数,不超过会话次数最多; 在发送之前, 任何其它内容都会被拒绝, 没有打开菜单.minChars(单位:千美元)3:在按键被发送前被修剪字符.debounceMs(单位:千美元)250:按键键发出前的暂停;a 新的按键键取消 .filters: 缩小每个查询发送的过滤器。 虽然文字比较短 并且菜单要求当事人 继续打入( n)messages.filtersNeedMore,则字符不变 缺少,如果你想说一个数字); aclient你通过自己的onShortStem(单位:千美元)过滤器) (中文(简体) ).onUnavailable({ unavailable }):当部署停止时呼叫 能够薄荷(503代码481),并在可以时再次; 使你的平地 同时输入.list:按以下顺序排列: 企业的官员和代理人people) 及其定义addresses无 默认,每行都是它一直以来唯一的选项 (单位:千美元)一个商业行的行) (中文(简体) ).enabledLines(单位:千美元)["business"]和onPickEntity: 哪些行可以选择. 名称person或者说address警官或被选中的住址也会去onPickEntity作为EntityPick,则需要 (单位:千美元)选择什么) (中文(简体) ).showSelection(单位:千美元)true:在选定军官或地址后,一行 在字段名称下 (单位:千美元)球场下的一行) (中文(简体) ).iconSegments财务报告和审定财务报表icons: 带图标的片段(无 默认;["name", "address"]在名称和地址之前绘制一个 和你自己的图标,按实体或实体和角色,或false无 (单位:千美元)图标) (中文(简体) ).include:自动完成服务为每行扩展的关联实体, 默认情况下layout地点和地点list列表。 自己画行 与renderRow上面写着:include={["people"]}。 。 。 .label: 默认文字<label>;没有它,就没有画.name, (中文(简体) ),inputRef, (中文(简体) ),onFocus财务报告和审定财务报表onBlur:输入的,通过.look, (中文(简体) ),layout, (中文(简体) ),menuWidth, (中文(简体) ),menuFollowsInputWidth, (中文(简体) ),open, (中文(简体) ),classNames, (中文(简体) ),renderLabel, (中文(简体) ),renderInput, (中文(简体) ),renderRow财务报告和审定财务报表unstyled: 见 样式· ;layout是行中的每个位置的字段 显示( e)一行的地盘和地盘) (中文(简体) ).messages: 见 错误状态。 。 。 .
3. 将取出物与搜索
您的后端发送符号为 POST /searches 机构 :
{ "business_token": "…" }
象征着 name 财务报告和审定财务报表 address: 自行发送,因为
搜索拒绝一个携带它的尸体 任何一旁.
然后,搜索决定了 确切的行业被选中。 一个标志
15分钟BUSINESS_TOKEN_TTL_SECONDS,900) 从行是
服务。 这个 pick 那个 onPick 手拿着它 businessToken, (中文(简体) ),
与 pickedAt 财务报告和审定财务报表 expiresAt (时代 ms, pickedAt 加上这15个
分钟). expiresAt 是咨询,有点晚了,自从钟开始
(a) API是拒绝代号(422代号3042)的东西。 若为
搜索时拒绝(终止,或业务已去),丢弃标志
搜索对象 name 财务报告和审定财务报表 address 已输入 : refusedThePin(status, code)
告诉你什么时候才对.
这个 pick 还携带 matchedOn:这行除了名字之外,还匹配什么,
当来访者受到官员、地址或状态的限制(见
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}对吗(三); [] 单挑名字
已经到达.
PersonAutocomplete 财务报告和审定财务报表 AddressAutocomplete 通过一个
个人或地址。 菜单中的每个人或地址都有多少
每一条线,其中之一
这些企业: onPick 给你一个 BusinessPick 同样的
businessToken,则 businessName 为您命名字段,以及 through,则
个人或地址是:
<PersonAutocomplete
id="officer-name"
label="Officer's name"
baseUrl="https://api.baselayer.com"
mintUrl="/api/ac-session"
value={typed}
onChange={setTyped}
onPick={pick => {
setBusinessName(pick.businessName);
setBusinessToken(pick.businessToken);
}}
/>
一个商业行可以列出它导致的相同方式,每个线条 警官、探员和下方的住址 让警官也来选
<BusinessAutocomplete
…
list={["people", "addresses"]}
enabledLines={["business", "person"]}
onPick={(_, pick) => setBusinessToken(pick.businessToken)}
onPickEntity={officer => setOfficer(officer)}
/>
生意总是排成一行的 选一个警官
手执 onPickEntity { type: "person", token: null, label } (一行人数)
将企业名称放入字段,并在
线条下。 见
企业、人员和地址。 。 。 .
会话搜索其范围允许的, 您的薄荷终点可以缩小 (见 缩小会话),以及 sDK从不要求外面的东西.
文档
- 薄荷终端合同: 三条规则,和 next.js、快车和卷轴示例
- 无头用法:钩子,和无反应的核心
- 企业、人员和地址: 三条路线,
一个会话可以搜索,以及
search - 样式: CSS变量,类名,使道具,
unstyled - 错误状态: SDK 用每一个答案都做什么
- 警卫:会议是什么,从不离开 您的后端
- 网站: 概览、生成的 API 参考和 演示,以及如何出版
- 现场演示: 用自己的 API 键尝试,然后运行搜索
发展
pnpm install
pnpm test # vitest: core, server and site in node, react in jsdom
pnpm typecheck
pnpm lint
pnpm build # dist/ with ESM, CJS and type declarations
pnpm site # the site on http://localhost:3000
pnpm demo # the same, opened on the demo, forwarding to production
DEMO_API=sample pnpm demo # the demo on made-up data, with no network
释放是标记;见 捐款额。 。 。 .
许可证
阿帕奇 - 2.0