@pisell/materials 6.11.17 → 6.11.18

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.stories.js

@@ -0,0 +1,273 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellTimeNavigator/PisellTimeNavigator.stories.tsx
+var PisellTimeNavigator_stories_exports = {};
+__export(PisellTimeNavigator_stories_exports, {
+  BusinessHours: () => BusinessHours,
+  BusinessHoursVertical: () => BusinessHoursVertical,
+  Controlled: () => Controlled,
+  ControlledVertical: () => ControlledVertical,
+  CursorMoves: () => CursorMoves,
+  CursorMovesVertical: () => CursorMovesVertical,
+  CustomRange: () => CustomRange,
+  CustomRangeVertical: () => CustomRangeVertical,
+  Default: () => Default,
+  DefaultVertical: () => DefaultVertical,
+  Inertia: () => Inertia,
+  InertiaVertical: () => InertiaVertical,
+  NoNowButton: () => NoNowButton,
+  NoNowButtonVertical: () => NoNowButtonVertical,
+  Realtime: () => Realtime,
+  RealtimeVertical: () => RealtimeVertical,
+  SnapToStep: () => SnapToStep,
+  SnapToStepVertical: () => SnapToStepVertical,
+  Step30: () => Step30,
+  Step30Vertical: () => Step30Vertical,
+  Uncontrolled: () => Uncontrolled,
+  UncontrolledVertical: () => UncontrolledVertical,
+  Vertical: () => Vertical,
+  default: () => PisellTimeNavigator_stories_default
+});
+module.exports = __toCommonJS(PisellTimeNavigator_stories_exports);
+var import_react = __toESM(require("react"));
+var import_PisellTimeNavigator = require("./PisellTimeNavigator");
+var meta = {
+  title: "Data Entry/PisellTimeNavigator",
+  component: import_PisellTimeNavigator.PisellTimeNavigator,
+  tags: ["autodocs"],
+  argTypes: {
+    cursorMode: {
+      control: "radio",
+      options: ["axis-moves", "cursor-moves"],
+      description: "指示器/轴移动模式"
+    },
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"],
+      description: "横向/竖向"
+    },
+    realtime: {
+      control: "boolean",
+      description: "是否实时跟随系统时间"
+    },
+    showNowButton: {
+      control: "boolean",
+      description: "是否显示 Now 按钮"
+    },
+    snapToStep: {
+      control: "boolean",
+      description: "是否吸附到刻度"
+    },
+    inertia: {
+      control: "boolean",
+      description: "是否开启惯性滚动"
+    },
+    locale: {
+      control: "select",
+      options: ["zh-cn", "en", "zh-hk"],
+      description: "语言"
+    }
+  }
+};
+var PisellTimeNavigator_stories_default = meta;
+var verticalDecorator = (Story) => /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 54, height: 500 } }, /* @__PURE__ */ import_react.default.createElement(Story, null));
+var Default = {
+  args: {}
+};
+var DefaultVertical = {
+  args: { orientation: "vertical" },
+  decorators: [verticalDecorator]
+};
+var Controlled = {
+  args: {
+    value: "12:00",
+    onChange: (v) => console.log("onChange", v == null ? void 0 : v.format("HH:mm"))
+  }
+};
+var ControlledVertical = {
+  args: {
+    orientation: "vertical",
+    value: "12:00",
+    onChange: (v) => console.log("onChange", v == null ? void 0 : v.format("HH:mm"))
+  },
+  decorators: [verticalDecorator]
+};
+var Uncontrolled = {
+  args: {
+    defaultValue: "14:30"
+  }
+};
+var UncontrolledVertical = {
+  args: {
+    orientation: "vertical",
+    defaultValue: "14:30"
+  },
+  decorators: [verticalDecorator]
+};
+var Vertical = {
+  args: {
+    orientation: "vertical",
+    defaultValue: "12:00"
+  },
+  decorators: [verticalDecorator]
+};
+var CursorMoves = {
+  args: {
+    cursorMode: "cursor-moves",
+    defaultValue: "10:00"
+  }
+};
+var CursorMovesVertical = {
+  args: {
+    orientation: "vertical",
+    cursorMode: "cursor-moves",
+    defaultValue: "10:00"
+  },
+  decorators: [verticalDecorator]
+};
+var BusinessHours = {
+  args: {
+    businessHours: { start: "10:00", end: "22:00" },
+    defaultValue: "14:00"
+  }
+};
+var BusinessHoursVertical = {
+  args: {
+    orientation: "vertical",
+    businessHours: { start: "10:00", end: "22:00" },
+    defaultValue: "14:00"
+  },
+  decorators: [verticalDecorator]
+};
+var CustomRange = {
+  args: {
+    range: { start: "08:00", end: "20:00" },
+    defaultValue: "12:00"
+  }
+};
+var CustomRangeVertical = {
+  args: {
+    orientation: "vertical",
+    range: { start: "08:00", end: "20:00" },
+    defaultValue: "12:00"
+  },
+  decorators: [verticalDecorator]
+};
+var Step30 = {
+  args: {
+    stepMinutes: 30,
+    defaultValue: "12:30"
+  }
+};
+var Step30Vertical = {
+  args: {
+    orientation: "vertical",
+    stepMinutes: 30,
+    defaultValue: "12:30"
+  },
+  decorators: [verticalDecorator]
+};
+var Inertia = {
+  args: {
+    inertia: true,
+    defaultValue: "12:00"
+  }
+};
+var InertiaVertical = {
+  args: {
+    orientation: "vertical",
+    inertia: true,
+    defaultValue: "12:00"
+  },
+  decorators: [verticalDecorator]
+};
+var SnapToStep = {
+  args: {
+    snapToStep: true,
+    defaultValue: "12:00"
+  }
+};
+var SnapToStepVertical = {
+  args: {
+    orientation: "vertical",
+    snapToStep: true,
+    defaultValue: "12:00"
+  },
+  decorators: [verticalDecorator]
+};
+var NoNowButton = {
+  args: {
+    showNowButton: false
+  }
+};
+var NoNowButtonVertical = {
+  args: {
+    orientation: "vertical",
+    showNowButton: false
+  },
+  decorators: [verticalDecorator]
+};
+var Realtime = {
+  args: {
+    realtime: true
+  }
+};
+var RealtimeVertical = {
+  args: {
+    orientation: "vertical",
+    realtime: true
+  },
+  decorators: [verticalDecorator]
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BusinessHours,
+  BusinessHoursVertical,
+  Controlled,
+  ControlledVertical,
+  CursorMoves,
+  CursorMovesVertical,
+  CustomRange,
+  CustomRangeVertical,
+  Default,
+  DefaultVertical,
+  Inertia,
+  InertiaVertical,
+  NoNowButton,
+  NoNowButtonVertical,
+  Realtime,
+  RealtimeVertical,
+  SnapToStep,
+  SnapToStepVertical,
+  Step30,
+  Step30Vertical,
+  Uncontrolled,
+  UncontrolledVertical,
+  Vertical
+});

