@itcase/ui-web 1.9.110 → 1.9.112
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Button_cjs_ConzdKae.js → Button_cjs_CDr9zTdB.js} +1 -1
- package/dist/{Button_es_Ob6KGKAf.js → Button_es_M2ryMLoI.js} +1 -1
- package/dist/DatePicker_cjs_Cd7wsJCG.js +1 -0
- package/dist/DatePicker_es_BhrZj2OP.js +1 -0
- package/dist/cjs/components/Button.js +1 -1
- package/dist/cjs/components/CookiesWarning.js +1 -1
- package/dist/cjs/components/DatePeriod.js +1 -1
- package/dist/cjs/components/DatePicker.js +1 -1
- package/dist/cjs/components/Dropzone.js +1 -1
- package/dist/cjs/components/InputNumber.js +1 -1
- package/dist/cjs/components/Notification.js +1 -1
- package/dist/cjs/components/Response.js +1 -1
- package/dist/components/Button.js +1 -1
- package/dist/components/CookiesWarning.js +1 -1
- package/dist/components/DatePeriod.js +1 -1
- package/dist/components/DatePicker.js +1 -1
- package/dist/components/Dropzone.js +1 -1
- package/dist/components/InputNumber.js +1 -1
- package/dist/components/Notification.js +1 -1
- package/dist/components/Response.js +1 -1
- package/dist/css/styles/bundles.css +18 -6
- package/dist/stories/DatePickerOverview.mdx +1 -1
- package/dist/types/components/Button/Button.js +1 -1
- package/dist/types/components/DatePicker/DatePicker.interface.d.ts +22 -28
- package/dist/types/components/DatePicker/DatePicker.js +3 -4
- package/dist/types/components/DatePicker/stories/DatePicker.stories.d.ts +10 -1
- package/dist/types/components/DatePicker/stories/DatePicker.stories.js +31 -33
- package/dist/types/components/DatePicker/stories/DatePickerClear.stories.d.ts +9 -1
- package/dist/types/components/DatePicker/stories/DatePickerClear.stories.js +20 -24
- package/dist/types/components/DatePicker/stories/DatePickerSize.stories.d.ts +8 -0
- package/dist/types/components/DatePicker/stories/DatePickerSize.stories.js +13 -24
- package/dist/types/components/DatePicker/stories/DatePickerStory.d.ts +2 -0
- package/dist/types/components/DatePicker/stories/DatePickerStory.js +18 -0
- package/dist/types/components/DatePicker/stories/DatePickerStyle.stories.d.ts +8 -0
- package/dist/types/components/DatePicker/stories/DatePickerStyle.stories.js +13 -29
- package/dist/types/components/DatePicker/stories/DatePickerWithButton.stories.d.ts +12 -1
- package/dist/types/components/DatePicker/stories/DatePickerWithButton.stories.js +30 -32
- package/package.json +2 -2
- package/dist/DatePicker_cjs_BnCUToKG.js +0 -1
- package/dist/DatePicker_es_CQ__CIKJ.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useCallback as o}from"react";import i from"clsx";import{useAppearanceConfig as n,useDevicePropsGenerator as t}from"@itcase/ui-core/hooks";import{B as a}from"../
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useCallback as o}from"react";import i from"clsx";import{useAppearanceConfig as n,useDevicePropsGenerator as t}from"@itcase/ui-core/hooks";import{B as a}from"../Button_es_M2ryMLoI.js";import{d as l}from"../default_es_CaWUd9iO.js";import"@itcase/ui-core/utils";import"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"../Loader_es_CwVQZ1L0.js";import"@itcase/common";const s={defaultPrimary:{fill:"surfaceSecondary",labelTextWeight:"400",borderColor:"surfaceBorderQuaternary",borderHover:"surfaceBorderHoverQuaternary",iconFill:"surfaceSecondary",iconFillHover:"surfaceHoverSecondary",iconFillIcon:"surfaceItemQuaternary",iconMinus:l.Form.Minus,iconPlus:l.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},u={errorPrimary:{fill:"errorTertiary",labelTextWeight:"400",borderColor:"errorBorderQuaternary",borderHover:"errorBorderHoverQuaternary",iconFill:"errorTertiary",iconFillHover:"errorHoverSecondary",iconFillIcon:"errorItemQuaternary",iconMinus:l.Form.Minus,iconPlus:l.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},c={requirePrimary:{fill:"warningTertiary",labelTextWeight:"400",borderColor:"warningBorderQuaternary",borderHover:"warningBorderHoverQuaternary",iconFill:"warningTertiary",iconFillHover:"warningHoverSecondary",iconFillIcon:"warningItemQuaternary",iconMinus:l.Form.Minus,iconPlus:l.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},m={...s,...u,...{successPrimary:{fill:"successTertiary",labelTextWeight:"400",borderColor:"successBorderQuaternary",borderHover:"successBorderHoverQuaternary",iconFill:"successTertiary",iconFillHover:"successHoverSecondary",iconFillIcon:"successItemQuaternary",iconMinus:l.Form.Minus,iconPlus:l.Form.Plus,inputNumberTextColor:"surfaceTextQuaternary"}},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},sizeXL:{size:"xl",iconSize:"24",inputNumberTextSize:"xl"},sizeL:{size:"l",iconSize:"24",inputNumberTextSize:"l"},sizeM:{size:"m",iconSize:"24",inputNumberTextSize:"m"},sizeS:{size:"s",iconSize:"24",inputNumberTextSize:"s"},solid:{borderColor:"none"},outlined:{fill:"none"},full:{borderColor:"none"},ghost:{fill:"none",borderColor:"none"},...c},d={appearance:m,setAppearance:e=>{d.appearance=e}},p=l=>{const{id:s,appearance:u,className:c,dataTestId:m,dataTour:p,type:b="custom",name:y,min:v=0,max:f=1/0,step:h=1,value:x=0,onChange:C}=l,F=o(e=>{const{event:r,mode:o="button",operation:i}=e;let n;if("input"===o)n=Number(r?.target.value);else{n=x+("minus"===i?-h:h)}if(n<v||n>f)return null;C?.(n)},[f,v,C,h,x]),_=n(u,d),T=t(l,_),{fillClass:S,fillHoverClass:z,borderColorClass:H,borderColorHoverClass:g,borderWidthClass:N,iconFill:Q,iconFillHover:P,iconFillIcon:I,iconMinus:M,iconPlus:$,iconShape:w,iconSize:B,inputNumberTextColorClass:L,inputNumberTextSizeClass:W,inputNumberTextWeightClass:j,shapeClass:k,sizeClass:X,widthClass:q}=T;return"native"===b?e("input",{id:String(s),type:"number",min:v,max:f,step:h,value:x,onChange:e=>F({event:e,mode:"input"})}):r("div",{id:String(s),className:i(c,"input-number","input-number__custom",H&&`border-color_${H}`,g&&`border-color_hover_${g}`,N&&`border-width_${N}`,S&&`fill_${S}`,z&&`fill_hover_${z}`,k&&`shape_${k}`,X&&`input-number_size_${X}`,q&&`width_${q}`),"data-testid":m+"Wrapper","data-tour":p,children:[e(a,{className:"input-number__icon",icon:M,iconFill:Q,iconFillHover:P,iconFillIcon:I,iconShape:w,iconSize:B,onClick:()=>F({operation:"minus"})}),e("input",{className:i(L&&`text-color_${L}`,W&&`text_size_${W}`,j&&`text-weight_${j}`),type:"number",min:v,max:f,"data-testid":m||(y?`${y}-input-number`:"input-number"),step:h,value:x,onChange:e=>F({event:e,mode:"input"})}),e(a,{className:"input-number__icon",icon:$,iconFill:Q,iconFillHover:P,iconFillIcon:I,iconShape:w,iconSize:B,onClick:()=>F({operation:"plus"})})]})};export{p as InputNumber,m as inputNumberAppearance};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"clsx";import{useAppearanceConfig as i,useDevicePropsGenerator as a,useStyles as t}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as s}from"@itcase/ui-core/utils";import{B as c}from"../
|
|
1
|
+
import{jsxs as e,jsx as r}from"react/jsx-runtime";import o from"clsx";import{useAppearanceConfig as i,useDevicePropsGenerator as a,useStyles as t}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as s}from"@itcase/ui-core/utils";import{B as c}from"../Button_es_M2ryMLoI.js";import{T as l,I as n}from"../primitives_es_BQqNcRQk.js";import{L as d}from"../Loader_es_CwVQZ1L0.js";import{d as m}from"../default_es_CaWUd9iO.js";import{useNotifications as p,useNotificationsAPI as u}from"@itcase/ui-core/context";import"react";import"@itcase/common";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";const f={...{defaultPrimary:{fill:"surfacePrimary",fillHover:"surfacePrimary",titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",textColor:"surfaceTextPrimary",buttonAppearance:"accentPrimary sizeXXL solid rounded",loaderAppearance:"accentTertiary sizeS ghost rounded",closeIcon:m.Action.Close,closeIconAppearance:"surfacePrimary size12_12 ghost circular"}},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},sizeM:{size:"m",titleTextSize:"xxl",descTextSize:"m",loaderAppearanceSize:"sizeS",closeIconAppearanceSize:"size24_24"},sizeS:{size:"m",titleTextSize:"xl",descTextSize:"m",loaderAppearanceSize:"sizeS",closeIconAppearanceSize:"size24_24"},solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"},...{errorPrimary:{fill:"errorPrimary",fillHover:"errorPrimary",titleTextColor:"errorTextPrimary",descTextColor:"errorTextPrimary",borderColor:"errorBorderPrimary",textColor:"errorTextPrimary",buttonAppearance:"surfacePrimary sizeXXL solid rounded",loaderAppearance:"errorPrimary sizeS solid rounded",closeIcon:m.Action.Close,closeIconAppearance:"errorPrimary size12_12 solid circular"}},...{infoPrimary:{fill:"infoPrimary",fillHover:"infoPrimary",titleTextColor:"infoTextPrimary",descTextColor:"infoTextPrimary",borderColor:"infoBorderPrimary",textColor:"infoTextPrimary",buttonAppearance:"surfacePrimary sizeXXL solid rounded",loaderAppearance:"infoPrimary sizeS solid rounded",closeIcon:m.Action.Close,closeIconAppearance:"infoPrimary size12_12 solid circular"}},...{successPrimary:{fill:"successPrimary",fillHover:"successPrimary",titleTextColor:"successTextPrimary",descTextColor:"successTextPrimary",borderColor:"successBorderPrimary",textColor:"successTextPrimary",buttonAppearance:"surfacePrimary sizeXXL solid rounded",loaderAppearance:"successPrimary sizeS solid rounded",closeIcon:m.Action.Close,closeIconAppearance:"successPrimary size12_12 ghost circular"}},...{warningPrimary:{fill:"warningPrimary",fillHover:"warningPrimary",titleTextColor:"warningTextPrimary",descTextColor:"warningTextPrimary",borderColor:"surfaceBorderPrimary",textColor:"warningTextPrimary",buttonAppearance:"surfacePrimary sizeXXL solid rounded",loaderAppearance:"warningPrimary sizeS solid rounded",closeIcon:m.Action.Close,closeIconAppearance:"warningPrimary size12_12 solid circular"}}},y={appearance:f,setAppearance:e=>{y.appearance=e}};function x(m){const{id:p,appearance:u,className:f,dataTestId:x,dataTour:P,type:_="float",title:C,text:z,before:T,after:A,isSkeleton:S,isLoading:I,onClickButton:h,onClickClose:b}=m,g=i(u,y),L=a(m,g),{fillClass:v,fillHoverClass:w,titleTextColor:N,titleTextSize:X,descTextColor:k,descTextSize:B,buttonAppearance:$,buttonLabel:H,elevationClass:j,loaderAppearance:F,loaderAppearanceSize:M,loaderFill:q,loaderItemFill:D,loaderSize:E,loaderType:G="dot",shapeClass:J,sizeClass:K,widthClass:O,closeIcon:Q,closeIconAppearance:R,closeIconAppearanceSize:U,closeIconSrc:V}=L,{styles:W}=t(m);return e("div",{className:o("notification__item",`notification__item_${_}`,O&&`width_${O}`,j&&`elevation_${j}`,v&&`fill_${v}`,K&&`notification__item_size_${K}`,_&&`notification__item_type_${_}`,w&&`fill_${w}`,S&&"skeleton",J&&`shape_${J}`),"data-testid":x,"data-tour":P,style:W,children:[T,e("div",{className:o(f,"notification__item-wrapper"),children:[C&&r(l,{className:"notification__item-title",size:X,textColor:N,children:C}),z&&r(l,{className:"notification__item-text",size:B,textColor:k,children:z}),I&&r(d,{appearance:s(F,M),className:o(f,"button__loader"),type:G,size:E,fill:q,itemFill:D}),b&&r(n,{appearance:s(R,U),className:o("notification__item-close","cursor_type_pointer"),imageSrc:V,SvgImage:Q,onClick:()=>b&&b(p)}),h&&H&&r(c,{appearance:$,className:"notification__item-button",width:"fill",label:H,onClick:h})]}),A]})}function P(e){const i=p(),{hideNotifications:a}=u(),{className:t,dataTestId:s,dataTour:c}=e;return r("div",{className:o("notification",t),"data-testid":s,"data-tour":c,children:r("div",{className:"notification__wrapper",children:i.map(e=>r(x,{id:e.id,appearance:e.appearance,type:e.type,title:e.title,status:e.status,text:e.text,buttonLabel:e.buttonLabel,after:e.after,closeIcon:e.closeIcon,closeIconSrc:e.closeIconSrc,isLoading:e.isLoading,onClickButton:e.onClickButton,onClickClose:a},e.id))})})}export{x as Notification,P as NotificationWrapper,f as notificationAppearance,y as notificationConfig};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{responseIcon as e}from"./Response/img.js";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{forwardRef as t,useMemo as o}from"react";import i from"clsx";import{urlWithAssetPrefix as n}from"@itcase/ui-core/hoc";import{useAppearanceConfig as s,useDevicePropsGenerator as l,useStyles as c}from"@itcase/ui-core/hooks";import{B as d}from"../
|
|
1
|
+
import{responseIcon as e}from"./Response/img.js";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{forwardRef as t,useMemo as o}from"react";import i from"clsx";import{urlWithAssetPrefix as n}from"@itcase/ui-core/hoc";import{useAppearanceConfig as s,useDevicePropsGenerator as l,useStyles as c}from"@itcase/ui-core/hooks";import{B as d}from"../Button_es_M2ryMLoI.js";import{G as u}from"../Group_es_DIuSNHx3.js";import{T as p}from"../primitives_es_BQqNcRQk.js";import"@itcase/ui-core/utils";import"../Loader_es_CwVQZ1L0.js";import"@itcase/common";import"@rc-component/tooltip";import"react-inlinesvg";const m={confirm:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Confirm),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},y={danger:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Danger),primaryButtonAppearance:"dangerPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"dangerPrimary",svgPathFill:"dangerPrimary"}},f={empty:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Empty),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},g={error:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Error),primaryButtonAppearance:"errorPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"errorPrimary",svgPathFill:"errorPrimary"}},x={fail:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Fail),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},B={nothingFound:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.NothingFound),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},S={refresh:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Refresh),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},z={success:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Success),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"accentPrimary",svgPathFill:"accentPrimary"}},h={...m,...f,...y,...S,...{unableLoadData:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.UnableLoadData),primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",svgFill:"surfaceTertiary",svgPathFill:"surfaceQuaternary"}},...B,...x,...g,...z,...{warning:{fill:"surfacePrimary",titleTextColor:"surfaceTextPrimary",titleTextSize:"xxl",descTextSize:"m",imageSrc:String(e.Warning),primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonAppearance:"warningPrimary sizeXXL solid rounded",svgFill:"warningPrimary",svgPathFill:"warningPrimary"}},solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"}},X={appearance:h,setAppearance:e=>{X.appearance=e}},T=n(t(function(e,t){const{appearance:n,className:m,dataTestId:y,dataTour:f,width:g,height:x,title:B,desc:S,primaryButton:z,secondaryButton:h,showPrimaryButton:T=!0,showSecondaryButton:L=!0,before:P,after:b,isSkeleton:_,isBottomButton:v,onClickPrimaryButton:A,onClickSecondaryButton:C}=e,F=s(n,X),w=l(e,F),{fillClass:N,fillHoverClass:$,titleTextColor:k,titleTextSize:D,titleTextWeight:M,descTextColor:W,descTextSize:j,descTextWeight:H,borderColorClass:Q,borderColorHoverClass:U,borderTypeClass:E,borderWidthClass:G,heightClass:I,imageSrc:R,primaryButtonAfter:q,primaryButtonAppearance:J,primaryButtonBefore:K,primaryButtonFill:O,primaryButtonFillHover:V,primaryButtonLabel:Y,primaryButtonLabelTextColor:Z,primaryButtonLabelTextSize:ee,primaryButtonShape:re,primaryButtonSize:ae,primaryButtonWidth:te,secondaryButtonAfter:oe,secondaryButtonAppearance:ie,secondaryButtonBefore:ne,secondaryButtonFill:se,secondaryButtonFillHover:le,secondaryButtonLabel:ce,secondaryButtonLabelTextColor:de,secondaryButtonLabelTextSize:ue,secondaryButtonShape:pe,secondaryButtonSize:me,secondaryButtonWidth:ye,shapeClass:fe,svgFillClass:ge,SvgImage:xe,svgPathFillClass:Be,svgSrc:Se,widthClass:ze}=w,he=o(()=>{const e=R||Se,a=xe;if(a){const e={};return g&&(e.width=g),x&&(e.height=x),r(a,{...e})}return e?r("img",{src:e}):null},[R,Se,xe,g,x]),{styles:Xe,wrapper:Te}=c(e);return a("div",{className:i(m,"response",v&&"response_bottom-button",Q&&`border-color_${Q}`,U&&`border-color_hover_${U}`,E&&`border_type_${E}`,G&&`border-width_${G}`,N&&`fill_${N}`,$&&`fill_hover_${$}`,I&&`height_${I}`,fe&&`shape_${fe}`,ze&&`width_${ze}`,_&&"skeleton"),ref:t,"data-testid":y,"data-tour":f,style:Xe,children:[P,a("div",{className:"response__wrapper",style:Te,children:[he&&r("div",{className:i("response__image",ge&&`svg_fill_${ge}`,Be&&`svg_path_fill_${Be}`),children:he}),a("div",{className:"response__wrapper-inner",children:[B&&r(p,{className:"response__title",size:D,textColor:k,textWeight:M,children:B}),S&&r(p,{className:"response__desc",size:j,textColor:W,textWeight:H,children:S})]})]}),(Y||z||ce||h||F)&&a(u,{className:"response__button",width:"fill",children:[Y&&T?r(d,{appearance:J,className:"response__button-item",width:te||"fill",size:ae,fill:O,fillHover:V,label:Y,labelTextColor:Z,labelTextSize:ee,shape:re,before:K,after:q,onClick:A}):z,ce&&L?r(d,{appearance:ie,className:"response__button-item",width:ye||"fill",size:me,fill:se,fillHover:le,label:ce,labelTextColor:de,labelTextSize:ue,shape:pe,before:ne,after:oe,onClick:C}):h]}),b]})})),L={error:{appearance:"error sizeM ghost rounded",title:"Ошибка",desc:"Возникла проблема с обработкой вашего запроса. Повторите попытку позже или обратитесь в поддержку по электронной почте: support@example.com",primaryButtonAppearance:"errorPrimary sizeXXL solid rounded",primaryButtonLabel:"ОК",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},errorAccessDenied:{appearance:"unableLoadData sizeM ghost rounded",title:"Доступ ограничен",desc:"Для выяснения причин и восстановления доступа обратитесь, пожалуйста, в техническую поддержку по электронной почте: support@example.com",code:"401/403",imageSrc:e.UnableLoadData,primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"Повторить",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},errorNetwork:{appearance:"unableLoadData sizeM ghost rounded",title:"Ошибка соединения",desc:"Не удалось подключиться. Проверьте интернет-соединение и повторите попытку",imageSrc:e.UnableLoadData,primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"Обновить",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},fail:{appearance:"fail sizeM ghost rounded",primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"ОК"},nothingFound:{appearance:"nothingFound sizeM ghost rounded",title:"Ничего не найдено",desc:"Нет данных по заданным параметрам",primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"Сбросить",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},confirm:{appearance:"confirm sizeM ghost rounded",title:"Вы уверены?",primaryButtonAppearance:"accentPrimary sizeXXL solid rounded",primaryButtonLabel:"Да",secondaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"},empty:{appearance:"empty sizeM ghost rounded",title:"Список пуст",desc:"Нет данных по заданным параметрам",code:"200",primaryButtonAppearance:"surfaceSecondary sizeXXL solid rounded",primaryButtonLabel:"ОК"},warning:{appearance:"warning sizeM ghost rounded",title:"Внимание",primaryButtonAppearance:"warningPrimary sizeXXL solid rounded",primaryButtonLabel:"Повторить",secondaryButtonAppearance:"warningPrimary sizeXXL solid rounded",secondaryButtonLabel:"Отмена"}};export{L as RESPONSE_MESSAGES,T as Response,h as responseAppearance,X as responseConfig,e as responseIcon};
|
|
@@ -61185,7 +61185,9 @@ h2.react-datepicker__current-month {
|
|
|
61185
61185
|
&-button {
|
|
61186
61186
|
width: 100%;
|
|
61187
61187
|
height: 100%;
|
|
61188
|
-
|
|
61188
|
+
&.button {
|
|
61189
|
+
background: transparent;
|
|
61190
|
+
}
|
|
61189
61191
|
}
|
|
61190
61192
|
}
|
|
61191
61193
|
}
|
|
@@ -61262,8 +61264,12 @@ h2.react-datepicker__current-month {
|
|
|
61262
61264
|
right: 12px;
|
|
61263
61265
|
transform: translateY(-50%);
|
|
61264
61266
|
}
|
|
61265
|
-
&__clear-
|
|
61267
|
+
&__clear-button {
|
|
61268
|
+
position: absolute;
|
|
61269
|
+
top: 50%;
|
|
61270
|
+
right: 12px;
|
|
61266
61271
|
width: auto;
|
|
61272
|
+
transform: translateY(-50%);
|
|
61267
61273
|
}
|
|
61268
61274
|
&__input-icon.icon {
|
|
61269
61275
|
background: #fff;
|
|
@@ -61338,6 +61344,12 @@ h2.react-datepicker__current-month {
|
|
|
61338
61344
|
&__input-time-container {
|
|
61339
61345
|
grid-row-start: 2;
|
|
61340
61346
|
grid-column-start: span 2;
|
|
61347
|
+
&:not(:last-child) {
|
|
61348
|
+
display: none;
|
|
61349
|
+
}
|
|
61350
|
+
&:last-child {
|
|
61351
|
+
grid-column: 1 / -1;
|
|
61352
|
+
}
|
|
61341
61353
|
}
|
|
61342
61354
|
}
|
|
61343
61355
|
}
|
|
@@ -61345,12 +61357,14 @@ h2.react-datepicker__current-month {
|
|
|
61345
61357
|
:root {
|
|
61346
61358
|
--date-picker-padding: 24px 12px;
|
|
61347
61359
|
--date-picker-fill: var(--color-surface-fill-primary);
|
|
61360
|
+
--date-picker-background: var(--date-picker-fill);
|
|
61348
61361
|
--date-picker-box-shadow: 0px 4px 24px 0px rgb(0, 0, 0, 0.2);
|
|
61349
61362
|
--date-picker-border-radius: 12px;
|
|
61350
61363
|
--date-picker-border: solid 1px var(--color-surface-fill-tertiary);
|
|
61351
61364
|
|
|
61352
61365
|
--date-picker-input-container-padding: 9px 15px;
|
|
61353
61366
|
--date-picker-input-border-radius: 6px;
|
|
61367
|
+
--date-picker-input-min-width: 70px;
|
|
61354
61368
|
|
|
61355
61369
|
--date-picker-selected-weight: 400;
|
|
61356
61370
|
--date-picker-week-width: 40px;
|
|
@@ -61395,19 +61409,17 @@ h2.react-datepicker__current-month {
|
|
|
61395
61409
|
|
|
61396
61410
|
--date-picker-day-weekend-background: var(--color-surface-fill-primary);
|
|
61397
61411
|
--date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);
|
|
61398
|
-
--date-picker-day-weekend-outside-text-color: var(
|
|
61399
|
-
--color-secondary-text-disabled
|
|
61400
|
-
);
|
|
61412
|
+
--date-picker-day-weekend-outside-text-color: var(--color-surface-text-disabled);
|
|
61401
61413
|
|
|
61402
61414
|
--date-picker-day-selected-background: var(--color-accent-fill-primary);
|
|
61403
61415
|
--date-picker-day-selected-background-hover: var(
|
|
61404
61416
|
--color-accent-fill-secondary
|
|
61405
61417
|
);
|
|
61418
|
+
--date-picker-day-outside-text-color: var(--color-surface-text-disabled);
|
|
61406
61419
|
--date-picker-day-selected-text-color: var(--color-accent-text-primary);
|
|
61407
61420
|
--date-picker-day-selected-text-hover-color: var(--color-accent-text-primary);
|
|
61408
61421
|
|
|
61409
61422
|
--date-picker-day-outside-background: var(--color-surface-fill-primary);
|
|
61410
|
-
--date-picker-day-outside-text-color: var(--color-surface-text-tertiary);
|
|
61411
61423
|
}
|
|
61412
61424
|
.divider {
|
|
61413
61425
|
padding: 0;
|
|
@@ -40,6 +40,6 @@ const Button = React.forwardRef(function Button(props, ref) {
|
|
|
40
40
|
? 'button_type_label'
|
|
41
41
|
: buttonTypeClass
|
|
42
42
|
? 'button_type_icon'
|
|
43
|
-
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && 'skeleton', isHolding && 'button_holding', holdState && `button_state_${holdState}`), type: htmlType, title: tooltip, "data-testid": dataTestId?.endsWith('Button') ? dataTestId : `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link ?? href, LinkComponent: (link ?? href) ? 'a' : 'button', rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onHoldEnd, onPointerDown: onHoldStart, onPointerLeave: onHoldEnd, onPointerUp: onHoldEnd, children: _jsxs("div", { className: "button__wrapper", ref: ref, children: [isHolding && (_jsx("div", { className: clsx('button__indication', `button__indication_${holdState}`), children: _jsx("div", { className: "button__indication-item", children: "\u00A0" }) })), isLoading && (_jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore ? iconBefore : undefined })), (icon || iconSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon ? icon : undefined })), (children || label) && (_jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter ? iconAfter : undefined })), Badge, after] }) }));
|
|
43
|
+
: '', borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && !isDisabled && `fill_hover_${fillHoverClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `button_size_${sizeClass}`, widthClass && `button_width_${widthClass}`, elevationClass && `elevation_${elevationClass}`, onClick && 'cursor_type_pointer', isDisabled && 'button_state_disabled cursor_type_default', Badge && 'button_type_badge', zeroPadding && 'button_reset-padding', zeroGap && 'button_reset-gap', isLoading && 'button_state_loading', isSkeleton && 'skeleton', isHolding && 'button_holding', holdState && isHolding && `button_state_${holdState}`), type: htmlType, title: tooltip, "data-testid": dataTestId?.endsWith('Button') ? dataTestId : `${dataTestId}Button`, "data-tour": dataTour, disabled: isDisabled, href: link ?? href, LinkComponent: (link ?? href) ? 'a' : 'button', rel: rel, style: buttonStyles, target: target, onClick: onClick, onMouseDown: onMouseDown, onPointerCancel: onHoldEnd, onPointerDown: onHoldStart, onPointerLeave: onHoldEnd, onPointerUp: onHoldEnd, children: _jsxs("div", { className: "button__wrapper", ref: ref, children: [isHolding && (_jsx("div", { className: clsx('button__indication', `button__indication_${holdState}`), children: _jsx("div", { className: "button__indication-item", children: "\u00A0" }) })), isLoading && (_jsx(Loader, { appearance: mergeAppearanceKeys(loaderAppearance, loaderAppearanceSize), className: clsx(className, 'button__loader'), type: loaderType, size: loaderSize, fill: loaderFill, itemFill: loaderItemFill })), before, (iconBefore || iconBeforeSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconBeforeAppearance, iconBeforeAppearanceSize), className: "button__icon_before", fill: iconBeforeFill, fillSize: iconBeforeFillSize, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore ? iconBefore : undefined })), (icon || iconSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconAppearance, iconAppearanceSize), className: "button__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon ? icon : undefined })), (children || label) && (_jsx(Text, { className: "button__label", width: labelTextWidth, size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, textTruncate: labelTextTruncate, textWeight: labelTextWeight, textWrap: labelTextWrap, style: labelStyles, children: children || label })), (iconAfter || iconAfterSrc) && (_jsx(Icon, { appearance: mergeAppearanceKeys(iconAfterAppearance, iconAfterAppearanceSize), className: "button__icon_after", fill: iconAfterFill, fillSize: iconAfterFillSize, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter ? iconAfter : undefined })), Badge, after] }) }));
|
|
44
44
|
});
|
|
45
45
|
export { Button, buttonConfig };
|
|
@@ -6,14 +6,13 @@ import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui
|
|
|
6
6
|
import { ButtonProps } from 'src/components/Button/Button.interface';
|
|
7
7
|
import { IconProps } from 'src/components/Icon/Icon.interface';
|
|
8
8
|
import { InputProps } from 'src/components/Input/Input.interface';
|
|
9
|
-
import { LabelProps } from 'src/components/Label/Label.interface';
|
|
10
9
|
import { TextProps } from 'src/components/Text/Text.interface';
|
|
11
10
|
type DatePickerInputAppearanceProps = {
|
|
12
11
|
appearance?: CompositeAppearanceKeys;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
clearButton?: ButtonProps['label'];
|
|
13
|
+
clearButtonAppearance?: ButtonProps['appearance'];
|
|
14
|
+
clearIcon?: IconProps['SvgImage'];
|
|
15
|
+
clearIconAppearance?: IconProps['appearance'];
|
|
17
16
|
daySize?: ButtonProps['size'];
|
|
18
17
|
dayTextColor?: ButtonProps['labelTextColor'];
|
|
19
18
|
dayTextShape?: ButtonProps['shape'];
|
|
@@ -40,32 +39,12 @@ type DatePickerInputAppearanceProps = {
|
|
|
40
39
|
yearTextSize?: TextProps['size'];
|
|
41
40
|
yearTextWeight?: TextProps['textWeight'];
|
|
42
41
|
};
|
|
43
|
-
type DatePickerInputProps = DatePickerInputAppearanceProps & Omit<DatePickerProps, 'onChange'> & {
|
|
44
|
-
className?: string;
|
|
45
|
-
dataTestId?: string;
|
|
46
|
-
dataTour?: string;
|
|
47
|
-
datePickerProps?: DatePickerInputAppearanceProps & Omit<DatePickerProps, 'selectsRange'> & {
|
|
48
|
-
selectsRange?: boolean;
|
|
49
|
-
};
|
|
50
|
-
endValue?: string | Date | DateIso;
|
|
51
|
-
onChange?: (dateStart: Date | null, dateEnd: Date | null) => void;
|
|
52
|
-
popperPlacement?: ReactNode;
|
|
53
|
-
value?: string | Date | DateIso;
|
|
54
|
-
};
|
|
55
42
|
type DatePickerCustomInput = {
|
|
43
|
+
clearButton?: ButtonProps['label'];
|
|
44
|
+
clearButtonAppearance?: ButtonProps['appearance'];
|
|
56
45
|
clearIcon?: IconProps['SvgImage'];
|
|
57
|
-
|
|
58
|
-
clearIconFillHover?: IconProps['fillHover'];
|
|
59
|
-
clearIconFillSize?: IconProps['fillSize'];
|
|
60
|
-
clearIconItemFill?: IconProps['iconFill'];
|
|
61
|
-
clearIconItemFillHover?: IconProps['iconFillHover'];
|
|
62
|
-
clearIconShape?: IconProps['shape'];
|
|
63
|
-
clearIconSize?: IconProps['size'];
|
|
46
|
+
clearIconAppearance?: IconProps['appearance'];
|
|
64
47
|
clearIconSrc?: IconProps['imageSrc'];
|
|
65
|
-
clearLabel?: LabelProps['label'];
|
|
66
|
-
clearLabelTextColor?: LabelProps['labelTextColor'];
|
|
67
|
-
clearLabelTextColorHover?: LabelProps['labelTextColorHover'];
|
|
68
|
-
clearLabelTextSize?: LabelProps['labelTextSize'];
|
|
69
48
|
datepickerRef?: RefObject<DatePicker | null>;
|
|
70
49
|
inputIcon?: IconProps['SvgImage'];
|
|
71
50
|
inputIconFill?: IconProps['fill'];
|
|
@@ -80,6 +59,21 @@ type DatePickerCustomInput = {
|
|
|
80
59
|
labelTextSize?: TextSizeProps;
|
|
81
60
|
value?: string;
|
|
82
61
|
};
|
|
62
|
+
type DatePickerInputClearProps = Pick<DatePickerCustomInput, 'clearButton' | 'clearButtonAppearance' | 'clearIcon' | 'clearIconAppearance' | 'clearIconSrc'>;
|
|
63
|
+
type DatePickerInputProps = DatePickerInputAppearanceProps & Omit<DatePickerProps, 'onChange'> & {
|
|
64
|
+
className?: string;
|
|
65
|
+
dataTestId?: string;
|
|
66
|
+
dataTour?: string;
|
|
67
|
+
datePickerProps?: DatePickerInputAppearanceProps & Omit<DatePickerProps, 'selectsRange'> & {
|
|
68
|
+
isClearable?: boolean;
|
|
69
|
+
selectsRange?: boolean;
|
|
70
|
+
};
|
|
71
|
+
endValue?: string | Date | DateIso;
|
|
72
|
+
inputProps?: DatePickerInputClearProps & InputProps;
|
|
73
|
+
onChange?: (dateStart: Date | null, dateEnd: Date | null) => void;
|
|
74
|
+
popperPlacement?: ReactNode;
|
|
75
|
+
value?: string | Date | DateIso;
|
|
76
|
+
};
|
|
83
77
|
type DatePickerInputIcon = {
|
|
84
78
|
inputIcon?: IconProps['SvgImage'];
|
|
85
79
|
inputIconFill?: IconProps['fill'];
|
|
@@ -7,7 +7,6 @@ import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcas
|
|
|
7
7
|
import { Button } from 'src/components/Button';
|
|
8
8
|
import { Icon } from 'src/components/Icon';
|
|
9
9
|
import { Input } from 'src/components/Input';
|
|
10
|
-
import { Label } from 'src/components/Label';
|
|
11
10
|
import { Text } from 'src/components/Text';
|
|
12
11
|
import { datePickerAppearance } from './DatePicker.appearance';
|
|
13
12
|
import { getWeekRange } from './DatePicker.utils';
|
|
@@ -90,16 +89,16 @@ const DatePickerCustomInput = React.forwardRef((props, ref) => {
|
|
|
90
89
|
}
|
|
91
90
|
return '';
|
|
92
91
|
}, [value]);
|
|
93
|
-
return (_jsxs(React.Fragment, { children: [_jsx(Input, { ...props, ...inputProps, className: clsx(inputProps?.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && _jsx(DatePickerInputIcon, { ...inputProps }), isClearable && _jsx(DatePickerClearButton, { ...inputProps })] }));
|
|
92
|
+
return (_jsxs(React.Fragment, { children: [_jsx(Input, { ...props, ...inputProps, className: clsx(inputProps?.className, 'datepicker__input'), ref: ref, autocomplete: "off", value: multipleValue }), inputIcon && _jsx(DatePickerInputIcon, { ...inputProps }), isClearable && (_jsx(DatePickerClearButton, { datepickerRef: props.datepickerRef, ...inputProps }))] }));
|
|
94
93
|
});
|
|
95
94
|
function DatePickerClearButton(props) {
|
|
96
|
-
const {
|
|
95
|
+
const { clearButton, clearButtonAppearance, clearIcon, clearIconAppearance, clearIconSrc, datepickerRef, } = props;
|
|
97
96
|
const onClick = useCallback((event) => {
|
|
98
97
|
datepickerRef?.current?.onClearClick(event);
|
|
99
98
|
datepickerRef?.current?.handleFocus(event);
|
|
100
99
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
101
100
|
}, []);
|
|
102
|
-
return (_jsx(React.Fragment, { children:
|
|
101
|
+
return (_jsx(React.Fragment, { children: clearButton ? (_jsx(Button, { appearance: clearButtonAppearance, className: clsx('react-datepicker__clear-button', 'cursor_type_pointer'), label: clearButton, onClick: onClick })) : ((clearIcon || clearIconSrc) && (_jsx(Icon, { appearance: clearIconAppearance, className: clsx('react-datepicker__clear-icon', 'cursor_type_pointer'), imageSrc: clearIconSrc, SvgImage: clearIcon, onClick: onClick }))) }));
|
|
103
102
|
}
|
|
104
103
|
function DatePickerInputIcon(props) {
|
|
105
104
|
const { inputIcon, inputIconFill, inputIconFillHover, inputIconFillSize, inputIconItemFill, inputIconShape, inputIconSize, inputIconSrc, onClick, } = props;
|
|
@@ -5,6 +5,14 @@ declare const meta: {
|
|
|
5
5
|
component: typeof DatePickerInput;
|
|
6
6
|
args: {
|
|
7
7
|
width: "220px";
|
|
8
|
+
datePickerProps: {
|
|
9
|
+
appearance: "surfacePrimary sizeM solid rounded";
|
|
10
|
+
dateFormat: string;
|
|
11
|
+
placeholderText: string;
|
|
12
|
+
};
|
|
13
|
+
inputProps: {
|
|
14
|
+
appearance: "defaultPrimary sizeM solid rounded";
|
|
15
|
+
};
|
|
8
16
|
};
|
|
9
17
|
parameters: {
|
|
10
18
|
layout: string;
|
|
@@ -12,7 +20,8 @@ declare const meta: {
|
|
|
12
20
|
};
|
|
13
21
|
export default meta;
|
|
14
22
|
type Story = StoryObj<typeof meta>;
|
|
15
|
-
export declare const
|
|
23
|
+
export declare const Default: Story;
|
|
24
|
+
export declare const WithInitialDate: Story;
|
|
16
25
|
export declare const DateTime: Story;
|
|
17
26
|
export declare const DateRange: Story;
|
|
18
27
|
export declare const DateWeek: Story;
|
|
@@ -1,82 +1,80 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
import { DatePickerInput } from '../DatePicker';
|
|
2
|
+
import { createDatePickerStory } from './DatePickerStory';
|
|
3
3
|
const meta = {
|
|
4
4
|
title: 'Molecules / DatePicker',
|
|
5
5
|
component: DatePickerInput,
|
|
6
6
|
args: {
|
|
7
7
|
width: '220px',
|
|
8
|
+
datePickerProps: {
|
|
9
|
+
appearance: 'surfacePrimary sizeM solid rounded',
|
|
10
|
+
dateFormat: 'dd.MM.yyyy',
|
|
11
|
+
placeholderText: 'Выберите дату',
|
|
12
|
+
},
|
|
13
|
+
inputProps: {
|
|
14
|
+
appearance: 'defaultPrimary sizeM solid rounded',
|
|
15
|
+
},
|
|
8
16
|
},
|
|
9
17
|
parameters: {
|
|
10
18
|
layout: 'centered',
|
|
11
19
|
},
|
|
12
20
|
};
|
|
13
21
|
export default meta;
|
|
14
|
-
|
|
22
|
+
const DatePickerStory = createDatePickerStory(meta.args);
|
|
23
|
+
export const Default = {
|
|
24
|
+
render: DatePickerStory,
|
|
25
|
+
};
|
|
26
|
+
export const WithInitialDate = {
|
|
15
27
|
args: {
|
|
16
28
|
datePickerProps: {
|
|
17
|
-
|
|
18
|
-
},
|
|
19
|
-
inputProps: {
|
|
20
|
-
appearance: 'defaultPrimary sizeM solid rounded',
|
|
29
|
+
placeholderText: 'Дата с начальным значением',
|
|
21
30
|
},
|
|
31
|
+
value: '2025-06-15',
|
|
22
32
|
},
|
|
23
|
-
render:
|
|
24
|
-
return _jsx(DatePickerInput, { ...args });
|
|
25
|
-
},
|
|
33
|
+
render: DatePickerStory,
|
|
26
34
|
};
|
|
27
35
|
export const DateTime = {
|
|
28
36
|
args: {
|
|
29
37
|
datePickerProps: {
|
|
30
|
-
|
|
31
|
-
|
|
38
|
+
dateFormat: 'dd.MM.yyyy HH:mm',
|
|
39
|
+
placeholderText: 'Дата и время',
|
|
32
40
|
popperPlacement: 'bottom',
|
|
33
41
|
showTimeSelect: true,
|
|
34
42
|
timeCaption: 'Время',
|
|
35
|
-
timeFormat: '
|
|
43
|
+
timeFormat: 'HH:mm',
|
|
36
44
|
timeIntervals: 15,
|
|
37
45
|
},
|
|
38
|
-
|
|
39
|
-
appearance: 'defaultPrimary sizeM solid rounded',
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
render: (args) => {
|
|
43
|
-
return _jsx(DatePickerInput, { ...args });
|
|
46
|
+
value: '2025-06-15T14:30:00',
|
|
44
47
|
},
|
|
48
|
+
render: DatePickerStory,
|
|
45
49
|
};
|
|
46
50
|
export const DateRange = {
|
|
47
51
|
args: {
|
|
48
52
|
width: '360px',
|
|
49
53
|
datePickerProps: {
|
|
50
|
-
appearance: 'surfacePrimary sizeM solid rounded',
|
|
51
54
|
monthsShown: 2,
|
|
52
|
-
placeholderText: '
|
|
55
|
+
placeholderText: 'Начало – конец',
|
|
53
56
|
selectsRange: true,
|
|
54
57
|
},
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
render: (args) => {
|
|
60
|
-
return _jsx(DatePickerInput, { ...args });
|
|
58
|
+
endValue: '2025-06-20',
|
|
59
|
+
value: '2025-06-01',
|
|
61
60
|
},
|
|
61
|
+
render: DatePickerStory,
|
|
62
62
|
};
|
|
63
63
|
export const DateWeek = {
|
|
64
64
|
args: {
|
|
65
|
+
width: '360px',
|
|
65
66
|
datePickerProps: {
|
|
66
|
-
appearance: 'surfacePrimary sizeM solid rounded',
|
|
67
67
|
dateFormat: 'I неделя',
|
|
68
68
|
monthsShown: 2,
|
|
69
|
+
placeholderText: 'Выберите неделю',
|
|
69
70
|
readOnly: false,
|
|
70
71
|
selectsRange: true,
|
|
71
72
|
showWeekNumbers: true,
|
|
72
73
|
showWeekPicker: false,
|
|
73
74
|
isClearable: false,
|
|
74
75
|
},
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
},
|
|
78
|
-
},
|
|
79
|
-
render: (args) => {
|
|
80
|
-
return _jsx(DatePickerInput, { ...args });
|
|
76
|
+
endValue: '2025-06-15',
|
|
77
|
+
value: '2025-06-09',
|
|
81
78
|
},
|
|
79
|
+
render: DatePickerStory,
|
|
82
80
|
};
|
|
@@ -5,6 +5,14 @@ declare const meta: {
|
|
|
5
5
|
component: typeof DatePickerInput;
|
|
6
6
|
args: {
|
|
7
7
|
width: "220px";
|
|
8
|
+
datePickerProps: {
|
|
9
|
+
appearance: "surfacePrimary sizeM solid rounded";
|
|
10
|
+
dateFormat: string;
|
|
11
|
+
placeholderText: string;
|
|
12
|
+
readOnly: false;
|
|
13
|
+
isClearable: true;
|
|
14
|
+
onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
|
|
15
|
+
};
|
|
8
16
|
};
|
|
9
17
|
parameters: {
|
|
10
18
|
layout: string;
|
|
@@ -13,4 +21,4 @@ declare const meta: {
|
|
|
13
21
|
export default meta;
|
|
14
22
|
type Story = StoryObj<typeof meta>;
|
|
15
23
|
export declare const ClearIcon: Story;
|
|
16
|
-
export declare const
|
|
24
|
+
export declare const ClearButton: Story;
|
|
@@ -1,50 +1,46 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { icons24 } from '@itcase/icons-default';
|
|
2
2
|
import { DatePickerInput } from '../DatePicker';
|
|
3
|
+
import { createDatePickerStory } from './DatePickerStory';
|
|
3
4
|
const meta = {
|
|
4
5
|
title: 'Molecules / DatePicker / Clear',
|
|
5
6
|
component: DatePickerInput,
|
|
6
7
|
args: {
|
|
7
8
|
width: '220px',
|
|
9
|
+
datePickerProps: {
|
|
10
|
+
appearance: 'surfacePrimary sizeM solid rounded',
|
|
11
|
+
dateFormat: 'dd.MM.yyyy',
|
|
12
|
+
placeholderText: 'Выберите дату',
|
|
13
|
+
readOnly: false,
|
|
14
|
+
isClearable: true,
|
|
15
|
+
onKeyDown: (event) => event.preventDefault(),
|
|
16
|
+
},
|
|
8
17
|
},
|
|
9
18
|
parameters: {
|
|
10
19
|
layout: 'centered',
|
|
11
20
|
},
|
|
12
21
|
};
|
|
13
22
|
export default meta;
|
|
23
|
+
const DatePickerStory = createDatePickerStory(meta.args);
|
|
14
24
|
export const ClearIcon = {
|
|
15
25
|
args: {
|
|
16
|
-
datePickerProps: {
|
|
17
|
-
appearance: 'surfacePrimary sizeM solid rounded',
|
|
18
|
-
readOnly: false,
|
|
19
|
-
isClearable: true,
|
|
20
|
-
onKeyDown: (e) => {
|
|
21
|
-
e.preventDefault();
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
26
|
inputProps: {
|
|
25
27
|
appearance: 'defaultPrimary sizeM solid rounded',
|
|
28
|
+
clearIcon: icons24.Action.Clear,
|
|
29
|
+
clearIconAppearance: 'surfaceTertiary size24_24 ghost circular',
|
|
26
30
|
},
|
|
31
|
+
value: '2025-06-15',
|
|
27
32
|
},
|
|
28
|
-
render:
|
|
29
|
-
return _jsx(DatePickerInput, { ...args });
|
|
30
|
-
},
|
|
33
|
+
render: DatePickerStory,
|
|
31
34
|
};
|
|
32
|
-
export const
|
|
35
|
+
export const ClearButton = {
|
|
33
36
|
args: {
|
|
34
37
|
width: '360px',
|
|
35
|
-
datePickerProps: {
|
|
36
|
-
appearance: 'surfacePrimary sizeM solid rounded',
|
|
37
|
-
readOnly: false,
|
|
38
|
-
isClearable: true,
|
|
39
|
-
onKeyDown: (e) => {
|
|
40
|
-
e.preventDefault();
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
38
|
inputProps: {
|
|
44
39
|
appearance: 'defaultPrimary sizeM solid rounded',
|
|
40
|
+
clearButton: 'Очистить',
|
|
41
|
+
clearButtonAppearance: 'surfaceSecondary sizeM solid rounded',
|
|
45
42
|
},
|
|
43
|
+
value: '2025-06-15',
|
|
46
44
|
},
|
|
47
|
-
render:
|
|
48
|
-
return _jsx(DatePickerInput, { ...args });
|
|
49
|
-
},
|
|
45
|
+
render: DatePickerStory,
|
|
50
46
|
};
|
|
@@ -5,6 +5,14 @@ declare const meta: {
|
|
|
5
5
|
component: typeof DatePickerInput;
|
|
6
6
|
args: {
|
|
7
7
|
width: "220px";
|
|
8
|
+
datePickerProps: {
|
|
9
|
+
appearance: "surfacePrimary sizeM solid rounded";
|
|
10
|
+
dateFormat: string;
|
|
11
|
+
placeholderText: string;
|
|
12
|
+
};
|
|
13
|
+
inputProps: {
|
|
14
|
+
appearance: "defaultPrimary sizeM solid rounded";
|
|
15
|
+
};
|
|
8
16
|
};
|
|
9
17
|
parameters: {
|
|
10
18
|
layout: string;
|
|
@@ -1,52 +1,41 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
import { DatePickerInput } from '../DatePicker';
|
|
2
|
+
import { createDatePickerStory } from './DatePickerStory';
|
|
3
3
|
const meta = {
|
|
4
4
|
title: 'Molecules / DatePicker / Size',
|
|
5
5
|
component: DatePickerInput,
|
|
6
6
|
args: {
|
|
7
7
|
width: '220px',
|
|
8
|
+
datePickerProps: {
|
|
9
|
+
appearance: 'surfacePrimary sizeM solid rounded',
|
|
10
|
+
dateFormat: 'dd.MM.yyyy',
|
|
11
|
+
placeholderText: 'Выберите дату',
|
|
12
|
+
},
|
|
13
|
+
inputProps: {
|
|
14
|
+
appearance: 'defaultPrimary sizeM solid rounded',
|
|
15
|
+
},
|
|
8
16
|
},
|
|
9
17
|
parameters: {
|
|
10
18
|
layout: 'centered',
|
|
11
19
|
},
|
|
12
20
|
};
|
|
13
21
|
export default meta;
|
|
22
|
+
const DatePickerStory = createDatePickerStory(meta.args);
|
|
14
23
|
export const SizeL = {
|
|
15
24
|
args: {
|
|
16
|
-
datePickerProps: {
|
|
17
|
-
appearance: 'surfacePrimary sizeM solid rounded',
|
|
18
|
-
},
|
|
19
25
|
inputProps: {
|
|
20
26
|
appearance: 'defaultPrimary sizeL solid rounded',
|
|
21
27
|
},
|
|
22
28
|
},
|
|
23
|
-
render:
|
|
24
|
-
return _jsx(DatePickerInput, { ...args });
|
|
25
|
-
},
|
|
29
|
+
render: DatePickerStory,
|
|
26
30
|
};
|
|
27
31
|
export const SizeM = {
|
|
28
|
-
|
|
29
|
-
datePickerProps: {
|
|
30
|
-
appearance: 'surfacePrimary sizeM solid rounded',
|
|
31
|
-
},
|
|
32
|
-
inputProps: {
|
|
33
|
-
appearance: 'defaultPrimary sizeM solid rounded',
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
|
-
render: (args) => {
|
|
37
|
-
return _jsx(DatePickerInput, { ...args });
|
|
38
|
-
},
|
|
32
|
+
render: DatePickerStory,
|
|
39
33
|
};
|
|
40
34
|
export const SizeS = {
|
|
41
35
|
args: {
|
|
42
|
-
datePickerProps: {
|
|
43
|
-
appearance: 'surfacePrimary sizeM solid rounded',
|
|
44
|
-
},
|
|
45
36
|
inputProps: {
|
|
46
37
|
appearance: 'defaultPrimary sizeS solid rounded',
|
|
47
38
|
},
|
|
48
39
|
},
|
|
49
|
-
render:
|
|
50
|
-
return _jsx(DatePickerInput, { ...args });
|
|
51
|
-
},
|
|
40
|
+
render: DatePickerStory,
|
|
52
41
|
};
|