tabler-react-2 0.1.80 → 0.1.82

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.
Files changed (6) hide show
  1. package/dist/input/dropdown.js +69 -50
  2. package/docs/package.json +1 -1
  3. package/docs/public/page-data/components/dropdown-input/page-data.json +1 -1
  4. package/docs/public/page-data/dev-404-page/page-data.json +1 -1
  5. package/docs/src/docs/components/dropdown-input.mdx +100 -7
  6. package/package.json +1 -1
package/dist/input/dropdown.js CHANGED
@@ -3,12 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.LoadableDropdownInput = exports.DropdownInput = void 0;
6
+ exports.DropdownInput = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _input = require("./input");
10
- var _excluded = ["prompt", "values", "items", "value", "onChange", "aprops", "showSearch"],
11
- _excluded2 = ["values", "value", "onChange", "prompt", "loading", "label", "showLabel", "disabled", "disabledText"];
10
+ var _index = require("../index");
11
+ var _excluded = ["prompt", "values", "items", "value", "onChange", "aprops", "showSearch", "loading", "disabled", "disabledText", "label", "showLabel", "color", "outline"];
12
12
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
13
13
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
14
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -31,11 +31,45 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
31
31
  aprops = _ref.aprops,
32
32
  _ref$showSearch = _ref.showSearch,
33
33
  showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
34
+ _ref$loading = _ref.loading,
35
+ loading = _ref$loading === void 0 ? false : _ref$loading,
36
+ _ref$disabled = _ref.disabled,
37
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
38
+ disabledText = _ref.disabledText,
39
+ label = _ref.label,
40
+ _ref$showLabel = _ref.showLabel,
41
+ showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
42
+ color = _ref.color,
43
+ outline = _ref.outline,
34
44
  props = _objectWithoutProperties(_ref, _excluded);
35
- var values = ivalues || items;
45
+ // Allow aliasing: pass either `values` or `items`
46
+ var values = ivalues || items || [];
47
+
48
+ // When loading, show a Button in a container with an optional label.
49
+ if (loading) {
50
+ return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
51
+ className: "form-label"
52
+ }, label), /*#__PURE__*/_react["default"].createElement(_index.Button, {
53
+ loading: true,
54
+ disabled: true
55
+ }, prompt));
56
+ }
57
+
58
+ // When disabled, show a disabled Button (with alternate text if provided).
59
+ if (disabled) {
60
+ return /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
61
+ className: "form-label"
62
+ }, label), /*#__PURE__*/_react["default"].createElement(_index.Button, {
63
+ disabled: true
64
+ }, disabledText || prompt));
65
+ }
66
+
67
+ // Helper: if value is an object, use its id; otherwise, assume the value itself is the id.
36
68
  var getId = function getId(val) {
37
69
  return _typeof(val) === "object" && val !== null ? val.id : val;
38
70
  };
71
+
72
+ // Set up state for the selected value and search/filtering.
39
73
  var _useState = (0, _react.useState)(values.find(function (val) {
40
74
  return val.id === getId(value);
41
75
  }) || null),
@@ -51,7 +85,7 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
51
85
  filteredValues = _useState6[0],
52
86
  setFilteredValues = _useState6[1];
53
87
 
