more updates

now selected theme will be store in browser localStorage, add more options for forms, add new component input number , fixes popover, input password, text area, update examples
AlonGvili · Jun 15, 2020 · f2f6895 · f2f6895
1 parent a635d5b
commit f2f6895
Show file tree

Hide file tree

Showing 178 changed files with 1,186 additions and 756 deletions.
diff --git a/src/Components/api/Hooks/useDashboardEvent.js b/src/Components/api/Hooks/useDashboardEvent.js
@@ -19,12 +19,22 @@ export function useEndpointSubscription(endpointId, callback) {
 	}, [endpointId])
 
 }
+
+const onEvent = (eventName = "", eventData = {}) => {
+	UniversalDashboard.publish("element-event", {
+		type: "clientEvent",
+		eventId: `${elementId}${eventName}`,
+		eventName: eventName,
+		eventData: eventData,
+	})
+}
 export default function useDashboardEvent(elementId, initialState) {
 	const { content, ...attributes } = initialState
 
 	const [state, setState] = useState({
 		content: content,
 		attributes: attributes,
+		onEvent
 	})
 
 	const events = (msg, event) => {
@@ -86,6 +96,7 @@ export default function useDashboardEvent(elementId, initialState) {
 	}
 
 	useEndpointSubscription(elementId, events)
+
 	const reload = () => {
 		UniversalDashboard.get(endpoint(elementId), data =>
 			setState(state => {
@@ -97,5 +108,6 @@ export default function useDashboardEvent(elementId, initialState) {
 		)
 	}
 
+
 	return [state, reload, setState]
 }
diff --git a/src/Components/api/dashboard.js b/src/Components/api/dashboard.js
@@ -9,15 +9,24 @@ const PageManager = React.lazy(
 )
 
 export default ({ appbar, sidebar, footer, theme: udTheme }) => {
-	const [theme, setTheme] = React.useState({
-		name: udTheme.name,
-		variables: { 'primary-color': udTheme.color, 'progress-default-color': udTheme.color },
+	const [theme, setTheme] = React.useState(() => {
+		const savedTheme = localStorage.getItem("theme")
+		if(!savedTheme) return { name: udTheme.name, variables: { 
+			'primary-color': udTheme.color, 
+			'progress-default-color': udTheme.color 
+		}}
+		else return JSON.parse(savedTheme)
 	})
 
+	const onThemeChange = value => {
+		localStorage.setItem("theme", JSON.stringify(value))
+		setTheme(value)
+	}
+
 	return (
 		<ThemeProvider
 			theme={ theme }
-			onChange={ (value) => setTheme(value) }
+			onChange={ (value) => onThemeChange(value) }
 		>
 			<Layout style={ { minHeight: "100vh" } }>
 				<store.Provider initialValue={ { isOpen: false } }>

diff --git a/src/Components/form/antForm.js b/src/Components/form/antForm.js
@@ -42,29 +42,27 @@ function useFormComponent(api) {
 			const [form] = Form.useForm()
 			const { onFormSubmit, onFormReset } = AntdForm.api
 			const [{ content, attributes }] = useDashboardEvent(id, props)
-			const { layout, formName, submitButton } = attributes
+			const { layout, formName, submitButton, resetButton, ...restOfProps } = attributes
 
+			const customResetBtn = UniversalDashboard.renderComponent(resetButton)
 			return (
 				<Form
+					{ ...restOfProps }
 					id={ id }
 					form={ form }
 					name={ formName || `form-${id}` }
 					layout={ layout }
 					onFinish={ (values) => onFormSubmit(id, values) }
 				>
 					{ UniversalDashboard.renderComponent(content) }
-					<Space direction="horizontal" size="small">
 						<Form.Item>
 							{ !submitButton && <Button htmlType="submit" type="primary">
 								Send
 							</Button> || UniversalDashboard.renderComponent(submitButton) }
+							{ !resetButton && <Button htmlType="button" type="dashed" onClick={ () => onFormReset(form, id, hasResetCallback) }>
+							Reset
+							</Button> || <Button {...customResetBtn} onClick={ () => onFormReset(form, id, hasResetCallback) }/> }
 						</Form.Item>
-						<Form.Item>
-							<Button htmlType="button" type="dashed" onClick={ () => onFormReset(form, id, hasResetCallback) }>
-								Reset
-							</Button>
-						</Form.Item>
-					</Space>
 				</Form>
 			)
 		},

diff --git a/src/Components/form/antFormItem.js b/src/Components/form/antFormItem.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React from "react"
 import { Form } from "antd"
 

diff --git a/src/Components/icon/icon.js b/src/Components/icon/icon.js
@@ -7,7 +7,6 @@ export default function AntdIcon({ id, name, size, hasCallback, primaryColor, is
     const [{ variables }] = useTheme();
     const onClick = React.useCallback(
         (event, id) => {
-            console.log("Icon event click", event, id)
             UniversalDashboard.publish("element-event", {
                 type: "clientEvent",
                 eventId: id + "onClick",
@@ -31,8 +30,8 @@ export default function AntdIcon({ id, name, size, hasCallback, primaryColor, is
         "10x": 256,
     })
 
-    console.log("variables['primary-color']", variables['primary-color'])
-    let Icon = AntdIcons[name]
+    let Icon = React.useMemo(() => AntdIcons[name], [name])
+
     return (
         <Alert.ErrorBoundary>
             <React.Suspense fallback={<Skeleton.Avatar shape="circle" size="small" active />} >

diff --git a/src/Components/index.js b/src/Components/index.js
@@ -206,6 +206,9 @@ const TogglePrimaryColor = lazy(
 const AntdGithubCalendar = lazy(
 	() => import(/* webpackChunkName: 'AntdGithubCalendar' */ "./calander/gh-calendar")
 )
+const AntdInputNumber = lazy(
+	() => import(/* webpackChunkName: 'AntdInputNumber' */ "./input/number")
+)
 
 export default function registerComponents() {
 	[
@@ -277,6 +280,7 @@ export default function registerComponents() {
 		{ type: "ud-antd-toggle-color-mode", component: ToggleColorMode },
 		{ type: "ud-antd-toggle-primary-color", component: TogglePrimaryColor },
 		{ type: "ud-antd-github-calendar", component: AntdGithubCalendar },
+		{ type: "ud-antd-input-number", component: AntdInputNumber },
 	].forEach(
 		({ type, component }) => UniversalDashboard.register(type, component)
 	)

diff --git a/src/Components/input/input.js b/src/Components/input/input.js
@@ -1,6 +1,5 @@
-import React, { useRef, useState } from "react";
-import { Input } from "antd";
-// import 'antd/es/input/style/index.css'
+import React from "react";
+import { Input } from "antd"
 
 const UDAntdInput = ({ prefix, suffix, addonAfter, addonBefore, ...props }) => {
 
@@ -19,7 +18,6 @@ const UDAntdInput = ({ prefix, suffix, addonAfter, addonBefore, ...props }) => {
       {...props}
       {...addons}
       {...prefix_suffix}
-      className={`custom-input`}
     />
   );
 };

diff --git a/src/Components/input/number.js b/src/Components/input/number.js
@@ -0,0 +1,17 @@
+/* eslint-disable import/no-unresolved */
+import React from 'react'
+import { InputNumber } from 'antd'
+import useDashboardEvent from "../api/Hooks/useDashboardEvent"
+
+
+export default function AntdInputNumber({ id, prefix, suffix, ...props }) {
+    const onFormat = value => `${prefix}${value}${suffix}`
+    return (
+        <InputNumber
+            { ...props }
+            formatter={ value => onFormat(value) }
+        />
+    )
+}
+
+AntdInputNumber.displayName = "AntdInputNumber"
diff --git a/src/Components/input/password.js b/src/Components/input/password.js
@@ -1,10 +1,18 @@
 import React from "react";
 import { Input } from "antd"
-// import "antd/es/input/style/index.css"
 import useDashboardEvent from "../api/Hooks/useDashboardEvent";
 
-export default props => {
-  const [{attributes}] = useDashboardEvent(props.id, props);
-  return <Input.Password {...attributes} />;
-};
+export default function AntdInputPassword({ prefix, suffix, addonAfter, addonBefore, ...props }) {
+  const prefix_suffix = {
+    prefix: prefix && UniversalDashboard.renderComponent(prefix),
+    suffix: suffix && UniversalDashboard.renderComponent(suffix)
+  }
+
+  const addons = {
+    addonBefore: addonBefore && UniversalDashboard.renderComponent(addonBefore),
+    addonAfter: addonAfter && UniversalDashboard.renderComponent(addonAfter)
+  }
+
+  return <Input.Password { ...props } { ...addons } { ...prefix_suffix }/>;
+}
 
diff --git a/src/Components/input/textArea.js b/src/Components/input/textArea.js
@@ -2,7 +2,7 @@ import React from "react"
 import { Input } from "antd"
 import useDashboardEvent from "../api/Hooks/useDashboardEvent"
 
-export default props => {
-	const [{ attributes }] = useDashboardEvent(props.id, props)
+export default function AntdTextArea ({ id, ...props }) {
+	const [{ attributes }] = useDashboardEvent(id, props)
 	return <Input.TextArea rows={4} autoSize={true} spellCheck={true} />
 }
diff --git a/src/Components/popover/popover.js b/src/Components/popover/popover.js
@@ -2,22 +2,15 @@ import React from "react"
 import { Popover } from "antd"
 import useDashboardEvent from "../api/Hooks/useDashboardEvent"
 
-const AntdPopover = props => {
-  const [{ content, attributes }] = useDashboardEvent(props.id, props)
-  const title = (
-    <span>
-      { attributes.title && UniversalDashboard.renderComponent(attributes.title) }
-    </span>
-  )
+const { renderComponent } = UniversalDashboard
+export default function AntdPopover({ id, ...props }) {
+  const [{ content, attributes }] = useDashboardEvent(id, props)
+  const { trigger, title, ...restOfProps } = attributes
 
-  return <Popover
-    { ...attributes }
-    title={ title }
-    content={ UniversalDashboard.renderComponent(content) }
-    autoAdjustOverflow={ true }
-  >
-    { content && UniversalDashboard.renderComponent(children) }
-  </Popover>
+  return (
+    <Popover { ...restOfProps } title={ title } content={ renderComponent(content) } autoAdjustOverflow={ true } trigger="hover">
+      { renderComponent(trigger) }
+    </Popover>
+  )
 }
 
-export default AntdPopover
diff --git a/src/Components/timeline/addToTimeline.js b/src/Components/timeline/addToTimeline.js
@@ -3,22 +3,38 @@ import { useMutation, queryCache } from 'react-query'
 import { message } from 'antd'
 
 export default function useAddToTimeline() {
-    const addItemToTimeline = ({ timelineId, item }) => {
+    const addItemToTimeline = ({ timelineId, items }) => {
         queryCache.setQueryData(["timeline", { id: timelineId }], prevData => {
             if (prevData !== undefined) {
-                if (prevData.some(data => data.id === item.id)) {
-                    message.error({
-                        content: `Item with id ${item.id} already exsist`,
-                        duration: 4
+                // multi items check
+                if (Array.isArray(items)) {
+                    let filteredItems = []
+                    items.forEach((item, index) => {
+                        if (prevData.some(data => data.id === item.id)) {
+                            message.error({
+                                content: `Item with id ${item.id} already exsist`,
+                                duration: 4
+                            })
+                        } else{
+                            filteredItems.push(item)
+                        }
                     })
-                    return [...prevData]
+                    return [...prevData, ...filteredItems]
                 } else {
-                    return [...prevData, item]
+                    // single item check
+                    if (prevData.some(data => data.id === items.id)) {
+                        message.error({
+                            content: `Item with id ${items.id} already exsist`,
+                            duration: 4
+                        })
+                        return [...prevData]
+                    }
                 }
             } else {
-                return [item]
+                return [...items]
             }
         })
     }
     return useMutation(addItemToTimeline)
-}
+}
+
diff --git a/src/Components/timeline/removeFromTimeline.js b/src/Components/timeline/removeFromTimeline.js
@@ -8,7 +8,6 @@ export default function useRemoveFromTimeline() {
             if (prevData !== undefined) {
                 if (prevData.some(data => data.id === itemId)) {
                     const filterData = prevData.filter(item => item.id !== itemId)
-                    console.log("filterData", filterData)
                     return filterData
                 } else {
                     message.error({

diff --git a/src/Components/timeline/timeline.jsx b/src/Components/timeline/timeline.jsx
@@ -1,54 +1,17 @@
 import React from "react"
-import { Timeline, Alert } from "antd"
-import { queryCache } from 'react-query'
-import { useEndpointSubscription } from "../api/Hooks/useDashboardEvent"
-import useTimeline from "./useTimeline"
-import useAddToTimeline from "./addToTimeline"
-import useRemoveFromTimeline from "./removeFromTimeline"
-import useClearTimeline from "./clearTimeline"
+import { Timeline, Alert, Spin } from "antd"
+import useTimeline from './useTimeline'
 
 
 export default function AntdTimeline({ id, ...props }) {
-	const { autoRefresh, refreshInterval, ...restOfProps } = props
-	const [add, { status: addStatus, reset, data: addData }] = useAddToTimeline()
-	const [remove] = useRemoveFromTimeline()
-	const [clear] = useClearTimeline()
-
-	const { data, status, error, isFetching, isStale, refetch } = useTimeline(id, autoRefresh, refreshInterval)
-
-	useEndpointSubscription(id, (_, event) => {
-		if (event.type === "addTimelineItem") {
-			add({ timelineId: event?.data?.timelineId, item: event?.data?.item })
-		}
-		if (event.type === "removeTimelineItem") {
-			remove({ timelineId: event?.data?.timelineId, itemId: event?.data?.itemId })
-		}
-		if (event.type === "clearTimeline") {
-			clear({ timelineId: event?.data?.timelineId })
-		}
-	})
-
-	if (status === "error") return <Alert message={ error.message } type="error" />
-
-	console.log("addStatus", addStatus)
-	console.log("status", status)
-	console.log("addData", addData)
-	console.log("data", data)
+	const {content, attributes} = useTimeline({id:id, ...props})
 	return (
-		<Timeline
-			pending={ addStatus === "loading" && "Getting data..." }
-			{ ...restOfProps }
-		>
-			{ data !== undefined && data.map(
-				item => <Timeline.Item
-					{ ...item }
-					key={ item?.id }
-					dot={ UniversalDashboard.renderComponent(item?.dot) }
-					label={ UniversalDashboard.renderComponent(item?.label) }
-					onClick={ () => reset() }
-				>
-					{ UniversalDashboard.renderComponent(item.content) }
-				</Timeline.Item>) }
-		</Timeline>
+		<Alert.ErrorBoundary>
+			<React.Suspense fallback={ <Spin spinning size="default" /> } >
+				<Timeline { ...attributes } >
+					{ content }
+				</Timeline>
+			</React.Suspense>
+		</Alert.ErrorBoundary>
 	)
 }