156 lines
10 KiB
JSON
156 lines
10 KiB
JSON
{
|
|
"dsl": {
|
|
"widgetName": "MainContainer",
|
|
"backgroundColor": "none",
|
|
"rightColumn": 4896,
|
|
"snapColumns": 64,
|
|
"detachFromLayout": true,
|
|
"widgetId": "0",
|
|
"topRow": 0,
|
|
"bottomRow": 400,
|
|
"containerStyle": "none",
|
|
"snapRows": 124,
|
|
"parentRowSpace": 1,
|
|
"type": "CANVAS_WIDGET",
|
|
"canExtend": true,
|
|
"version": 87,
|
|
"minHeight": 1292,
|
|
"dynamicTriggerPathList": [],
|
|
"parentColumnSpace": 1,
|
|
"dynamicBindingPathList": [],
|
|
"leftColumn": 0,
|
|
"children": [
|
|
{
|
|
"mobileBottomRow": 33,
|
|
"widgetName": "Custom1",
|
|
"srcDoc": {
|
|
"html": "<!-- no need to write html, head, body tags, it is handled by the widget -->\n<div id=\"root\"></div>\n",
|
|
"css": ".app {\n\theight: calc(var(--appsmith-ui-height) * 1px);\n\twidth: calc(var(--appsmith-ui-width) * 1px);\n\tjustify-content: center;\n\tborder-radius: var(--appsmith-theme-borderRadius);\n\tbox-shadow: var(--appsmith-theme-boxShadow);\n}\n\n.tip-container {\n margin-bottom: 20px;\n}\n\n.tip-container h2 {\n margin-bottom: 20px;\n\tfont-size: 16px;\n\tfont-weight: 700;\n}\n\n.tip-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: baseline;\n}\n\n.tip-header div {\n\tcolor: #999;\n}\n\n.button-container {\n\ttext-align: right;\t\n}\n\n.button-container button {\n margin: 0 10px;\n}\n\n.button-container button.primary {\n\tbackground: var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n\tcolor: var(--appsmith-theme-primaryColor) !important;\n\tborder-color: var(--appsmith-theme-primaryColor) !important;\n}",
|
|
"js": "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm';\nimport reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm';\nimport { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm';\nimport Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm';\nfunction App() {\n const [currentIndex, setCurrentIndex] = React.useState(0);\n const [key, setKey] = React.useState(0);\n const handleNext = () => {\n const index = (currentIndex + 1) % appsmith.model.tips.length;\n setCurrentIndex(index);\n appsmith.updateModel({\n currentIndex: index\n });\n };\n const handleReset = () => {\n setCurrentIndex(0);\n appsmith.updateModel({\n currentIndex: 0\n });\n appsmith.triggerEvent(\"onResetClick\", {\n oldIndex: currentIndex\n });\n };\n React.useEffect(() => {\n appsmith.onModelChange((model, prevModel) => {\n if (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n setKey(Math.random());\n }\n });\n }, []);\n return /*#__PURE__*/React.createElement(Card, {\n className: \"app\",\n key: key\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-container\"\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: \"tip-header\"\n }, /*#__PURE__*/React.createElement(\"h2\", null, \"Custom Widget\"), /*#__PURE__*/React.createElement(\"div\", null, currentIndex + 1, \" / \", appsmith.model.tips.length, \" \")), /*#__PURE__*/React.createElement(Markdown, null, appsmith.model.tips[currentIndex])), /*#__PURE__*/React.createElement(\"div\", {\n className: \"button-container\"\n }, /*#__PURE__*/React.createElement(Button, {\n className: \"primary\",\n onClick: handleNext,\n type: \"primary\"\n }, \"Next Tip\"), /*#__PURE__*/React.createElement(Button, {\n className: \"reset\",\n onClick: handleReset\n }, \"Reset\")));\n}\nappsmith.onReady(() => {\n reactDom.render( /*#__PURE__*/React.createElement(App, null), document.getElementById(\"root\"));\n});"
|
|
},
|
|
"isCanvas": false,
|
|
"displayName": "Custom",
|
|
"iconSVG": "/static/media/icon.867bcc8399fa3f897d425d72690b86e4.svg",
|
|
"searchTags": [
|
|
"external"
|
|
],
|
|
"topRow": 3,
|
|
"bottomRow": 33,
|
|
"parentRowSpace": 10,
|
|
"type": "CUSTOM_WIDGET",
|
|
"hideCard": false,
|
|
"mobileRightColumn": 41,
|
|
"parentColumnSpace": 19.296875,
|
|
"dynamicTriggerPathList": [
|
|
{
|
|
"key": "onResetClick"
|
|
}
|
|
],
|
|
"dynamicBindingPathList": [
|
|
{
|
|
"key": "theme"
|
|
}
|
|
],
|
|
"leftColumn": 21,
|
|
"defaultModel": "{\n \"tips\": [\n \"Pass data to this widget in the default model field\",\n \"Access data in the javascript file using the appsmith.model variable\",\n \"Create events in the widget and trigger them in the javascript file using appsmith.triggerEvent('eventName')\",\n \"Access data in CSS as var(--appsmith-model-{property-name})\"\n ]\n}",
|
|
"theme": "{{appsmith.theme}}",
|
|
"onResetClick": "{{showAlert('Successfully reset from ' + oldIndex, '');}}",
|
|
"events": [
|
|
"onResetClick"
|
|
],
|
|
"key": "nuzm5titx7",
|
|
"isDeprecated": false,
|
|
"rightColumn": 41,
|
|
"isSearchWildcard": true,
|
|
"widgetId": "giszumqrjp",
|
|
"isVisible": true,
|
|
"version": 1,
|
|
"uncompiledSrcDoc": {
|
|
"html": "<!-- no need to write html, head, body tags, it is handled by the widget -->\n<div id=\"root\"></div>\n",
|
|
"css": ".app {\n\theight: calc(var(--appsmith-ui-height) * 1px);\n\twidth: calc(var(--appsmith-ui-width) * 1px);\n\tjustify-content: center;\n\tborder-radius: var(--appsmith-theme-borderRadius);\n\tbox-shadow: var(--appsmith-theme-boxShadow);\n}\n\n.tip-container {\n margin-bottom: 20px;\n}\n\n.tip-container h2 {\n margin-bottom: 20px;\n\tfont-size: 16px;\n\tfont-weight: 700;\n}\n\n.tip-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: baseline;\n}\n\n.tip-header div {\n\tcolor: #999;\n}\n\n.button-container {\n\ttext-align: right;\t\n}\n\n.button-container button {\n margin: 0 10px;\n}\n\n.button-container button.primary {\n\tbackground: var(--appsmith-theme-primaryColor) !important;\n}\n\n.button-container button.reset {\n\tcolor: var(--appsmith-theme-primaryColor) !important;\n\tborder-color: var(--appsmith-theme-primaryColor) !important;\n}",
|
|
"js": "import React from 'https://cdn.jsdelivr.net/npm/react@18.2.0/+esm'\nimport reactDom from 'https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm'\nimport { Button, Card } from 'https://cdn.jsdelivr.net/npm/antd@5.15.0/+esm'\nimport Markdown from 'https://cdn.jsdelivr.net/npm/react-markdown@9.0.1/+esm';\n\nfunction App() {\n\tconst [currentIndex, setCurrentIndex] = React.useState(0);\n\t\n\tconst [key, setKey] = React.useState(0);\n\n\tconst handleNext = () => {\n\t\tconst index = (currentIndex + 1) % appsmith.model.tips.length\n\t\tsetCurrentIndex(index);\n\t\tappsmith.updateModel({\n\t\t\tcurrentIndex: index\n\t\t});\n\t};\n\n\tconst handleReset = () => {\n\t\tsetCurrentIndex(0);\n\t\tappsmith.updateModel({\n\t\t\tcurrentIndex: 0\n\t\t});\n\t\tappsmith.triggerEvent(\"onResetClick\", {\n\t\t\toldIndex: currentIndex\n\t\t});\n\t};\n\t\n\tReact.useEffect(() => {\t\t\n\t\tappsmith.onModelChange((model, prevModel) => {\n\t\t\tif (JSON.stringify(prevModel?.tips) !== JSON.stringify(model.tips)) {\n\t\t\t\tsetKey(Math.random());\n\t\t\t}\n\t\t});\n\t}, []);\n\t\n\n\treturn (\n\t\t<Card className=\"app\" key={key}>\n\t\t\t<div className=\"tip-container\">\n\t\t\t\t<div className=\"tip-header\">\n\t\t\t\t\t<h2>Custom Widget</h2>\n\t\t\t\t\t<div>{currentIndex + 1} / {appsmith.model.tips.length}\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<Markdown>{appsmith.model.tips[currentIndex]}</Markdown>\n\t\t\t</div>\n\t\t\t<div className=\"button-container\">\n\t\t\t\t<Button className=\"primary\" onClick={handleNext} type=\"primary\">Next Tip</Button>\n\t\t\t\t<Button className=\"reset\" onClick={handleReset}>Reset</Button>\n\t\t\t</div>\n\t</Card>\n);\n}\n\nappsmith.onReady(() => {\n\treactDom.render(<App />, document.getElementById(\"root\"));\n});"
|
|
},
|
|
"parentId": "0",
|
|
"tags": [
|
|
"Display"
|
|
],
|
|
"renderMode": "CANVAS",
|
|
"isLoading": false,
|
|
"mobileTopRow": 3,
|
|
"mobileLeftColumn": 21,
|
|
"dynamicPropertyPathList": [
|
|
{
|
|
"key": "onResetClick"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"isVisible": true,
|
|
"type": "TEXT_WIDGET",
|
|
"text": "{{Custom1.model.currentIndex}}",
|
|
"fontSize": "1rem",
|
|
"fontStyle": "BOLD",
|
|
"textAlign": "LEFT",
|
|
"textColor": "#231F20",
|
|
"widgetName": "Text1",
|
|
"shouldTruncate": false,
|
|
"overflow": "NONE",
|
|
"version": 1,
|
|
"animateLoading": true,
|
|
"responsiveBehavior": "fill",
|
|
"minWidth": 450,
|
|
"minDynamicHeight": 4,
|
|
"maxDynamicHeight": 9000,
|
|
"dynamicHeight": "AUTO_HEIGHT",
|
|
"searchTags": [
|
|
"typography",
|
|
"paragraph",
|
|
"label"
|
|
],
|
|
"tags": [
|
|
"Suggested",
|
|
"Content"
|
|
],
|
|
"hideCard": false,
|
|
"isDeprecated": false,
|
|
"displayName": "Text",
|
|
"key": "my0l36gkcf",
|
|
"iconSVG": "/static/media/icon.a47d6d5dbbb718c4dc4b2eb4f218c1b7.svg",
|
|
"widgetId": "144bnot1xa",
|
|
"renderMode": "CANVAS",
|
|
"truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}",
|
|
"fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
|
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
|
"isLoading": false,
|
|
"parentColumnSpace": 19.296875,
|
|
"parentRowSpace": 10,
|
|
"leftColumn": 23,
|
|
"rightColumn": 40,
|
|
"topRow": 36,
|
|
"bottomRow": 40,
|
|
"mobileLeftColumn": 23,
|
|
"mobileRightColumn": 39,
|
|
"mobileTopRow": 38,
|
|
"mobileBottomRow": 42,
|
|
"parentId": "0",
|
|
"dynamicBindingPathList": [
|
|
{
|
|
"key": "truncateButtonColor"
|
|
},
|
|
{
|
|
"key": "fontFamily"
|
|
},
|
|
{
|
|
"key": "borderRadius"
|
|
},
|
|
{
|
|
"key": "text"
|
|
}
|
|
],
|
|
"dynamicTriggerPathList": [],
|
|
"originalTopRow": 38,
|
|
"originalBottomRow": 42
|
|
}
|
|
]
|
|
}
|
|
} |