react-base-guide/lib/components/select/selected.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 ElementContainer = styled_components_1.default.div `
  display: block;
  position: relative;
  box-sizing: border-box;
  background: ${p => p.disabled ? p.theme.palette.element.disabled : p.theme.palette.background.primary};
  cursor: text;
  pointer-events: ${p => p.disabled ? "none" : "all"};
  user-select: none;
  width: 100%;
  min-height: 36px;
  padding: 5px 10px 0;
  border: 1px solid ${p => p.theme.palette.element.border};
  border-radius: ${p => p.theme.radius.element};
  outline: none;
  transition: border 0.3s;
  
  &:hover, &:focus {
    border: 1px solid ${p => p.theme.palette.element.primary};
  }
`;
const Element = styled_components_1.default.div `
  display: inline-block;
  box-sizing: border-box;
  height: 28px;
  padding: 0 8px;
  border-radius: ${p => p.theme.radius.element};
  margin-right: 8px;
  margin-bottom: 5px;
  background: ${p => p.theme.palette.background.secondary};
  color: ${p => p.theme.palette.text.primary};
`;
const ElementValue = styled_components_1.default.span `
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  line-height: 28px;
`;
const DeleteLink = styled_components_1.default.a `
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  line-height: 28px;
  color: ${p => p.theme.palette.text.primary};
  height: 100%;
  opacity: 0.4;
  transition: opacity 0.3s;
  margin-left: 5px;

  &:hover {
    opacity: 1;
  }
`;
const rowClick = (e, onClick) => {
    e.preventDefault();
    e.stopPropagation();
    onClick();
};
const Selected = ({ rows, disabled }) => ((0, jsx_runtime_1.jsx)(ElementContainer, Object.assign({ disabled: disabled }, { children: rows && rows.filter(row => row.selected).map((row, key) => ((0, jsx_runtime_1.jsxs)(Element, { children: [(0, jsx_runtime_1.jsx)(ElementValue, { children: row.value }), (0, jsx_runtime_1.jsx)(DeleteLink, Object.assign({ onClick: e => rowClick(e, row.onClick) }, { children: "\u00D7" }))] }, key))) })));
exports.default = Selected;
//# sourceMappingURL=selected.js.map