components#Input TypeScript Examples

describe('InputPassword', () => {
  it('should render correctly', () => {
    const wrapper = mount(<Input.Password />)
    const el = wrapper.find('input').getDOMNode() as HTMLInputElement
    expect(el.type).toEqual('password')
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should toggle input type', () => {
    const wrapper = mount(<Input.Password />)
    wrapper.find('.input-icon').simulate('click', nativeEvent)
    const el = wrapper.find('input').getDOMNode() as HTMLInputElement
    expect(el.type).toEqual('text')
  })

  it('should hide toggle icon', () => {
    const wrapper = mount(<Input.Password hideToggle />)
    expect(wrapper.find('.input-icon').length).toBe(0)
  })

  it('should be pass all native scale props', () => {
    const width = 'calc(100% - 10px)'
    const height = Math.random().toString(16).slice(-8)
    const wrapper = shallow(<Input.Password w={width} h={height} />)
    const html = wrapper.html()
    expect(html).toContain(width)
    expect(html).toContain(height)
  })
})

function Clipboard() {
  if (!hasSupport()) {
    return <NotSupported />;
  }

  return (
    <div
      className="
        tw-flex
        tw-flex-col
        tw-space-y-4
      "
    >
      <div
        className="
          tw-flex
          tw-space-x-2
        "
      >
        <Input
          id="js-input--copy"
          type="text"
          name="copy"
          placeholder="Write Something..."
        />
        <Button onClick={run.onCopy}>Copy</Button>
      </div>

      <div
        className="
          tw-flex
          tw-space-x-2
        "
      >
        <Input
          id="js-input--paste"
          type="text"
          name="paste"
          placeholder="Click paste"
          readOnly
        />
        <Button onClick={run.onPaste}>Paste</Button>
      </div>
    </div>
  );
}

describe('UseInput', () => {
  it('should follow change with use-input', () => {
    let log = ''
    const logSpy = jest.spyOn(console, 'log').mockImplementation(msg => (log = msg))
    const MockInput: React.FC<{ value?: string }> = ({ value }) => {
      const { state, setState, bindings } = useInput('')
      useEffect(() => {
        if (value) setState(value)
      }, [value])
      useEffect(() => {
        if (state) console.log(state)
      }, [state])
      return <Input {...bindings} />
    }

    const wrapper = mount(<MockInput />)
    wrapper.setProps({ value: 'test' })
    const input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement

    expect(input.value).toEqual('test')
    expect(log).toContain('test')

    log = ''
    wrapper
      .find('input')
      .at(0)
      .simulate('change', { target: { value: 'test-change' } })
    expect(log).toContain('test-change')
    logSpy.mockRestore()
  })

  it('should follow change with use-input', () => {
    const MockInput: React.FC<{ value?: string; resetValue?: boolean }> = ({
      value,
      resetValue,
    }) => {
      const { reset, setState, bindings } = useInput('')
      useEffect(() => {
        if (value) setState(value)
      }, [value])
      useEffect(() => {
        if (resetValue) reset()
      }, [resetValue])
      return <Input {...bindings} />
    }

    const wrapper = mount(<MockInput />)
    wrapper.setProps({ value: 'test' })
    let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('test')

    wrapper.setProps({ resetValue: true })
    input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('')
  })
})

EditorInputItem: React.FC<React.PropsWithChildren<Props>> = ({
  groupName,
  keyName,
}) => {
  const theme = useTheme()
  const { updateCustomTheme } = useConfigs()
  const currentVal = useMemo(() => {
    const group = theme[groupName]
    const key = keyName as keyof typeof group
    return theme[groupName][key]
  }, [theme.expressiveness, keyName])
  const width = useMemo(() => (`${currentVal}`.length > 15 ? '350px' : 'auto'), [])

  const changeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    updateCustomTheme({
      [groupName]: { [keyName]: event.target.value },
    })
  }

  return (
    <div className="editor-item">
      <Input
        value={currentVal as string}
        label={keyName}
        onChange={changeHandler}
        className="editor-input"
      />
      <style jsx>{`
        .editor-item {
          background-color: transparent;
          width: auto;
          padding: 0;
          line-height: 2rem;
          display: inline-flex;
          align-items: center;
          color: ${theme.palette.accents_5};
          margin-right: 0.75rem;
          margin-bottom: 0.5rem;
          cursor: pointer;
          transition: color 200ms ease;
        }

        .editor-item :global(.editor-input) {
          width: ${width};
        }
      `}</style>
    </div>
  )
}

