ui-soxo-bootstrap-core 2.4.25-dev.40 → 2.4.25-dev.44

package/core/lib/elements/basic/rangepicker/rangepicker.js

@@ -1,141 +1,141 @@
-/**
- * @file rangepicker.js
- * @description A reusable, enhanced Ant Design RangePicker component.
- *
- * Features:
- * - Manual selections require "Apply" button confirmation
- * - Preset ranges apply immediately without confirmation
- * - Optimized state management and event handling
- */
-
-import { useCallback, useRef, useState } from 'react';
-import { DatePicker, Space } from 'antd';
-import moment from 'moment-timezone';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import Button from '../button/button';
-import './rangepicker.scss';
-
-/**
- * Enhanced RangePicker with Apply/Cancel controls for manual selections.
- * @param {object} props
- * @param {moment.Moment[]} props.value - Current applied date range
- * @param {function(moment.Moment[]): void} props.onChange - Callback when range is applied
- * @param {string} [props.format='DD/MM/YYYY'] - Date display format
- * @param {object} [props.ranges] - Preset date ranges
- * @param {boolean} [props.allowClear=false] - Whether to show clear button
- * @param {boolean} [props.inputReadOnly=true] - Whether input is read-only
- */
-
-const { RangePicker } = DatePicker;
-
-export default function RangePickerComponent({
-  value,
-  onChange,
-  format = 'DD/MM/YYYY',
-  ranges,
-  allowClear = false,
-  inputReadOnly = true,
-  ...restProps
-}) {
-  const { t } = useTranslation();
-
-  // Temporary range during selection (before Apply is clicked)
-  const [tempRange, setTempRange] = useState(null);
-  const [isOpen, setIsOpen] = useState(false);
-
-  // Ref to track if a selection just happened, to prevent the picker from closing.
-  const selectionJustHappened = useRef(false);
-
-  /**
-   * Handles any completed date selection (both manual and preset).
-   * It updates the temporary range and sets a flag to keep the picker open.
-   */
-  const handleChange = useCallback((dates) => {
-    setTempRange(dates || []);
-    selectionJustHappened.current = true;
-  }, []);
-
-  /**
-   * Handles picker open/close events.
-   * Prevents closing after a selection, requiring user to click Apply/Cancel.
-   */
-  const handleOpenChange = useCallback((open) => {
-    // If the picker is trying to close, check if it was due to a selection.
-    if (!open && selectionJustHappened.current) {
-      // It was a selection, so ignore the close request and reset the flag.
-      selectionJustHappened.current = false;
-      return;
-    }
-
-    // For all other cases (opening, or closing by clicking outside), proceed as normal.
-    if (open) {
-      // Reset temp range when opening for a fresh selection.
-      setTempRange(null);
-    }
-    setIsOpen(open);
-  }, []);
-
-  /**
-   * Applies the temporary range and closes picker
-   */
-  const handleApply = useCallback(() => {
-    if (tempRange?.length === 2 && onChange) {
-      onChange(tempRange);
-    }
-    selectionJustHappened.current = false; // Clear the flag
-    setIsOpen(false);
-  }, [tempRange, onChange]);
-
-  /**
-   * Cancels selection and closes picker
-   */
-  const handleCancel = useCallback(() => {
-    selectionJustHappened.current = false; // Clear the flag
-    setTempRange(null);
-    setIsOpen(false);
-  }, []);
-
-  // Memoized preset ranges - use provided ranges or default set
-  const defaultRanges = useRef({
-    Today: [moment(), moment()],
-    Yesterday: [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
-    'This Week': [moment().startOf('week'), moment().endOf('week')],
-    'Last Week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
-    'This Month': [moment().startOf('month'), moment().endOf('month')],
-    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
-  }).current;
-
-  return (
-    <RangePicker
-      dropdownClassName="responsive-rangepicker-dropdown"
-      allowClear={allowClear}
-      inputReadOnly={inputReadOnly}
-      format={format}
-      value={tempRange || value}
-      open={isOpen}
-      onOpenChange={handleOpenChange}
-      onChange={handleChange}
-      ranges={ranges !== undefined ? ranges : defaultRanges}
-      {...restProps}
-      renderExtraFooter={() => (
-        <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end', order: 1 }}>
-          <Space>
-            <Button size="small" onClick={handleCancel}>
-              {t('Cancel')}
-            </Button>
-            <Button type="primary" size="small" onClick={handleApply}>
-              {t('Apply')}
-            </Button>
-          </Space>
-        </div>
-      )}
-    />
-  );
-}
-
-RangePickerComponent.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.arrayOf(PropTypes.instanceOf(moment)).isRequired,
-  ranges: PropTypes.object,
-};
+/**
+ * @file rangepicker.js
+ * @description A reusable, enhanced Ant Design RangePicker component.
+ *
+ * Features:
+ * - Manual selections require "Apply" button confirmation
+ * - Preset ranges apply immediately without confirmation
+ * - Optimized state management and event handling
+ */
+
+import { useCallback, useRef, useState } from 'react';
+import { DatePicker, Space } from 'antd';
+import moment from 'moment-timezone';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import Button from '../button/button';
+import './rangepicker.scss';
+
+/**
+ * Enhanced RangePicker with Apply/Cancel controls for manual selections.
+ * @param {object} props
+ * @param {moment.Moment[]} props.value - Current applied date range
+ * @param {function(moment.Moment[]): void} props.onChange - Callback when range is applied
+ * @param {string} [props.format='DD/MM/YYYY'] - Date display format
+ * @param {object} [props.ranges] - Preset date ranges
+ * @param {boolean} [props.allowClear=false] - Whether to show clear button
+ * @param {boolean} [props.inputReadOnly=true] - Whether input is read-only
+ */
+
+const { RangePicker } = DatePicker;
+
+export default function RangePickerComponent({
+  value,
+  onChange,
+  format = 'DD/MM/YYYY',
+  ranges,
+  allowClear = false,
+  inputReadOnly = true,
+  ...restProps
+}) {
+  const { t } = useTranslation();
+
+  // Temporary range during selection (before Apply is clicked)
+  const [tempRange, setTempRange] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Ref to track if a selection just happened, to prevent the picker from closing.
+  const selectionJustHappened = useRef(false);
+
+  /**
+   * Handles any completed date selection (both manual and preset).
+   * It updates the temporary range and sets a flag to keep the picker open.
+   */
+  const handleChange = useCallback((dates) => {
+    setTempRange(dates || []);
+    selectionJustHappened.current = true;
+  }, []);
+
+  /**
+   * Handles picker open/close events.
+   * Prevents closing after a selection, requiring user to click Apply/Cancel.
+   */
+  const handleOpenChange = useCallback((open) => {
+    // If the picker is trying to close, check if it was due to a selection.
+    if (!open && selectionJustHappened.current) {
+      // It was a selection, so ignore the close request and reset the flag.
+      selectionJustHappened.current = false;
+      return;
+    }
+
+    // For all other cases (opening, or closing by clicking outside), proceed as normal.
+    if (open) {
+      // Reset temp range when opening for a fresh selection.
+      setTempRange(null);
+    }
+    setIsOpen(open);
+  }, []);
+
+  /**
+   * Applies the temporary range and closes picker
+   */
+  const handleApply = useCallback(() => {
+    if (tempRange?.length === 2 && onChange) {
+      onChange(tempRange);
+    }
+    selectionJustHappened.current = false; // Clear the flag
+    setIsOpen(false);
+  }, [tempRange, onChange]);
+
+  /**
+   * Cancels selection and closes picker
+   */
+  const handleCancel = useCallback(() => {
+    selectionJustHappened.current = false; // Clear the flag
+    setTempRange(null);
+    setIsOpen(false);
+  }, []);
+
+  // Memoized preset ranges - use provided ranges or default set
+  const defaultRanges = useRef({
+    Today: [moment(), moment()],
+    Yesterday: [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
+    'This Week': [moment().startOf('week'), moment().endOf('week')],
+    'Last Week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
+    'This Month': [moment().startOf('month'), moment().endOf('month')],
+    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
+  }).current;
+
+  return (
+    <RangePicker
+      dropdownClassName="responsive-rangepicker-dropdown"
+      allowClear={allowClear}
+      inputReadOnly={inputReadOnly}
+      format={format}
+      value={tempRange || value}
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      onChange={handleChange}
+      ranges={ranges !== undefined ? ranges : defaultRanges}
+      {...restProps}
+      renderExtraFooter={() => (
+        <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end', order: 1 }}>
+          <Space>
+            <Button size="small" onClick={handleCancel}>
+              {t('Cancel')}
+            </Button>
+            <Button type="primary" size="small" onClick={handleApply}>
+              {t('Apply')}
+            </Button>
+          </Space>
+        </div>
+      )}
+    />
+  );
+}
+
+RangePickerComponent.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.arrayOf(PropTypes.instanceOf(moment)).isRequired,
+  ranges: PropTypes.object,
+};

