legion-phoenix-dates
Version:
Legion UI date component
57 lines (56 loc) • 3.75 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var rc_picker_1 = tslib_1.__importDefault(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 DatepickerComponent = 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.className, className = _e === void 0 ? '' : _e, _f = _a.locale, locale = _f === void 0 ? id_ID_1["default"] : _f, _g = _a.size, size = _g === void 0 ? 'md' : _g, iconLeft = _a.iconLeft, disabled = _a.disabled, message = _a.message, padding = _a.padding, label = _a.label, block = _a.block, hint = _a.hint, ref = _a.ref, id = _a.id, rest = tslib_1.__rest(_a, ["generateConfig", "variant", "status", "className", "locale", "size", "iconLeft", "disabled", "message", "padding", "label", "block", "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 dateProps = 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), 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-datepicker',
"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-datepicker', 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["default"], tslib_1.__assign({ disabled: disabled }, dateProps)))),
message && react_1["default"].createElement("span", { className: 'legion-picker__message' }, message),
hint && react_1["default"].createElement("span", { className: 'legion-picker__hint' }, hint)));
};
var Datepicker = (0, react_1.memo)(DatepickerComponent);
exports["default"] = Datepicker;