@etsoo/react 1.4.72 → 1.4.76

package/lib/components/ScrollerGrid.d.ts

@@ -33,7 +33,7 @@ export interface ScrollerGridProps<T> extends GridLoader<T>, Omit<VariableSizeGr
      * Id field
      * @default id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Item renderer
      */

package/lib/index.d.ts

@@ -64,6 +64,7 @@ export * from './mu/ScrollTopFab';
 export * from './mu/SearchBar';
 export * from './mu/SearchField';
 export * from './mu/SearchOptionGroup';
+export * from './mu/SelectBool';
 export * from './mu/SelectEx';
 export * from './mu/Switch';
 export * from './mu/SwitchAnt';

package/lib/index.js

@@ -67,6 +67,7 @@ export * from './mu/ScrollTopFab';
 export * from './mu/SearchBar';
 export * from './mu/SearchField';
 export * from './mu/SearchOptionGroup';
+export * from './mu/SelectBool';
 export * from './mu/SelectEx';
 export * from './mu/Switch';
 export * from './mu/SwitchAnt';

package/lib/mu/AutocompleteExtendedProps.d.ts

@@ -8,7 +8,7 @@ export interface AutocompleteExtendedProps<T extends Record<string, unknown>> ex
     /**
      * Id field, default is id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Id value
      */

package/lib/mu/ComboBox.d.ts

@@ -12,7 +12,7 @@ export interface ComboBoxProps<T extends {}> extends AutocompleteExtendedProps<T
     /**
      * Label field
      */
-    labelField?: keyof T;
+    labelField?: string & keyof T;
     /**
      * Load data callback
      */

package/lib/mu/DnDList.d.ts

@@ -31,7 +31,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Label field
      */
-    labelField: keyof D;
+    labelField: string & keyof D;
     /**
      * Load data
      */

package/lib/mu/ItemList.d.ts

@@ -10,11 +10,11 @@ export interface ItemListProps<T extends Record<string, unknown>> {
     /**
      * Id field name
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Label field name or callback
      */
-    labelField?: keyof T | ((item: T) => string);
+    labelField?: (string & keyof T) | ((item: T) => string);
     /**
      * Button icon
      */

package/lib/mu/MobileListItemRenderer.js

@@ -22,7 +22,6 @@ export function MobileListItemRenderer({ data, itemHeight, margins }, renderer)
     // Loading
     if (data == null)
         return React.createElement(LinearProgress, null);
-    console.log('margins', margins);
     // Elements
     const [title, subheader, actions, children, cardActions] = renderer(data);
     return (React.createElement(Card, { sx: {

package/lib/mu/OptionGroup.d.ts

@@ -17,7 +17,7 @@ export interface OptionGroupProps<T extends Record<string, any> = IdLabelDto, D
     /**
      * Id field, default is id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Label
      */
@@ -25,7 +25,7 @@ export interface OptionGroupProps<T extends Record<string, any> = IdLabelDto, D
     /**
      * Label field, default is label
      */
-    labelField?: keyof T;
+    labelField?: string & keyof T;
     /**
      * Multiple choose item
      */

package/lib/mu/ScrollerListEx.d.ts

@@ -40,7 +40,7 @@ export interface ScrollerListExProps<T> extends Omit<ScrollerListProps<T>, 'item
     /**
      * Id field
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Inner item renderer
      */

package/lib/mu/SelectBool.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IdLabelDto } from '@etsoo/appscript';
+import { SelectExProps } from './SelectEx';
+/**
+ * SelectBool props
+ */
+export interface SelectBoolProps extends Omit<SelectExProps<IdLabelDto<string>>, 'options' | 'loadData'> {
+}
+/**
+ * SelectBool (yes/no)
+ * @param props Props
+ * @returns Component
+ */
+export declare function SelectBool(props: SelectBoolProps): JSX.Element;

package/lib/mu/SelectBool.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { globalApp } from '..';
+import { SelectEx } from './SelectEx';
+/**
+ * SelectBool (yes/no)
+ * @param props Props
+ * @returns Component
+ */
+export function SelectBool(props) {
+    // Destruct
+    const { search = true, ...rest } = props;
+    // Options
+    const options = [
+        { id: 'false', label: globalApp.get('no') },
+        { id: 'true', label: globalApp.get('yes') }
+    ];
+    if (search)
+        options.unshift({ id: '', label: '---' });
+    // Layout
+    return React.createElement(SelectEx, { options: options, search: search, ...rest });
+}

package/lib/mu/SelectEx.d.ts

@@ -8,7 +8,7 @@ export interface SelectExProps<T extends {}> extends Omit<SelectProps, 'labelId'
     /**
      * Id field, default is id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Item icon renderer
      */
@@ -16,7 +16,7 @@ export interface SelectExProps<T extends {}> extends Omit<SelectProps, 'labelId'
     /**
      * Label field, default is label
      */
-    labelField?: ((option: T) => string) | keyof T;
+    labelField?: ((option: T) => string) | (string & keyof T);
     /**
      * Load data callback
      */

package/lib/mu/TableEx.d.ts

@@ -35,7 +35,7 @@ export interface TableExProps<T extends Record<string, any>> extends TableProps,
     /**
      * Id field
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
     /**
      * Max height
      */

package/lib/mu/Tiplist.js

@@ -29,6 +29,8 @@ export function Tiplist(props) {
         options: [],
         value: null
     });
+    // Input value
+    const inputValue = React.useMemo(() => states.value && Reflect.get(states.value, idField), [states.value]);
     React.useEffect(() => {
         if (localValue != null)
             stateUpdate({ value: localValue });
@@ -133,7 +135,7 @@ export function Tiplist(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: localIdValue !== null && localIdValue !== void 0 ? localIdValue : '', readOnly: true, onChange: inputOnChange }),
+        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: inputValue !== null && inputValue !== void 0 ? inputValue : '', readOnly: true, onChange: inputOnChange }),
         React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                 // Set value
                 setInputValue(value);

package/lib/mu/pages/ViewPage.d.ts

@@ -9,7 +9,7 @@ export interface ViewPageField<T extends {}> extends GridProps {
     /**
      * Data field
      */
-    data: keyof T | ((item: T) => React.ReactNode);
+    data: (string & keyof T) | ((item: T) => React.ReactNode);
     /**
      * Data type
      */

package/lib/mu/pages/ViewPage.js

@@ -86,6 +86,6 @@ export function ViewPage(props) {
                     ":"),
                 React.createElement(Typography, { variant: "subtitle2" }, itemData)));
         })),
