antd#Dropdown JavaScript Examples

The following examples show how to use antd#Dropdown. 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: AdvancedProfile.js    From acy-dex-interface with MIT License 7 votes vote down vote up 
action = (
  <Fragment>
    <ButtonGroup>
      <Button>操作</Button>
      <Button>操作</Button>
      <Dropdown overlay={menu} placement="bottomRight">
        <Button>
          <Icon type="ellipsis" />
        </Button>
      </Dropdown>
    </ButtonGroup>
    <Button type="primary">主操作</Button>
  </Fragment>
)
Example #2
Source File: SocialSharing.js    From website with MIT License 6 votes vote down vote up 
SocialSharing = ({ message }) => {
  const handleWpSharing = () => {
    const url = `whatsapp://send?text=${encodeURIComponent(message())}`;
    window.open(url, '_blank');
  };

  const handleFbSharing = () => {
    const url = `https://www.facebook.com/sharer/sharer.php?u=${document.location.href}`;
    window.open(url, '_blank');
  };

  const menu = (
    <Menu>
      <Menu.Item key='1' onClick={handleWpSharing}>
        <WhatsAppOutlined /> Via WhatsApp
      </Menu.Item>
      <Menu.Item key='2' onClick={handleFbSharing}>
        <FacebookOutlined /> Via Facebook
      </Menu.Item>
    </Menu>
  );
  return (
    <div className='social-sharing'>
      <Dropdown overlay={menu} trigger={['click', 'hover']}>
        <Button>
          <ShareAltOutlined /> Compartilhar
        </Button>
      </Dropdown>
    </div>
  );
}
Example #3
Source File: UserMenu.js    From react-drag with MIT License 6 votes vote down vote up 
UserMenuDropdown = props => {
  const onMenuClick = event => {
    const { key } = event;
    const { dispatch } = props;

    if (key === 'logout') {
      if (dispatch) {
        dispatch({
          type: 'user/logout',
        });
      }

      return;
    }
  };

  const UserMenu = () => {
    return (
      <Menu onClick={onMenuClick}>
        <Menu.Item key="logout">退出登陆</Menu.Item>
      </Menu>
    );
  };

  return (
    <Dropdown overlay={UserMenu} trigger={['click']}>
      <div>
        <UserOutlined style={{ fontSize: '22px' }} />
        用户中心 <DownOutlined />
      </div>
    </Dropdown>
  );
}
Example #4
Source File: headers.js    From AgileTC with Apache License 2.0 6 votes vote down vote up 
render() {
    const menu = (
      <Menu className="menu" onClick={this.handleDropdownClick}>
        <Menu.Item key="logout">
          <span>
            <Icon type="logout" />
            退出登录
          </span>
        </Menu.Item>
      </Menu>
    )
    return getCookies('username') ? (
      <Header style={{ zIndex: 9 }}>
        <a href="/" style={{ color: '#fff', fontSize: 24 }}>
          AgileTC
        </a>
        {getCookies('username') ? (
          <Dropdown overlay={menu} overlayClassName="dropStyle" placement="bottomLeft">
            <div className="user">
              <Icon type="user" className="userIcon" />
              <span className="username">{getCookies('username')}</span>
              <Icon type="down" className="dowm" />
            </div>
          </Dropdown>
        ) : (
          <a href="/login" className="loginCss">
            登录/注册
          </a>
        )}
      </Header>
    ) : null
  }
