components#Popover TypeScript Examples

The following examples show how to use components#Popover. 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 4 votes vote down vote up 
describe('Popover', () => {
  it('should render correctly', async () => {
    const wrapper = mount(
      <Popover content="test">
        <div />
      </Popover>,
    )
    expectPopoverIsHidden(wrapper)

    wrapper.find('.tooltip').simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)

    wrapper.find('.tooltip').simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsHidden(wrapper)

    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work correctly with props', async () => {
    const handler = jest.fn()
    const Demos: React.FC<{ visible?: boolean }> = ({ visible }) => {
      return (
        <Popover visible={visible} onVisibleChange={handler} content="test">
          <div />
        </Popover>
      )
    }
    const wrapper = mount(<Demos />)
    expectPopoverIsHidden(wrapper)

    wrapper.setProps({ visible: true })
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)
    expect(handler).toBeCalled()

    wrapper.setProps({ visible: false })
    await updateWrapper(wrapper, 350)
    expectPopoverIsHidden(wrapper)

    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should render react-node', async () => {
    const wrapper = mount(
      <Popover content={<p id="test">custom-content</p>}>
        <div />
      </Popover>,
    )
    wrapper.find('.tooltip').simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)
    expect(wrapper.html()).toMatchSnapshot()

    const testNode = wrapper.find('#test')
    expect(testNode.length).not.toBe(0)
    expect(testNode.text()).toContain('custom-content')
  })

  it('should work with different triggers', async () => {
    const wrapper = mount(
      <Popover content="test" trigger="hover">
        <div />
      </Popover>,
    )
    wrapper.find('.tooltip').simulate('mouseEnter')
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)
  })

  it('should work with different placement', async () => {
    const wrapper = mount(
      <Popover content="test" placement="topEnd">
        <div />
      </Popover>,
    )
    wrapper.find('.tooltip').simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should be render each popover item', async () => {
    const content = () => (
      <div>
        <Popover.Item title>
          <span>settings</span>
        </Popover.Item>
        <Popover.Item line />
        <Popover.Item>
          <span>Command-Line</span>
        </Popover.Item>
      </div>
    )
    const wrapper = mount(
      <Popover content={content}>
        <div />
      </Popover>,
    )
    wrapper.find('.tooltip').simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)

    const title = wrapper.find('.inner').find('.title')
    const line = wrapper.find('.inner').find('.line')
    expect(title.text()).toContain('settings')
    expect(line.length).not.toBe(0)
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should close popover when item clicked', async () => {
    const wrapper = mount(
      <Popover content="test">
        <Popover.Item id="item" />
      </Popover>,
    )
    expectPopoverIsHidden(wrapper)

    wrapper.find('.tooltip').simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)

    const item = wrapper.find('#item').at(0)

    item.simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsHidden(wrapper)
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should prevent close popover when item clicked', async () => {
    const wrapper = mount(
      <Popover content="test">
        <Popover.Item id="item" disableAutoClose />
        <Popover.Item id="item2" />
      </Popover>,
    )
    expectPopoverIsHidden(wrapper)

    wrapper.find('.tooltip').simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)

    const item = wrapper.find('#item').at(0)
    const item2 = wrapper.find('#item2').at(0)

    item.simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)

    item2.simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsHidden(wrapper)
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should prevent all items', async () => {
    const wrapper = mount(
      <Popover content="test" disableItemsAutoClose>
        <Popover.Item id="item" />
        <Popover.Item id="item2" />
      </Popover>,
    )
    expectPopoverIsHidden(wrapper)

    wrapper.find('.tooltip').simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)

    const item = wrapper.find('#item').at(0)
    const item2 = wrapper.find('#item2').at(0)

    item.simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)
    item2.simulate('click', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectPopoverIsShow(wrapper)
    expect(() => wrapper.unmount()).not.toThrow()
  })
})
Example #2
Source File: editor-color-item.tsx    From geist-ui with MIT License 4 votes vote down vote up 
EditorColorItem: React.FC<React.PropsWithChildren<Props>> = ({ keyName }) => {
  const theme = useTheme()
  const { updateCustomTheme } = useConfigs()
  const label = `${keyName}`
  const mainColor = useMemo(() => theme.palette[keyName], [theme.palette, keyName])
  const randomColors = useMemo(() => getRandomColors(), [])
  const colorChangeHandler = ({ hex }: ColorResult) => {
    updateCustomTheme({
      palette: { [keyName]: hex },
    })
  }

  const popoverContent = (color: string) => (
    <TwitterPicker
      triangle="hide"
      color={color}
      onChangeComplete={colorChangeHandler}
      colors={randomColors}
    />
  )
  return (
    <Popover
      content={() => popoverContent(mainColor)}
      portalClassName="editor-popover"
      offset={3}>
      <div className="editor-item">
        <div className="dot-box">
          <span className="dot" />
        </div>
        {label}
        <style jsx>{`
          .editor-item {
            background-color: transparent;
            width: auto;
            padding: 0 ${theme.layout.gapHalf};
            line-height: 2rem;
            display: inline-flex;
            align-items: center;
            border: 1px solid ${theme.palette.border};
            border-radius: ${theme.layout.radius};
            color: ${theme.palette.accents_5};
            margin-right: 0.75rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: color 200ms ease;
          }

          :global(.editor-popover .inner) {
            padding: 0 !important;
          }

          :global(.editor-popover .twitter-picker) {
            box-shadow: none !important;
            border: 0 !important;
            background: transparent !important;
          }

          .editor-item:hover {
            color: ${theme.palette.accents_8};
          }

          .editor-item:hover .dot {
            transform: scale(1);
          }

          .dot-box,
          .dot {
            display: inline-flex;
            justify-content: center;
            align-items: center;
          }

          .dot-box {
            width: 1rem;
            height: 1rem;
            margin-right: 0.75rem;
          }

          .dot {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: ${mainColor};
            transform: scale(0.8);
            transition: transform 200ms ease;
          }
        `}</style>
      </div>
    </Popover>
  )
}