@swiftcrab/crab 0.0.5 → 0.0.6

package/es/hooks/index.js

@@ -0,0 +1 @@
+import e from"./useDrawer.js";import t from"./useModal.js";import n from"./useForm.js";import r from"./useParsedHash.js";import i from"./useUrlState.js";export{e as useDrawer,n as useForm,t as useModal,r as useParsedHash,i as useUrlState};

package/es/hooks/useDrawer.d.ts

@@ -0,0 +1,11 @@
+import React, { FC } from "react";
+//#region components/hooks/useDrawer.d.ts
+type IPartial<T> = Partial<Omit<T, 'onOk' | 'onClose' | 'afterClose'>>;
+export type IGeneraticDrawerProps = {
+  open?: boolean;
+  afterClose?: (open: boolean) => void;
+  onOk?: (...args: any[]) => void;
+  onClose?: () => void;
+};
+export default function useDrawer<T extends IGeneraticDrawerProps>(Comp: FC<T>, onOk?: (...args: any[]) => void): readonly [React.JSX.Element, (arg?: IPartial<T>) => void, T, (arg: IPartial<T>) => void, () => void, () => void];
+//#endregion

package/es/hooks/useDrawer.js

@@ -0,0 +1 @@
+import e,{useCallback as t,useState as n}from"react";function r(r,i){let[a,o]=n({open:!1}),s=t(e=>{o(t=>({...t,...e,open:!0}))},[]),c=t(()=>{o({open:!1})},[]),l=t(()=>{o(e=>({open:e.open??!1}))},[]),u=t(e=>{o(t=>({...t,...e,open:e.open??t.open??!1}))},[]);return[e.createElement(r,{...a,onOk:(...e)=>{c(),i?.(...e)},onClose:()=>{c()},afterClose:e=>{!e&&l()}}),s,a,u,c,l]}export{r as default};

package/es/hooks/useForm.d.ts

@@ -0,0 +1,19 @@
+import { FormInstance } from "../form/hooks/useForm.js";
+import "../form/index.js";
+import ValidateTooltip from "../form-area/ValidateTooltip.js";
+import { TFieldProps } from "../form-area/type.js";
+import { SetStateAction } from "react";
+//#region components/hooks/useForm.d.ts
+export default function useForm<T extends Record<string, any>>(initialValues: T): FormInstance<any> & {
+  values: T;
+  getValues: () => T;
+  ValidateTooltip: typeof ValidateTooltip;
+  fieldProps: TFieldProps<T>;
+  setFieldProps: import("react").Dispatch<SetStateAction<Partial<Record<keyof T, Record<string, any>>>>>;
+  onValuesChange: (_: any, allValues: T) => void;
+  set: (action: T | SetStateAction<T>) => void;
+  syncValues: (nextValues: T) => void;
+  setStateOnly: (nextValues: T) => void;
+  reset: (nextValues?: T) => void;
+};
+//#endregion

package/es/hooks/useForm.js

@@ -0,0 +1 @@
+import e from"../form/index.js";import t from"../form-area/ValidateTooltip.js";import{useRef as n,useState as r}from"react";import{useMemoizedFn as i}from"ahooks";import{isEqual as a}from"lodash";function o(o){let s=n(o),[c]=e.useForm(),[l,u]=r(s.current),[d,f]=r({}),p=i(e=>{u(t=>a(t,e)?t:e)}),m=i((e,t)=>{p(t)}),h=i(()=>c.getFieldsValue(!0)),g=i(e=>{c.setFieldsValue(e),p(e)}),_=i(e=>{let t=c.getFieldsValue(!0),n=typeof e==`function`?e(t):e;c.setFieldsValue(n),p(n)}),v=i(e=>{p(e)}),y=i(e=>{let t=e??s.current;c.resetFields(),c.setFieldsValue(t),p(t)});return Object.assign(c,{values:l,getValues:h,ValidateTooltip:t,fieldProps:d,setFieldProps:f,onValuesChange:m,set:_,syncValues:g,setStateOnly:v,reset:y})}export{o as default};

package/es/hooks/useModal.d.ts

@@ -0,0 +1,11 @@
+import React, { FC } from "react";
+//#region components/hooks/useModal.d.ts
+type IPartial<T> = Partial<Omit<T, 'afterClose' | 'onOk' | 'onCancel'>>;
+export type IGeneraticModalProps = {
+  open?: boolean;
+  afterClose?: (open: boolean) => void;
+  onOk?: (...args: any[]) => void;
+  onCancel?: () => void;
+};
+export default function useModal<T extends IGeneraticModalProps>(Comp: FC<T>, onOk?: (...args: any[]) => void): readonly [React.JSX.Element, (arg?: IPartial<T>) => void, T, (arg: IPartial<T>) => void, () => void, () => void];
+//#endregion

package/es/hooks/useModal.js

@@ -0,0 +1 @@
+import e,{useCallback as t,useState as n}from"react";function r(r,i){let[a,o]=n({open:!1}),s=t(e=>{o(t=>({...t,...e,open:!0}))},[]),c=t(()=>{o({open:!1})},[]),l=t(()=>{o(e=>({open:e.open??!1}))},[]),u=t(e=>{o(t=>({...t,...e,open:e.open??t.open??!1}))},[]);return[e.createElement(r,{...a,onOk:(...e)=>{c(),i?.(...e)},onCancel:()=>{c()},afterClose:e=>{!e&&l()}}),s,a,u,c,l]}export{r as default};

