@cap3/capitano-components
Version:
# <div style="color: crimson;">ALPHA DISCLAIMER</div>
112 lines • 6.46 kB
JavaScript
"use strict";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const downshift_1 = require("downshift");
const react_popper_1 = require("react-popper");
const Input_1 = require("../../atoms/Input/Input");
const shadows_1 = require("../../atoms/basics/shadows");
const capitano_theme_1 = require("@cap3/capitano-theme");
const formElementHelpers_1 = require("../../atoms/basics/formElementHelpers");
const emotion_1 = require("emotion");
const atoms_1 = require("../../atoms");
const polished_1 = require("polished");
const SelectWrapper = capitano_theme_1.styled("div")({
position: "relative",
display: "flex",
alignItems: "center",
flexShrink: 1,
cursor: "pointer",
});
const FlexWrapper = capitano_theme_1.styled("div")({ display: "flex" });
const PopupContainer = capitano_theme_1.styled("div")(({ theme, size, radius }) => {
const inputHeight = formElementHelpers_1.formElementHeight(size || "medium", theme);
const borderRadius = formElementHelpers_1.getFormElementBorderRadius(radius, inputHeight, theme);
const width = formElementHelpers_1.formElementWidth({ fixed: true });
return Object.assign({ overflow: "hidden", boxShadow: shadows_1.bottomShadow(2), borderRadius, borderTop: "none" }, width);
}, formElementHelpers_1.formElementBorderStyle);
const StyledInput = capitano_theme_1.styled(Input_1.Input)({
cursor: "pointer",
});
const dropDownIconClass = emotion_1.css({
position: "absolute",
right: 8,
});
const { ArrowUp, ArrowDown } = atoms_1.Icons;
const Option = capitano_theme_1.styled("div")(({ theme, selected, highlighted, size, odd }) => {
const oddColor = polished_1.getLuminance(theme.colors.layout.M90) > 0.5
? polished_1.mix(0.1, theme.colors.primary["900"], theme.colors.layout.M90)
: polished_1.mix(0.2, theme.colors.primary["50"], theme.colors.layout.M90);
return {
fontFamily: theme.typography.fontFamily.base,
fontSize: formElementHelpers_1.fontSizeForElementSize(size, theme),
fontWeight: selected ? 600 : 400,
backgroundColor: highlighted
? theme.colors.primary["500"]
: odd
? oddColor
: theme.colors.layout.M90,
color: highlighted
? theme.colors.textOnPrimary
: theme.colors.textOnBackground,
padding: `4px 8px`,
height: formElementHelpers_1.formElementHeight(size, theme),
display: "flex",
alignItems: "center",
};
});
const bottomBorderRadiusCleared = emotion_1.css({
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
});
const topBorderRadiusCleared = emotion_1.css({
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
});
class Select extends React.Component {
render() {
const _a = this.props, { items, onValueSelected, itemToString, renderItem, className, inputClassName, textInput, value, selectedItem, filterOnType } = _a, inputProps = __rest(_a, ["items", "onValueSelected", "itemToString", "renderItem", "className", "inputClassName", "textInput", "value", "selectedItem", "filterOnType"]);
const optionRenderer = renderItem || itemToString;
return (React.createElement(react_popper_1.Manager, null,
React.createElement(downshift_1.default, { selectedItem: selectedItem, onChange: onValueSelected, itemToString: itemToString }, ({ getInputProps, getItemProps, getLabelProps, isOpen, inputValue, highlightedIndex, selectedItem, getRootProps, getToggleButtonProps, closeMenu, }) => (React.createElement(FlexWrapper, Object.assign({}, getRootProps({ refKey: "innerRef" }), { className: className }),
React.createElement(SelectWrapper, Object.assign({}, getToggleButtonProps()),
React.createElement(react_popper_1.Reference, null, ({ ref }) => {
return (React.createElement(StyledInput, Object.assign({ labelProps: getLabelProps() }, inputProps, getInputProps(), { className: isOpen
? emotion_1.cx(inputClassName, bottomBorderRadiusCleared)
: inputClassName, disabled: !textInput, innerRef: ref, onBlur: closeMenu })));
}),
isOpen ? (React.createElement(ArrowUp, { className: dropDownIconClass, size: 24 })) : (React.createElement(ArrowDown, { className: dropDownIconClass, size: 24 })),
isOpen ? (React.createElement(react_popper_1.Popper, { modifiers: {
flip: { enabled: false },
inner: { enabled: false },
} }, (_a) => {
var { ref, style } = _a, popperProps = __rest(_a, ["ref", "style"]);
return (React.createElement(PopupContainer, Object.assign({}, popperProps, { style: Object.assign({}, style, { zIndex: 10 }), innerRef: elem => {
if (elem) {
ref(elem);
}
}, outlined: inputProps.outlined, size: inputProps.size, radius: inputProps.radius, className: emotion_1.cx(topBorderRadiusCleared) }), items
.filter(item => !filterOnType ||
!inputValue ||
itemToString(item).includes(inputValue))
.map((item, index) => {
const itemProps = getItemProps({
key: itemToString(item),
index,
item,
});
return (React.createElement(Option, Object.assign({ key: index, odd: index % 2 === 1, size: inputProps.size, highlighted: highlightedIndex === index, selected: selectedItem === item }, itemProps), optionRenderer(item)));
})));
})) : null))))));
}
}
exports.Select = Select;
//# sourceMappingURL=Select.js.map