@etsoo/materialui 1.1.39 → 1.1.42

package/src/SwitchAnt.tsx

@@ -1,25 +1,26 @@
-import { Stack, Typography } from '@mui/material';
-import Switch, { SwitchProps } from '@mui/material/Switch';
-import React from 'react';
+import { Stack, Typography } from "@mui/material";
+import Switch, { SwitchProps } from "@mui/material/Switch";
+import React from "react";
+import { globalApp } from "./app/ReactApp";
 
 /**
  * Ant style switch props
  */
 export interface SwitchAntProps extends SwitchProps {
-    /**
-     * Active color
-     */
-    activeColor?: string;
+  /**
+   * Active color
+   */
+  activeColor?: string;
 
-    /**
-     * Start label
-     */
-    startLabel: string;
+  /**
+   * Start label
+   */
+  startLabel?: string;
 
-    /**
-     * End label
-     */
-    endLabel: string;
+  /**
+   * End label
+   */
+  endLabel?: string;
 }
 
 /**
@@ -28,72 +29,75 @@ export interface SwitchAntProps extends SwitchProps {
  * @returns Component
  */
 export function SwitchAnt(props: SwitchAntProps) {
-    // Destruct
-    const {
-        activeColor,
-        checked,
-        defaultChecked,
-        defaultValue,
-        endLabel,
-        startLabel,
-        onChange,
-        value = 'true',
-        ...rest
-    } = props;
+  // Labels
+  const { yes = "Yes", no = "No" } = globalApp?.getLabels("yes", "no") ?? {};
 
-    // Checked state
-    const [controlChecked, setControlChecked] = React.useState(
-        checked ?? defaultChecked ?? defaultValue == value
-    );
+  // Destruct
+  const {
+    activeColor,
+    checked,
+    defaultChecked,
+    defaultValue,
+    endLabel = yes,
+    startLabel = no,
+    onChange,
+    value = "true",
+    ...rest
+  } = props;
 
-    // Ref
-    const ref = React.useRef<HTMLButtonElement>(null);
+  // Checked state
+  const [controlChecked, setControlChecked] = React.useState(
+    checked ?? defaultChecked ?? defaultValue == value
+  );
 
-    React.useEffect(() => {
-        if (checked) setControlChecked(checked);
-    }, [checked]);
+  // Ref
+  const ref = React.useRef<HTMLButtonElement>(null);
 
-    // On change
-    const onChangeLocal = (
-        event: React.ChangeEvent<HTMLInputElement>,
-        checked: boolean
-    ) => {
-        if (onChange) onChange(event, checked);
-        setControlChecked(checked);
-    };
+  React.useEffect(() => {
+    if (checked) setControlChecked(checked);
+  }, [checked]);
 
-    // Layout
-    return (
-        <Stack direction="row" spacing={1} alignItems="center">
-            <Typography
-                onClick={() => controlChecked && ref.current?.click()}
-                sx={{
-                    cursor: 'pointer',
-                    color: controlChecked
-                        ? undefined
-                        : (theme) => activeColor ?? theme.palette.warning.main
-                }}
-            >
-                {startLabel}
-            </Typography>
-            <Switch
-                checked={controlChecked}
-                inputRef={ref}
-                value={value}
-                onChange={onChangeLocal}
-                {...rest}
-            />
-            <Typography
-                onClick={() => !controlChecked && ref.current?.click()}
-                sx={{
-                    cursor: 'pointer',
-                    color: controlChecked
-                        ? (theme) => activeColor ?? theme.palette.warning.main
-                        : undefined
-                }}
-            >
-                {endLabel}
-            </Typography>
-        </Stack>
-    );
+  // On change
+  const onChangeLocal = (
+    event: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean
+  ) => {
+    if (onChange) onChange(event, checked);
+    setControlChecked(checked);
+  };
+
+  // Layout
+  return (
+    <Stack direction="row" spacing={1} alignItems="center">
+      <Typography
+        onClick={() => controlChecked && ref.current?.click()}
+        sx={{
+          cursor: "pointer",
+          color: controlChecked
+            ? undefined
+            : (theme) => activeColor ?? theme.palette.warning.main
+        }}
+      >
+        {startLabel}
+      </Typography>
+      <Switch
+        checked={controlChecked}
+        inputRef={ref}
+        value={value}
+        onChange={onChangeLocal}
+        {...rest}
+      />
+      <Typography
+        onClick={() => !controlChecked && ref.current?.click()}
+        sx={{
+          cursor: "pointer",
+          color: controlChecked
+            ? (theme) => activeColor ?? theme.palette.warning.main
+            : undefined
+        }}
+      >
+        {endLabel}
+      </Typography>
+    </Stack>
+  );
 }

package/src/SwitchField.tsx