package/es/hooks/useParsedHash.d.ts

@@ -0,0 +1,8 @@
+//#region components/hooks/useParsedHash.d.ts
+type IUseParsedHashOption<T = Record<string, any>> = {
+  key?: string;
+  initialValue?: T;
+};
+type IChangeHashValue<T> = T | ((input: T) => T);
+export default function useParsedHash<T>(options?: IUseParsedHashOption<T>): readonly [T, (curValue?: IChangeHashValue<T>) => void];
+//#endregion

package/es/hooks/useParsedHash.js

@@ -0,0 +1 @@
+import{useCallback as e,useEffect as t,useRef as n,useState as r}from"react";import{isEqualWith as i,isNaN as a,isNil as o}from"lodash";import s from"lodash/debounce";function c(e){return!e||typeof e!=`object`||Array.isArray(e)?e:Object.keys(e).sort().reduce((t,n)=>(t[n]=e[n],t),{})}function l(e,t){return i(e,t,function(e,t){if(a(e)&&a(t)||a(e)&&o(t)||o(e)&&o(t)||o(e)&&a(t))return!0;if(typeof e==`function`&&typeof t==`function`)return e.toString()===t.toString()})}function u(e,t,n){let[,r=``]=(typeof n==`string`?n:window.location.hash).split(`?`),i=new URLSearchParams(r).get(e);if(!i)return t||{};let a;try{a=JSON.parse(decodeURIComponent(i))}catch{a={}}return t&&typeof t==`object`&&!Array.isArray(t)&&a&&typeof a==`object`&&!Array.isArray(a)?{...t,...a}:a??(t||{})}function d(i={}){let{key:a=`search`,initialValue:o}=i,d=n(o),f=e(e=>u(a,d.current,e),[a]),[p,m]=r(()=>f()),h=e(e=>{let t=f(e);m(e=>l(e,t)?e:t)},[f]),g=e(e=>{let t=window.location.hash||``,[n=``,r=``]=t.split(`?`),i;i=e===void 0?null:typeof e==`function`?e(f()):e;let o=new URLSearchParams(r);if(i==null)o.delete(a);else{let e=c(i);o.set(a,encodeURIComponent(JSON.stringify(e)))}let s=o.toString(),l=s?`${n}?${s}`:n;if(l===t)return;let u=`${window.location.pathname}${window.location.search}${l}`;window.history.replaceState(null,``,u),h(l)},[f,a,h]);return t(()=>{let e=s(()=>{h()},30);return window.addEventListener(`hashchange`,e),e(),()=>{e.cancel(),window.removeEventListener(`hashchange`,e)}},[h]),[p,g]}export{d as default};

package/es/hooks/useUrlState.d.ts

@@ -0,0 +1,11 @@
+import ahookUrlState from "@ahooksjs/use-url-state";
+//#region components/hooks/useUrlState.d.ts
+type UrlState = Record<string, any>;
+/**
+ * ahook 的 useUrlState 增强版
+ * 返回值增加了类型
+ * 默认自动解析 number、boolean
+ * */
+declare function useUrlState<S extends UrlState = UrlState>(initialState?: S | (() => S), options?: Parameters<typeof ahookUrlState>[1]): [{ [key in keyof S]: S[key]; }, (s: import("react").SetStateAction<Partial<{ [key in keyof S]: any; }>>) => void];
+//#endregion
+export { useUrlState as default };

package/es/hooks/useUrlState.js

@@ -0,0 +1 @@
+import e from"@ahooksjs/use-url-state";function t(t,n){let r={...n,parseOptions:{parseNumbers:!0,parseBooleans:!0,arrayFormat:`index`,...n?.parseOptions},stringifyOptions:{arrayFormat:`index`,...n?.stringifyOptions}},[i,a]=e(t,r);return[i,a]}export{t as default};

package/es/hour-panel/index.d.ts

@@ -0,0 +1,6 @@
+import { IMuxHourProps, MuxHourRef } from "./types.js";
+import React from "react";
+//#region components/hour-panel/index.d.ts
+declare const HourPanel: React.ForwardRefExoticComponent<IMuxHourProps & React.RefAttributes<MuxHourRef>>;
+//#endregion
+export { HourPanel as default };

package/es/hour-panel/index.js

