@widergy/energy-ui 3.91.0 → 3.92.0
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/CHANGELOG.md +14 -0
- package/dist/components/UTBarChart/components/XAxis/index.js +4 -4
- package/dist/components/UTBarChart/index.js +4 -2
- package/dist/components/UTBarChart/utils.js +8 -6
- package/dist/components/UTSelect/versions/V1/README.md +199 -31
- package/dist/components/UTSelect/versions/V1/index.js +11 -4
- package/dist/components/UTSelect/versions/V1/styles.module.scss +4 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
# [3.92.0](https://github.com/widergy/energy-ui/compare/v3.91.1...v3.92.0) (2025-07-22)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* [UGEE-310] only linear chart ([#649](https://github.com/widergy/energy-ui/issues/649)) ([eff5903](https://github.com/widergy/energy-ui/commit/eff5903a74e7f80a2135b1793678cd6ba5c49793))
|
|
7
|
+
|
|
8
|
+
## [3.91.1](https://github.com/widergy/energy-ui/compare/v3.91.0...v3.91.1) (2025-07-22)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* [SFPE-459] free width ut select version v1 ([#646](https://github.com/widergy/energy-ui/issues/646)) ([5fb488e](https://github.com/widergy/energy-ui/commit/5fb488ef0e4cb14544be582fab8e7d736bd28fce))
|
|
14
|
+
|
|
1
15
|
# [3.91.0](https://github.com/widergy/energy-ui/compare/v3.90.0...v3.91.0) (2025-07-22)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -76,7 +76,7 @@ const XAxis = _ref => {
|
|
|
76
76
|
labelYOffset = 0
|
|
77
77
|
} = _ref2;
|
|
78
78
|
const selected = index === currentLabel;
|
|
79
|
-
return /*#__PURE__*/_react.default.createElement(_AxisElement.default, {
|
|
79
|
+
return mainLabel ? /*#__PURE__*/_react.default.createElement(_AxisElement.default, {
|
|
80
80
|
barRef: barRef,
|
|
81
81
|
barWidth: barWidth,
|
|
82
82
|
circle: circle,
|
|
@@ -93,13 +93,13 @@ const XAxis = _ref => {
|
|
|
93
93
|
square: square,
|
|
94
94
|
x: fullSizeBars ? graphXEnd / 2 + customXOffset : xAxis(index) + xOffset,
|
|
95
95
|
yOffset: _constants.Y_OFFSET
|
|
96
|
-
});
|
|
96
|
+
}) : null;
|
|
97
97
|
})), /*#__PURE__*/_react.default.createElement("g", null, xAxisDefinition.map((_ref3, index) => {
|
|
98
98
|
let {
|
|
99
99
|
secondaryLabel,
|
|
100
100
|
color
|
|
101
101
|
} = _ref3;
|
|
102
|
-
return /*#__PURE__*/_react.default.createElement(_AxisElement.default, {
|
|
102
|
+
return secondaryLabel ? /*#__PURE__*/_react.default.createElement(_AxisElement.default, {
|
|
103
103
|
barWidth: barWidth,
|
|
104
104
|
className: classes.xAxisSecondaryLabel,
|
|
105
105
|
color: color || '',
|
|
@@ -108,7 +108,7 @@ const XAxis = _ref => {
|
|
|
108
108
|
secondaryLabelDataTestId: "".concat(barChart.xAxis.secondaryLabel).concat(index),
|
|
109
109
|
x: xAxis(index) + xOffset,
|
|
110
110
|
yOffset: _constants.Y_OFFSET
|
|
111
|
-
});
|
|
111
|
+
}) : null;
|
|
112
112
|
})))), /*#__PURE__*/_react.default.createElement("g", null, formattedDecorators.map(decoration => /*#__PURE__*/_react.default.createElement(_Decoration.default, {
|
|
113
113
|
classes: classes,
|
|
114
114
|
barWidth: barWidth,
|
|
@@ -29,6 +29,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
29
29
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
30
30
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
31
31
|
const UTBarChart = _ref => {
|
|
32
|
+
var _xAxisDefinition$filt, _formattedData$, _formattedData$2;
|
|
32
33
|
let {
|
|
33
34
|
barBorderRadius,
|
|
34
35
|
barData,
|
|
@@ -121,6 +122,7 @@ const UTBarChart = _ref => {
|
|
|
121
122
|
} = (0, _utils.getMaxValues)(flattenedAndReducedBarData, flatLinearData, levels);
|
|
122
123
|
const withLinearData = !(0, _array.isEmpty)(flatLinearData);
|
|
123
124
|
const withBarData = !(0, _array.isEmpty)(fullFlatBarData);
|
|
125
|
+
const visibleLabelsCount = (xAxisDefinition === null || xAxisDefinition === void 0 || (_xAxisDefinition$filt = xAxisDefinition.filter(item => item.mainLabel || item.secondaryLabel)) === null || _xAxisDefinition$filt === void 0 ? void 0 : _xAxisDefinition$filt.length) || 0;
|
|
124
126
|
const {
|
|
125
127
|
TOTAL_HEIGHT,
|
|
126
128
|
TOTAL_WIDTH,
|
|
@@ -128,13 +130,13 @@ const UTBarChart = _ref => {
|
|
|
128
130
|
GRAPH_X_START,
|
|
129
131
|
GRAPH_Y_END,
|
|
130
132
|
GRAPH_Y_START
|
|
131
|
-
} = (0, _utils.getGraphAttributes)(containerWidth, containerHeight, marginLeft, marginRight, marginBottom, pagination ? 0 : minBarWidth, formattedData[0]
|
|
133
|
+
} = (0, _utils.getGraphAttributes)(containerWidth, containerHeight, marginLeft, marginRight, marginBottom, pagination ? 0 : minBarWidth, ((_formattedData$ = formattedData[0]) === null || _formattedData$ === void 0 ? void 0 : _formattedData$.length) || visibleLabelsCount, barPadding, groups, spacingOptions);
|
|
132
134
|
const [linearLowerBound, linearUpperBound] = (0, _utils.getBounds)(maxLinearValue, yAxisTicks);
|
|
133
135
|
const [barLowerBound, barUpperBound] = (0, _utils.getBounds)(maxBarValue, yAxisTicks, useMaxBarValue);
|
|
134
136
|
const maxAbsoluteValue = Math.max(linearUpperBound, barUpperBound);
|
|
135
137
|
const barMaxValue = singleYAxis ? maxAbsoluteValue : barUpperBound;
|
|
136
138
|
const yAxis = d3.scaleLinear().domain([barLowerBound, barMaxValue]).range([GRAPH_Y_START, GRAPH_Y_END]);
|
|
137
|
-
const xAxis = d3.scaleBand().domain(d3.range(formattedData[0].length)).range([GRAPH_X_START, GRAPH_X_END]).padding(barPadding);
|
|
139
|
+
const xAxis = d3.scaleBand().domain(d3.range(((_formattedData$2 = formattedData[0]) === null || _formattedData$2 === void 0 ? void 0 : _formattedData$2.length) || (xAxisDefinition === null || xAxisDefinition === void 0 ? void 0 : xAxisDefinition.length) || 0)).range([GRAPH_X_START, GRAPH_X_END]).padding(barPadding);
|
|
138
140
|
const groupWidth = fullSizeBars ? GRAPH_X_END : xAxis.bandwidth();
|
|
139
141
|
const xSubAxis = d3.scaleBand().domain(d3.range(groups)).range([0, groupWidth]).padding(barPadding);
|
|
140
142
|
const barWidth = xSubAxis.bandwidth();
|
|
@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getPages = exports.getMinValue = exports.getMaxValues = exports.getMaxValue = exports.getGrid = exports.getGraphAttributes = exports.getFormattedLinearData = exports.getFormattedDecorators = exports.getFormattedData = exports.getBounds = exports.flattenData = exports.flattenAndReduceBarData = void 0;
|
|
7
|
-
var _array = require("@widergy/web-utils/lib/array");
|
|
8
7
|
var d3 = _interopRequireWildcard(require("d3"));
|
|
8
|
+
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
|
|
9
9
|
var _constants = require("./constants");
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
11
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
11
12
|
const getPages = function () {
|
|
12
13
|
let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
@@ -36,14 +37,14 @@ const getFormattedLinearData = function () {
|
|
|
36
37
|
}));
|
|
37
38
|
};
|
|
38
39
|
exports.getFormattedLinearData = getFormattedLinearData;
|
|
39
|
-
const getMaxValue = dataSet => dataSet && !(0,
|
|
40
|
+
const getMaxValue = dataSet => dataSet && !(0, _isEmpty.default)(dataSet) && (d3.max(dataSet, _ref2 => {
|
|
40
41
|
let {
|
|
41
42
|
value
|
|
42
43
|
} = _ref2;
|
|
43
44
|
return value;
|
|
44
45
|
}) || 0);
|
|
45
46
|
exports.getMaxValue = getMaxValue;
|
|
46
|
-
const getMinValue = dataSet => dataSet && !(0,
|
|
47
|
+
const getMinValue = dataSet => dataSet && !(0, _isEmpty.default)(dataSet) && d3.min(dataSet, _ref3 => {
|
|
47
48
|
let {
|
|
48
49
|
value
|
|
49
50
|
} = _ref3;
|
|
@@ -57,7 +58,8 @@ const getMaxValues = (flatBarData, flatLinearData, levels) => ({
|
|
|
57
58
|
});
|
|
58
59
|
exports.getMaxValues = getMaxValues;
|
|
59
60
|
const calculateTotalWidth = (minBarWidth, dataLength, padding, containerWidth, marginLeft, marginRight, groups) => {
|
|
60
|
-
const
|
|
61
|
+
const effectiveGroups = groups || 1;
|
|
62
|
+
const minimumNeededWidth = dataLength * effectiveGroups * (minBarWidth + 2 * padding) + marginLeft + marginRight;
|
|
61
63
|
return Math.max(containerWidth, minimumNeededWidth);
|
|
62
64
|
};
|
|
63
65
|
const getGraphAttributes = (containerWidth, containerHeight, marginLeft, marginRight, marginBottom, minBarWidth, dataLength, padding, groups, spacingOptions) => {
|
|
@@ -79,7 +81,7 @@ const getGraphAttributes = (containerWidth, containerHeight, marginLeft, marginR
|
|
|
79
81
|
exports.getGraphAttributes = getGraphAttributes;
|
|
80
82
|
const flattenBarData = data => {
|
|
81
83
|
var _data$0$;
|
|
82
|
-
return data && Array.isArray((_data$0$ = data[0][0]) === null || _data$0$ === void 0 ? void 0 : _data$0$.values) ? data.flat().map(_ref4 => {
|
|
84
|
+
return data && !(0, _isEmpty.default)(data) && !(0, _isEmpty.default)(data[0]) && Array.isArray((_data$0$ = data[0][0]) === null || _data$0$ === void 0 ? void 0 : _data$0$.values) ? data.flat().map(_ref4 => {
|
|
83
85
|
let {
|
|
84
86
|
values
|
|
85
87
|
} = _ref4;
|
|
@@ -88,7 +90,7 @@ const flattenBarData = data => {
|
|
|
88
90
|
};
|
|
89
91
|
const flattenAndReduceBarData = data => {
|
|
90
92
|
var _data$0$2;
|
|
91
|
-
return data && (Array.isArray((_data$0$2 = data[0][0]) === null || _data$0$2 === void 0 ? void 0 : _data$0$2.values) ? data.flat().map(_ref5 => {
|
|
93
|
+
return data && !(0, _isEmpty.default)(data) && !(0, _isEmpty.default)(data[0]) && (Array.isArray((_data$0$2 = data[0][0]) === null || _data$0$2 === void 0 ? void 0 : _data$0$2.values) ? data.flat().map(_ref5 => {
|
|
92
94
|
let {
|
|
93
95
|
values
|
|
94
96
|
} = _ref5;
|
|
@@ -4,39 +4,64 @@
|
|
|
4
4
|
|
|
5
5
|
`UTSelect` is a customizable dropdown select component, built on top of Material UI's `Autocomplete`. It allows users to select single or multiple options from a provided list with features like search, dynamic filtering, and adornments (prefixes, suffixes, icons, and badges).
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
|
10
|
-
|
|
|
11
|
-
|
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
7
|
+
## Props
|
|
8
|
+
|
|
9
|
+
| Name | Type | Default | Description |
|
|
10
|
+
| --------------------- | -------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| action | object | | Action object containing `Icon`, `onClick`, and `size` for the action button. |
|
|
12
|
+
| actions | array | | Array of action buttons to display in the title area. |
|
|
13
|
+
| alwaysShowPlaceholder | bool | true | Determines if the placeholder should always be shown, even when there is a value. |
|
|
14
|
+
| className | string | | Additional CSS class name for the component container. |
|
|
15
|
+
| clearable | bool | true | Determines whether a button to clear the current selection should be shown. |
|
|
16
|
+
| dataTestId | string | | Test ID for the main input component. |
|
|
17
|
+
| disabled | bool | false | Disables the select input. |
|
|
18
|
+
| disableFilterOptions | bool | false | Disables option filtering, showing all options even when typing in the search field. |
|
|
19
|
+
| error | string | | Error message to display below the input field. |
|
|
20
|
+
| errorDataTestId | string | | Test ID for the error validation component. |
|
|
21
|
+
| freeWidth | bool | false | Allows the dropdown to have a free width instead of matching the input width. |
|
|
22
|
+
| helpText | string | | Help text displayed below the input field. |
|
|
23
|
+
| inputSize | string | | Size of the input field. One of: `small`, `large`. |
|
|
24
|
+
| itemDataTestId | string | | Test ID for individual option items in the dropdown. |
|
|
25
|
+
| listDataTestId | string | | Test ID for the dropdown list container. |
|
|
26
|
+
| multiple | bool | false | Allows multiple selection if true. |
|
|
27
|
+
| noMatchesText | string | 'No hay coincidencias con tu búsqueda' | Text to display when no matches are found in the search. |
|
|
28
|
+
| noOptionsText | string | 'No hay opciones disponibles' | Text to display when there are no options available. |
|
|
29
|
+
| onChange | func | () => {} | Function to call when the selected value(s) change. |
|
|
30
|
+
| onChangeSearchTerm | func | () => {} | Function to call when the search term changes. |
|
|
31
|
+
| options | array | [] | Array of options to be displayed in the dropdown. Each option is an object with `name`, `value`, and optionally `category` and `subOptions`. |
|
|
32
|
+
| placeholder | string | | Placeholder text for the select field. |
|
|
33
|
+
| prefix | string | | Text to display as a prefix inside the input field. |
|
|
34
|
+
| readOnly | bool | false | Makes the select field read-only, preventing changes but allowing the dropdown to open. |
|
|
35
|
+
| required | bool | false | Indicates if the select field is required. |
|
|
36
|
+
| suffix | string | | Text to display as a suffix inside the input field. |
|
|
37
|
+
| title | string | | Title for the select field, displayed above the input. |
|
|
38
|
+
| titleVariant | string | 'large' | Variant for the title display. Uses `TITLE_VARIANTS` constants. |
|
|
39
|
+
| value | oneOfType([string, array]) | null | The value of the input field. It can be a string for single selection or an array for multiple selection. |
|
|
40
|
+
| variant | string | 'select' | Determines the visual variant, either `select` or `picker`. |
|
|
41
|
+
| withAutoReset | bool | true | Automatically resets the select value if the current selection is no longer available in the options. |
|
|
31
42
|
|
|
32
43
|
### Option Object
|
|
33
44
|
|
|
34
45
|
The `options` prop is an array of objects, each representing an option:
|
|
35
46
|
|
|
36
|
-
| Name
|
|
37
|
-
|
|
|
38
|
-
| name
|
|
39
|
-
| value
|
|
47
|
+
| Name | Type | Description |
|
|
48
|
+
| ---------- | -------------- | ---------------------------------------------------- |
|
|
49
|
+
| name | string | Label to display for the option. |
|
|
50
|
+
| value | string, number | Value of the option. |
|
|
51
|
+
| category | string | Optional category for grouping options. |
|
|
52
|
+
| subOptions | array | Optional nested options for hierarchical structures. |
|
|
53
|
+
|
|
54
|
+
### Action Object
|
|
55
|
+
|
|
56
|
+
The `action` prop accepts an object with the following properties:
|
|
57
|
+
|
|
58
|
+
| Name | Type | Description |
|
|
59
|
+
| ------- | ------ | ------------------------------ |
|
|
60
|
+
| Icon | string | Icon name to display. |
|
|
61
|
+
| onClick | func | Function to call when clicked. |
|
|
62
|
+
| size | string | Size of the action button. |
|
|
63
|
+
|
|
64
|
+
## Features
|
|
40
65
|
|
|
41
66
|
### `withAutoReset`
|
|
42
67
|
|
|
@@ -50,11 +75,34 @@ The `UTSelect` component sorts the options in a way that selected values are dis
|
|
|
50
75
|
|
|
51
76
|
When using the `multiple` prop, the dropdown stays open after selecting an option, allowing users to select more items without the dropdown closing each time. The sorting behavior in this mode is controlled to ensure that reordering of options happens only when the dropdown gains or loses focus, preventing unwanted changes to the displayed options while the user is actively selecting items.
|
|
52
77
|
|
|
78
|
+
### Category-based Organization
|
|
79
|
+
|
|
80
|
+
Options can be organized into categories using the `category` property. When categories are present, options are automatically sorted by category, and selected options are moved to the top of their respective categories.
|
|
81
|
+
|
|
82
|
+
### Search and Filtering
|
|
83
|
+
|
|
84
|
+
The component provides built-in search functionality that filters options based on the `name` property. The `disableFilterOptions` prop can be used to disable this filtering behavior, showing all options regardless of the search term.
|
|
85
|
+
|
|
53
86
|
## Adornments
|
|
54
87
|
|
|
55
88
|
`UTSelect` allows for additional adornments, such as prefixes, suffixes, and custom action buttons. The `prefix` and `suffix` props can be used to display text or icons inside the input. You can also add a custom action button using the `action` prop.
|
|
56
89
|
|
|
57
|
-
|
|
90
|
+
### Left Adornments
|
|
91
|
+
|
|
92
|
+
- Error icon (automatically shown when there's an error)
|
|
93
|
+
- Badge (shows count for multiple selections)
|
|
94
|
+
- Prefix text
|
|
95
|
+
|
|
96
|
+
### Right Adornments
|
|
97
|
+
|
|
98
|
+
- Suffix text
|
|
99
|
+
- Clear button (when `clearable` is true and there's a value)
|
|
100
|
+
- Dropdown chevron icon
|
|
101
|
+
- Custom action button
|
|
102
|
+
|
|
103
|
+
## Usage Examples
|
|
104
|
+
|
|
105
|
+
### Basic Single Selection
|
|
58
106
|
|
|
59
107
|
```jsx
|
|
60
108
|
import React, { useState } from 'react';
|
|
@@ -67,7 +115,7 @@ const options = [
|
|
|
67
115
|
{ name: 'Option 4', value: '4' }
|
|
68
116
|
];
|
|
69
117
|
|
|
70
|
-
const
|
|
118
|
+
const BasicExample = () => {
|
|
71
119
|
const [selectedOption, setSelectedOption] = useState(null);
|
|
72
120
|
|
|
73
121
|
return (
|
|
@@ -86,6 +134,126 @@ const UTSelectExample = () => {
|
|
|
86
134
|
</div>
|
|
87
135
|
);
|
|
88
136
|
};
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### Multiple Selection with Categories
|
|
140
|
+
|
|
141
|
+
```jsx
|
|
142
|
+
import React, { useState } from 'react';
|
|
143
|
+
import UTSelect from './UTSelect';
|
|
144
|
+
|
|
145
|
+
const categorizedOptions = [
|
|
146
|
+
{ name: 'Apple', value: 'apple', category: 'Fruits' },
|
|
147
|
+
{ name: 'Banana', value: 'banana', category: 'Fruits' },
|
|
148
|
+
{ name: 'Carrot', value: 'carrot', category: 'Vegetables' },
|
|
149
|
+
{ name: 'Broccoli', value: 'broccoli', category: 'Vegetables' },
|
|
150
|
+
{ name: 'Chicken', value: 'chicken', category: 'Proteins' },
|
|
151
|
+
{ name: 'Fish', value: 'fish', category: 'Proteins' }
|
|
152
|
+
];
|
|
153
|
+
|
|
154
|
+
const MultipleSelectionExample = () => {
|
|
155
|
+
const [selectedItems, setSelectedItems] = useState([]);
|
|
156
|
+
|
|
157
|
+
return (
|
|
158
|
+
<div style={{ padding: 20 }}>
|
|
159
|
+
<UTSelect
|
|
160
|
+
title="Select Multiple Items"
|
|
161
|
+
multiple
|
|
162
|
+
onChange={setSelectedItems}
|
|
163
|
+
options={categorizedOptions}
|
|
164
|
+
placeholder="Choose multiple items"
|
|
165
|
+
value={selectedItems}
|
|
166
|
+
helpText="You can select multiple items from different categories"
|
|
167
|
+
/>
|
|
168
|
+
<p>Selected Items: {selectedItems.join(', ')}</p>
|
|
169
|
+
</div>
|
|
170
|
+
);
|
|
171
|
+
};
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### With Custom Action and Adornments
|
|
175
|
+
|
|
176
|
+
```jsx
|
|
177
|
+
import React, { useState } from 'react';
|
|
178
|
+
import UTSelect from './UTSelect';
|
|
179
|
+
|
|
180
|
+
const AdvancedExample = () => {
|
|
181
|
+
const [selectedOption, setSelectedOption] = useState(null);
|
|
182
|
+
|
|
183
|
+
const customAction = {
|
|
184
|
+
Icon: 'IconPlus',
|
|
185
|
+
onClick: () => console.log('Custom action clicked'),
|
|
186
|
+
size: 'small'
|
|
187
|
+
};
|
|
188
|
+
|
|
189
|
+
return (
|
|
190
|
+
<div style={{ padding: 20 }}>
|
|
191
|
+
<UTSelect
|
|
192
|
+
title="Advanced Select"
|
|
193
|
+
onChange={setSelectedOption}
|
|
194
|
+
options={options}
|
|
195
|
+
placeholder="Choose an option"
|
|
196
|
+
prefix="$"
|
|
197
|
+
suffix="USD"
|
|
198
|
+
action={customAction}
|
|
199
|
+
error="This field is required"
|
|
200
|
+
helpText="This is a required field with custom adornments"
|
|
201
|
+
required
|
|
202
|
+
variant="picker"
|
|
203
|
+
/>
|
|
204
|
+
</div>
|
|
205
|
+
);
|
|
206
|
+
};
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
### Read-only Mode
|
|
210
|
+
|
|
211
|
+
```jsx
|
|
212
|
+
import React from 'react';
|
|
213
|
+
import UTSelect from './UTSelect';
|
|
214
|
+
|
|
215
|
+
const ReadOnlyExample = () => {
|
|
216
|
+
return (
|
|
217
|
+
<div style={{ padding: 20 }}>
|
|
218
|
+
<UTSelect
|
|
219
|
+
title="Read-only Select"
|
|
220
|
+
options={options}
|
|
221
|
+
value="1"
|
|
222
|
+
readOnly
|
|
223
|
+
helpText="This field cannot be modified"
|
|
224
|
+
/>
|
|
225
|
+
</div>
|
|
226
|
+
);
|
|
227
|
+
};
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
### With Search Term Handling
|
|
231
|
+
|
|
232
|
+
```jsx
|
|
233
|
+
import React, { useState } from 'react';
|
|
234
|
+
import UTSelect from './UTSelect';
|
|
235
|
+
|
|
236
|
+
const SearchExample = () => {
|
|
237
|
+
const [selectedOption, setSelectedOption] = useState(null);
|
|
238
|
+
const [searchTerm, setSearchTerm] = useState('');
|
|
239
|
+
|
|
240
|
+
const handleSearchChange = term => {
|
|
241
|
+
setSearchTerm(term);
|
|
242
|
+
console.log('Search term changed:', term);
|
|
243
|
+
};
|
|
89
244
|
|
|
90
|
-
|
|
245
|
+
return (
|
|
246
|
+
<div style={{ padding: 20 }}>
|
|
247
|
+
<UTSelect
|
|
248
|
+
title="Searchable Select"
|
|
249
|
+
onChange={setSelectedOption}
|
|
250
|
+
onChangeSearchTerm={handleSearchChange}
|
|
251
|
+
options={options}
|
|
252
|
+
placeholder="Search and select..."
|
|
253
|
+
value={selectedOption}
|
|
254
|
+
/>
|
|
255
|
+
<p>Current search term: {searchTerm}</p>
|
|
256
|
+
</div>
|
|
257
|
+
);
|
|
258
|
+
};
|
|
91
259
|
```
|
|
@@ -21,6 +21,7 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
|
21
21
|
var _utils2 = require("./utils");
|
|
22
22
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
23
23
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
24
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
24
25
|
const UTSelect = _ref => {
|
|
25
26
|
let {
|
|
26
27
|
action,
|
|
@@ -29,10 +30,11 @@ const UTSelect = _ref => {
|
|
|
29
30
|
className,
|
|
30
31
|
clearable = true,
|
|
31
32
|
dataTestId,
|
|
32
|
-
disableFilterOptions = false,
|
|
33
33
|
disabled,
|
|
34
|
+
disableFilterOptions = false,
|
|
34
35
|
error,
|
|
35
36
|
errorDataTestId,
|
|
37
|
+
freeWidth = false,
|
|
36
38
|
helpText,
|
|
37
39
|
inputSize,
|
|
38
40
|
itemDataTestId,
|
|
@@ -184,7 +186,11 @@ const UTSelect = _ref => {
|
|
|
184
186
|
actions: titleActions,
|
|
185
187
|
required: required,
|
|
186
188
|
size: titleVariant
|
|
187
|
-
}, title), /*#__PURE__*/_react.default.createElement(_lab.Autocomplete, {
|
|
189
|
+
}, title), /*#__PURE__*/_react.default.createElement(_lab.Autocomplete, _extends({}, freeWidth ? {
|
|
190
|
+
classes: {
|
|
191
|
+
popper: _stylesModule.default.popper
|
|
192
|
+
}
|
|
193
|
+
} : {}, {
|
|
188
194
|
disabled: disabled || readOnly,
|
|
189
195
|
getOptionLabel: option => "".concat(option.name),
|
|
190
196
|
ListboxComponent: _ListboxComponent.default,
|
|
@@ -197,7 +203,7 @@ const UTSelect = _ref => {
|
|
|
197
203
|
options: optionsSortedByCategory,
|
|
198
204
|
PaperComponent: _UTPaper.default,
|
|
199
205
|
renderInput: InputComponentToRender
|
|
200
|
-
}), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
206
|
+
})), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
201
207
|
colorTheme: "gray",
|
|
202
208
|
variant: "small"
|
|
203
209
|
}, helpText), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
|
|
@@ -216,10 +222,11 @@ UTSelect.propTypes = {
|
|
|
216
222
|
className: _propTypes.string,
|
|
217
223
|
clearable: _propTypes.bool,
|
|
218
224
|
dataTestId: _propTypes.string,
|
|
219
|
-
disableFilterOptions: _propTypes.bool,
|
|
220
225
|
disabled: _propTypes.bool,
|
|
226
|
+
disableFilterOptions: _propTypes.bool,
|
|
221
227
|
error: _propTypes.string,
|
|
222
228
|
errorDataTestId: _propTypes.string,
|
|
229
|
+
freeWidth: _propTypes.bool,
|
|
223
230
|
helpText: _propTypes.string,
|
|
224
231
|
inputSize: _propTypes.string,
|
|
225
232
|
itemDataTestId: _propTypes.string,
|