@lowdefy/blocks-antd 5.6.0 → 6.0.0

package/dist/blocks/DateRangeSelector/meta.js

@@ -16,6 +16,7 @@
 import label from '../../schemas/label.js';
 import icon from '../../schemas/icon.js';
 import disabledDates from '../../schemas/disabledDates.js';
+import { dateRangePresets } from '../../schemas/presets.js';
 import { disabled, inputTitle, autoFocus, allowClear, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
 export default {
     category: 'input',
@@ -120,6 +121,7 @@ export default {
                     }
                 }
             },
+            presets: dateRangePresets,
             separator: {
                 type: 'string',
                 default: '~',

package/dist/blocks/DateRangeSelector/tests/DateRangeSelector.e2e.yaml

@@ -0,0 +1,204 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+id: daterangeselector
+type: Box
+
+events:
+  onInit:
+    - id: set_defaults
+      type: SetState
+      params:
+        drs_with_value:
+          - _date: '2024-06-01'
+          - _date: '2024-06-30'
+        drs_clearable:
+          - _date: '2024-01-01'
+          - _date: '2024-01-31'
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: drs_basic
+    type: DateRangeSelector
+    properties:
+      title: Basic Date Range
+
+  - id: drs_with_value
+    type: DateRangeSelector
+    properties:
+      title: With Value
+
+  # ============================================
+  # PROPERTY TESTS
+  # ============================================
+
+  - id: drs_disabled
+    type: DateRangeSelector
+    properties:
+      title: Disabled
+      disabled: true
+
+  - id: drs_small
+    type: DateRangeSelector
+    properties:
+      title: Small Size
+      size: small
+
+  - id: drs_large
+    type: DateRangeSelector
+    properties:
+      title: Large Size
+      size: large
+
+  - id: drs_placeholder
+    type: DateRangeSelector
+    properties:
+      title: Custom Placeholder
+      placeholder:
+        - From date
+        - To date
+
+  - id: drs_borderless
+    type: DateRangeSelector
+    properties:
+      title: Borderless
+      bordered: false
+
+  - id: drs_no_allowclear
+    type: DateRangeSelector
+    properties:
+      title: No Allow Clear
+      allowClear: false
+
+  - id: drs_separator
+    type: DateRangeSelector
+    properties:
+      title: Custom Separator
+      separator: ' to '
+
+  - id: drs_with_title
+    type: DateRangeSelector
+    properties:
+      title: Date Range with Title
+
+  - id: drs_with_label
+    type: DateRangeSelector
+    properties:
+      title: Date Range Label
+      label:
+        extra: Select start and end dates
+
+  # ============================================
+  # EVENT TESTS
+  # ============================================
+
+  - id: drs_onchange
+    type: DateRangeSelector
+    properties:
+      title: OnChange Test
+    events:
+      onChange:
+        - id: set_onchange
+          type: SetState
+          params:
+            drs_onchange_value:
+              _event: value
+
+  - id: drs_onchange_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: drs_onchange_value
+              - null
+          then: Range selected
+          else: ''
+
+  # ============================================
+  # INTERACTION TESTS
+  # ============================================
+
+  - id: drs_interaction
+    type: DateRangeSelector
+    properties:
+      title: Interaction Test
+
+  - id: drs_clearable
+    type: DateRangeSelector
+    properties:
+      title: Clearable
+      allowClear: true
+
+  # ============================================
+  # PRESETS
+  # ============================================
+
+  - id: drs_presets
+    type: DateRangeSelector
+    properties:
+      title: Presets
+      format: YYYY-MM-DD
+      presets:
+        - label: Q1 2024
+          value: ['2024-01-01', '2024-03-31']
+        - label: Q2 2024
+          value:
+            - _date: '2024-04-01'
+            - _date: '2024-06-30'
+        - label: '<b>Html label</b>'
+          value: ['2024-07-01', '2024-09-30']
+
+  - id: drs_no_presets
+    type: DateRangeSelector
+    properties:
+      title: No Presets
+
+  - id: drs_presets_min_now
+    type: DateRangeSelector
+    properties:
+      title: Presets with a minimum date
+      format: YYYY-MM-DD
+      disabledDates:
+        min:
+          _dayjs: [now, { format: YYYY-MM-DD }]
+      presets:
+        - label: Last 7 Days
+          value:
+            - _dayjs: [now, { subtract: [7, days] }, { format: YYYY-MM-DD }]
+            - _dayjs: [now, { format: YYYY-MM-DD }]
+        - label: Next 7 Days
+          value:
+            - _dayjs: [now, { format: YYYY-MM-DD }]
+            - _dayjs: [now, { add: [7, days] }, { format: YYYY-MM-DD }]
+        - label: Last Year
+          value: ['2025-01-01', '2025-12-31']
+
+  - id: drs_presets_max_now
+    type: DateRangeSelector
+    properties:
+      title: Presets with a maximum date
+      format: YYYY-MM-DD
+      disabledDates:
+        max:
+          _dayjs: [now, { format: YYYY-MM-DD }]
+      presets:
+        - label: Next 7 Days
+          value:
+            - _dayjs: [now, { format: YYYY-MM-DD }]
+            - _dayjs: [now, { add: [7, days] }, { format: YYYY-MM-DD }]

package/dist/blocks/DateRangeSelector/tests.yaml

@@ -0,0 +1,129 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- id: default
+  type: DateRangeSelector
+- id: properties.title
+  type: DateRangeSelector
+  properties:
+    title: DateRangeSelector title
+- id: 'property.allowClear: false'
+  type: DateRangeSelector
+  properties:
+    allowClear: false
+- id: 'property.autoFocus: true'
+  type: DateRangeSelector
+  properties:
+    autoFocus: true
+- id: 'properties.bordered: false'
+  type: DateRangeSelector
+  properties:
+    bordered: false
+- id: 'property.disabled: true'
+  type: DateRangeSelector
+  properties:
+    disabled: true
+- id: 'property.format: YYYY-MMM-DD'
+  type: DateRangeSelector
+  properties:
+    format: YYYY-MMM-DD
+- id: 'property.placeholder: - Start Date - End Date'
+  type: DateRangeSelector
+  properties:
+    placeholder:
+      - From this Start Date
+      - To this End Date
+- id: 'property.separator: ǁ'
+  type: DateRangeSelector
+  properties:
+    separator: ǁ
+- id: 'property.size: small'
+  type: DateRangeSelector
+  properties:
+    size: small
+- id: 'property.size: large'
+  type: DateRangeSelector
+  properties:
+    size: large
+- id: 'property.suffixIcon: AiOutlineCalendar'
+  type: DateRangeSelector
+  properties:
+    suffixIcon: AiOutlineCalendar
+- id: 'property.suffixIcon Red: AiOutlineCalendar'
+  type: DateRangeSelector
+  properties:
+    suffixIcon:
+      name: AiOutlineCalendar
+      color: Red
+- id: 'properties.inputStyle: CSS style applied'
+  type: DateRangeSelector
+  properties:
+    inputStyle:
+      border: 1px solid red
+- id: 'property.label span: 5'
+  type: DateRangeSelector
+  properties:
+    label:
+      span: 5
+- id: 'property.label align: right'
+  type: DateRangeSelector
+  properties:
+    label:
+      align: right
+- id: 'property.label inline: true'
+  type: DateRangeSelector
+  properties:
+    label:
+      inline: true
+- id: 'property.label disabled: true'
+  type: DateRangeSelector
+  properties:
+    label:
+      disabled: true
+- id: 'property.label colon: true'
+  type: DateRangeSelector
+  properties:
+    label:
+      colon: true
+- id: 'property.label extra: extra text added'
+  type: DateRangeSelector
+  properties:
+    label:
+      extra: extra text added
+- id: 'properties.disabledDates.min'
+  type: DateRangeSelector
+  properties:
+    disabledDates:
+      min: 2020-10-20
+- id: 'properties.disabledDates.max'
+  type: DateRangeSelector
+  properties:
+    disabledDates:
+      max: 2020-10-15
+- id: 'properties.disabledDates.dates'
+  type: DateRangeSelector
+  properties:
+    disabledDates:
+      dates:
+        - _date: 2020-10-26
+        - 2020-10-29
+        - 2020-11-02
+- id: 'properties.disabledDates.ranges'
+  type: DateRangeSelector
+  properties:
+    disabledDates:
+      ranges:
+        - ['2020-10-26', '2020-10-29']
+        - - 2020-11-01
+          - 2020-11-02

package/dist/blocks/DateSelector/DateSelector.js

@@ -21,6 +21,7 @@ import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
 import withTheme from '../withTheme.js';
 import disabledDate from '../../disabledDate.js';
+import getPresets from '../../getPresets.js';
 dayjs.extend(utc);
 const DateSelector = ({ blockId, classNames = {}, components: { Icon }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
@@ -61,6 +62,11 @@ const DateSelector = ({ blockId, classNames = {}, components: { Icon }, events,
                     format: properties.format ?? getLocaleDateFormat(methods.getLocale?.()) ?? 'YYYY-MM-DD',
                     getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
                     placeholder: properties.placeholder,
+                    presets: getPresets({
+                        disabledDates: properties.disabledDates,
+                        methods,
+                        presets: properties.presets
+                    }),
                     showToday: properties.showToday,
                     size: properties.size,
                     status: validation.status,

package/dist/blocks/DateSelector/e2e.js

@@ -16,6 +16,13 @@
 import { expect } from '@playwright/test';
 const locator = (page, blockId)=>page.locator(`.ant-picker:has(#${escapeId(blockId)}_input)`);
 const input = (page, blockId)=>page.locator(`#${escapeId(blockId)}_input`);
+// The block renders the picker popup into a container inside itself, so the dropdown is scoped to
+// the block rather than to every open picker on the page.
+const pickerDropdown = (page, blockId)=>page.locator(`#bl-${escapeId(blockId)} .ant-picker-dropdown`);
+const presets = (page, blockId)=>pickerDropdown(page, blockId).locator('.ant-picker-presets');
+const presetItem = (page, blockId, label)=>presets(page, blockId).locator('li', {
+        hasText: label
+    });
 const monthNames = [
     'Jan',
     'Feb',
@@ -73,11 +80,18 @@ export default createBlockHelper({
         select: async (page, blockId, dateString)=>{
             const [year, month] = dateString.split('-').map(Number);
             await locator(page, blockId).click();
-            const dropdown = page.locator('.ant-picker-dropdown:visible');
+            const dropdown = pickerDropdown(page, blockId);
             await expect(dropdown).toBeVisible();
             await navigateToMonth(dropdown, year, month);
             await dropdown.locator(`.ant-picker-cell-in-view[title="${dateString}"]`).click();
         },
+        selectPreset: async (page, blockId, label)=>{
+            await locator(page, blockId).click();
+            await expect(pickerDropdown(page, blockId)).toBeVisible();
+            await presets(page, blockId).getByText(label, {
+                exact: true
+            }).click();
+        },
         clear: async (page, blockId)=>{
             await locator(page, blockId).hover();
             await locator(page, blockId).locator('.ant-picker-clear').click();
@@ -85,6 +99,18 @@ export default createBlockHelper({
     },
     expect: {
         value: (page, blockId, val)=>expect(input(page, blockId)).toHaveValue(val),
-        placeholder: (page, blockId, text)=>expect(input(page, blockId)).toHaveAttribute('placeholder', text)
+        placeholder: (page, blockId, text)=>expect(input(page, blockId)).toHaveAttribute('placeholder', text),
+        presetLabels: (page, blockId, labels)=>expect(presets(page, blockId).locator('li')).toHaveText(labels),
+        presetLabelHtml: (page, blockId, { selector, text })=>expect(presets(page, blockId).locator(selector)).toHaveText(text),
+        noPresets: (page, blockId)=>expect(presets(page, blockId)).toHaveCount(0),
+        // A preset the calendar cannot select is disabled through the list item's pointer events, so
+        // asserting on those checks the shortcut is really unclickable and not only styled as such.
+        presetDisabled: (page, blockId, label)=>expect(presetItem(page, blockId, label)).toHaveCSS('pointer-events', 'none'),
+        presetEnabled: (page, blockId, label)=>expect(presetItem(page, blockId, label)).toHaveCSS('pointer-events', 'auto'),
+        dateDisabled: (page, blockId, dateString)=>expect(pickerDropdown(page, blockId).locator(`.ant-picker-cell[title="${dateString}"]`).first()).toHaveClass(/ant-picker-cell-disabled/),
+        dateEnabled: (page, blockId, dateString)=>expect(pickerDropdown(page, blockId).locator(`.ant-picker-cell[title="${dateString}"]`).first()).not.toHaveClass(/ant-picker-cell-disabled/),
+        // The picker only closes the popup once it accepts the value, so a closed popup is the
+        // signal that a selection was committed rather than just shown in the input.
+        closed: (page, blockId)=>expect(pickerDropdown(page, blockId)).toBeHidden()
     }
 });