@etsoo/materialui 1.3.20 → 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/lib/NumberInputField.d.ts

@@ -1,9 +1,22 @@
 import React from "react";
 import { InputFieldProps } from "./InputField";
+import { Currency } from "@etsoo/appscript";
 /**
  * Number input field properties
  */
 export type NumberInputFieldProps = Omit<InputFieldProps, "type" | "inputProps"> & {
+    /**
+     * Currency
+     */
+    currency?: string | Currency;
+    /**
+     * End symbol
+     */
+    endSymbol?: string;
+    /**
+     * Start (Currency) symbol
+     */
+    symbol?: string;
     /**
      * Input field style
      */

package/lib/NumberInputField.js

@@ -1,17 +1,26 @@
 import React from "react";
 import { InputField } from "./InputField";
+import { InputAdornment } from "@mui/material";
+import { NumberUtils } from "@etsoo/shared";
 /**
  * Number input field, for controlled only components, please see IntInputField and MoneyInputField
  * @param props Props
  * @returns Component
  */
 export function NumberInputField(props) {
-    const { inputStyle, min = 0, step = 1, max = 9999999, ...rest } = props;
+    const { currency, inputStyle, min = 0, step = 1, symbol = currency
+        ? `${currency} ${NumberUtils.getCurrencySymbol(currency)}`
+        : undefined, endSymbol, max = 9999999, InputProps, ...rest } = props;
     return (React.createElement(InputField, { type: "number", inputProps: {
             min,
             step,
             max,
             style: inputStyle,
             inputMode: "numeric"
+        }, InputProps: {
+            startAdornment: symbol ? (React.createElement(React.Fragment, null,
+                React.createElement(InputAdornment, { position: "start" }, symbol))) : undefined,
+            endAdornment: endSymbol ? (React.createElement(InputAdornment, { position: "end" }, endSymbol)) : undefined,
+            ...InputProps
         }, ...rest }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.20",
+  "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}

package/src/NumberInputField.tsx

@@ -1,5 +1,8 @@
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
+import { Currency } from "@etsoo/appscript";
+import { InputAdornment } from "@mui/material";
+import { NumberUtils } from "@etsoo/shared";
 
 /**
  * Number input field properties
@@ -8,6 +11,21 @@ export type NumberInputFieldProps = Omit<
   InputFieldProps,
   "type" | "inputProps"
 > & {
+  /**
+   * Currency
+   */
+  currency?: string | Currency;
+
+  /**
+   * End symbol
+   */
+  endSymbol?: string;
+
+  /**
+   * Start (Currency) symbol
+   */
+  symbol?: string;
+
   /**
    * Input field style
    */
@@ -35,7 +53,19 @@ export type NumberInputFieldProps = Omit<
  * @returns Component
  */
 export function NumberInputField(props: NumberInputFieldProps) {
-  const { inputStyle, min = 0, step = 1, max = 9999999, ...rest } = props;
+  const {
+    currency,
+    inputStyle,
+    min = 0,
+    step = 1,
+    symbol = currency
+      ? `${currency} ${NumberUtils.getCurrencySymbol(currency)}`
+      : undefined,
+    endSymbol,
+    max = 9999999,
+    InputProps,
+    ...rest
+  } = props;
 
   return (
     <InputField
@@ -47,6 +77,17 @@ export function NumberInputField(props: NumberInputFieldProps) {
         style: inputStyle,
         inputMode: "numeric"
       }}
+      InputProps={{
+        startAdornment: symbol ? (
+          <React.Fragment>
+            <InputAdornment position="start">{symbol}</InputAdornment>
+          </React.Fragment>
+        ) : undefined,
+        endAdornment: endSymbol ? (
+          <InputAdornment position="end">{endSymbol}</InputAdornment>
+        ) : undefined,
+        ...InputProps
+      }}
       {...rest}
     />
   );