trotl-filter 1.0.44 → 1.0.46

package/dist/index.cjs.js

@@ -8651,6 +8651,164 @@ MultiSelect.propTypes = {
   className: PropTypes.string
 };
 
+// Simple, dependency-free ColorPicker
+// Props: value (hex), onChange(hex), disabled, label, presetColors, allowCustom, size
+function ColorPicker({
+  value = '#1677ff',
+  onChange,
+  disabled = false,
+  label = null,
+  presetColors = ['#1677ff', '#ff4d4f', '#52c41a', '#faad14', '#722ed1', '#13c2c2', '#f5222d'],
+  allowCustom = true,
+  showHexInput = true,
+  size = 'medium',
+  // small | medium | large
+  className = '',
+  style = {}
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [internal, setInternal] = React.useState(value || '');
+  const ref = React.useRef(null);
+  React.useEffect(() => setInternal(value || ''), [value]);
+  React.useEffect(() => {
+    const onDoc = e => {
+      if (!ref.current) return;
+      if (!ref.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener('mousedown', onDoc);
+    return () => window.removeEventListener('mousedown', onDoc);
+  }, []);
+  const apply = hex => {
+    setInternal(hex);
+    onChange?.(hex);
+  };
+  const btnSize = size === 'small' ? 20 : size === 'large' ? 36 : 28;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: `color-picker ${className}`,
+    style: {
+      display: 'inline-block',
+      ...style
+    }
+  }, label && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 6,
+      fontSize: 13
+    }
+  }, label), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: () => !disabled && setOpen(s => !s),
+    disabled: disabled,
+    "aria-label": label || 'Choose color',
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 8,
+      padding: '6px 8px',
+      borderRadius: 6,
+      border: '1px solid #d9d9d9',
+      background: '#fff',
+      cursor: disabled ? 'not-allowed' : 'pointer'
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: btnSize,
+      height: btnSize,
+      borderRadius: 4,
+      background: internal || '#fff',
+      border: '1px solid #ccc'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: 13,
+      color: disabled ? '#9ca3af' : '#000'
+    }
+  }, internal || '—')), open && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      zIndex: 60,
+      marginTop: 8,
+      background: '#fff',
+      border: '1px solid #e8e8e8',
+      boxShadow: '0 6px 18px rgba(0,0,0,0.08)',
+      borderRadius: 6,
+      padding: 12,
+      minWidth: 220
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8,
+      flexWrap: 'wrap'
+    }
+  }, presetColors.map(c => /*#__PURE__*/React.createElement("button", {
+    key: c,
+    onClick: () => apply(c),
+    "aria-label": c,
+    style: {
+      width: 28,
+      height: 28,
+      borderRadius: 4,
+      background: c,
+      border: c.toLowerCase() === (internal || '').toLowerCase() ? '2px solid #00000033' : '1px solid #eee',
+      cursor: 'pointer'
+    }
+  })), allowCustom && /*#__PURE__*/React.createElement("input", {
+    type: "color",
+    value: internal || '#000000',
+    onChange: e => apply(e.target.value),
+    style: {
+      width: 36,
+      height: 36,
+      padding: 0,
+      border: 'none',
+      background: 'transparent',
+      cursor: 'pointer'
+    },
+    title: "Custom color"
+  })), showHexInput && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 8,
+      display: 'flex',
+      gap: 8,
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    value: internal || '',
+    onChange: e => setInternal(e.target.value),
+    onBlur: e => {
+      const v = e.target.value.trim();
+      if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(v)) apply(v);else setInternal(value || '');
+    },
+    placeholder: "#rrggbb",
+    disabled: disabled,
+    style: {
+      padding: '6px 8px',
+      borderRadius: 4,
+      border: '1px solid #e5e7eb',
+      width: 120
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: () => {
+      if (/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(internal)) apply(internal);
+    },
+    disabled: disabled,
+    className: "basic-btn"
+  }, "Apply"))));
+}
+ColorPicker.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  label: PropTypes.string,
+  presetColors: PropTypes.array,
+  allowCustom: PropTypes.bool,
+  showHexInput: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  className: PropTypes.string,
+  style: PropTypes.object
+};
+
 // import "src/style/DebounceSelect.css";
 
 const DebounceSelect = ({
@@ -9356,6 +9514,7 @@ function DateTimeInput({
   style = {},
   predefinedRanges = ["today", "yesterday"],
   startWith = "sunday",
+  presets = [],
   ...rest
 }) {
   let translate;
@@ -9725,6 +9884,56 @@ function DateTimeInput({
     applySelection(d);
     setSelectedPredefined(String(idx));
   };
+  const handlePresetClick = preset => {
+    if (!preset || !preset.type) return;
+    const type = String(preset.type).toLowerCase();
+    if (type === 'clear') {
+      handleClear();
+      return;
+    }
+    if (type === 'today') {
+      const d = new Date();
+      if (time && timeStart) {
+        const [h, m] = (timeStart || "00:00").split(":");
+        d.setHours(Number(h), Number(m), 0, 0);
+      } else if (!time) {
+        d.setHours(0, 0, 0, 0);
+      }
+      applySelection(d);
+      return;
+    }
+
+    // base = selected date (if present) or now
+    const base = selectedDate ? new Date(selectedDate) : new Date();
+    const val = Number(preset.value || 0);
+    if (type === 'days') {
+      base.setDate(base.getDate() + val);
+      if (!selectedDate && time && timeStart) {
+        const [h, m] = (timeStart || "00:00").split(":");
+        base.setHours(Number(h), Number(m), 0, 0);
+      }
+      applySelection(base);
+      return;
+    }
+    if (type === 'months') {
+      base.setMonth(base.getMonth() + val);
+      if (!selectedDate && time && timeStart) {
+        const [h, m] = (timeStart || "00:00").split(":");
+        base.setHours(Number(h), Number(m), 0, 0);
+      }
+      applySelection(base);
+      return;
+    }
+    if (type === 'years') {
+      base.setFullYear(base.getFullYear() + val);
+      if (!selectedDate && time && timeStart) {
+        const [h, m] = (timeStart || "00:00").split(":");
+        base.setHours(Number(h), Number(m), 0, 0);
+      }
+      applySelection(base);
+      return;
+    }
+  };
   const handleDayClick = day => {
     applySelection(day);
   };
@@ -9928,7 +10137,30 @@ function DateTimeInput({
       background: disabled ? '#f9fafb' : undefined,
       color: disabled ? '#9ca3af' : undefined
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), presets && presets.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8,
+      marginTop: 8,
+      marginBottom: 8,
+      flexWrap: 'wrap'
+    }
+  }, presets.map((p, i) => /*#__PURE__*/React.createElement("button", {
+    key: `preset_${i}`,
+    type: "button",
+    onClick: () => !disabled && handlePresetClick(p),
+    disabled: disabled,
+    className: "basic-btn",
+    style: {
+      padding: '6px 10px',
+      fontSize: 12,
+      background: disabled ? '#f9fafb' : '#fff',
+      color: disabled ? '#9ca3af' : '#000',
+      border: '1px solid #d9d9d9',
+      borderRadius: 4,
+      cursor: disabled ? 'not-allowed' : 'pointer'
+    }
+  }, p.label || p.type))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -9992,7 +10224,8 @@ DateTimeInput.propTypes = {
   disabled: PropTypes.bool,
   className: PropTypes.string,
   style: PropTypes.object,
-  predefinedRanges: PropTypes.array
+  predefinedRanges: PropTypes.array,
+  presets: PropTypes.array
 };
 const buttonStyle = {
   padding: '6px 16px',
@@ -11444,6 +11677,7 @@ Upload.propTypes = {
 
 exports.Button = Button;
 exports.CalendarRangePicker = CalendarRangePicker;
+exports.ColorPicker = ColorPicker;
 exports.DateTimeInput = DateTimeInput;
 exports.DebounceSelect = DebounceSelect;
 exports.IconInput = IconInput;