54
- // Update selected value if the `value` prop changes
88
+ // Update the selected value if the prop changes.
55
89
  (0, _react.useEffect)(function () {
56
90
  var matchedValue = values.find(function (val) {
57
91
  return val.id === getId(value);
@@ -59,23 +93,25 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
59
93
  setSelectedValue(matchedValue);
60
94
  }, [value, values]);
61
95
 
62
- // Filter the dropdown values based on the search query
96
+ // Filter values based on the search query.
63
97
  (0, _react.useEffect)(function () {
64
98
  setFilteredValues(values.filter(function (val) {
65
99
  return JSON.stringify(val).toLowerCase().includes(searchQuery.toLowerCase());
66
100
  }));
67
101
  }, [searchQuery, values]);
68
- var handleSelection = function handleSelection(value) {
69
- setSelectedValue(value);
102
+ var handleSelection = function handleSelection(val) {
103
+ setSelectedValue(val);
70
104
  if (onChange) {
71
- onChange(value); // Return the full object
105
+ onChange(val);
72
106
  }
73
107
  };
74
- return /*#__PURE__*/_react["default"].createElement("div", _extends({
108
+
109
+ // The main dropdown markup.
110
+ var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", _extends({
75
111
  className: "dropdown"
76
112
  }, props), /*#__PURE__*/_react["default"].createElement("a", _extends({
77
113
  href: "#",
78
- className: "btn dropdown-toggle ".concat(props.disabled ? "disabled" : "", " ").concat(props.color ? "btn-".concat(props.outline && "outline-").concat(props.color) : ""),
114
+ className: "btn dropdown-toggle ".concat(props.disabled ? "disabled" : "", " ").concat(color ? "btn-".concat(outline ? "outline-" : "").concat(color) : ""),
79
115
  "data-bs-toggle": "dropdown"
80
116
  }, aprops), selectedValue ? selectedValue.label : prompt), /*#__PURE__*/_react["default"].createElement("div", {
81
117
  className: "dropdown-menu"
@@ -87,20 +123,25 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
87
123
  onChange: function onChange(value) {
88
124
  return setSearchQuery(value);
89
125
  }
90
- })), filteredValues.map(function (value, index) {
126
+ })), filteredValues.map(function (val, index) {
91
127
  return /*#__PURE__*/_react["default"].createElement("a", {
92
128
  key: index,
93
- className: "dropdown-item".concat(selectedValue && selectedValue.id === value.id ? " active" : ""),
129
+ className: "dropdown-item".concat(selectedValue && selectedValue.id === val.id ? " active" : ""),
94
130
  onClick: function onClick() {
95
- return handleSelection(value);
131
+ return handleSelection(val);
96
132
  },
97
133
  style: {
98
134
  cursor: "pointer"
99
135
  }
100
- }, value.dropdownText || value.label);
136
+ }, val.dropdownText || val.label);
101
137
  }), filteredValues.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
102
138
  className: "dropdown-item text-muted"
103
139
  }, "No results found")));
140
+
141
+ // If a label is provided, wrap the dropdown with the label inside a container.
142
+ return label && showLabel ? /*#__PURE__*/_react["default"].createElement(_index.Util.Col, null, /*#__PURE__*/_react["default"].createElement("label", {
143
+ className: "form-label"
144
+ }, label), dropdownContent) : dropdownContent;
104
145
  };
105
146
  DropdownInput.propTypes = {
106
147
  prompt: _propTypes["default"].string.isRequired,
@@ -108,45 +149,23 @@ DropdownInput.propTypes = {
108
149
  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
109
150
  label: _propTypes["default"].string.isRequired,
110
151
  dropdownText: _propTypes["default"].string
111
- })).isRequired,
152
+ })),
153
+ items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
154
+ id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
155
+ label: _propTypes["default"].string.isRequired,
156
+ dropdownText: _propTypes["default"].string
157
+ })),
112
158
  value: _propTypes["default"].oneOfType([_propTypes["default"].shape({
113
159
  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired
114
160
  }), _propTypes["default"].string, _propTypes["default"].number]),
115
161
  onChange: _propTypes["default"].func.isRequired,
162
+ aprops: _propTypes["default"].object,
163
+ showSearch: _propTypes["default"].bool,
164
+ loading: _propTypes["default"].bool,
165
+ disabled: _propTypes["default"].bool,
166
+ disabledText: _propTypes["default"].string,
167
+ label: _propTypes["default"].string,
168
+ showLabel: _propTypes["default"].bool,
116
169
  color: _propTypes["default"].string,
