react-email-builder
Version:
A simple React drag and drop email builder.
53 lines (52 loc) • 2.61 kB
JavaScript
import React from 'react';
import clsx from 'clsx';
import { Icon } from '../../components/Icon';
import { usePopover } from '../Popover/hooks';
import { getCss } from '../../utils';
import { Popover } from '../Popover';
export function Select({ options, value, placement, placeholder, clearable, onChange }) {
const selected = options.find((el) => el.value === value);
const { open, setOpen, popoverRef, triggerRef } = usePopover({
offset: 5,
placement: placement || 'bottom-end'
});
const css = getCss('Select', (ns) => ({
root: ns(),
clearable: ns('clearable'),
open: ns('open'),
text: ns('text'),
icon: ns('icon'),
option: ns('option'),
label: ns('label'),
check: ns('check'),
list: ns('list'),
caret: ns('caret'),
clear: ns('clear')
}));
return (React.createElement(React.Fragment, null,
React.createElement("div", { ref: triggerRef, className: clsx(css.root, {
[css.open]: open,
[css.clearable]: selected && clearable && !open
}), onClick: () => {
setOpen(!open);
} },
React.createElement("div", { className: css.text }, selected ? (selected.label ?? value) : (React.createElement("span", { style: { opacity: 0.65 } }, placeholder ?? 'Select'))),
React.createElement("div", { className: css.icon },
React.createElement("div", { className: css.caret },
React.createElement(Icon, { name: open ? 'caret-up' : 'caret-down' })),
selected && clearable ? (React.createElement("div", { className: css.clear, onClick: (e) => {
e.preventDefault();
e.stopPropagation();
onChange();
} },
React.createElement(Icon, { name: "clear" }))) : null)),
React.createElement(Popover, { open: open, popoverRef: popoverRef },
React.createElement("div", { className: css.list }, options.map((option) => (React.createElement("div", { className: css.option, key: option.value, onClick: () => {
if (option.value !== value) {
onChange(option.value);
}
setOpen(false);
} },
React.createElement("div", { className: css.label }, option.label),
React.createElement("div", { className: css.check }, option.value === value ? React.createElement(Icon, { name: "check" }) : null))))))));
}