-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
512 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import * as Module from './index.tsx' | ||
import { RenderToReact } from '../../shared/render' | ||
import { useState } from 'react' | ||
export const Component = RenderToReact(Module) | ||
export function InputBox () { | ||
const [val, setVal] = useState('v0') | ||
return ( | ||
<div style={{ margin: '10px', color: '#999' }}> | ||
<Component | ||
list={[{ name: 'AAA' }, { name: 'BBBBB' }, { name: 'CC' }]} | ||
render={(item, i) => { | ||
return ( | ||
<div >{i+1}.{item.name}</div> | ||
) | ||
}} | ||
/> | ||
</div> | ||
) | ||
} | ||
|
||
|
||
export function InputBox2 () { | ||
const [val, setVal] = useState('v0') | ||
return ( | ||
<div style={{ margin: '10px', color: '#999' }}> | ||
<Component | ||
list={[{ name: 'AAA' }, { name: 'BBBBB' }, { name: 'CC' }]} | ||
extra={<div>extra</div>} | ||
render={(item, i) => { | ||
return ( | ||
<div >{i+1}.{item.name}</div> | ||
) | ||
}} | ||
/> | ||
</div> | ||
) | ||
} | ||
|
||
# List 列表 | ||
|
||
<InputBox /> | ||
|
||
普通列表 | ||
|
||
<InputBox2 /> | ||
|
||
带extra 的列表 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import { h, SignalProps, PropTypes, useLogic, ConvertToLayoutTreeDraft, VirtualLayoutJSON } from '@polymita/renderer'; | ||
import { after, Signal, signal } from '@polymita/signal' | ||
|
||
export const name = 'List' as const | ||
export let meta: { | ||
props: ListProps, | ||
layoutStruct: ListLayout | ||
patchCommands: [] | ||
} | ||
|
||
export interface ListProps<T = any> { | ||
list: Signal<T[]> | ||
render: (item: T, index: number) => VirtualLayoutJSON | ||
extra?: VirtualLayoutJSON | string | number | ||
} | ||
|
||
export const propTypes = { | ||
list: PropTypes.signal.isRequired, | ||
} | ||
|
||
export const logic = (props: SignalProps<ListProps>) => { | ||
return { | ||
} | ||
} | ||
type LogicReturn = ReturnType<typeof logic> | ||
|
||
export type ListLayout = { | ||
type: 'listContainer', | ||
children: [ | ||
] | ||
} | ||
export const layout = <T,>(props: ListProps<T>) => { | ||
const logic = useLogic<LogicReturn>() | ||
|
||
const ds = props.list(); | ||
|
||
return ( | ||
<listContainer className="block"> | ||
{ds.map((item, index) => { | ||
const r = props.render(item, index) | ||
const key = (item as any)?.id ?? (item as any)?.key ?? (item as any)?.name ?? JSON.stringify(item) | ||
return ( | ||
<listItem className="flex p-2 border-b items-center" key={key}> | ||
<listContent className="flex-1"> | ||
{r} | ||
</listContent> | ||
<listExtra className="flex-none ml-2"> | ||
{props.extra} | ||
</listExtra> | ||
</listItem> | ||
) | ||
})} | ||
</listContainer> | ||
) | ||
} | ||
|
||
export const styleRules = (props: ListProps, layout: ConvertToLayoutTreeDraft<ListLayout>) => { | ||
return [ | ||
] | ||
} | ||
|
||
export const designPattern = (props: ListProps, layout: ConvertToLayoutTreeDraft<ListLayout>) => { | ||
const logic = useLogic<LogicReturn>() | ||
return {} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
var __defProp = Object.defineProperty; | ||
var __export = (target, all) => { | ||
for (var name2 in all) | ||
__defProp(target, name2, { get: all[name2], enumerable: true }); | ||
}; | ||
|
||
// components/form-item/demo.mdx | ||
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; | ||
|
||
// components/form-item/index.tsx | ||
var form_item_exports = {}; | ||
__export(form_item_exports, { | ||
designPattern: () => designPattern, | ||
layout: () => layout, | ||
logic: () => logic, | ||
meta: () => meta, | ||
name: () => name, | ||
propTypes: () => propTypes, | ||
styleRules: () => styleRules | ||
}); | ||
import { h, useLogic } from "@polymita/renderer"; | ||
var name = "FormItem"; | ||
var meta; | ||
var propTypes = {}; | ||
var logic = (props) => { | ||
return {}; | ||
}; | ||
var layout = (props) => { | ||
const logic2 = useLogic(); | ||
return /* @__PURE__ */ h("formItemContainer", null); | ||
}; | ||
var styleRules = (props, layout2) => { | ||
return []; | ||
}; | ||
var designPattern = (props, layout2) => { | ||
const logic2 = useLogic(); | ||
return {}; | ||
}; | ||
|
||
// shared/render.ts | ||
import { createRSRenderer } from "@polymita/renderer"; | ||
import React from "react"; | ||
function RenderToReactWithWrap(module) { | ||
const render = RenderToReact(module); | ||
return (p) => { | ||
const content = render(p); | ||
console.log("content: ", content); | ||
return React.createElement( | ||
"div", | ||
{ style: { margin: "20px", display: "inline-block" } }, | ||
content | ||
); | ||
}; | ||
} | ||
function RenderToReact(module) { | ||
const renderer = createRSRenderer(module, { | ||
framework: { | ||
name: "react", | ||
lib: React | ||
} | ||
}); | ||
return (p) => { | ||
const r = renderer.construct(p); | ||
return renderer.render(); | ||
}; | ||
} | ||
|
||
// components/form-item/demo.mdx | ||
import { useState } from "react"; | ||
var Component = RenderToReactWithWrap(form_item_exports); | ||
function InputBox() { | ||
const [val, setVal] = useState("v0"); | ||
return _jsx("div", { | ||
style: { | ||
margin: "10px", | ||
color: "#999" | ||
} | ||
}); | ||
} | ||
function InputBox2() { | ||
const [val, setVal] = useState("v0"); | ||
return _jsx("div", { | ||
style: { | ||
margin: "10px", | ||
color: "#999" | ||
} | ||
}); | ||
} | ||
function _createMdxContent(props) { | ||
const _components = Object.assign({ | ||
h1: "h1", | ||
p: "p" | ||
}, props.components); | ||
return _jsxs(_Fragment, { | ||
children: [_jsx(_components.h1, { | ||
children: "Input \u8F93\u5165" | ||
}), "\n", _jsx(InputBox, {}), "\n", _jsx(_components.p, { | ||
children: "\u63A5\u6536\u7528\u6237\u8F93\u5165" | ||
}), "\n", _jsx(InputBox2, {}), "\n", _jsx(_components.p, { | ||
children: "\u6570\u5B57\u6846 type=number" | ||
}), "\n", _jsx(Component, { | ||
disabled: true, | ||
value: "disabled" | ||
}), "\n", _jsx(_components.p, { | ||
children: "\u4E0D\u53EF\u4EE5\u7684\u8F93\u5165\u6846" | ||
})] | ||
}); | ||
} | ||
function MDXContent(props = {}) { | ||
const { wrapper: MDXLayout } = props.components || {}; | ||
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { | ||
children: _jsx(_createMdxContent, props) | ||
})) : _createMdxContent(props); | ||
} | ||
var demo_default = MDXContent; | ||
export { | ||
Component, | ||
InputBox, | ||
InputBox2, | ||
demo_default as default | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
var __defProp = Object.defineProperty; | ||
var __export = (target, all) => { | ||
for (var name2 in all) | ||
__defProp(target, name2, { get: all[name2], enumerable: true }); | ||
}; | ||
|
||
// components/form/demo.mdx | ||
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; | ||
|
||
// components/form/index.tsx | ||
var form_exports = {}; | ||
__export(form_exports, { | ||
designPattern: () => designPattern, | ||
layout: () => layout, | ||
logic: () => logic, | ||
meta: () => meta, | ||
name: () => name, | ||
propTypes: () => propTypes, | ||
styleRules: () => styleRules | ||
}); | ||
import { h, useLogic } from "@polymita/renderer"; | ||
var name = "Form"; | ||
var meta; | ||
var propTypes = {}; | ||
var logic = (props) => { | ||
return {}; | ||
}; | ||
var layout = (props) => { | ||
const logic2 = useLogic(); | ||
return /* @__PURE__ */ h("formContainer", null); | ||
}; | ||
var styleRules = (props, layout2) => { | ||
return []; | ||
}; | ||
var designPattern = (props, layout2) => { | ||
const logic2 = useLogic(); | ||
return {}; | ||
}; | ||
|
||
// shared/render.ts | ||
import { createRSRenderer } from "@polymita/renderer"; | ||
import React from "react"; | ||
function RenderToReactWithWrap(module) { | ||
const render = RenderToReact(module); | ||
return (p) => { | ||
const content = render(p); | ||
console.log("content: ", content); | ||
return React.createElement( | ||
"div", | ||
{ style: { margin: "20px", display: "inline-block" } }, | ||
content | ||
); | ||
}; | ||
} | ||
function RenderToReact(module) { | ||
const renderer = createRSRenderer(module, { | ||
framework: { | ||
name: "react", | ||
lib: React | ||
} | ||
}); | ||
return (p) => { | ||
const r = renderer.construct(p); | ||
return renderer.render(); | ||
}; | ||
} | ||
|
||
// components/form/demo.mdx | ||
import { useState } from "react"; | ||
var Component = RenderToReactWithWrap(form_exports); | ||
function InputBox() { | ||
const [val, setVal] = useState("v0"); | ||
return _jsx("div", { | ||
style: { | ||
margin: "10px", | ||
color: "#999" | ||
} | ||
}); | ||
} | ||
function InputBox2() { | ||
const [val, setVal] = useState("v0"); | ||
return _jsx("div", { | ||
style: { | ||
margin: "10px", | ||
color: "#999" | ||
} | ||
}); | ||
} | ||
function _createMdxContent(props) { | ||
const _components = Object.assign({ | ||
h1: "h1", | ||
p: "p" | ||
}, props.components); | ||
return _jsxs(_Fragment, { | ||
children: [_jsx(_components.h1, { | ||
children: "Input \u8F93\u5165" | ||
}), "\n", _jsx(InputBox, {}), "\n", _jsx(_components.p, { | ||
children: "\u63A5\u6536\u7528\u6237\u8F93\u5165" | ||
}), "\n", _jsx(InputBox2, {}), "\n", _jsx(_components.p, { | ||
children: "\u6570\u5B57\u6846 type=number" | ||
}), "\n", _jsx(Component, { | ||
disabled: true, | ||
value: "disabled" | ||
}), "\n", _jsx(_components.p, { | ||
children: "\u4E0D\u53EF\u4EE5\u7684\u8F93\u5165\u6846" | ||
})] | ||
}); | ||
} | ||
function MDXContent(props = {}) { | ||
const { wrapper: MDXLayout } = props.components || {}; | ||
return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { | ||
children: _jsx(_createMdxContent, props) | ||
})) : _createMdxContent(props); | ||
} | ||
var demo_default = MDXContent; | ||
export { | ||
Component, | ||
InputBox, | ||
InputBox2, | ||
demo_default as default | ||
}; |
Oops, something went wrong.