mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2024-11-27 08:39:59 +08:00
fix: use initialValue to replace async setValue
This commit is contained in:
Shengjie Yang
Bowen Tan
parent
50b07210ed
commit
034073d770
@ -29,21 +29,33 @@
|
||||
type: 'plain/v1/button',
|
||||
properties: {
|
||||
text: {
|
||||
raw: `open`,
|
||||
raw: `**Open Dialog**`,
|
||||
format: 'md',
|
||||
},
|
||||
colorScheme: 'red'
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'root',
|
||||
slot: 'root',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'core/v1/event',
|
||||
properties: {
|
||||
events: [
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'editDialog',
|
||||
componentId: 'dialog',
|
||||
method: {
|
||||
name: 'openDialog'
|
||||
name: 'openDialog',
|
||||
parameters: {
|
||||
title: 'hi',
|
||||
}
|
||||
},
|
||||
wait: {}
|
||||
}
|
||||
@ -53,58 +65,69 @@
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'editDialog',
|
||||
id: 'dialog',
|
||||
type: 'chakra_ui/v1/dialog',
|
||||
properties: {
|
||||
title: 'This is a dialog',
|
||||
confirmButton: {
|
||||
text: 'save',
|
||||
colorScheme: 'purple'
|
||||
text: 'hello',
|
||||
colorScheme: 'pink'
|
||||
},
|
||||
cancelButton: {
|
||||
text: 'cancel'
|
||||
text: 'thanks'
|
||||
}
|
||||
},
|
||||
traits: [{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'root',
|
||||
slot: 'root',
|
||||
},
|
||||
},
|
||||
}],
|
||||
},
|
||||
{
|
||||
id: 'emailInput',
|
||||
type: 'chakra_ui/v1/input',
|
||||
properties: {
|
||||
initValue: '{{ list.currentItem.email }}',
|
||||
left: {
|
||||
type: 'addon',
|
||||
children: 'email',
|
||||
},
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'editDialog',
|
||||
slot: 'content',
|
||||
id: 'root',
|
||||
slot: 'root',
|
||||
},
|
||||
},
|
||||
},
|
||||
// dialog events
|
||||
{
|
||||
type: 'core/v1/event',
|
||||
parsedType: {
|
||||
version: 'core/v1',
|
||||
name: 'event',
|
||||
},
|
||||
properties: {
|
||||
events: [
|
||||
// when click confirm
|
||||
{
|
||||
event: 'confirmDialog',
|
||||
componentId: 'dialog',
|
||||
method: {
|
||||
name: 'confirmDialog'
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
// when cancel confirm
|
||||
{
|
||||
event: 'cancelDialog',
|
||||
componentId: 'dialog',
|
||||
method: {
|
||||
name: 'cancelDialog'
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'nameInput',
|
||||
type: 'chakra_ui/v1/input',
|
||||
id: 'dialogContent',
|
||||
type: 'core/v1/text',
|
||||
properties: {
|
||||
initValue: '{{ list.currentItem.name }}',
|
||||
left: {
|
||||
type: 'addon',
|
||||
children: 'name',
|
||||
value: {
|
||||
raw: '**This is a dialog**',
|
||||
format: 'md',
|
||||
},
|
||||
},
|
||||
traits: [
|
||||
@ -112,7 +135,7 @@
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'editDialog',
|
||||
id: 'dialog',
|
||||
slot: 'content',
|
||||
},
|
||||
},
|
||||
|
||||
@ -54,14 +54,21 @@
|
||||
{
|
||||
type: 'core/v1/state',
|
||||
properties: {
|
||||
key: 'isAddItem',
|
||||
initialValue: false,
|
||||
key: 'editingId',
|
||||
initialValue: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'core/v1/state',
|
||||
properties: {
|
||||
key: 'editingId',
|
||||
key: 'nameInputInitialValue',
|
||||
initialValue: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'core/v1/state',
|
||||
properties: {
|
||||
key: 'emailInputInitialValue',
|
||||
initialValue: '',
|
||||
},
|
||||
},
|
||||
@ -203,16 +210,30 @@
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
// set root state of isAddItem
|
||||
// set root state of nameInputInitialValue
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'isAddItem',
|
||||
value: false,
|
||||
}
|
||||
key: 'nameInputInitialValue',
|
||||
value: '{{ $listItem.name }}',
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
// set root state of emailInputInitialValue
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'emailInputInitialValue',
|
||||
value: '{{ $listItem.email }}',
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -230,38 +251,6 @@
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
// set name input value when delay 1, because nameInput component not mount when dialog opening
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'nameInput',
|
||||
method: {
|
||||
name: 'setInputValue',
|
||||
parameters: {
|
||||
value: '{{ $listItem.name }}',
|
||||
},
|
||||
},
|
||||
wait: {
|
||||
type: 'delay',
|
||||
time: 1
|
||||
},
|
||||
disabled: 'false',
|
||||
},
|
||||
// set email input value when delay 1, because emailInput component not mount when dialog opening
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'emailInput',
|
||||
method: {
|
||||
name: 'setInputValue',
|
||||
parameters: {
|
||||
value: '{{ $listItem.email }}',
|
||||
},
|
||||
},
|
||||
wait: {
|
||||
type: 'delay',
|
||||
time: 1
|
||||
},
|
||||
disabled: 'false',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -421,19 +410,11 @@
|
||||
(function() {
|
||||
const list = [...root.listData || []]
|
||||
if (typeof nameInput !== "undefined" && typeof emailInput !== "undefined") {
|
||||
if (root.isAddItem) {
|
||||
list.push({
|
||||
id: Date.now(),
|
||||
name: nameInput.value,
|
||||
email: emailInput.value
|
||||
})
|
||||
} else {
|
||||
let index = list.findIndex((item) => item.id == root.editingId)
|
||||
list[index] = {
|
||||
...list[index],
|
||||
name: nameInput.value,
|
||||
email: emailInput.value
|
||||
}
|
||||
let index = list.findIndex((item) => item.id == root.editingId)
|
||||
list[index] = {
|
||||
...list[index],
|
||||
name: nameInput.value,
|
||||
email: emailInput.value
|
||||
}
|
||||
}
|
||||
return list
|
||||
@ -444,6 +425,33 @@
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
// reset initialValue
|
||||
{
|
||||
event: 'confirmDialog',
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'nameInputInitialValue',
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
{
|
||||
event: 'confirmDialog',
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'emailInputInitialValue',
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
// when cancel dialog
|
||||
{
|
||||
event: 'cancelDialog',
|
||||
@ -468,6 +476,7 @@
|
||||
type: 'addon',
|
||||
children: '姓名',
|
||||
},
|
||||
initialValue: '{{ root.nameInputInitialValue }}'
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
@ -490,6 +499,7 @@
|
||||
type: 'addon',
|
||||
children: '邮箱',
|
||||
},
|
||||
initialValue: '{{ root.emailInputInitialValue }}'
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
@ -625,26 +635,9 @@
|
||||
// open dialog and prop value
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'editDialog',
|
||||
componentId: 'createDialog',
|
||||
method: {
|
||||
name: 'openDialog',
|
||||
parameters: {
|
||||
title: '添加客户',
|
||||
}
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
// set root state of isAddItem
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'isAddItem',
|
||||
value: true,
|
||||
}
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -663,6 +656,135 @@
|
||||
},
|
||||
],
|
||||
},
|
||||
// create dialog
|
||||
{
|
||||
id: 'createDialog',
|
||||
type: 'chakra_ui/v1/dialog',
|
||||
properties: {
|
||||
title: 'This is a dialog',
|
||||
confirmButton: {
|
||||
text: 'save',
|
||||
colorScheme: 'purple'
|
||||
},
|
||||
cancelButton: {
|
||||
text: 'cancel'
|
||||
}
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'root',
|
||||
slot: 'root',
|
||||
},
|
||||
},
|
||||
},
|
||||
// dialog events
|
||||
{
|
||||
type: 'core/v1/event',
|
||||
parsedType: {
|
||||
version: 'core/v1',
|
||||
name: 'event',
|
||||
},
|
||||
properties: {
|
||||
events: [
|
||||
// when click confirm
|
||||
{
|
||||
event: 'confirmDialog',
|
||||
componentId: 'createDialog',
|
||||
method: {
|
||||
name: 'confirmDialog'
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
{
|
||||
event: 'confirmDialog',
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'listData',
|
||||
value: `{{
|
||||
(function() {
|
||||
const list = [...root.listData || []]
|
||||
if (typeof createNameInput !== "undefined" && typeof createEmailInput !== "undefined") {
|
||||
list.push({
|
||||
id: Date.now(),
|
||||
name: createNameInput.value,
|
||||
email: createEmailInput.value
|
||||
})
|
||||
}
|
||||
return list
|
||||
})()
|
||||
}}`,
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
// when cancel dialog
|
||||
{
|
||||
event: 'cancelDialog',
|
||||
componentId: 'createDialog',
|
||||
method: {
|
||||
name: 'cancelDialog'
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
// create name input component
|
||||
{
|
||||
id: 'createNameInput',
|
||||
type: 'chakra_ui/v1/input',
|
||||
properties: {
|
||||
left: {
|
||||
type: 'addon',
|
||||
children: '姓名',
|
||||
},
|
||||
initialValue: ''
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'createDialog',
|
||||
slot: 'content',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// create email input component
|
||||
{
|
||||
id: 'createEmailInput',
|
||||
type: 'chakra_ui/v1/input',
|
||||
properties: {
|
||||
left: {
|
||||
type: 'addon',
|
||||
children: '邮箱',
|
||||
},
|
||||
initialValue: ''
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'createDialog',
|
||||
slot: 'content',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
@ -34,6 +34,7 @@ const SizePropertySchema = Type.KeyOf(
|
||||
const FocusBorderColorPropertySchema = Type.Optional(Type.String());
|
||||
const IsDisabledPropertySchema = Type.Optional(Type.Boolean());
|
||||
const IsRequiredPropertySchema = Type.Optional(Type.Boolean());
|
||||
const InitValuePropertySchema = Type.Optional(Type.String());
|
||||
|
||||
const AppendElementPropertySchema = Type.Union([
|
||||
Type.Object({
|
||||
@ -57,6 +58,7 @@ const Input: ComponentImplementation<{
|
||||
isRequired?: Static<typeof IsRequiredPropertySchema>;
|
||||
left?: Static<typeof AppendElementPropertySchema>;
|
||||
right?: Static<typeof AppendElementPropertySchema>;
|
||||
initialValue?: Static<typeof InitValuePropertySchema>;
|
||||
}> = ({
|
||||
variant,
|
||||
placeholder,
|
||||
@ -69,8 +71,9 @@ const Input: ComponentImplementation<{
|
||||
mergeState,
|
||||
subscribeMethods,
|
||||
data,
|
||||
initialValue,
|
||||
}) => {
|
||||
const [value, setValue] = React.useState(''); // TODO: pin input
|
||||
const [value, setValue] = React.useState(initialValue); // TODO: pin input
|
||||
const onChange = (event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setValue(event.target.value);
|
||||
|
||||
@ -173,6 +176,10 @@ export default {
|
||||
name: 'right',
|
||||
...AppendElementPropertySchema,
|
||||
},
|
||||
{
|
||||
name: 'initialValue',
|
||||
...InitValuePropertySchema,
|
||||
},
|
||||
],
|
||||
acceptTraits: [],
|
||||
state: StateSchema,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user