package/lib/components/pisellTimeNavigator/components/BackgroundLayer.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface BackgroundLayerProps {
+    orientation: 'horizontal' | 'vertical';
+    /** 过去时间淡化色 */
+    pastTimeFade?: string;
+    /** 营业时间区间 [startPx, endPx]，用于视觉高亮 */
+    businessHoursPx?: [number, number];
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 背景区间层：营业时间高亮、过去时间淡化等（当前时间渐变已拆为独立块，见 axis-wrap 内 .pisell-time-navigator-current-gradient）
+ */
+export declare function BackgroundLayer({ orientation, pastTimeFade, businessHoursPx, className, style, }: BackgroundLayerProps): React.JSX.Element;

package/lib/components/pisellTimeNavigator/components/BackgroundLayer.js

@@ -0,0 +1,78 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellTimeNavigator/components/BackgroundLayer.tsx
+var BackgroundLayer_exports = {};
+__export(BackgroundLayer_exports, {
+  BackgroundLayer: () => BackgroundLayer
+});
+module.exports = __toCommonJS(BackgroundLayer_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+function BackgroundLayer({
+  orientation,
+  pastTimeFade,
+  businessHoursPx,
+  className,
+  style
+}) {
+  const isHorizontal = orientation === "horizontal";
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "pisell-time-navigator-background",
+        `pisell-time-navigator-background--${orientation}`,
+        className
+      ),
+      style,
+      "aria-hidden": true
+    },
+    businessHoursPx != null && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-time-navigator-background-business",
+        style: {
+          [isHorizontal ? "left" : "top"]: businessHoursPx[0],
+          [isHorizontal ? "width" : "height"]: Math.max(0, businessHoursPx[1] - businessHoursPx[0])
+        }
+      }
+    ),
+    pastTimeFade && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "pisell-time-navigator-background-past",
+        style: { background: pastTimeFade }
+      }
+    )
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BackgroundLayer
+});

package/lib/components/pisellTimeNavigator/components/CursorLayer.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+export interface CursorLayerProps {
+    orientation: 'horizontal' | 'vertical';
+    value: Dayjs | null;
+    timeFormat: string;
+    locale?: string;
+    isRealtime: boolean;
+    offsetPx: number;
+    /** axis-moves 时固定于视口中央，不应用 offsetPx */
+    fixedCenter?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    /** cursor-moves：允许拖指针改时间 */
+    dragInteractive?: boolean;
+    onDragPointerDown?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerMove?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerUp?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerCancel?: React.PointerEventHandler<HTMLDivElement>;
+}
+/**
+ * 时间指示器层：横向为「顶三角 + 竖长方条」SVG，竖向为横线 + 时间气泡
+ * 对齐基准为几何中心。Realtime 态 #FF692E，浏览态 #344054
+ */
+export declare function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, dragInteractive, onDragPointerDown, onDragPointerMove, onDragPointerUp, onDragPointerCancel, }: CursorLayerProps): React.JSX.Element | null;

