@akinon/pz-basket-gift- pack
安装方法
您可以使用以下命令安装最新插件的扩展:
npx @akinon/projectzero@latest --plugins
道具
| 属性 | 类型 | 说明 |
|---|---|---|
| 篮子项目 | object | 产品信息. |
| 使用模式 | boolean | 此道具决定礼物包表是否在模式内显示 。 当设置为真时, 窗体会在模式内打开 . |
| 模式分类Name | string | 这种道具用于自定义模式的整体风格. |
| 模式 | string | 此道具设定模式的标题 . |
| 模式分类Name | string | 这种道具用于自定义模式内容的样式. |
| 自定义UIRender | React.ReactNode | 可选功能可以完全定制礼品包渲染. 接收者有GiftPack,有Note,Note, textReacount,在AddGiftPack,在RemoveGiftPack,在AddNote,在RemoveNote,形成Content和翻译道具. |
| 自定义 GiftNoteFormUI渲染器 | React.ReactNode | 完全自定义窗体渲染的可选功能 。 接收寄存器、出错、注解、文本区域查询,在Submit上,删除Note并处理Submit道具. |
自定义礼品包
import PluginModule, { Component } from '@akinon/next/components/plugin-module';
<PluginModule
component={Component.BasketGiftPack}
props={{
basketItem,
customUIRender: ({
hasGiftPack,
hasNote,
onAddGiftPack,
onRemoveGiftPack,
onAddNote,
formContent,
translations
}) => (
<>
<div className="flex gap-4">
<div className="flex items-center gap-2">
<Icon
name="giftbox"
size={15}
className={clsx(
hasGiftPack ? 'text-[#e85150]' : 'text-[#000000]'
)}
/>
{hasGiftPack ? (
<span className="text-[0.75rem]">
{translations.giftPackAdded}
</span>
) : (
<Button
appearance="ghost"
className="text-[#000000] cursor-pointer underline border-0 px-0 py-0 text-[0.75rem] h-auto hover:bg-transparent hover:text-[#000000]"
onClick={onAddGiftPack}
data-testid="add-basket-gift-pack"
>
{translations.addGiftPack}
</Button>
)}
</div>
{hasGiftPack && (
<>
<Button
appearance="ghost"
className="text-[#000000] cursor-pointer border-0 px-0 py-0 text-[0.75rem] select-none underline h-auto hover:bg-transparent hover:text-[#000000]"
onClick={onAddNote}
data-testid="add-basket-gift-pack-note"
>
{hasNote.title}
</Button>
<Button
appearance="ghost"
className={clsx(
'text-[#000000] cursor-pointer border-0 px-0 py-0 text-[0.75rem] underline h-auto hover:bg-transparent hover:text-[#000000]',
{
hidden: !hasGiftPack
}
)}
onClick={onRemoveGiftPack}
data-testid="remove-basket-gift-pack"
>
{translations.removeGiftPack}
</Button>
</>
)}
</div>
<div className="w-full">
{hasNote.state ? <div className="mt-4">{formContent}</div> : null}
</div>
</>
)
}}
/>;
自定义礼品注释表单
import PluginModule, { Component } from '@akinon/next/components/plugin-module';
<PluginModule
component={Component.BasketGiftPack}
props={{
basketItem,
customGiftNoteFormUIRender: ({
register,
errors,
note,
textAreaCount,
onSubmit,
removeNote,
handleSubmit
}) => (
<div className="bg-gray-100 p-4 rounded-md shadow-lg">
<h4 className="text-lg font-semibold mb-2">🎁 Add Your Note</h4>
<form onSubmit={handleSubmit(onSubmit)}>
<textarea
className="w-full border border-gray-300 p-2"
{...register('message')}
placeholder="Mesajını yaz..."
rows={5}
value={note}
/>
{errors.message && (
<p className="text-red-500 text-sm">{errors.message.message}</p>
)}
<div className="flex justify-between items-center mt-2">
<span className="text-sm text-gray-500">
{textAreaCount}/ 160 characters
</span>
<div className="flex gap-2">
<button
type="button"
onClick={removeNote}
className="text-sm underline"
>
Delete Note
</button>
<button
type="submit"
className="bg-black text-white px-3 py-1 text-sm rounded"
>
Save
</button>
</div>
</div>
</form>
</div>
)
}}
/>;