@@ -0,0 +1,133 @@
+import {
+  Box,
+  FormControl,
+  FormControlProps,
+  FormHelperText,
+  InputLabel
+} from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput";
+import React from "react";
+import { SwitchAnt } from "./SwitchAnt";
+
+/**
+ * SwitchField props
+ */
+export type SwitchFieldProps = Omit<
+  FormControlProps<"fieldset">,
+  "defaultValue"
+> & {
+  /**
+   * Helper text
+   */
+  helperText?: React.ReactNode;
+
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * Checked
+   */
+  checked?: boolean;
+
+  /**
+   * Active color
+   */
+  activeColor?: string;
+
+  /**
+   * Start label
+   */
+  startLabel?: string;
+
+  /**
+   * End label
+   */
+  endLabel?: string;
+
+  /**
+   * Height in px
+   */
+  height?: number;
+
+  /**
+   * Value, default is true
+   */
+  value?: unknown;
+};
+
+/**
+ * SwitchField
+ * @param props Props
+ * @returns Component
+ */
+export function SwitchField(props: SwitchFieldProps) {
+  // Destruct
+  const {
+    activeColor,
+    startLabel,
+    endLabel,
+    value = true,
+
+    fullWidth,
+    height = 56,
+    helperText,
+    label,
+    name,
+    required,
+    sx = {},
+    checked,
+    variant = "outlined",
+    ...rest
+  } = props;
+
+  // Outlined
+  const outlined = variant === "outlined";
+
+  if (sx) {
+    Object.assign(sx, { height: outlined ? `${height}px` : undefined });
+  }
+
+  // Layout
+  return (
+    <React.Fragment>
+      <FormControl component="fieldset" fullWidth={fullWidth} sx={sx} {...rest}>
+        {label && (
+          <InputLabel required={required} variant={variant} shrink>
+            {label}
+          </InputLabel>
+        )}
+        {outlined && (
+          <NotchedOutline
+            label={label && required ? label + " *" : label}
+            notched
+            sx={{
+              cursor: "default",
+              position: "absolute",
+              width: fullWidth ? "100%" : "auto",
+              "& input": {
+                visibility: "hidden"
+              }
+            }}
+          />
+        )}
+        <Box
+          paddingLeft={2}
+          paddingY="7px"
+          position={outlined ? "absolute" : undefined}
+        >
+          <SwitchAnt
+            activeColor={activeColor}
+            name={name}
+            startLabel={startLabel ?? "NO"}
+            endLabel={endLabel ?? "YES"}
+            value={value}
+            checked={checked}
+          />
+        </Box>
+      </FormControl>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </React.Fragment>
+  );
+}

package/src/Tiplist.tsx

@@ -47,7 +47,8 @@ export function Tiplist<
   D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: TiplistProps<T, D>) {
   // Labels
-  const labels = globalApp?.getLabels("noOptions", "loading", "more");
+  const { noOptions, loading, more } =
+    globalApp?.getLabels("noOptions", "loading", "more") ?? {};
 
   // Destruct
   const {
@@ -71,8 +72,8 @@ export function Tiplist<
     onChange,
     openOnFocus = true,
     sx = { minWidth: "180px" },
-    noOptionsText = labels?.noOptions,
-    loadingText = labels?.loading,
+    noOptionsText = noOptions,
+    loadingText = loading,
     getOptionLabel,
     getOptionDisabled,
     ...rest
@@ -318,7 +319,7 @@ export function Tiplist<
         }}
         getOptionLabel={(item) => {
           if (typeof item !== "object") return `${item}`;
-          if (item[idField] === "n/a") return (labels.more ?? "More") + "...";
+          if (item[idField] === "n/a") return (more ?? "More") + "...";
           return getOptionLabel
             ? getOptionLabel(item)
             : "label" in item

package/src/UserAvatar.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
-import { Avatar } from '@mui/material';
-import { BusinessUtils } from '@etsoo/appscript';
-import { globalApp } from './app/ReactApp';
+import React from "react";
+import { Avatar } from "@mui/material";
+import { BusinessUtils } from "@etsoo/appscript";
+import { globalApp } from "./app/ReactApp";
 
 /**
  * User avatar props
  */
 export interface UserAvatarProps {
-    /**
-     * Photo src
-     */
-    src?: string;
+  /**
+   * Photo src
+   */
+  src?: string;
 
-    /**
-     * Format title
-     */
-    formatTitle?: (title?: string) => string;
+  /**
+   * Format title
+   */
+  formatTitle?: (title?: string) => string;
 
-    /**
-     * Title of the user
-     */
-    title?: string;
+  /**
+   * Title of the user
+   */
+  title?: string;
 }
 
 /**
@@ -29,36 +29,34 @@ export interface UserAvatarProps {
  * @returns Component
  */
 export function UserAvatar(props: UserAvatarProps) {
-    // Destruct
-    const {
-        src,
+  // Destruct
+  const {
+    src,
+    title,
+    formatTitle = (title?: string) => {
+      return BusinessUtils.formatAvatarTitle(
         title,
-        formatTitle = (title?: string) => {
-            return BusinessUtils.formatAvatarTitle(
-                title,
-                3,
-                typeof globalApp === 'undefined'
-                    ? 'ME'
-                    : globalApp.get<string>('me')
-            );
-        }
-    } = props;
+        3,
+        globalApp?.get<string>("me") ?? "ME"
+      );
+    }
+  } = props;
 
-    // Format
-    const fTitle = formatTitle(title);
-    const count = fTitle.length;
+  // Format
+  const fTitle = formatTitle(title);
+  const count = fTitle.length;
 
-    return (
-        <Avatar
-            title={title}
-            src={src}
-            sx={{
-                width: 48,
-                height: 32,
-                fontSize: count <= 2 ? '15px' : '12px'
-            }}
-        >
-            {fTitle}
-        </Avatar>
-    );
+  return (
+    <Avatar
+      title={title}
+      src={src}
+      sx={{
+        width: 48,
+        height: 32,
+        fontSize: count <= 2 ? "15px" : "12px"
+      }}
+    >
+      {fTitle}
+    </Avatar>
+  );
 }