New Components: - PhoneInputCustom: Reusable phone input without emoji flags - constants/countries.ts: Country data with calling codes only Features: ✅ NO emoji flags - only country name + calling code (+62, +65, etc) ✅ Clean, professional UI ✅ Modal country picker with search ✅ 15 countries supported ✅ Helper functions: getCountryByCallingCode, getCountryByCode, searchCountries ✅ Fully typed with TypeScript ✅ Reusable across the app ✅ Maximum compatibility (no emoji rendering issues) UI Design: - Phone Input: [+62 ⌄ | 812-3456-7890] - Country Picker: Modal with search - Display: Country name + calling code only Usage: import { PhoneInputCustom } from '@/components'; import { DEFAULT_COUNTRY } from '@/constants/countries'; <PhoneInputCustom value={phoneNumber} onChangePhoneNumber={setPhoneNumber} selectedCountry={selectedCountry} onChangeCountry={setSelectedCountry} /> Benefits: ✅ Works on ALL iOS versions (no emoji issues) ✅ Consistent across all platforms ✅ Faster render (no emoji/image loading) ✅ Cleaner code structure ✅ Easy to maintain Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
144 lines
3.8 KiB
TypeScript
144 lines
3.8 KiB
TypeScript
// Alert
|
|
import AlertCustom from "./Alert/AlertCustom";
|
|
import AlertDefaultSystem from "./Alert/AlertDefaultSystem";
|
|
// ActionIcon
|
|
import ActionIcon from "./ActionIcon/ActionIcon";
|
|
// Button
|
|
import LeftButtonCustom from "./Button/BackButton";
|
|
import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
|
|
import ButtonCustom from "./Button/ButtonCustom";
|
|
import DotButton from "./Button/DotButton";
|
|
import FloatingButton from "./Button/FloatingButton";
|
|
// Badge
|
|
import BadgeCustom from "./Badge/BadgeCustom";
|
|
// Container
|
|
import CircleContainer from "./Container/CircleContainer";
|
|
// Checkbox
|
|
import CheckboxCustom from "./Checkbox/CheckboxCustom";
|
|
import CheckboxGroup from "./Checkbox/CheckboxGroup";
|
|
// Drawer
|
|
import DrawerCustom from "./Drawer/DrawerCustom";
|
|
import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
|
|
// Text
|
|
import TextCustom from "./Text/TextCustom";
|
|
// TextInput
|
|
import TextInputCustom from "./TextInput/TextInputCustom";
|
|
// TextArea
|
|
import TextAreaCustom from "./TextArea/TextAreaCustom";
|
|
// Grid
|
|
import Grid from "./Grid/GridCustom";
|
|
// Box
|
|
import BaseBox from "./Box/BaseBox";
|
|
import BoxButtonOnFooter from "./Box/BoxButtonOnFooter";
|
|
import BoxWithHeaderSection from "./Box/BoxWithHeaderInformation";
|
|
import InformationBox from "./Box/InformationBox";
|
|
// Stack
|
|
import StackCustom from "./Stack/StackCustom";
|
|
// Select
|
|
import SelectCustom from "./Select/SelectCustom";
|
|
// Image
|
|
import AvatarCustom from "./Image/AvatarCustom";
|
|
import AvatarComp from "./Image/AvatarComp";
|
|
import LandscapeFrameUploaded from "./Image/LandscapeFrameUploaded";
|
|
// Divider
|
|
import Divider from "./Divider/Divider";
|
|
import DividerCustom from "./Divider/DividerCustom";
|
|
// Map
|
|
import MapCustom from "./Map/MapCustom";
|
|
// Center
|
|
import CenterCustom from "./Center/CenterCustom";
|
|
// Clickable
|
|
import ClickableCustom from "./Clickable/ClickableCustom";
|
|
// PhoneInput
|
|
import PhoneInputCustom from "./PhoneInput/PhoneInputCustom";
|
|
// Scroll
|
|
import ScrollableCustom from "./Scroll/ScrollCustom";
|
|
// ShareComponent
|
|
import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHeaderComponent";
|
|
import Spacing from "./_ShareComponent/Spacing";
|
|
import TabBarBackground from "./_ShareComponent/TabBarBackground";
|
|
import ViewWrapper from "./_ShareComponent/ViewWrapper";
|
|
import SearchInput from "./_ShareComponent/SearchInput";
|
|
import DummyLandscapeImage from "./_ShareComponent/DummyLandscapeImage";
|
|
import GridComponentView from "./_ShareComponent/GridSectionView";
|
|
import NewWrapper from "./_ShareComponent/NewWrapper";
|
|
import BasicWrapper from "./_ShareComponent/BasicWrapper";
|
|
// Progress
|
|
import ProgressCustom from "./Progress/ProgressCustom";
|
|
// Loader
|
|
import LoaderCustom from "./Loader/LoaderCustom";
|
|
|
|
export {
|
|
// ActionIcon
|
|
ActionIcon,
|
|
// Alert
|
|
AlertCustom,
|
|
AlertDefaultSystem,
|
|
// Image
|
|
AvatarCustom,
|
|
AvatarComp,
|
|
// ShareComponent
|
|
AvatarUsernameAndOtherComponent,
|
|
// Button
|
|
LeftButtonCustom as BackButton,
|
|
// Box
|
|
BaseBox,
|
|
BoxButtonOnFooter,
|
|
BoxWithHeaderSection,
|
|
ButtonCenteredOnly,
|
|
ButtonCustom,
|
|
DotButton,
|
|
// Badge
|
|
BadgeCustom,
|
|
// Center
|
|
CenterCustom,
|
|
// Checkbox
|
|
CheckboxCustom,
|
|
CheckboxGroup,
|
|
// Clickable
|
|
ClickableCustom,
|
|
// PhoneInput
|
|
PhoneInputCustom,
|
|
// Container
|
|
CircleContainer,
|
|
// Divider
|
|
Divider,
|
|
DividerCustom,
|
|
// Drawer
|
|
DrawerCustom,
|
|
FloatingButton,
|
|
// Grid
|
|
Grid,
|
|
InformationBox,
|
|
LandscapeFrameUploaded,
|
|
// Map
|
|
MapCustom,
|
|
MenuDrawerDynamicGrid,
|
|
// Progress
|
|
ProgressCustom,
|
|
// Scroll
|
|
ScrollableCustom,
|
|
// Select
|
|
SelectCustom,
|
|
// ShareComponent
|
|
SearchInput,
|
|
DummyLandscapeImage,
|
|
GridComponentView,
|
|
Spacing,
|
|
NewWrapper,
|
|
BasicWrapper,
|
|
// Stack
|
|
StackCustom,
|
|
TabBarBackground,
|
|
// TextArea
|
|
TextAreaCustom,
|
|
// Text
|
|
TextCustom,
|
|
// TextInput
|
|
TextInputCustom,
|
|
// ViewWrapper
|
|
ViewWrapper,
|
|
// Loader
|
|
LoaderCustom,
|
|
};
|