@comms-id / abn-react
一个React钩子和一个完成的Comms组件。ID ABN搜索。用户输入企业名称、ABN或ASIC号（ACN、ARBN）。易于访问，没有布局变化，始终显示数据属性。React 18或更高版本；这取决于 @comms-id/abr-abn-lookup 没有别的了。
import { createAbrAbnLookupBrowserClient } from "@comms-id/abr-abn-lookup/browser";
import { AbnAutocomplete } from "@comms-id/abr-abn-lookup-react";
const client = createAbrAbnLookupBrowserClient({ relayUrl: "/api/comms-id/abr-abn-lookup" });
export const Supplier = () => (
<AbnAutocomplete
client={client}
label="Business name or ABN"
onSelect={(business) => console.log(business.name, business.formattedAbn, business.status)}
/>
);
relayUrl 您自己的服务器路由，设置与 @comms-id/relay您的服务器将调用签名为您注册的应用程序，因此浏览器不持有凭据。
这个领域是做什么的
- 一个名字: 用户暂停后，它会提示商家（姓名、银行号码、州和邮政编码）。选择一个查找并打电话
onSelect. - ABN或ASIC号码（ACN， ARBN）： 首先在浏览器中检查一个整数（9或11位数字，允许空格和连字符）。无效的数字不发送任何信息，并且字段说明了原因（“这不是一个有效的ABN：检查数字不匹配。”）。查找一个有效的数字。
- 没有匹配不是中断。 “没有找到业务”和“业务搜索不可用”是不同的信息；故障提示“再试一次”。
onSelect(business, timing) 得到一个 AbnBusiness 无论哪个来源回答了这个查询： abn， formattedAbn， asicNumber 与 asicNumberType （ACN， ARBN， ARSN 或者 undetermined： ABR从不说明种类；v2, # 714), name， status， entityType， gstRegistered， state， postcode， source （live 或者 snapshot)， asAt 和 attribution.
您自己的标记： useAbn
const abn = useAbn({ client, onSelect });
return (
<>
<input {...abn.getInputProps()} />
<ul {...abn.getListboxProps("Matches")} hidden={!abn.state.open}>
{abn.state.suggestions.map((s, i) => (
<li key={`${s.abn}-${i}`} {...abn.getOptionProps(i)}>{describeSuggestion(s).primary}</li>
))}
</ul>
<p {...abn.getStatusProps()}>{abn.state.announcement}</p>
</>
);
道具获取者携带WAI-ARIA组合框合约：角色， aria-expanded， aria-controls， aria-activedescendant，键处理（箭头，Enter, Escape, Tab）和一个礼貌的生活区域。当你使用钩子时，自己显示属性： abn.state.attribution.
组件
道具: client 和 label (需要), onSelect， minChars (3), debounceMs (400), limit (8), prefer （{ state, postcode })， idPrefix， name， placeholder， disabled， required， className， listLabel， showTiming (真正的), renderOption.
使用自定义属性对其进行样式化 --comms-id-text， --comms-id-surface， --comms-id-border， --comms-id-active， --comms-id-radius 或者是 comms-id-abr-abn-lookup__* 类名。它不需要样式表。
- 列表在输入的下面浮动；打开它什么也不动。一个注释行有保留的高度并且不换行：结果是摘要（名称，ABN，状态，GST），而不是卡片，因此页面永远不会移动。使用
onSelect我郑重声明。 - 它在服务器上以相同的结构呈现，并在StrictMode下工作。
数据属性
组件总是显示属性：回复所携带的属性，或者当回复没有属性时显示标准文本。不要隐藏它。
LICENSE 是消费者客户牌照。