@publishfx/publish-components 2.1.0 → 2.1.2

package/README.md

@@ -1,15 +1,15 @@
-# @moonton/publish-components
+# @publishfx/publish-components
 
 A React UI component library for the Publish platform, built with React, TypeScript, and styled-components.
 
 ## Installation
 
 ```bash
-pnpm add @moonton/publish-components
+pnpm add @publishfx/publish-components
 # or
-npm install @moonton/publish-components
+npm install @publishfx/publish-components
 # or
-yarn add @moonton/publish-components
+yarn add @publishfx/publish-components
 ```
 
 ## Peer Dependencies
@@ -31,7 +31,7 @@ pnpm add react react-dom
 A customizable button component with predefined action types and icons.
 
 ```jsx
-import { ActionButton, ActionButtonType } from '@moonton/publish-components';
+import { ActionButton, ActionButtonType } from '@publishfx/publish-components';
 
 function App() {
   return (
@@ -63,7 +63,7 @@ function App() {
 A high-performance data table component with column resizing, sorting, pagination, and advanced formatting features.
 
 ```jsx
-import { PerformanceTable, PerformanceTableColumn } from '@moonton/publish-components';
+import { PerformanceTable, PerformanceTableColumn } from '@publishfx/publish-components';
 
 const columns: PerformanceTableColumn[] = [
   {
@@ -120,7 +120,7 @@ function App() {
 Sticky positioning components for creating sticky headers, sidebars, and other elements.
 
 ```jsx
-import { Sticky, StickyContainer } from '@moonton/publish-components';
+import { Sticky, StickyContainer } from '@publishfx/publish-components';
 
 function App() {
   return (
@@ -149,7 +149,7 @@ import {
   IconUpload,
   IconSearch,
   // ... and more
-} from '@moonton/publish-components';
+} from '@publishfx/publish-components';
 
 function App() {
   return (

package/dist/TimePickerSelect/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { TimePickerSelectProps, TimeOption, TimeInterval, GenerateTimeOptionsConfig } from "./interface";
+/**
+ * 生成时间选项
+ * @param config 配置
+ * @returns 时间选项列表
+ */
+export declare const generateTimeOptions: (config?: GenerateTimeOptionsConfig) => TimeOption[];
+/**
+ * 默认时间选项（00:00 - 23:30，每30分钟一个）
+ */
+export declare const defaultTimeOptions: TimeOption[];
+/**
+ * 时间选择器组件
+ * 基于 Arco Design Select 封装，提供网格布局的时间选择
+ */
+declare const TimePickerSelect: React.FC<TimePickerSelectProps>;
+export default TimePickerSelect;
+export type { TimePickerSelectProps, TimeOption, TimeInterval, GenerateTimeOptionsConfig, };

package/dist/TimePickerSelect/index.js

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { Checkbox, Select } from "@arco-design/web-react";
+import index_module from "./index.module.js";
+const Option = Select.Option;
+const generateTimeOptions = (config = {})=>{
+    const { startHour = 0, endHour = 23, interval = 30, format = "HH:mm" } = config;
+    const options = [];
+    for(let hour = startHour; hour <= endHour; hour++)for(let minute = 0; minute < 60; minute += interval){
+        const timeValue = 60 * hour + minute;
+        const label = format.replace("HH", hour.toString().padStart(2, "0")).replace("mm", minute.toString().padStart(2, "0"));
+        options.push({
+            label,
+            value: timeValue
+        });
+    }
+    return options;
+};
+const defaultTimeOptions = generateTimeOptions({
+    interval: 30
+});
+const TimePickerSelect = (props)=>{
+    const { options = defaultTimeOptions, value: controlledValue, defaultValue = [], onChange, placeholder = "请选择时间", disabled = false, className = "", style, dropdownClassName = "", dropdownStyle, maxTagCount = 4, showSelectAll = true, selectAllText = "全选", clearText = "清空", label, columnCount = 6 } = props;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = void 0 !== controlledValue;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const isAllSelected = useMemo(()=>{
+        const enabledOptions = options.filter((opt)=>!opt.disabled);
+        return enabledOptions.length > 0 && enabledOptions.every((opt)=>currentValue.includes(opt.value));
+    }, [
+        currentValue,
+        options
+    ]);
+    const isIndeterminate = useMemo(()=>currentValue.length > 0 && !isAllSelected, [
+        currentValue,
+        isAllSelected,
+        options
+    ]);
+    const handleChange = useCallback((newValue)=>{
+        const normalizedValue = Array.isArray(newValue) ? newValue : void 0 !== newValue ? [
+            newValue
+        ] : [];
+        const selectedOptions = options.filter((opt)=>normalizedValue.includes(opt.value));
+        if (!isControlled) setInternalValue(normalizedValue);
+        onChange?.(normalizedValue, selectedOptions);
+    }, [
+        onChange,
+        isControlled,
+        options
+    ]);
+    const handleSelectAll = useCallback(()=>{
+        const enabledOptions = options.filter((opt)=>!opt.disabled);
+        const allValues = enabledOptions.map((opt)=>opt.value);
+        isAllSelected ? handleChange([]) : handleChange(allValues);
+    }, [
+        handleChange,
+        isAllSelected,
+        options
+    ]);
+    const handleClear = useCallback(()=>{
+        handleChange([]);
+    }, [
+        handleChange
+    ]);
+    const renderDropdownHeader = useCallback(()=>{
+        if (!showSelectAll) return null;
+        return /*#__PURE__*/ jsxs("div", {
+            className: index_module.dropdownHeader,
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: index_module.selectAll,
+                    children: /*#__PURE__*/ jsx(Checkbox, {
+                        checked: isAllSelected,
+                        indeterminate: isIndeterminate,
+                        onChange: handleSelectAll,
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: index_module.selectAllText,
+                            children: selectAllText
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: index_module.clearBtn,
+                    onClick: handleClear,
+                    children: clearText
+                })
+            ]
+        });
+    }, [
+        showSelectAll,
+        isAllSelected,
+        isIndeterminate,
+        selectAllText,
+        clearText,
+        handleSelectAll,
+        handleClear
+    ]);
+    const renderDropdownContent = useCallback((menu)=>/*#__PURE__*/ jsxs("div", {
+            className: index_module.dropdownContent,
+            style: dropdownStyle,
+            children: [
+                renderDropdownHeader(),
+                /*#__PURE__*/ jsx("div", {
+                    className: index_module.optionsGrid,
+                    style: {
+                        gridTemplateColumns: `repeat(${columnCount}, 1fr)`
+                    },
+                    children: options.map((option)=>{
+                        const isSelected = currentValue.includes(option.value);
+                        return /*#__PURE__*/ jsx(Checkbox, {
+                            checked: isSelected,
+                            disabled: option.disabled,
+                            onChange: ()=>{
+                                if (option.disabled) return;
+                                const newValue = isSelected ? currentValue.filter((v)=>v !== option.value) : [
+                                    ...currentValue,
+                                    option.value
+                                ];
+                                handleChange(newValue);
+                            },
+                            className: `${index_module.optionCheckbox} ${isSelected ? index_module.optionCheckboxSelected : ""} ${option.disabled ? index_module.optionCheckboxDisabled : ""}`,
+                            children: /*#__PURE__*/ jsx("span", {
+                                className: index_module.optionLabel,
+                                children: option.label
+                            })
+                        }, option.value);
+                    })
+                })
+            ]
+        }), [
+        options,
+        currentValue,
+        dropdownStyle,
+        columnCount,
+        renderDropdownHeader,
+        handleChange
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: `${index_module.timePickerSelect_wrapper} ${className}`,
+        style: style,
+        children: [
+            label && /*#__PURE__*/ jsx("div", {
+                className: index_module.selectLabel,
+                children: label
+            }),
+            /*#__PURE__*/ jsx(Select, {
+                placeholder: placeholder,
+                disabled: disabled,
+                value: currentValue,
+                onChange: handleChange,
+                mode: "multiple",
+                maxTagCount: maxTagCount,
+                dropdownRender: renderDropdownContent,
+                triggerProps: {
+                    className: `${index_module.dropdownPopup} ${dropdownClassName}`
+                },
+                className: index_module.timePickerSelect_select,
+                children: options.map((option)=>/*#__PURE__*/ jsx(Option, {
+                        value: option.value,
+                        disabled: option.disabled,
+                        children: option.label
+                    }, option.value))
+            })
+        ]
+    });
+};
+const src_TimePickerSelect = TimePickerSelect;
+export { src_TimePickerSelect as default, defaultTimeOptions, generateTimeOptions };

package/dist/TimePickerSelect/index.module.js

@@ -0,0 +1,20 @@
+import "./index_module.css";
+const index_module = {
+    timePickerSelect_wrapper: "timePickerSelect_wrapper-ldzMK1",
+    timePickerSelectWrapper: "timePickerSelect_wrapper-ldzMK1",
+    selectLabel: "selectLabel-j8XQLR",
+    timePickerSelect_select: "timePickerSelect_select-xuD_LK",
+    timePickerSelectSelect: "timePickerSelect_select-xuD_LK",
+    dropdownPopup: "dropdownPopup-oUQ8vz",
+    dropdownContent: "dropdownContent-OfV283",
+    dropdownHeader: "dropdownHeader-nILpAL",
+    selectAll: "selectAll-H78Ezl",
+    selectAllText: "selectAllText-XhWUCP",
+    clearBtn: "clearBtn-aUkoKx",
+    optionsGrid: "optionsGrid-aFw9nI",
+    optionCheckbox: "optionCheckbox-FLZ7GF",
+    optionCheckboxSelected: "optionCheckboxSelected-FFTvH6",
+    optionCheckboxDisabled: "optionCheckboxDisabled-lcXcnC",
+    optionLabel: "optionLabel-KSY4BV"
+};
+export { index_module as default };

package/dist/TimePickerSelect/index_module.css

@@ -0,0 +1,234 @@
+.timePickerSelect_wrapper-ldzMK1 {
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  min-width: 120px;
+  display: flex;
+}
+
+.selectLabel-j8XQLR {
+  color: #000000d9;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.57;
+}
+
+.timePickerSelect_select-xuD_LK {
+  width: 100%;
+}
+
+.timePickerSelect_select-xuD_LK .arco-select-view {
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  min-height: 32px;
+  padding: 4px 12px;
+  transition: all .2s;
+}
+
+.timePickerSelect_select-xuD_LK .arco-select-view:hover {
+  border-color: #40a9ff;
+}
+
+.timePickerSelect_select-xuD_LK .arco-select-view-focused {
+  border-color: #1890ff;
+  box-shadow: 0 0 0 2px #1890ff33;
+}
+
+.timePickerSelect_select-xuD_LK .arco-select-view-disabled {
+  cursor: not-allowed;
+  background-color: #fafafa;
+}
+
+.timePickerSelect_select-xuD_LK .arco-select-view-selector {
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.timePickerSelect_select-xuD_LK .arco-select-view-placeholder {
+  color: #00000073;
+  font-size: 14px;
+}
+
+.timePickerSelect_select-xuD_LK .arco-select-arrow-icon {
+  color: #00000073;
+  font-size: 16px;
+  transition: transform .2s;
+}
+
+.timePickerSelect_select-xuD_LK .arco-select-open .arco-select-arrow-icon {
+  transform: rotate(180deg);
+}
+
+.timePickerSelect_select-xuD_LK .arco-tag {
+  color: #000000d9;
+  background-color: #fafafa;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 8px;
+  font-size: 12px;
+  display: inline-flex;
+}
+
+.timePickerSelect_select-xuD_LK .arco-tag .arco-tag-content {
+  line-height: 1;
+}
+
+.timePickerSelect_select-xuD_LK .arco-tag .arco-tag-icon-hover {
+  color: #00000073;
+  justify-content: center;
+  align-items: center;
+  width: 12px;
+  height: 12px;
+  margin-left: 0;
+  transition: color .2s;
+  display: flex;
+}
+
+.timePickerSelect_select-xuD_LK .arco-tag .arco-tag-icon-hover:hover {
+  color: #000000a6;
+}
+
+.timePickerSelect_select-xuD_LK .arco-tag .arco-tag-icon-hover svg {
+  font-size: 12px;
+}
+
+.dropdownPopup-oUQ8vz .arco-select-popup {
+  box-shadow: none;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+.dropdownContent-OfV283 {
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  min-width: 320px;
+  padding: 8px;
+  box-shadow: 0 2px 8px #0000001a;
+}
+
+.dropdownHeader-nILpAL {
+  border-bottom: 1px solid #fafafa;
+  justify-content: space-between;
+  align-items: center;
+  height: 32px;
+  margin-bottom: 8px;
+  padding-bottom: 8px;
+  display: flex;
+}
+
+.dropdownHeader-nILpAL .selectAll-H78Ezl {
+  cursor: pointer;
+}
+
+.dropdownHeader-nILpAL .selectAll-H78Ezl .arco-checkbox {
+  margin-right: 0;
+}
+
+.dropdownHeader-nILpAL .selectAll-H78Ezl .arco-checkbox-text {
+  margin-left: 4px;
+}
+
+.dropdownHeader-nILpAL .selectAll-H78Ezl .selectAllText-XhWUCP {
+  color: #1890ff;
+  font-size: 14px;
+}
+
+.dropdownHeader-nILpAL .clearBtn-aUkoKx {
+  color: #00000073;
+  cursor: pointer;
+  font-size: 14px;
+  transition: color .2s;
+}
+
+.dropdownHeader-nILpAL .clearBtn-aUkoKx:hover {
+  color: #1890ff;
+}
+
+.optionsGrid-aFw9nI {
+  gap: 8px;
+  max-height: 256px;
+  display: grid;
+  overflow-y: auto;
+}
+
+.optionCheckbox-FLZ7GF {
+  border-radius: 2px;
+  align-items: center;
+  height: 32px;
+  margin: 0;
+  padding: 0 4px;
+  transition: background-color .2s;
+  display: flex;
+}
+
+.optionCheckbox-FLZ7GF:hover {
+  background-color: #fafafa;
+}
+
+.optionCheckbox-FLZ7GF .arco-checkbox-inner {
+  border-color: #d9d9d9;
+  border-radius: 2px;
+  width: 16px;
+  height: 16px;
+}
+
+.optionCheckbox-FLZ7GF .arco-checkbox-inner:after {
+  border-width: 2px;
+  width: 5px;
+  height: 9px;
+  top: 46%;
+  left: 24%;
+}
+
+.optionCheckbox-FLZ7GF.optionCheckboxSelected-FFTvH6 .arco-checkbox-inner {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+
+.optionCheckbox-FLZ7GF.optionCheckboxDisabled-lcXcnC {
+  opacity: .5;
+  cursor: not-allowed;
+}
+
+.optionCheckbox-FLZ7GF.optionCheckboxDisabled-lcXcnC .arco-checkbox-inner {
+  background-color: #fafafa;
+  border-color: #d9d9d9;
+}
+
+.optionCheckbox-FLZ7GF .arco-checkbox-text {
+  margin-left: 4px;
+}
+
+.optionLabel-KSY4BV {
+  color: #000000d9;
+  user-select: none;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+  font-size: 14px;
+}
+
+.optionsGrid-aFw9nI::-webkit-scrollbar {
+  width: 6px;
+}
+
+.optionsGrid-aFw9nI::-webkit-scrollbar-track {
+  background: none;
+}
+
+.optionsGrid-aFw9nI::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 3px;
+}
+
+.optionsGrid-aFw9nI::-webkit-scrollbar-thumb:hover {
+  background: #00000073;
+}
+

package/dist/TimePickerSelect/interface.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 时间选项
+ */
+export interface TimeOption {
+    /** 选项标签 */
+    label: string;
+    /** 选项值 */
+    value: string | number;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+/**
+ * TimePickerSelect 组件属性
+ */
+export interface TimePickerSelectProps {
+    /** 时间选项列表 */
+    options?: TimeOption[];
+    /** 选中的值（受控模式） */
+    value?: string[] | number[];
+    /** 默认选中的值（非受控模式） */
+    defaultValue?: string[] | number[];
+    /** 选中的值改变时的回调 */
+    onChange?: (value: string[] | number[], options: TimeOption[]) => void;
+    /** 占位符文本 */
+    placeholder?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 样式类名 */
+    className?: string;
+    /** 内联样式 */
+    style?: React.CSSProperties;
+    /** 下拉框样式类名 */
+    dropdownClassName?: string;
+    /** 下拉框样式 */
+    dropdownStyle?: React.CSSProperties;
+    /** 最多显示的标签数量 */
+    maxTagCount?: number;
+    /** 是否显示全选/清空 */
+    showSelectAll?: boolean;
+    /** 全选文本 */
+    selectAllText?: string;
+    /** 清空文本 */
+    clearText?: string;
+    /** 标签文本 */
+    label?: string;
+    /** 每行显示的选项数量 */
+    columnCount?: number;
+}
+/**
+ * 预设时间间隔（分钟）
+ */
+export type TimeInterval = 15 | 30 | 60;
+/**
+ * 生成时间选项的辅助函数配置
+ */
+export interface GenerateTimeOptionsConfig {
+    /** 开始时间（小时，0-23） */
+    startHour?: number;
+    /** 结束时间（小时，0-23） */
+    endHour?: number;
+    /** 时间间隔（分钟） */
+    interval?: TimeInterval;
+    /** 时间格式 */
+    format?: string;
+}

package/dist/index.d.ts

@@ -3,3 +3,5 @@ export type { ActionButtonProps, } from "./ActionButton/interface";
 export { default as ActionButton } from "./ActionButton";
 export { default as CompareChange } from "./CompareChange";
 export { Sticky, StickyContainer } from "./ReactSticky";
+export { default as TimePickerSelect, generateTimeOptions, defaultTimeOptions, } from "./TimePickerSelect";
+export type { TimePickerSelectProps, TimeOption, TimeInterval, GenerateTimeOptionsConfig, } from "./TimePickerSelect";

package/dist/index.js

@@ -2,4 +2,5 @@ import { ActionButtonType } from "./ActionButton/interface.js";
 import ActionButton from "./ActionButton/index.js";
 import CompareChange from "./CompareChange/index.js";
 import { Sticky, StickyContainer } from "./ReactSticky/index.js";
-export { ActionButton, ActionButtonType, CompareChange, Sticky, StickyContainer };
+import TimePickerSelect, { defaultTimeOptions, generateTimeOptions } from "./TimePickerSelect/index.js";
+export { ActionButton, ActionButtonType, CompareChange, Sticky, StickyContainer, TimePickerSelect, defaultTimeOptions, generateTimeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@publishfx/publish-components",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "A React UI component library for the Publish platform, including ActionButton component",
   "type": "module",
   "keywords": [