Textarea.tsx 3.05 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/**
 * See the NOTICE file distributed with this work for additional information
 * regarding copyright ownership.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

17 18 19 20 21 22 23
import React from 'react';
import classNames from 'classnames';
import noop from 'lodash/noop';

import styles from './Textarea.scss';

type PropsForRespondingWithEvents = {
24
  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
25 26 27 28 29 30 31 32 33 34 35 36 37 38
  onFocus: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
  onBlur: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void;
  callbackWithEvent: true;
};

type PropsForRespondingWithData = {
  onChange: (value: string) => void;
  onFocus: (value?: string) => void;
  onBlur: (value?: string) => void;
  callbackWithEvent: false;
};

type OnChangeProps = PropsForRespondingWithEvents | PropsForRespondingWithData;

Andrey Azov's avatar
Andrey Azov committed
39
export type Props = {
40 41 42 43 44 45 46 47 48 49 50 51 52
  value: string | number;
  id?: string;
  name?: string;
  autoFocus?: boolean;
  placeholder?: string;
  resizable: boolean;
  className?: string; // to customize textarea styling when using CSS modules
  onKeyUp: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
  onKeyPress: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
} & OnChangeProps;

const Textarea = (props: Props) => {
Andrey Azov's avatar
Andrey Azov committed
53 54 55 56 57 58 59 60
  const eventHandler =
    (eventName: string) =>
    (
      e:
        | React.ChangeEvent<HTMLTextAreaElement>
        | React.FocusEvent<HTMLTextAreaElement>
    ) => {
      const value = e.target.value;
61

Andrey Azov's avatar
Andrey Azov committed
62 63 64 65 66 67 68 69
      if (eventName === 'change') {
        props.callbackWithEvent ? props.onChange(e) : props.onChange(value);
      } else if (eventName === 'focus') {
        props.callbackWithEvent ? props.onFocus(e) : props.onFocus(value);
      } else if (eventName === 'blur') {
        props.callbackWithEvent ? props.onBlur(e) : props.onBlur(value);
      }
    };
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

  const className = classNames(styles.textarea, props.className, {
    [styles.disableResize]: !props.resizable
  });

  return (
    <textarea
      id={props.id}
      name={props.name}
      autoFocus={props.autoFocus}
      placeholder={props.placeholder}
      className={className}
      value={props.value}
      onChange={eventHandler('change')}
      onFocus={eventHandler('focus')}
      onBlur={eventHandler('blur')}
      onKeyUp={props.onKeyUp}
      onKeyDown={props.onKeyDown}
      onKeyPress={props.onKeyPress}
    />
  );
};

Textarea.defaultProps = {
  callbackWithEvent: false,
  onFocus: noop,
  onBlur: noop,
  onKeyUp: noop,
  onKeyDown: noop,
  onKeyPress: noop,
  resizable: true
};

export default Textarea;