legion-phoenix-dates
Version:
Legion UI date component
56 lines (55 loc) • 3.46 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { memo } from 'react';
import { RangePicker } from 'rc-picker';
import dayjsGenerateConfig from './generator/dayjs';
import idID from './locale/id_ID';
import Styles from './picker-global-styles';
import { Wrapper } from './picker-style';
import { IconLeft, IconRight, IconClear, IconsLeft, IconsRight } from './icons';
var DateRangePickerComponent = function (_a) {
var _b = _a.generateConfig, generateConfig = _b === void 0 ? dayjsGenerateConfig : _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 ? idID : _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 = __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.useRef(null);
var props = __assign(__assign({ generateConfig: generateConfig, locale: locale, prevIcon: React.createElement(IconLeft, null), superPrevIcon: React.createElement(IconsLeft, null), nextIcon: React.createElement(IconRight, null), superNextIcon: React.createElement(IconsRight, null), clearIcon: React.createElement(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.createElement(Wrapper, { className: classNames, ref: ref, "data-testid": 'legion-daterangepicker', padding: padding, id: id },
label && (React.createElement("label", { className: 'legion-picker__label', htmlFor: id }, label)),
React.createElement("span", { className: 'legion-picker__inner' },
iconLeft && (React.createElement("span", { className: 'legion-picker__icon', "aria-hidden": 'true' }, iconLeft)),
React.createElement("span", { className: 'legion-picker__base' },
React.createElement(Styles, null),
React.createElement(RangePicker, __assign({ ref: rangePickerRef, disabled: disabled }, props)))),
message && React.createElement("span", { className: 'legion-picker__message' }, message),
hint && React.createElement("span", { className: 'legion-picker__hint' }, hint)));
};
var DateRangePicker = memo(DateRangePickerComponent);
export default DateRangePicker;