@@ -0,0 +1 @@
+import{ConfigContext as e}from"../config-provider/context.js";import"../config-provider/index.js";import t from"../button/index.js";import n from"../radio/index.js";import r from"../date-picker/index.js";import{QUICK_TYPES as i}from"./types.js";import{buildPeriods as a,buildSegmentFromHour as o,buildSelectedMap as ee,checkVal as s,clonePeriods as c,getCurrentWeekRange as te,getVal as l,syncPeriods as u}from"./utils.js";import ne from"./style/index.js";import d,{forwardRef as f,useCallback as p,useContext as m,useEffect as h,useImperativeHandle as re,useMemo as ie,useRef as g,useState as _}from"react";import v from"classnames";import{CloseCircleFilled as ae}from"@ant-design/icons";import y from"dayjs";const b=f((f,b)=>{let{getPrefixCls:oe}=m(e),x=oe(`hourPanel`),[se,ce,le]=ne(x),{value:S,defaultValue:C=[],mode:w=`common`,groups:T,tip:E,min:D=0,max:O=24,step:k=1,hideDecimalText:A=!1,readonly:ue=!1,disabled:j=!1,border:de=!1,continuous:M=!1,minLength:N=0,maxLength:P=0,errorTip:F,showDateRange:fe=!1,maxHeight:pe,onChange:I,onContextMenu:L,className:R,style:z,hasAllBtn:me=!0,hasClearBtn:B=!0,hasResetBtn:he=!0,hasQuick:ge=!0}=f,V=ue||j,[H,_e]=_(()=>te()),[U,W]=_(()=>a(T,w,S??C,D,O,k,A,H)),[G,K]=_(``),ve=g(S??C),q=g(U);q.current=U,h(()=>{S!==void 0&&W(a(T,w,S,D,O,k,A,H))},[S,T,w,D,O,k,A,H]);let J=93/((O-D)/k+1),Y=g(null),X=p(e=>{let t=s(e,M,N,P,F,w);K(t.msg),t.ok?(S===void 0&&W(e),I?.(t.data)):S===void 0&&W(e)},[M,N,P,F,w,S,I]),Z=p((e,t)=>!(!t&&e.selected&&e.readonly),[]),Q=p((e,t,n)=>{let r=q.current,i=r[e].hours[t];Z(i,n)&&(i.selected=n,u(r),W(c(r)))},[Z]),ye=p((e,t,n)=>{if(V)return;if(e.button!==0){e.preventDefault();return}e.preventDefault();let r=q.current[t].hours[n];if(r.selected&&r.readonly)return;let i=!r.selected,a=q.current[t].hours.map(e=>e.selected);Y.current={pIndex:t,hourIndex:n,selected:i,isDragging:!0,originalSelected:a},Q(t,n,i)},[V,Q]),be=p((e,t)=>{if(V)return;let n=Y.current;if(n&&n.isDragging){if(e===n.pIndex){let r=Math.min(n.hourIndex,t),i=Math.max(n.hourIndex,t),a=q.current[e].hours;a.forEach((e,t)=>{e.readonly||(e.selected=n.originalSelected[t])});for(let e=r;e<=i;e++){let t=a[e];Z(t,n.selected)&&(t.selected=n.selected)}u(q.current),W(c(q.current))}else Q(e,t,n.selected)}},[V,Q,Z]),xe=p((e,t,n)=>{if(e.preventDefault(),!L)return;let r=q.current[t];if(!r.hours[n].selected)return;let i=o(r.hours,n),a=w===`range`?{week:r.date?[y(r.date).day()||7]:r.weeks.map(e=>+e),date:r.date,name:r.name,times:i}:{week:r.weeks.map(e=>+e),name:r.name,times:i};L(a,e)},[w,L]);h(()=>{let e=()=>{if(Y.current?.isDragging){Y.current.isDragging=!1;let e=q.current,t=s(e,M,N,P,F,w);K(t.msg),t.ok&&(S===void 0&&W(c(e)),I?.(t.data))}};return document.addEventListener(`mouseup`,e),()=>{document.removeEventListener(`mouseup`,e)}},[M,N,P,F,w,S,I]);let Se=p(e=>{if(V)return;let t=c(q.current),n=t[e].hours.every(e=>e.selected||e.readonly);t[e].hours.forEach(e=>{e.readonly||(e.selected=!n)}),u(t),X(t)},[V,X]),Ce=p(()=>{if(V)return;let e=c(q.current);e.forEach(e=>{e.hours.forEach(e=>{e.readonly||(e.selected=!1)})}),u(e),X(e)},[V,X]),we=p(()=>{if(V)return;let e=a(T,w,ve.current,D,O,k,A,H);X(e)},[V,T,w,D,O,k,A,H,X]),Te=p(e=>{if(V)return;let t=e.split(``),n=c(q.current);n.forEach(e=>{e.weeks.every(e=>t.includes(e))?e.hours.forEach(e=>{e.readonly||(e.selected=!0)}):e.hours.forEach(e=>{e.readonly||(e.selected=!1)})}),u(n),X(n)},[V,X]),Ee=p(e=>{if(e&&e[0]&&e[1]){let t=e[0].format(`YYYY-MM-DD`),n=e[1].format(`YYYY-MM-DD`);_e([t,n]);let r=S===void 0?l(q.current,w):S,i=a(T,w,r,D,O,k,A,[t,n]),o=s(i,M,N,P,F,w);K(o.msg),S===void 0&&W(i),I?.(o.data)}},[T,w,S,D,O,k,A,M,N,P,F,I]),De=ie(()=>{let e=l(U,w),t=ee(e,w);for(let e=0;e<i.length;e++){let n=i[e],r=n.value.split(``),a=!0,o=!1;if(r.forEach(e=>{let n=t[e]||[];n.length>0&&(o=!0),n.length!==O-D&&(a=!1)}),[`1`,`2`,`3`,`4`,`5`,`6`,`7`].filter(e=>!r.includes(e)).forEach(e=>{t[e]&&t[e].length>0&&(a=!1)}),a&&o)return n.value}return``},[U,O,D]);re(b,()=>({val:()=>l(q.current,w),check:()=>s(q.current,M,N,P,F,w)}),[M,N,P,F,w]);let Oe=U.length===7&&!V&&w!==`range`,$=w===`range`;return se(d.createElement(`div`,{className:v(x,ce,le,{[`${x}-border`]:de,[`${x}-disabled`]:j},R),style:z,onContextMenu:e=>e.preventDefault()},$&&fe&&d.createElement(`div`,{className:`${x}-range-header`},d.createElement(r.RangePicker,{className:`${x}-range-picker`,value:[y(H[0]),y(H[1])],onChange:Ee,allowClear:!1})),d.createElement(`div`,{className:`${x}-period`,style:{maxHeight:pe}},ge&&Oe&&d.createElement(`div`,{className:`${x}-quick-ops`},d.createElement(`span`,{className:`${x}-quick-label`},`快捷操作：`),i.map(e=>d.createElement(n,{key:e.value,className:`${x}-quick-radio`,value:e.value,checked:De===e.value,onChange:()=>Te(e.value)},e.text))),U.map((e,n)=>{let r=[],i=null;return e.hours.forEach((e,t)=>{if(!e.selected||!e.tips){i&&=(r.push(i),null);return}!i||i.tips!==e.tips||i.end!==t-1?(i&&r.push(i),i={start:t,end:t,tips:e.tips}):i.end=t}),i&&r.push(i),d.createElement(`ul`,{className:`${x}-row`,key:n},V&&r.map((e,t)=>d.createElement(`div`,{key:t,className:`${x}-tips`,style:{left:`${7+J/2+e.start*J}%`,width:`${(e.end-e.start+1)*J}%`}},d.createElement(`span`,{className:`${x}-tips-text`},e.tips))),d.createElement(`li`,{className:`${x}-all`,style:{width:`7%`,marginRight:`${J/2}%`}},d.createElement(`span`,{className:`${x}-all-tip`},$&&e.date?`${e.date} `:null,`时间段`),me&&!V?d.createElement(t,{className:`${x}-all-btn`,size:`small`,type:e.selected?`primary`:`default`,onClick:()=>Se(n)},e.name):d.createElement(`span`,{className:`${x}-all-text`},e.name)),e.hours.map((e,t)=>d.createElement(`li`,{key:t,className:v(`${x}-cell`,{[`${x}-cell-milestone`]:e.milestone,[`${x}-cell-selected`]:e.selected,[`${x}-cell-readonly`]:e.readonly,[`${x}-cell-pointer`]:!V&&!e.readonly}),style:{width:`${J}%`,...e.color?{"--color-brand":e.color}:{}},"data-period":n,"data-hour":t,onMouseDown:e=>ye(e,n,t),onMouseEnter:()=>be(n,t),onContextMenu:e=>xe(e,n,t)},d.createElement(`div`,{className:`${x}-cell-inner`}),d.createElement(`div`,{className:v(`${x}-line-start`,{[`${x}-line-hide`]:!e.firstSelected}),style:{zIndex:e.zIndex}},(e.selected||e.showText)&&d.createElement(`span`,{className:`${x}-line-info`},d.createElement(`span`,{className:`${x}-line-info-text`},e.showText?e.index:``))),d.createElement(`div`,{className:v(`${x}-line-end`,{[`${x}-line-hide`]:!e.endSelected}),style:{zIndex:e.zIndex}},d.createElement(`span`,{className:`${x}-line-info`},d.createElement(`span`,{className:`${x}-line-info-text`},e.showNextText?e.indexNext:``))),d.createElement(`div`,{className:`${x}-cell-line`},(e.selected||e.showText)&&d.createElement(`span`,{className:`${x}-cell-info`},d.createElement(`span`,{className:`${x}-line-info-text`},e.showText?e.index:``))))),d.createElement(`li`,{className:v(`${x}-cell`,`${x}-cell-milestone`,`${x}-cell-last`,{[`${x}-cell-pointer`]:!V}),style:{width:`${J/2}%`}},d.createElement(`div`,{className:`${x}-cell-line`},d.createElement(`span`,{className:`${x}-cell-info`},d.createElement(`span`,{className:`${x}-line-info-text`},O)))))})),!V&&(B||G||E)&&d.createElement(`div`,{className:`${x}-oper`},B&&d.createElement(t,{className:`${x}-oper-clear`,type:`default`,size:`small`,onClick:Ce},`清空`),he&&d.createElement(t,{className:`${x}-oper-clear`,type:`default`,size:`small`,onClick:we},`重置`),G&&d.createElement(`span`,{className:`${x}-oper-error`},d.createElement(ae,{className:`${x}-oper-error-icon`}),d.createElement(`span`,{dangerouslySetInnerHTML:{__html:G}})),E&&d.createElement(`span`,{className:`${x}-oper-tip`,style:{marginRight:`${J/2}%`}},E))))});b.displayName=`HourPanel`;export{b as default};

