react-day-picker
Version:
Customizable Date Picker for React
27 lines (26 loc) • 1.7 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dropdown = Dropdown;
const react_1 = __importDefault(require("react"));
const UI_js_1 = require("../UI.js");
const useDayPicker_js_1 = require("../useDayPicker.js");
/**
* Render a dropdown component for navigation in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
function Dropdown(props) {
const { options, className, ...selectProps } = props;
const { classNames, components, styles } = (0, useDayPicker_js_1.useDayPicker)();
const cssClassSelect = [classNames[UI_js_1.UI.Dropdown], className].join(" ");
const selectedOption = options?.find(({ value }) => value === selectProps.value);
return (react_1.default.createElement("span", { "data-disabled": selectProps.disabled, className: classNames[UI_js_1.UI.DropdownRoot], style: styles?.[UI_js_1.UI.DropdownRoot] },
react_1.default.createElement(components.Select, { className: cssClassSelect, ...selectProps }, options?.map(({ value, label, disabled }) => (react_1.default.createElement(components.Option, { key: value, value: value, disabled: disabled }, label)))),
react_1.default.createElement("span", { className: classNames[UI_js_1.UI.CaptionLabel], style: styles?.[UI_js_1.UI.CaptionLabel], "aria-hidden": true },
selectedOption?.label,
react_1.default.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI_js_1.UI.Chevron], style: styles?.[UI_js_1.UI.Chevron] }))));
}