@ant-design/icons#PhoneOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#PhoneOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 4 votes |
|
export function Header({
visible = false,
onCancel = () => {},
showDetail = () => {},
showIncomingCall = () => {},
}) {
const { channel } = useDashboard()
const name = channel?.name
return (
<Row
style={{
height: 60,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 12px',
}}
>
<Col
style={{
display: 'flex',
justifyContent: 'flex-start',
}}
span={3}
>
<Button
style={{ border: 0 }}
type="ghost"
icon={<LeftOutlined style={{ color: PRIMARY_COLOR }} />}
size="large"
onClick={onCancel}
/>
</Col>
<Col
style={{
display: 'flex',
justifyContent: 'flex-start',
}}
span={12}
>
{name}
</Col>
<Col
style={{
display: 'flex',
justifyContent: 'flex-end',
}}
span={9}
>
<Button
style={{ border: 0 }}
type="ghost"
icon={<PhoneOutlined style={{ color: PRIMARY_COLOR }} />}
size="large"
onClick={showIncomingCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<VideoCameraOutlined style={{ color: PRIMARY_COLOR }} />
}
size="large"
onClick={showIncomingCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<InfoCircleOutlined
style={{
color: visible && PRIMARY_COLOR,
}}
/>
}
size="large"
onClick={showDetail}
/>
</Col>
</Row>
)
}
Example #2
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 4 votes |
|
export function Header({ detailVisible = false, toggleShowDetail = () => {} }) {
const { channel, setShowVideoCall } = useDashboard()
const [showIncomingCall, setShowIncomingCall] = useState(false)
const handleAudioCall = () => {
setShowIncomingCall((prevState) => !prevState)
}
const handleVideoCall = () => {
setShowIncomingCall((prevState) => !prevState)
}
const handleOk = () => {
setShowVideoCall(true)
setShowIncomingCall(false)
}
const handleCancel = () => {
setShowIncomingCall(false)
}
const url = channel.url
const shortName = capitalizeFirstLetter(
firstCharacterOfEachString(channel.name)
)
const name = channel.name
return (
<Fragment>
<Row
style={{
height: 60,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 12px',
borderBottom: `1px solid ${THIRD_COLOR}`,
}}
>
<Col
style={{
display: 'flex',
alignItems: 'center',
}}
>
<Avatar
style={{
color: PRIMARY_COLOR,
backgroundColor: SECONDARY_COLOR,
marginRight: 12,
}}
src={url}
>
{shortName}
</Avatar>
<Title style={{ margin: 0 }} level={4}>
{name}
</Title>
</Col>
<Col>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<PhoneOutlined style={{ color: PRIMARY_COLOR }} />
}
size="large"
onClick={handleAudioCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<VideoCameraOutlined
style={{ color: PRIMARY_COLOR }}
/>
}
size="large"
onClick={handleVideoCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<InfoCircleOutlined
style={{
color: detailVisible && PRIMARY_COLOR,
}}
/>
}
size="large"
onClick={toggleShowDetail}
/>
</Col>
</Row>
<IncomingCallModal
visible={showIncomingCall}
onOk={handleOk}
onCancel={handleCancel}
/>
</Fragment>
)
}
Example #3
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 4 votes |
|
export function Header({
visible = false,
onCancel = () => {},
showDetail = () => {},
handleAudioCall = () => {},
handleVideoCall = () => {},
}) {
const { channel } = useDashboard()
const formatChannel = channelDto(channel)
const name = formatChannel.name
return (
<Row
style={{
height: 60,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 12px',
}}
>
<Col
style={{
display: 'flex',
justifyContent: 'flex-start',
}}
span={3}
>
<Button
style={{ border: 0 }}
type="ghost"
icon={<LeftOutlined style={{ color: PRIMARY_COLOR }} />}
size="large"
onClick={onCancel}
/>
</Col>
<Col
style={{
display: 'flex',
justifyContent: 'flex-start',
}}
span={12}
>
{name}
</Col>
<Col
style={{
display: 'flex',
justifyContent: 'flex-end',
}}
span={9}
>
<Button
style={{ border: 0 }}
type="ghost"
icon={<PhoneOutlined style={{ color: PRIMARY_COLOR }} />}
size="large"
onClick={handleAudioCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<VideoCameraOutlined style={{ color: PRIMARY_COLOR }} />
}
size="large"
onClick={handleVideoCall}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<InfoCircleOutlined
style={{
color: visible && PRIMARY_COLOR,
}}
/>
}
size="large"
onClick={showDetail}
/>
</Col>
</Row>
)
}
Example #4
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 4 votes |
|
export function Header({ detailVisible = false, toggleShowDetail = () => {} }) {
const {
channel,
setShowVideoCall,
directCall,
setDirectCall,
setMediaAccess,
} = useDashboard()
const {
requireMediaAccess,
dial,
accept,
onRinging,
onAudioInputDeviceChanged,
onAudioOutputDeviceChanged,
onVideoInputDeviceChanged,
dispose,
} = useSendBird()
const [showIncomingCall, setShowIncomingCall] = useState(false)
const listenOnRinging = async () => {
const { call } = await onRinging()
console.log(call.caller.nickname, call.caller.userId)
const mediaAccess = await requireMediaAccess()
setMediaAccess(mediaAccess)
setDirectCall(call)
setShowIncomingCall(true)
call.onEstablished = (call) => {
// ...
console.log('onEstablished', call)
}
call.onConnected = (call) => {
// ...
console.log('onConnected', call)
}
call.onEnded = (call) => {
// ...
console.log('onEnded')
call.end()
dispose(mediaAccess)
setDirectCall(null)
setShowVideoCall(false)
}
call.onRemoteAudioSettingsChanged = (call) => {
// ...
console.log('onRemoteAudioSettingsChanged', call)
if (call.isRemoteAudioEnabled) {
console.log('isRemoteAudioEnabled', call)
// The remote user has been unmuted.
// TODO: Display an unmuted icon.
} else {
console.log('isLocalAudioEnabled', call)
// The remote user has been muted.
// TODO: Display and toggles a muted icon.
}
}
call.onRemoteVideoSettingsChanged = (call) => {
// ...
console.log('onRemoteVideoSettingsChanged', call)
}
}
const listenOnAudioInputDeviceChanged = async () => {
const { call } = await onAudioInputDeviceChanged()
console.log(call)
}
const listenOnAudioOutputDeviceChanged = async () => {
const { call } = await onAudioOutputDeviceChanged()
console.log(call)
}
const listenOnVideoInputDeviceChanged = async () => {
const { call } = await onVideoInputDeviceChanged()
console.log(call)
}
useLayoutEffect(() => {
listenOnRinging()
listenOnAudioInputDeviceChanged()
listenOnAudioOutputDeviceChanged()
listenOnVideoInputDeviceChanged()
})
const handleAudioCall = () => {
console.log('handleAudioCall')
}
const handleVideoCall = () => {
setShowVideoCall(true)
setShowIncomingCall(false)
setTimeout(async () => {
const mediaAccess = await requireMediaAccess()
// console.log(mediaAccess)
const callee = channel.members.find(
(element) => element.userId !== localStorage.getItem('userId')
).userId
const call = await dial(callee)
// console.log(call)
setMediaAccess(mediaAccess)
setDirectCall(call)
}, 500)
}
const handleOk = () => {
// console.log(directCall)
setShowVideoCall(true)
setShowIncomingCall(false)
setTimeout(async () => {
accept(directCall)
}, 500)
}
const handleCancel = () => {
directCall.end()
setDirectCall(null)
setShowIncomingCall(false)
}
const formatChannel = channelDto(channel)
const url = formatChannel.url
const shortName = capitalizeFirstLetter(
firstCharacterOfEachString(formatChannel.name)
)
const name = formatChannel.name
return (
<Fragment>
<Row
style={{
height: 60,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '0 12px',
borderBottom: `1px solid ${THIRD_COLOR}`,
}}
>
<Col
style={{
display: 'flex',
alignItems: 'center',
}}
>
<Avatar
style={{
color: PRIMARY_COLOR,
backgroundColor: SECONDARY_COLOR,
marginRight: 12,
}}
src={url}
>
{shortName}
</Avatar>
<Title style={{ margin: 0 }} level={4}>
{name}
</Title>
</Col>
<Col style={{ display: 'flex' }}>
<ScaleIn>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<PhoneOutlined
style={{ color: PRIMARY_COLOR }}
/>
}
size="large"
onClick={handleAudioCall}
/>
</ScaleIn>
<ScaleIn>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<VideoCameraOutlined
style={{ color: PRIMARY_COLOR }}
/>
}
size="large"
onClick={handleVideoCall}
/>
</ScaleIn>
<ScaleIn>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<InfoCircleOutlined
style={{
color: detailVisible && PRIMARY_COLOR,
}}
/>
}
size="large"
onClick={toggleShowDetail}
/>
</ScaleIn>
</Col>
</Row>
<IncomingCallModal
caller={directCall?.caller}
visible={showIncomingCall}
onOk={handleOk}
onCancel={handleCancel}
/>
</Fragment>
)
}
Example #5
| Source File: ParticipantDetail.js From react-portal with MIT License | 4 votes |
|
ParticipantsDetails = props => {
const [info, setInfo] = useState(null);
const [eventsData, setEventsData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
(async () => {
setIsLoading(true);
try {
const params = { pid: props.participantId };
const { data } = await getParticipantsDetailService(params);
setInfo(data.profileData);
setEventsData(attendanceCalc(data.events));
setIsLoading(false);
} catch (err) {
_notification("warning", "Error", err.message);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const attendanceCalc = events => {
if (events) {
events.forEach(event => {
let start = new Date(event.details.startDate);
let end = new Date(event.details.endDate);
let data = [];
let dayAttend = [];
dayAttend = event.attendance.daysAttended.map(d => {
return d.split("T")[0];
});
let status;
for (let d = start; d <= end; d.setDate(d.getDate() + 1)) {
if (
dayAttend.includes(
moment(new Date(d)).format("YYYY-MM-DD")
)
) {
status = "Present";
} else if (
!dayAttend.includes(
moment(new Date(d)).format("YYYY-MM-DD")
) &&
moment(new Date(d)).format("YYYY-MM-DD") <
moment(Date.now()).format("YYYY-MM-DD")
) {
status = "Absent";
} else if (
!dayAttend.includes(
moment(new Date(d)).format("YYYY-MM-DD")
)
) {
status = "Pending";
}
data.push({
status,
date: moment(new Date(d)).format("YYYY-MM-DD")
});
}
event.attendance.dayWiseAttendance = data;
});
return events;
}
};
return (
<>
<Skeleton avatar loading={isLoading} active>
{info ? (
<Card loading={isLoading}>
<Card.Meta
avatar={
<Avatar src="https://avatars.dicebear.com/v2/identicon/12324.svg" />
}
title={`${info.name} (${info.email})`}
description={
<>
<PhoneOutlined /> {info.phone}{" "}
<InfoCircleOutlined /> {info.branch},{" "}
{info.year}
</>
}
/>
</Card>
) : null}
<br />
<br />
<h3>Events Information</h3>
<br />
<Timeline>
{eventsData.length !== 0 ? (
eventsData.map((event, id) => (
<Timeline.Item
key={id}
color={
event.status === "not attended"
? "red"
: "green"
}
>
<p>
<span style={{ fontWeight: "700" }}>
{event.details.title}
</span>{" "}
<Tag>{event.status.toUpperCase()}</Tag>
<Tag
color={
event.isRsvpAccepted
? "green"
: "red"
}
>
{event.isRsvpAccepted
? "RSVP: Accepted"
: "RSVP: Not Accepted"}
</Tag>
</p>
<p>{event.details.description}</p>
<p>
{new Date(
event.details.startDate
).toDateString()}{" "}
to{" "}
{new Date(
event.details.endDate
).toDateString()}{" "}
({event.details.venue})
</p>
<p style={{ fontWeight: "600" }}>Attendance</p>
<div style={{ display: "flex" }}>
{event.attendance.dayWiseAttendance &&
event.attendance.dayWiseAttendance.map(
(attendance, id) => {
return (
<Tag
key={id}
color={
attendance.status ===
"Pending"
? "#108ee9"
: attendance.status ===
"Present"
? "#87d068"
: "#f50"
}
>
{moment(
attendance.date
).format("DD/MM/YYYY")}
- {attendance.status}
</Tag>
);
}
)}
</div>
</Timeline.Item>
))
) : (
<div>Not regeistered in any Event</div>
)}
</Timeline>
</Skeleton>
</>
);
}
