fixes and updates

create select component and fix it so it will work inside a form
! textArea is still buggy not working ionside form, and component input group and rate component

src/Components/autocomplete/autocomplete.jsx

@@ -3,7 +3,7 @@ import { Input, Empty, AutoComplete, Alert } from "antd"
 import matchSorter from 'match-sorter'
 import useDashboardEvent from "../api/Hooks/useDashboardEvent"
 import useAutoComplete from "./useAutoComplete"
-import { useDebounce, useEventEmitter } from '@umijs/hooks'
+import { useDebounce } from '@umijs/hooks'
 
 export default function AntdAutoComplete({ id, ...props }) {
   const [dataSource, setDataSource] = React.useState([])
@@ -53,6 +53,7 @@ export default function AntdAutoComplete({ id, ...props }) {
 
   return (
     <AutoComplete
+      id={ id }
       { ...restOfProps }
       suffixIcon={ suffixIcon && UniversalDashboard.renderComponent(suffixIcon) }
       loading={ isFetching }

src/Components/form/antForm.js

@@ -1,9 +1,16 @@
 /* eslint-disable react/display-name */
 import React from "react"
-import { Form, Space, Button } from "antd"
+import { Form, Button } from "antd"
 import useDashboardEvent from "../api/Hooks/useDashboardEvent"
 
-function useForm() {
+
+
+
+
+export default function AntdForm({ id, ...props }) {
+	const [form] = Form.useForm()
+	const [{ content, attributes }] = useDashboardEvent(id, props)
+	const { layout, formName, submitButton, resetButton, ...restOfProps } = attributes
 
 	const onFormSubmit = (id, values) => {
 		UniversalDashboard.publish("element-event", {
@@ -23,58 +30,26 @@ function useForm() {
 			eventData: "",
 		})
 	}
-
-	const api = {
-		onFormSubmit,
-		onFormReset
-	}
-
-	const AntdForm = useFormComponent(api)
-	return {
-		...api,
-		AntdForm
-	}
-}
-
-function useFormComponent(api) {
-	const AntdForm = React.useMemo(
-		() => ({ id, hasResetCallback, ...props }) => {
-			const [form] = Form.useForm()
-			const { onFormSubmit, onFormReset } = AntdForm.api
-			const [{ content, attributes }] = useDashboardEvent(id, props)
-			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) }
-						<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>
-			)
-		},
-		[]
+	return (
+		<Form
+			{ ...restOfProps }
+			id={ id }
+			form={ form }
+			name={ formName || `form-${id}` }
+			layout={ layout }
+			onFinish={ (values) => onFormSubmit(id, values) }
+		>
+			{ content.map( item => {
+				return <Form.Item { ...item } key={ item.id } rules={ item.rules && [item.rules] } >
+					{ UniversalDashboard.renderComponent(item.content) }
+				</Form.Item>
+			})}
+			<Form.Item>
+				{ !submitButton && <Button htmlType="submit" type="primary">Send</Button> || UniversalDashboard.renderComponent(submitButton) }
+				<Button htmlType="button" type="dashed" onClick={ () => onFormReset(form, id, hasResetCallback) } style={ { marginLeft: 8 } }>
+					Reset
+				</Button>
+			</Form.Item>
+		</Form>
 	)
-
-	AntdForm.api = api
-	return AntdForm
 }
-
-export default props => {
-	const { AntdForm } = useForm()
-	return <AntdForm { ...props } />
-}
-

src/Components/form/antFormItem.js

@@ -4,8 +4,8 @@ import { Form } from "antd"
 
 export default ({ id, label, name, rules, content, ...rest }) => {
 	return (
-			<Form.Item key={id} label={label} name={name} rules={rules && [rules]} {...rest}>
+		<Form.Item { ...rest } key={id} label={label} name={name} rules={rules && [rules]} >
 				{UniversalDashboard.renderComponent(content)}
-			</Form.Item>
+		</Form.Item>
 	)
 }

src/Components/index.js

@@ -209,6 +209,18 @@ const AntdGithubCalendar = lazy(
 const AntdInputNumber = lazy(
 	() => import(/* webpackChunkName: 'AntdInputNumber' */ "./input/number")
 )
+const AntdSelect = lazy(
+	() => import(/* webpackChunkName: 'AntdSelect' */ "./select/select")
+)
+const AntdSelectOption = lazy(
+	() => import(/* webpackChunkName: 'AntdSelectOption' */ "./select/option")
+)
+const AntdRate = lazy(
+	() => import(/* webpackChunkName: 'AntdRate' */ "./rate/rate")
+)
+const AntdInputGroup = lazy(
+	() => import(/* webpackChunkName: 'AntdInputGroup' */ "./input/group")
+)
 
 export default function registerComponents() {
 	[
@@ -281,6 +293,10 @@ export default function registerComponents() {
 		{ type: "ud-antd-toggle-primary-color", component: TogglePrimaryColor },
 		{ type: "ud-antd-github-calendar", component: AntdGithubCalendar },
 		{ type: "ud-antd-input-number", component: AntdInputNumber },
+		{ type: "ud-antd-select", component: AntdSelect },
+		{ type: "ud-antd-select-option", component: AntdSelectOption },
+		{ type: "ud-antd-rate", component: AntdRate },
+		{ type: "ud-antd-input-group", component: AntdInputGroup },
 	].forEach(
 		({ type, component }) => UniversalDashboard.register(type, component)
 	)

src/Components/input/group.js

@@ -0,0 +1,10 @@
+import React from "react"
+import { Input } from "antd"
+
+export default function AntdInputGroup({ content, ...props }) {
+    return (
+        <Input.Group { ...props }>
+            { UniversalDashboard.renderComponent(content) }
+        </Input.Group>
+    )
+}

src/Components/input/textArea.js

@@ -1,8 +1,7 @@
 import React from "react"
 import { Input } from "antd"
-import useDashboardEvent from "../api/Hooks/useDashboardEvent"
 
-export default function AntdTextArea ({ id, ...props }) {
-	const [{ attributes }] = useDashboardEvent(id, props)
-	return <Input.TextArea rows={4} autoSize={true} spellCheck={true} />
+export default function AntdTextArea(props) {
+	const [value, setValue] = React.useState("demo text")
+	return <Input.TextArea id={ props.id }  value={ value } onChange={ ({target}) => setValue(target.value) }  autoSize={false} />
 }

src/Components/rate/rate.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Rate } from 'antd'
+import StarFilled from '@ant-design/icons/StarFilled'
+export default function AntdRating(props) {
+    const { character, ...restOfProps } = props
+    return <Rate
+        { ...restOfProps }
+        character={ character && UniversalDashboard.renderComponent(character) || <StarFilled /> }
+    />
+}
+
+AntdRating.displayName = "AntdRating"

src/Components/select/option.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Select } from 'antd'
+
+const { Option } = Select
+
+export default function AntdSelectOption({ value }) {
+    return <Option key={ value } label={ value } value={ value }>{ value }</Option>
+}   

src/Components/select/select.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Select, Alert, Input } from 'antd'
+import { getMeta } from '../framework/meta'
+import useDashboardEvent from '../api/Hooks/useDashboardEvent'
+import useSelect from './useSelect'
+
+const { Option } = Select
+
+export default function AntdSelect(props) {
+    const { content, ...restOfProps } = props
+    return (
+        <Select { ...restOfProps }>
+           {content.map( item => <Option value={ item.value }>{ item.value }</Option>)}
+        </Select>
+    )
+}

src/Components/select/useSelect.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { useQuery } from 'react-query'
+// import { endpoint } from '../api/consts'
+import { getMeta } from '../framework/meta'
+import { Alert, Select } from 'antd'
+
+const dashboardid = getMeta("ud-dashboard")
+const { Option } = Select
+export default function useSelect(url) {
+    const { data, status, error, isFetching } = useQuery(["select", { url }], async () => {
+        const res = await fetch(url, {
+            headers: {
+                dashboardid,
+                UDConnectionId: UniversalDashboard.connectionId,
+            },
+        })
+        const res_1 = await res.json()
+        return res_1
+    },{refetchOnMount: true})
+
+    if (status === "error") return <Alert message={error.message} type="error"/>
+    const options = data && data.map(i => <Option key={ i } value={ i }>{ i }</Option>)
+    return { options, isFetching }
+}

src/Dashboard/Pages/Examples/Form_Page.ps1

@@ -4,9 +4,17 @@ New-UDPage -Title 'Forms' -Name 'Form' -Content {
         username = "AlonGvili"
         password = "Aa123456"
         email    = "[email protected]"
+        textbox  = "GviliAlon"
     }
     $WrapperCol = @{ span = 20; pull = 2; push = 2 }
 
+    $Repos = Get-Content -Path "$Root\data\data.json" -Raw | ConvertFrom-Json
+    [System.Collections.ArrayList]$filters = @()
+    $null = $filters.AddRange($Repos[0].psobject.Properties.name)
+    $null = $filters.Add('owner.id')
+
+    $v = Get-Content -Path "$Root\data\data.json" -Raw | ConvertFrom-Json
+    $NamesAsJson = $v.Name | ConvertTo-Json
     New-UDAntdForm -Id 'demoForm' -Variant small -WrapperCol $WrapperCol -InitialValues $InitialValues -Content {
         New-UDAntdFormItem -Name 'username' -Content (
             New-UDAntdInput -PlaceHolder 'Enter your user name' -Prefix ( New-UDAntdIcon -Icon UserOutlined )
@@ -21,11 +29,9 @@ New-UDPage -Title 'Forms' -Name 'Form' -Content {
                 message  = "you must enter a valide password."
             })
         New-UDAntdFormItem -Name "group" -Content (
-                New-UDAntdInput -PlaceHolder 'Enter your group name' -Prefix ( New-UDAntdIcon -Icon TeamOutlined  ) -AddonAfter (
-                    New-UDAntdPopover -Trigger (
-                        New-UDAntdIcon -Icon InfoCircleOutlined
-                    ) -Content "valide groups names are: dev, ops, qa" -Title "test" 
-                )        
+            New-UDAntdPopover -Trigger (
+                New-UDAntdInput -PlaceHolder 'Enter your group name' -Prefix ( New-UDAntdIcon -Icon TeamOutlined  )        
+            ) -Content "valide groups names are: dev, ops, qa" 
         )
         New-UDAntdFormItem -Name 'email' -Content (
             New-UDAntdInput -PlaceHolder 'Enter your email address' -Prefix ( New-UDAntdIcon -Icon MailOutlined  )
@@ -35,7 +41,28 @@ New-UDPage -Title 'Forms' -Name 'Form' -Content {
                 type     = 'email'
             })
         New-UDAntdFormItem -Name 'textbox' -Content (
-            New-UDAntdInputTextArea -PlaceHolder '??' 
+            New-UDAntdInputTextArea
+        )
+        New-UDAntdFormItem -Name 'input_group' -Content (
+            New-UDAntdInputGroup -Content {
+                New-UDAntdSelect -DataSource {
+                    (Get-Content -Path "$Root\data\data.json" -Raw | ConvertFrom-Json).Foreach( {
+                            New-UDAntdSelectOption -Value $_.Name
+                        })
+                } -Bordered -DropdownMatchSelectWidth -Placeholder "Select github repo name."
+                New-UDAntdInputNumber
+            }
+        )
+
+        New-UDAntdFormItem -Name 'cnum' -Content (
+            New-UDAntdInputNumber -DefaultValue 2 
+        )
+        New-UDAntdFormItem -HasFeedback -Name "gvili_select" -Content (
+            New-UDAntdSelect -DataSource {
+                (Get-Content -Path "$Root\data\data.json" -Raw | ConvertFrom-Json).Foreach( {
+                        New-UDAntdSelectOption -Value $_.Name
+                    })
+            } -Bordered -DropdownMatchSelectWidth -Placeholder "Select github repo name."
         )
         New-UDAntdFormItem -Name 'radioGroup' -Content (
             New-UDAntdRadioGroup -Content {
@@ -51,6 +78,20 @@ New-UDPage -Title 'Forms' -Name 'Form' -Content {
                 New-UDAntdRadioButton -Value "VS" -Content { "Visual Studio" }
             } 
         )
+        New-UDAntdFormItem -Name 'my_rate' -Content (
+            New-UDAntdRate
+        ) -Rules @(@{
+                required = $true
+                message  = "you must select a rate."
+            })
+        New-UDAntdFormItem -Name 'my_rate_custom' -Content (
+            New-UDAntdRate -Character "??"
+        )
+        New-UDAntdFormItem -Name 'my_rate_custom_icon' -Content (
+            New-UDAntdRate -Character (
+                New-UDAntdIcon -Icon ForkOutlined -Size 2x
+            )
+        )
     } -Layout vertical -SubmitButton (
         New-UDAntdButton -Label Demo -HtmlType submit -ButtonType primary
     ) -ResetButton (

src/Dashboard/Pages/Examples/Github_Page.ps1

@@ -69,10 +69,14 @@ New-UDPage -Title 'Profile' -Url "/Users/:user/profile" -Endpoint {
         New-UDAntdColumn -Span 6 -Content {
             New-UserCard -InputObject $UserInfo
         }
-        New-UDAntdColumn -Span 18 -Content {
-            New-UDAntdGithubCalendar -UserName $User -FullYear
-        }
-    }
+        New-UDAntdRow -Content {
+            @(2020, 2019, 2018, 2017, 2016).ForEach( {
+                    New-UDAntdColumn -Span 6  -Content {
+                        New-UDAntdGithubCalendar -UserName $User -FullYear -Years $_
+                    }
+                })
+        } -Gutter @(16, 16)   
+    } -Gutter @(16, 16)
 
     New-UDAntdRow -Content {
         New-UDAntdColumn -Span 24 -Content {

src/Dashboard/Pages/Examples/Search_Page.ps1

@@ -8,4 +8,9 @@ New-UDPage -Title 'AutoComplete' -Name "AutoComplete"  -Endpoint {
     } -OnChange {
 
     }
+
+    $namesAsJson = $Repos.Name | ConvertTo-Json
+    New-UDAntdSelect -Id "demo_select" -DataSource {
+        $namesAsJson
+    } -Bordered -Placeholder "Find github repo."
 } -DefaultHomePage 

src/Scripts/New-UDAntdInputGroup.ps1

@@ -0,0 +1,32 @@
+function New-UDAntdInputGroup {
+    [CmdletBinding()]
+    [OutputType('Ant.Design.Input.Group')]
+    param(
+        [Parameter()]
+        [string]$Id = (New-Guid).ToString(),
+        [Parameter()]
+        [hashtable]$Style,
+        [Parameter(Mandatory)]
+        [scriptblock]$Content,
+        [Parameter()]
+        [switch]$Compact,
+        [Parameter()]
+        [ValidateSet("default", "small", "large")]
+        [string]$size = "default"
+    )
+
+    End {
+        $AntdInputGroup = @{
+            assetId  = $AssetId 
+            isPlugin = $true 
+            type     = "ud-antd-input-group"
+            id       = $Id
+            content  = $Content.Invoke()
+            size     = $Size
+            style    = $Style
+            compact  = $Compact.IsPresent
+        }
+        $AntdInputGroup.PSTypeNames.Insert(0, 'Ant.Design.Input.Group')
+        $AntdInputGroup
+    }
+}