antd#Badge JavaScript Examples
The following examples show how to use
antd#Badge.
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: overflow.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/badge', module).add('overflow', () =>
<div>
<Badge count={99}>
<a href="#" className="head-example" />
</Badge>
<Badge count={100}>
<a href="#" className="head-example" />
</Badge>
<Badge count={99} overflowCount={10}>
<a href="#" className="head-example" />
</Badge>
<Badge count={1000} overflowCount={999}>
<a href="#" className="head-example" />
</Badge>
</div>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p><code>mountNode,
#123;overflowCount}+</code> is displayed when count is larger than <code>overflowCount</code>. The default value of <code>overflowCount</code> is <code>99</code>.</p></>) } });
Example #2
| Source File: index.js From gobench with Apache License 2.0 | 6 votes |
|
function dateCellRender (value) {
const listData = getListData(value)
return (
<ul className='events'>
{listData.map(item => (
<li key={item.content}>
<Badge status={item.type} text={item.content} />
</li>
))}
</ul>
)
}
Example #3
| Source File: index.js From camel-store-admin with Apache License 2.0 | 6 votes |
|
render() {
const { className, count, popupAlign, popupVisible, onPopupVisibleChange, bell } = this.props;
const noticeButtonClass = classNames(className, styles.noticeButton);
const notificationBox = this.getNotificationBox();
const NoticeBellIcon = bell || <Icon type="bell" className={styles.icon} />;
const trigger = (
<span className={noticeButtonClass}>
<Badge count={count} style={{ boxShadow: 'none' }} className={styles.badge}>
{NoticeBellIcon}
</Badge>
</span>
);
if (!notificationBox) {
return trigger;
}
const popoverProps = {};
if ('popupVisible' in this.props) {
popoverProps.visible = popupVisible;
}
return (
<Popover
placement="bottomRight"
content={notificationBox}
popupClassName={styles.popover}
trigger="click"
arrowPointAtCenter
popupAlign={popupAlign}
onVisibleChange={onPopupVisibleChange}
{...popoverProps}
>
{trigger}
</Popover>
);
}
Example #4
| Source File: Navbar.js From placement-portal with MIT License | 6 votes |
|
render() {
const {onCollapse, collapsed} = this.props;
const menu = (
<Menu
theme='light'
mode="horizontal"
style={{
lineHeight:'64px',
width: '100%'
}}
selectable={false}
>
<Menu.Item key={"Header"}>
<Typography.Text style={{fontSize: '1.2rem', float: 'left'}}>{this.props.profileData.company_name}</Typography.Text>
</Menu.Item>
<Menu.Item key="logout" onClick={this.handleLogoutAction} style={{float: 'right'}}>
<Avatar size={35} src={this.props.profileData.logo_link}/>
</Menu.Item>
<Menu.Item key={"notification"} style={{float: 'right'}}>
<Badge count={21}>
<BellOutlined style={{fontSize: '1.2rem'}}/>
</Badge>
</Menu.Item>
<Menu.Item key={"searchBar"} style={{float: 'right'}}>
<Input.Search
placeholder={"Search students"}
/>
</Menu.Item>
</Menu>
);
return (
<Header style={{background: '#fff', padding: '0 12px'}}>
{menu}
</Header>
);
}
Example #5
| Source File: loan.js From credit with Apache License 2.0 | 6 votes |
|
render() {
return (
<Descriptions title="个人信用及贷款记录" bordered>
<Descriptions.Item label="客户">李明</Descriptions.Item>
<Descriptions.Item label="信用分">85</Descriptions.Item>
<Descriptions.Item label="上次评估日期">2021/1/26</Descriptions.Item>
<Descriptions.Item label="目前信用状况" span={3}>
<Badge status="processing" text="良好" />
</Descriptions.Item>
<Descriptions.Item label="最大贷款金额">￥80000</Descriptions.Item>
<Descriptions.Item label="目前贷款金额">￥40000</Descriptions.Item>
<Descriptions.Item label="可用贷款金额">￥40000</Descriptions.Item>
<Descriptions.Item label="贷款记录">
1.日期:2020/2/15 金额：￥50000
<br />
状况：还款完毕
<br />
<br />
2.日期：2020/11/13 金额：￥40000
<br />
状况：未还款
<br />
<br />
</Descriptions.Item>
<Space direction="vertical">
<Search placeholder="输入贷款金额" enterButton="确认" onSearch={this.addLoan} style={{ width: 500 }} />
</Space>
</Descriptions>
)
}
Example #6
| Source File: basic.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/badge', module).add('basic', () =>
<div>
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
<Badge count={0} showZero>
<a href="#" className="head-example" />
</Badge>
<Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
<a href="#" className="head-example" />
</Badge>
</div>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Simplest Usage. Badge will be hidden when <code>count</code> is <code>0</code>, but we can use <code>showZero</code> to show it.</p></>) } });
Example #7
| Source File: AdvancedProfile.js From acy-dex-interface with MIT License | 6 votes |
|
popoverContent = (
<div style={{ width: 160 }}>
吴加号
<span className={styles.textSecondary} style={{ float: 'right' }}>
<Badge status="default" text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>未响应</span>} />
</span>
<div className={styles.textSecondary} style={{ marginTop: 4 }}>
耗时：2小时25分钟
</div>
</div>
)
Example #8
| Source File: ribbon-debug.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/badge', module).add('ribbon-debug', () =>
<Space direction="vertical" style={{ width: '100%' }}>
<Badge.Ribbon text="啦啦啦啦">
<Card>推开窗户举起望远镜</Card>
</Badge.Ribbon>
<Badge.Ribbon text="啦啦啦啦" color="purple">
<Card>推开窗户举起望远镜</Card>
</Badge.Ribbon>
<Badge.Ribbon text="啦啦啦啦" color="#2db7f5">
<Card>推开窗户举起望远镜</Card>
</Badge.Ribbon>
<Badge.Ribbon text="啦啦啦啦" color="#2db7f5" placement="start">
<Card>推开窗户举起望远镜</Card>
</Badge.Ribbon>
<Badge.Ribbon text="啦啦啦啦" color="#2db7f5" placement="end">
<Card>推开窗户举起望远镜</Card>
</Badge.Ribbon>
</Space>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Buggy!</p></>) } });
Example #9
| Source File: index copy.jsx From prometheusPro with MIT License | 6 votes |
|
columns = [
{
title: '操作类型',
dataIndex: 'type',
key: 'type',
},
{
title: '操作人',
dataIndex: 'name',
key: 'name',
},
{
title: '执行结果',
dataIndex: 'status',
key: 'status',
render: text => {
if (text === 'agree') {
return <Badge status="success" text="成功" />;
}
return <Badge status="error" text="驳回" />;
},
},
{
title: '操作时间',
dataIndex: 'updatedAt',
key: 'updatedAt',
},
{
title: '备注',
dataIndex: 'memo',
key: 'memo',
},
]
Example #10
| Source File: index.js From acy-dex-interface with MIT License | 6 votes |
|
render() {
const { className, count, popupVisible, bell } = this.props;
const { visible } = this.state;
const noticeButtonClass = classNames(className, styles.noticeButton);
const notificationBox = this.getNotificationBox();
const NoticeBellIcon = bell || <Icon type="bell" className={styles.icon} />;
const trigger = (
<span className={classNames(noticeButtonClass, { opened: visible })}>
<Badge count={count} style={{ boxShadow: 'none' }} className={styles.badge}>
{NoticeBellIcon}
</Badge>
</span>
);
if (!notificationBox) {
return trigger;
}
const popoverProps = {};
if ('popupVisible' in this.props) {
popoverProps.visible = popupVisible;
}
return (
<HeaderDropdown
placement="bottomRight"
overlay={notificationBox}
overlayClassName={styles.popover}
trigger={['click']}
visible={visible}
onVisibleChange={this.handleVisibleChange}
{...popoverProps}
ref={node => (this.popover = ReactDOM.findDOMNode(node))} // eslint-disable-line
>
{trigger}
</HeaderDropdown>
);
}
Example #11
| Source File: index.js From online-test-platform with Apache License 2.0 | 6 votes |
|
render() {
const { className, count, popupVisible, bell } = this.props;
const { visible } = this.state;
const noticeButtonClass = classNames(className, styles.noticeButton);
const notificationBox = this.getNotificationBox();
const NoticeBellIcon = bell || <Icon type="bell" className={styles.icon} />;
const trigger = (
<span className={classNames(noticeButtonClass, { opened: visible })}>
<Badge count={count} style={{ boxShadow: 'none' }} className={styles.badge}>
{NoticeBellIcon}
</Badge>
</span>
);
if (!notificationBox) {
return trigger;
}
const popoverProps = {};
if ('popupVisible' in this.props) {
popoverProps.visible = popupVisible;
}
return (
<HeaderDropdown
placement="bottomRight"
overlay={notificationBox}
overlayClassName={styles.popover}
trigger={['click']}
visible={visible}
onVisibleChange={this.handleVisibleChange}
{...popoverProps}
ref={node => (this.popover = ReactDOM.findDOMNode(node))} // eslint-disable-line
>
{trigger}
</HeaderDropdown>
);
}
Example #12
| Source File: BasicProfile.js From acy-dex-interface with MIT License | 6 votes |
|
progressColumns = [
{
title: '时间',
dataIndex: 'time',
key: 'time',
},
{
title: '当前进度',
dataIndex: 'rate',
key: 'rate',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
render: text =>
text === 'success' ? (
<Badge status="success" text="成功" />
) : (
<Badge status="processing" text="进行中" />
),
},
{
title: '操作员ID',
dataIndex: 'operator',
key: 'operator',
},
{
title: '耗时',
dataIndex: 'cost',
key: 'cost',
},
]
Example #13
| Source File: index.js From QiskitFlow with Apache License 2.0 | 6 votes |
|
experimentsColumns = [
{ title: 'Experiment', dataIndex: 'experiment', key: 'experiment' },
{
title: 'Run status', dataIndex: 'runs', key: 'runs', render: (runs) => {
let renderedRuns = runs.map((run, i) => <span key={i}><Badge status="success" /></span>)
return (<span>{renderedRuns}</span>)
}
},
{ title: 'Author', dataIndex: 'author', key: 'author' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a>Share</a> },
]
Example #14
| Source File: index.js From discern with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
render () {
const {icon, count, visible, avatar} = this.state
const {appStore, collapsed, location} = this.props
const notLogin = (
<div>
<Link to={{pathname: '/login', state: {from: location}}} style={{color: 'rgba(0, 0, 0, 0.65)'}}>登录</Link>
<img src={require('../../assets/img/defaultUser.jpg')} alt=""/>
</div>
)
const menu = (
<Menu className='menu'>
<Menu.ItemGroup title='用户中心' className='menu-group'>
<Menu.Item>你好 - {isAuthenticated()}</Menu.Item>
<Menu.Item>个人信息</Menu.Item>
<Menu.Item><span onClick={this.logout}>退出登录</span></Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title='设置中心' className='menu-group'>
<Menu.Item>个人设置</Menu.Item>
<Menu.Item>系统设置</Menu.Item>
</Menu.ItemGroup>
</Menu>
)
const login = (
<Dropdown overlay={menu}>
<img onClick={() => this.setState({visible: true})} src={avatar} alt=""/>
</Dropdown>
)
return (
<div id='headerbar'>
<Icon
type={collapsed ? 'menu-unfold' : 'menu-fold'}
className='trigger'
onClick={this.toggle}/>
<div style={{lineHeight: '64px', float: 'right'}}>
<ul className='header-ul'>
<li><Icon type={icon} onClick={this.screenfullToggle}/></li>
<li onClick={() => this.setState({count: 0})}>
<Badge count={appStore.isLogin ? count : 0} overflowCount={99} style={{marginRight: -17}}>
<Icon type="notification"/>
</Badge>
</li>
<li>
{appStore.isLogin ? login : notLogin}
</li>
</ul>
</div>
<Modal
footer={null} closable={false}
visible={visible}
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({visible: false})}>
<img src={avatar} alt="" width='100%'/>
</Modal>
</div>
)
}
Example #15
| Source File: link.jsx From virtuoso-design-system with MIT License | 5 votes |
|
storiesOf('antd/badge', module).add('link', () =>
<a href="#">
<Badge count={5}>
<span className="head-example" />
</Badge>
</a>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The badge can be wrapped with <code>a</code> tag to make it linkable.</p></>) } });
Example #16
| Source File: UserDashboard.js From credit with Apache License 2.0 | 5 votes |
|
render() {
return (
<div className="user-background">
<h3 className="title">个人信息</h3>
<Row justify="space-between">
<Col span={6}>
<Card style={{ width: 300, marginTop: 16 }} bordered={false}>
<Meta
avatar={
<Avatar src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2586243650,1628445668&fm=26&gp=0.jpg" />
}
title="欢迎回来，Chris"
description="这里是您的详情信息"
/>
</Card>
</Col>
<Col span={6}>
<Card style={{ width: 300, marginTop: 16 }} bordered={false}>
<Statistic
title="当前信用分"
value={710}
precision={2}
valueStyle={{ color: '#3f8600' }}
/>
</Card>
</Col>
<Col span={6}>
</Col>
<Col span={6}>
</Col>
<Col span={6}>
</Col>
</Row>
<Row>
<Descriptions bordered>
<Descriptions.Item label="用户姓名">Chris</Descriptions.Item>
<Descriptions.Item label="性别">男</Descriptions.Item>
<Descriptions.Item label="年龄">25</Descriptions.Item>
<Descriptions.Item label="信息录入时间">2021-03-15 18:03:15</Descriptions.Item>
<Descriptions.Item label="信用评分时间" span={2}>
2021-03-15 18:15:08
</Descriptions.Item>
<Descriptions.Item label="账户地址" span={3}>
<a>0x10a12eB389B0Df756C63778E522C3463B7B60BD0</a>
</Descriptions.Item>
<Descriptions.Item label="当前数据状态" span={3}>
<Badge status="processing" text="尚未授权机构使用" />
</Descriptions.Item>
<Descriptions.Item label="名下房产数量">1</Descriptions.Item>
<Descriptions.Item label="贷款余额">￥200000.00</Descriptions.Item>
<Descriptions.Item label="月收入">￥15000.00</Descriptions.Item>
<Descriptions.Item label="信用历史">
三个月内信用卡逾期次数：<span className="normal">0</span>
<br />
半年内信用卡逾期次数: <span className="warning">1</span>
<br />
一年内信用卡逾期次数: <span className="warning">1</span>
<br />
两年内信用卡逾期次数: <span className="warning">2</span>
<br />
</Descriptions.Item>
</Descriptions>
</Row>
<a>{'>>'}更多</a>
</div>
)
}
Example #17
| Source File: offset.jsx From virtuoso-design-system with MIT License | 5 votes |
|
storiesOf('antd/badge', module).add('offset', () =>
<>
<Badge count={5} offset={[10, 10]}>
<a href="#" className="head-example" />
</Badge>
</>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Set offset of the badge dot, the format is <code>[left, top]</code>, which represents the offset of the status dot from the left and top of the default position.</p></>) } });
Example #18
| Source File: Navbar.js From placement-portal with MIT License | 5 votes |
|
render() {
const {onCollapse, collapsed} = this.props;
const menu = (
<Menu
theme='light'
mode="horizontal"
style={{
lineHeight:'64px',
width: '100%'
}}
selectable={false}
>
<Menu.Item key={"Header"}>
<Typography.Text style={{fontSize: '1.2rem', float: 'left'}}>IIT Goa</Typography.Text>
</Menu.Item>
{/*<Menu.Item key="trigger" onClick={onCollapse} style={{float: 'left'}}>*/}
{/* <Icon type={collapsed? "menu-unfold" : "menu-fold"} style={{fontSize: '1.2rem'}}/>*/}
{/*</Menu.Item>*/}
<Menu.Item key="logout" onClick={this.handleLogoutAction} style={{float: 'right'}}>
<Avatar size={35} style={{background: "#212121"}}>
A
</Avatar>
</Menu.Item>
<Menu.Item key={"notification"} style={{float: 'right'}}>
<Badge count={21}>
<BellOutlined style={{fontSize: '1.2rem'}}/>
</Badge>
</Menu.Item>
<Menu.Item key={"searchBar"} style={{float: 'right'}}>
<Input.Search
placeholder={"Search students"}
/>
</Menu.Item>
</Menu>
);
return (
<Header style={{background: '#fff', padding: '0 12px'}}>
{menu}
</Header>
);
}
Example #19
| Source File: index.js From QiskitFlow with Apache License 2.0 | 5 votes |
|
expandedRowRender(experiment) {
let runs = experiment.runs.map((run, i) => {
return {
key: i,
date: run.created_at,
name: run.uuid,
operation: run
}
})
const runColumns = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Run', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => (
<span>
<Badge status="success" />
Finished
</span>
),
},
{ title: 'Tags', dataIndex: 'tags', key: 'tags', render: () => <Tag>Qiskit</Tag> },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: (run) => (
<Space size="middle">
<a onClick={() => {
this.setState({...this.state, run: run})
}}>View</a>
<a>Rerun</a>
</Space>
),
},
];
return <Table
columns={runColumns}
dataSource={runs}
pagination={false} />;
}
Example #20
| Source File: index.js From aircon with GNU General Public License v3.0 | 5 votes |
|
render() {
const { icon, count, visible, avatar } = this.state;
const { appStore, collapsed, location } = this.props;
const notLogin = (
<div>
<Link
to={{ pathname: '/login', state: { from: location } }}
style={{ color: 'rgba(0, 0, 0, 0.65)' }}
>
登录
</Link>
<img src={require('../../assets/img/defaultUser.jpg')} alt="" />
</div>
);
const menu = (
<Menu className="menu">
<Menu.ItemGroup title="用户中心" className="menu-group">
<Menu.Item>你好 - {isAuthenticated()}</Menu.Item>
<Menu.Item>
<span onClick={this.logout}>退出登录</span>
</Menu.Item>
</Menu.ItemGroup>
</Menu>
);
const login = (
<Dropdown overlay={menu}>
<img
onClick={() => this.setState({ visible: true })}
src={avatar}
alt=""
/>
</Dropdown>
);
return (
<div id="headerbar">
<Icon
type={collapsed ? 'menu-unfold' : 'menu-fold'}
className="trigger"
onClick={this.toggle}
/>
<div style={{ lineHeight: '64px', float: 'right' }}>
<ul className="header-ul">
<li>
<Icon type={icon} onClick={this.screenfullToggle} />
</li>
<li onClick={() => this.setState({ count: 0 })}>
<Badge
count={appStore.isLogin ? count : 0}
overflowCount={99}
style={{ marginRight: -17 }}
>
<Icon type="notification" />
</Badge>
</li>
<li>{appStore.isLogin ? login : notLogin}</li>
</ul>
</div>
<Modal
footer={null}
closable={false}
visible={visible}
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({ visible: false })}
>
<img src={avatar} alt="" width="100%" />
</Modal>
</div>
);
}
Example #21
| Source File: RegionItem.js From label-studio-frontend with Apache License 2.0 | 5 votes |
|
RegionItemContent = observer(({ idx, item, setDraggable }) => {
const itemElRef = useRef();
useEffect(()=>{
if (item.selected) {
const el = itemElRef.current;
if (!el) return;
const scroll = el.scrollIntoViewIfNeeded || el.scrollIntoView;
scroll.call(el);
}
}, [item.selected]);
return (
<Block ref={itemElRef} name="region-item" mod={{ hidden : item.hidden }}>
<Elem name="header" tag="div">
<Elem name="counter">{isDefined(idx) ? idx + 1 : ""}</Elem>
<Elem name="title" tag={Node} node={item} mix={styles.node}/>
<Space size="small">
<Elem tag="span" name="id">
<NodeIcon node={item}/>
</Elem>
<Elem name="prediction">
{item.origin === 'prediction' && (
<LsSparks style={{ width: 16, height: 16 }}/>
)}
</Elem>
{!item.editable && <Badge count={"ro"} style={{ backgroundColor: "#ccc" }}/>}
{item.score && (
<Elem
tag="span"
name="score"
style={{
color: Utils.Colors.getScaleGradient(item.score),
}}
>
{item.score.toFixed(2)}
</Elem>
)}
{item.hideable && (
<Elem
tag={Button}
name="toggle"
size="small"
type="text"
mod={{ active: !item.hidden }}
onClick={item.toggleHidden}
>{item.hidden ? <LsInvisible/> : <LsVisible/>}</Elem>
)}
</Space>
</Elem>
<RegionItemDesc item={item} setDraggable={setDraggable}/>
</Block>
);
})
Example #22
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 5 votes |
|
export function ChannelItem({ channel, handleShowChannel = () => {} }) {
const { setChannel } = useDashboard()
const handleClickChannel = () => {
setChannel(channel)
handleShowChannel()
}
const isUnread = channel.isUnread
const url = channel.url
const shortName = capitalizeFirstLetter(
firstCharacterOfEachString(channel.name)
)
const name = channel.name
const lastMessage = channel.lastMessage
const createdAt = formatLastTime(channel.createdAt)
return (
<Row
style={{
height: 60,
width: '100%',
justifyContent: 'space-between',
alignItems: 'center',
borderBottom: `1px solid ${THIRD_COLOR}`,
padding: '0 12px',
backgroundColor: isUnread && FOURTH_COLOR,
cursor: 'pointer',
}}
key={url}
onClick={handleClickChannel}
>
<Col xs={3} sm={3} md={3} lg={4} xl={3}>
<Avatar style={{ marginRight: 12 }} src={url} size="large">
{shortName}
</Avatar>
</Col>
<Col xs={14} sm={14} md={14} lg={12} xl={14}>
<Row>
<Text
style={{ margin: 0, padding: '0 10px' }}
strong={isUnread}
ellipsis={true}
// level={5}
>
{name}
</Text>
</Row>
<Row>
<Text
style={{ padding: '0 10px', fontSize: 12 }}
type={!isUnread && 'secondary'}
ellipsis={true}
strong={isUnread}
>
{lastMessage}
</Text>
</Row>
</Col>
<Col
style={{
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
}}
xs={7}
sm={7}
md={7}
lg={8}
xl={7}
>
<Text strong={isUnread}>{createdAt}</Text>
{isUnread && (
<Badge style={{ marginLeft: 12 }} color={PRIMARY_COLOR} />
)}
</Col>
</Row>
)
}
Example #23
| Source File: NotificationNav.js From video-journal-for-teams-fe with MIT License | 5 votes |
|
function NotificationNav(props) {
const { fetchUserVideos, userId, videos, organizations, defaultOrganization, selectedOrganization } = props;
useEffect(() => {
socket.on("insertedFeedback", () => {
fetchUserVideos(userId, organization_id);
});
}, []);
let organization_id = "";
if (typeof selectedOrganization === "undefined" || typeof defaultOrganization === "undefined") {
organization_id = "";
} else {
organization_id = selectedOrganization.id ? selectedOrganization.id : defaultOrganization.id;
}
//getting feedback data for each video
let feedback = videos.map((item) => {
return item.feedback;
});
let userFeedback = gatherFeedback(feedback);
// loop through Array or array for feedback and then obtain one single array
function gatherFeedback(arr) {
let newArray = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i].length > 0) {
for (let k = 0; k < arr[i].length; k++) {
if (arr[i][k].viewed === false) {
newArray.push(arr[i][k]);
}
}
}
}
return newArray;
}
//populate feedback data into the menu itemm
const menu = (
<Menu>
{userFeedback.length > 0 ? (
userFeedback.map((item) => (
<Menu.Item>
<Link to={`/videos/${item.video_id}`}>
{item.first_name} {item.last_name} left feedback on {item.video_title}
</Link>
</Menu.Item>
))
) : (
<Menu.Item>No new comments</Menu.Item>
)}
</Menu>
);
return (
<>
<Dropdown overlay={menu} className="margin-right">
<a className="ant-dropdown-link" style={{ color: "grey" }} onClick={(e) => e.preventDefault()}>
<Badge count={userFeedback.length} className="badger">
<BellOutlined style={{ fontSize: "40px", color: "#FF7F50" }} />
</Badge>
</a>
</Dropdown>
</>
);
}
Example #24
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 5 votes |
|
export function ChannelItem({ channel }) {
const { setChannel } = useDashboard()
const handleClickChannel = () => {
setChannel(channel)
}
const isUnread = channel.isUnread
const url = channel.url
const shortName = capitalizeFirstLetter(
firstCharacterOfEachString(channel.name)
)
const name = channel.name
const lastMessage = channel.lastMessage
const createdAt = formatLastTime(channel.createdAt)
return (
<Row
style={{
height: 60,
width: '100%',
justifyContent: 'space-between',
alignItems: 'center',
borderBottom: `1px solid ${THIRD_COLOR}`,
padding: '0 12px',
backgroundColor: isUnread && FOURTH_COLOR,
cursor: 'pointer',
}}
key={url}
onClick={handleClickChannel}
>
<Col xs={3} sm={3} md={3} lg={4} xl={3}>
<Avatar style={{ marginRight: 12 }} src={url} size="large">
{shortName}
</Avatar>
</Col>
<Col xs={14} sm={14} md={14} lg={12} xl={14}>
<Row>
<Text
style={{ margin: 0, padding: '0 10px' }}
strong={isUnread}
ellipsis={true}
// level={5}
>
{name}
</Text>
</Row>
<Row>
<Text
style={{ padding: '0 10px', fontSize: 12 }}
type={!isUnread && 'secondary'}
ellipsis={true}
strong={isUnread}
>
{lastMessage}
</Text>
</Row>
</Col>
<Col
style={{
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
}}
xs={7}
sm={7}
md={7}
lg={8}
xl={7}
>
<Text strong={isUnread}>{createdAt}</Text>
{isUnread && (
<Badge style={{ marginLeft: 12 }} color={PRIMARY_COLOR} />
)}
</Col>
</Row>
)
}
Example #25
| Source File: index.jsx From egoshop with Apache License 2.0 | 5 votes |
|
render() {
const { className, count, popupVisible, bell } = this.props;
const { visible } = this.state;
const noticeButtonClass = classNames(className, styles.noticeButton);
const notificationBox = this.getNotificationBox();
const NoticeBellIcon = bell || <Icon type="bell" className={styles.icon} />;
const trigger = (
<span
className={classNames(noticeButtonClass, {
opened: visible,
})}
>
<Badge
count={count}
style={{
boxShadow: 'none',
}}
className={styles.badge}
>
{NoticeBellIcon}
</Badge>
</span>
);
if (!notificationBox) {
return trigger;
}
const popoverProps = {};
if ('popupVisible' in this.props) {
popoverProps.visible = popupVisible;
}
return (
<HeaderDropdown
placement="bottomRight"
overlay={notificationBox}
overlayClassName={styles.popover}
trigger={['click']}
visible={visible}
onVisibleChange={this.handleVisibleChange}
{...popoverProps}
>
{trigger}
</HeaderDropdown>
);
}
Example #26
| Source File: cartHeader.js From shopping-cart-fe with MIT License | 5 votes |
|
CartHeader = ({
logoPath,
badgeCount = 0,
currency = '',
totalDue = 0,
displayBack,
displayTotal,
top = false
}) => {
const dispatch = useDispatch();
const cartContents = useSelector((state) => state.cart);
const storeDetails = useSelector((state) => state.user.user);
const sign = useCurrency(storeDetails.currency);
const totalPrice = (arr) => {
return arr.reduce((sum, item) => {
return sum + item.price * item.quantity;
}, 0);
};
const totalQuantity = (arr) => {
return arr.reduce((sum, item) => {
return sum + item.quantity;
}, 0);
};
const change = (e) => {
dispatch(creators.setString(e.target.value));
};
return (
<Row className={top ? 'color cart-header' : 'cart-header'} type="flex" justify="space-between" align="middle">
<Col span={6} className="logo">
{displayBack ? (
<Icon onClick={history.goBack} type="left-circle" />
) : (
<img src={logoPath || NoLogo} alt="Store Logo" />
)}
</Col>
<Col span={12} className="total">
{displayTotal ? (
`Total: ${sign}${totalPrice(cartContents).toFixed(2)}`
) : (
<Input onChange={change} placeholder="Search..." />
)}
</Col>
<NavLink to="/review">
<Col span={6} className="icon">
<Badge style={{ backgroundColor: 'gold', color: 'black' }} count={totalQuantity(cartContents)}>
<Icon type="shopping-cart" style={{ color: 'black' }} />
</Badge>
</Col>
</NavLink>
</Row>
);
}
Example #27
| Source File: Badge.jsx From ResoBin with MIT License | 5 votes |
|
StyledBadge = styled(Badge)`
color: ${({ theme }) => theme.textColor};
transform: scale(${({ scale }) => scale});
.ant-badge-count {
box-shadow: none;
}
`
Example #28
| Source File: index.jsx From spring-boot-plus-admin-react with Apache License 2.0 | 5 votes |
|
render() {
const { className, count, popupVisible, bell } = this.props;
const { visible } = this.state;
const noticeButtonClass = classNames(className, styles.noticeButton);
const notificationBox = this.getNotificationBox();
const NoticeBellIcon = bell || <Icon type="bell" className={styles.icon} />;
const trigger = (
<span
className={classNames(noticeButtonClass, {
opened: visible,
})}
>
<Badge
count={count}
style={{
boxShadow: 'none',
}}
className={styles.badge}
>
{NoticeBellIcon}
</Badge>
</span>
);
if (!notificationBox) {
return trigger;
}
const popoverProps = {};
if ('popupVisible' in this.props) {
popoverProps.visible = popupVisible;
}
return (
<HeaderDropdown
placement="bottomRight"
overlay={notificationBox}
overlayClassName={styles.popover}
trigger={['click']}
visible={visible}
onVisibleChange={this.handleVisibleChange}
{...popoverProps}
>
{trigger}
</HeaderDropdown>
);
}
Example #29
| Source File: nested-table.jsx From virtuoso-design-system with MIT License | 5 votes |
|
function NestedTable() {
const expandedRowRender = () => {
const columns = [
{ title: 'Date', dataIndex: 'date', key: 'date' },
{ title: 'Name', dataIndex: 'name', key: 'name' },
{
title: 'Status',
key: 'state',
render: () => (
<span>
<Badge status="success" />
Finished
</span>
),
},
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{
title: 'Action',
dataIndex: 'operation',
key: 'operation',
render: () => (
<Space size="middle">
<a>Pause</a>
<a>Stop</a>
<Dropdown overlay={menu}>
<a>
More <DownOutlined />
</a>
</Dropdown>
</Space>
),
},
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
date: '2014-12-24 23:12:00',
name: 'This is production name',
upgradeNum: 'Upgraded: 56',
});
}
return <Table columns={columns} dataSource={data} pagination={false} />;
};
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
{ title: 'Version', dataIndex: 'version', key: 'version' },
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
];
const data = [];
for (let i = 0; i < 3; ++i) {
data.push({
key: i,
name: 'Screem',
platform: 'iOS',
version: '10.3.4.5654',
upgradeNum: 500,
creator: 'Jack',
createdAt: '2014-12-24 23:12:00',
});
}
return (
<Table
className="components-table-demo-nested"
columns={columns}
expandable={{ expandedRowRender }}
dataSource={data}
/>
);
}