IconsGallery: React.FC<unknown> = () => {
  const { isChinese } = useConfigs()
  const { setVisible, bindings: modalBindings } = useModal()
  const { state: query, bindings } = useInput('')
  const [importStr, setImportStr] = useState({ title: '', single: '', normal: '' })
  const icons = Object.entries(Icons).filter(
    ([name]) => !query || name.toLowerCase().includes(query.toLowerCase()),
  )
  const onCellClick = (name: string) => {
    const { single, normal } = getImportString(name)
    setImportStr({ title: name, single, normal })
    setVisible(true)
  }

  return (
    <>
      <h3 className="title">{isChinese ? '图标画廊' : 'Icons Gallery'}</h3>
      <Card>
        <Input
          width="100%"
          icon={<Icons.Search />}
          placeholder={isChinese ? '搜索' : 'Search'}
          {...bindings}
        />
        <div className="icons-grid">
          {icons.map(([name, component], index) => (
            <IconsCell
              name={name}
              component={component}
              key={`${name}-${index}`}
              onClick={onCellClick}
            />
          ))}
        </div>
        <Modal {...modalBindings}>
          <Modal.Title>{importStr.title}</Modal.Title>
          <Modal.Content>
            <p>{isChinese ? '引入:' : 'Import:'}</p>
            <ImportSnippet>{importStr.normal}</ImportSnippet>
            <p>{isChinese ? '引入单个组件:' : 'Import single component:'}</p>
            <ImportSnippet>{importStr.single}</ImportSnippet>
          </Modal.Content>
        </Modal>
      </Card>
      <style jsx>{`
        .title {
          line-height: 1;
          margin-top: 75px;
          margin-bottom: 30px;
        }

        :global(input) {
          margin-bottom: 4px !important;
        }

        .icons-grid {
          display: flex;
          flex-wrap: wrap;
          margin-top: 8pt;
          justify-content: space-around;
        }
      `}</style>
    </>
  )
}

describe('Input', () => {
  it('should render correctly', () => {
    const wrapper = mount(<Input placeholder="placeholder" />)
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work with different status', () => {
    const wrapper = mount(
      <div>
        <Input type="secondary" />
        <Input type="success" />
        <Input type="warning" />
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should be work with label', () => {
    const wrapper = mount(
      <div>
        <Input label="label" />
        <Input labelRight="label" />
        <Input>
          <span>Block Label</span>
        </Input>
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
  })
  it('should be work with icon', () => {
    const wrapper = mount(
      <div>
        <Input icon={<span>test-icon</span>} />
        <Input iconRight={<span>test-icon</span>} />
      </div>,
    )
    expect(wrapper.html()).toMatchSnapshot()
  })

  it('should set input from value', () => {
    let wrapper = mount(<Input initialValue="test" />)
    let input = wrapper.find('input').getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('test')

    wrapper = mount(<Input value="test2" />)
    input = wrapper.find('input').getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('test2')

    wrapper.setProps({ value: 'test3' })
    input = wrapper.find('input').getDOMNode() as HTMLInputElement
    expect(input.value).toEqual('test3')
  })

  it('should trigger event when input changed', () => {
    let value = ''
    const callback = jest
      .fn()
      .mockImplementation(
        (e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value),
      )
    const wrapper = mount(<Input onChange={callback} />)
    wrapper
      .find('input')
      .at(0)
      .simulate('change', { target: { value: 'test' } })
    expect(callback).toHaveBeenCalled()
    expect(value).toEqual('test')
  })

  it('should ignore event when input disabled', () => {
    const callback = jest.fn()
    const wrapper = mount(<Input onChange={callback} disabled />)
    wrapper
      .find('input')
      .at(0)
      .simulate('change', { target: { value: 'test' } })
    expect(callback).not.toHaveBeenCalled()
  })

  it('should ignore event when input readonly', () => {
    const callback = jest.fn()
    const wrapper = mount(<Input onChange={callback} readOnly />)
    wrapper
      .find('input')
      .at(0)
      .simulate('change', { target: { value: 'test' } })
    expect(callback).not.toHaveBeenCalled()
  })

  it('should clear text', () => {
    let value = ''
    const callback = jest
      .fn()
      .mockImplementation(
        (e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value),
      )
    const clearHandler = jest.fn()
    const wrapper = mount(
      <Input onChange={callback} clearable onClearClick={clearHandler} />,
    )

    wrapper
      .find('input')
      .at(0)
      .simulate('change', { target: { value: 'test' } })
    expect(callback).toHaveBeenCalled()
    expect(value).toEqual('test')

    wrapper.find('.clear-icon').at(0).simulate('click', nativeEvent)
    expect(clearHandler).toHaveBeenCalled()
    expect(value).toEqual('')
  })

  it('should trigger focus correctly', () => {
    const focus = jest.fn()
    const blur = jest.fn()
    const wrapper = mount(<Input onFocus={focus} onBlur={blur} />)

    const input = wrapper.find('input').at(0)
    input.simulate('focus')
    expect(focus).toHaveBeenCalled()
    input.simulate('blur')
    expect(blur).toHaveBeenCalled()
  })

  it('should trigger icon event', () => {
    const click = jest.fn()
    const wrapper = mount(
      <Input icon={<span id="test-icon">icon</span>} onIconClick={click} iconClickable />,
    )
    wrapper.find('#test-icon').simulate('click', nativeEvent)
    expect(click).toHaveBeenCalled()
  })

  it('should ignore icon event when input disabled', () => {
    const click = jest.fn()
    const wrapper = mount(
      <Input
        icon={<span id="test-icon">icon</span>}
        onIconClick={click}
        iconClickable
        disabled
      />,
    )
    wrapper.find('#test-icon').simulate('click', nativeEvent)
    expect(click).not.toHaveBeenCalled()
  })

  // check ref is available: https://github.com/geist-org/geist-ui/issues/189
  it('should forward ref by default', () => {
    const ref = React.createRef<HTMLInputElement>()
    const wrapper = mount(<Input ref={ref} />)
    expect(ref.current).not.toBeNull()
    expect(() => wrapper.unmount()).not.toThrow()
  })
})

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>
  )
}