foxit-component 1.0.5-alpha.10 → 1.0.5-alpha.11

package/es/Input/PhoneInput.d.ts

@@ -14,6 +14,7 @@ export interface PhoneInputProps extends Omit<InputProps, 'addonBefore' | 'value
     defaultValue?: PhoneInputFieldValue;
     areaCodeOptions?: AreaCodeOption[];
     flagBaseUrl?: string;
+    selectPlaceholder?: string;
     onChange?: (value: PhoneInputValue) => void;
 }
 declare const PhoneInput: React.FC<PhoneInputProps>;

package/es/Input/PhoneInput.js

@@ -85,7 +85,7 @@ var filterAreaCodeOption = function (candidate, inputValue) {
         normalizedDialCode.includes(normalizedKeyword));
 };
 var PhoneAreaCodeSelectBase = function (_a) {
-    var options = _a.options, value = _a.value, disabled = _a.disabled, flagBaseUrl = _a.flagBaseUrl, onChange = _a.onChange;
+    var options = _a.options, value = _a.value, disabled = _a.disabled, flagBaseUrl = _a.flagBaseUrl, placeholder = _a.placeholder, onChange = _a.onChange;
     var handleChange = useCallback(function (option) {
         var nextOption = option;
         if (!nextOption) {
@@ -94,12 +94,11 @@ var PhoneAreaCodeSelectBase = function (_a) {
         onChange(nextOption);
     }, [onChange]);
     var formatOptionLabel = useCallback(function (option, meta) { return (jsx(AreaCodeOptionLabel, { option: option, flagBaseUrl: flagBaseUrl, isMenu: meta.context === 'menu' })); }, [flagBaseUrl]);
-    return (jsx(Select, { className: "foxit-phone-input-select", classNamePrefix: "foxit-phone-input-select", options: options, value: value, onChange: handleChange, isDisabled: disabled, isSearchable: true, showSelectedIcon: false, placeholder: "", filterOption: filterAreaCodeOption, formatOptionLabel: formatOptionLabel, styles: phoneAreaCodeSelectStyles }));
+    return (jsx(Select, { className: "foxit-phone-input-select", classNamePrefix: "foxit-phone-input-select", options: options, value: value || null, onChange: handleChange, isDisabled: disabled, isSearchable: true, showSelectedIcon: false, placeholder: placeholder, filterOption: filterAreaCodeOption, formatOptionLabel: formatOptionLabel, styles: phoneAreaCodeSelectStyles }));
 };
 var PhoneAreaCodeSelect = React.memo(PhoneAreaCodeSelectBase);
 var PhoneInput = function (_a) {
-    var _b;
-    var value = _a.value, defaultValue = _a.defaultValue, _c = _a.areaCodeOptions, passAreaCodeOptions = _c === void 0 ? areaCodeOptions : _c, flagBaseUrl = _a.flagBaseUrl, onChange = _a.onChange, className = _a.className, rest = __rest(_a, ["value", "defaultValue", "areaCodeOptions", "flagBaseUrl", "onChange", "className"]);
+    var value = _a.value, defaultValue = _a.defaultValue, _b = _a.areaCodeOptions, passAreaCodeOptions = _b === void 0 ? areaCodeOptions : _b, flagBaseUrl = _a.flagBaseUrl, _c = _a.selectPlaceholder, selectPlaceholder = _c === void 0 ? 'Select' : _c, onChange = _a.onChange, className = _a.className, rest = __rest(_a, ["value", "defaultValue", "areaCodeOptions", "flagBaseUrl", "selectPlaceholder", "onChange", "className"]);
     var resolvedFlagBaseUrl = flagBaseUrl || AREA_FLAG_BASE_URL();
     var selectOptions = useMemo(function () {
         return __spreadArray([], passAreaCodeOptions, true).sort(function (a, b) {
@@ -111,14 +110,16 @@ var PhoneInput = function (_a) {
         })
             .map(function (option) { return (__assign(__assign({}, option), { label: option.dialCode })); });
     }, [passAreaCodeOptions]);
-    var _d = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.areaCode) || 'US'), innerAreaCode = _d[0], setInnerAreaCode = _d[1];
+    var _d = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.areaCode) || ''), innerAreaCode = _d[0], setInnerAreaCode = _d[1];
     var _e = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.phoneNumber) || ''), innerPhoneNumber = _e[0], setInnerPhoneNumber = _e[1];
-    var selectedAreaCode = (_b = value === null || value === void 0 ? void 0 : value.areaCode) !== null && _b !== void 0 ? _b : innerAreaCode;
-    var phoneNumber = value === undefined ? innerPhoneNumber : value.phoneNumber || '';
+    var isControlled = value !== undefined;
+    var selectedAreaCode = isControlled ? (value === null || value === void 0 ? void 0 : value.areaCode) || '' : innerAreaCode;
+    var phoneNumber = isControlled ? (value === null || value === void 0 ? void 0 : value.phoneNumber) || '' : innerPhoneNumber;
     var phoneNumberRef = useRef(phoneNumber);
     phoneNumberRef.current = phoneNumber;
