legion-phoenix-dates
Version:
Legion UI date component
58 lines (57 loc) • 3.92 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var rc_picker_1 = require("rc-picker");
var dayjs_1 = tslib_1.__importDefault(require("./generator/dayjs"));
var id_ID_1 = tslib_1.__importDefault(require("./locale/id_ID"));
var picker_global_styles_1 = tslib_1.__importDefault(require("./picker-global-styles"));
var picker_style_1 = require("./picker-style");
var icons_1 = require("./icons");
var DateRangePickerComponent = function (_a) {
var _b = _a.generateConfig, generateConfig = _b === void 0 ? dayjs_1["default"] : _b, _c = _a.variant, variant = _c === void 0 ? 'outline' : _c, _d = _a.status, status = _d === void 0 ? 'normal' : _d, _e = _a.separator, separator = _e === void 0 ? 'To' : _e, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.locale, locale = _g === void 0 ? id_ID_1["default"] : _g, _h = _a.size, size = _h === void 0 ? 'md' : _h, disabled = _a.disabled, iconLeft = _a.iconLeft, message = _a.message, padding = _a.padding, block = _a.block, label = _a.label, hint = _a.hint, ref = _a.ref, id = _a.id, rest = tslib_1.__rest(_a, ["generateConfig", "variant", "status", "separator", "className", "locale", "size", "disabled", "iconLeft", "message", "padding", "block", "label", "hint", "ref", "id"]);
var fontSize;
var textFieldSize;
switch (size) {
case 'sm':
fontSize = 12;
textFieldSize = 16;
break;
case 'lg':
fontSize = 16;
textFieldSize = 24;
break;
default:
fontSize = 14;
textFieldSize = 20;
break;
}
var rangePickerRef = react_1["default"].useRef(null);
var props = tslib_1.__assign(tslib_1.__assign({ generateConfig: generateConfig, locale: locale, prevIcon: react_1["default"].createElement(icons_1.IconLeft, null), superPrevIcon: react_1["default"].createElement(icons_1.IconsLeft, null), nextIcon: react_1["default"].createElement(icons_1.IconRight, null), superNextIcon: react_1["default"].createElement(icons_1.IconsRight, null), clearIcon: react_1["default"].createElement(icons_1.IconClear, null), separator: separator, prefixCls: 'legion-picker' }, rest), { style: {
lineHeight: "".concat(textFieldSize, "px"),
fontSize: fontSize
} });
var cssDisabled = disabled ? 'legion-picker--disabled' : '';
var cssBlock = block ? 'legion-picker--block' : '';
var classNames = [
'legion-daterangepicker',
"legion-picker--".concat(variant, "-").concat(status),
"legion-picker--".concat(size),
cssBlock,
cssDisabled,
className,
]
.join(' ')
.trim();
return (react_1["default"].createElement(picker_style_1.Wrapper, { className: classNames, ref: ref, "data-testid": 'legion-daterangepicker', padding: padding, id: id },
label && (react_1["default"].createElement("label", { className: 'legion-picker__label', htmlFor: id }, label)),
react_1["default"].createElement("span", { className: 'legion-picker__inner' },
iconLeft && (react_1["default"].createElement("span", { className: 'legion-picker__icon', "aria-hidden": 'true' }, iconLeft)),
react_1["default"].createElement("span", { className: 'legion-picker__base' },
react_1["default"].createElement(picker_global_styles_1["default"], null),
react_1["default"].createElement(rc_picker_1.RangePicker, tslib_1.__assign({ ref: rangePickerRef, disabled: disabled }, props)))),
message && react_1["default"].createElement("span", { className: 'legion-picker__message' }, message),
hint && react_1["default"].createElement("span", { className: 'legion-picker__hint' }, hint)));
};
var DateRangePicker = (0, react_1.memo)(DateRangePickerComponent);
exports["default"] = DateRangePicker;