foxit-component 1.0.5-alpha.8 → 1.0.5-alpha.9

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.
Files changed (4) hide show
  1. package/es/Input/PhoneInput.js +10 -4
  2. package/es/Input/areaCodeData.d.ts +1 -0
  3. package/es/Input/areaCodeData.js +20 -1
  4. package/package.json +1 -1
package/es/Input/PhoneInput.js CHANGED
@@ -4,10 +4,10 @@ import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react'
4
4
  import classNames from 'classnames';
5
5
  import Select from '../Select/Select.js';
6
6
  import Input from './Input.js';
7
- import { areaCodeOptions, AREA_FLAG_BASE_URL } from './areaCodeData.js';
7
+ import { US_FLAG_DATA_URI, areaCodeOptions, AREA_FLAG_BASE_URL } from './areaCodeData.js';
8
8
 
9
9
  var getFlagUrl = function (baseUrl, countryCode) {
10
- return "".concat(baseUrl.replace(/\/$/, ''), "/").concat(countryCode.toLowerCase(), ".svg");
10
+ return baseUrl ? "".concat(baseUrl.replace(/\/$/, ''), "/").concat(countryCode.toLowerCase(), ".svg") : '';
11
11
  };
12
12
  var getPhoneInputValue = function (option, phoneNumber) { return ({
13
13
  areaCode: option.value,
@@ -42,11 +42,17 @@ var LazyFlag = function (_a) {
42
42
  observer.observe(img);
43
43
  return function () { return observer.disconnect(); };
44
44
  }, [lazy, shouldLoad]);
45
- return (jsx("img", { ref: imgRef, className: "foxit-area-code-flag", src: shouldLoad ? src : undefined, alt: alt, loading: "lazy" }));
45
+ return (jsx("img", { ref: imgRef, className: "foxit-area-code-flag", src: shouldLoad && src ? src : undefined, alt: alt, loading: "lazy" }));
46
46
  };
47
47
  var AreaCodeOptionLabel = function (_a) {
48
48
  var option = _a.option, flagBaseUrl = _a.flagBaseUrl, isMenu = _a.isMenu;
49
- return (jsxs("div", __assign({ className: classNames('foxit-area-code-option', !isMenu && 'foxit-area-code-option-value') }, { children: [jsxs("div", __assign({ className: "foxit-area-code-option-main" }, { children: [jsx(LazyFlag, { src: getFlagUrl(flagBaseUrl, option.value), alt: option.name, lazy: isMenu }), isMenu && jsx("span", __assign({ className: "foxit-area-code-name" }, { children: option.name })), !isMenu && jsx("span", __assign({ className: "foxit-area-code-dial" }, { children: option.dialCode }))] })), isMenu && jsx("span", __assign({ className: "foxit-area-code-dial" }, { children: option.dialCode }))] })));
49
+ // SSR 时 flagBaseUrl 为空，选中值展示兜底使用 US 国旗；菜单项不展示图片（不会影响交互）
50
+ var flagSrc = flagBaseUrl
51
+ ? getFlagUrl(flagBaseUrl, option.value)
52
+ : !isMenu
53
+ ? US_FLAG_DATA_URI
54
+ : '';
55
+ return (jsxs("div", __assign({ className: classNames('foxit-area-code-option', !isMenu && 'foxit-area-code-option-value') }, { children: [jsxs("div", __assign({ className: "foxit-area-code-option-main" }, { children: [jsx(LazyFlag, { src: flagSrc, alt: option.name, lazy: isMenu }), isMenu && jsx("span", __assign({ className: "foxit-area-code-name" }, { children: option.name })), !isMenu && jsx("span", __assign({ className: "foxit-area-code-dial" }, { children: option.dialCode }))] })), isMenu && jsx("span", __assign({ className: "foxit-area-code-dial" }, { children: option.dialCode }))] })));
50
56
  };
51
57
  var phoneAreaCodeSelectStyles = {
52
58
  control: {
package/es/Input/areaCodeData.d.ts CHANGED
@@ -4,4 +4,5 @@ export interface AreaCodeOption {
4
4
  name: string;
5
5
  }
6
6
  export declare const AREA_FLAG_BASE_URL: () => string;
7
+ export declare const US_FLAG_DATA_URI: string;
7
8
  export declare const areaCodeOptions: AreaCodeOption[];
package/es/Input/areaCodeData.js CHANGED
@@ -5,6 +5,25 @@ var AREA_FLAG_BASE_URL = function () {
5
5
  }
6
6
  return '';
7
7
  };
8
+ // SSR 场景下 flagBaseUrl 为空时使用的 US 国旗 fallback（内联 SVG data URI）
9
+ var US_FLAG_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">' +
10
+ '<path d="M512.5 64.1h-2.6c-246.1 0-445.5 199.5-445.5 445.5v2.5h448.1v-448z" fill="#2F0F7D"/>' +
11
+ '<path d="M512.1 445.2v66.9h448.3c0-22.7-1.7-45.1-5-66.9H512.1z" fill="#DE001A"/>' +
12
+ '<path d="M940.1 378.3h-428v66.9h443.3c-3.4-22.9-8.6-45.3-15.3-66.9z" fill="#FFFFFF"/>' +
13
+ '<path d="M913 311.3H512.1v66.9h428c-7.3-23.1-16.4-45.5-27.1-66.9z" fill="#DE001A"/>' +
14
+ '<path d="M871.6 244.4H512.1v66.9H913c-11.9-23.6-25.7-45.9-41.4-66.9z" fill="#FFFFFF"/>' +
15
+ '<path d="M810.2 177.5H512.1v66.9h359.5c-18.1-24.3-38.7-46.8-61.4-66.9z" fill="#DE001A"/>' +
16
+ '<path d="M711.2 110.5H512.1v66.9h298.1c-29.7-26.4-63-49-99-66.9z" fill="#FFFFFF"/>' +
17
+ '<path d="M313.6 913.7h397.5c36-17.9 69.3-40.5 99.1-66.9H214.6c29.7 26.5 63 49.1 99 66.9z" fill="#DE001A"/>' +
18
+ '<path d="M214.6 846.8h595.6c22.6-20.2 43.2-42.6 61.4-66.9H153.2c18.1 24.3 38.7 46.7 61.4 66.9zM512.4 960.1c71.4 0 138.9-16.7 198.8-46.4H313.6c59.9 29.7 127.4 46.4 198.8 46.4z" fill="#FFFFFF"/>' +
19
+ '<path d="M153.2 779.9h718.5c15.7-21 29.5-43.4 41.4-66.9H111.8c11.9 23.5 25.7 45.9 41.4 66.9z" fill="#DE001A"/>' +
20
+ '<path d="M111.8 712.9H913c10.7-21.4 19.8-43.8 27.1-66.9H84.7c7.3 23.2 16.4 45.5 27.1 66.9z" fill="#FFFFFF"/>' +
21
+ '<path d="M84.7 646H940c6.8-21.7 11.9-44 15.4-66.9h-886C72.8 602 78 624.3 84.7 646z" fill="#DE001A"/>' +
22
+ '<path d="M955.4 579.1c3.3-21.8 5-44.2 5-66.9h-896c0 22.7 1.7 45.1 5 66.9h886z" fill="#FFFFFF"/>' +
23
+ '<path d="M711.2 110.5c-59.9-29.7-127.4-46.4-198.8-46.4h-0.3v46.4h199.1z" fill="#DE001A"/>' +
24
+ '<path d="M138.1 317.4l-8 16-17.9 2.6 13 12.5-3.1 17.6 16-8.3 16 8.3-3.1-17.6 12.9-12.5-17.8-2.6zM146.1 461.2l-8-16-8 16-17.9 2.6 13 12.5-3.1 17.6 16-8.3 16 8.3-3.1-17.6 12.9-12.5zM182.9 299.2l16-8.4 16 8.4-3-17.7 12.9-12.4-17.9-2.6-8-16-8 16-17.8 2.6 12.9 12.4zM224.8 399.9l-17.9-2.6-8-16-8 16-17.8 2.6 12.9 12.5-3.1 17.6 16-8.3 16 8.3-3-17.6zM360.2 186.6l-8 16-17.9 2.6 13 12.4-3.1 17.7 16-8.4 16 8.4-3.1-17.7 12.9-12.4-17.8-2.6zM344.2 116.6l16-8.3 16 8.3-3.1-17.6L386 86.5l-9.7-1.4c-10.7 3.4-21.3 7.2-31.7 11.4l2.5 2.5-2.9 17.6zM360.2 317.4l-8 16-17.9 2.6 13 12.5-3.1 17.6 16-8.3 16 8.3-3.1-17.6L386 336l-17.8-2.6zM368.2 461.2l-8-16-8 16-17.9 2.6 13 12.5-3.1 17.6 16-8.3 16 8.3-3.1-17.6 12.9-12.5zM405 299.2l16-8.4 16 8.4-3-17.7 12.9-12.4-17.9-2.6-8-16-8 16-17.8 2.6 12.9 12.4zM405 180.5l16-8.3 16 8.3-3-17.6 12.9-12.5-17.9-2.6-8-16-8 16-17.8 2.6 12.9 12.5zM446.9 399.9l-17.9-2.6-8-16-8 16-17.8 2.6 12.9 12.5L405 430l16-8.3 16 8.3-3-17.6zM96.3 430l-3.1-17.6 12.9-12.5-17.9-2.6-5.8-11.7c-3.8 13.1-7.1 26.4-9.8 40l7.6-4 16.1 8.4zM250.7 186.6l-8 16-17.9 2.6 12.9 12.4-3 17.7 16-8.4 15.9 8.4-3-17.7 12.9-12.4-17.9-2.6zM250.7 317.4l-8 16-17.9 2.6 12.9 12.5-3 17.6 16-8.3 15.9 8.3-3-17.6 12.9-12.5-17.9-2.6zM258.6 461.2l-7.9-16-8 16-17.9 2.6 12.9 12.5-3 17.6 16-8.3 15.9 8.3-3-17.6 12.9-12.5zM295.5 299.2l16-8.4 16 8.4-3.1-17.7 13-12.4-17.9-2.6-8-16-8 16-17.9 2.6 13 12.4zM295.5 180.5l16-8.3 16 8.3-3.1-17.6 13-12.5-17.9-2.6-8-16-8 16-17.9 2.6 13 12.5zM337.4 399.9l-17.9-2.6-8-16-8 16-17.9 2.6 13 12.5-3.1 17.6 16-8.3 16 8.3-3.1-17.6zM469.7 186.6l-8 16-17.8 2.6 12.9 12.4-3.1 17.7 16-8.4 16 8.4-3.1-17.7 13-12.4-17.9-2.6zM469.7 67.9l-8 16.1-17.8 2.5L456.8 99l-3.1 17.6 16-8.3 16 8.3-3.1-17.6 13-12.5-17.9-2.5zM469.7 317.4l-8 16-17.8 2.6 12.9 12.5-3.1 17.6 16-8.3 16 8.3-3.1-17.6 13-12.5-17.9-2.6zM477.7 461.2l-8-16-8 16-17.8 2.6 12.9 12.5-3.1 17.6 16-8.3 16 8.3-3.1-17.6 13-12.5z" fill="#FFFFFF"/>' +
25
+ '</svg>';
26
+ var US_FLAG_DATA_URI = 'data:image/svg+xml,' + encodeURIComponent(US_FLAG_SVG);
8
27
  var areaCodeOptions = [
9
28
  { value: 'AF', dialCode: '+93', name: 'Afghanistan' },
10
29
  { value: 'AL', dialCode: '+355', name: 'Albania' },
@@ -248,4 +267,4 @@ var areaCodeOptions = [
248
267
  { value: 'ZW', dialCode: '+263', name: 'Zimbabwe' }
249
268
  ];
250
269
 
251
- export { AREA_FLAG_BASE_URL, areaCodeOptions };
270
+ export { AREA_FLAG_BASE_URL, US_FLAG_DATA_URI, areaCodeOptions };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "foxit-component",
3
- "version": "1.0.5-alpha.8",
3
+ "version": "1.0.5-alpha.9",
4
4
  "author": {
5
5
  "name": "linye",
6
6
  "email": "869675630@qq.com"