beesoft-components 0.2.7 → 0.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -8
- package/build/index.cjs.js +4824 -4740
- package/build/index.js +4824 -4740
- package/build/index.min.js +3 -3
- package/build/index.min.js.gz +0 -0
- package/package.json +1 -1
- package/types/src/components/form/date-time/date-time-context.d.ts +2 -0
- package/types/src/components/form/date-time/date-time-functions.d.ts +2 -0
- package/types/src/components/form/date-time/date-time-types.d.ts +10 -1
- package/types/src/components/form/date-time/date-time.component.d.ts +4 -3
package/README.md
CHANGED
|
@@ -61,9 +61,9 @@ These are the properties passed to the calendar template.
|
|
|
61
61
|
| **selectedEndDate** | **false** | `Date` | The current end date of a date range selection this is only set when the component is in date range mode. |
|
|
62
62
|
| **selectionMode** | **false** | `CalendarSelectionMode` | Contains the values `Normal` and `Range`; selected range puts the calendar into range selection mode. |
|
|
63
63
|
| **locale** | **false** | `Locale` | The Locale object comes from the date-fns library and contains information about the users locale date settings. |
|
|
64
|
-
| **onDateSelected** | **false** | `
|
|
65
|
-
| **selectableDate** | **false** | `
|
|
66
|
-
| **isValidDate** | **false** | `
|
|
64
|
+
| **onDateSelected** | **false** | `(date: Date, options?: Record<string, any>) => void` | Used to tell the component when a date has been selected. |
|
|
65
|
+
| **selectableDate** | **false** | `(currentDate: Date) => boolean` | Determines if a date is allowed to be selected...if false is returned then the date will be disabled. |
|
|
66
|
+
| **isValidDate** | **false** | `(selectedDate: Date) => boolean` | Determines if the passed date is a valid selectable date...if false is returned then the selection isn't made. |
|
|
67
67
|
| **dispatcher** | **false** | `React.Dispatch<DateTimeReducerAction>` | Used to set values within the component like the selected and current view date. |
|
|
68
68
|
|
|
69
69
|
#### Input Template Properties
|
|
@@ -74,19 +74,19 @@ These are the properties passed to the input template.
|
|
|
74
74
|
| ----------- | -------- | ---------- | ----------- |
|
|
75
75
|
| **label** | **false** | `string` | The label to display for the input; if undefined then no label is set. |
|
|
76
76
|
| **readOnly** | **true** | `boolean` | Determines if the input should be read only or not. |
|
|
77
|
-
| **getValue** | **true** | `
|
|
78
|
-
| **onFocus** | **true** | `
|
|
79
|
-
| **onInput** | **true** | `
|
|
77
|
+
| **getValue** | **true** | `() => string` | Returns the currently selected value(s) as a string to be displayed. |
|
|
78
|
+
| **onFocus** | **true** | `(event: FocusEvent) => void` | Should be assigned to the input component so it will be called when it's focused. |
|
|
79
|
+
| **onInput** | **true** | `(event: FormEvent) => void` | Should be assigned to the input component so it will be called when the user types into the input. |
|
|
80
80
|
| **iconPosition** | **true** | `CalendarIconPosition` | Determines if the icon is supposed to be on the right or left. |
|
|
81
81
|
| **iconElement** | **false** | `JSX.Element` | The icon that is supposed to be clicked to show the calendar. |
|
|
82
82
|
| **iconElementClassName** | **false** | `string` | The classes to use for the icon element wrapper. |
|
|
83
|
-
| **onElementClick** | **false** | `
|
|
83
|
+
| **onElementClick** | **false** | `(event: MouseEvent) => void` | The function to call when the icon element is clicked. |
|
|
84
84
|
|
|
85
85
|
### Dark Mode
|
|
86
86
|
|
|
87
87
|
Dark mode is a common feature for many web applications. Beehive components support dark mode, to turn it on add a `dark` class to the body tag. In React you can use to following line:
|
|
88
88
|
|
|
89
|
-
> document.body.className = 'dark';
|
|
89
|
+
> document.body.className = 'bsc-dark';
|
|
90
90
|
|
|
91
91
|
### Date Range
|
|
92
92
|
|