-        actions != null && (React.createElement(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", paddingTop: paddings, paddingBottom: paddings, gap: paddings }, Utils.getResult(actions, data))),
+        actions != null && (React.createElement(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: paddings, paddingBottom: paddings, gap: paddings }, Utils.getResult(actions, data))),
         Utils.getResult(children, data)))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.4.72",
+    "version": "1.4.76",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
         "@emotion/react": "^11.7.1",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.6.0",
-        "@etsoo/appscript": "^1.2.27",
+        "@etsoo/appscript": "^1.2.28",
         "@etsoo/notificationbase": "^1.1.0",
         "@etsoo/shared": "^1.1.6",
         "@mui/icons-material": "^5.3.1",

package/src/components/ScrollerGrid.tsx

@@ -54,7 +54,7 @@ export interface ScrollerGridProps<T>
      * Id field
      * @default id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Item renderer

package/src/index.ts

@@ -71,6 +71,7 @@ export * from './mu/ScrollTopFab';
 export * from './mu/SearchBar';
 export * from './mu/SearchField';
 export * from './mu/SearchOptionGroup';
+export * from './mu/SelectBool';
 export * from './mu/SelectEx';
 export * from './mu/Switch';
 export * from './mu/SwitchAnt';

package/src/mu/AutocompleteExtendedProps.ts

@@ -13,7 +13,7 @@ export interface AutocompleteExtendedProps<T extends Record<string, unknown>>
     /**
      * Id field, default is id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Id value

package/src/mu/ComboBox.tsx

@@ -20,7 +20,7 @@ export interface ComboBoxProps<T extends {}>
     /**
      * Label field
      */
-    labelField?: keyof T;
+    labelField?: string & keyof T;
 
     /**
      * Load data callback

package/src/mu/DnDList.tsx

@@ -50,7 +50,7 @@ export interface DnDListProps<D extends {}, E extends React.ElementType> {
     /**
      * Label field
      */
-    labelField: keyof D;
+    labelField: string & keyof D;
 
     /**
      * Load data

package/src/mu/ItemList.tsx

@@ -22,12 +22,12 @@ export interface ItemListProps<T extends Record<string, unknown>> {
     /**
      * Id field name
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Label field name or callback
      */