117
170
  outline: _propTypes["default"].bool
118
- };
119
- var LoadableDropdownInput = exports.LoadableDropdownInput = function LoadableDropdownInput(_ref2) {
120
- var values = _ref2.values,
121
- value = _ref2.value,
122
- onChange = _ref2.onChange,
123
- prompt = _ref2.prompt,
124
- loading = _ref2.loading,
125
- label = _ref2.label,
126
- _ref2$showLabel = _ref2.showLabel,
127
- showLabel = _ref2$showLabel === void 0 ? true : _ref2$showLabel,
128
- _ref2$disabled = _ref2.disabled,
129
- disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
130
- disabledText = _ref2.disabledText,
131
- props = _objectWithoutProperties(_ref2, _excluded2);
132
- if (loading) return /*#__PURE__*/_react["default"].createElement(Util.Col, null, showLabel && /*#__PURE__*/_react["default"].createElement("label", {
133
- className: "form-label"
134
- }, label), /*#__PURE__*/_react["default"].createElement(Button, {
135
- loading: true,
136
- disabled: true
137
- }, prompt));
138
- if (disabled) return /*#__PURE__*/_react["default"].createElement(Util.Col, null, showLabel && /*#__PURE__*/_react["default"].createElement("label", {
139
- className: "form-label"
140
- }, label), /*#__PURE__*/_react["default"].createElement(Button, {
141
- disabled: true
142
- }, disabledText || prompt));
143
- return /*#__PURE__*/_react["default"].createElement(Util.Col, null, showLabel && /*#__PURE__*/_react["default"].createElement("label", {
144
- className: "form-label"
145
- }, label), /*#__PURE__*/_react["default"].createElement(DropdownInput, _extends({
146
- values: values,
147
- value: value,
148
- onChange: onChange,
149
- prompt: prompt,
150
- "data-value": value
151
- }, props)));
152
171
  };
package/docs/package.json CHANGED
@@ -21,7 +21,7 @@
21
21
  "react": "^18.2.0",
22
22
  "react-dom": "^18.2.0",
23
23
  "styled-components": "^6.1.15",
24
- "tabler-react-2": "^0.1.79"
24
+ "tabler-react-2": "^0.1.81"
25
25
  },
26
26
  "devDependencies": {},
