@ant-design/icons#BellOutlined JavaScript Examples

The following examples show how to use @ant-design/icons#BellOutlined. 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: Navbar.js    From placement-portal with MIT License 6 votes vote down vote up 
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 #2
Source File: NotificationNav.js    From video-journal-for-teams-fe with MIT License 5 votes vote down vote up 
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 #3
Source File: index.jsx    From erp-crm with MIT License 5 votes vote down vote up 
export default function HeaderContent() {
  const dispatch = useDispatch();
  const { SubMenu } = Menu;

  const profileDropdown = (
    <div className="profileDropdown whiteBox shadow" style={{ minWidth: '200px' }}>
      <div className="pad15">
        <Avatar size="large" className="last" src={photo} style={{ float: 'left' }} />
        <div className="info">
          <p className="strong">Salah Eddine Lalami</p>
          <p>[email protected]</p>
        </div>
      </div>
      <div className="line"></div>
      <div>
        <Menu>
          <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
            <Menu.ItemGroup key="g1" title="Item 1">
              <Menu.Item key="1">Option 1</Menu.Item>
              <Menu.Item key="2">Option 2</Menu.Item>
            </Menu.ItemGroup>
            <Menu.ItemGroup key="g2" title="Item 2">
              <Menu.Item key="3">Option 3</Menu.Item>
              <Menu.Item key="4">Option 4</Menu.Item>
            </Menu.ItemGroup>
          </SubMenu>
          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
            <Menu.Item key="5">Option 5</Menu.Item>
            <Menu.Item key="6">Option 6</Menu.Item>
            <SubMenu key="sub3" title="Submenu">
              <Menu.Item key="7">Option 7</Menu.Item>
              <Menu.Item key="8">Option 8</Menu.Item>
            </SubMenu>
          </SubMenu>
          <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
            <Menu.Item key="9">Option 9</Menu.Item>
            <Menu.Item key="10">Option 10</Menu.Item>
            <Menu.Item key="11">Option 11</Menu.Item>
            <Menu.Item key="12">Option 12</Menu.Item>
          </SubMenu>
        </Menu>
      </div>
      <div className="line"></div>
      <div>
        <Menu>
          <Menu.Item
            icon={<LogoutOutlined />}
            key={`${uniqueId()}`}
            onClick={() => history.push('/logout')}
          >
            logout
          </Menu.Item>
        </Menu>
      </div>
    </div>
  );
  return (
    <div className="headerIcon" style={{ position: 'absolute', right: 0, zIndex: '99' }}>
      <Dropdown overlay={profileDropdown} trigger={['click']} placement="bottomRight">
        {/* <Badge dot> */}
        <Avatar className="last" src={photo} />
        {/* </Badge> */}
      </Dropdown>

      <Avatar icon={<AppstoreOutlined />} />

      <Avatar icon={<BellOutlined />} />
    </div>
  );
}
Example #4
Source File: styles.js    From bank-client with MIT License 5 votes vote down vote up 
StyledBellOutlined = styled(BellOutlined)`
  font-size: 19px;
`
Example #5
Source File: Navbar.js    From placement-portal with MIT License 5 votes vote down vote up 
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 #6
Source File: index.jsx    From vpp with MIT License 4 votes vote down vote up 
NoticeIcon = props => {
  const getNotificationBox = () => {
    const {
      children,
      loading,
      onClear,
      onTabChange,
      onItemClick,
      onViewMore,
      clearText,
      viewMoreText,
    } = props;

    if (!children) {
      return null;
    }

    const panes = [];
    React.Children.forEach(children, child => {
      if (!child) {
        return;
      }

      const { list, title, count, tabKey, showClear, showViewMore } = child.props;
      const len = list && list.length ? list.length : 0;
      const msgCount = count || count === 0 ? count : len;
      const tabTitle = msgCount > 0 ? `${title} (${msgCount})` : title;
      panes.push(
        <TabPane tab={tabTitle} key={tabKey}>
          <NoticeList
            {...child.props}
            clearText={clearText}
            viewMoreText={viewMoreText}
            data={list}
            onClear={() => onClear && onClear(title, tabKey)}
            onClick={item => onItemClick && onItemClick(item, child.props)}
            onViewMore={event => onViewMore && onViewMore(child.props, event)}
            showClear={showClear}
            showViewMore={showViewMore}
            title={title}
          />
        </TabPane>,
      );
    });
    return (
      <Spin spinning={loading} delay={300}>
        <Tabs className={styles.tabs} onChange={onTabChange}>
          {panes}
        </Tabs>
      </Spin>
    );
  };

  const { className, count, bell } = props;
  const [visible, setVisible] = useMergeValue(false, {
    value: props.popupVisible,
    onChange: props.onPopupVisibleChange,
  });
  const noticeButtonClass = classNames(className, styles.noticeButton);
  const notificationBox = getNotificationBox();
  const NoticeBellIcon = bell || <BellOutlined 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;
  }

  return (
    <HeaderDropdown
      placement="bottomRight"
      overlay={notificationBox}
      overlayClassName={styles.popover}
      trigger={['click']}
      visible={visible}
      onVisibleChange={setVisible}
    >
      {trigger}
    </HeaderDropdown>
  );
}
Example #7
Source File: new.js    From ant-simple-pro with MIT License 4 votes vote down vote up 
New = memo(function New(props) {
  const { TabPane } = Tabs;

  const [tabIndex, setTabIndex] = useState('1');

  const callback = (key) => {
    setTabIndex(key)
  }

  let [data, setData] = useState([
    {
      title: 'Ant Simple Pro 1',
      index: 0,
      isRead: false
    },
    {
      title: 'Ant Simple Pro 2',
      index: 1,
      isRead: false
    },
    {
      title: 'Ant Simple Pro 3',
      index: 2,
      isRead: false
    }
  ]);

  let [data2, setData2] = useState([
    {
      title: 'Ant Simple Pro 4',
      index: 0,
      isRead: false
    },
    {
      title: 'Ant Simple Pro 5',
      index: 1,
      isRead: false
    },
  ]);

  const [flag, setFlag] = useState(false);

  const isRead = (val) => {
    if (tabIndex === '1') {
      setData(data.map((item, key) => key === val.index ? Object.assign(val, { isRead: true }) : item));
    } else {
      setData2(data2.map((item, key) => key === val.index ? Object.assign(val, { isRead: true }) : item));
    }
  }

  const dropdown = () =>
  (<div className={style.newList}>
    <Tabs defaultActiveKey="1" onChange={callback} centered animated tabPosition='top'>
      <TabPane tab={`通知(${data.filter(item => !item.isRead).length})`} key="1">
        <List
          itemLayout="horizontal"
          dataSource={data}
          renderItem={item => (
            <List.Item>
              <List.Item.Meta
                avatar={<SvgIcon iconClass='logon' fontSize='25px' />}
                title={<a>{item.title}</a>}
                description="简单上手快，ui设计漂亮"
              />
              <Button type="primary" size='small' ghost onClick={() => isRead(item)} disabled={item.isRead}>
                未读
                                </Button>
            </List.Item>
          )}
        />
      </TabPane>
      <TabPane tab={`消息(${data2.filter(item => !item.isRead).length})`} key="2">
        <List
          itemLayout="horizontal"
          dataSource={data2}
          renderItem={item => (
            <List.Item>
              <List.Item.Meta
                avatar={<SvgIcon iconClass='logon' fontSize='25px' />}
                title={<a href="">{item.title}</a>}
                description="简单上手快，ui设计漂亮"
              />
              <Button type="primary" size='small' ghost onClick={() => isRead(item)} disabled={item.isRead}>
                未读
                            </Button>
            </List.Item>
          )}
        />
      </TabPane>
    </Tabs>
  </div>);

  return (
    <>
      <Dropdown overlay={dropdown} placement="topLeft"
        trigger={['click']} visible={flag} onVisibleChange={(val) => setFlag(val)}>
        <div style={{ cursor: 'pointer' }}>
          <Badge count={data2.filter(item => !item.isRead).length + data.filter(item => !item.isRead).length} size="small">
            <BellOutlined className={style.icon} style={{ padding: '0px' }} />
          </Badge>
        </div>
      </Dropdown>
    </>
  )
})
Example #8
Source File: LayoutBanner.js    From react-admin-portal with MIT License 4 votes vote down vote up 
function LayoutBanner({ collapsed, handleOnCollapse }) {
  const getCollapseIcon = () => {
    if (collapsed) {
      return (
        <MenuUnfoldOutlined onClick={handleOnCollapse} className="trigger" />
      );
    }
    return <MenuFoldOutlined onClick={handleOnCollapse} className="trigger" />;
  };

  const handleLanguageMenuClick = () => {};
  const handleSettingMenuClick = () => {};
  const handleLogout = () => {};

  return (
    <Header className="header" style={{ background: '#fff', padding: 0 }}>
      <div
        style={{
          float: 'left',
          width: '100%',
          alignSelf: 'center',
          display: 'flex',
        }}
      >
        {window.innerWidth > 992 && getCollapseIcon()}
      </div>
      <Menu
        // onClick={this.handleLanguageMenuClick}
        mode="horizontal"
        className="menu"
      >
        <SubMenu title={<QuestionCircleOutlined />} />
      </Menu>
      <Menu
        // onClick={this.handleLanguageMenuClick}
        mode="horizontal"
        className="menu"
      >
        <SubMenu
          title={
            <Badge dot>
              <BellOutlined />
            </Badge>
          }
        />
      </Menu>
      <Menu
        onClick={handleLanguageMenuClick}
        mode="horizontal"
        className="menu"
      >
        <SubMenu title={<GlobalOutlined />}>
          <Menu.Item key="en">
            <span role="img" aria-label="English">
              ?? English
            </span>
          </Menu.Item>
          <Menu.Item key="it">
            <span role="img" aria-label="Italian">
              ?? Italian
            </span>
          </Menu.Item>
        </SubMenu>
      </Menu>
      <Menu onClick={handleSettingMenuClick} mode="horizontal" className="menu">
        <SubMenu title={getUsernameAvatar('Cemal')}>
          <Menu.Item key="setting:1">
            <span>
              <UserOutlined />
              Profile
            </span>
          </Menu.Item>
          <Menu.Item key="setting:2">
            <span>
              <LogoutOutlined onClick={handleLogout} />
              Logout
            </span>
          </Menu.Item>
        </SubMenu>
      </Menu>
    </Header>
  );
}
Example #9
Source File: index.jsx    From prometheusPro with MIT License 4 votes vote down vote up 
NoticeIcon = props => {
  const getNotificationBox = () => {
    const {
      children,
      loading,
      onClear,
      onTabChange,
      onItemClick,
      onViewMore,
      clearText,
      viewMoreText,
    } = props;

    if (!children) {
      return null;
    }

    const panes = [];
    React.Children.forEach(children, child => {
      if (!child) {
        return;
      }

      const { list, title, count, tabKey, showClear, showViewMore } = child.props;
      const len = list && list.length ? list.length : 0;
      const msgCount = count || count === 0 ? count : len;
      const tabTitle = msgCount > 0 ? `${title} (${msgCount})` : title;
      panes.push(
        <TabPane tab={tabTitle} key={tabKey}>
          <NoticeList
            clearText={clearText}
            viewMoreText={viewMoreText}
            data={list}
            onClear={() => onClear && onClear(title, tabKey)}
            onClick={item => onItemClick && onItemClick(item, child.props)}
            onViewMore={event => onViewMore && onViewMore(child.props, event)}
            showClear={showClear}
            showViewMore={showViewMore}
            title={title}
            {...child.props}
          />
        </TabPane>,
      );
    });
    return (
      <Spin spinning={loading} delay={300}>
        <Tabs className={styles.tabs} onChange={onTabChange}>
          {panes}
        </Tabs>
      </Spin>
    );
  };

  const { className, count, bell } = props;
  const [visible, setVisible] = useMergeValue(false, {
    value: props.popupVisible,
    onChange: props.onPopupVisibleChange,
  });
  const noticeButtonClass = classNames(className, styles.noticeButton);
  const notificationBox = getNotificationBox();
  const NoticeBellIcon = bell || <BellOutlined 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;
  }

  return (
    <HeaderDropdown
      placement="bottomRight"
      overlay={notificationBox}
      overlayClassName={styles.popover}
      trigger={['click']}
      visible={visible}
      onVisibleChange={setVisible}
    >
      {trigger}
    </HeaderDropdown>
  );
}