Skip to content

Commit

Permalink
working on fixing the switch component in forms
Browse files Browse the repository at this point in the history
  • Loading branch information
AlonGvili committed Jun 17, 2020
1 parent 59eaf99 commit 66b8205
Show file tree
Hide file tree
Showing 101 changed files with 231 additions and 356 deletions.
2 changes: 1 addition & 1 deletion src/Components/api/Hooks/useDashboardEvent.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function useEndpointSubscription(endpointId, callback) {

}

const onEvent = (eventName = "", eventData = {}) => {
const onEvent = (elementId, eventName = "", eventData = {}) => {
UniversalDashboard.publish("element-event", {
type: "clientEvent",
eventId: `${elementId}${eventName}`,
Expand Down
18 changes: 12 additions & 6 deletions src/Components/form/antForm.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable react/jsx-key */
/* eslint-disable react/display-name */
import React from "react"
import { Form, Button } from "antd"
Expand All @@ -10,7 +11,7 @@ import useDashboardEvent from "../api/Hooks/useDashboardEvent"
export default function AntdForm({ id, ...props }) {
const [form] = Form.useForm()
const [{ content, attributes }] = useDashboardEvent(id, props)
const { layout, formName, submitButton, resetButton, ...restOfProps } = attributes
const { layout, formName, submitButton, resetButton, hasResetCallback, ...restOfProps } = attributes

const onFormSubmit = (id, values) => {
UniversalDashboard.publish("element-event", {
Expand Down Expand Up @@ -39,11 +40,16 @@ export default function AntdForm({ id, ...props }) {
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>
})}
{
content.map(
item => {
const { content, rules, ...rest } = item
return <Form.Item { ...rest } key={ rest.id } name={ rest.name } rules={ rules && [rules] }>
{ UniversalDashboard.renderComponent(content[0]) }
</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 } }>
Expand Down
3 changes: 1 addition & 2 deletions src/Components/input/textArea.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,5 @@ import React from "react"
import { Input } from "antd"

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} />
return <Input.TextArea {...props}/>
}
4 changes: 1 addition & 3 deletions src/Components/select/select.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React from 'react'
import { Select, Alert, Input } from 'antd'
import { getMeta } from '../framework/meta'
import useDashboardEvent from '../api/Hooks/useDashboardEvent'
import { Select } from 'antd'
import useSelect from './useSelect'

const { Option } = Select
Expand Down
2 changes: 1 addition & 1 deletion src/Components/steps/steps.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function UDAntdSteps(props) {

useEffect(() => {
setStepContent(content[currentStep].content)
}, [currentStep])
}, [content, currentStep])

const next = () => {
setCurrentStep(currentStep + 1)
Expand Down
28 changes: 2 additions & 26 deletions src/Components/switch/switch.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,9 @@ import React, { useState } from "react";
import { Switch } from "antd";
import useDashboardEvent from "../api/Hooks/useDashboardEvent";

export default function AntdSwitch({ id, ...props }) {
const [{ attributes }] = useDashboardEvent(id, props);
const { checkedChildren, unCheckedChildren, checked } = attributes
const [isChecked, setIsChecked] = useState(checked);

const onChange = event => {
setIsChecked(event)
UniversalDashboard.publish("element-event", {
type: "clientEvent",
eventId: id + "onChange",
eventName: "onChange",
eventData: event
});
};

const customIcons = {
checkedChildren: checkedChildren && UniversalDashboard.renderComponent(checkedChildren),
unCheckedChildren: unCheckedChildren && UniversalDashboard.renderComponent(unCheckedChildren)
}

export default function AntdSwitch(props) {
return (
<Switch
{...attributes}
{...customIcons}
checked={isChecked}
onChange={onChange}
/>
<Switch {...props}/>
);
};

Expand Down
136 changes: 73 additions & 63 deletions src/Dashboard/Pages/Examples/Form_Page.ps1
Original file line number Diff line number Diff line change
@@ -1,108 +1,118 @@
New-UDPage -Title 'Forms' -Name 'Form' -Content {
New-UDAntdNotification -Id "info2" -Title "Universal Dashboard" -Description "Notification Description Content" -Preset "success" -Duration 8
$ReposNames = (Get-Content -Path "$Root\data\data.json" -Raw | ConvertFrom-Json).Name

$WrapperCol = @{ span = 20; pull = 2; push = 2 }
$InitialValues = @{
username = "AlonGvili"
password = "Aa123456"
email = "[email protected]"
textbox = "GviliAlon"
input_username = "AlonGvili"
input_password = "Aa123456"
input_email = "[email protected]"
}
$Submit = New-UDAntdButton -Label Demo -HtmlType submit -ButtonType primary

$Props = @{
Variant = "small"
Id = "demoForm"
Layout = "vertical"
WrapperCol = $WrapperCol
InitialValues = $InitialValues
SubmitButton = $Submit
}
$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-UDAntdForm @Props -Content {

New-UDAntdFormItem -Name 'input_username' -Content {
New-UDAntdInput -PlaceHolder 'Enter your user name' -Prefix ( New-UDAntdIcon -Icon UserOutlined )
) -Rules @(@{
} -Rules @(@{
required = $true
message = "you must enter a user name."
})
New-UDAntdFormItem -Name 'password' -Content (

New-UDAntdFormItem -Name 'input_password' -Content {
New-UDAntdInputPassword -PlaceHolder 'Enter your user password' -Prefix ( New-UDAntdIcon -Icon KeyOutlined )
) -Rules @(@{
} -Rules @(@{
required = $true
message = "you must enter a valide password."
})
New-UDAntdFormItem -Name "group" -Content (
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-UDAntdFormItem -Name "input_group_name" -Content {
New-UDAntdInput -PlaceHolder 'Enter your group name' -Prefix ( New-UDAntdIcon -Icon TeamOutlined )
}

New-UDAntdFormItem -Name 'input_email' -Content {
New-UDAntdInput -PlaceHolder 'Enter your email address' -Prefix ( New-UDAntdIcon -Icon MailOutlined )
) -Rules @(@{
} -Rules @(@{
required = $true
message = "you must enter a email address."
type = 'email'
})
New-UDAntdFormItem -Name 'textbox' -Content (
New-UDAntdInputTextArea
)
New-UDAntdFormItem -Name 'input_group' -Content (

New-UDAntdFormItem -Name @('user', 'text_area_basic') -Content {
New-UDAntdFormItem -NoStyle -Content {
New-UDAntdInputTextArea -Value "alon gvili ud"
}
}

New-UDAntdFormItem -Name @('user', '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."
$ReposNames.Foreach( { New-UDAntdSelectOption -Value $_ })
} -Bordered -Placeholder "Select github repo name."
New-UDAntdInputNumber
}
)

New-UDAntdFormItem -Name 'cnum' -Content (
New-UDAntdInputNumber -DefaultValue 2
)
New-UDAntdFormItem -HasFeedback -Name "gvili_select" -Content (
}
} -WrapperCol $WrapperCol

New-UDAntdFormItem -Name 'input_number' -Content {
New-UDAntdInputNumber
}

New-UDAntdFormItem -HasFeedback -Name "select_single" -Content {
New-UDAntdSelect -DataSource {
(Get-Content -Path "$Root\data\data.json" -Raw | ConvertFrom-Json).Foreach( {
New-UDAntdSelectOption -Value $_.Name
})
$ReposNames.Foreach( { New-UDAntdSelectOption -Value $_ })
} -Bordered -DropdownMatchSelectWidth -Placeholder "Select github repo name."
)
New-UDAntdFormItem -Name 'radioGroup' -Content (
}

New-UDAntdFormItem -Name 'radio_group' -Content {
New-UDAntdRadioGroup -Content {
New-UDAntdRadio -Value "VScode" -Content { "Visual Studio Code" }
New-UDAntdRadio -Value "VScodeInsider" -Content { "Visual Studio Code Insider" }
New-UDAntdRadio -Value "VS" -Content { "Visual Studio" }
}
)
New-UDAntdFormItem -Name 'buttonGroup' -Content (
}

New-UDAntdFormItem -Name 'radio_buttons_group' -Content {
New-UDAntdRadioGroup -Content {
New-UDAntdRadioButton -Value "VScode" -Content { "Visual Studio Code" }
New-UDAntdRadioButton -Value "VScodeInsider" -Content { "Visual Studio Code Insider" }
New-UDAntdRadioButton -Value "VS" -Content { "Visual Studio" }
}
)
New-UDAntdFormItem -Name 'my_rate' -Content (
}

New-UDAntdFormItem -Name 'rate_basic' -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-UDAntdFormItem -Name 'rate_emojy' -Content {
New-UDAntdRate -Character "🎀"
}

New-UDAntdFormItem -Name 'rate_icon' -Content {
New-UDAntdRate -Character (
New-UDAntdIcon -Icon ForkOutlined -Size 2x
)
)
} -Layout vertical -SubmitButton (
New-UDAntdButton -Label Demo -HtmlType submit -ButtonType primary
) -ResetButton (
New-UDAntdButton -Label Clear -ButtonType dashed
) -OnSubmit {
}

New-UDAntdFormItem -Name 'switch_basic' -ValuePropName "checked" -Content {
New-UDAntdSwitch
}

} -OnSubmit {
Set-UDElement -Id "info2" -Properties @{
attributes = @{
description = ConvertFrom-Json $EventData -AsHashtable | ConvertTo-Json
visible = $true
preset = "info"
duration = 4
duration = 8
}
}
}
Expand Down
60 changes: 27 additions & 33 deletions src/Scripts/New-UDAntdForm.ps1
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,10 @@ function New-UDAntdForm {
type = "ud-antd-form"
id = $Id
submitButton = $SubmitButton
resetButton = $ResetButton
resetButton = $ResetButton
wrapperCol = $WrapperCol
labelCol = $LabelCol
initialValues = $InitialValues
# className = $ClassName
variant = $Variant
hideRequiredMark = $HideRequiredMark.IsPresent
labelAlign = $LabelAlign
Expand All @@ -71,7 +70,7 @@ function New-UDAntdForm {

function New-UDAntdFormItem {
[CmdletBinding()]
[OutputType('Ant.Design.FormItem')]
[OutputType('Ant.Design.Form.Item')]
param(
[Parameter()]
[string]$Id = (New-Guid).ToString(),
Expand All @@ -80,7 +79,7 @@ function New-UDAntdFormItem {
[Parameter()]
[hashtable]$Style,
[Parameter()]
[string]$Name,
[string[]]$Name,
[Parameter()]
[string]$Message,
[Parameter()]
Expand All @@ -97,42 +96,37 @@ function New-UDAntdFormItem {
[string]$Label,
[Parameter()]
[switch]$NoStyle,
[Parameter(Mandatory)]
[scriptblock]$Content,
[Parameter()]
[object]$Content,
[string]$ValuePropName,
[Parameter()]
[hashtable[]]$Rules
)
End {
# if ($null -ne $Content) {
# if ($Content -is [scriptblock]) {
# $Content = New-UDEndpoint -Endpoint $Content -Id ($Id + "Content")
# }
# elseif ($Content -isnot [UniversalDashboard.Models.Endpoint]) {
# throw "Content must be a script block or UDEndpoint"
# }
# }

$UDAntdFormItem = @{
assetId = $AssetId
isPlugin = $true
type = "ud-antd-form-item"
id = $Id
# className = $ClassName
style = $Style
name = $Name
label = $Label
wrapperCol = $WrapperCol
labelCol = $LabelCol
noStyle = $NoStyle.IsPresent
required = $Required.IsPresent
hasFeedback = $HasFeedback.IsPresent
initialValue = $InitialValue
rules = if ($Rules.Length -gt 0) { $Rules }else { $null }
content = $Content

assetId = $AssetId
isPlugin = $true
type = "ud-antd-form-item"
id = $Id
style = $Style
name = $Name
label = $Label
wrapperCol = $WrapperCol
labelCol = $LabelCol
noStyle = $NoStyle.IsPresent
required = $Required.IsPresent
hasFeedback = $HasFeedback.IsPresent
initialValue = $InitialValue
rules = if ($Rules.Length -gt 0) { $Rules }else { $null }
content = $Content.Invoke()
}
$UDAntdFormItem.PSTypeNames.Insert(0, 'Ant.Design.FormItem')
$UDAntdFormItem

if ($PSBoundParameters.ContainsKey("ValuePropName")){
$UDAntdFormItem.Add("valuePropName",$ValuePropName)
}

$UDAntdFormItem.PSTypeNames.Insert(0, 'Ant.Design.Form.Item')
$UDAntdFormItem
}
}
Loading

0 comments on commit 66b8205

Please sign in to comment.