xchain-components/src/components/XInput/index.js

Xchain Components

/* eslint react/jsx-filename-extension: 0 */
import React from 'react';
import { Input } from 'semantic-ui-react';

type Props = {
  value:string,
  focus?:boolean,
  iconName: string,
  iconPosition:string,
  placeholder?: string,
  width?: string,
  disabled?: boolean,
  type?:string,
  fontWeight?: string,
  fontSize?: string,
  fontStyle?: string,
  fontStretch?: string,
  lineHeight?: string,
  letterSpacing?: string,
  color?: string,
  transparent?:boolean,
  onChangeOfValue: ()=> void
};

const XInput = (props: Props) => {
  const {
    placeholder, value,
    width, transparent,
    disabled, type,
    fontWeight, fontSize,
    fontStyle, fontStretch,
    lineHeight, letterSpacing,
    color, iconName, iconPosition, onChangeOfValue,
  } = props;
  const element = (iconName === null || iconName === '')
    ? (
      <Input
        style={{
          width,
          fontSize,
          fontWeight,
          fontStyle,
          fontStretch,
          lineHeight,
          letterSpacing,
          color,
        }}
        transparent={transparent}
        focus
        value={value}
        placeholder={placeholder}
        type={type}
        disabled={disabled}
        onChange={onChangeOfValue}
      />
    ) : (
      <Input
        style={{
          width,
          fontSize,
          fontWeight,
          fontStyle,
          fontStretch,
          lineHeight,
          letterSpacing,
          color,
        }}
        transparent={transparent}
        focus
        placeholder={placeholder}
        type={type}
        disabled={disabled}
        icon={iconName}
        value={value}
        iconPosition={iconPosition}
        onChange={onChangeOfValue}
      />
    );
  return (
    element
  );
};

XInput.defaultProps = {
  placeholder: '',
  width: '200px',
  type: 'text',
  disabled: false,
  fontWeight: 'normal',
  fontSize: '16px',
  fontStyle: 'normal',
  fontStretch: 'normal',
  lineHeight: 'normal',
  letterSpacing: 'normal',
  color: '#3b485c',
  focus: false,
  transparent: false,
};

export default XInput;