ish-ui 1.0.18 → 1.0.20

package/dist/colorPicker/ColorPicker.d.ts

@@ -1,11 +1,4 @@
 import React from 'react';
-import { PopperPlacementType, Theme } from '@mui/material';
-import { FieldInputProps } from '../model';
-interface ColorPickerWrapperProps {
-    input?: FieldInputProps;
-    classes?: any;
-    theme?: Theme;
-    placement?: PopperPlacementType;
-}
-declare const _default: React.JSXElementConstructor<Omit<ColorPickerWrapperProps, "theme" | "classes"> & import("@mui/styles").StyledComponentProps<never>>;
-export default _default;
+import { ColorPickerWrapperProps } from '../model';
+declare const ColorPickerWrapper: React.NamedExoticComponent<ColorPickerWrapperProps>;
+export default ColorPickerWrapper;

package/dist/colorPicker/ColorPicker.js

@@ -9,13 +9,14 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import ButtonBase from '@mui/material/ButtonBase';
 import Popper from '@mui/material/Popper';
 import { AlphaPicker, HuePicker } from 'react-color';
-import { createStyles, withStyles } from '@mui/styles';
 import { ClickAwayListener } from '@mui/base';
 import Paper from '@mui/material/Paper';
 import Grow from '@mui/material/Grow';
 import clsx from 'clsx';
 import { stopEventPropagation } from '../utils/events';
-const styles = createStyles(({ spacing, transitions, palette, zIndex }) => ({
+import { makeAppStyles } from '../styles';
+import { useAppTheme } from '../themes';
+const useStyles = makeAppStyles(({ spacing, palette, zIndex, transitions }) => ({
     paper: {
         width: 200,
         padding: spacing(2),
@@ -81,7 +82,8 @@ const styles = createStyles(({ spacing, transitions, palette, zIndex }) => ({
     },
     opened: {}
 }));
-const ColorPickerBase = React.memo(({ classes, color, input: { value, onChange }, TransitionProps, setAnchorEl, placement }) => {
+const ColorPickerBase = React.memo(({ color, input: { value, onChange }, TransitionProps, setAnchorEl, placement }) => {
+    const classes = useStyles();
     const [hueColor, setHueColor] = useState(color);
     const [alfaColor, setAlfaColor] = useState(color);
     const hueRef = useRef();
@@ -119,14 +121,16 @@ const ColorPickerBase = React.memo(({ classes, color, input: { value, onChange }
                     React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange: onHueChange, onChangeComplete: onChangeComplete, width: "168", className: classes.bottomOffset }),
                     React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onAlfaChange, onChangeComplete: onChangeComplete }))))));
 });
-const ColorPickerWrapper = React.memo(({ classes, theme, input, placement = 'top' }) => {
+const ColorPickerWrapper = React.memo(({ input, placement = 'top', width }) => {
+    const classes = useStyles();
+    const theme = useAppTheme();
     const [anchorEl, setAnchorEl] = useState(null);
     const handleClick = useCallback((event) => {
         setAnchorEl(anchorEl ? null : event.currentTarget);
     }, [anchorEl]);
     const color = useMemo(() => (input.value ? '#' + input.value : theme.palette.primary.main), [theme, input.value]);
     return (React.createElement("div", { className: "d-flex", onClick: stopEventPropagation },
-        React.createElement(ButtonBase, { onClick: handleClick, className: clsx(classes.colorPickerButton, anchorEl && classes.opened), style: { backgroundColor: color } }),
-        React.createElement(Popper, { open: Boolean(anchorEl), anchorEl: anchorEl, placement: placement, className: classes.popper, transition: true }, ({ TransitionProps }) => (React.createElement(ColorPickerBase, { classes: classes, color: color, input: input, TransitionProps: TransitionProps, setAnchorEl: setAnchorEl, placement: placement })))));
+        React.createElement(ButtonBase, { onClick: handleClick, className: clsx(classes.colorPickerButton, anchorEl && classes.opened), style: { backgroundColor: color, width, height: width } }),
+        React.createElement(Popper, { open: Boolean(anchorEl), anchorEl: anchorEl, placement: placement, className: classes.popper, transition: true }, ({ TransitionProps }) => (React.createElement(ColorPickerBase, { color: color, input: input, TransitionProps: TransitionProps, setAnchorEl: setAnchorEl, placement: placement })))));
 });
-export default withStyles(styles, { withTheme: true })(ColorPickerWrapper);
+export default ColorPickerWrapper;

package/dist/fieldMessage/ErrorMessage.d.ts

@@ -4,5 +4,5 @@ interface Props {
     className?: string;
     message: string;
 }
-declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"root" | "icon">>;
+declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"icon" | "root">>;
 export default _default;

package/dist/fieldMessage/WarningMessage.d.ts

@@ -4,5 +4,5 @@ interface Props {
     className?: string;
     warning: string;
 }
-declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"root" | "icon">>;
+declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"icon" | "root">>;
 export default _default;

package/dist/fieldMessage/styles.d.ts

@@ -1,3 +1,3 @@
 import { AppTheme } from '../model';
-declare const _default: (theme: AppTheme) => import("@mui/styles").StyleRules<{}, "root" | "icon">;
+declare const _default: (theme: AppTheme) => import("@mui/styles").StyleRules<{}, "icon" | "root">;
 export default _default;

package/dist/formFields/FilePreview.d.ts

@@ -13,5 +13,5 @@ interface Props {
     disabled?: boolean;
     avatarSize?: number;
 }
-declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles").StyledComponentProps<"root" | "active" | "rounded" | "backdrop" | "actionButton" | "noValue" | "avatarRoot">>;
+declare const _default: React.JSXElementConstructor<Omit<Props, "classes"> & import("@mui/styles").StyledComponentProps<"active" | "root" | "rounded" | "backdrop" | "actionButton" | "noValue" | "avatarRoot">>;
 export default _default;

package/dist/formFields/SelectCustomComponents.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const selectStyles: (theme: any) => import("@mui/styles").StyleRules<{}, "root" | "label" | "expandIcon" | "error" | "inline" | "multiple" | "menuItem" | "inputWrapper" | "readonly" | "inputEndAdornment" | "editIcon" | "bottomMargin" | "bottomPadding" | "topMargin" | "editable" | "valid" | "autoWidthSelect" | "emptySelect" | "validUnderline" | "menuItemActive" | "menuList" | "hasPopup" | "hasClear">;
+export declare const selectStyles: (theme: any) => import("@mui/styles").StyleRules<{}, "label" | "inline" | "multiple" | "error" | "root" | "expandIcon" | "menuItem" | "inputWrapper" | "readonly" | "inputEndAdornment" | "editIcon" | "bottomMargin" | "bottomPadding" | "topMargin" | "editable" | "valid" | "autoWidthSelect" | "emptySelect" | "validUnderline" | "menuItemActive" | "menuList" | "hasPopup" | "hasClear">;
 export declare const ListRow: React.MemoExoticComponent<any>;
 export declare const ListboxComponent: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
 export declare const NoWrapOption: (content: any, data: any, search: any, parentProps: any) => React.JSX.Element;

package/dist/formFields/Switch.d.ts

@@ -3,5 +3,5 @@
  * */
 import React from 'react';
 import { FieldInputProps, FormSwitchProps } from '../model';
-export declare const Switch: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles").StyledComponentProps<"default" | "root" | "icon" | "disabled" | "inline" | "checked" | "focusVisible" | "bar">>;
+export declare const Switch: React.JSXElementConstructor<Omit<any, "classes"> & import("@mui/styles").StyledComponentProps<"default" | "icon" | "bar" | "inline" | "disabled" | "checked" | "root" | "focusVisible">>;
 export declare function FormSwitch<InputProps extends FieldInputProps>({ input, color, disabled, stringValue, label, className, inline, onChangeHandler, onClick }: FormSwitchProps<InputProps>): React.JSX.Element;

package/dist/model/Fields.d.ts

@@ -3,6 +3,7 @@ import { Dispatch } from 'redux';
 import { InputProps } from '@mui/material/Input/Input';
 import { AnyArgFunction } from '../model/CommonFunctions';
 import { ShowConfirmCaller } from '../model/Confirm';
+import { PopperPlacementType } from '@mui/material';
 export type EventHandler<Event> = (event: Event, name?: string) => void;
 export interface EventOrValueHandler<Event> extends EventHandler<Event> {
     (value: any): void;
@@ -229,6 +230,11 @@ export interface FormFieldBaseProps {
     onClick?: AnyArgFunction;
     debounced?: boolean;
 }
+export interface ColorPickerWrapperProps {
+    input?: Partial<FieldInputProps>;
+    placement?: PopperPlacementType;
+    width?: number;
+}
 export type FormFieldProps = ({
     type: 'phone' | 'duration' | 'text' | 'multilineText' | 'password' | 'number' | 'file' | 'money';
 } & FormFieldBaseProps & EditInPlaceFieldProps<FieldInputProps, FieldMetaProps>) | ({
@@ -246,5 +252,7 @@ export type FormFieldProps = ({
 } & FormFieldBaseProps & CheckboxFieldProps<FieldInputProps>) | ({
     type: 'tags';
 } & FormFieldBaseProps & TagsFieldProps<TagLike, FieldInputProps, FieldMetaProps>) | ({
+    type: 'color';
+} & ColorPickerWrapperProps) | ({
     type: 'stub';
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ish-ui",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {

package/dist/Demo.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const muiCache: import("@emotion/utils").EmotionCache;
-declare function Demo(): React.JSX.Element;
-export default Demo;

package/dist/Demo.js

@@ -1,41 +0,0 @@
-/*
- * Copyright ish group pty ltd. All rights reserved. https://www.ish.com.au
- * No copying or use of this code is allowed without permission in writing from ish.
- */
-import React, { useRef, useState } from 'react';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-import { ThemeProvider } from '@mui/material/styles';
-import { Box, Grid } from '@mui/material';
-import CssBaseline from '@mui/material/CssBaseline';
-import { defaultTheme } from './themes';
-import { GlobalStylesProvider } from './styles';
-import { DemoField } from './DemoField';
-import { WysiwygEditor } from './markdownEditor';
-export const muiCache = createCache({
-    key: 'mui',
-    prepend: true,
-});
-function Demo() {
-    const wysiwygRef = useRef();
-    const [draftContent, setDraftContent] = useState('');
-    return (React.createElement(CacheProvider, { value: muiCache },
-        React.createElement(ThemeProvider, { theme: defaultTheme },
-            React.createElement(CssBaseline, null),
-            React.createElement(GlobalStylesProvider, null,
-                React.createElement(Box, { sx: {
-                        width: '100vw',
-                        height: '100vh',
-                        padding: 4
-                    } },
-                    React.createElement(Grid, { container: true, columnSpacing: 3, rowSpacing: 2 },
-                        React.createElement(Grid, { item: true, xs: 6 },
-                            React.createElement(DemoField, { label: "Test phone", type: "phone" })),
-                        React.createElement(Grid, { item: true, xs: 6 },
-                            React.createElement(DemoField, { label: "Test text", type: "text" })),
-                        React.createElement(Grid, { item: true, xs: 12 },
-                            React.createElement(WysiwygEditor, { value: draftContent, onChange: setDraftContent, wysiwygRef: wysiwygRef })),
-                        React.createElement(Grid, { item: true, xs: 6 }),
-                        React.createElement(Grid, { item: true, xs: 6 })))))));
-}
-export default Demo;

package/dist/DemoField.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { FormFieldProps } from './model';
-export declare function DemoField(props: FormFieldProps): React.JSX.Element;

package/dist/DemoField.js

@@ -1,87 +0,0 @@
-/*
- * Copyright ish group pty ltd 2023.
- *
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
- *
- *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useMemo, useState } from 'react';
-import { stubFunction } from './utils';
-import { CheckboxField, CodeEditorField, ColoredCheckBox, EditInPlaceDateTimeField, EditInPlaceDurationField, EditInPlaceField, EditInPlaceFileField, EditInPlaceMoneyField, EditInPlacePhoneField, EditInPlaceSearchSelect, FormSwitch } from './formFields';
-import { TagInputList } from './tagsInput';
-const stubFieldMocks = { input: { onChange: stubFunction, onBlur: stubFunction }, format: null, debounced: null };
-export function DemoField(props) {
-    const { type } = props, rest = __rest(props, ["type"]);
-    const { input, format, debounced = true } = type !== 'stub'
-        ? props
-        : stubFieldMocks;
-    // const currencySymbol = useAppSelector(state => state.currency?.shortCurrencySymbol);
-    // const processActionId = useAppSelector(state => state.fieldProcessing[input?.name]);
-    //
-    // const entity = type === "remoteDataSelect" ? props.entity : null;
-    //
-    // const color = type === "coloredCheckbox" ? props.color : null;
-    //
-    // const rootEntity = type === "aql" ? props.rootEntity : null;
-    //
-    // const tags = type === "tags" ? props.tags : null;
-    const [value, setValue] = useState(undefined);
-    const inputProxy = useMemo(() => (Object.assign(Object.assign({}, input || {}), { value, onChange: e => {
-            const val = (e === null || e === void 0 ? void 0 : e.target) ? e.target.value : e;
-            setValue(format ? format(val) : val);
-        }, onBlur: e => {
-            const val = (e === null || e === void 0 ? void 0 : e.target) ? e.target.value : e;
-            setValue(format ? format(val) : val);
-        } })), [value, input]);
-    const sharedProps = Object.assign(Object.assign(Object.assign({}, rest), debounced ? { input: inputProxy } : {}), { meta: {} });
-    switch (type) {
-        case 'phone':
-            return React.createElement(EditInPlacePhoneField, Object.assign({}, sharedProps));
-        case 'duration':
-            return React.createElement(EditInPlaceDurationField, Object.assign({}, sharedProps));
-        case 'file':
-            return React.createElement(EditInPlaceFileField, Object.assign({}, sharedProps));
-        case 'money':
-            return React.createElement(EditInPlaceMoneyField, Object.assign({}, sharedProps, { currencySymbol: "$" }));
-        case 'select':
-            return React.createElement(EditInPlaceSearchSelect, Object.assign({}, sharedProps));
-        case 'number':
-            return React.createElement(EditInPlaceField, Object.assign({}, sharedProps, { type: "number" }));
-        case 'date':
-            return React.createElement(EditInPlaceDateTimeField, Object.assign({}, sharedProps, { type: "date" }));
-        case 'time':
-            return React.createElement(EditInPlaceDateTimeField, Object.assign({}, sharedProps, { type: "time" }));
-        case 'dateTime':
-            return React.createElement(EditInPlaceDateTimeField, Object.assign({}, sharedProps, { type: "datetime" }));
-        case 'code':
-            return React.createElement(CodeEditorField, Object.assign({}, sharedProps));
-        case 'coloredCheckbox':
-            return React.createElement(ColoredCheckBox, Object.assign({}, sharedProps, { color: "red" }));
-        case 'password':
-            return React.createElement(EditInPlaceField, Object.assign({}, sharedProps, { type: "password" }));
-        case 'switch':
-            return React.createElement(FormSwitch, Object.assign({}, sharedProps));
-        case 'checkbox':
-            return React.createElement(CheckboxField, Object.assign({}, sharedProps));
-        case 'multilineText':
-            return React.createElement(EditInPlaceField, Object.assign({}, sharedProps, { multiline: true }));
-        case 'stub':
-            return React.createElement("div", { className: "invisible" });
-        case 'tags':
-            return React.createElement(TagInputList, Object.assign({}, sharedProps, { tags: [] }));
-        case 'text':
-        default:
-            return React.createElement(EditInPlaceField, Object.assign({}, sharedProps));
-    }
-}

package/dist/dev.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/dev.js

@@ -1,9 +0,0 @@
-/*
- * Copyright ish group pty ltd. All rights reserved. https://www.ish.com.au
- * No copying or use of this code is allowed without permission in writing from ish.
- */
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import Demo from './Demo';
-const root = createRoot(document.getElementById('dev-demo'));
-root.render(React.createElement(Demo, null));