Example #5
Source File: index.js    From gobench with Apache License 2.0 6 votes vote down vote up 
Actions = () => {
  const menu = (
    <React.Fragment>
      <div className="card cui__utils__shadow width-350 border-0">
        <div className="card-body p-0">
          <List2 />
        </div>
      </div>
    </React.Fragment>
  )
  return (
    <Dropdown overlay={menu} trigger={['click']} placement="bottomRight">
      <div className={styles.dropdown}>
        <i className={`${styles.icon} fe fe-bell`} />
      </div>
    </Dropdown>
  )
}
Example #6
Source File: index.js    From mixbox with GNU General Public License v3.0 6 votes vote down vote up 
render() {
        const user = getLoginUser() || {};
        const name = user.name;

        const { className, theme } = this.props;

        const menu = (
            <Menu styleName="menu" theme={theme} selectedKeys={[]} onClick={this.handleMenuClick}>
                <Item key="modifyPassword"><EditOutlined />修改密码</Item>
                <Item><Link to="/settings"><SettingOutlined />设置</Link></Item>
                <Menu.Divider />
                <Item key="logout"><LogoutOutlined />退出登录</Item>
            </Menu>
        );
        return (
            <div styleName="user-menu" ref={node => this.userMenu = node}>
                <Dropdown trigger="click" overlay={menu} getPopupContainer={() => (this.userMenu || document.body)}>
                    <span styleName="account" className={className}>
                        <span styleName="user-name">{name}</span>
                        <CaretDownOutlined />
                    </span>
                </Dropdown>

                <ModifyPassword
                    visible={this.state.passwordVisible}
                    onOk={() => this.setState({ passwordVisible: false })}
                    onCancel={() => this.setState({ passwordVisible: false })}
                />
            </div>
        );
    }
Example #7
Source File: index.js    From camel-store-admin with Apache License 2.0 6 votes vote down vote up 
render() {
    const { className } = this.props;
    const selectedLang = getLocale();
    const langMenu = (
      <Menu className={styles.menu} selectedKeys={[selectedLang]} onClick={this.changLang}>
        <Menu.Item key="zh-CN">
          <FormattedMessage id="lang.simplified-chinese" />
        </Menu.Item>
        <Menu.Item key="zh-TW">
          <FormattedMessage id="lang.traditional-chinese" />
        </Menu.Item>
        <Menu.Item key="en-US">
          <FormattedMessage id="lang.english" />
        </Menu.Item>
        <Menu.Item key="pt-BR">
          <FormattedMessage id="lang.portuguese" />
        </Menu.Item>
      </Menu>
    );
    return (
      <Dropdown overlay={langMenu}>
        <span className={classNames(styles.dropDown, className)}>
          <FormattedMessage id="navBar.lang" /> <Icon type="down" />
        </span>
      </Dropdown>
    );
  }
