components#Avatar TypeScript Examples

The following examples show how to use components#Avatar. 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.test.tsx    From geist-ui with MIT License 5 votes vote down vote up 
describe('Avatar', () => {
  it('should support square and circle', () => {
    const circle = shallow(<Avatar />)
    expect(() => circle.unmount()).not.toThrow()
    const square = shallow(<Avatar isSquare />)
    expect(() => square.unmount()).not.toThrow()
  })

  it('should render text element', () => {
    const imageAvatar = render(<Avatar />)
    expect(imageAvatar).toMatchSnapshot()
    const textAvatar = render(<Avatar text="text" />)
    expect(textAvatar).toMatchSnapshot()
  })

  it('should omit long chars automatically', () => {
    const avatar = mount(<Avatar text="texttexttexttext" />)
    const text = avatar.find('.avatar-text').text()
    expect(text.length).toBeLessThan(4)
  })

  it('stacked should be work', () => {
    const avatar = shallow(<Avatar src="/images/avatar.png" stacked />)
    expect(() => avatar.unmount()).not.toThrow()
  })

  it('group component should render all children', () => {
    const group = mount(
      <Avatar.Group>
        <Avatar />
        <Avatar />
      </Avatar.Group>,
    )
    expect(group.find('.avatar')).toHaveLength(2)
  })

  it('should stacked when avatars are in a group', () => {
    const group = render(
      <Avatar.Group>
        <Avatar />
        <Avatar />
      </Avatar.Group>,
    )
    expect(group).toMatchSnapshot()
  })

  it('should show count in group', () => {
    const count = 20
    const group = render(<Avatar.Group count={count} />)
    const text = group.find('.count').text()
    expect(text).toMatch(`${count}`)
  })
})
Example #2
Source File: contributors.tsx    From geist-ui with MIT License 5 votes vote down vote up 
Contributors: React.FC<Props> = ({ path }) => {
  const { isChinese } = useConfigs()
  const [users, setUsers] = useState<Array<Contributor>>([])
  const link = useMemo(() => `${RepoMasterURL}/${path || '/pages'}`, [])

  useEffect(() => {
    let unmount = false
    ;(async () => {
      const contributors = await getContributors(path)
      if (unmount) return
      setUsers(contributors)
    })()
    return () => {
      unmount = true
    }
  }, [])

  return (
    <div className="contributors">
      {users.map((user, index) => (
        <Tooltip leaveDelay={0} text={<b>{user.name}</b>} key={`${user.url}-${index}`}>
          <Link color target="_blank" rel="nofollow" href={user.url}>
            <Avatar src={user.avatar} />
          </Link>
        </Tooltip>
      ))}
      <Tooltip
        leaveDelay={0}
        text={isChinese ? '在 GitHub 上编辑此页面' : 'Edit this page on GitHub'}
        type="dark">
        <Link color target="_blank" rel="nofollow" href={link}>
          <Avatar text="Add" />
        </Link>
      </Tooltip>
      <style jsx>{`
        .contributors {
          padding-left: 5px;
          padding-top: 5px;
          max-width: 100%;
          height: auto;
          display: flex;
          flex-wrap: wrap;
        }

        .contributors :global(.tooltip) {
          margin-right: 5px;
        }
      `}</style>
    </div>
  )
}