package/core/lib/elements/basic/rangepicker/rangepicker.scss

@@ -1,24 +1,24 @@
-.rangepicker {
-  .ant-picker {
-    max-height: 30px;
-  }
-
-  .rangepicker .ant-picker {
-    border: none !important;
-    box-shadow: none !important;
-    width: 100% !important;
-    // min-width: auto !important;
-  }
-
-  .rangepicker .ant-picker:hover,
-  .rangepicker .ant-picker-focused {
-    border: none !important;
-    box-shadow: none !important;
-  }
-}
-
-@media (max-width: 767px) {
-  .responsive-rangepicker-dropdown .ant-picker-panels {
-    flex-direction: column;
-  }
-}
+.rangepicker {
+  .ant-picker {
+    max-height: 30px;
+  }
+
+  .rangepicker .ant-picker {
+    border: none !important;
+    box-shadow: none !important;
+    width: 100% !important;
+    // min-width: auto !important;
+  }
+
+  .rangepicker .ant-picker:hover,
+  .rangepicker .ant-picker-focused {
+    border: none !important;
+    box-shadow: none !important;
+  }
+}
+
+@media (max-width: 767px) {
+  .responsive-rangepicker-dropdown .ant-picker-panels {
+    flex-direction: column;
+  }
+}

package/core/lib/elements/basic/rangepicker/readme.md