Example #8
Source File: HeatmapSettings.jsx    From ui with MIT License 6 votes vote down vote up 
HeatmapSettings = (props) => {
  const { componentType } = props;

  const renderMenu = () => (
    <Menu size='small'>
      <SubMenu key='metadataTracks' title='Metadata tracks' icon={<></>} popupClassName='no-style-menu-item'>
        <NoStyleAntdMenuItem>
          <HeatmapMetadataTrackSettings componentType={componentType} />
        </NoStyleAntdMenuItem>
      </SubMenu>
      <SubMenu key='groupBy' title='Group by' icon={<></>}>
        <NoStyleAntdMenuItem>
          <HeatmapGroupBySettings componentType={componentType} />
        </NoStyleAntdMenuItem>
      </SubMenu>
    </Menu>
  );

  return (
    <Dropdown arrow type='link' size='small' overlay={renderMenu()} trigger={['click']}>
      <Tooltip title='Settings'>
        <Button
          type='text'
          icon={<SettingOutlined />}
          // these classes are added so that the settings button
          // is the same style as the remove button
          className='bp3-button bp3-minimal'
        />
      </Tooltip>
    </Dropdown>
  );
}
Example #9
Source File: index.jsx    From erp-crm with MIT License 6 votes vote down vote up 
export default function RecentTable({ ...props }) {
  let { entity, dataTableColumns } = props;
  dataTableColumns = [
    ...dataTableColumns,
    {
      title: '',
      render: (row) => (
        <Dropdown overlay={DropDownRowMenu({ row })} trigger={['click']}>
          <EllipsisOutlined style={{ cursor: 'pointer', fontSize: '24px' }} />
        </Dropdown>
      ),
    },
  ];

  const asyncList = () => {
    return request.list({ entity });
  };
  const { result, isLoading, isSuccess } = useFetch(asyncList);
  const firstFiveItems = () => {
    if (isSuccess && result) return result.slice(0, 5);
    return [];
  };
  return (
    <>
      <Table
        columns={dataTableColumns}
        rowKey={(item) => item._id}
        dataSource={isSuccess && firstFiveItems()}
        pagination={false}
        loading={isLoading}
      />
    </>
  );
}
Example #10
Source File: index.jsx    From starter-antd-admin-crud-auth-mern with MIT License 6 votes vote down vote up 
export default function RecentTable({ ...props }) {
  let { entity, dataTableColumns } = props;
  dataTableColumns = [
    ...dataTableColumns,
    {
      title: "",
      render: (row) => (
        <Dropdown overlay={DropDownRowMenu({ row })} trigger={["click"]}>
          <EllipsisOutlined style={{ cursor: "pointer", fontSize: "24px" }} />
        </Dropdown>
      ),
    },
  ];

  const asyncList = () => {
    return request.list(entity);
  };
  const { result, isLoading, isSuccess } = useFetch(asyncList);
  const firstFiveItems = () => {
    if (isSuccess && result) return result.slice(0, 5);
    return [];
  };
  return (
    <>
      <Table
        columns={dataTableColumns}
        rowKey={(item) => item._id}
        dataSource={isSuccess && firstFiveItems()}
        pagination={false}
        loading={isLoading}
      />
    </>
  );
}
Example #11
Source File: tableSize.js    From ant-simple-pro with MIT License 6 votes vote down vote up 
TableSize = memo(function TableSize({ tableSize, className }) {
  const handleClick = (e) => tableSize(e.key);

  const menu = (
    <Menu onClick={handleClick} selectable defaultSelectedKeys={['middle']}>
      <Menu.Item key='middle'>默认</Menu.Item>
      <Menu.Item key='large'>松散</Menu.Item>
      <Menu.Item key='small'>紧凑</Menu.Item>
    </Menu>
  );

  return (
    <>
      <Tooltip title='密度' placement="left">
        <Dropdown overlay={menu} placement="bottomCenter">
          <ColumnHeightOutlined className={className} />
        </Dropdown>
      </Tooltip>
    </>
  )
})
Example #12
Source File: topMenuDropdown.js    From virtuoso-design-system with MIT License 6 votes vote down vote up 
TopMenuDropdown = ({ menu, activeUser }) => {
  return (
    <Dropdown overlay={menu} trigger={['click']}>
      <Button ghost className={styles.vdsButton}>
        <CustomIconAvatar className={styles.vdsAvatarIcon} />
        {activeUser}
        <CustomIconArrow className={styles.vdsArrow} />
      </Button>
    </Dropdown>
  );
}
Example #13
Source File: ButtonDropdown.jsx    From ResoBin with MIT License 6 votes vote down vote up 
ButtonDropdown = styled(Dropdown.Button)`
  width: 100%;
  margin-top: 0.5rem;

  .ant-btn {
    ${buttonStyles}

    background: ${({ theme }) => theme.darksecondary};
    width: 100%;
    border-radius: 0;

    &:first-child:not(:last-child) {
      border-top-left-radius: ${({ theme }) => theme.borderRadius};
      border-bottom-left-radius: ${({ theme }) => theme.borderRadius};
    }
  }

  .ant-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;

    &:last-child:not(:first-child) {
      border-top-right-radius: ${({ theme }) => theme.borderRadius};
      border-bottom-right-radius: ${({ theme }) => theme.borderRadius};
    }
  }
`
Example #14
Source File: FiltersDropdown.jsx    From notence with MIT License 6 votes vote down vote up 
function FiltersDropdown({ properties, filters, onFilterCreate, onFilterChange, onFilterDelete }) {
  const [dropdownVisible, setDropdownVisible] = useState(false);

  const filterList = filters.map((filter) => (
    <FilterInput
      key={filter.id}
      filter={filter}
      onChange={(newFilter) => onFilterChange(filter.id, newFilter)}
      onDelete={() => onFilterDelete(filter.id)}
      properties={properties}
    />
  ));

  const menu = (
    <Menu>
      {filterList}

      <Menu.Divider />
      <Menu.Item>
        <Button onClick={onFilterCreate} size="small" type="default" icon={<PlusOutlined />}>
          Add a filter
        </Button>
      </Menu.Item>
    </Menu>
  );

  return (
    <Dropdown
      visible={dropdownVisible}
      onVisibleChange={setDropdownVisible}
      overlay={menu}
      trigger={["click"]}
    >
      <Button size="small" type="link">
        Filter
      </Button>
    </Dropdown>
  );
}
Example #15
Source File: index.jsx    From vpp with MIT License 5 votes vote down vote up 
HeaderDropdown = ({ overlayClassName: cls, ...restProps }) => (
  <Dropdown overlayClassName={classNames(styles.container, cls)} {...restProps} />
)
Example #16
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 #17
Source File: AssetDropdown.js    From dexwebapp with Apache License 2.0 5 votes vote down vote up 
AssetDropdown = ({
  options,
  selected,
  size,
  paddingLeft,
  paddingRight,
  borderRadius,
}) => {
  const theme = useContext(ThemeContext);
  return (
    <Dropdown trigger={['click']} overlay={<AssetMenu>{options}</AssetMenu>}>
      <AssetDropdownButton
        style={{
          paddingLeft: paddingLeft ? paddingLeft : '8px',
          paddingRight: paddingRight ? paddingRight : '8px',
          borderRadius: borderRadius ? borderRadius : '4px',
        }}
        size={size}
      >
        <Row
          gutter={16}
          style={{
            paddingBottom: '1px',
            height: '100%',
          }}
        >
          <Col
            span={16}
            style={{
              textAlign: 'left',
              color: theme.textWhite,
              marginTop: 'auto',
              marginBottom: 'auto',
            }}
          >
            {selected}
          </Col>
          <Col
            span={8}
            style={{
              textAlign: 'right',
              color: theme.primary,
              marginTop: 'auto',
              marginBottom: 'auto',
            }}
          >
            <FontAwesomeIcon
              style={{
                color: theme.primary,
                fontSize: '18px',
              }}
              icon={faCaretDown}
            />
          </Col>
        </Row>
      </AssetDropdownButton>
    </Dropdown>
  );
}
Example #18
Source File: header.js    From doraemon with GNU General Public License v3.0 5 votes vote down vote up 
render() {
    console.log(this.context)
    const { headerItem, lang } = this.state
    const { loginData } = this.props
    const menu = (<Menu>
      <Menu.Item>
        <a onClick={this.loginOut}>退出登陆</a>
      </Menu.Item></Menu>)
    return (
      <div className="header">
        <div className="left-section">
          {/* left */}
          <div className="icon-container">
            <span className="header-icon" />
            <p>&nbsp; Doraemon</p>
          </div>
          <div className="func-section">
            {
              headerItem && headerItem.map(item => (
                <Dropdown overlay={this.menu}>
                  <span className="ant-dropdown-link">
                    {item}<Icon type="down" />
                  </span>
                </Dropdown>
              ))
            }
          </div>
        </div>
        <div className="right-container">
          {/* right */}
          <div className="func-section">
            <span onClick={() => this.changeLang(lang === CN ? EN : CN)}>{lang === CN ? EN : CN}</span>
            <div className="divider" />
            <Dropdown overlay={menu}>
              <span className="ant-dropdown-link text">
                <Avatar style={{ justifyContent: 'center' }} icon="user" />{loginData.data}
              </span>
            </Dropdown>
          </div>
        </div>
      </div>
    );
  }
