@shopbb/helium 0.6.4 → 0.7.0
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/AddToCartButton.d.ts +17 -22
- package/dist/components/AddToCartButton.d.ts.map +1 -1
- package/dist/components/AddToCartButton.js +8 -45
- package/dist/components/AddToCartButton.js.map +1 -1
- package/dist/components/AddressForm.d.ts +42 -18
- package/dist/components/AddressForm.d.ts.map +1 -1
- package/dist/components/AddressForm.js +23 -20
- package/dist/components/AddressForm.js.map +1 -1
- package/dist/components/AddressList.d.ts +34 -17
- package/dist/components/AddressList.d.ts.map +1 -1
- package/dist/components/AddressList.js +7 -21
- package/dist/components/AddressList.js.map +1 -1
- package/dist/components/AddressPicker.d.ts +14 -16
- package/dist/components/AddressPicker.d.ts.map +1 -1
- package/dist/components/AddressPicker.js +10 -26
- package/dist/components/AddressPicker.js.map +1 -1
- package/dist/components/AnalyticsProvider.d.ts +5 -2
- package/dist/components/AnalyticsProvider.d.ts.map +1 -1
- package/dist/components/AnalyticsProvider.js +13 -11
- package/dist/components/AnalyticsProvider.js.map +1 -1
- package/dist/components/BuyNowButton.d.ts +7 -24
- package/dist/components/BuyNowButton.d.ts.map +1 -1
- package/dist/components/BuyNowButton.js +9 -43
- package/dist/components/BuyNowButton.js.map +1 -1
- package/dist/components/CartCheckoutButton.d.ts +10 -21
- package/dist/components/CartCheckoutButton.d.ts.map +1 -1
- package/dist/components/CartCheckoutButton.js +6 -11
- package/dist/components/CartCheckoutButton.js.map +1 -1
- package/dist/components/CartCost.d.ts +15 -23
- package/dist/components/CartCost.d.ts.map +1 -1
- package/dist/components/CartCost.js +1 -3
- package/dist/components/CartCost.js.map +1 -1
- package/dist/components/CartForm.d.ts +30 -102
- package/dist/components/CartForm.d.ts.map +1 -1
- package/dist/components/CartForm.js +32 -172
- package/dist/components/CartForm.js.map +1 -1
- package/dist/components/DiscountComponents.d.ts +67 -17
- package/dist/components/DiscountComponents.d.ts.map +1 -1
- package/dist/components/DiscountComponents.js +28 -74
- package/dist/components/DiscountComponents.js.map +1 -1
- package/dist/components/DiscountSelector.d.ts +50 -15
- package/dist/components/DiscountSelector.d.ts.map +1 -1
- package/dist/components/DiscountSelector.js +16 -44
- package/dist/components/DiscountSelector.js.map +1 -1
- package/dist/components/hooks/useOptimisticCart.d.ts +36 -37
- package/dist/components/hooks/useOptimisticCart.d.ts.map +1 -1
- package/dist/components/hooks/useOptimisticCart.js +95 -127
- package/dist/components/hooks/useOptimisticCart.js.map +1 -1
- package/dist/components/index.d.ts +24 -45
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +21 -37
- package/dist/components/index.js.map +1 -1
- package/dist/index.d.ts +0 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -10
- package/src/components/AddToCartButton.tsx +34 -92
- package/src/components/AddressForm.tsx +56 -26
- package/src/components/AddressList.tsx +42 -33
- package/src/components/AddressPicker.tsx +19 -29
- package/src/components/AnalyticsProvider.tsx +18 -13
- package/src/components/BuyNowButton.tsx +28 -93
- package/src/components/CartCheckoutButton.tsx +16 -33
- package/src/components/CartCost.tsx +16 -28
- package/src/components/CartForm.tsx +87 -231
- package/src/components/DiscountComponents.tsx +94 -100
- package/src/components/DiscountSelector.tsx +68 -49
- package/src/components/hooks/useOptimisticCart.ts +122 -156
- package/src/components/index.ts +51 -99
- package/src/index.ts +0 -2
- /package/src/components/{AddressBookProvider.tsx → AddressBookProvider.tsx.deleted-0.7} +0 -0
- /package/src/components/{CartLineQuantityAdjustButton.tsx → CartLineQuantityAdjustButton.tsx.deleted-0.7} +0 -0
- /package/src/components/{CartProvider.tsx → CartProvider.tsx.deleted-0.7} +0 -0
- /package/src/components/{DiscountProvider.tsx → DiscountProvider.tsx.deleted-0.7} +0 -0
- /package/src/components/hooks/{useMounted.ts → useMounted.ts.deleted-0.7} +0 -0
- /package/src/{handleCartFormAction.ts → handleCartFormAction.ts.deleted-0.7} +0 -0
|
@@ -1,46 +1,41 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* <AddToCartButton> — 加入购物车按钮
|
|
3
3
|
*
|
|
4
|
-
*
|
|
4
|
+
* helium 0.7:对齐 Hydrogen 模式。这是 <CartForm action=LinesAdd> 的便捷包装。
|
|
5
5
|
*
|
|
6
|
-
*
|
|
7
|
-
* - hydrate 后 JS 拦截 submit → fetch /cart → CartProvider.applyCart → 无刷新
|
|
8
|
-
* - loading 状态由 CartForm.fetcher 暴露,通过 useFetcher() 读取
|
|
9
|
-
*
|
|
10
|
-
* 商家也可以直接组合 <CartForm>,不用我们这个 wrapper:
|
|
6
|
+
* 商家也可以直接用 <CartForm>(更灵活):
|
|
11
7
|
*
|
|
12
8
|
* <CartForm route="/cart" action={CartForm.ACTIONS.LinesAdd} inputs={{ lines: [...] }}>
|
|
13
|
-
*
|
|
9
|
+
* {(fetcher) => (
|
|
10
|
+
* <button type="submit" disabled={fetcher.state !== 'idle'}>
|
|
11
|
+
* {fetcher.state === 'idle' ? '加入购物车' : '加入中...'}
|
|
12
|
+
* </button>
|
|
13
|
+
* )}
|
|
14
14
|
* </CartForm>
|
|
15
|
+
*
|
|
16
|
+
* 想要加购后自定义行为(弹抽屉、跳页等):商家组件用 useFetcher / useNavigation
|
|
17
|
+
* 监听全局 fetcher 状态。Hydrogen demo store 用 `useAside().open()` 模式。
|
|
15
18
|
*/
|
|
16
19
|
import * as React from 'react';
|
|
17
20
|
export interface AddToCartButtonProps {
|
|
18
|
-
/**
|
|
21
|
+
/** variant GID */
|
|
19
22
|
variantId: string;
|
|
20
23
|
/** 数量,默认 1 */
|
|
21
24
|
quantity?: number;
|
|
22
|
-
/** 行级 attributes
|
|
25
|
+
/** 行级 attributes */
|
|
23
26
|
attributes?: Array<{
|
|
24
27
|
key: string;
|
|
25
28
|
value: string;
|
|
26
29
|
}>;
|
|
27
|
-
/**
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
onError?: (err: Error) => void;
|
|
31
|
-
/** 加购中显示的文本 */
|
|
32
|
-
loadingText?: React.ReactNode;
|
|
33
|
-
/** 不可用时显示的文本 */
|
|
30
|
+
/** optimistic UI 用:传整个 variant 对象(含 product 等) */
|
|
31
|
+
selectedVariant?: any;
|
|
32
|
+
/** Disabled 文本 */
|
|
34
33
|
unavailableText?: React.ReactNode;
|
|
35
|
-
/** disabled */
|
|
36
34
|
disabled?: boolean;
|
|
37
|
-
/** 包装 form className */
|
|
38
35
|
className?: string;
|
|
39
|
-
/**
|
|
40
|
-
buttonClassName?: string;
|
|
41
|
-
/** 提交的 route,默认 /cart */
|
|
36
|
+
/** 提交 route,默认 /cart */
|
|
42
37
|
route?: string;
|
|
43
|
-
/**
|
|
38
|
+
/** 按钮 children */
|
|
44
39
|
children?: React.ReactNode;
|
|
45
40
|
}
|
|
46
41
|
export declare function AddToCartButton(props: AddToCartButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddToCartButton.d.ts","sourceRoot":"","sources":["../../src/components/AddToCartButton.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"AddToCartButton.d.ts","sourceRoot":"","sources":["../../src/components/AddToCartButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,oBAAoB;IACnC,kBAAkB;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,kDAAkD;IAClD,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,kBAAkB;IAClB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAuC1D"}
|
|
@@ -1,52 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
* <AddToCartButton> — 加入购物车按钮
|
|
4
|
-
*
|
|
5
|
-
* 对齐 Shopify Hydrogen:本质是包了一个 <CartForm action={LinesAdd}> + <button type="submit">。
|
|
6
|
-
*
|
|
7
|
-
* - SSR HTML 是原生 <form>,无 JS 也能加购(form 提交 → 服务端 redirect 回 referrer)
|
|
8
|
-
* - hydrate 后 JS 拦截 submit → fetch /cart → CartProvider.applyCart → 无刷新
|
|
9
|
-
* - loading 状态由 CartForm.fetcher 暴露,通过 useFetcher() 读取
|
|
10
|
-
*
|
|
11
|
-
* 商家也可以直接组合 <CartForm>,不用我们这个 wrapper:
|
|
12
|
-
*
|
|
13
|
-
* <CartForm route="/cart" action={CartForm.ACTIONS.LinesAdd} inputs={{ lines: [...] }}>
|
|
14
|
-
* <button type="submit">加入购物车</button>
|
|
15
|
-
* </CartForm>
|
|
16
|
-
*/
|
|
17
|
-
import * as React from 'react';
|
|
18
|
-
import { CartForm, useFetcher } from './CartForm';
|
|
19
|
-
import { useAnalytics } from './AnalyticsProvider';
|
|
2
|
+
import { CartForm } from './CartForm';
|
|
20
3
|
export function AddToCartButton(props) {
|
|
21
|
-
const { variantId, quantity = 1, attributes,
|
|
4
|
+
const { variantId, quantity = 1, attributes, selectedVariant, unavailableText = '缺货', disabled = false, className, route = '/cart', children = '加入购物车', } = props;
|
|
22
5
|
const line = { merchandiseId: variantId, quantity };
|
|
23
6
|
if (attributes && attributes.length > 0)
|
|
24
7
|
line.attributes = attributes;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
const fetcher = useFetcher();
|
|
32
|
-
const analytics = useAnalytics();
|
|
33
|
-
// 监听 fetcher 完成
|
|
34
|
-
const prevState = React.useRef(fetcher.state);
|
|
35
|
-
React.useEffect(() => {
|
|
36
|
-
const wasNonIdle = prevState.current !== 'idle';
|
|
37
|
-
const isIdle = fetcher.state === 'idle';
|
|
38
|
-
if (wasNonIdle && isIdle) {
|
|
39
|
-
if (fetcher.error) {
|
|
40
|
-
onError?.(new Error(fetcher.error));
|
|
41
|
-
}
|
|
42
|
-
else if (fetcher.data?.cart) {
|
|
43
|
-
analytics.emit('add_to_cart', { variantId, quantity });
|
|
44
|
-
onAdded?.();
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
prevState.current = fetcher.state;
|
|
48
|
-
}, [fetcher.state, fetcher.error, fetcher.data, onAdded, onError, analytics, variantId, quantity]);
|
|
49
|
-
const adding = fetcher.state !== 'idle';
|
|
50
|
-
return (_jsx("button", { type: "submit", className: buttonClassName, disabled: disabled || adding, "data-add-to-cart": true, "data-loading": adding ? '' : undefined, children: adding ? loadingText : disabled ? unavailableText : children }));
|
|
8
|
+
if (selectedVariant)
|
|
9
|
+
line.selectedVariant = selectedVariant;
|
|
10
|
+
return (_jsx(CartForm, { route: route, action: CartForm.ACTIONS.LinesAdd, inputs: { lines: [line] }, children: (fetcher) => {
|
|
11
|
+
const submitting = fetcher.state !== 'idle';
|
|
12
|
+
return (_jsx("button", { type: "submit", className: className, disabled: disabled || submitting, "data-add-to-cart": true, "data-loading": submitting ? '' : undefined, children: submitting ? '加入中...' : disabled ? unavailableText : children }));
|
|
13
|
+
} }));
|
|
51
14
|
}
|
|
52
15
|
//# sourceMappingURL=AddToCartButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddToCartButton.js","sourceRoot":"","sources":["../../src/components/AddToCartButton.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"AddToCartButton.js","sourceRoot":"","sources":["../../src/components/AddToCartButton.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAqB1D,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EACJ,SAAS,EACT,QAAQ,GAAG,CAAC,EACZ,UAAU,EACV,eAAe,EACf,eAAe,GAAG,IAAI,EACtB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,KAAK,GAAG,OAAO,EACf,QAAQ,GAAG,OAAO,GACnB,GAAG,KAAK,CAAC;IAEV,MAAM,IAAI,GAAkB,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;IACnE,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC;QAAE,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IACtE,IAAI,eAAe;QAAE,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;IAE5D,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,QAAQ,EACjC,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,EAAE,YAExB,CAAC,OAAO,EAAE,EAAE;YACX,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,KAAK,MAAM,CAAC;YAC5C,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IAAI,UAAU,4CAElB,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAExC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,GACvD,CACV,CAAC;QACJ,CAAC,GACQ,CACZ,CAAC;AACJ,CAAC"}
|
|
@@ -1,38 +1,62 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* <AddressForm>
|
|
3
3
|
*
|
|
4
|
-
* 地址编辑 /
|
|
5
|
-
* - 表单 state(useState)
|
|
6
|
-
* - 必填验证
|
|
7
|
-
* - 调 useAddressBook().createAddress / updateAddress
|
|
8
|
-
* - userErrors 显示
|
|
9
|
-
* - loading 态
|
|
4
|
+
* 地址编辑 / 新增表单。
|
|
10
5
|
*
|
|
11
|
-
*
|
|
12
|
-
* <AddressForm onSave={() => setCreating(false)} onCancel={...} />
|
|
6
|
+
* helium 0.7:删除 useAddressBook 调用,改为接 onSubmit prop(商家自己处理 mutation)。
|
|
13
7
|
*
|
|
14
|
-
*
|
|
15
|
-
* <AddressForm
|
|
16
|
-
*
|
|
17
|
-
*
|
|
8
|
+
* 用法:
|
|
9
|
+
* <AddressForm
|
|
10
|
+
* initial={editingAddress}
|
|
11
|
+
* onSubmit={async (input, asDefault) => {
|
|
12
|
+
* // 商家调自己的 action 或 fetch
|
|
13
|
+
* const result = await myCreateOrUpdate(input, asDefault);
|
|
14
|
+
* return { userErrors: result.userErrors, address: result.address };
|
|
15
|
+
* }}
|
|
16
|
+
* onSaved={(addr) => setCreating(false)}
|
|
17
|
+
* onCancel={() => setCreating(false)}
|
|
18
|
+
* />
|
|
18
19
|
*/
|
|
19
|
-
import {
|
|
20
|
+
import type { Address } from './AddressList';
|
|
21
|
+
export interface AddressInput {
|
|
22
|
+
firstName: string;
|
|
23
|
+
lastName?: string;
|
|
24
|
+
company?: string;
|
|
25
|
+
phone: string;
|
|
26
|
+
country?: string;
|
|
27
|
+
countryCode?: string;
|
|
28
|
+
province: string;
|
|
29
|
+
provinceCode?: string;
|
|
30
|
+
city: string;
|
|
31
|
+
district?: string;
|
|
32
|
+
address1: string;
|
|
33
|
+
address2?: string;
|
|
34
|
+
zip?: string;
|
|
35
|
+
}
|
|
36
|
+
export interface AddressBookUserError {
|
|
37
|
+
field?: string[];
|
|
38
|
+
code: string;
|
|
39
|
+
message: string;
|
|
40
|
+
}
|
|
41
|
+
export interface AddressFormSubmitResult {
|
|
42
|
+
address?: Address;
|
|
43
|
+
userErrors: AddressBookUserError[];
|
|
44
|
+
}
|
|
20
45
|
export interface AddressFormProps {
|
|
21
46
|
/** 传 = 编辑模式;不传 = 新增模式 */
|
|
22
47
|
initial?: Address;
|
|
48
|
+
/** 提交回调(商家实现 mutation)—— 必填 */
|
|
49
|
+
onSubmit?: (input: AddressInput, asDefault: boolean) => Promise<AddressFormSubmitResult>;
|
|
23
50
|
/** 保存成功后触发 */
|
|
24
|
-
|
|
51
|
+
onSaved?: (address?: Address) => void;
|
|
25
52
|
/** 取消按钮触发 */
|
|
26
53
|
onCancel?: () => void;
|
|
27
|
-
/** 自定义提交按钮文字 */
|
|
28
54
|
submitText?: string;
|
|
29
55
|
cancelText?: string;
|
|
30
|
-
/** 显示"设为默认"
|
|
56
|
+
/** 显示"设为默认"复选框 */
|
|
31
57
|
showDefaultCheckbox?: boolean;
|
|
32
|
-
/** 哪些字段必填,默认 ['firstName','phone','address1','city','province'] */
|
|
33
58
|
requiredFields?: Array<keyof AddressInput>;
|
|
34
59
|
className?: string;
|
|
35
|
-
/** i18n 文案覆盖 */
|
|
36
60
|
i18n?: Partial<AddressFormI18n>;
|
|
37
61
|
}
|
|
38
62
|
export interface AddressFormI18n {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddressForm.d.ts","sourceRoot":"","sources":["../../src/components/AddressForm.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"AddressForm.d.ts","sourceRoot":"","sources":["../../src/components/AddressForm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,oBAAoB,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,KAAK,OAAO,CAAC,uBAAuB,CAAC,CAAC;IACzF,cAAc;IACd,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,aAAa;IACb,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,MAAM,YAAY,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CAChB;AAkBD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA+HlD"}
|
|
@@ -2,23 +2,23 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
/**
|
|
3
3
|
* <AddressForm>
|
|
4
4
|
*
|
|
5
|
-
* 地址编辑 /
|
|
6
|
-
* - 表单 state(useState)
|
|
7
|
-
* - 必填验证
|
|
8
|
-
* - 调 useAddressBook().createAddress / updateAddress
|
|
9
|
-
* - userErrors 显示
|
|
10
|
-
* - loading 态
|
|
5
|
+
* 地址编辑 / 新增表单。
|
|
11
6
|
*
|
|
12
|
-
*
|
|
13
|
-
* <AddressForm onSave={() => setCreating(false)} onCancel={...} />
|
|
7
|
+
* helium 0.7:删除 useAddressBook 调用,改为接 onSubmit prop(商家自己处理 mutation)。
|
|
14
8
|
*
|
|
15
|
-
*
|
|
16
|
-
* <AddressForm
|
|
17
|
-
*
|
|
18
|
-
*
|
|
9
|
+
* 用法:
|
|
10
|
+
* <AddressForm
|
|
11
|
+
* initial={editingAddress}
|
|
12
|
+
* onSubmit={async (input, asDefault) => {
|
|
13
|
+
* // 商家调自己的 action 或 fetch
|
|
14
|
+
* const result = await myCreateOrUpdate(input, asDefault);
|
|
15
|
+
* return { userErrors: result.userErrors, address: result.address };
|
|
16
|
+
* }}
|
|
17
|
+
* onSaved={(addr) => setCreating(false)}
|
|
18
|
+
* onCancel={() => setCreating(false)}
|
|
19
|
+
* />
|
|
19
20
|
*/
|
|
20
21
|
import * as React from 'react';
|
|
21
|
-
import { useAddressBook } from './AddressBookProvider';
|
|
22
22
|
const DEFAULT_I18N = {
|
|
23
23
|
firstName: '收货人',
|
|
24
24
|
lastName: '姓氏',
|
|
@@ -35,8 +35,7 @@ const DEFAULT_I18N = {
|
|
|
35
35
|
saving: '保存中…',
|
|
36
36
|
};
|
|
37
37
|
export function AddressForm(props) {
|
|
38
|
-
const { initial,
|
|
39
|
-
const { createAddress, updateAddress } = useAddressBook();
|
|
38
|
+
const { initial, onSubmit, onSaved, onCancel, submitText = '保存', cancelText = '取消', showDefaultCheckbox = true, requiredFields = ['firstName', 'phone', 'address1', 'city', 'province'], className, i18n: i18nOverride, } = props;
|
|
40
39
|
const i18n = { ...DEFAULT_I18N, ...i18nOverride };
|
|
41
40
|
const [form, setForm] = React.useState({
|
|
42
41
|
firstName: initial?.firstName ?? '',
|
|
@@ -59,23 +58,27 @@ export function AddressForm(props) {
|
|
|
59
58
|
const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));
|
|
60
59
|
const handleSubmit = async (e) => {
|
|
61
60
|
e.preventDefault();
|
|
62
|
-
// 客户端必填校验
|
|
63
61
|
const missing = requiredFields.filter((k) => !(form[k] && String(form[k]).trim()));
|
|
64
62
|
if (missing.length > 0) {
|
|
65
63
|
setErrors([{ field: missing, code: 'MISSING_FIELD', message: '请填写完整地址' }]);
|
|
66
64
|
return;
|
|
67
65
|
}
|
|
66
|
+
if (!onSubmit) {
|
|
67
|
+
setErrors([{ code: 'NO_HANDLER', message: '商家未传入 onSubmit 处理函数' }]);
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
68
70
|
setSaving(true);
|
|
69
71
|
setErrors([]);
|
|
70
72
|
try {
|
|
71
|
-
const result =
|
|
72
|
-
? await updateAddress(initial.id, form, asDefault)
|
|
73
|
-
: await createAddress(form, asDefault);
|
|
73
|
+
const result = await onSubmit(form, asDefault);
|
|
74
74
|
if (result.userErrors.length > 0) {
|
|
75
75
|
setErrors(result.userErrors);
|
|
76
76
|
return;
|
|
77
77
|
}
|
|
78
|
-
|
|
78
|
+
onSaved?.(result.address);
|
|
79
|
+
}
|
|
80
|
+
catch (e) {
|
|
81
|
+
setErrors([{ code: 'SUBMIT_ERROR', message: e?.message || '提交失败' }]);
|
|
79
82
|
}
|
|
80
83
|
finally {
|
|
81
84
|
setSaving(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddressForm.js","sourceRoot":"","sources":["../../src/components/AddressForm.tsx"],"names":[],"mappings":";AAAA
|
|
1
|
+
{"version":3,"file":"AddressForm.js","sourceRoot":"","sources":["../../src/components/AddressForm.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,33 +3,50 @@
|
|
|
3
3
|
*
|
|
4
4
|
* 渲染当前买家的地址列表。
|
|
5
5
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* onAdd={() => openCreateModal()}
|
|
10
|
-
* emptyText="还没有保存的地址"
|
|
11
|
-
* />
|
|
6
|
+
* helium 0.7:addresses 通过 props 传入(不再用 AddressBookProvider)。
|
|
7
|
+
* 商家从 customer GraphQL 拉 addresses + defaultAddress 传给本组件。
|
|
8
|
+
* setDefault / remove 由商家通过 RR7 action 实现(onSetDefault / onRemove 回调)。
|
|
12
9
|
*/
|
|
13
10
|
import * as React from 'react';
|
|
14
|
-
|
|
11
|
+
export interface Address {
|
|
12
|
+
id: string;
|
|
13
|
+
firstName?: string | null;
|
|
14
|
+
lastName?: string | null;
|
|
15
|
+
name?: string | null;
|
|
16
|
+
company?: string | null;
|
|
17
|
+
phone?: string | null;
|
|
18
|
+
address1?: string | null;
|
|
19
|
+
address2?: string | null;
|
|
20
|
+
city?: string | null;
|
|
21
|
+
province?: string | null;
|
|
22
|
+
provinceCode?: string | null;
|
|
23
|
+
district?: string | null;
|
|
24
|
+
country?: string | null;
|
|
25
|
+
countryCode?: string | null;
|
|
26
|
+
zip?: string | null;
|
|
27
|
+
isDefault?: boolean;
|
|
28
|
+
}
|
|
29
|
+
export interface AddressListItemActions {
|
|
30
|
+
setDefault: () => Promise<void> | void;
|
|
31
|
+
remove: () => Promise<void> | void;
|
|
32
|
+
edit?: () => void;
|
|
33
|
+
}
|
|
15
34
|
export interface AddressListProps {
|
|
35
|
+
/** 地址列表(从 loader 传入) */
|
|
36
|
+
addresses?: Address[];
|
|
37
|
+
/** 设为默认地址回调 */
|
|
38
|
+
onSetDefault?: (addressId: string) => Promise<void> | void;
|
|
39
|
+
/** 删除地址回调 */
|
|
40
|
+
onRemove?: (addressId: string) => Promise<void> | void;
|
|
16
41
|
/** 编辑按钮点击 */
|
|
17
42
|
onEdit?: (address: Address) => void;
|
|
18
|
-
/**
|
|
43
|
+
/** 新增按钮点击 */
|
|
19
44
|
onAdd?: () => void;
|
|
20
45
|
/** 空状态文案 */
|
|
21
46
|
emptyText?: React.ReactNode;
|
|
22
|
-
/**
|
|
47
|
+
/** 渲染单个地址卡片的覆盖 */
|
|
23
48
|
renderItem?: (address: Address, actions: AddressListItemActions) => React.ReactNode;
|
|
24
|
-
/** 整体容器 className */
|
|
25
49
|
className?: string;
|
|
26
|
-
/** 加载中渲染 */
|
|
27
|
-
loadingFallback?: React.ReactNode;
|
|
28
|
-
}
|
|
29
|
-
export interface AddressListItemActions {
|
|
30
|
-
setDefault: () => Promise<void>;
|
|
31
|
-
remove: () => Promise<void>;
|
|
32
|
-
edit?: () => void;
|
|
33
50
|
}
|
|
34
51
|
export declare function AddressList(props: AddressListProps): import("react/jsx-runtime").JSX.Element;
|
|
35
52
|
//# sourceMappingURL=AddressList.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddressList.d.ts","sourceRoot":"","sources":["../../src/components/AddressList.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"AddressList.d.ts","sourceRoot":"","sources":["../../src/components/AddressList.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IACtB,eAAe;IACf,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC3D,aAAa;IACb,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvD,aAAa;IACb,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,aAAa;IACb,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY;IACZ,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,kBAAkB;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC;IACpF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CA0ClD"}
|
|
@@ -1,36 +1,23 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
* <AddressList>
|
|
4
4
|
*
|
|
5
5
|
* 渲染当前买家的地址列表。
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* onAdd={() => openCreateModal()}
|
|
11
|
-
* emptyText="还没有保存的地址"
|
|
12
|
-
* />
|
|
7
|
+
* helium 0.7:addresses 通过 props 传入(不再用 AddressBookProvider)。
|
|
8
|
+
* 商家从 customer GraphQL 拉 addresses + defaultAddress 传给本组件。
|
|
9
|
+
* setDefault / remove 由商家通过 RR7 action 实现(onSetDefault / onRemove 回调)。
|
|
13
10
|
*/
|
|
14
11
|
import * as React from 'react';
|
|
15
|
-
import { useAddressBook } from './AddressBookProvider';
|
|
16
|
-
import { useMounted } from './hooks/useMounted';
|
|
17
12
|
export function AddressList(props) {
|
|
18
|
-
const { onEdit, onAdd, emptyText = '还没有保存的地址', renderItem, className,
|
|
19
|
-
const mounted = useMounted();
|
|
20
|
-
const { addresses, status, setDefault, deleteAddress } = useAddressBook();
|
|
21
|
-
if (!mounted) {
|
|
22
|
-
return _jsx("div", { "data-address-list": true, "data-ssr-placeholder": true, className: className });
|
|
23
|
-
}
|
|
24
|
-
if (status === 'loading' || status === 'unauthenticated') {
|
|
25
|
-
return _jsx(_Fragment, { children: loadingFallback });
|
|
26
|
-
}
|
|
13
|
+
const { addresses = [], onSetDefault, onRemove, onEdit, onAdd, emptyText = '还没有保存的地址', renderItem, className, } = props;
|
|
27
14
|
if (addresses.length === 0) {
|
|
28
15
|
return (_jsxs("div", { "data-empty": true, className: className, children: [_jsx("p", { children: emptyText }), onAdd && (_jsx("button", { type: "button", onClick: onAdd, "data-add-address": true, children: "+ \u65B0\u589E\u5730\u5740" }))] }));
|
|
29
16
|
}
|
|
30
17
|
return (_jsxs("div", { "data-address-list": true, className: className, children: [onAdd && (_jsxs("div", { "data-list-toolbar": true, children: [_jsxs("span", { "data-muted": true, children: [addresses.length, " \u4E2A\u5730\u5740"] }), _jsx("button", { type: "button", onClick: onAdd, "data-add-address": true, children: "+ \u65B0\u589E\u5730\u5740" })] })), _jsx("div", { "data-items": true, children: addresses.map((a) => {
|
|
31
18
|
const actions = {
|
|
32
|
-
setDefault:
|
|
33
|
-
remove:
|
|
19
|
+
setDefault: () => onSetDefault?.(a.id),
|
|
20
|
+
remove: () => onRemove?.(a.id),
|
|
34
21
|
edit: onEdit ? () => onEdit(a) : undefined,
|
|
35
22
|
};
|
|
36
23
|
if (renderItem)
|
|
@@ -38,7 +25,6 @@ export function AddressList(props) {
|
|
|
38
25
|
return _jsx(DefaultAddressItem, { address: a, actions: actions }, a.id);
|
|
39
26
|
}) })] }));
|
|
40
27
|
}
|
|
41
|
-
// 默认渲染
|
|
42
28
|
function DefaultAddressItem({ address: a, actions }) {
|
|
43
29
|
return (_jsxs("div", { "data-address-item": true, "data-default": a.isDefault ? '' : undefined, children: [_jsxs("div", { "data-row": true, children: [_jsxs("div", { "data-name": true, children: [a.firstName || '', a.lastName || '', a.isDefault && _jsx("span", { "data-default-tag": true, children: "\u9ED8\u8BA4" })] }), _jsxs("div", { "data-actions": true, children: [!a.isDefault && (_jsx("button", { type: "button", onClick: actions.setDefault, "data-action": "default", children: "\u8BBE\u4E3A\u9ED8\u8BA4" })), actions.edit && (_jsx("button", { type: "button", onClick: actions.edit, "data-action": "edit", children: "\u7F16\u8F91" })), _jsx("button", { type: "button", onClick: actions.remove, "data-action": "remove", "data-danger": true, children: "\u5220\u9664" })] })] }), _jsx("div", { "data-line": true, children: a.phone || '' }), _jsxs("div", { "data-line": true, children: [a.province || '', a.city || '', a.district || '', a.address1 || '', a.address2 ? ' ' + a.address2 : ''] })] }));
|
|
44
30
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddressList.js","sourceRoot":"","sources":["../../src/components/AddressList.tsx"],"names":[],"mappings":";AAAA
|
|
1
|
+
{"version":3,"file":"AddressList.js","sourceRoot":"","sources":["../../src/components/AddressList.tsx"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6C/B,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EACrC,SAAS,GAAG,UAAU,EACtB,UAAU,EAAE,SAAS,GACtB,GAAG,KAAK,CAAC;IAEV,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3B,OAAO,CACL,mCAAgB,SAAS,EAAE,SAAS,aAClC,sBAAI,SAAS,GAAK,EACjB,KAAK,IAAI,CACR,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,KAAK,qEAE3B,CACV,IACG,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,0CAAuB,SAAS,EAAE,SAAS,aACxC,KAAK,IAAI,CACR,qDACE,+CAAkB,SAAS,CAAC,MAAM,2BAAY,EAC9C,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,KAAK,qEAAkC,IAClE,CACP,EACD,4CACG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;oBACnB,MAAM,OAAO,GAA2B;wBACtC,UAAU,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAQ;wBAC7C,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAQ;wBACrC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;qBAC3C,CAAC;oBACF,IAAI,UAAU;wBAAE,OAAO,KAAC,KAAK,CAAC,QAAQ,cAAa,UAAU,CAAC,CAAC,EAAE,OAAO,CAAC,IAA7B,CAAC,CAAC,EAAE,CAA2C,CAAC;oBAC5F,OAAO,KAAC,kBAAkB,IAAY,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,OAAO,IAAlC,CAAC,CAAC,EAAE,CAAkC,CAAC;gBACzE,CAAC,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAyD;IACxG,OAAO,CACL,0DAAqC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,aAC/D,4CACE,6CACG,CAAC,CAAC,SAAS,IAAI,EAAE,EAAE,CAAC,CAAC,QAAQ,IAAI,EAAE,EACnC,CAAC,CAAC,SAAS,IAAI,oEAAgC,IAC5C,EACN,gDACG,CAAC,CAAC,CAAC,SAAS,IAAI,CACf,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,CAAC,UAAU,iBAAc,SAAS,yCAAc,CACvF,EACA,OAAO,CAAC,IAAI,IAAI,CACf,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,CAAC,IAAI,iBAAc,MAAM,6BAAY,CAC5E,EACD,iBAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,CAAC,MAAM,iBAAc,QAAQ,kDAAwB,IACvF,IACF,EACN,2CAAgB,CAAC,CAAC,KAAK,IAAI,EAAE,GAAO,EACpC,6CACG,CAAC,CAAC,QAAQ,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,IAAI,EAAE,EAAE,CAAC,CAAC,QAAQ,IAAI,EAAE,EAAE,CAAC,CAAC,QAAQ,IAAI,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IACnG,IACF,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1,37 +1,35 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* <AddressPicker>
|
|
3
3
|
*
|
|
4
|
-
* Checkout
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* - 选 "新地址" 时展开新增表单
|
|
4
|
+
* Checkout 用的地址选择器。
|
|
5
|
+
*
|
|
6
|
+
* helium 0.7:addresses 通过 props 传入。
|
|
8
7
|
*
|
|
9
|
-
* 用法(受控):
|
|
10
8
|
* <AddressPicker
|
|
9
|
+
* addresses={addresses}
|
|
10
|
+
* defaultAddress={defaultAddress}
|
|
11
11
|
* value={selectedAddressId}
|
|
12
12
|
* onChange={(id, addr) => setSelectedAddressId(id)}
|
|
13
|
-
* allowNewAddress
|
|
14
|
-
* onUseNewAddress={(addr) => setInlineAddress(addr)}
|
|
15
13
|
* />
|
|
16
|
-
*
|
|
17
|
-
* 用法(非受控):
|
|
18
|
-
* <AddressPicker onSelect={(addr) => ...} />
|
|
19
|
-
* 组件内部 state;选择后回调商家拿值。
|
|
20
14
|
*/
|
|
21
15
|
import * as React from 'react';
|
|
22
|
-
import {
|
|
16
|
+
import type { Address } from './AddressList';
|
|
23
17
|
export interface AddressPickerProps {
|
|
18
|
+
/** 地址列表(从 loader 传入) */
|
|
19
|
+
addresses?: Address[];
|
|
20
|
+
/** 默认地址(用来自动选中) */
|
|
21
|
+
defaultAddress?: Address | null;
|
|
24
22
|
/** 受控:当前选中的 address ID */
|
|
25
23
|
value?: string | null;
|
|
26
|
-
/**
|
|
24
|
+
/** 受控:选中变化 */
|
|
27
25
|
onChange?: (addressId: string | null, address: Address | null) => void;
|
|
28
|
-
/**
|
|
26
|
+
/** 非受控:选择时回调 */
|
|
29
27
|
onSelect?: (address: Address | null) => void;
|
|
30
28
|
/** 是否允许"使用新地址"选项 */
|
|
31
29
|
allowNewAddress?: boolean;
|
|
32
|
-
/** 选了"新地址"
|
|
30
|
+
/** 选了"新地址"后保存的回调 */
|
|
33
31
|
onUseNewAddress?: (address: Address) => void;
|
|
34
|
-
/**
|
|
32
|
+
/** 空状态 */
|
|
35
33
|
emptyFallback?: React.ReactNode;
|
|
36
34
|
className?: string;
|
|
37
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddressPicker.d.ts","sourceRoot":"","sources":["../../src/components/AddressPicker.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"AddressPicker.d.ts","sourceRoot":"","sources":["../../src/components/AddressPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG7C,MAAM,WAAW,kBAAkB;IACjC,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IACtB,mBAAmB;IACnB,cAAc,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAChC,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,cAAc;IACd,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACvE,gBAAgB;IAChB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,oBAAoB;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB;IACpB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,UAAU;IACV,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA2GtD"}
|