@@ -1,82 +1,82 @@
-## Usage
-
-To use the Ant Design Date Picker component in your React application, you'll need to import the DatePicker or RangePicker component from the antd package.
-
-Here's an example of how to use the RangePicker component:
-
-```jsx
-import RangePicker from "./rangepicker";
-import moment from "moment-timezone";
-
-<RangePicker
-  onChange={(value) => console.log(value)} // handle onChange event
-  value={[moment().subtract(1, "week"), moment()]} // set initial value
-/>
-
-```
-
-```sh
-import React, { useState, useContext } from "react";
-import DateRangePicker from "react-bootstrap-daterangepicker";
-import moment from "moment-timezone";
-import "./rangepicker.scss";
-
-export default function RangePicker({ onChange, value }) {
-  // const [value, setValue] = useState(initialValue);
-
-  // console.log(value);
-
-  // console.log();
-
-  let startDate = value[0].format("DD/MM/YYYY");
-
-  let endDate = value[1].format("DD/MM/YYYY");
-
-  // console.log(startDate, endDate);
-
-  function onCallback(event, picker) {
-    onChange([picker.startDate, picker.endDate]);
-  }
-
-  return (
-    <>
-      <div className="rangepicker">
-        <DateRangePicker
-          initialSettings={{
-            startDate,
-            endDate,
-            locale: {
-              format: "DD/MM/YYYY",
-            },
-          }}
-          onApply={onCallback}
-          range={{
-            Today: [moment(), moment()],
-
-            Yesterday: [
-              moment().subtract(1, "days").startOf("day"),
-              moment().subtract(1, "days").endOf("day"),
-            ],
-
-            "This Week": [moment().startOf("week"), moment().endOf("week")],
-
-            "Last Week": [
-              moment().subtract(1, "week").startOf("week"),
-              moment().subtract(1, "week").endOf("week"),
-            ],
-
-            "This Month": [moment().startOf("month"), moment().endOf("month")],
-
-            "Last Month": [
-              moment().subtract(1, "month").startOf("month"),
-              moment().subtract(1, "month").endOf("month"),
-            ],
-          }}
-        >
-          <input />
-        </DateRangePicker>
-      </div>
-    </>
-  );
-}
+## Usage
+
+To use the Ant Design Date Picker component in your React application, you'll need to import the DatePicker or RangePicker component from the antd package.
+
+Here's an example of how to use the RangePicker component:
+
+```jsx
+import RangePicker from "./rangepicker";
+import moment from "moment-timezone";
+
+<RangePicker
+  onChange={(value) => console.log(value)} // handle onChange event
+  value={[moment().subtract(1, "week"), moment()]} // set initial value
+/>
+
+```
+
+```sh
+import React, { useState, useContext } from "react";
+import DateRangePicker from "react-bootstrap-daterangepicker";
+import moment from "moment-timezone";
+import "./rangepicker.scss";
+
+export default function RangePicker({ onChange, value }) {
+  // const [value, setValue] = useState(initialValue);
+
+  // console.log(value);
+
+  // console.log();
+
+  let startDate = value[0].format("DD/MM/YYYY");
+
+  let endDate = value[1].format("DD/MM/YYYY");
+
+  // console.log(startDate, endDate);
+
+  function onCallback(event, picker) {
+    onChange([picker.startDate, picker.endDate]);
+  }
+
+  return (
+    <>
+      <div className="rangepicker">
+        <DateRangePicker
+          initialSettings={{
+            startDate,
+            endDate,
+            locale: {
+              format: "DD/MM/YYYY",
+            },
+          }}
+          onApply={onCallback}
+          range={{
+            Today: [moment(), moment()],
+
+            Yesterday: [
+              moment().subtract(1, "days").startOf("day"),
+              moment().subtract(1, "days").endOf("day"),
+            ],
+
+            "This Week": [moment().startOf("week"), moment().endOf("week")],
+
+            "Last Week": [
+              moment().subtract(1, "week").startOf("week"),
+              moment().subtract(1, "week").endOf("week"),
+            ],
+
+            "This Month": [moment().startOf("month"), moment().endOf("month")],
+
+            "Last Month": [
+              moment().subtract(1, "month").startOf("month"),
+              moment().subtract(1, "month").endOf("month"),
+            ],
+          }}
+        >
+          <input />
+        </DateRangePicker>
+      </div>
+    </>
+  );
+}
 ```

package/core/lib/elements/basic/reference-select/readme.md

@@ -1,19 +1,19 @@
-## Usage
-
-To use the Select component, you will need to import it from the react-select library:
-
-```jsx
-import React, { useState } from 'react';
-import ReferenceSelect from './reference-select';
-
-<ReferenceSelect
-  options={[
-    { value: 'ref1', label: 'Reference 1' },
-    { value: 'ref2', label: 'Reference 2' },
-    { value: 'ref3', label: 'Reference 3' },
-  ]}
-  value="ref1"
-  onSelect={selectedOption => console.log(selectedOption)}
-/>
-
+## Usage
+
+To use the Select component, you will need to import it from the react-select library:
+
+```jsx
+import React, { useState } from 'react';
+import ReferenceSelect from './reference-select';
+
+<ReferenceSelect
+  options={[
+    { value: 'ref1', label: 'Reference 1' },
+    { value: 'ref2', label: 'Reference 2' },
+    { value: 'ref3', label: 'Reference 3' },
+  ]}
+  value="ref1"
+  onSelect={selectedOption => console.log(selectedOption)}
+/>
+
 ```