DocSpace-buildtools/packages/asc-web-components/src/components/combobox/sub-components/combo-button.js

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { Icons } from "../../icons";
import Text from "../../text";

const StyledComboButton = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  height: ${(props) => (props.noBorder ? `18px` : `30px`)};
  width: ${(props) =>
    (props.scaled && "100%") ||
    (props.size === "base" && "173px") ||
    (props.size === "middle" && "300px") ||
    (props.size === "big" && "350px") ||
    (props.size === "huge" && "500px") ||
    (props.size === "content" && "fit-content")};

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  padding-left: 8px;

  background: ${(props) => (!props.noBorder ? "#FFFFFF" : "none")};

  color: ${(props) => (props.isDisabled ? "#D0D5DA" : "#333333")};

  box-sizing: border-box;

  ${(props) =>
    !props.noBorder &&
    `
    border: 1px solid #D0D5DA;
    border-radius: 3px;
  `}

  border-color: ${(props) => props.isOpen && "#2DA7DB"};

  ${(props) =>
    props.isDisabled &&
    !props.noBorder &&
    `
    border-color: #ECEEF1;
    background: #F8F9F9;
  `}

  ${(props) =>
    !props.noBorder &&
    `
    height: 32px;
  `}

  :hover {
    border-color: ${(props) => (props.isOpen ? "#2DA7DB" : "#A3A9AE")};
    cursor: ${(props) =>
      props.isDisabled || (!props.containOptions && !props.withAdvancedOptions)
        ? "default"
        : "pointer"};

    ${(props) =>
      props.isDisabled &&
      `
      border-color: #ECEEF1;
    `}
  }
  .combo-button-label {
    margin-right: ${(props) => (props.noBorder ? `4px` : `8px`)};
    color: ${(props) => (props.isDisabled ? "#D0D5DA" : "#333333")};
    max-width: 175px;
    ${(props) =>
      props.noBorder &&
      `
      line-height: 15px;
      text-decoration: underline dashed transparent;
    `}

    ${(props) =>
      props.isOpen &&
      props.noBorder &&
      `
      text-decoration: underline dashed;
    `};
  }
  .combo-button-label:hover {
    ${(props) =>
      props.noBorder &&
      !props.isDisabled &&
      `
      text-decoration: underline dashed;
    `}
  }
`;

const StyledOptionalItem = styled.div`
  margin-right: 8px;

  path {
    fill: ${(props) => props.color && props.color};
  }
`;

const StyledIcon = styled.div`
  margin: -6px 8px 0px 0px;
  width: 16px;
  height: 16px;
`;

const StyledArrowIcon = styled.div`
  display: flex;
  align-self: start;
  width: ${(props) => (props.needDisplay ? "8px" : "0px")};
  flex: 0 0 ${(props) => (props.needDisplay ? "8px" : "0px")};
  margin-top: ${(props) => (props.noBorder ? `5px` : `12px`)};
  margin-right: ${(props) => (props.needDisplay ? "8px" : "0px")};
  margin-left: ${(props) => (props.needDisplay ? "auto" : "0px")};

  ${(props) =>
    props.isOpen &&
    `
    transform: scale(1, -1);
  `}
`;

class ComboButton extends React.Component {
  render() {
    const {
      noBorder,
      onClick,
      isDisabled,
      innerContainer,
      innerContainerClassName,
      selectedOption,
      optionsLength,
      withOptions,
      withAdvancedOptions,
      isOpen,
      scaled,
      size,
    } = this.props;

    const boxIconColor = isDisabled ? "#D0D5DA" : "#333333";
    const arrowIconColor = isDisabled ? "#D0D5DA" : "#A3A9AE";
    const defaultIconColor = selectedOption.default
      ? arrowIconColor
      : boxIconColor;

    return (
      <StyledComboButton
        isOpen={isOpen}
        isDisabled={isDisabled}
        noBorder={noBorder}
        containOptions={optionsLength}
        withAdvancedOptions={withAdvancedOptions}
        onClick={onClick}
        scaled={scaled}
        size={size}
        className="combo-button"
      >
        {innerContainer && (
          <StyledOptionalItem
            className={innerContainerClassName}
            color={defaultIconColor}
          >
            {innerContainer}
          </StyledOptionalItem>
        )}
        {selectedOption && selectedOption.icon && (
          <StyledIcon className="forceColor">
            {React.createElement(Icons[selectedOption.icon], {
              size: "scale",
              color: defaultIconColor,
              isfill: true,
            })}
          </StyledIcon>
        )}
        <Text
          noBorder={noBorder}
          title={selectedOption.label}
          as="div"
          truncate={true}
          fontWeight={600}
          className="combo-button-label"
          //color={selectedOption.default ? arrowIconColor +' !important' : boxIconColor}
        >
          {selectedOption.label}
        </Text>
        <StyledArrowIcon
          needDisplay={withOptions || withAdvancedOptions}
          noBorder={noBorder}
          isOpen={isOpen}
          className="combo-buttons_arrow-icon"
        >
          {(withOptions || withAdvancedOptions) &&
            React.createElement(Icons["ExpanderDownIcon"], {
              size: "scale",
              color:
                selectedOption.arrowIconColor && !isDisabled
                  ? selectedOption.arrowIconColor
                  : arrowIconColor,
              isfill: true,
            })}
        </StyledArrowIcon>
      </StyledComboButton>
    );
  }
}

ComboButton.propTypes = {
  noBorder: PropTypes.bool,
  isDisabled: PropTypes.bool,
  selectedOption: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.object),
    PropTypes.object,
  ]),
  withOptions: PropTypes.bool,
  optionsLength: PropTypes.number,
  withAdvancedOptions: PropTypes.bool,
  innerContainer: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
  innerContainerClassName: PropTypes.string,
  isOpen: PropTypes.bool,
  size: PropTypes.oneOf(["base", "middle", "big", "huge", "content"]),
  scaled: PropTypes.bool,
  onClick: PropTypes.func,
};

ComboButton.defaultProps = {
  noBorder: false,
  isDisabled: false,
  withOptions: true,
  withAdvancedOptions: false,
  innerContainerClassName: "innerContainer",
  isOpen: false,
  size: "content",
  scaled: false,
};

export default ComboButton;