-    labelField?: keyof T | ((item: T) => string);
+    labelField?: (string & keyof T) | ((item: T) => string);
 
     /**
      * Button icon

package/src/mu/MobileListItemRenderer.tsx

@@ -36,8 +36,6 @@ export function MobileListItemRenderer<T>(
     // Loading
     if (data == null) return <LinearProgress />;
 
-    console.log('margins', margins);
-
     // Elements
     const [title, subheader, actions, children, cardActions] = renderer(data);
 

package/src/mu/OptionGroup.tsx

@@ -32,7 +32,7 @@ export interface OptionGroupProps<
     /**
      * Id field, default is id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Label
@@ -42,7 +42,7 @@ export interface OptionGroupProps<
     /**
      * Label field, default is label
      */
-    labelField?: keyof T;
+    labelField?: string & keyof T;
 
     /**
      * Multiple choose item

package/src/mu/ScrollerListEx.tsx

@@ -127,7 +127,7 @@ export interface ScrollerListExProps<T>
     /**
      * Id field
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Inner item renderer

package/src/mu/SelectBool.tsx

@@ -0,0 +1,31 @@
+import { IdLabelDto } from '@etsoo/appscript';
+import React from 'react';
+import { globalApp } from '..';
+import { SelectEx, SelectExProps } from './SelectEx';
+
+/**
+ * SelectBool props
+ */
+export interface SelectBoolProps
+    extends Omit<SelectExProps<IdLabelDto<string>>, 'options' | 'loadData'> {}
+
+/**
+ * SelectBool (yes/no)
+ * @param props Props
+ * @returns Component
+ */
+export function SelectBool(props: SelectBoolProps) {
+    // Destruct
+    const { search = true, ...rest } = props;
+
+    // Options
+    const options: IdLabelDto<string>[] = [
+        { id: 'false', label: globalApp.get('no')! },
+        { id: 'true', label: globalApp.get('yes')! }
+    ];
+
+    if (search) options.unshift({ id: '', label: '---' });
+
+    // Layout
+    return <SelectEx options={options} search={search} {...rest} />;
+}

package/src/mu/SelectEx.tsx

@@ -23,7 +23,7 @@ export interface SelectExProps<T extends {}>
     /**
      * Id field, default is id
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Item icon renderer
@@ -33,7 +33,7 @@ export interface SelectExProps<T extends {}>
     /**
      * Label field, default is label
      */
-    labelField?: ((option: T) => string) | keyof T;
+    labelField?: ((option: T) => string) | (string & keyof T);
 
     /**
      * Load data callback

package/src/mu/TableEx.tsx

@@ -68,7 +68,7 @@ export interface TableExProps<T extends Record<string, any>>
     /**
      * Id field
      */
-    idField?: keyof T;
+    idField?: string & keyof T;
 
     /**
      * Max height
@@ -107,7 +107,7 @@ export function TableEx<T extends Record<string, unknown>>(
     // Theme
     const theme = useTheme();
 
-    type keyType = keyof T;
+    type keyType = string & keyof T;
 
     // Destruct
     const {

package/src/mu/Tiplist.tsx

@@ -83,6 +83,12 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
         }
     );
 
+    // Input value
+    const inputValue = React.useMemo(
+        () => states.value && Reflect.get(states.value, idField),
+        [states.value]
+    );
+
     React.useEffect(() => {
         if (localValue != null) stateUpdate({ value: localValue });
     }, [localValue]);
@@ -219,7 +225,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
                 type="text"
                 style={{ display: 'none' }}
                 name={name}
-                value={localIdValue ?? ''}
+                value={inputValue ?? ''}
                 readOnly
                 onChange={inputOnChange}
             />

package/src/mu/pages/ViewPage.tsx

@@ -24,7 +24,7 @@ export interface ViewPageField<T extends {}> extends GridProps {
     /**
      * Data field
      */
-    data: keyof T | ((item: T) => React.ReactNode);
+    data: (string & keyof T) | ((item: T) => React.ReactNode);
 
     /**
      * Data type
@@ -222,6 +222,7 @@ export function ViewPage<T extends {}>(props: ViewPageProps<T>) {
                             direction="row"
                             width="100%"
                             flexWrap="wrap"
+                            justifyContent="flex-end"
                             paddingTop={paddings}
                             paddingBottom={paddings}
                             gap={paddings}