|
- import {VFC} from 'react';
- import {DropdownSelect} from '../DropdownSelect';
- import {Checkbox} from '../Checkbox';
- import {NumericInput} from '../NumericInput';
- import styles from '../../styles/components/GenerateMapForm/index.module.css';
- import {ActionButton} from '../ActionButton';
-
- type GenerateMapFormProps = {
- disabled?: boolean;
- }
-
- export const GenerateMapForm: VFC<GenerateMapFormProps> = ({
- disabled = false,
- }) => {
- return (
- <div
- className={styles.base}
- >
- <div
- className={styles.fieldsetWrapper}
- >
- <fieldset
- className={styles.fieldset}
- disabled={disabled}
- >
- <legend>
- Base
- </legend>
- <div
- className={styles.formGroup}
- >
- <DropdownSelect
- name="map"
- block
- options={[
- {
- label: 'World',
- value: 'world',
- },
- {
- label: 'Multiple Continents',
- value: 'multiple-continents',
- children: [
- {
- label: 'Afro-Eurasia',
- value: 'multiple-continents.afro-eurasia',
- },
- {
- label: 'Americas',
- value: 'multiple-continents.americas',
- },
- {
- label: 'Eurasia',
- value: 'multiple-continents.eurasia',
- }
- ]
- },
- {
- label: 'Single Continents',
- value: 'single-continents',
- children: [
- {
- label: 'Africa',
- value: 'single-continents.africa',
- },
- {
- label: 'Antarctica',
- value: 'single-continents.antarctica',
- },
- {
- label: 'Asia',
- value: 'single-continents.asia',
- },
- {
- label: 'Australia & Oceania',
- value: 'single-continents.australia-oceania',
- },
- {
- label: 'Europe',
- value: 'single-continents.europe',
- },
- {
- label: 'North America',
- value: 'single-continents.north-america',
- },
- {
- label: 'South America',
- value: 'single-continents.south-america',
- },
- ],
- },
- ]}
- />
- </div>
- <div
- className={styles.formGroup}
- >
- <DropdownSelect
- name="projection"
- block
- options={[
- {
- label: 'Equirectangular',
- value: 'equirectangular',
- },
- {
- label: 'Mercator',
- value: 'mercator',
- },
- ]}
- />
- </div>
- <div
- className={styles.formGroup}
- >
- <DropdownSelect
- name="terrain"
- block
- options={[
- {
- label: 'Normal (with shallow waters)',
- value: 'normal-shallow-waters',
- },
- {
- label: 'Normal (uniform waters)',
- value: 'normal-uniform-waters',
- },
- {
- label: 'Lava',
- value: 'lava',
- },
- ]}
- />
- </div>
- <div
- className={styles.formGroup}
- >
- <Checkbox
- label="Force Island"
- defaultChecked
- name="forceIsland"
- />
- </div>
- <div
- className={styles.formGroup}
- >
- <Checkbox
- label="Add Natural Objects"
- defaultChecked
- name="addNaturalObjects"
- />
- </div>
- </fieldset>
- </div>
- <div
- className={styles.cities}
- >
- <fieldset
- className={styles.fieldset}
- disabled={disabled}
- >
- <legend>
- Cities
- </legend>
-
- </fieldset>
- </div>
- <div
- className={styles.fieldsetWrapper}
- >
- <fieldset
- className={styles.fieldset}
- disabled={disabled}
- >
- <legend>
- Map
- </legend>
- <div
- className={styles.horizontalFormGroup}
- >
- <div>
- <NumericInput
- min={1}
- block
- placeholder="Width"
- name="width"
- defaultValue={288}
- />
- </div>
- <div>
- <NumericInput
- min={1}
- block
- placeholder="Height"
- readOnly
- name="height"
- />
- </div>
- </div>
- <div
- className={styles.formGroup}
- >
- <div>
- <NumericInput
- block
- placeholder="Aspect Ratio"
- readOnly
- />
- </div>
- </div>
- </fieldset>
- </div>
- <div
- className={styles.fieldsetWrapper}
- >
- <ActionButton
- block
- disabled={disabled}
- >
- Generate Map
- </ActionButton>
- </div>
- </div>
- )
- }
|