Example #19
Source File: index.js    From online-test-platform with Apache License 2.0 5 votes vote down vote up 
render() {
    const { overlayClassName, ...props } = this.props;
    return (
      <Dropdown overlayClassName={classNames(styles.container, overlayClassName)} {...props} />
    );
  }
Example #20
Source File: MarketStreamPanel.js    From websocket-demo with MIT License 5 votes vote down vote up 
function MarketStreamPanel({ actions, selectedStream }) {
  const [type, setType] = useState('');
  const onSelectChange = value => {
    setType(value);
    actions.removeAllSelectedStream();
  };
  const onClickSubscribe = env => {
    if (selectedStream.codes.length === 0) {
      return notification['error']({
        message: i18n.t('label.error'),
        description: i18n.t('message.marketStreamInput')
      });
    }
    actions.subscribeMarketStream(env);
  };
  return (
    <>
      <Title level={5}>{i18n.t('label.marketStream')}</Title>
      <Form className="market-stream">
        <Form.Item label="Source">
          <Select placeholder={i18n.t('message.selectStream')} onChange={onSelectChange}>
            {allMarketStreams.map(streamType => (
              <Option key={streamType.type} value={streamType.type}>
                {i18n.t(`label.${streamType.type}`)}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item label="Streams">
          <Dropdown overlay={type && <StreamMenu actions={actions} type={type} />}>
            <span>
              {i18n.t('message.selectStream')} <DownOutlined />
            </span>
          </Dropdown>
        </Form.Item>
        {selectedStream.codes.length > 0 && (
          <Form.Item>
            <TagDisplay actions={actions} tags={selectedStream.codes} />
          </Form.Item>
        )}
      </Form>
      <Button type="default" style={{ margin: '5px' }} onClick={() => onClickSubscribe(TESTNET)}>
        {i18n.t('label.testSubscribe')}
      </Button>
      <Button type="primary" style={{ margin: '5px' }} onClick={() => onClickSubscribe(PROD)}>
        {i18n.t('label.prodSubscribe')}
      </Button>
    </>
  );
}
Example #21
Source File: AppLayout.jsx    From React-Nest-Admin with MIT License 5 votes vote down vote up 
AppLayout = props => {
  let history = useHistory();

  // 结构赋值
  const { isCollapsed, username, toggle, signOut } = props;

  return (
    <Layout className={styles.wrapper}>
      <Sider trigger={null} collapsible collapsed={isCollapsed}>
        {props.sidebar}
      </Sider>
      <Layout>
        <Header className={styles.header}>
          <LegacyIcon
            className={styles["trigger"]}
            type={isCollapsed ? "menu-unfold" : "menu-fold"}
            onClick={() => toggle(isCollapsed)}
          />
          <span className={styles.home}>首页</span>
          <div className={styles["icon-group"]}>
            <Avatar
              style={{
                color: "#f56a00",
                backgroundColor: "#fde3cf",
                marginRight: "10px"
              }}
            >
              {username ? username[0] : ""}
            </Avatar>
            <span>
              <NotificationOutlined />
            </span>
            <span className={styles["icon-box"]}>
              <Dropdown
                overlay={() => menu(signOut, history)}
                placement="bottomCenter"
              >
                <MoreOutlined className={styles.icon} />
              </Dropdown>
            </span>
          </div>
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            background: "#fff",
            minHeight: 280,
            overflowY: "scroll"
          }}
        >
          {props.content}
        </Content>
      </Layout>
      {/* <div
        style={{
          position: "absolute",
          bottom: "0px",
          width: "100%",
          textAlign: "center",
          backgroundColor: "#2d3a4b",
          color: "#eee",
          padding: "5px 0",
          fontSize: "12px"
        }}
      >
        鄂ICP备19026512号-3
      </div> */}
    </Layout>
  );
}
Example #22
Source File: index.js    From gobench with Apache License 2.0 5 votes vote down vote up 
IssuesHistory = () => {
  const menu = (
    <Menu selectable={false}>
      <Menu.Item>
        <Link to="/">Current Search</Link>
      </Menu.Item>
      <Menu.Item>
        <Link to="/">Search for issues</Link>
      </Menu.Item>
      <Menu.Divider />
      <Menu.ItemGroup title="Opened">
        <Menu.Item>
          <Link to="/">
            <i className="fe fe-check-circle mr-2" /> CUI-125 Project Implemen...
          </Link>
        </Menu.Item>
        <Menu.Item>
          <Link to="/">
            <i className="fe fe-check-circle mr-2" /> CUI-147 Active History Is...
          </Link>
        </Menu.Item>
        <Menu.Item>
          <Link to="/">
            <i className="fe fe-check-circle mr-2" /> CUI-424 Ionicons Integrat...
          </Link>
        </Menu.Item>
        <Menu.Item>
          <Link to="/">More...</Link>
        </Menu.Item>
      </Menu.ItemGroup>
      <Menu.ItemGroup title="Filters">
        <Menu.Item>
          <Link to="/">My Open Issues</Link>
        </Menu.Item>
        <Menu.Item>
          <Link to="/">Reported by Me</Link>
        </Menu.Item>
      </Menu.ItemGroup>
      <Menu.Divider />
      <Menu.Item>
        <Link to="/">
          <i className="fe fe-settings mr-2" /> Settings
        </Link>
      </Menu.Item>
    </Menu>
  )
  return (
    <Dropdown overlay={menu} trigger={['click']} placement="bottomLeft">
      <div className={styles.dropdown}>
        <i className={`${styles.icon} fe fe-folder`} />
        <span className="d-none d-xl-inline">
          <FormattedMessage id="topBar.issuesHistory" />
        </span>
      </div>
    </Dropdown>
  )
}
Example #23
Source File: index.jsx    From mixbox with GNU General Public License v3.0 5 votes vote down vote up 
render() {
        let {items, moreText, moreContentWidth, moreTrigger} = this.props;
        let operators = [];
        let more = [];

        if (typeof moreTrigger === 'string') {
            moreTrigger = [moreTrigger];
        }

        items.forEach((opt, i) => {
            const {isMore} = opt;
            const item = this.getItem(opt, i);

            if (item) {
                if (isMore) {
                    more.push(item);
                } else {
                    operators.push(item);
                }
            }
        });

        if (more && more.length) { // 更多
            const menu = (
                <Menu style={{width: moreContentWidth}}>
                    {
                        more.map((item, index) => <Menu.Item key={item.label || index}>{item}</Menu.Item>)
                    }
                </Menu>
            );
            operators.push(
                <Dropdown overlay={menu} trigger={moreTrigger}>
                    <a className="operator-label">
                        {moreText}
                    </a>
                </Dropdown>,
            );
        }

        const operatorsLength = operators.length;

        if (!operatorsLength) {
            return null;
        }

        return (
            <span>
                {operators.map((v, i) => (
                    <span key={v.label || `operator-${i}`}>
                        {v}
                        {operatorsLength === i + 1 ? '' : <span className="operator-divider"/>}
                    </span>
                ))}
            </span>
        );
    }
Example #24
Source File: Applications.js    From camel-store-admin with Apache License 2.0 5 votes vote down vote up 
render() {
    const {
      list: { list },
    } = this.props;
    const itemMenu = (
      <Menu>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
            1st menu item
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
            2nd menu item
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
            3d menu item
          </a>
        </Menu.Item>
      </Menu>
    );
    const CardInfo = ({ activeUser, newUser }) => (
      <div className={stylesApplications.cardInfo}>
        <div>
          <p>活跃用户</p>
          <p>{activeUser}</p>
        </div>
        <div>
          <p>新增用户</p>
          <p>{newUser}</p>
        </div>
      </div>
    );
    return (
      <List
        rowKey="id"
        className={stylesApplications.filterCardList}
        grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }}
        dataSource={list}
        renderItem={item => (
          <List.Item key={item.id}>
            <Card
              hoverable
              bodyStyle={{ paddingBottom: 20 }}
              actions={[
                <Tooltip title="下载">
                  <Icon type="download" />
                </Tooltip>,
                <Tooltip title="编辑">
                  <Icon type="edit" />
                </Tooltip>,
                <Tooltip title="分享">
                  <Icon type="share-alt" />
                </Tooltip>,
                <Dropdown overlay={itemMenu}>
                  <Icon type="ellipsis" />
                </Dropdown>,
              ]}
            >
              <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
              <div className={stylesApplications.cardItemContent}>
                <CardInfo
                  activeUser={formatWan(item.activeUser)}
                  newUser={numeral(item.newUser).format('0,0')}
                />
              </div>
            </Card>
          </List.Item>
        )}
      />
    );
  }
