UNPKG

koval-ui

Version:

React components collection with minimalistic design. Supports theming, layout, and input validation.

3 lines (2 loc) 2.17 kB
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("react"),T=require("classnames"),B=require("../../internal/Icons/IconCalendar.cjs"),E=require("../../internal/inputs/ValidationProps.cjs"),P=require("../../internal/inputs/useValidation.cjs"),_=require("../../internal/inputs/useRevalidateOnFormChange.cjs"),z=require("../../internal/inputs/useExternalValidation.cjs"),A=require("../../internal/inputs/useValidationIcon.cjs"),G=require("../../internal/hooks/useInternalId.cjs"),H=require("../../internal/hooks/useInternalRef.cjs"),n=require("./InputDate.module.css.cjs"),q=t.forwardRef(({id:V,className:g,placeholder:C="YYYY-MM-DD",disabled:b,value:d,onChange:I=()=>{},onFocus:f=()=>{},onBlur:h=()=>{},onKeyDown:j=()=>{},onKeyUp:y=()=>{},defaultValue:m,revalidateOnFormChange:N,validation:l,errorMessage:R,displayIcon:p=!0,...r},k)=>{const D=!!l||typeof r.min=="string"||typeof r.max=="string",i=G.useInternalId(V),s=t.useRef(null),{validateTextual:o,validity:x,setValidity:u}=P.useValidation({validation:l,hasValidators:D}),c=H.useInternalRef(k);z.useExternalValidation({errorMessage:R,inputRef:c,setValidity:u,validation:l}),_.useRevalidateOnFormChange(c,o,N);const F=A.useValidationIcon(x),v=d??m,w=t.useCallback(e=>{I(e),s!=null&&s.current&&(s.current.innerText=e.target.value)},[I]),Y=t.useCallback(()=>{u(E.ValidationState.error)},[u]),M=t.useCallback(e=>{f(e),e.target.showPicker()},[f]),O=t.useCallback(e=>{h(e)},[h]),S=t.useCallback(e=>{o(e)},[o]);return a.jsxs("div",{className:T(n.default.wrapper,{[n.default.withValidationIcon]:p},g),children:[a.jsxs("div",{className:n.default.toggle,children:[a.jsx("input",{...r,id:i,ref:c,className:n.default.input,type:"date",disabled:b,value:d,defaultValue:m,onChange:w,onInvalid:Y,onInput:S,onFocus:M,onBlur:O,onKeyUp:y,onKeyDown:j}),a.jsx("label",{htmlFor:i,className:n.default.icon,children:a.jsx(B.IconCalendar,{})})]}),a.jsx("label",{htmlFor:i,className:n.default.label,ref:s,children:v||C}),p&&x&&a.jsx(F,{className:n.default.validity})]})});q.displayName="InputDate";exports.InputDate=q; //# sourceMappingURL=InputDate.cjs.map