Add character counter to most text input boxes

frontend/src/app/PackForm/PackForm.tsx

@@ -10,8 +10,7 @@ import { getPackPath } from "routes";
 import { PackFormSpecs } from "./types";
 import { DurationUnit } from "enums";
 import { Item, PackItem } from "types/item";
-import { Pack } from "types/pack";
-import { BasePack } from "types/pack";
+import { Pack, BasePack, PackConstants } from "types/pack";
 
 import { durationUnitOptions, genderOptions } from "lib/utils/form";
 
@@ -174,13 +173,15 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
  error={wasSubmitted && !!errors.title}
  errorMsg={errors.title}
  value={values.title}
+ allowedLength={PackConstants.title}
  onChange={v => setFieldValue('title', v)}/>
 
  <Textarea label="Field Notes"
  placeholder="Additional notes about this trip..."
  value={values.description || ''}
  onChange={v => setFieldValue('description', v)}
- last={true}/>
+ last={true}
+ allowedLength={PackConstants.description}/>
  </div>
  <div className="third">
  <Row gutter={8}>
@@ -207,6 +208,7 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
  </Row>
  <Input label="Temp Range"
  placeholder="43° - 81° F"
+ allowedLength={PackConstants.temp_range}
  value={values.temp_range || ''}
  onChange={v => setFieldValue('temp_range', v)}
  />
@@ -217,6 +219,7 @@ const PackForm: React.FC<PackFormSpecs.Props> = ({ history, packId, getPack, exp
  value={values.season || ''}
  onChange={v => setFieldValue('season', v)}
  last={true}
+ allowedLength={PackConstants.season}
  />
  </Col>
  <Col span={12}>

frontend/src/app/components/FormFields/Input.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import { ChangeEvent } from "react";
 
-import { Input } from './styles';
+import { Input, CharacterCounter } from './styles';
 import { SharedInputProps } from './types';
 import { InputContainer } from './utils';
 
+
 interface InputProps extends SharedInputProps {
  value: string | number;
  onChange: (value: string | number) => void;
  autocomplete?: string;
  type?: 'text' | 'number' | 'url' | 'password';
  placeholder?: string;
+ allowedLength?: number;
 }
 
 const FormInput: React.FC<InputProps> = ({ onChange, label, error, errorMsg, tip, last, style, ...props }) => {
@@ -20,6 +22,11 @@ const FormInput: React.FC<InputProps> = ({ onChange, label, error, errorMsg, tip
  return (
  <InputContainer {...{ error, errorMsg, label, tip, last, style }}>
  <Input {...props} onChange={handleChange}/>
+ {props.allowedLength && props.allowedLength > 0 && 
+ <CharacterCounter 
+ className={`${props.value.toString().length > props.allowedLength ? "full": ""}`}>
+ {props.value.toString().length}/{props.allowedLength}
+ </CharacterCounter>}
  </InputContainer>
  );
 };

frontend/src/app/components/FormFields/Textarea.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { ChangeEvent } from "react";
 
-import { TextareaInput } from './styles';
+import { TextareaInput, CharacterCounter } from './styles';
 import { SharedInputProps } from './types';
 import { InputContainer } from './utils';
 
 interface TextareaProps extends SharedInputProps {
  value: string | number;
  onChange: (value: string | number) => void;
  placeholder?: string;
+ allowedLength?: number;
 }
 
 const Textarea: React.FC<TextareaProps> = ({ onChange, label, error, errorMsg, last, tip, ...props }) => {
@@ -18,6 +19,11 @@ const Textarea: React.FC<TextareaProps> = ({ onChange, label, error, errorMsg, l
  return (
  <InputContainer {...{error, errorMsg, label, tip, last}}>
  <TextareaInput {...props} onChange={handleChange}/>
+ {props.allowedLength && props.allowedLength > 0 && 
+ <CharacterCounter 
+ className={`${props.value.toString().length > props.allowedLength ? "full": ""}`}>
+ {props.value.toString().length}/{props.allowedLength}
+ </CharacterCounter>}
  </InputContainer>
  );
 };

frontend/src/app/components/FormFields/styles.ts

@@ -108,4 +108,11 @@ export const selectStyles: StylesConfig = {
  ...p,
  color: '#ccc'
  })
-};
+};
+
+export const CharacterCounter = styled.small`
+ float: right;
+ &.full {
+ color:red;
+ }
+`;

frontend/src/app/components/ItemForm/ItemForm.tsx

@@ -6,7 +6,7 @@ import { Row, Col, Button } from "antd";
 import { Input, Select, SelectCreatable, Option } from '../FormFields';
 
 import { AppContext } from 'AppContext';
-import { CreateItem } from "types/item";
+import { CreateItem, ItemConstants } from "types/item";
 import { FormSpecs } from "./types";
 
 import withApi from 'app/components/higher-order/with-api';
@@ -78,6 +78,7 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
  error={wasSubmitted && !!errors.name}
  placeholder="Backpack, Compass, etc..."
  onChange={v => setFieldValue('name', v)}
+ allowedLength={ItemConstants.name}
  />
  <SelectCreatable
  label="Category"
@@ -99,6 +100,7 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
  value={values.product_name || ''}
  placeholder="Osprey Renn 65"
  onChange={v => setFieldValue('product_name', v)}
+ allowedLength={ItemConstants.product_name}
  />
  <Row gutter={8}>
  <Col span={16}>
@@ -134,6 +136,7 @@ const ItemForm: React.FC<FormSpecs.Props> = ({ createItem, exportCsv, onSubmit }
  type="url"
  placeholder="https://osprey.com"
  onChange={v => setFieldValue('product_url', v)}
+ allowedLength={ItemConstants.product_url}
  />
  <Button onClick={submitForm}
  disabled={isSubmitting}

frontend/src/types/item.ts

@@ -51,4 +51,10 @@ export interface PackItemAttr {
 
 export interface PackItem extends Item {
  packItem: PackItemAttr;
+}
+
+export enum ItemConstants {
+ name = 200,
+ product_name = 500,
+ product_url = 500
 }

frontend/src/types/pack.ts

@@ -34,3 +34,10 @@ export interface CreatePack extends BasePack {
 export type PackOverview = Omit<Pack, 'items'> & {
  itemCount: number;
 }
+
+export enum PackConstants {
+ title = 300,
+ description = 2000,
+ temp_range = 255,
+ season = 255
+}