Example #25
Source File: index.js    From discern with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
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>&nbsp;
        <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 #26
Source File: ComponentActions.jsx    From ui with MIT License 5 votes vote down vote up 
ComponentActions = (props) => {
  const { experimentId, name, componentType } = props;
  const dispatch = useDispatch();
  const selectedGenes = useSelector((state) => state.genes.selected);
  const displayedGenes = useSelector((state) => state.genes.expression?.views[componentType]?.data);

  const performGeneOperation = (genesOperation) => {
    let newGenes = _.cloneDeep(selectedGenes);

    if (genesOperation === geneOperations.ADD && displayedGenes) {
      newGenes = Array.from(new Set(displayedGenes.concat(selectedGenes)));
    }
    if (genesOperation === geneOperations.REMOVE && displayedGenes) {
      newGenes = displayedGenes.filter((gene) => !selectedGenes.includes(gene));
    }

    dispatch(loadGeneExpression(experimentId, newGenes, componentType));
  };

  const menu = (
    <Menu size='small'>
      <Menu.Item key='0' icon={<PlusOutlined />} onClick={() => performGeneOperation(geneOperations.ADD)}>
        Add
      </Menu.Item>
      <Menu.Item key='1' icon={<MinusOutlined />} onClick={() => performGeneOperation(geneOperations.REMOVE)}>
        Remove
      </Menu.Item>
      <Menu.Item key='2' icon={<RedoOutlined />} onClick={() => performGeneOperation(geneOperations.OVERWRITE)}>
        Overwrite
      </Menu.Item>
    </Menu>
  );

  if (selectedGenes.length === 0) {
    return (<></>);
  }

  return (
    <Dropdown arrow type='link' size='small' overlay={menu} trigger={['click']}>
      <Button type='link' size='small'>
        {name}
      </Button>
    </Dropdown>
  );
}
Example #27
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 #28
Source File: index.jsx    From starter-antd-admin-crud-auth-mern with MIT License 5 votes vote down vote up 
export default function DataTable({ config, DropDownRowMenu, AddNewItem }) {
  let { entity, dataTableColumns, dataTableTitle } = config;
  dataTableColumns = [
    ...dataTableColumns,
    {
      title: "",
      render: (row) => (
        <Dropdown overlay={DropDownRowMenu({ row })} trigger={["click"]}>
          <EllipsisOutlined style={{ cursor: "pointer", fontSize: "24px" }} />
        </Dropdown>
      ),
    },
  ];

  const { result: listResult, isLoading: listIsLoading } = useSelector(
    selectListItems
  );

  const { pagination, items } = listResult;

  const dispatch = useDispatch();

  const handelDataTableLoad = useCallback((pagination) => {
    dispatch(crud.list(entity, pagination.current));
  }, []);

  useEffect(() => {
    dispatch(crud.list(entity));
  }, []);

  return (
    <>
      <PageHeader
        onBack={() => window.history.back()}
        title={dataTableTitle}
        ghost={false}
        extra={[
          <Button onClick={handelDataTableLoad} key={`${uniqueId()}`}>
            Refresh
          </Button>,
          <AddNewItem key={`${uniqueId()}`} config={config} />,
        ]}
        style={{
          padding: "20px 0px",
        }}
      ></PageHeader>
      <Table
        columns={dataTableColumns}
        rowKey={(item) => item._id}
        dataSource={items}
        pagination={pagination}
        loading={listIsLoading}
        onChange={handelDataTableLoad}
      />
    </>
  );
}
Example #29
Source File: index.js    From aircon with GNU General Public License v3.0 5 votes vote down vote up 
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>
        &nbsp;
        <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>
    );
  }