-    var selectedOption = selectOptions.find(function (option) { return option.value === selectedAreaCode; }) || selectOptions[0];
-    var isControlled = value !== undefined;
+    var selectedOption = selectedAreaCode
+        ? selectOptions.find(function (option) { return option.value === selectedAreaCode; })
+        : undefined;
     var onChangeRef = useRef(onChange);
     var isControlledRef = useRef(isControlled);
     onChangeRef.current = onChange;
@@ -135,11 +136,11 @@ var PhoneInput = function (_a) {
         if (value === undefined) {
             setInnerPhoneNumber(nextPhoneNumber);
         }
-        if (selectedOption) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(getPhoneInputValue(selectedOption, nextPhoneNumber));
-        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(selectedOption
+            ? getPhoneInputValue(selectedOption, nextPhoneNumber)
+            : { areaCode: '', dialCode: '', name: '', phoneNumber: nextPhoneNumber });
     };
-    return (jsx(Input, __assign({}, rest, { inputMode: rest.inputMode || 'numeric', pattern: rest.pattern || '[0-9]*', value: phoneNumber, onChange: handlePhoneNumberChange, className: classNames('foxit-phone-input', className), addonBefore: jsx(PhoneAreaCodeSelect, { options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, disabled: rest.disabled, flagBaseUrl: resolvedFlagBaseUrl, onChange: handleAreaCodeChange }) })));
+    return (jsx(Input, __assign({}, rest, { inputMode: rest.inputMode || 'numeric', pattern: rest.pattern || '[0-9]*', value: phoneNumber, onChange: handlePhoneNumberChange, className: classNames('foxit-phone-input', className), addonBefore: jsx(PhoneAreaCodeSelect, { options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, disabled: rest.disabled, flagBaseUrl: resolvedFlagBaseUrl, placeholder: selectPlaceholder, onChange: handleAreaCodeChange }) })));
 };
 
 export { PhoneInput as default };

package/es/Select/Select.js

@@ -20,7 +20,9 @@ var Select = function (_a) {
             return __assign(__assign({}, styles), { backgroundColor: isFocused || isSelected ? '#FFF6F0' : 'white', color: isSelected ? '#FF5F00' : '#666', ':hover': {
                     backgroundColor: '#FFF6F0'
                 }, fontSize: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' });
-        }, indicatorSeparator: function (styles) { return (__assign(__assign({}, styles), { display: 'none' })); }, placeholder: function (styles) { return (__assign(__assign({}, styles), { color: '#B3B3B3' })); }, dropdownIndicator: function (styles) { return (__assign(__assign({}, styles), { paddingRight: 16 })); }, singleValue: function (styles) { return (__assign(__assign({}, styles), ((passStyles === null || passStyles === void 0 ? void 0 : passStyles.singleValue) || {}))); }, input: function (styles) { return (__assign(__assign({}, styles), ((passStyles === null || passStyles === void 0 ? void 0 : passStyles.input) || {}))); } }, ((passStyles === null || passStyles === void 0 ? void 0 : passStyles.menu) && { menu: function (base, state) { return (__assign(__assign({}, base), passStyles.menu(base, state))); } }));
+        }, indicatorSeparator: function (styles) { return (__assign(__assign({}, styles), { display: 'none' })); }, placeholder: function (styles) { return (__assign(__assign({}, styles), { color: '#B3B3B3' })); }, dropdownIndicator: function (styles) { return (__assign(__assign({}, styles), { paddingRight: 16 })); }, singleValue: function (styles) { return (__assign(__assign({}, styles), ((passStyles === null || passStyles === void 0 ? void 0 : passStyles.singleValue) || {}))); }, input: function (styles) { return (__assign(__assign({}, styles), ((passStyles === null || passStyles === void 0 ? void 0 : passStyles.input) || {}))); } }, ((passStyles === null || passStyles === void 0 ? void 0 : passStyles.menu) && {
+        menu: function (base, state) { return (__assign(__assign({}, base), passStyles.menu(base, state))); }
+    }));
     var CustomControl = function (props) { return (jsxs(components.Control, __assign({}, props, { children: [preIcon && (jsx("div", __assign({ className: "foxit-select-custom-control", style: {
                     color: props.hasValue ? '#525252' : '#B3B3B3'
                 } }, { children: preIcon }))), props.children] }))); };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foxit-component",
-  "version": "1.0.5-alpha.10",
+  "version": "1.0.5-alpha.11",
   "author": {
     "name": "linye",
     "email": "869675630@qq.com"