@bizhermit/react-sdk/elements/inputs/date-box.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,a)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useDateBox=void 0;const datetime_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/datetime-utils")),string_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/string-utils")),react_1=__importStar(require("react")),value_1=__importDefault(require("../../hooks/value")),css_var_1=__importStar(require("../../styles/css-var")),input_style_1=__importStar(require("../../styles/input-style")),jsx_style_1=__importDefault(require("../../styles/jsx-style")),input_1=require("../../utils/input"),icon_1=__importDefault(require("../icon")),popup_1=__importStar(require("../../popups/popup")),date_picker_1=__importStar(require("./date-picker")),cn="bh-dtb",DateBox=react_1.default.forwardRef(((e,t)=>{const r=(0,react_1.useRef)();(0,react_1.useImperativeHandle)(t,(()=>r.current));const n=e.$mode??"ymd",a=(0,react_1.useRef)(),u=(0,react_1.useRef)(),c=(0,react_1.useRef)(),l=(0,date_picker_1.useDatePicker)(),s=(0,popup_1.usePopup)(),i=(0,react_1.useRef)({}),d=()=>{switch(n){case"y":if(null!=i.current.y)return new Date(i.current.y,0,1);break;case"ym":if(null!=i.current.y||null!=i.current.m){const e=new Date;return new Date(i.current.y??e.getFullYear(),i.current.m??e.getMonth(),1)}break;default:if(null!=i.current.y||null!=i.current.m||null!=i.current.d){const e=new Date;return new Date(i.current.y??e.getFullYear(),i.current.m??e.getMonth(),i.current.d??e.getDate())}}},o=t=>{if(null==t)return{date:t,change:!1};let r;if(e.$rangeFrom&&t){const n=datetime_utils_1.default.convert(e.$rangeFrom);t.getTime()<n.getTime()&&(r=datetime_utils_1.default.removeTime(n))}if(e.$rangeTo&&t){const n=datetime_utils_1.default.convert(e.$rangeTo);t.getTime()>n.getTime()&&(r=datetime_utils_1.default.removeTime(n))}return r?{date:r,change:!0}:{date:t,change:!1}},_=e=>{const t=datetime_utils_1.default.convert(e);if(null==t)return a.current&&(a.current.value=""),u.current&&(u.current.value=""),c.current&&(c.current.value=""),void(i.current={});a.current?a.current.value=String(i.current.y=t.getFullYear()):i.current.y=void 0,u.current?u.current.value=String((i.current.m=t.getMonth())+1):i.current.m=0,c.current?c.current.value=String(i.current.d=t.getDate()):i.current.d=1},{val:f,set:m,buf:p}=(0,value_1.default)(e,{effect:_}),y=()=>{e.$disabled||e.$readOnly||s.show({anchor:r.current})},g=()=>{switch(s.hide(),n){case"y":a.current.focus?.();break;case"ym":u.current.focus?.();break;default:c.current.focus?.()}},$=()=>{const{date:t,change:r}=o(d());if(r)_(p.current);else switch(null==t&&_(void 0),e.$dataType){case"date":m.current(t);break;case"number":m.current(t.getMilliseconds());break;default:m.current(datetime_utils_1.default.format(t,"yyyy-MM-dd"))}},b=()=>{switch(n){case"y":null==i.current.y&&(i.current.y=(new Date).getFullYear()),i.current.m=0,i.current.d=1;break;case"ym":null==i.current.y&&(i.current.y=(new Date).getFullYear()),null==i.current.m&&(i.current.m=(new Date).getMonth()),i.current.d=1;break;default:null==i.current.y&&(i.current.y=(new Date).getFullYear()),null==i.current.m&&(i.current.m=(new Date).getMonth()),null==i.current.d&&(i.current.d=(new Date).getDate())}const e=o(d()).date;_(e)};return(0,react_1.useEffect)((()=>{_(f)}),[n]),(0,react_1.useEffect)((()=>{e.$hook?._set({focus:()=>(()=>{switch(n){case"y":a.current?.focus();break;case"ym":u.current?.focus();break;default:c.current?.focus()}})(),getValue:()=>p.current,setValue:e=>m.current(e),showPicker:()=>s.show({anchor:r.current})})}),[e.$hook?._set,n]),react_1.default.createElement("div",{...(0,input_1.inputAttributes)(e,cn),ref:r,"data-t":"f","data-v":null!=f},react_1.default.createElement("div",{className:`${input_style_1.inputCn}_fld ${cn}_fld`,onBlur:e=>{e.relatedTarget!==a.current&&e.relatedTarget!==u.current&&e.relatedTarget!==c.current&&$()}},react_1.default.createElement("input",{className:`${cn}-y`,ref:a,type:"text",readOnly:e.$readOnly||e.$notInputText,disabled:e.$disabled,maxLength:4,onChange:e=>{return t=e.currentTarget.value,void(isNumericOrEmpty(t)?(i.current.y=""===t?void 0:Number(t),4===t.length&&u.current?.focus()):a.current.value=String(i.current.y??""));var t},onKeyDown:t=>{switch(t.key){case"F2":y();break;case"Enter":$();break;case"ArrowUp":null==i.current.y?i.current.y=(new Date).getFullYear():i.current.y++,b();break;case"ArrowDown":null==i.current.y?i.current.y=(new Date).getFullYear():i.current.y--,b();break;case"Tab":if(e.$disabled||e.$readOnly)return;t.shiftKey||"y"===n?$():t.stopPropagation()}},onFocus:e=>e.currentTarget.select()}),"y"!==n?react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("span",{className:`${cn}-sep`},"/"),react_1.default.createElement("input",{className:`${cn}-m`,ref:u,type:"text",readOnly:e.$readOnly||e.$notInputText,disabled:e.$disabled,maxLength:2,onChange:e=>{return t=e.currentTarget.value,void(isNumericOrEmpty(t)?(i.current.m=""===t?void 0:Number(t)-1,(2===t.length||i.current.m>0)&&c.current?.focus()):u.current.value=String(i.current.m??""));var t},onKeyDown:t=>{switch(t.key){case"F2":y();break;case"Enter":$();break;case"Backspace":0===t.currentTarget.value.length&&a.current?.focus();break;case"ArrowUp":null==i.current.m?i.current.m=(new Date).getMonth():i.current.m++,b();break;case"ArrowDown":null==i.current.m?i.current.m=(new Date).getMonth():i.current.m--,b();break;case"Tab":if(e.$disabled||e.$readOnly)return;"ymd"===n||t.shiftKey?t.stopPropagation():$()}},onFocus:e=>e.currentTarget.select()})):react_1.default.createElement(react_1.default.Fragment,null),"ymd"===n?react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("span",{className:`${cn}-sep`},"/"),react_1.default.createElement("input",{className:`${cn}-d`,ref:c,type:"text",readOnly:e.$readOnly||e.$notInputText,disabled:e.$disabled,maxLength:2,onChange:e=>{return t=e.currentTarget.value,void(isNumericOrEmpty(t)?i.current.d=""===t?void 0:Number(t):c.current.value=String(i.current.d??""));var t},onKeyDown:t=>{switch(t.key){case"F2":y();break;case"Enter":$();break;case"Backspace":0===t.currentTarget.value.length&&u.current?.focus();break;case"ArrowUp":null==i.current.d?i.current.d=(new Date).getDate():i.current.d++,b();break;case"ArrowDown":null==i.current.d?i.current.d=(new Date).getDate():i.current.d--,b();break;case"Tab":if(e.$disabled||e.$readOnly)return;t.shiftKey?t.stopPropagation():$()}},onFocus:e=>e.currentTarget.select()})):react_1.default.createElement(react_1.default.Fragment,null)),e.$hidePickerButton||e.$disabled||e.$readOnly?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:`${input_style_1.inputCn}_btn`,tabIndex:-1,onClick:()=>y()},react_1.default.createElement(icon_1.default,{$image:"calendar"})),e.$hideClearButton||e.$disabled||e.$readOnly?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:`${input_style_1.inputCn}_btn`,tabIndex:-1,onClick:()=>{_(void 0),m.current(void 0)}},react_1.default.createElement(icon_1.default,{$image:"cross"})),e.$disabled||e.$readOnly?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement(popup_1.default,{$hook:s,$position:{x:"inner",y:"outer"},$showed:()=>{l.focus(),l.scrollToCurrent()}},react_1.default.createElement(date_picker_1.default,{$hook:l,$mode:e.$mode,$rangeFrom:e.$rangeFrom,$rangeTo:e.$rangeTo,$dataType:e.$dataType,$value:f,$clickNegative:()=>{g()},$clickPositive:e=>{m.current(e),g()},onClick:e=>e.stopPropagation()})),input_style_1.default,Style)})),isNumericOrEmpty=e=>!!string_utils_1.default.isEmpty(e)||/^[0-9]+$/.test(e),useDateBox=()=>{const e=(0,react_1.useRef)({});return{focus:(0,react_1.useCallback)((()=>{e.current.focus?.()}),[]),getValue:(0,react_1.useCallback)((()=>e.current.getValue?.()),[]),setValue:(0,react_1.useCallback)((t=>{e.current.setValue?.(t)}),[]),showPicker:(0,react_1.useCallback)((()=>{e.current.showPicker?.()}),[]),_set:(0,react_1.useCallback)((t=>{e.current=t}),[])}};exports.useDateBox=useDateBox;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn},(()=>`\n.${input_style_1.inputCn}.${cn} {\n  width: unset;\n}\n.${cn}_fld {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  flex: none;\n  height: 100%;\n  min-width: 0px;\n}\n.${cn} input {\n  text-align: center;\n  flex: none;\n  padding-left: 0px;\n  padding-right: 0px;\n}\n.${cn}-y {\n  width: 46px;\n}\n.${cn}-m,\n.${cn}-d {\n  width: 28px;\n}\n.${cn}-sep {\n  padding-top: 2px;\n  font-size: calc(${css_var_1.default.fs} * 0.9);\n  opacity: 0;\n}\n.${cn}[data-m="e"]:focus-within > .${cn}_fld > .${cn}-sep,\n.${cn}[data-v="true"] > .${cn}_fld > .${cn}-sep {\n  opacity: 1;\n}\n`));exports.default=DateBox;