package/es/hour-panel/style/index.d.ts

@@ -0,0 +1,15 @@
+import "../../theme/internal.js";
+import { GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+//#region components/hour-panel/style/index.d.ts
+/** Component only token */
+export interface ComponentToken {
+  /**
+   * @desc 单元格高度
+   * @descEN Cell height
+   */
+  cellHeight: number | string;
+}
+export declare const prepareComponentToken: GetDefaultToken<'HourPanel'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: React.ReactElement) => React.ReactElement, string, string];
+//#endregion
+export { _default as default };

package/es/hour-panel/style/index.js

@@ -0,0 +1 @@
+import{resetComponent as e}from"../../style/index.js";import{genStyleHooks as t}from"../../theme/util/genStyleUtils.js";import{mergeToken as n}from"../../theme/internal.js";import{unit as r}from"@ant-design/cssinjs";const i=t=>{let{componentCls:n}=t;return{[n]:{...e(t),"--color-brand":t.colorPrimary,"--color-brand-light":t.colorPrimaryBorderHover,"--color-border":t.colorBorderSecondary,"--border-radius":0,"--font-size":r(t.fontSize),"--font-color":t.colorText,"--input-small-height":r(t.hourInputSmallHeight),"--color-red":t.colorError,[`&${n}-border`]:{border:`${r(t.lineWidth)} ${t.lineType} var(--color-border)`,padding:r(t.padding),borderRadius:`var(--border-radius)`},[`&${n}-disabled`]:{opacity:.45,cursor:`not-allowed`,userSelect:`none`,"*, *::before, *::after":{cursor:`not-allowed !important`,pointerEvents:`none`}},[`${n}-range-header`]:{display:`flex`,justifyContent:`flex-end`,marginBottom:r(t.marginSM)},[`${n}-range-picker`]:{width:`auto`},[`${n}-quick-ops`]:{display:`flex`,alignItems:`center`},[`${n}-quick-label`]:{color:t.colorTextTertiary,marginRight:r(t.marginSM),marginLeft:`16px`},[`${n}-quick-radio`]:{marginRight:r(t.marginXL)},[`${n}-period`]:{display:`flex`,flexDirection:`column`,gap:r(16),paddingTop:r(16),overflowY:`auto`,[`${n}-row`]:{listStyle:`none`,margin:0,padding:`${r(16)} 0`,borderBottom:`${r(t.lineWidth)} ${t.lineType} var(--color-border)`,display:`flex`,flexWrap:`nowrap`,position:`relative`,"&::before, &::after":{display:`table`,content:`""`},"&::after":{clear:`both`},"&:last-child":{borderBottom:`none`}}},[`${n}-all`]:{position:`relative`,height:t.hourCellHeight,display:`flex`,alignItems:`center`,justifyContent:`center`,flexShrink:0,borderRadius:`var(--border-radius)`,userSelect:`none`},[`${n}-all-tip`]:{position:`absolute`,top:r(-18),width:`100%`,height:r(18),lineHeight:r(18),textAlign:`center`,color:t.colorTextTertiary,whiteSpace:`nowrap`,overflow:`hidden`,textOverflow:`ellipsis`,padding:`0 ${r(4)}`},[`${n}-all-btn`]:{fontSize:`var(--font-size)`,padding:`0 ${r(16)}`,borderRadius:`12px`},[`${n}-all-text`]:{width:`100%`,fontSize:`var(--font-size)`,color:t.colorTextSecondary,height:`var(--input-small-height)`,display:`inline-flex`,alignItems:`center`,justifyContent:`center`},[`${n}-cell`]:{position:`relative`,height:t.hourCellHeight,textAlign:`center`,color:t.colorTextTertiary,lineHeight:r(20),fontWeight:`bold`,fontFamily:`Tahoma`,flexShrink:0},[`${n}-cell-pointer`]:{cursor:`pointer`},[`${n}-cell-readonly`]:{cursor:`default`},[`${n}-cell-milestone`]:{[`${n}-cell-line`]:{height:r(16)}},[`${n}-cell-selected`]:{[`${n}-cell-inner`]:{"&::before, &::after":{backgroundColor:`var(--color-brand)`}},[`${n}-cell-line`]:{[`${n}-cell-info`]:{color:t.colorTextLightSolid}}},[`${n}-cell-inner`]:{position:`relative`,height:t.hourCellHeight,"&::before":{opacity:.1,content:`""`,position:`absolute`,top:0,left:0,width:`100%`,height:`100%`,backgroundColor:`transparent`},"&::after":{content:`""`,position:`absolute`,top:r(-16),left:0,width:`100%`,height:r(16),backgroundColor:`transparent`}},[`${n}-cell-line`]:{position:`absolute`,top:r(13),left:0,width:0,height:r(10),borderLeft:`${r(t.lineWidth)} solid var(--color-brand-light)`,[`${n}-cell-info`]:{position:`absolute`,top:r(-31),left:`50%`,width:r(40),marginLeft:r(-20),color:`var(--color-brand-light)`,display:`inline-flex`,alignItems:`center`,justifyContent:`center`,userSelect:`none`}},[`${n}-cell-last`]:{[`${n}-cell-line`]:{[`${n}-cell-info`]:{color:`var(--color-brand-light)`}}},[`${n}-line-start, ${n}-line-end`]:{position:`absolute`,top:0,width:0,height:t.hourCellHeight,borderLeft:`${r(t.lineWidth)} solid var(--color-brand)`,"&::before":{content:`""`,position:`absolute`,top:0,right:r(-3),width:0,height:0,borderLeft:`${r(4)} solid transparent`,borderRight:`${r(4)} solid transparent`,borderTop:`${r(4)} solid var(--color-brand)`},[`${n}-line-info`]:{position:`absolute`,top:r(-16),left:r(-12),width:r(24),height:r(16),backgroundColor:`var(--color-brand)`,color:t.colorTextLightSolid,display:`inline-flex`,alignItems:`center`,justifyContent:`center`,borderRadius:r(2),whiteSpace:`nowrap`}},[`${n}-line-start`]:{left:0},[`${n}-line-end`]:{right:r(-1)},[`${n}-line-hide`]:{display:`none`},[`${n}-line-info-text`]:{fontSize:r(20),transform:`scale(0.5)`,display:`inline-block`},[`${n}-tips`]:{position:`absolute`,top:r(26),height:r(16),display:`flex`,alignItems:`center`,justifyContent:`center`,pointerEvents:`none`,zIndex:2,overflow:`hidden`,[`${n}-tips-text`]:{display:`inline-block`,color:`var(--color-brand)`,fontSize:r(12),fontWeight:`normal`,whiteSpace:`nowrap`,overflow:`hidden`,textOverflow:`ellipsis`,maxWidth:`100%`,padding:`0 ${r(4)}`,userSelect:`none`}},[`${n}-oper`]:{display:`flex`,alignItems:`center`,gap:r(t.marginSM),paddingTop:r(16),minHeight:r(t.controlHeightSM),borderTop:`${r(t.lineWidth)} ${t.lineType} var(--color-border)`,"&::before, &::after":{display:`table`,content:`""`},"&::after":{clear:`both`}},[`${n}-oper-clear`]:{fontSize:`var(--font-size)`,padding:`0 ${r(16)}`,borderRadius:`12px`},[`${n}-oper-error`]:{display:`inline-flex`,alignItems:`center`,gap:r(t.marginXXS),height:`var(--input-small-height)`,color:`var(--color-red)`,[`${n}-oper-error-icon`]:{fontSize:r(t.fontSize),color:`var(--color-red)`}},[`${n}-oper-tip`]:{marginLeft:`auto`,display:`inline-flex`,alignItems:`center`,height:`var(--input-small-height)`,color:`var(--font-color)`}}}},a=()=>({cellHeight:36});var o=t(`HourPanel`,e=>{let t=n(e,{hourCellHeight:e.cellHeight,hourInputSmallHeight:12});return[i(t)]},a);export{o as default,a as prepareComponentToken};

