Skip to content

Commit

Permalink
feat: update to new version renderer
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhou-yg
zhou-yg committed Apr 16, 2023
1 parent 9c20555 commit 2353a6a
Show file tree
Hide file tree
Showing 20 changed files with 1,069 additions and 1,058 deletions.
4 changes: 2 additions & 2 deletions components/input/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ export let meta: {
export interface ButtonProps {
disabled?: boolean
value: Signal< string | number>
onInput?: (v: string | number) => void
type?: string
focused?: boolean
onInput?: (v: string | number) => void
onFocus?: () => void
onBlur?: () => void
focused?: boolean
}

export const propTypes = {
Expand Down
1 change: 1 addition & 0 deletions components/menu/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ export const layout = (props: MenuProps) => {
const logic = useLogic<LogicReturn>()
const MenuItemFunc = useModule(MenuItemModule)

console.log('logic.items: ', logic.items);
return (
<menuBox className="block border-slate-300">
<ul className="block" >
Expand Down
6 changes: 3 additions & 3 deletions components/modal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,20 @@ export const layout = (props: ModalProps) => {
return (
<modalBox
className="block fixed left-0 top-0 w-full h-full" >
<mask className="fixed w-full h-full opacity-70 bg-black"></mask>
<mask className="fixed top-0 left-0 w-full h-full opacity-70 bg-black"></mask>
<modalBody
className="block relative rounded-lg bg-white top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
style={{ width: '520px' }} >
<closeBox className="block absolute top-4 right-4 cursor-pointer" onClick={props.onClose} >
<CloseIcon color="rgba(0,0,0,.45)" />
</closeBox>

<content className="block p-6" style={{ minHeight: '40px' }} >
<content className="block p-4" style={{ minHeight: '40px' }} >
{props.title ? <contentTitle className="block mb-4 font-medium">{props.title}</contentTitle> : ''}
{props.children}
</content>

<footer className="flex gap-2 p-6 flex-row-reverse" >
<footer className="flex gap-2 p-4 flex-row-reverse" >
<Button type="primary">确定</Button>
<Button>取消</Button>
</footer>
Expand Down
4 changes: 2 additions & 2 deletions demo-site/components/aside.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ var designPattern = (props, layout2) => {
};

// shared/render.ts
import { createRSRender } from "@polymita/renderer";
import { createRSRenderer } from "@polymita/renderer";
import React from "react";
function RenderToReactWithWrap(module) {
const render = RenderToReact(module);
Expand All @@ -52,7 +52,7 @@ function RenderToReactWithWrap(module) {
};
}
function RenderToReact(module) {
const renderer = createRSRender(module, {
const renderer = createRSRenderer(module, {
framework: {
name: "react",
lib: React
Expand Down
48 changes: 28 additions & 20 deletions demo-site/components/button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,24 +133,32 @@ var logic = (props) => {
};
var layout = (props) => {
const logicResult = useLogic();
return /* @__PURE__ */ h("buttonBox", {
className: "inline-block px-2 py-1 rounded hover:cursor-pointer",
"is-container": true,
"has-decoration": true,
selected: false,
disabled: props.disabled
}, /* @__PURE__ */ h("span", {
"is-text": true,
selected: false,
disabled: props.disabled,
className: "block select-none",
onClick: (e) => {
var _a;
if (props.disabled)
return;
(_a = props.onClick) == null ? void 0 : _a.call(props, e);
}
}, props.children));
return /* @__PURE__ */ h(
"buttonBox",
{
className: "inline-block px-2 py-1 rounded hover:cursor-pointer",
"is-container": true,
"has-decoration": true,
selected: false,
disabled: props.disabled
},
/* @__PURE__ */ h(
"span",
{
"is-text": true,
selected: false,
disabled: props.disabled,
className: "block select-none",
onClick: (e) => {
var _a;
if (props.disabled)
return;
(_a = props.onClick) == null ? void 0 : _a.call(props, e);
}
},
props.children
)
);
};
var designPatterns = (props) => {
const logicResult = useLogic();
Expand Down Expand Up @@ -201,7 +209,7 @@ var styleRules = (props, draft) => {
};

// shared/render.ts
import { createRSRender } from "@polymita/renderer";
import { createRSRenderer } from "@polymita/renderer";
import React from "react";
function RenderToReactWithWrap(module) {
const render = RenderToReact(module);
Expand All @@ -214,7 +222,7 @@ function RenderToReactWithWrap(module) {
};
}
function RenderToReact(module) {
const renderer = createRSRender(module, {
const renderer = createRSRenderer(module, {
framework: {
name: "react",
lib: React
Expand Down
59 changes: 32 additions & 27 deletions demo-site/components/checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,31 +213,36 @@ var logic = (props) => {
};
var layout = (props) => {
const logic2 = useLogic();
return /* @__PURE__ */ h2("checkBoxContainer", {
className: "relative flex items-center",
onClick: logic2.toggle
}, /* @__PURE__ */ h2("checkBox", {
className: "relative block mr-2 rounded ",
style: { width: "16px", height: "16px" },
"is-container": true,
"has-decoration": true,
selected: logic2.value(),
disabled: props.disabled
}, /* @__PURE__ */ h2("input", {
type: "checkbox",
readOnly: true,
checked: logic2.value(),
className: "opacity-0 absolute w-full h-full"
}), /* @__PURE__ */ h2("span", {
"is-text": true,
selected: logic2.value(),
disabled: props.disabled,
className: "relative z-10 w-full h-full flex items-center justify-center"
}, logic2.value() ? /* @__PURE__ */ h2(check_default, {
size: 12
}) : "")), /* @__PURE__ */ h2("checkBoxLabel", {
className: "select-none"
}, props.children));
return /* @__PURE__ */ h2(
"checkBoxContainer",
{
className: "relative flex items-center",
onClick: logic2.toggle
},
/* @__PURE__ */ h2(
"checkBox",
{
className: "relative block mr-2 rounded ",
style: { width: "16px", height: "16px" },
"is-container": true,
"has-decoration": true,
selected: logic2.value(),
disabled: props.disabled
},
/* @__PURE__ */ h2("input", { type: "checkbox", readOnly: true, checked: logic2.value(), className: "opacity-0 absolute w-full h-full" }),
/* @__PURE__ */ h2(
"span",
{
"is-text": true,
selected: logic2.value(),
disabled: props.disabled,
className: "relative z-10 w-full h-full flex items-center justify-center"
},
logic2.value() ? /* @__PURE__ */ h2(check_default, { size: 12 }) : ""
)
),
/* @__PURE__ */ h2("checkBoxLabel", { className: "select-none" }, props.children)
);
};
var designPatterns = (props) => {
const logicResult = useLogic();
Expand Down Expand Up @@ -265,7 +270,7 @@ var designPatterns = (props) => {
};

// shared/render.ts
import { createRSRender } from "@polymita/renderer";
import { createRSRenderer } from "@polymita/renderer";
import React from "react";
function RenderToReactWithWrap(module) {
const render = RenderToReact(module);
Expand All @@ -278,7 +283,7 @@ function RenderToReactWithWrap(module) {
};
}
function RenderToReact(module) {
const renderer = createRSRender(module, {
const renderer = createRSRenderer(module, {
framework: {
name: "react",
lib: React
Expand Down
83 changes: 9 additions & 74 deletions demo-site/components/icons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,82 +419,17 @@ var check_square_default = Icon9;

// components/icons/index.tsx
var layout = (props) => {
return /* @__PURE__ */ h10("iconsBox", {
className: "block"
}, /* @__PURE__ */ h10("row", {
className: "flex gap-2 flex-wrap",
style: { width: "400px" }
}, /* @__PURE__ */ h10("div", {
className: "m-2 flex flex-col align-center items-center"
}, /* @__PURE__ */ h10(account_book_default, {
size: 24,
color: "blue",
type: "outlined"
}), /* @__PURE__ */ h10("p", {
className: "mt-1"
}, "AccountBookFilled")), /* @__PURE__ */ h10("div", {
className: "m-2 flex flex-col align-center items-center"
}, /* @__PURE__ */ h10(loading_default, {
size: 24,
color: "black",
className: "animate-spin"
}), /* @__PURE__ */ h10("p", {
className: "mt-1"
}, "LoadingIcon")), /* @__PURE__ */ h10("div", {
className: "m-2 flex flex-col align-center items-center"
}, /* @__PURE__ */ h10(loading3_quarters_default, {
size: 24,
color: "black",
className: "animate-spin"
}), /* @__PURE__ */ h10("p", {
className: "mt-1"
}, "Loading3Icon")), /* @__PURE__ */ h10("div", {
className: "m-2 flex flex-col align-center items-center"
}, /* @__PURE__ */ h10(close_default, {
size: 24,
color: "black"
}), /* @__PURE__ */ h10("p", {
className: "mt-1"
}, "CloseIcon")), /* @__PURE__ */ h10("div", {
className: "m-2 flex flex-col align-center items-center"
}, /* @__PURE__ */ h10(close_square_default, {
size: 24,
color: "black"
}), /* @__PURE__ */ h10("p", {
className: "mt-1"
}, "CloseSquareIcon")), /* @__PURE__ */ h10("div", {
className: "m-2 flex flex-col align-center items-center"
}, /* @__PURE__ */ h10(close_circle_default, {
size: 24,
color: "black"
}), /* @__PURE__ */ h10("p", {
className: "mt-1"
}, "CloseCircleIcon")), /* @__PURE__ */ h10("div", {
className: "m-2 flex flex-col align-center items-center"
}, /* @__PURE__ */ h10(check_default, {
size: 24,
color: "black"
}), /* @__PURE__ */ h10("p", {
className: "mt-1"
}, "CheckIcon")), /* @__PURE__ */ h10("div", {
className: "m-2 flex flex-col align-center items-center"
}, /* @__PURE__ */ h10(check_circle_default, {
size: 24,
color: "black"
}), /* @__PURE__ */ h10("p", {
className: "mt-1"
}, "CheckCircleIcon")), /* @__PURE__ */ h10("div", {
className: "m-2 flex flex-col align-center items-center"
}, /* @__PURE__ */ h10(check_square_default, {
size: 24,
color: "black"
}), /* @__PURE__ */ h10("p", {
className: "mt-1"
}, "CheckSquareIcon"))));
return /* @__PURE__ */ h10(
"iconsBox",
{
className: "block"
},
/* @__PURE__ */ h10("row", { className: "flex gap-2 flex-wrap", style: { width: "400px" } }, /* @__PURE__ */ h10("div", { className: "m-2 flex flex-col align-center items-center" }, /* @__PURE__ */ h10(account_book_default, { size: 24, color: "blue", type: "outlined" }), /* @__PURE__ */ h10("p", { className: "mt-1" }, "AccountBookFilled")), /* @__PURE__ */ h10("div", { className: "m-2 flex flex-col align-center items-center" }, /* @__PURE__ */ h10(loading_default, { size: 24, color: "black", className: "animate-spin" }), /* @__PURE__ */ h10("p", { className: "mt-1" }, "LoadingIcon")), /* @__PURE__ */ h10("div", { className: "m-2 flex flex-col align-center items-center" }, /* @__PURE__ */ h10(loading3_quarters_default, { size: 24, color: "black", className: "animate-spin" }), /* @__PURE__ */ h10("p", { className: "mt-1" }, "Loading3Icon")), /* @__PURE__ */ h10("div", { className: "m-2 flex flex-col align-center items-center" }, /* @__PURE__ */ h10(close_default, { size: 24, color: "black" }), /* @__PURE__ */ h10("p", { className: "mt-1" }, "CloseIcon")), /* @__PURE__ */ h10("div", { className: "m-2 flex flex-col align-center items-center" }, /* @__PURE__ */ h10(close_square_default, { size: 24, color: "black" }), /* @__PURE__ */ h10("p", { className: "mt-1" }, "CloseSquareIcon")), /* @__PURE__ */ h10("div", { className: "m-2 flex flex-col align-center items-center" }, /* @__PURE__ */ h10(close_circle_default, { size: 24, color: "black" }), /* @__PURE__ */ h10("p", { className: "mt-1" }, "CloseCircleIcon")), /* @__PURE__ */ h10("div", { className: "m-2 flex flex-col align-center items-center" }, /* @__PURE__ */ h10(check_default, { size: 24, color: "black" }), /* @__PURE__ */ h10("p", { className: "mt-1" }, "CheckIcon")), /* @__PURE__ */ h10("div", { className: "m-2 flex flex-col align-center items-center" }, /* @__PURE__ */ h10(check_circle_default, { size: 24, color: "black" }), /* @__PURE__ */ h10("p", { className: "mt-1" }, "CheckCircleIcon")), /* @__PURE__ */ h10("div", { className: "m-2 flex flex-col align-center items-center" }, /* @__PURE__ */ h10(check_square_default, { size: 24, color: "black" }), /* @__PURE__ */ h10("p", { className: "mt-1" }, "CheckSquareIcon")))
);
};

// shared/render.ts
import { createRSRender } from "@polymita/renderer";
import { createRSRenderer } from "@polymita/renderer";
import React from "react";
function RenderToReactWithWrap(module) {
const render6 = RenderToReact(module);
Expand All @@ -507,7 +442,7 @@ function RenderToReactWithWrap(module) {
};
}
function RenderToReact(module) {
const renderer = createRSRender(module, {
const renderer = createRSRenderer(module, {
framework: {
name: "react",
lib: React
Expand Down
43 changes: 25 additions & 18 deletions demo-site/components/input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,20 +108,27 @@ var logic = (props) => {
};
var layout = (props) => {
const logic2 = useLogic();
return /* @__PURE__ */ h("inputBox", {
className: "block"
}, /* @__PURE__ */ h("input", {
"is-container": true,
"has-decoration": true,
"is-text": true,
className: "block select-none outline-none border-0 px-2 py-1 rounded",
autoFocus: props.focused,
onFocus: logic2.onFocus,
onBlur: logic2.onBlur,
type: props.type,
disabled: props.disabled,
value: logic2.value
}));
return /* @__PURE__ */ h(
"inputBox",
{
className: "block"
},
/* @__PURE__ */ h(
"input",
{
"is-container": true,
"has-decoration": true,
"is-text": true,
className: "block select-none outline-none border-0 px-2 py-1 rounded",
autoFocus: props.focused,
onFocus: logic2.onFocus,
onBlur: logic2.onBlur,
type: props.type,
disabled: props.disabled,
value: logic2.value
}
)
);
};
var designPatterns = (props) => {
return [
Expand All @@ -136,7 +143,7 @@ var styleRules = (props) => {
};

// shared/render.ts
import { createRSRender } from "@polymita/renderer";
import { createRSRenderer } from "@polymita/renderer";
import React from "react";
function RenderToReactWithWrap(module) {
const render = RenderToReact(module);
Expand All @@ -149,7 +156,7 @@ function RenderToReactWithWrap(module) {
};
}
function RenderToReact(module) {
const renderer = createRSRender(module, {
const renderer = createRSRenderer(module, {
framework: {
name: "react",
lib: React
Expand All @@ -171,7 +178,7 @@ function InputBox() {
margin: "10px",
color: "#999"
},
children: [" \u5F53\u524D\u503C: ", val, _jsx("br", {}), _jsx(Component, {
children: ["\u5F53\u524D\u503C: ", val, _jsx("br", {}), _jsx(Component, {
value: val,
onInput: (v) => setVal(v),
onFocus: () => console.log("focus 1"),
Expand All @@ -186,7 +193,7 @@ function InputBox2() {
margin: "10px",
color: "#999"
},
children: [" \u5F53\u524D\u503C: ", val, _jsx("br", {}), " focused: true", _jsx("br", {}), _jsx(Component, {
children: ["\u5F53\u524D\u503C: ", val, _jsx("br", {}), "focused: true", _jsx("br", {}), _jsx(Component, {
type: "number",
value: val,
onInput: (v) => setVal(v),
Expand Down
Loading

0 comments on commit 2353a6a

Please sign in to comment.