27
27
  "keywords": [
package/docs/public/page-data/components/dropdown-input/page-data.json CHANGED
@@ -1 +1 @@
1
- {"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js-content-file-path-src-docs-components-dropdown-input-mdx","path":"/components/dropdown-input/","result":{"data":{"mdx":{"id":"64604855-8780-5836-b431-bbea02d735f8","excerpt":"Dropdown inputs are used to select an option from a list of options. Signature\nimport { DropdownInput } from \"tabler-react-2\";\n\n<DropdownInput {...props…","fields":{"slug":"/components/dropdown-input/"},"frontmatter":{"title":"Dropdown Input","description":null,"image":null,"disableTableOfContents":null},"headings":[{"depth":2,"value":"Signature"},{"depth":3,"value":"Props"},{"depth":2,"value":"Basic Usage"}]}},"pageContext":{"slug":"/components/dropdown-input/","prev":{"label":"Dropdown","link":"/components/dropdown"},"next":{"label":"Colors","link":"/utilities/colors"},"repositoryEditUrl":"https://github.com/jpedroschmitz/rocketdocs/tree/main/examples/gatsby-theme-docs/src/docs/components/dropdown-input.mdx","repositoryProvider":"GitHub","frontmatter":{"title":"Dropdown Input"}}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"],"slicesMap":{}}
1
+ {"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js-content-file-path-src-docs-components-dropdown-input-mdx","path":"/components/dropdown-input/","result":{"data":{"mdx":{"id":"64604855-8780-5836-b431-bbea02d735f8","excerpt":"Dropdown inputs are used to select an option from a list of options. Signature\nimport { DropdownInput } from \"tabler-react-2\";\n\n<DropdownInput {...props…","fields":{"slug":"/components/dropdown-input/"},"frontmatter":{"title":"Dropdown Input","description":null,"image":null,"disableTableOfContents":null},"headings":[{"depth":2,"value":"Signature"},{"depth":3,"value":"Props"},{"depth":2,"value":"Basic Usage"},{"depth":2,"value":"State Machine"},{"depth":2,"value":"Hiding the search input"},{"depth":2,"value":"Disabled"},{"depth":2,"value":""}]}},"pageContext":{"slug":"/components/dropdown-input/","prev":{"label":"Dropdown","link":"/components/dropdown"},"next":{"label":"Colors","link":"/utilities/colors"},"repositoryEditUrl":"https://github.com/jpedroschmitz/rocketdocs/tree/main/examples/gatsby-theme-docs/src/docs/components/dropdown-input.mdx","repositoryProvider":"GitHub","frontmatter":{"title":"Dropdown Input"}}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"],"slicesMap":{}}
package/docs/public/page-data/dev-404-page/page-data.json CHANGED
@@ -1 +1 @@
1
- {"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page/","result":{"data":{"allSiteFunction":{"nodes":[]},"allSitePage":{"nodes":[{"path":"/"},{"path":"/faq/"},{"path":"/getting-started/"},{"path":"/utilities/colors/"},{"path":"/components/alerts/"},{"path":"/utilities/margins/"},{"path":"/components/avatar/"},{"path":"/components/badges/"},{"path":"/components/buttons/"},{"path":"/components/cards/"},{"path":"/components/hr/"},{"path":"/components/typography/"},{"path":"/components/dropdown-input/"},{"path":"/todo/"},{"path":"/components/dropdown/"},{"path":"/404/"},{"path":"/404.html"}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}
1
+ {"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page/","result":{"data":{"allSiteFunction":{"nodes":[]},"allSitePage":{"nodes":[{"path":"/404/"},{"path":"/404.html"},{"path":"/"},{"path":"/faq/"},{"path":"/utilities/colors/"},{"path":"/getting-started/"},{"path":"/todo/"},{"path":"/utilities/margins/"},{"path":"/components/dropdown/"},{"path":"/components/cards/"},{"path":"/components/avatar/"},{"path":"/components/buttons/"},{"path":"/components/badges/"},{"path":"/components/dropdown-input/"},{"path":"/components/alerts/"},{"path":"/components/hr/"},{"path":"/components/typography/"}]}},"pageContext":{}},"staticQueryHashes":[],"slicesMap":{}}
package/docs/src/docs/components/dropdown-input.mdx CHANGED
@@ -17,13 +17,14 @@ import { DropdownInput } from "tabler-react-2";
17
17
 
18
18
  ### Props
19
19
 
20
- | Prop | Required | Type | Default | Description |
21
- | ---------- | -------- | ----------------------- | ------- | -------------------------------------------------------------- |
22
- | `prompt` | Yes | String | | The text to display in the dropdown. |
23
- | `values` | Yes | [`ItemList`](#itemlist) | | A list of items to display in the dropdown. |
24
- | `items` | Yes | [`ItemList`](#itemlist) | | A list of items to display in the dropdown. Alias of `values`. |
25
- | `value` | No | String | | The selected value's id. |
26
- | `onChange` | No | Function | | The function to call when the value is changed. |
20
+ | Prop | Required | Type | Default | Description |
21
+ | ------------ | -------- | ----------------------- | ------- | -------------------------------------------------------------- |
22
+ | `prompt` | Yes | String | | The text to display in the dropdown. |
23
+ | `values` | Yes | [`ItemList`](#itemlist) | | A list of items to display in the dropdown. |
24
+ | `items` | Yes | [`ItemList`](#itemlist) | | A list of items to display in the dropdown. Alias of `values`. |
25
+ | `value` | No | Any | | The selected value's id. |
26
+ | `onChange` | No | Function | | The function to call when the value is changed. |
27
+ | `showSearch` | No | Boolean | true | Whether to show the search input. |
27
28
 
28
29
  ## Basic Usage
29
30
 
@@ -51,3 +52,95 @@ The `DropdownInput` component is used to select an option from a list of options
51
52
  ]}
52
53
  />
53
54
  ```
55
+
56
+ ## State Machine
57
+
58
+ The `DropdownInput` component manages its own state. To fully implement a stateful `DropdownInput`, you need to provide the `value`, `onChange` and `items` props. The `items` prop will be an [ItemList](#itemlist) type, the `value` prop should be the id of the value you wish to be selected.
59
+
60
+ If I am selecting from a list of states, and my `value` should ne the 2-letter state abbreviation, but to offer the user the full state name, you would set up your `items` prop as follows:
61
+
62
+ ```jsx
63
+ items={[
64
+ { id: "AL", label: "Alabama", isGoodState: false },
65
+ { id: "AK", label: "Alaska", isGoodState: false },
66
+ { id: "AZ", label: "Arizona", isGoodState: false },
67
+ { id: "AR", label: "Arkansas", isGoodState: false },
68
+ { id: "OH", label: "Ohio", isGoodState: true }, // long live the best state!
69
+ ...
70
+ ]}
71
+ ```
72
+
73
+ If you wanted to default to Ohio, you would pass in the ID of the state as the value:
74
+
75
+ ```jsx
76
+ value = "OH";
77
+ ```
78
+
79
+ Then, when you handle the change event, you would get the full object back:
80
+
81
+ ```jsx
82
+ onChange={(value) => console.log(value)}
83
+
84
+ // Output:
85
+ // >> { id: "OH", label: "Ohio", isGoodState: true }
86
+ ```
87
+
88
+ You can also pass in other keys to the `items` object. They will not be used by the dropdown, but they will be returned in the change event (example the `isGoodState` key above).
89
+
90
+ ## Hiding the search input
91
+
92
+ By default, the dropdown will show a search input. You can hide it by passing in `showSearch={false}`.
93
+
94
+ <Excerpt>
95
+ <DropdownInput
96
+ prompt="Select a value"
97
+ items={[
98
+ { id: 1, label: "Sam" },
99
+ { id: 2, label: "Bob" },
100
+ { id: 3, label: "John" },
101
+ ]}
102
+ showSearch={false}
103
+ />
104
+ </Excerpt>
105
+
106
+ ```jsx
107
+ <DropdownInput
108
+ prompt="Select a value"
109
+ items={[
110
+ { id: 1, label: "Sam" },
111
+ { id: 2, label: "Bob" },
112
+ { id: 3, label: "John" },
113
+ ]}
114
+ showSearch={false}
115
+ />
116
+ ```
117
+
118
+ ## Disabled
119
+
120
+ You can disable the dropdown by passing in `disabled={true}`.
121
+
122
+ <Excerpt>
123
+ <DropdownInput
124
+ prompt="Select a value"
125
+ items={[
126
+ { id: 1, label: "Sam" },
127
+ { id: 2, label: "Bob" },
128
+ { id: 3, label: "John" },
129
+ ]}
130
+ disabled={true}
131
+ />
132
+ </Excerpt>
133
+
134
+ ```jsx
135
+ <DropdownInput
136
+ prompt="Select a value"
137
+ items={[
138
+ { id: 1, label: "Sam" },
139
+ { id: 2, label: "Bob" },
140
+ { id: 3, label: "John" },
141
+ ]}
142
+ disabled={true}
143
+ />
144
+ ```
145
+
146
+ ##
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tabler-react-2",
3
- "version": "0.1.80",
3
+ "version": "0.1.82",
4
4
  "description": "A react implementation of Tabler ui",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {