BLUE

Edit File Size: 2.16 KB

/var/www/sitesecurity.bitkit.dk/httpdocs/node_modules/@react-google-maps/api/src/docs/DocsApiKeyInput.tsx

Text Base64

import {
  type JSX,
  Component,
  type FormEvent,
  type ReactNode,
  type ChangeEvent,
} from 'react'
import { setKey, getKey } from './docs-api-key'

import LoadScript from '../LoadScript'

import type { Libraries } from '../utils/make-load-script-url'

const libraries: Libraries = ['drawing', 'places', 'visualization']

const inputStyle = {
  width: '400px',
  height: '40px',
  paddingLeft: '8px',
}

const buttonStyle = {
  height: '40px',
  marginLeft: '8px',
}

const loadingElement: JSX.Element = <div>Loading...</div>

type DocsApiKeyInputState = {
  key: string
  loadScript: boolean
}

// eslint-disable-next-line @typescript-eslint/no-empty-object-type
class DocsApiKeyInput extends Component<{}, DocsApiKeyInputState> {
  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
  constructor(props: {}) {
    super(props)

const key = getKey()

this.state = key
      ? { key, loadScript: true }
      : { key: '', loadScript: false }
  }

onInputChange = ({
    target: { value },
  }: ChangeEvent<HTMLInputElement>): void => {
    this.setState(function setKey() {
      return {
        key: value,
      }
    })
  }

onFormSubmit = (event: FormEvent<HTMLFormElement>): void => {
    event.preventDefault()

setKey(this.state.key)

this.setState(function setLoadScript() {
      return {
        loadScript: true,
      }
    })
  }

override render(): ReactNode {
    return (
      <>
        <form onSubmit={this.onFormSubmit}>
          <input
            type='text'
            onChange={this.onInputChange}
            value={this.state.key}
            placeholder='Enter Google Maps API Key'
            style={inputStyle}
          />

{this.state.loadScript ? (
          <LoadScript
            id='script-loader'
            googleMapsApiKey={this.state.key}
            language='en'
            region='EN'
            version='weekly'
            libraries={libraries}
            loadingElement={loadingElement}
          />
        ) : (
          <></>
        )}
      </>
    )
  }
}

export default DocsApiKeyInput

Exit & Reset Text mode: syntax highlighting auto-detects file type.

Name	Size	Perms	Modified	Actions
docs-api-key.ts	365 B	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
DocsApiKeyInput.tsx	2.16 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
favicon.ico	15.04 KB	lrw-r--r--	2026-04-28 09:11:39	Edit Download recursive recursive
getting-started.md	1.62 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
introduction.md	1.46 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive
ScriptLoaded.tsx	1.37 KB	lrw-r--r--	2026-04-28 09:11:40	Edit Download recursive recursive

Directory Contents