react-base-guide/lib/components/select/row.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 checkbox_1 = __importDefault(require("../checkbox"));
const getBackground = p => {
    if (p.$selected) {
        return `background: ${p.theme.palette.element.primary}`;
    }
    if (p.$hovered) {
        return `background: ${p.theme.palette.background.secondary}`;
    }
    return `background: ${p.theme.palette.background.primary}`;
};
const Container = styled_components_1.default.div `
  display: flex;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  padding: 0 12px;
  border-radius: ${p => p.theme.radius.element};
  margin-bottom: 1px;
  ${p => getBackground(p)};
  
  &:hover {
    background: ${p => p.$selected ? p.theme.palette.element.primary : p.theme.palette.background.secondary};
  }
`;
const Text = styled_components_1.default.div `
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: ${p => p.selected ? p.theme.palette.text.contrast : p.theme.palette.text.primary};
  font-size: 14px;
`;
const DisabledCheckbox = (0, styled_components_1.default)(checkbox_1.default) `
  pointer-events: none;
`;
const Row = (props) => ((0, jsx_runtime_1.jsxs)(Container, Object.assign({ className: props.hovered ? "hovered" : undefined, "$selected": props.selected, "$hovered": props.hovered, onMouseDown: props.onClick, onMouseEnter: props.onMouseEnter }, { children: [(0, jsx_runtime_1.jsx)(DisabledCheckbox, { checked: props.selected, readOnly: true, onChange: () => { } }), (0, jsx_runtime_1.jsx)(Text, Object.assign({ selected: props.selected }, { children: props.value }))] })));
exports.default = Row;
//# sourceMappingURL=row.js.map