Web: text-input: Splitting one file into several, adding a theme to styles, changing the globalColors file accordingly.

2021-02-03 14:43:38 +03:00 · 2021-02-03 14:43:38 +03:00 · 53884de5ce
commit 53884de5ce
parent f07906ccb6
6 changed files with 274 additions and 233 deletions
--- a/packages/asc-web-components/src/components/text-input/common-input-styles.js
+++ b/packages/asc-web-components/src/components/text-input/common-input-styles.js
@ -3,40 +3,49 @@ import { css } from "styled-components";
 const commonInputStyle = css`
  width: ${(props) =>
    (props.scale && "100%") ||
-    (props.size === "base" && "173px") ||
-    (props.size === "middle" && "300px") ||
-    (props.size === "big" && "350px") ||
-    (props.size === "huge" && "500px") ||
-    (props.size === "large" && "550px")};
-  background-color: ${(props) => (props.isDisabled ? "#F8F9F9" : "#fff")};
-  color: ${(props) =>
-    props.isDisabled ? "#A3A9AE" : props.color ? props.color : "#333333"};
+    (props.size === "base" && props.theme.input.width.base) ||
+    (props.size === "middle" && props.theme.input.width.middle) ||
+    (props.size === "big" && props.theme.input.width.big) ||
+    (props.size === "huge" && props.theme.input.width.huge) ||
+    (props.size === "large" && props.theme.input.width.large)};

-  border-radius: 3px;
-  box-shadow: none;
-  box-sizing: border-box;
-  border: solid 1px;
+  background-color: ${(props) =>
+    props.isDisabled
+      ? props.theme.input.disableBackgroundColor
+      : props.theme.input.backgroundColor};
+  color: ${(props) =>
+    props.isDisabled
+      ? props.theme.input.disableColor
+      : props.color
+      ? props.color
+      : props.theme.input.color};
+
+  border-radius: ${(props) => props.theme.input.borderRadius};
+  -moz-border-radius: ${(props) => props.theme.input.borderRadius};
+  -webkit-border-radius: ${(props) => props.theme.input.borderRadius};
+
+  box-shadow: ${(props) => props.theme.input.boxShadow};
+  box-sizing: ${(props) => props.theme.input.boxSizing};
+  border: ${(props) => props.theme.input.border};
  border-color: ${(props) =>
-    (props.hasError && "#c30") ||
-    (props.hasWarning && "#f1ca92") ||
-    (props.isDisabled && "#ECEEF1") ||
-    "#D0D5DA"};
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
+    (props.hasError && props.theme.input.errorBorderColor) ||
+    (props.hasWarning && props.theme.input.warningBorderColor) ||
+    (props.isDisabled && props.theme.input.disabledBorderColor) ||
+    props.theme.input.borderColor};

  :hover {
    border-color: ${(props) =>
-      (props.hasError && "#c30") ||
-      (props.hasWarning && "#f1ca92") ||
-      (props.isDisabled && "#ECEEF1") ||
-      "#A3A9AE"};
+      (props.hasError && props.theme.input.hoverErrorBorderColor) ||
+      (props.hasWarning && props.theme.input.hoverWarningBorderColor) ||
+      (props.isDisabled && props.theme.input.hoverDisabledBorderColor) ||
+      props.theme.input.hoverBorderColor};
  }
  :focus {
    border-color: ${(props) =>
-      (props.hasError && "#c30") ||
-      (props.hasWarning && "#f1ca92") ||
-      (props.isDisabled && "#ECEEF1") ||
-      "#2DA7DB"};
+      (props.hasError && props.theme.input.focusErrorBorderColor) ||
+      (props.hasWarning && props.theme.input.focusWarningBorderColor) ||
+      (props.isDisabled && props.theme.input.focusDisabledBorderColor) ||
+      props.theme.input.focusBorderColor};
  }

  cursor: ${(props) =>
--- a/packages/asc-web-components/src/components/text-input/index.js
+++ b/packages/asc-web-components/src/components/text-input/index.js
@ -1,168 +1 @@
-import React from "react";
-import PropTypes from "prop-types";
-import styled from "styled-components";
-import commonInputStyle from "../text-input/common-input-styles";
-import MaskedInput from "react-text-mask";
-import equal from "fast-deep-equal/react";
-
-/* eslint-disable no-unused-vars, react/prop-types */
-const Input = ({
-  isAutoFocussed,
-  isDisabled,
-  isReadOnly,
-  hasError,
-  hasWarning,
-  scale,
-  withBorder,
-  keepCharPositions,
-  fontWeight,
-  isBold,
-  ...props
-}) =>
-  props.mask != null ? (
-    <MaskedInput keepCharPositions {...props} />
-  ) : (
-    <input {...props} />
-  );
-/* eslint-enable react/prop-types, no-unused-vars */
-
-const StyledInput = styled(Input).attrs((props) => ({
-  id: props.id,
-  name: props.name,
-  type: props.type,
-  value: props.value,
-  placeholder: props.placeholder,
-  maxLength: props.maxLength,
-  onChange: props.onChange,
-  onBlur: props.onBlur,
-  onFocus: props.onFocus,
-  readOnly: props.isReadOnly,
-  autoFocus: props.isAutoFocussed,
-  autoComplete: props.autoComplete,
-  tabIndex: props.tabIndex,
-  disabled: props.isDisabled ? "disabled" : "",
-}))`
-  ${commonInputStyle}
-  -webkit-appearance: none;
-  display: flex;
-  font-family: "Open Sans", sans-serif;
-  line-height: ${(props) =>
-    (props.size === "base" && "20px") ||
-    (props.size === "middle" && "20px") ||
-    (props.size === "big" && "20px") ||
-    (props.size === "huge" && "21px") ||
-    (props.size === "large" && "20px")};
-  font-size: ${(props) =>
-    (props.size === "base" && "14px") ||
-    (props.size === "middle" && "14px") ||
-    (props.size === "big" && "16px") ||
-    (props.size === "huge" && "18px") ||
-    (props.size === "large" && "16px")};
-
-  font-weight: ${(props) =>
-    props.fontWeight ? props.fontWeight : props.isBold ? 600 : "normal"};
-
-  flex: 1 1 0%;
-  outline: none;
-  overflow: hidden;
-  opacity: 1;
-  padding: ${(props) =>
-    (props.size === "base" && "5px 6px") ||
-    (props.size === "middle" && "8px 12px") ||
-    (props.size === "big" && "8px 16px") ||
-    (props.size === "huge" && "8px 20px") ||
-    (props.size === "large" && "11px 15px")};
-  transition: all 0.2s ease 0s;
-
-  ::-webkit-input-placeholder {
-    color: "#A3A9AE";
-    font-family: "Open Sans", sans-serif;
-    user-select: none;
-  }
-
-  :-moz-placeholder {
-    color: "#A3A9AE";
-    font-family: "Open Sans", sans-serif;
-    user-select: none;
-  }
-
-  ::-moz-placeholder {
-    color: "#A3A9AE";
-    font-family: "Open Sans", sans-serif;
-    user-select: none;
-  }
-
-  :-ms-input-placeholder {
-    color: "#A3A9AE";
-    font-family: "Open Sans", sans-serif;
-    user-select: none;
-  }
-
-  ::placeholder {
-    color: "#A3A9AE";
-    font-family: "Open Sans", sans-serif;
-    user-select: none;
-  }
-
-  ${(props) => !props.withBorder && `border: none;`}
-`;
-
-class TextInput extends React.Component {
-  shouldComponentUpdate(nextProps) {
-    return !equal(this.props, nextProps);
-  }
-
-  render() {
-    // console.log(`TextInput render id=${this.props.id}`);
-    return <StyledInput {...this.props} />;
-  }
-}
-
-TextInput.propTypes = {
-  id: PropTypes.string,
-  name: PropTypes.string,
-  type: PropTypes.oneOf(["text", "password", "email"]),
-  value: PropTypes.string.isRequired,
-  maxLength: PropTypes.number,
-  placeholder: PropTypes.string,
-  tabIndex: PropTypes.number,
-  mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
-  keepCharPositions: PropTypes.bool,
-
-  size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
-  scale: PropTypes.bool,
-
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func,
-
-  isAutoFocussed: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  hasError: PropTypes.bool,
-  hasWarning: PropTypes.bool,
-  autoComplete: PropTypes.string,
-
-  className: PropTypes.string,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-
-  fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  isBold: PropTypes.bool,
-};
-
-TextInput.defaultProps = {
-  type: "text",
-  value: "",
-  maxLength: 255,
-  size: "base",
-  scale: false,
-  tabIndex: -1,
-  hasError: false,
-  hasWarning: false,
-  autoComplete: "off",
-  withBorder: true,
-  keepCharPositions: false,
-  isBold: false,
-};
-
-export default TextInput;
+export default from "./text-input";
--- a/packages/asc-web-components/src/components/text-input/input.js
+++ b/packages/asc-web-components/src/components/text-input/input.js
@ -0,0 +1,26 @@
+import React from "react";
+import MaskedInput from "react-text-mask";
+
+
+
+/* eslint-disable no-unused-vars, react/prop-types */
+const Input = ({
+    isAutoFocussed,
+    isDisabled,
+    isReadOnly,
+    hasError,
+    hasWarning,
+    scale,
+    withBorder,
+    keepCharPositions,
+    fontWeight,
+    isBold,
+    ...props
+  }) =>
+    props.mask != null ? (
+      <MaskedInput keepCharPositions {...props} />
+    ) : (
+      <input {...props} />
+    );
+
+    export default Input;
--- a/packages/asc-web-components/src/components/text-input/styled-text-input.js
+++ b/packages/asc-web-components/src/components/text-input/styled-text-input.js
@ -0,0 +1,103 @@
+import styled from "styled-components";
+import commonInputStyles from "./common-input-styles";
+import Input from "./Input";
+import { Base } from "../../themes";
+
+/* eslint-enable react/prop-types, no-unused-vars */
+const StyledTextInput = styled(Input).attrs((props) => ({
+  id: props.id,
+  name: props.name,
+  type: props.type,
+  value: props.value,
+  placeholder: props.placeholder,
+  maxLength: props.maxLength,
+  onChange: props.onChange,
+  onBlur: props.onBlur,
+  onFocus: props.onFocus,
+  readOnly: props.isReadOnly,
+  autoFocus: props.isAutoFocussed,
+  autoComplete: props.autoComplete,
+  tabIndex: props.tabIndex,
+  disabled: props.isDisabled ? "disabled" : "",
+}))`
+  ${commonInputStyles}
+  -webkit-appearance: ${(props) => props.theme.textInput.appearance};
+  display: ${(props) => props.theme.textInput.display};
+  font-family: ${(props) => props.theme.fontFamily};
+  line-height: ${(props) =>
+    (props.size === "base" && props.theme.textInput.lineHeight.base) ||
+    (props.size === "middle" && props.theme.textInput.lineHeight.middle) ||
+    (props.size === "big" && props.theme.textInput.lineHeight.big) ||
+    (props.size === "huge" && props.theme.textInput.lineHeight.huge) ||
+    (props.size === "large" && props.theme.textInput.lineHeight.large)};
+  font-size: ${(props) =>
+    (props.size === "base" && props.theme.textInput.fontSize.base) ||
+    (props.size === "middle" && props.theme.textInput.fontSize.middle) ||
+    (props.size === "big" && props.theme.textInput.fontSize.big) ||
+    (props.size === "huge" && props.theme.textInput.fontSize.huge) ||
+    (props.size === "large" && props.theme.textInput.fontSize.large)};
+
+  font-weight: ${(props) =>
+    props.fontWeight
+      ? props.fontWeight
+      : props.isBold
+      ? 600
+      : props.theme.textInput.fontWeight};
+
+  flex: ${(props) => props.theme.textInput.flex};
+  outline: ${(props) => props.theme.textInput.outline};
+  overflow: ${(props) => props.theme.textInput.overflow};
+  opacity: ${(props) => props.theme.textInput.opacity};
+
+  width: ${(props) =>
+    (props.scale && "100%") ||
+    (props.size === "base" && props.theme.input.width.base) ||
+    (props.size === "middle" && props.theme.input.width.middle) ||
+    (props.size === "big" && props.theme.input.width.big) ||
+    (props.size === "huge" && props.theme.input.width.huge) ||
+    (props.size === "large" && props.theme.input.width.large)};
+  padding: ${(props) =>
+    (props.size === "base" && props.theme.textInput.padding.base) ||
+    (props.size === "middle" && props.theme.textInput.padding.middle) ||
+    (props.size === "big" && props.theme.textInput.padding.big) ||
+    (props.size === "huge" && props.theme.textInput.padding.huge) ||
+    (props.size === "large" && props.theme.textInput.padding.large)};
+
+  transition: ${(props) => props.theme.textInput.transition};
+
+  ::-webkit-input-placeholder {
+    color: ${(props) => props.theme.textInput.placeholderColor};
+    font-family: ${(props) => props.theme.fontFamily};
+    user-select: ${(props) => props.theme.userSelect};
+  }
+
+  :-moz-placeholder {
+    color: ${(props) => props.theme.textInput.placeholderColor};
+    font-family: ${(props) => props.theme.fontFamily};
+    user-select: ${(props) => props.theme.userSelect};
+  }
+
+  ::-moz-placeholder {
+    color: ${(props) => props.theme.textInput.placeholderColor};
+    font-family: ${(props) => props.theme.fontFamily};
+    user-select: ${(props) => props.theme.userSelect};
+  }
+
+  :-ms-input-placeholder {
+    color: ${(props) => props.theme.textInput.placeholderColor};
+    font-family: ${(props) => props.theme.fontFamily};
+    user-select: ${(props) => props.theme.userSelect};
+  }
+
+  ::placeholder {
+    color: ${(props) => props.theme.textInput.placeholderColor};
+    font-family: ${(props) => props.theme.fontFamily};
+    user-select: ${(props) => props.theme.userSelect};
+  }
+
+  ${(props) => !props.withBorder && `border: none;`}
+`;
+
+StyledTextInput.defaultProps = { theme: Base };
+
+export default StyledTextInput;
--- a/packages/asc-web-components/src/components/text-input/text-input.js
+++ b/packages/asc-web-components/src/components/text-input/text-input.js
@ -0,0 +1,69 @@
+import React from "react";
+import PropTypes from "prop-types";
+import equal from "fast-deep-equal/react";
+import { Base } from "../../themes";
+import StyledTextInput from "./styled-text-input";
+
+
+
+class TextInput extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !equal(this.props, nextProps);
+  }
+
+  render() {
+    // console.log(`TextInput render id=${this.props.id}`);
+
+    return <StyledTextInput {...this.props} />;
+  }
+}
+
+TextInput.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  type: PropTypes.oneOf(["text", "password", "email"]),
+  value: PropTypes.string.isRequired,
+  maxLength: PropTypes.number,
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.number,
+  mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+  keepCharPositions: PropTypes.bool,
+
+  size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
+  scale: PropTypes.bool,
+
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+
+  isAutoFocussed: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  hasError: PropTypes.bool,
+  hasWarning: PropTypes.bool,
+  autoComplete: PropTypes.string,
+
+  className: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+
+  fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  isBold: PropTypes.bool,
+};
+
+TextInput.defaultProps = {
+  type: "text",
+  value: "",
+  maxLength: 255,
+  size: "base",
+  theme: Base,
+  scale: false,
+  tabIndex: -1,
+  hasError: false,
+  hasWarning: false,
+  autoComplete: "off",
+  withBorder: true,
+  keepCharPositions: false,
+  isBold: false,
+};
+
+export default TextInput;
--- a/packages/asc-web-components/src/themes/base.js
+++ b/packages/asc-web-components/src/themes/base.js
@ -32,8 +32,8 @@ const {
 const Base = {
  // color: black,
  // backgroundColor: white,
-   fontFamily: "Open Sans, sans-serif, Arial",
-   fontSize: "30px",
+  fontFamily: "Open Sans, sans-serif, Arial",
+  fontSize: "30px",

  // text: {
  //   color: black,
@ -96,8 +96,7 @@ const Base = {
      primary: white,
      disabled: grayMid,
    },
-    baseHover: "red",
-    primaryHover: "green",
+
    backgroundColor: {
      base: white,
      baseHover: white,
@ -200,7 +199,7 @@ const Base = {
    disableColor: "#A3A9AE",

    backgroundColor: white,
-    disableBackgroundColor: "#F8F9F9",
+    disableBackgroundColor: grayLight,

    width: {
      base: "173px",
@ -215,26 +214,27 @@ const Base = {
    boxSizing: "border-box",
    border: "solid 1px",

-    borderColor: "#D0D5DA",
-    errorBorderColor: "#c30",
-    warningBorderColor: "#f1ca92",
-    disabledBorderColor: "#ECEEF1",
+    borderColor: grayMid,
+    errorBorderColor: red,
+    warningBorderColor: warningColor,
+    disabledBorderColor: grayLightMid,

-    hoverBorderColor: "#A3A9AE",
-    hoverErrorBorderColor: "#c30",
-    hoverWarningBorderColor: "#f1ca92",
-    hoverDisabledBorderColor: "#ECEEF1",
+    hoverBorderColor: gray,
+    hoverErrorBorderColor: red,
+    hoverWarningBorderColor: warningColor,
+    hoverDisabledBorderColor: grayLightMid,

-    focusBorderColor: "#2DA7DB",
-    focusErrorBorderColor:  "#c30",
-    focusWarningBorderColor: "#f1ca92",
-    focusDisabledBorderColor: "#ECEEF1",
+    focusBorderColor: blueMain,
+    focusErrorBorderColor: red,
+    focusWarningBorderColor: warningColor,
+    focusDisabledBorderColor: grayLightMid,
  },

  textInput: {
    fontWeight: "normal",
-    placeholderColor: "#333333",
-    disablePlaceholderColor: "#A3A9AE",
+    userSelect: "none",
+    placeholderColor: gray,
+    disablePlaceholderColor: grayMid,

    transition: "all 0.2s ease 0s",
    appearance: "none",
@ -242,13 +242,14 @@ const Base = {
    flex: "1 1 0%",
    outline: "none",
    overflow: "hidden",
+    opacity: "1",

    lineHeight: {
      base: "20px",
      middle: "20px",
      big: "20px",
      huge: "21px",
-      large:"20px"
+      large: "20px",
    },

    fontSize: {
@ -256,7 +257,7 @@ const Base = {
      middle: "14px",
      big: "16px",
      huge: "18px",
-      large: "16px"
+      large: "16px",
    },

    padding: {
@ -264,7 +265,7 @@ const Base = {
      middle: "8px 12px",
      big: "8px 16px",
      huge: "8px 20px",
-      large: "11px 15px"
+      large: "11px 15px",
    },
  },

@ -452,27 +453,27 @@ const Base = {
  //     fillColor: gray,
  //   },

-    // button: {
-    //   height: "18px",
-    //   heightWithBorder: "32px",
-    //   paddingLeft: "8px",
+  // button: {
+  //   height: "18px",
+  //   heightWithBorder: "32px",
+  //   paddingLeft: "8px",

-    //   color: black,
-    //   disabledColor: grayMid,
-    //   background: white,
-    //   backgroundWithBorder: "none",
+  //   color: black,
+  //   disabledColor: grayMid,
+  //   background: white,
+  //   backgroundWithBorder: "none",

-    //   border: `1px solid ${grayMid}`,
-    //   borderRadius: "3px",
-    //   borderColor: blueMain,
+  //   border: `1px solid ${grayMid}`,
+  //   borderRadius: "3px",
+  //   borderColor: blueMain,

-    //   disabledBorderColor: grayLightMid,
-    //   disabledBackground: grayLight,
+  //   disabledBorderColor: grayLightMid,
+  //   disabledBackground: grayLight,

-    //   hoverBorderColor: gray,
-    //   hoverBorderColorOpen: blueMain,
-    //   hoverDisabledBorderColor: grayLightMid,
-    // },
+  //   hoverBorderColor: gray,
+  //   hoverBorderColorOpen: blueMain,
+  //   hoverDisabledBorderColor: grayLightMid,
+  // },

  //   label: {
  //     marginRightWithBorder: "8px",