components#Divider TypeScript Examples

The following examples show how to use components#Divider. 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: attributes.tsx    From geist-ui with MIT License 6 votes vote down vote up 
Attributes: React.FC<React.PropsWithChildren<AttributesProps>> = React.memo(
  ({ edit, children }) => {
    const { isChinese } = useConfigs()
    const path = edit.replace('/pages', 'pages')
    const apiTitles = useMemo(() => {
      if (React.Children.count(children) === 0) return null
      return (
        <>
          <Spacer h={1} />
          <h3>
            <VirtualAnchor>APIs</VirtualAnchor>
            {isChinese && ' / 接口文档'}
          </h3>
          <AttributesTable>{children}</AttributesTable>
        </>
      )
    }, [children, isChinese])

    return (
      <>
        {apiTitles}
        <Divider font="12px" mt="80px">
          <Text p b type="secondary" style={{ userSelect: 'none' }}>
            {isChinese ? '文档贡献者' : 'Contributors'}
          </Text>
        </Divider>
        <Contributors path={path} />
      </>
    )
  },
)
Example #2
Source File: index.test.tsx    From geist-ui with MIT License 5 votes vote down vote up 
describe('Divider', () => {
  it('should render correctly', () => {
    const wrapper = mount(<Divider />)
    expect(wrapper).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work with w and h', () => {
    const wrapper = render(
      <div>
        <Divider w={3} />
        <Divider h={3} />
      </div>,
    )
    expect(wrapper).toMatchSnapshot()
  })

  it('should work with type', () => {
    const wrapper = render(
      <div>
        <Divider type="secondary" />
        <Divider type="warning" />
        <Divider type="dark" />
      </div>,
    )
    expect(wrapper).toMatchSnapshot()
  })

  it('should work with align and volume', () => {
    const wrapper = render(
      <div>
        <Divider align="start">start</Divider>
        <Divider align="left">left</Divider>
        <Divider align="end">end</Divider>
        <Divider align="start" h={2}>
          start
        </Divider>
      </div>,
    )
    expect(wrapper).toMatchSnapshot()
  })

  it('should support float', () => {
    const wrapper = mount(
      <div>
        <Divider w={1.1} h={2.5} />
        <Divider h={2.5} />
      </div>,
    )
    expect(wrapper).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })
})
Example #3
Source File: search.tsx    From geist-ui with MIT License 4 votes vote down vote up 
Search: React.FC<unknown> = () => {
  const theme = useTheme()
  const router = useRouter()
  const { locale } = useLocale()
  const [preventHover, setPreventHover, preventHoverRef] = useCurrentState<boolean>(false)
  const ref = useRef<HTMLInputElement | null>(null)
  const itemsRef = useRef<SearchItemsRef | null>(null)
  const [state, setState] = useState<SearchResults>([])
  const { bindings, setVisible, visible } = useModal(false)
  const { bindings: inputBindings, setState: setInput, state: input } = useInput('')

  const cleanAfterModalClose = () => {
    setVisible(false)
    const timer = window.setTimeout(() => {
      setState([])
      setInput('')
      itemsRef.current?.scrollTo(0, 0)
      setPreventHover(true)
      window.clearTimeout(timer)
    }, 400)
  }

  useKeyboard(() => {
    setVisible(true)
    const timer = setTimeout(() => {
      ref.current?.focus()
      window.clearTimeout(timer)
    }, 0)
  }, [KeyMod.CtrlCmd, KeyCode.KEY_K])

  useEffect(() => {
    if (!input) return setState([])
    setPreventHover(true)
    setState(search(input, locale))
    itemsRef.current?.scrollTo(0, 0)
  }, [input])

  useEffect(() => {
    if (visible) return
    cleanAfterModalClose()
  }, [visible])

  useEffect(() => {
    const eventHandler = () => {
      if (!preventHoverRef.current) return
      setPreventHover(false)
    }
    document.addEventListener('mousemove', eventHandler)
    return () => {
      document.removeEventListener('mousemove', eventHandler)
    }
  }, [])

  const selectHandler = (url: string) => {
    if (url.startsWith('http')) return window.open(url)
    router.push(url)
    setVisible(false)
  }

  const { bindings: KeyBindings } = useKeyboard(
    event => {
      const isBack = event.keyCode === KeyCode.UpArrow
      focusNextElement(
        itemsRef.current,
        () => {
          setPreventHover(true)
        },
        isBack,
      )
    },
    [KeyCode.DownArrow, KeyCode.UpArrow],
    {
      disableGlobalEvent: true,
    },
  )

  return (
    <div className="container" {...KeyBindings}>
      <Modal
        {...bindings}
        py={0}
        px={0.75}
        wrapClassName="search-menu"
        positionClassName="search-position">
        <Input
          ref={ref}
          w="100%"
          font="1.125rem"
          py={0.75}
          placeholder="Search a component"
          className="search-input"
          clearable
          {...inputBindings}
        />
        {state.length > 0 && (
          <>
            <Divider mt={0} mb={1} />
            <SearchItems
              preventHoverHighlightSync={preventHover}
              ref={itemsRef}
              data={state}
              onSelect={selectHandler}
            />
          </>
        )}
      </Modal>
      <style jsx>{`
        .title {
          width: 100%;
          color: ${theme.palette.background};
          background-color: ${theme.palette.violet};
          display: flex;
          justify-content: flex-end;
          padding: 0 10px;
          user-select: none;
        }
        .container {
          visibility: hidden;
        }
        :global(.search-menu ul),
        :global(.search-menu li) {
          padding: 0;
          margin: 0;
          list-style: none;
        }
        :global(.search-menu .input-container.search-input) {
          border: none;
          border-radius: 0;
        }
        :global(.search-menu .input-container div.input-wrapper) {
          border: none;
          border-radius: 0;
        }
        :global(.search-menu .input-container .input-wrapper.hover) {
          border: none;
        }
        :global(.search-menu .input-container .input-wrapper:active) {
          border: none;
        }
        :global(div.search-position.position) {
          position: absolute;
          top: 100px;
          left: 50%;
          transform: translateX(-50%);
          transition: all 500ms ease;
          width: 500px;
          height: auto;
        }
        :global(.search-menu.wrapper) {
          box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15), 0 -5px 20px 0 rgba(0, 0, 0, 0.15) !important;
        }
      `}</style>
    </div>
  )
}