package/es/hour-panel/style/style.d.ts

@@ -0,0 +1,3 @@
+//#region components/hour-panel/style/style.d.ts
+export declare const HourPanelWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+//#endregion

package/es/hour-panel/style/style.js

@@ -0,0 +1,351 @@
+import e from"styled-components";const t=e.div`
+  .hour-panel {
+    /* CSS 变量 */
+    --color-brand: #1677ff;
+    --color-brand-light: #69b1ff;
+    --color-border: #f0f0f0;
+    --border-radius: 0;
+    --font-size: 14px;
+    --font-color: rgba(0, 0, 0, 0.88);
+    --input-small-height: 12px;
+    --color-red: #ff4d4f;
+  }
+
+  /* ==================== 边框模式 ==================== */
+  .hour-panel-border {
+    border: 1px solid var(--color-border);
+    padding: 16px;
+    border-radius: var(--border-radius);
+  }
+
+  /* ==================== 禁用模式 ==================== */
+  .hour-panel-disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    user-select: none;
+  }
+
+  .hour-panel-disabled *,
+  .hour-panel-disabled *::before,
+  .hour-panel-disabled *::after {
+    cursor: not-allowed !important;
+    pointer-events: none;
+  }
+
+  /* ==================== 日期范围选择器 ==================== */
+  .hour-panel-range-header {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 12px;
+  }
+
+  .hour-panel-range-picker {
+    width: auto;
+  }
+
+  /* ==================== 快捷操作 ==================== */
+  .hour-panel-quick-ops {
+    display: flex;
+    align-items: center;
+  }
+
+  .hour-panel-quick-label {
+    color: rgba(0, 0, 0, 0.45);
+    margin-right: 12px;
+    margin-left: 16px;
+  }
+
+  .hour-panel-quick-radio {
+    margin-right: 24px;
+  }
+
+  /* ==================== 时段区域 ==================== */
+  .hour-panel-period {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding-top: 16px;
+    overflow-y: auto;
+  }
+
+  .hour-panel-period .hour-panel-row {
+    list-style: none;
+    margin: 0;
+    padding: 16px 0;
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    flex-wrap: nowrap;
+    position: relative;
+  }
+
+  .hour-panel-period .hour-panel-row::before,
+  .hour-panel-period .hour-panel-row::after {
+    display: table;
+    content: "";
+  }
+
+  .hour-panel-period .hour-panel-row::after {
+    clear: both;
+  }
+
+  .hour-panel-period .hour-panel-row:last-child {
+    border-bottom: none;
+  }
+
+  /* ==================== 全选按钮区域 ==================== */
+  .hour-panel-all {
+    position: relative;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: var(--border-radius);
+    user-select: none;
+  }
+
+  .hour-panel-all-tip {
+    position: absolute;
+    top: -18px;
+    width: 100%;
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.45);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 4px;
+  }
+
+  .hour-panel-all-btn {
+    font-size: var(--font-size);
+    padding: 0 16px;
+    border-radius: 12px;
+  }
+
+  .hour-panel-all-text {
+    width: 100%;
+    font-size: var(--font-size);
+    color: rgba(0, 0, 0, 0.65);
+    height: var(--input-small-height);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* ==================== 时间格子 ==================== */
+  .hour-panel-cell {
+    position: relative;
+    height: 36px;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 20px;
+    font-weight: bold;
+    font-family: Tahoma;
+    flex-shrink: 0;
+  }
+
+  .hour-panel-cell-pointer {
+    cursor: pointer;
+  }
+
+  .hour-panel-cell-readonly {
+    cursor: default;
+  }
+
+  .hour-panel-cell-milestone .hour-panel-cell-line {
+    height: 16px;
+  }
+
+  .hour-panel-cell-selected .hour-panel-cell-inner::before,
+  .hour-panel-cell-selected .hour-panel-cell-inner::after {
+    background-color: var(--color-brand);
+  }
+
+  .hour-panel-cell-selected .hour-panel-cell-line .hour-panel-cell-info {
+    color: #fff;
+  }
+
+  .hour-panel-cell-inner {
+    position: relative;
+    height: 36px;
+  }
+
+  .hour-panel-cell-inner::before {
+    opacity: 0.1;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+  }
+
+  .hour-panel-cell-inner::after {
+    content: "";
+    position: absolute;
+    top: -16px;
+    left: 0;
+    width: 100%;
+    height: 16px;
+    background-color: transparent;
+  }
+
+  .hour-panel-cell-line {
+    position: absolute;
+    top: 13px;
+    left: 0;
+    width: 0;
+    height: 10px;
+    border-left: 1px solid var(--color-brand-light);
+  }
+
+  .hour-panel-cell-line .hour-panel-cell-info {
+    position: absolute;
+    top: -31px;
+    left: 50%;
+    width: 40px;
+    margin-left: -20px;
+    color: var(--color-brand-light);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+  }
+
+  .hour-panel-cell-last .hour-panel-cell-line .hour-panel-cell-info {
+    color: var(--color-brand-light);
+  }
+
+  /* ==================== 选中起止标记 ==================== */
+  .hour-panel-line-start,
+  .hour-panel-line-end {
+    position: absolute;
+    top: 0;
+    width: 0;
+    height: 36px;
+    border-left: 1px solid var(--color-brand);
+  }
+
+  .hour-panel-line-start::before,
+  .hour-panel-line-end::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: -3px;
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid var(--color-brand);
+  }
+
+  .hour-panel-line-start .hour-panel-line-info,
+  .hour-panel-line-end .hour-panel-line-info {
+    position: absolute;
+    top: -16px;
+    left: -12px;
+    width: 24px;
+    height: 16px;
+    background-color: var(--color-brand);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 2px;
+    white-space: nowrap;
+  }
+
+  .hour-panel-line-start {
+    left: 0;
+  }
+
+  .hour-panel-line-end {
+    right: -1px;
+  }
+
+  .hour-panel-line-hide {
+    display: none;
+  }
+
+  .hour-panel-line-info-text {
+    font-size: 20px;
+    transform: scale(0.5);
+    display: inline-block;
+  }
+
+  /* ==================== 选中区域提示文字 ==================== */
+  .hour-panel-tips {
+    position: absolute;
+    top: 26px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 2;
+    overflow: hidden;
+  }
+
+  .hour-panel-tips .hour-panel-tips-text {
+    display: inline-block;
+    color: var(--color-brand);
+    font-size: 12px;
+    font-weight: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    padding: 0 4px;
+    user-select: none;
+  }
+
+  /* ==================== 底部操作区 ==================== */
+  .hour-panel-oper {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-top: 16px;
+    min-height: 24px;
+    border-top: 1px solid var(--color-border);
+  }
+
+  .hour-panel-oper::before,
+  .hour-panel-oper::after {
+    display: table;
+    content: "";
+  }
+
+  .hour-panel-oper::after {
+    clear: both;
+  }
+
+  .hour-panel-oper-clear {
+    font-size: var(--font-size);
+    padding: 0 16px;
+    border-radius: 12px;
+  }
+
+  .hour-panel-oper-error {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: var(--input-small-height);
+    color: var(--color-red);
+  }
+
+  .hour-panel-oper-error .hour-panel-oper-error-icon {
+    font-size: 14px;
+    color: var(--color-red);
+  }
+
+  .hour-panel-oper-tip {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    height: var(--input-small-height);
+    color: var(--font-color);
+  }
+`;export{t as HourPanelWrapper};

