diginet-core-ui 1.4.50-beta.1 → 1.4.50-beta.2
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.
|
@@ -77,6 +77,7 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
|
|
|
77
77
|
inputStyle,
|
|
78
78
|
itemMode,
|
|
79
79
|
isInGrid,
|
|
80
|
+
isPaging,
|
|
80
81
|
label,
|
|
81
82
|
labelProps,
|
|
82
83
|
limit,
|
|
@@ -171,7 +172,7 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
|
|
|
171
172
|
const _IconCSS = IconCSS(viewType, theme);
|
|
172
173
|
const _DropdownFormCSS = viewType === 'outlined' ? DropdownFormOutlinedCSS(disabled, readOnly, placeholder, theme) : DropdownFormCSS(viewType, multiple, disabled, readOnly, placeholder, _DropdownInputCSS.name, theme);
|
|
173
174
|
const _DropdownListCSS = DropdownListCSS(theme);
|
|
174
|
-
const _DropdownBoxCSS = DropdownBoxCSS(loadingState, theme, itemMode);
|
|
175
|
+
const _DropdownBoxCSS = DropdownBoxCSS(loadingState, theme, itemMode, isPaging);
|
|
175
176
|
const _DropdownItemCSS = DropdownItemCSS(multiple, selectBox, theme);
|
|
176
177
|
const _DropdownRootCSS = DropdownRootCSS(_DropdownFormCSS.name, _DropdownInputCSS.name, theme);
|
|
177
178
|
const _CheckBoxCSS = CheckBoxCSS(theme);
|
|
@@ -287,10 +288,10 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
|
|
|
287
288
|
});
|
|
288
289
|
};
|
|
289
290
|
|
|
290
|
-
/**
|
|
291
|
-
* So sánh text đầu vào cáo map với txtSearch
|
|
292
|
-
* @param text
|
|
293
|
-
* @return {boolean}
|
|
291
|
+
/**
|
|
292
|
+
* So sánh text đầu vào cáo map với txtSearch
|
|
293
|
+
* @param text
|
|
294
|
+
* @return {boolean}
|
|
294
295
|
*/
|
|
295
296
|
const handleRenderBySearch = (text = '') => {
|
|
296
297
|
if (typeof text !== 'string') text = text.toString();
|
|
@@ -302,10 +303,10 @@ const Dropdown = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference)
|
|
|
302
303
|
} else return text.toLowerCase().includes(txtSearch.toLowerCase());
|
|
303
304
|
};
|
|
304
305
|
|
|
305
|
-
/**
|
|
306
|
-
* 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
|
|
307
|
-
* @param data {object} rowData of dataSource
|
|
308
|
-
* @return {string}
|
|
306
|
+
/**
|
|
307
|
+
* 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
|
|
308
|
+
* @param data {object} rowData of dataSource
|
|
309
|
+
* @return {string}
|
|
309
310
|
*/
|
|
310
311
|
const displayValue = data => {
|
|
311
312
|
let text = '';
|
|
@@ -1563,8 +1564,8 @@ const DropdownListCSS = ({
|
|
|
1563
1564
|
`;
|
|
1564
1565
|
const DropdownBoxCSS = (loading, {
|
|
1565
1566
|
colors
|
|
1566
|
-
}, itemMode) => css`
|
|
1567
|
-
${loading || itemMode === 'treeview' ? overflowHidden : overflowYScroll};
|
|
1567
|
+
}, itemMode, isPaging) => css`
|
|
1568
|
+
${loading || itemMode === 'treeview' || isPaging ? overflowHidden : overflowYScroll};
|
|
1568
1569
|
${parseMaxHeight(280)};
|
|
1569
1570
|
&::-webkit-scrollbar {
|
|
1570
1571
|
${borderRadius(4)};
|
|
@@ -1718,9 +1719,9 @@ Dropdown.propTypes = {
|
|
|
1718
1719
|
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
|
|
1719
1720
|
/** If `true`, the component is disabled. */
|
|
1720
1721
|
disabled: PropTypes.bool,
|
|
1721
|
-
/** The field name used for displaying text in the dropdown list.<br/>
|
|
1722
|
-
* Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
|
|
1723
|
-
* Note: Do not use 'id - name', as it will return undefined.
|
|
1722
|
+
/** The field name used for displaying text in the dropdown list.<br/>
|
|
1723
|
+
* Examples: 'name', '{id} - {name}', '{age} age(s)'<br/>
|
|
1724
|
+
* Note: Do not use 'id - name', as it will return undefined.
|
|
1724
1725
|
*/
|
|
1725
1726
|
displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
|
|
1726
1727
|
/** Inline style for dropdown items. */
|
|
@@ -1729,14 +1730,14 @@ Dropdown.propTypes = {
|
|
|
1729
1730
|
error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
|
|
1730
1731
|
/** Props applied to the [HelperText](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) element. */
|
|
1731
1732
|
helperTextProps: PropTypes.object,
|
|
1732
|
-
/** The field name used for displaying icons.<br/>
|
|
1733
|
-
* Example:<br/>
|
|
1734
|
-
* string: 'icon'<br/>
|
|
1735
|
-
* object: {<br/>
|
|
1736
|
-
* key: 'icon',<br/>
|
|
1737
|
-
* prefix: 'https://imglink.com',<br/>
|
|
1738
|
-
* suffix: '.jpg'<br/>
|
|
1739
|
-
* }
|
|
1733
|
+
/** The field name used for displaying icons.<br/>
|
|
1734
|
+
* Example:<br/>
|
|
1735
|
+
* string: 'icon'<br/>
|
|
1736
|
+
* object: {<br/>
|
|
1737
|
+
* key: 'icon',<br/>
|
|
1738
|
+
* prefix: 'https://imglink.com',<br/>
|
|
1739
|
+
* suffix: '.jpg'<br/>
|
|
1740
|
+
* }
|
|
1740
1741
|
*/
|
|
1741
1742
|
iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
|
|
1742
1743
|
key: PropTypes.string,
|
|
@@ -1770,8 +1771,8 @@ Dropdown.propTypes = {
|
|
|
1770
1771
|
onChange: PropTypes.func,
|
|
1771
1772
|
/** Callback function fired when the dropdown is closed. */
|
|
1772
1773
|
onClosed: PropTypes.func,
|
|
1773
|
-
/** Callback function fired when the input value changes.<br/>
|
|
1774
|
-
* If undefined, the filter function will run (default behavior).
|
|
1774
|
+
/** Callback function fired when the input value changes.<br/>
|
|
1775
|
+
* If undefined, the filter function will run (default behavior).
|
|
1775
1776
|
*/
|
|
1776
1777
|
onInput: PropTypes.func,
|
|
1777
1778
|
/** Callback function fired when a key is pressed down in the input. */
|
|
@@ -1784,21 +1785,21 @@ Dropdown.propTypes = {
|
|
|
1784
1785
|
placeholder: PropTypes.string,
|
|
1785
1786
|
/** If `true`, the component is read-only. */
|
|
1786
1787
|
readOnly: PropTypes.bool,
|
|
1787
|
-
/** Function used for custom rendering of items.<br/>
|
|
1788
|
-
* Example: `(data, index) => data.name + ' - ' + data.role`<br/>
|
|
1789
|
-
* This can be used as an alternative to `displayExpr`
|
|
1788
|
+
/** Function used for custom rendering of items.<br/>
|
|
1789
|
+
* Example: `(data, index) => data.name + ' - ' + data.role`<br/>
|
|
1790
|
+
* This can be used as an alternative to `displayExpr`
|
|
1790
1791
|
*/
|
|
1791
1792
|
renderItem: PropTypes.func,
|
|
1792
|
-
/** Function or field name used to display selected items.<br/>
|
|
1793
|
-
* Example: `(data, index) => index + ' - ' + data.name`<br/>
|
|
1793
|
+
/** Function or field name used to display selected items.<br/>
|
|
1794
|
+
* Example: `(data, index) => index + ' - ' + data.name`<br/>
|
|
1794
1795
|
*/
|
|
1795
1796
|
renderSelectedItem: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
|
|
1796
1797
|
/** If `true`, the label will indicate that the input is required. */
|
|
1797
1798
|
required: PropTypes.bool,
|
|
1798
|
-
/**
|
|
1799
|
-
* Duration to wait after entering search content before triggering a search.<br/>
|
|
1800
|
-
* Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
|
|
1801
|
-
* If `true`, the default delayOnInput will be used.
|
|
1799
|
+
/**
|
|
1800
|
+
* Duration to wait after entering search content before triggering a search.<br/>
|
|
1801
|
+
* Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
|
|
1802
|
+
* If `true`, the default delayOnInput will be used.
|
|
1802
1803
|
*/
|
|
1803
1804
|
searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
|
|
1804
1805
|
/** Specifies the field name or expression used to compare values with the search string. */
|
|
@@ -1825,19 +1826,19 @@ Dropdown.propTypes = {
|
|
|
1825
1826
|
valueObjectDefault: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
1826
1827
|
/** The variant to use. */
|
|
1827
1828
|
viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
|
|
1828
|
-
/**
|
|
1829
|
-
* ref methods
|
|
1830
|
-
*
|
|
1831
|
-
* how to get component element? ref.current
|
|
1832
|
-
*
|
|
1833
|
-
* how to call method? ref.current.instance.{method}
|
|
1834
|
-
*
|
|
1835
|
-
* * showDropdown(): Show dropdown
|
|
1836
|
-
* * closeDropdown(): Close dropdown
|
|
1837
|
-
* * onClear(): Clear selected value
|
|
1838
|
-
* * setPreviousValue(): Set value to previous value
|
|
1839
|
-
* * setValue(value): Set value of dropdown
|
|
1840
|
-
* * @param {value} - string || number || array
|
|
1829
|
+
/**
|
|
1830
|
+
* ref methods
|
|
1831
|
+
*
|
|
1832
|
+
* how to get component element? ref.current
|
|
1833
|
+
*
|
|
1834
|
+
* how to call method? ref.current.instance.{method}
|
|
1835
|
+
*
|
|
1836
|
+
* * showDropdown(): Show dropdown
|
|
1837
|
+
* * closeDropdown(): Close dropdown
|
|
1838
|
+
* * onClear(): Clear selected value
|
|
1839
|
+
* * setPreviousValue(): Set value to previous value
|
|
1840
|
+
* * setValue(value): Set value of dropdown
|
|
1841
|
+
* * @param {value} - string || number || array
|
|
1841
1842
|
*/
|
|
1842
1843
|
};
|
|
1843
1844
|
export default Dropdown;
|
|
@@ -398,6 +398,7 @@ const PagingInfo = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
|
|
|
398
398
|
height: 24,
|
|
399
399
|
color: 'line/category'
|
|
400
400
|
}) : getGlobal('lineNumber'), jsx(Dropdown, {
|
|
401
|
+
isPaging: true,
|
|
401
402
|
allowSearch: false,
|
|
402
403
|
viewType: 'underlined',
|
|
403
404
|
dataSource: listPerPageData,
|