tabler-react-2 0.1.80 → 0.1.81

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 +70 -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,13 @@
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 _button = require("./button");
11
+ var _util = _interopRequireDefault(require("./util"));
12
+ var _excluded = ["prompt", "values", "items", "value", "onChange", "aprops", "showSearch", "loading", "disabled", "disabledText", "label", "showLabel", "color", "outline"];
12
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
13
14
  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
15
  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 +32,45 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
31
32
  aprops = _ref.aprops,
32
33
  _ref$showSearch = _ref.showSearch,
33
34
  showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
35
+ _ref$loading = _ref.loading,
36
+ loading = _ref$loading === void 0 ? false : _ref$loading,
37
+ _ref$disabled = _ref.disabled,
38
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
39
+ disabledText = _ref.disabledText,
40
+ label = _ref.label,
41
+ _ref$showLabel = _ref.showLabel,
42
+ showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
43
+ color = _ref.color,
44
+ outline = _ref.outline,
34
45
  props = _objectWithoutProperties(_ref, _excluded);
35
- var values = ivalues || items;
46
+ // Allow aliasing: pass either `values` or `items`
47
+ var values = ivalues || items || [];
48
+
49
+ // When loading, show a Button in a container with an optional label.
50
+ if (loading) {
51
+ return /*#__PURE__*/_react["default"].createElement(_util["default"].Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
52
+ className: "form-label"
53
+ }, label), /*#__PURE__*/_react["default"].createElement(_button.Button, {
54
+ loading: true,
55
+ disabled: true
56
+ }, prompt));
57
+ }
58
+
59
+ // When disabled, show a disabled Button (with alternate text if provided).
60
+ if (disabled) {
61
+ return /*#__PURE__*/_react["default"].createElement(_util["default"].Col, null, showLabel && label && /*#__PURE__*/_react["default"].createElement("label", {
62
+ className: "form-label"
63
+ }, label), /*#__PURE__*/_react["default"].createElement(_button.Button, {
64
+ disabled: true
65
+ }, disabledText || prompt));
66
+ }
67
+
68
+ // Helper: if value is an object, use its id; otherwise, assume the value itself is the id.
36
69
  var getId = function getId(val) {
37
70
  return _typeof(val) === "object" && val !== null ? val.id : val;
38
71
  };
72
+
73
+ // Set up state for the selected value and search/filtering.
39
74
  var _useState = (0, _react.useState)(values.find(function (val) {
40
75
  return val.id === getId(value);
41
76
  }) || null),
@@ -51,7 +86,7 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
51
86
  filteredValues = _useState6[0],
52
87
  setFilteredValues = _useState6[1];
53
88
 
54
- // Update selected value if the `value` prop changes
89
+ // Update the selected value if the prop changes.
55
90
  (0, _react.useEffect)(function () {
56
91
  var matchedValue = values.find(function (val) {
57
92
  return val.id === getId(value);
@@ -59,23 +94,25 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
59
94
  setSelectedValue(matchedValue);
60
95
  }, [value, values]);
61
96
 
62
- // Filter the dropdown values based on the search query
97
+ // Filter values based on the search query.
63
98
  (0, _react.useEffect)(function () {
64
99
  setFilteredValues(values.filter(function (val) {
65
100
  return JSON.stringify(val).toLowerCase().includes(searchQuery.toLowerCase());
66
101
  }));
67
102
  }, [searchQuery, values]);
68
- var handleSelection = function handleSelection(value) {
69
- setSelectedValue(value);
103
+ var handleSelection = function handleSelection(val) {
104
+ setSelectedValue(val);
70
105
  if (onChange) {
71
- onChange(value); // Return the full object
106
+ onChange(val);
72
107
  }
73
108
  };
74
- return /*#__PURE__*/_react["default"].createElement("div", _extends({
109
+
110
+ // The main dropdown markup.
111
+ var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", _extends({
75
112
  className: "dropdown"
76
113
  }, props), /*#__PURE__*/_react["default"].createElement("a", _extends({
77
114
  href: "#",
78
- className: "btn dropdown-toggle ".concat(props.disabled ? "disabled" : "", " ").concat(props.color ? "btn-".concat(props.outline && "outline-").concat(props.color) : ""),
115
+ className: "btn dropdown-toggle ".concat(props.disabled ? "disabled" : "", " ").concat(color ? "btn-".concat(outline ? "outline-" : "").concat(color) : ""),
79
116
  "data-bs-toggle": "dropdown"
80
117
  }, aprops), selectedValue ? selectedValue.label : prompt), /*#__PURE__*/_react["default"].createElement("div", {
81
118
  className: "dropdown-menu"
@@ -87,20 +124,25 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
87
124
  onChange: function onChange(value) {
88
125
  return setSearchQuery(value);
89
126
  }
90
- })), filteredValues.map(function (value, index) {
127
+ })), filteredValues.map(function (val, index) {
91
128
  return /*#__PURE__*/_react["default"].createElement("a", {
92
129
  key: index,
93
- className: "dropdown-item".concat(selectedValue && selectedValue.id === value.id ? " active" : ""),
130
+ className: "dropdown-item".concat(selectedValue && selectedValue.id === val.id ? " active" : ""),
94
131
  onClick: function onClick() {
95
- return handleSelection(value);
132
+ return handleSelection(val);
96
133
  },
97
134
  style: {
98
135
  cursor: "pointer"
99
136
  }
100
- }, value.dropdownText || value.label);
137
+ }, val.dropdownText || val.label);
101
138
  }), filteredValues.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
102
139
  className: "dropdown-item text-muted"
103
140
  }, "No results found")));
141
+
142
+ // If a label is provided, wrap the dropdown with the label inside a container.
143
+ return label && showLabel ? /*#__PURE__*/_react["default"].createElement(_util["default"].Col, null, /*#__PURE__*/_react["default"].createElement("label", {
144
+ className: "form-label"
145
+ }, label), dropdownContent) : dropdownContent;
104
146
  };
105
147
  DropdownInput.propTypes = {
106
148
  prompt: _propTypes["default"].string.isRequired,
@@ -108,45 +150,23 @@ DropdownInput.propTypes = {
108
150
  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
109
151
  label: _propTypes["default"].string.isRequired,
110
152
  dropdownText: _propTypes["default"].string
111
- })).isRequired,
153
+ })),
154
+ items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
155
+ id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
156
+ label: _propTypes["default"].string.isRequired,
157
+ dropdownText: _propTypes["default"].string
158
+ })),
112
159
  value: _propTypes["default"].oneOfType([_propTypes["default"].shape({
113
160
  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired
114
161
  }), _propTypes["default"].string, _propTypes["default"].number]),
115
162
  onChange: _propTypes["default"].func.isRequired,
163
+ aprops: _propTypes["default"].object,
164
+ showSearch: _propTypes["default"].bool,
165
+ loading: _propTypes["default"].bool,
166
+ disabled: _propTypes["default"].bool,
167
+ disabledText: _propTypes["default"].string,
168
+ label: _propTypes["default"].string,
169
+ showLabel: _propTypes["default"].bool,
116
170
  color: _propTypes["default"].string,
117
171
  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
172
  };
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.80"
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.81",
4
4
  "description": "A react implementation of Tabler ui",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {