React95/src/components/TextField/TextField.js

import React from "react";
import propTypes from "prop-types";

import styled, { css } from "styled-components";
import { createDisabledTextStyles, createFlatBoxStyles } from "../common";
import { blockSizes, fontSizes, padding, fontFamily } from "../common/system";
import Cutout from "../Cutout/Cutout";

const StyledWrapper = styled(Cutout)`
  height: ${blockSizes.md};
  background: ${({ theme, isDisabled }) =>
    isDisabled ? theme.material : theme.canvas};
`;
const StyledFlatWrapper = styled.div`
  position: relative;
  height: ${blockSizes.md};
  ${createFlatBoxStyles()}
`;
export const StyledTextInput = styled.input`
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 ${padding.sm};
  outline: none;
  border: none;
  background: none;
  font-size: ${fontSizes.md};
  font-family: ${fontFamily};
  ${({ disabled, flat }) => !flat && disabled && createDisabledTextStyles()}
`;
const TextField = ({
  onChange,
  disabled,
  flat,
  type,
  style,
  shadow,
  className,
  width,
  ...otherProps
}) => {
  const Wrapper = flat ? StyledFlatWrapper : StyledWrapper;
  return (
    <Wrapper
      width={width}
      shadow={shadow}
      isDisabled={disabled}
      style={{ ...style, width: width ? width : "auto" }}
      className={className}
    >
      <StyledTextInput
        onChange={disabled ? undefined : onChange}
        readOnly={disabled}
        disabled={disabled}
        flat={flat}
        type={type}
        {...otherProps}
      />
    </Wrapper>
  );
};
TextField.defaultProps = {
  disabled: false,
  type: "text",
  shadow: true,
  flat: false
};
TextField.propTypes = {
  width: propTypes.oneOfType([propTypes.string, propTypes.number]),
  onChange: propTypes.func,
  disabled: propTypes.bool,
  flat: propTypes.bool,
  shadow: propTypes.bool,
  type: propTypes.string,
  className: propTypes.string
};
export default TextField;