react-base-guide/lib/components/dropdown/DropdownButton.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const arrow_1 = __importDefault(require("../../icons/arrow"));
const get_border_color_1 = __importDefault(require("../../utils/get-border-color"));
const ButtonStyled = styled_components_1.default.button `
  position: relative;
  height: 36px;
  width: 100%;
  outline: none;   
  cursor: pointer;
  user-select: none;
  padding: 0 35px 0 15px;
  border: 1px solid transparent;
  border-radius: ${p => p.theme.radius.element};
  background: ${p => p.disabled ? p.theme.palette.element.border : p.theme.palette.background.primary};
  color: ${p => p.theme.palette.text.primary};
  text-align: left;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border 0.3s;
  
  pointer-events: ${p => p.disabled ? "none" : "all"};

  & + fieldset {
    border: 1px solid ${p => (0, get_border_color_1.default)(p)};
  }

  &:hover {
    & + fieldset {
      border: 1px solid ${p => (0, get_border_color_1.default)(Object.assign(Object.assign({}, p), { hover: true }))};
    }
  }

  &:focus {
    & + fieldset {
      border: 1px solid ${p => (0, get_border_color_1.default)(Object.assign(Object.assign({}, p), { focus: true }))};
      + label {
        color: ${p => (0, get_border_color_1.default)(Object.assign(Object.assign({}, p), { focus: true }))};
      }
    }
  }
`;
const StyledArrow = (0, styled_components_1.default)(arrow_1.default) `
  display: block;
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  right: 12px;
  margin: auto;
`;
const ButtonText = styled_components_1.default.span `
  pointer-events: none;
`;
const DropdownButton = (props) => ((0, jsx_runtime_1.jsxs)(ButtonStyled, Object.assign({ onClick: props.onClick, disabled: props.disabled, type: "button" }, { children: [(0, jsx_runtime_1.jsx)(ButtonText, { children: props.children }), (0, jsx_runtime_1.jsx)(StyledArrow, { rotate: props.open ? "-180deg" : "0" })] })));
exports.default = DropdownButton;
//# sourceMappingURL=DropdownButton.js.map