@etsoo/materialui 1.3.21 → 1.3.22

package/lib/HiSelector.d.ts

@@ -29,6 +29,10 @@ export type HiSelectorProps<T extends object, D extends DataTypes.Keys<T> = IdDe
      * Label
      */
     label?: string;
+    /**
+     * Labels for each select
+     */
+    labels?: string[];
     /**
      * Label field
      */

package/lib/HiSelector.js

@@ -8,7 +8,7 @@ import { SelectEx } from "./SelectEx";
  */
 export function HiSelector(props) {
     // Destruct
-    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label, labelField = "name", loadData, onChange, onSelectChange, onItemChange, required, search = true, values = [] } = props;
+    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label, labelField = "name", labels = ["1", "2", "3", "4"], loadData, onChange, onSelectChange, onItemChange, required, search = true, values = [] } = props;
     const [localValues, setValues] = React.useState(values);
     const updateValue = (value) => {
         if (onChange)
@@ -43,11 +43,11 @@ export function HiSelector(props) {
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),
         React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ""}` }),
         React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText })),
+            React.createElement(SelectEx, { idField: idField, label: labels[0], labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, required: required, error: error, helperText: helperText })),
         localValues[0] != null && (React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange }))),
+            React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, label: labels[1], labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange }))),
         localValues[1] != null && (React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange }))),
+            React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, label: labels[2], labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange }))),
         localValues[2] != null && (React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange })))));
+            React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, label: labels[3], labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange })))));
 }

package/lib/HiSelectorTL.d.ts

@@ -29,6 +29,10 @@ export type HiSelectorTLProps<T extends object, D extends DataTypes.Keys<T> = Id
      * Label
      */
     label?: string;
+    /**
+     * Labels for each select
+     */
+    labels?: string[];
     /**
      * Load data callback
      */

package/lib/HiSelectorTL.js

@@ -8,7 +8,7 @@ import { Tiplist } from "./Tiplist";
  */
 export function HiSelectorTL(props) {
     // Destruct
-    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label = name, loadData, onChange, onItemChange, required, search = false, values = [] } = props;
+    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label = name, labels = ["1", "2", "3", "4"], loadData, onChange, onItemChange, required, search = false, values = [] } = props;
     const [localValues, setValues] = React.useState(values);
     const updateValue = (value) => {
         if (onChange)
@@ -37,11 +37,11 @@ export function HiSelectorTL(props) {
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),
         React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ""}` }),
         React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(Tiplist, { idField: idField, label: "1", name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) })),
+            React.createElement(Tiplist, { idField: idField, label: labels[0], name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) })),
         localValues[0] != null && (React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(Tiplist, { key: `${localValues[0]}`, label: "2", idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }))),
+            React.createElement(Tiplist, { key: `${localValues[0]}`, label: labels[1], idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }))),
         localValues[1] != null && (React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(Tiplist, { key: `${localValues[1]}`, label: "3", idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }))),
+            React.createElement(Tiplist, { key: `${localValues[1]}`, label: labels[2], idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }))),
         localValues[2] != null && (React.createElement(Grid, { item: true, ...breakPoints },
-            React.createElement(Tiplist, { key: `${localValues[2]}`, label: "4", idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) })))));
+            React.createElement(Tiplist, { key: `${localValues[2]}`, label: labels[3], idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) })))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.21",
+  "version": "1.3.22",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/HiSelector.tsx

@@ -46,6 +46,11 @@ export type HiSelectorProps<
    */
   label?: string;
 
+  /**
+   * Labels for each select
+   */
+  labels?: string[];
+
   /**
    * Label field
    */
@@ -106,6 +111,7 @@ export function HiSelector<
     name,
     label,
     labelField = "name" as L,
+    labels = ["1", "2", "3", "4"],
     loadData,
     onChange,
     onSelectChange,
@@ -166,6 +172,7 @@ export function HiSelector<
       <Grid item {...breakPoints}>
         <SelectEx<T, D, L>
           idField={idField}
+          label={labels[0]}
           labelField={labelField}
           name="tab1"
           search={search}
@@ -184,6 +191,7 @@ export function HiSelector<
           <SelectEx<T, D, L>
             key={`${localValues[0]}`}
             idField={idField}
+            label={labels[1]}
             labelField={labelField}
             name="tab2"
             search={search}
@@ -200,6 +208,7 @@ export function HiSelector<
           <SelectEx<T, D, L>
             key={`${localValues[1]}`}
             idField={idField}
+            label={labels[2]}
             labelField={labelField}
             name="tab3"
             search={search}
@@ -216,6 +225,7 @@ export function HiSelector<
           <SelectEx<T, D, L>
             key={`${localValues[2]}`}
             idField={idField}
+            label={labels[3]}
             labelField={labelField}
             name="tab4"
             search={search}

package/src/HiSelectorTL.tsx

@@ -46,6 +46,11 @@ export type HiSelectorTLProps<
    */
   label?: string;
 
+  /**
+   * Labels for each select
+   */
+  labels?: string[];
+
   /**
    * Load data callback
    */
@@ -103,6 +108,7 @@ export function HiSelectorTL<
     helperText,
     name,
     label = name,
+    labels = ["1", "2", "3", "4"],
     loadData,
     onChange,
     onItemChange,
@@ -161,7 +167,7 @@ export function HiSelectorTL<
       <Grid item {...breakPoints}>
         <Tiplist<T, D>
           idField={idField}
-          label="1"
+          label={labels[0]}
           name="tab1"
           search={search}
           fullWidth
@@ -177,7 +183,7 @@ export function HiSelectorTL<
         <Grid item {...breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[0]}`}
-            label="2"
+            label={labels[1]}
             idField={idField}
             name="tab2"
             search={search}
@@ -196,7 +202,7 @@ export function HiSelectorTL<
         <Grid item {...breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[1]}`}
-            label="3"
+            label={labels[2]}
             idField={idField}
             name="tab3"
             search={search}
@@ -215,7 +221,7 @@ export function HiSelectorTL<
         <Grid item {...breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[2]}`}
-            label="4"
+            label={labels[3]}
             idField={idField}
             name="tab4"
             search={search}