Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
G
gaohuaxue-mobile-app
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
chen
gaohuaxue-mobile-app
Commits
0b91d18f
Commit
0b91d18f
authored
Nov 24, 2022
by
XieZhiXiong
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 添加国家/区号选择弹窗组件
parent
2e3344f8
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
181 additions
and
0 deletions
+181
-0
index.tsx
src/components/AreaCodePopup/index.tsx
+124
-0
styles.ts
src/components/AreaCodePopup/styles.ts
+57
-0
No files found.
src/components/AreaCodePopup/index.tsx
0 → 100644
View file @
0b91d18f
/* eslint-disable react-hooks/exhaustive-deps */
import
React
,
{
useEffect
,
useState
}
from
'react'
;
import
{
ScrollView
,
View
,
Text
,
TouchableOpacity
}
from
'react-native'
;
import
{
useSafeAreaInsets
}
from
'react-native-safe-area-context'
;
import
useAppStyle
from
'../../hooks/useAppStyle'
;
import
Popup
from
'../Popup'
;
import
Radio
from
'../Radio'
;
import
styles
from
'./styles'
;
export
type
AreaCodeOption
=
{
/**
* 区号,唯一值
*/
code
:
string
;
/**
* 区域名称
*/
name
?:
string
;
/**
* 电话号码长度
*/
phoneLength
?:
number
;
};
interface
AreaCodePopupProps
{
/**
* 是否可见
*/
visible
:
boolean
;
/**
* 关闭触发事件
*/
onClose
?:
()
=>
void
;
/**
* 选项
*/
options
:
AreaCodeOption
[];
/**
* 选中值
*/
value
?:
AreaCodeOption
;
/**
* 选择触发时间
*/
onChange
?:
(
value
:
AreaCodeOption
)
=>
void
;
}
const
AreaCodePopup
:
React
.
FC
<
AreaCodePopupProps
>
=
props
=>
{
const
{
visible
,
onClose
,
options
=
[],
value
,
onChange
}
=
props
;
const
[
current
,
setCurrent
]
=
useState
(
''
);
const
myStyle
=
useAppStyle
(
styles
);
const
safeInset
=
useSafeAreaInsets
();
const
handleClose
=
()
=>
{
onClose
?.();
};
useEffect
(()
=>
{
if
(
'value'
in
props
)
{
if
(
value
?.
code
)
{
setCurrent
(
value
?.
code
);
}
}
},
[
value
]);
const
triggerChange
=
(
next
:
AreaCodeOption
)
=>
{
if
(
onChange
)
{
onChange
(
next
);
}
};
const
handleAreaChange
=
(
next
:
string
)
=>
{
setCurrent
(
next
);
const
entity
=
options
.
find
(
item
=>
item
.
code
===
next
);
if
(
entity
)
{
triggerChange
(
entity
);
}
handleClose
();
};
return
(
<
Popup
title=
"选择国家/地区"
visible=
{
visible
}
onClose=
{
handleClose
}
useModal
>
<
Radio
.
Group
value=
{
current
}
onChange=
{
handleAreaChange
}
>
<
ScrollView
style=
{
myStyle
[
'areaCodePopup-list'
]
}
>
{
options
?.
map
(
item
=>
(
<
TouchableOpacity
key=
{
item
.
code
}
style=
{
myStyle
[
'areaCodePopup-list-item'
]
}
activeOpacity=
{
0.8
}
onPress=
{
()
=>
handleAreaChange
(
item
.
code
)
}
>
<
View
style=
{
myStyle
[
'areaCodePopup-list-item-center'
]
}
>
<
Text
style=
{
myStyle
[
'areaCodePopup-list-item-name'
]
}
>
{
item
.
name
}
</
Text
>
<
Text
style=
{
myStyle
[
'areaCodePopup-list-item-code'
]
}
>
{
item
.
code
}
</
Text
>
</
View
>
<
View
style=
{
myStyle
[
'areaCodePopup-list-item-right'
]
}
>
<
Radio
value=
{
item
.
code
}
color=
"transparent"
swooshColor=
"#00A98F"
/>
</
View
>
</
TouchableOpacity
>
))
}
<
View
style=
{
{
paddingBottom
:
safeInset
.
bottom
||
40
}
}
/>
</
ScrollView
>
</
Radio
.
Group
>
</
Popup
>
);
};
export
default
AreaCodePopup
;
src/components/AreaCodePopup/styles.ts
0 → 100644
View file @
0b91d18f
import
{
StyleSheet
}
from
'react-native'
;
import
{
ThemeStyle
}
from
'../../constants/theme'
;
import
themeLayout
from
'../../constants/theme/layout'
;
export
default
(
theme
:
ThemeStyle
)
=>
StyleSheet
.
create
({
areaCodePopup
:
{
width
:
'100%'
,
flexDirection
:
'row'
,
alignItems
:
'center'
,
justifyContent
:
'center'
,
paddingVertical
:
themeLayout
[
'padding-xs'
],
},
'areaCodePopup-list'
:
{
paddingHorizontal
:
themeLayout
[
'padding-s'
],
paddingTop
:
themeLayout
[
'padding-s'
],
height
:
400
,
backgroundColor
:
theme
.
colors
.
background
,
},
'areaCodePopup-list-item'
:
{
flexDirection
:
'row'
,
alignItems
:
'center'
,
paddingVertical
:
themeLayout
[
'padding-m'
],
backgroundColor
:
theme
.
colors
.
background
,
borderBottomWidth
:
0.5
,
borderBottomColor
:
theme
.
colors
.
border
,
},
'areaCodePopup-list-item-left'
:
{
alignSelf
:
'flex-start'
,
marginRight
:
themeLayout
[
'margin-xs'
],
},
'areaCodePopup-list-item-center'
:
{
flex
:
1
,
flexDirection
:
'row'
,
},
'areaCodePopup-list-item-right'
:
{
marginLeft
:
themeLayout
[
'margin-s'
],
},
'areaCodePopup-list-item-icon'
:
{
width
:
24
,
height
:
24
,
borderRadius
:
24
,
overflow
:
'hidden'
,
backgroundColor
:
theme
.
colors
.
primary
,
alignItems
:
'center'
,
justifyContent
:
'center'
,
},
'areaCodePopup-list-item-name'
:
{
fontSize
:
14
,
color
:
'#00A98F'
,
marginRight
:
themeLayout
[
'margin-xs'
],
},
'areaCodePopup-list-item-code'
:
{
fontSize
:
14
,
color
:
theme
.
fonts
.
black1
,
},
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment