diginet-core-ui 1.4.23-beta.2 → 1.4.24-beta.1
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/components/form-control/date-input/index.js +1 -2
- package/components/form-control/date-input/useKeyboardInputEvent.js +6 -2
- package/components/form-control/date-picker/index.js +3 -2
- package/components/form-control/dropdown/index.js +43 -43
- package/components/popover/index.js +32 -32
- package/package.json +1 -1
- package/readme.md +6 -1
|
@@ -159,9 +159,8 @@ const DateInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
|
|
|
159
159
|
});
|
|
160
160
|
setSelectedState(nextState);
|
|
161
161
|
setSelectionRange(nextState.selectionStart, nextState.selectionEnd);
|
|
162
|
-
|
|
163
162
|
// If the field is full value, move the cursor to the next field
|
|
164
|
-
if (isFieldFullValue(formatStr, newValue, pattern) && input.selectionEnd !== input.value.length) {
|
|
163
|
+
if ((isFieldFullValue(formatStr, newValue, pattern) || field.value === 0) && input.selectionEnd !== input.value.length) {
|
|
165
164
|
onSegmentChange(event, 'right');
|
|
166
165
|
}
|
|
167
166
|
});
|
|
@@ -7,7 +7,11 @@ function useKeyboardInputEvent({
|
|
|
7
7
|
}) {
|
|
8
8
|
return event => {
|
|
9
9
|
var _key$match;
|
|
10
|
-
const
|
|
10
|
+
const {
|
|
11
|
+
key,
|
|
12
|
+
ctrlKey,
|
|
13
|
+
metaKey
|
|
14
|
+
} = event;
|
|
11
15
|
switch (key) {
|
|
12
16
|
case 'ArrowRight':
|
|
13
17
|
case 'ArrowLeft':
|
|
@@ -32,7 +36,7 @@ function useKeyboardInputEvent({
|
|
|
32
36
|
default:
|
|
33
37
|
// case key.match(/[a-z]/)?.[0]:
|
|
34
38
|
// Prevent letters from being entered
|
|
35
|
-
event.preventDefault();
|
|
39
|
+
if (!ctrlKey && !metaKey) event.preventDefault();
|
|
36
40
|
break;
|
|
37
41
|
}
|
|
38
42
|
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
|
|
@@ -118,10 +118,11 @@ const DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, referenc
|
|
|
118
118
|
setOpenPickerState(true);
|
|
119
119
|
};
|
|
120
120
|
const closePicker = () => {
|
|
121
|
-
|
|
121
|
+
var _pickerRef$current;
|
|
122
|
+
if ((_pickerRef$current = pickerRef.current) !== null && _pickerRef$current !== void 0 && _pickerRef$current.element) {
|
|
122
123
|
setOpenPickerState(false);
|
|
124
|
+
if (ipRef.current) onBlur === null || onBlur === void 0 ? void 0 : onBlur(ipRef.current);
|
|
123
125
|
}
|
|
124
|
-
if (ipRef.current) onBlur === null || onBlur === void 0 ? void 0 : onBlur(ipRef.current);
|
|
125
126
|
};
|
|
126
127
|
const onClear = () => {
|
|
127
128
|
if (!clearAble && !ipRef.current) return;
|
|
@@ -262,10 +262,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
262
262
|
});
|
|
263
263
|
};
|
|
264
264
|
|
|
265
|
-
/**
|
|
266
|
-
* So sánh text đầu vào cáo map với txtSearch
|
|
267
|
-
* @param text
|
|
268
|
-
* @return {boolean}
|
|
265
|
+
/**
|
|
266
|
+
* So sánh text đầu vào cáo map với txtSearch
|
|
267
|
+
* @param text
|
|
268
|
+
* @return {boolean}
|
|
269
269
|
*/
|
|
270
270
|
const handleRenderBySearch = (text = '') => {
|
|
271
271
|
if (typeof text !== 'string') text = text.toString();
|
|
@@ -277,10 +277,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference)
|
|
|
277
277
|
} else return text.toLowerCase().includes(txtSearch.toLowerCase());
|
|
278
278
|
};
|
|
279
279
|
|
|
280
|
-
/**
|
|
281
|
-
* Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
|
|
282
|
-
* @param data {object} rowData of dataSource
|
|
283
|
-
* @return {string}
|
|
280
|
+
/**
|
|
281
|
+
* Chuyển đổi data thành giá trị cần hiện thị dựa vào displayExpr [string, string object {field} - {field}], renderSelectedItem, displayExpr, valueExpr
|
|
282
|
+
* @param data {object} rowData of dataSource
|
|
283
|
+
* @return {string}
|
|
284
284
|
*/
|
|
285
285
|
const displayValue = data => {
|
|
286
286
|
let text = '';
|
|
@@ -1499,9 +1499,9 @@ Dropdown.propTypes = {
|
|
|
1499
1499
|
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
|
|
1500
1500
|
/** If `true`, the component is disabled. */
|
|
1501
1501
|
disabled: PropTypes.bool,
|
|
1502
|
-
/** The field name used for displaying text in the dropdown list.<br/>
|
|
1503
|
-
* Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
|
|
1504
|
-
* Note: Do not use 'id - name', as it will return undefined.
|
|
1502
|
+
/** The field name used for displaying text in the dropdown list.<br/>
|
|
1503
|
+
* Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
|
|
1504
|
+
* Note: Do not use 'id - name', as it will return undefined.
|
|
1505
1505
|
*/
|
|
1506
1506
|
displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
|
|
1507
1507
|
/** Inline style for dropdown items. */
|
|
@@ -1510,14 +1510,14 @@ Dropdown.propTypes = {
|
|
|
1510
1510
|
error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
|
1511
1511
|
/** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
|
|
1512
1512
|
helperTextProps: PropTypes.object,
|
|
1513
|
-
/** The field name used for displaying icons.<br/>
|
|
1514
|
-
* Example:<br/>
|
|
1515
|
-
* string: 'icon'<br/>
|
|
1516
|
-
* object: {<br/>
|
|
1517
|
-
* key: 'icon',<br/>
|
|
1518
|
-
* prefix: 'https://imglink.com',<br/>
|
|
1519
|
-
* suffix: '.jpg'<br/>
|
|
1520
|
-
* }
|
|
1513
|
+
/** The field name used for displaying icons.<br/>
|
|
1514
|
+
* Example:<br/>
|
|
1515
|
+
* string: 'icon'<br/>
|
|
1516
|
+
* object: {<br/>
|
|
1517
|
+
* key: 'icon',<br/>
|
|
1518
|
+
* prefix: 'https://imglink.com',<br/>
|
|
1519
|
+
* suffix: '.jpg'<br/>
|
|
1520
|
+
* }
|
|
1521
1521
|
*/
|
|
1522
1522
|
iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
|
|
1523
1523
|
key: PropTypes.string,
|
|
@@ -1551,8 +1551,8 @@ Dropdown.propTypes = {
|
|
|
1551
1551
|
onChange: PropTypes.func,
|
|
1552
1552
|
/** Callback function fired when the dropdown is closed. */
|
|
1553
1553
|
onClosed: PropTypes.func,
|
|
1554
|
-
/** Callback function fired when the input value changes.<br/>
|
|
1555
|
-
* If undefined, the filter function will run (default behavior).
|
|
1554
|
+
/** Callback function fired when the input value changes.<br/>
|
|
1555
|
+
* If undefined, the filter function will run (default behavior).
|
|
1556
1556
|
*/
|
|
1557
1557
|
onInput: PropTypes.func,
|
|
1558
1558
|
/** Callback function fired when a key is pressed down in the input. */
|
|
@@ -1563,21 +1563,21 @@ Dropdown.propTypes = {
|
|
|
1563
1563
|
placeholder: PropTypes.string,
|
|
1564
1564
|
/** If `true`, the component is read-only. */
|
|
1565
1565
|
readOnly: PropTypes.bool,
|
|
1566
|
-
/** Function used for custom rendering of items.<br/>
|
|
1567
|
-
* Example: `(data, index) => data.name + ' - ' + data.role`<br/>
|
|
1568
|
-
* This can be used as an alternative to `displayExpr`
|
|
1566
|
+
/** Function used for custom rendering of items.<br/>
|
|
1567
|
+
* Example: `(data, index) => data.name + ' - ' + data.role`<br/>
|
|
1568
|
+
* This can be used as an alternative to `displayExpr`
|
|
1569
1569
|
*/
|
|
1570
1570
|
renderItem: PropTypes.func,
|
|
1571
|
-
/** Function or field name used to display selected items.<br/>
|
|
1572
|
-
* Example: `(data, index) => index + ' - ' + data.name`<br/>
|
|
1571
|
+
/** Function or field name used to display selected items.<br/>
|
|
1572
|
+
* Example: `(data, index) => index + ' - ' + data.name`<br/>
|
|
1573
1573
|
*/
|
|
1574
1574
|
renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
1575
1575
|
/** If `true`, the label will indicate that the input is required. */
|
|
1576
1576
|
required: PropTypes.bool,
|
|
1577
|
-
/**
|
|
1578
|
-
* Duration to wait after entering search content before triggering a search.<br/>
|
|
1579
|
-
* Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
|
|
1580
|
-
* If `true`, the default delayOnInput will be used.
|
|
1577
|
+
/**
|
|
1578
|
+
* Duration to wait after entering search content before triggering a search.<br/>
|
|
1579
|
+
* Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
|
|
1580
|
+
* If `true`, the default delayOnInput will be used.
|
|
1581
1581
|
*/
|
|
1582
1582
|
searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
|
|
1583
1583
|
/** Specifies the field name or expression used to compare values with the search string. */
|
|
@@ -1604,19 +1604,19 @@ Dropdown.propTypes = {
|
|
|
1604
1604
|
valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
1605
1605
|
/** The variant to use. */
|
|
1606
1606
|
viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
|
|
1607
|
-
/**
|
|
1608
|
-
* ref methods
|
|
1609
|
-
*
|
|
1610
|
-
* how to get component element? ref.current
|
|
1611
|
-
*
|
|
1612
|
-
* how to call method? ref.current.instance.{method}
|
|
1613
|
-
*
|
|
1614
|
-
* * showDropdown(): Show dropdown
|
|
1615
|
-
* * closeDropdown(): Close dropdown
|
|
1616
|
-
* * onClear(): Clear selected value
|
|
1617
|
-
* * setPreviousValue(): Set value to previous value
|
|
1618
|
-
* * setValue(value): Set value of dropdown
|
|
1619
|
-
* * @param {value} - string || number || array
|
|
1607
|
+
/**
|
|
1608
|
+
* ref methods
|
|
1609
|
+
*
|
|
1610
|
+
* how to get component element? ref.current
|
|
1611
|
+
*
|
|
1612
|
+
* how to call method? ref.current.instance.{method}
|
|
1613
|
+
*
|
|
1614
|
+
* * showDropdown(): Show dropdown
|
|
1615
|
+
* * closeDropdown(): Close dropdown
|
|
1616
|
+
* * onClear(): Clear selected value
|
|
1617
|
+
* * setPreviousValue(): Set value to previous value
|
|
1618
|
+
* * setValue(value): Set value of dropdown
|
|
1619
|
+
* * @param {value} - string || number || array
|
|
1620
1620
|
*/
|
|
1621
1621
|
};
|
|
1622
1622
|
|
|
@@ -583,9 +583,9 @@ const PopoverArrowCSS = (bgCl, arrowSize) => css`
|
|
|
583
583
|
Popover.propTypes = {
|
|
584
584
|
/** An HTML element, or a function that returns one. It's used to set the position of the popover. */
|
|
585
585
|
anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object, PropTypes.node, ref]),
|
|
586
|
-
/**
|
|
587
|
-
* This is the point on the anchor where the popover's anchor will attach to.
|
|
588
|
-
* Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
|
|
586
|
+
/**
|
|
587
|
+
* This is the point on the anchor where the popover's anchor will attach to.
|
|
588
|
+
* Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
|
|
589
589
|
*/
|
|
590
590
|
anchorOrigin: PropTypes.shape({
|
|
591
591
|
horizontal: PropTypes.oneOf(['center', 'left', 'right']),
|
|
@@ -601,14 +601,14 @@ Popover.propTypes = {
|
|
|
601
601
|
className: PropTypes.string,
|
|
602
602
|
/** If `true`, click outside will close component. */
|
|
603
603
|
clickOutsideToClose: PropTypes.bool,
|
|
604
|
-
/**
|
|
605
|
-
* Direction when Popover shown.
|
|
606
|
-
* Note: This prop will overwrite anchorOrigin & transformOrigin.
|
|
607
|
-
*
|
|
608
|
-
* * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
|
|
609
|
-
* * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
|
|
610
|
-
* * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
|
|
611
|
-
* * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
|
|
604
|
+
/**
|
|
605
|
+
* Direction when Popover shown.
|
|
606
|
+
* Note: This prop will overwrite anchorOrigin & transformOrigin.
|
|
607
|
+
*
|
|
608
|
+
* * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
|
|
609
|
+
* * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
|
|
610
|
+
* * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
|
|
611
|
+
* * bottom: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
|
|
612
612
|
*/
|
|
613
613
|
direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
|
|
614
614
|
/** Height of the component. */
|
|
@@ -625,9 +625,9 @@ Popover.propTypes = {
|
|
|
625
625
|
pressESCToClose: PropTypes.bool,
|
|
626
626
|
/** Style inline of component. */
|
|
627
627
|
style: PropTypes.object,
|
|
628
|
-
/**
|
|
629
|
-
* This is the point on the popover which will attach to the anchor's origin.
|
|
630
|
-
* Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
|
|
628
|
+
/**
|
|
629
|
+
* This is the point on the popover which will attach to the anchor's origin.
|
|
630
|
+
* Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
|
|
631
631
|
*/
|
|
632
632
|
transformOrigin: PropTypes.shape({
|
|
633
633
|
horizontal: PropTypes.oneOf(['center', 'left', 'right']),
|
|
@@ -639,24 +639,24 @@ Popover.propTypes = {
|
|
|
639
639
|
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
640
640
|
/** Config z-index of the component. */
|
|
641
641
|
zIndex: PropTypes.number
|
|
642
|
-
/**
|
|
643
|
-
* ref methods (ref.current.instance.*method*)
|
|
644
|
-
*
|
|
645
|
-
* * show: Show popover
|
|
646
|
-
* * close: Close popover
|
|
647
|
-
* * setPosition(element): Set position of popover
|
|
648
|
-
* * @param {element} - element
|
|
649
|
-
*
|
|
650
|
-
* * option(): Gets all UI component properties
|
|
651
|
-
* * Returns value - object
|
|
652
|
-
* * option(optionName): Gets the value of a single property
|
|
653
|
-
* * @param {optionName} - string
|
|
654
|
-
* * Returns value - any
|
|
655
|
-
* * option(optionName, optionValue): Updates the value of a single property
|
|
656
|
-
* * @param {optionName} - string
|
|
657
|
-
* * @param {optionValue} - any
|
|
658
|
-
* * option(options): Updates the values of several properties
|
|
659
|
-
* * @param {options} - object
|
|
642
|
+
/**
|
|
643
|
+
* ref methods (ref.current.instance.*method*)
|
|
644
|
+
*
|
|
645
|
+
* * show: Show popover
|
|
646
|
+
* * close: Close popover
|
|
647
|
+
* * setPosition(element): Set position of popover
|
|
648
|
+
* * @param {element} - element
|
|
649
|
+
*
|
|
650
|
+
* * option(): Gets all UI component properties
|
|
651
|
+
* * Returns value - object
|
|
652
|
+
* * option(optionName): Gets the value of a single property
|
|
653
|
+
* * @param {optionName} - string
|
|
654
|
+
* * Returns value - any
|
|
655
|
+
* * option(optionName, optionValue): Updates the value of a single property
|
|
656
|
+
* * @param {optionName} - string
|
|
657
|
+
* * @param {optionValue} - any
|
|
658
|
+
* * option(options): Updates the values of several properties
|
|
659
|
+
* * @param {options} - object
|
|
660
660
|
*/
|
|
661
661
|
};
|
|
662
662
|
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -42,7 +42,12 @@ npm test
|
|
|
42
42
|
|
|
43
43
|
## Changelog
|
|
44
44
|
|
|
45
|
-
## 1.4.
|
|
45
|
+
## 1.4.24
|
|
46
|
+
|
|
47
|
+
- \[Added\]: IconMenu – Add WEO76LIS0005, WEO76LIS0006, WEO76LIS0007, WEO76REQ0003
|
|
48
|
+
- \[Changed\]: Dropdown – Return event, reason, value in onClosed callback
|
|
49
|
+
|
|
50
|
+
## 1.4.23
|
|
46
51
|
|
|
47
52
|
- \[Changed\]: TabHeader – Add full width
|
|
48
53
|
|