package/es/hour-panel/types.d.ts

@@ -0,0 +1,147 @@
+import { ReactNode } from "react";
+//#region components/hour-panel/types.d.ts
+/** 选择模式 */
+export type MuxHourMode = 'common' | 'day' | 'range';
+/** 选中时间段配置 */
+export interface IMuxHourTimeSegment {
+  /** 选中的小时数组，如 [2, 3, 4] */
+  time: number[];
+  /** 选中时间段的颜色，默认使用主题色 */
+  color?: string;
+  /** 选中时间段的提示信息，显示在选中区域竖线上方，超出部分省略 */
+  tips?: ReactNode;
+  /** 当前时间段是否不可取消 */
+  readonly?: boolean;
+}
+/** 选中项 */
+export interface IMuxHourSelected {
+  /** 周几组合，1-7 的任意组合，如 [1, 2, 3, 4, 5] */
+  week: number[];
+  /** 日期（range 模式下使用，格式 YYYY-MM-DD） */
+  date?: string;
+  /** 周几名称，如 '周一' */
+  name?: string;
+  /** 选中的时间段数组 */
+  times: IMuxHourTimeSegment[];
+}
+export interface IMuxHourGroupColor {
+  /** 时间段，0-24 的任意组合，如 [1, 2, 3, 4, 5] */
+  time: number[];
+  /** 自定义当前时间段的颜色 */
+  color?: string;
+}
+/** 自定义分组（对象形式） */
+export interface IMuxHourGroup {
+  /** 分组文案 */
+  text?: string;
+  /** 周几组合，1-7 的任意组合，如 [1, 2, 3, 4, 5] */
+  value: number[];
+  /** 自定义色值数组，可批量为指定时间段配置颜色 */
+  colors?: IMuxHourGroupColor[];
+}
+/** 分组配置，支持简单数组或对象数组 */
+export type MuxHourGroups = IMuxHourGroup[];
+/** 校验结果 */
+export interface IMuxHourCheckResult {
+  /** 是否校验通过 */
+  ok: boolean;
+  /** 校验结果信息 */
+  msg: string;
+  /** 当前选中结果 */
+  data: IMuxHourSelected[];
+}
+/** 内部时段数据 */
+export interface IHourPeriod {
+  name: string;
+  weeks: string[];
+  hours: IHourCell[];
+  selected: boolean;
+  /** 日期（range 模式下使用，格式 YYYY-MM-DD） */
+  date?: string;
+}
+/** 内部小时格子数据 */
+export interface IHourCell {
+  index: number;
+  indexNext: number;
+  showText: boolean;
+  showNextText: boolean;
+  milestone: boolean;
+  zIndex: number;
+  selected: boolean;
+  firstSelected: boolean;
+  endSelected: boolean;
+  color?: string;
+  /** 当前格子所属时间段的提示信息 */
+  tips?: ReactNode;
+  /** 当前格子是否不可取消选中 */
+  readonly?: boolean;
+}
+/** 快捷操作类型 */
+export interface IHourQuickType {
+  text: string;
+  value: string;
+}
+export interface IMuxHourProps {
+  /** 当前选中值（受控） */
+  value?: IMuxHourSelected[];
+  /** 默认选中值（非受控） */
+  defaultValue?: IMuxHourSelected[];
+  /** 选择模式，'common' 只区分工作日和双休日，'day' 每日单独选择，'range' 按日期范围选择 */
+  mode?: MuxHourMode;
+  /** 自定义分组信息 */
+  groups?: MuxHourGroups;
+  /** 右下角提示文案 */
+  tip?: ReactNode;
+  /** 开始时间，默认 0 */
+  min?: number;
+  /** 结束时间，默认 24 */
+  max?: number;
+  /** 单格步长，默认 1 */
+  step?: number;
+  /** 是否隐藏小数文本 */
+  hideDecimalText?: boolean;
+  /** 只读模式 */
+  readonly?: boolean;
+  /** 禁用模式，与只读逻辑相同，但会有置灰效果 */
+  disabled?: boolean;
+  /** 是否需要边框 + 背景色 */
+  border?: boolean;
+  /** 是否要求每日选择结果为连续的时间段 */
+  continuous?: boolean;
+  /** 每日可选择最小时段个数 */
+  minLength?: number;
+  /** 每日可选择最大时段个数 */
+  maxLength?: number;
+  /** 自定义错误校验提示 */
+  errorTip?: string;
+  /** 选择项发生变化且校验通过时触发 */
+  onChange?: (selected: IMuxHourSelected[]) => void;
+  /** 鼠标右键点击已选中的时间段时触发 */
+  onContextMenu?: (selected: IMuxHourSelected, e: React.MouseEvent) => void;
+  /** 自定义类名 */
+  className?: string;
+  /** 是否显示日期范围选择器（仅在 mode='range' 下生效） */
+  showDateRange?: boolean;
+  /** 时间段区域最大高度，默认 600 */
+  maxHeight?: number;
+  /** 是否显示全选按钮 */
+  hasAllBtn?: boolean;
+  /** 是否显示清空按钮 */
+  hasClearBtn?: boolean;
+  /** 是否显示重置按钮 */
+  hasResetBtn?: boolean;
+  /** 是否显示快捷操作 */
+  hasQuick?: boolean;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+}
+/** 通过 ref 暴露的实例方法 */
+export interface MuxHourRef {
+  /** 忽略校验，直接获取选中结果 */
+  val: () => IMuxHourSelected[];
+  /** 获取选中值及校验结果 */
+  check: () => IMuxHourCheckResult;
+}
+export declare const QUICK_TYPES: IHourQuickType[];
+export declare const WeekMap: Record<string, string>;
+//#endregion

package/es/hour-panel/types.js

@@ -0,0 +1 @@
+const e=[{text:`全日程`,value:`1234567`},{text:`工作日`,value:`12345`},{text:`双休日`,value:`67`}],t={1:`周一`,2:`周二`,3:`周三`,4:`周四`,5:`周五`,6:`周六`,7:`周日`};export{e as QUICK_TYPES,t as WeekMap};