react-bootstrap#FormLabel JavaScript Examples

The following examples show how to use react-bootstrap#FormLabel. 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: CoopTypes.jsx    From maps with MIT License 6 votes vote down vote up 
CoopTypes = (props) => {
  const [tags, setTags] = React.useState(null);
  const [suggestions, setSuggestions] = React.useState(null);
  const handleAddition = props.handleAddition;
  const handleDeletion = props.handleDeletion;

  useEffect(() => {
    const s = props.suggestions
      ? props.suggestions.map((result) => ({
          id: result.name,
          text: result.name,
        }))
      : [];
    setSuggestions(s);
    const t = props.values
      ? props.values.map((result) => ({
          id: result.name,
          text: result.name,
        }))
      : [];
    setTags(t);
  }, [props]);

  return (
    <div className="form-group">
      <FormLabel className={props.className} style={inputStyle}>
        Coop Type(s)
      </FormLabel>
      <ReactTags
        tags={tags ? tags : []}
        suggestions={suggestions ? suggestions : []}
        handleDelete={handleDeletion}
        handleAddition={handleAddition}
        handleDrag={handleDrag}
        delimiters={delimiters}
      />
    </div>
  );
}
Example #2
Source File: Input.jsx    From maps with MIT License 6 votes vote down vote up 
Input = (props) => {
  const errorsArr = _.get(props.errors, props.name);

  return (
    <div className="form-group">
      <FormLabel className={props.className} style={inputStyle}>
        {props.title}
      </FormLabel>
      <FormControl
        isInvalid={props.errors && errorsArr}
        type={props.type}
        id={props.name}
        name={props.name}
        value={props.value}
        placeholder={props.placeholder}
        onChange={props.handleChange}
      />

      {errorsArr && (
        <FormControl.Feedback type="invalid">
          {errorsArr.map((error, index) => (
            <div
              key={`field-error-${props.name}-${index}`}
              className="fieldError"
            >
              {error}
            </div>
          ))}
        </FormControl.Feedback>
      )}
    </div>
  );
}
Example #3
Source File: TextAreaInput.jsx    From maps with MIT License 6 votes vote down vote up 
TextAreaInput = (props) => {
  const errorsArr = _.get(props.errors, props.name);

  return (
    <div className="form-group">
      <FormLabel className={props.className}>{props.title}</FormLabel>
      <FormControl
        isInvalid={props.errors && errorsArr}
        type={props.type}
        as={props.as}
        rows={3}
        id={props.name}
        name={props.name}
        value={props.value}
        placeholder={props.placeholder}
        onChange={props.handleChange}
      />

      {errorsArr && (
        <FormControl.Feedback type="invalid">
          {errorsArr.map((error, index) => (
            <div
              key={`field-error-${props.name}-${index}`}
              className="fieldError"
            >
              {error}
            </div>
          ))}
        </FormControl.Feedback>
      )}
    </div>
  );
}
Example #4
Source File: DropDownInput.jsx    From maps with MIT License 5 votes vote down vote up 
DropDownInput = (props) => {
  const errorsArr = _.get(props.errors, props.name);

  return (
    <div className="form-group">
      <FormLabel className={props.className}>{props.title}</FormLabel>

      <FormControl
        isInvalid={props.errors && errorsArr}
        as={props.as}
        id={props.name}
        name={props.name}
        value={props.value}
        onChange={props.handleChange}
        multiple={props.multiple && "multiple"}
      >
        {!props.multiple && (
          <option value="" disabled>
            Select
          </option>
        )}
        {props.options.map((option) => {
          return (
            <option key={option.id} value={option.name}>
              {option.name}
            </option>
          );
        })}
      </FormControl>

      {errorsArr && (
        <FormControl.Feedback type="invalid">
          {errorsArr.map((error, index) => (
            <div
              key={`field-error-${props.name}-${index}`}
              className="fieldError"
            >
              {error}
            </div>
          ))}
        </FormControl.Feedback>
      )}
    </div>
  );
}
Example #5
Source File: Search.jsx    From maps with MIT License 4 votes vote down vote up 
Search = (props) => {
  //store evolving search settings before search form is submitted
  const [coopSearchSettings, setCoopSearchSettings] = useState({ state: "IL", type: [] });

  // store finalized search url
  const [searchUrl, setSearchUrl] = useState("");

  const [coopTypes, setCoopTypes] = React.useState([]);
  const [provinces, setProvinces] = React.useState([]);
  const [searchResults, setSearchResults] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // Get all possible coop types to populate search form
    fetch(REACT_APP_PROXY + "/coop_types/")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        const coopTypes = data.map((coopType) => {
          return coopType;
        });
        setCoopTypes(coopTypes.sort((a, b) => (a.name > b.name ? 1 : -1)));
      });
  }, []);

  useEffect(() => {
    // Get initial provinces (states)
    fetch(REACT_APP_PROXY + "/states/" + DEFAULT_COUNTRY_CODE)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        const initialProvinces = data.map((province) => {
          return province;
        });
        setProvinces(initialProvinces);
      });
  }, []);

  useEffect(
    () => {
      // set searchResults to empty if searchUrl is empty
      if (searchUrl === "") {
        setSearchResults([]);
        return;
      } else {
        //Let the debounced function do it's thing
        const results = doSearchDebounced(
          coopSearchSettings,
          setSearchResults,
          setLoading,
          searchUrl
        );
        setSearchResults(results);
      }
    },
    // Only re-render page if searchUrl has changed.
    // coopSearchSettings is not a dependency because we do want not re-render page
    // every time users type a new character in search form.
    [searchUrl]
  );

  const handleInputChange = (event) => {
    // save user edits to individual form fields to coopSearchSettings
    const { target } = event;
    const { name, value } = target;
    event.persist();
    setCoopSearchSettings({ ...coopSearchSettings, [name]: value });
  };

  const handleFormSubmit = (e) => {
    // when the user finalizes search settings by pressing 'submit,'
    // built out search URL
    e.preventDefault();
    buildSearchUrl(coopSearchSettings, setSearchUrl);
  };

  const formatAddress = (obj) => {
    const streetAdd = obj.formatted;
    const cityName = obj.locality.name;
    const stateCode = obj.locality.state.code;
    const zip = obj.locality.postal_code;

    return streetAdd + ", " + cityName + ", " + stateCode + " " + zip;
  };

  const handleMultiSelect = (e) => {
    const { name, value } = e.target;
    const selected = coopSearchSettings[name]
    const index = selected.indexOf(value)

    if (index > -1) {
      selected.splice(index, 1)
    } else {
      selected.push(value)
    }
    setCoopSearchSettings({...coopSearchSettings, [name]: selected})
  }

  // same logic from Search.jsx
  const renderSearchResults = () => {
    if (searchResults && searchResults.length) {
      return (
        <>
          <br/>
          <ListGroup variant="flush">
            <ListGroupItem key="header">
              <h3 className="float-left font-weight-bold">
                Matching Entities
              </h3>
              <h3 className="float-right font-weight-bold">
                Edit
              </h3>
            </ListGroupItem>
            {searchResults.map((item) => (
              <ListGroupItem key={item.id} value={item.name}>
                <div className="float-left">
                  {item.name}
                  <br />
                  {formatAddress(item.addresses[0])}
                </div>
                <span className="float-right">
                  <Link to={"/directory-additions-updates/" + item.id}>
                    <PencilSquare color="royalblue" size={26} />
                  </Link>
                </span>
              </ListGroupItem>
            ))}
          </ListGroup>
        </>
      );
    }
  };

  return (
    <div className="form container-fluid">
      <form
          onSubmit={handleFormSubmit}
        >
        {/* FormGroup logic from FormContainer.jsx */}
        <FormGroup controlId="formBasicText">
          {/* FormLabel and FormControl logic from Input.jsx */}
          <div className="form-row">
            <div className="form-group col-md-6 col-lg-6 col-xl-6">
              <FormLabel class="formInputStyle">Name</FormLabel>
              <FormControl
                class="form-control"
                id={"name"}
                name={"name"}
                value={coopSearchSettings.name}
                placeholder="Enter cooperative name"
                onChange={handleInputChange}
                aria-label="Name"
              />{" "}
            </div>
            <div className="form-group col-md-6 col-lg-6 col-xl-6">
              <DropDownInput
                className={"formInputStyle"}
                type={"select"}
                as={"select"}
                title={"CoOp Type"}
                multiple={"multiple"}
                name={"type"}
                value={coopSearchSettings.type}
                handleChange={handleMultiSelect}
                options={coopTypes}
              />
            </div>
          </div>
          <div className="form-row">
            <div className="form-group col-md-6 col-lg-6 col-xl-6">
              <FormLabel class="formInputStyle">Street</FormLabel>
              <FormControl
                class="form-control"
                id={"street"}
                name={"street"}
                value={coopSearchSettings.street}
                placeholder="Enter address street"
                onChange={handleInputChange}
              />{" "}
            </div>
            <div className="form-group col-md-3 col-lg-3 col-xl-3">
              <FormLabel class="formInputStyle">City</FormLabel>
              <FormControl
                class="form-control"
                id={"city"}
                name={"city"}
                value={coopSearchSettings.city}
                placeholder="Enter address city"
                onChange={handleInputChange}
              />{" "}
              </div>
            <div className="form-group col-md-3 col-lg-3 col-xl-3">
              <FormLabel class="formInputStyle">Postal Code</FormLabel>
              <FormControl
                class="form-control"
                id={"zip"}
                name={"zip"}
                value={coopSearchSettings.zip}
                placeholder="Enter postal code"
                onChange={handleInputChange}
              />{" "}
            </div>
          </div>
          <div className="form-row">
            <div className="form-group col-md-3 col-lg-6 col-xl-6">
              <FormLabel class="formInputStyle">County</FormLabel>
              <FormControl
                class="form-control"
                id={"county"}
                name={"county"}
                value={coopSearchSettings.county}
                placeholder="Enter county"
                onChange={handleInputChange}
              />{" "}
            </div>
            <div className="form-group col-md-3 col-lg-3 col-xl-3">
              <Province
                title={"State"}
                className="formInputStyle"
                name={"state"}
                options={provinces}
                value={coopSearchSettings.state}
                placseholder={"Select state"}
                handleChange={(e) =>
                  setCoopSearchSettings({
                    ...coopSearchSettings,
                    [e.target.name]: e.target.value,
                  })
                }
              />{" "}
            </div>
            <div className="form-group col-md-3 col-lg-3 col-xl-3">
              <label class="form-label" class="formInputStyle">
                Enabled
              </label>
              <select
                name={"enabled"}
                value={coopSearchSettings.enabled}
                onChange={handleInputChange}
                className="form-control"
              >
                <option selected value="none">
                  None Selected
                </option>
                <option value="true">True</option>
                <option value="False">False</option>
              </select>
            </div>
          </div>
          <div className="form-group form-row">
            <div className="form-group col-md-6" align="center">
              <Button buttonType={"primary"} title={"Submit"} type={"submit"} />{" "}
            </div>
            <div className="form-group col-md-6" align="center">
              <CancelButton />
            </div>
          </div>
          <div>
            {renderSearchResults()}
            {loading && (
              <div class="loading">
                <div className="spinner-border" role="status">
                  <span className="sr-only">Loading...</span>
                </div>
              </div>
            )}
          </div>
        </FormGroup>
      </form>
    </div>
  );
}