package/lib/components/pisellTimeNavigator/components/CursorLayer.js

@@ -0,0 +1,111 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellTimeNavigator/components/CursorLayer.tsx
+var CursorLayer_exports = {};
+__export(CursorLayer_exports, {
+  CursorLayer: () => CursorLayer
+});
+module.exports = __toCommonJS(CursorLayer_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var CURSOR_ANCHOR_WIDTH_H = 22;
+var CURSOR_LINE_HEIGHT_V = 2;
+function CursorLayer({
+  orientation,
+  value,
+  timeFormat,
+  locale,
+  isRealtime,
+  offsetPx,
+  fixedCenter,
+  style,
+  className,
+  dragInteractive,
+  onDragPointerDown,
+  onDragPointerMove,
+  onDragPointerUp,
+  onDragPointerCancel
+}) {
+  if (value == null) return null;
+  const label = locale ? value.locale(locale).format(timeFormat) : value.format(timeFormat);
+  const isHorizontal = orientation === "horizontal";
+  const lineOffset = offsetPx - (isHorizontal ? CURSOR_ANCHOR_WIDTH_H / 2 : CURSOR_LINE_HEIGHT_V / 2);
+  const positionStyle = fixedCenter ? style ?? {} : dragInteractive && isHorizontal ? {
+    ...style,
+    left: offsetPx,
+    transform: "translateX(-50%)",
+    width: 36
+  } : dragInteractive && !isHorizontal ? {
+    ...style,
+    top: offsetPx,
+    transform: "translateX(-50%) translateY(-50%)",
+    height: 40
+  } : { ...style, [isHorizontal ? "left" : "top"]: lineOffset };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(
+        "pisell-time-navigator-cursor",
+        `pisell-time-navigator-cursor--${orientation}`,
+        { "pisell-time-navigator-cursor--realtime": isRealtime },
+        { "pisell-time-navigator-cursor--fixed": fixedCenter },
+        { "pisell-time-navigator-cursor--draggable": dragInteractive },
+        className
+      ),
+      style: positionStyle,
+      "aria-hidden": true,
+      onPointerDown: dragInteractive ? onDragPointerDown : void 0,
+      onPointerMove: dragInteractive ? onDragPointerMove : void 0,
+      onPointerUp: dragInteractive ? onDragPointerUp : void 0,
+      onPointerCancel: dragInteractive ? onDragPointerCancel : void 0
+    },
+    isHorizontal ? /* @__PURE__ */ import_react.default.createElement(
+      "svg",
+      {
+        className: "pisell-time-navigator-cursor-line pisell-time-navigator-cursor-line--token",
+        viewBox: "0 0 22 100",
+        preserveAspectRatio: "none",
+        focusable: "false",
+        "aria-hidden": true
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M 11 0 L 18 11 L 18 100 L 4 100 L 4 11 Z"
+        }
+      )
+    ) : /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-time-navigator-cursor-line" }),
+    /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-time-navigator-cursor-bubble" }, label)
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CursorLayer
+});

package/lib/components/pisellTimeNavigator/components/GestureLayer.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+export interface GestureLayerProps {
+    orientation: 'horizontal' | 'vertical';
+    cellSizePx: number;
+    /** 轴在滚动内容中的起始边距（左/上），用于把「滚动内容坐标」转为「轴内偏移」（与 dot 对齐） */
+    axisStartMarginPx: number;
+    offsetToTime: (offset: number) => Dayjs | null;
+    onSelectTime: (t: Dayjs) => void;
+    isInDisabledRanges: (t: Dayjs) => boolean;
+    snapToStep: boolean;
+    stepMinutes: number;
+    snapFn: (t: Dayjs) => Dayjs;
+    scrollPosition: {
+        scrollLeft: number;
+        scrollTop: number;
+    };
+    viewportSize: {
+        w: number;
+        h: number;
+    };
+    onPointerDown?: React.PointerEventHandler;
+    onPointerMove?: React.PointerEventHandler;
+    onPointerUp?: React.PointerEventHandler;
+    onPointerLeave?: React.PointerEventHandler;
+    /** 轴上任意指针按下（含惯性拖轴） */
+    onUserInteraction?: () => void;
+    children: React.ReactNode;
+}
+/**
+ * 交互层：点击刻度跳转、键盘左右/上下 + 回车
+ */
+export declare function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, onUserInteraction, children, }: GestureLayerProps): React.JSX.Element;