mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-21 03:15:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

complete simple todo list

Browse Source
This commit is contained in:
Bowen Tan 2021-09-02 17:43:28 +08:00
parent 16f07c20f9
commit d05f736a9e
3 changed files with 206 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
packages/runtime/example/list/list.html
View File

@ -12,28 +12,28 @@
const listdata = [
{
id: 1,
name: 'Hanson Deck',
email: 'hanson@deck.com',
name: '马云',
email: 'jack.ma@deck.com',
},
{
id: 2,
name: 'Max Conversation',
email: 'Max@conversation.com',
name: '马化腾',
email: 'pony.ma@conversation.com',
},
{
id: 3,
name: 'Jason Response',
email: 'jason@response.com',
name: '李彦宏',
email: 'robin.li@response.com',
},
{
id: 4,
name: 'Sue Shei',
email: 'sueshei@example.com',
name: '张一鸣',
email: 'yiming.zhang@example.com',
},
{
id: 5,
name: 'Eric Widget',
email: 'eric@widget.org',
name: '王兴',
email: 'xing.wang@widget.org',
},
];
@ -148,7 +148,7 @@
type: 'chakra_ui/v1/button',
properties: {
text: {
raw: '打招呼',
raw: '编辑',
format: 'plain',
},
},
@ -163,11 +163,37 @@
events: [
{
event: 'click',
componentId: '$utils',
componentId: 'saveButton',
method: {
name: 'alert',
parameters:
'Hello, {{$listItem.name}}. You are in {{ root.listTitle }}',
name: 'setValue',
parameters: {
key: 'editingId',
value: '{{ $listItem.id }}',
},
},
wait: {},
disabled: 'false',
},
{
event: 'click',
componentId: 'nameInput',
method: {
name: 'setInputValue',
parameters: {
value: '{{ $listItem.name }}',
},
},
wait: {},
disabled: 'false',
},
{
event: 'click',
componentId: 'emailInput',
method: {
name: 'setInputValue',
parameters: {
value: '{{ $listItem.email }}',
},
},
wait: {},
disabled: 'false',
@ -246,6 +272,48 @@
},
],
},
{
id: 'nameInput',
type: 'chakra_ui/v1/input',
properties: {
left: {
type: 'addon',
children: '姓名',
},
},
traits: [
{
type: 'core/v1/slot',
properties: {
container: {
id: 'root',
slot: 'root',
},
},
},
],
},
{
id: 'emailInput',
type: 'chakra_ui/v1/input',
properties: {
left: {
type: 'addon',
children: '邮箱',
},
},
traits: [
{
type: 'core/v1/slot',
properties: {
container: {
id: 'root',
slot: 'root',
},
},
},
],
},
{
id: 'addButton',
type: 'chakra_ui/v1/button',
@ -272,14 +340,14 @@
parameters: {
key: 'listData',
value: `{{
function() {
(function() {
let list = root.listData || []
return list.concat({
id: Date.now(),
name: 'Bowen Tan',
email: 'bowen.tan@smartx.com'
name: nameInput.value,
email: emailInput.value
})
}()
})()
}}`,
},
},
@ -300,6 +368,106 @@
},
],
},
{
id: 'saveButton',
type: 'chakra_ui/v1/button',
properties: {
text: {
raw: '保存',
format: 'plain',
},
},
traits: [
{
type: 'core/v1/state',
properties: {
key: 'editingId',
initialValue: '',
},
},
{
type: 'core/v1/event',
parsedType: {
version: 'core/v1',
name: 'event',
},
properties: {
events: [
{
event: 'click',
componentId: 'root',
method: {
name: 'setValue',
parameters: {
key: 'listData',
value: `{{
(function() {
const list = [...root.listData || []]
let index = list.findIndex((item) => item.id == saveButton.editingId)
list[index] = {
...list[index],
name: nameInput.value,
email: emailInput.value
}
return list
})()
}}`,
},
},
wait: {},
disabled: 'false',
},
{
event: 'click',
componentId: 'saveButton',
method: {
name: 'setValue',
parameters: {
key: 'editingId',
value: '-1',
},
},
wait: {},
disabled: 'false',
},
{
event: 'click',
componentId: 'nameInput',
method: {
name: 'setInputValue',
parameters: {
value: ``,
},
},
wait: {},
disabled: 'false',
},
{
event: 'click',
componentId: 'emailInput',
method: {
name: 'setInputValue',
parameters: {
value: ``,
},
},
wait: {},
disabled: 'false',
},
],
},
},
{
type: 'core/v1/slot',
properties: {
container: {
id: 'root',
slot: 'root',
},
},
},
],
},
],
},
});

19
packages/runtime/src/components/chakra-ui/Input.tsx
View File

@ -67,6 +67,7 @@ const Input: ComponentImplementation<{
left,
right,
mergeState,
subscribeMethods,
data,
}) => {
const [value, setValue] = React.useState(''); // TODO: pin input
@ -78,6 +79,14 @@ const Input: ComponentImplementation<{
mergeState({ ...data });
}, [value, data]);
useEffect(() => {
subscribeMethods({
setInputValue({ value }) {
setValue(value);
},
});
}, []);
return (
<InputGroup size={size}>
{left ? (
@ -94,6 +103,7 @@ const Input: ComponentImplementation<{
<></>
)}
<BaseInput
value={value}
variant={variant}
placeholder={placeholder}
focusBorderColor={focusBorderColor}
@ -166,7 +176,14 @@ export default {
],
acceptTraits: [],
state: StateSchema,
methods: [],
methods: [
{
name: 'setInputValue',
parameters: Type.Object({
value: Type.String(),
}),
},
],
},
}),
impl: Input,

2
packages/runtime/src/store.ts
View File

@ -18,7 +18,7 @@ const builtIn = {
};
function isNumeric(x: string | number) {
return !isNaN(Number(x));
return !isNaN(Number(x)) && x !== '';
}
export const stateStore = reactive<Record<string, any>>({});