@easy-editor/materials-dashboard-button 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @easy-editor/materials-dashboard-button
 
+## 0.0.3
+
+### Patch Changes
+
+- perf: configure & datasource
+- Updated dependencies
+  - @easy-editor/materials-shared@0.0.1
+
 ## 0.0.2
 
 ### Patch Changes

package/dist/component.min.js

@@ -1,2 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsButtonComponent={},e.jsxRuntime)}(this,function(e,o){"use strict";function n(e){var o,t,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(o=0;o<a;o++)e[o]&&(t=n(e[o]))&&(r&&(r+=" "),r+=t)}else for(t in e)e[t]&&(r&&(r+=" "),r+=t);return r}function t(...e){return function(){for(var e,o,t=0,r="",a=arguments.length;t<a;t++)(e=arguments[t])&&(o=n(e))&&(r&&(r+=" "),r+=o);return r}(e)}var r="component-module__button___Fmad4",a="component-module__sizeSmall___pu9QB",_="component-module__sizeMedium___YP7-2",d="component-module__sizeLarge___VQtJb",i="component-module__variantPrimary___Bk92-",l="component-module__variantSecondary___y8OzM",s="component-module__variantOutline___ozyNM",u="component-module__variantGhost___nLyDj",c="component-module__variantDanger___5iQMR",m="component-module__glow___deXRv";!function(e,o){void 0===o&&(o={});var n=o.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".component-module__button___Fmad4{align-items:center;border:none;cursor:pointer;display:inline-flex;font-weight:500;gap:8px;height:100%;justify-content:center;transition:all .2s ease;user-select:none;white-space:nowrap;width:100%}.component-module__button___Fmad4:disabled{cursor:not-allowed;opacity:.5}.component-module__sizeSmall___pu9QB{border-radius:4px;font-size:14px;padding:0 12px}.component-module__sizeMedium___YP7-2{border-radius:6px;font-size:14px;padding:0 16px}.component-module__sizeLarge___VQtJb{border-radius:8px;font-size:16px;padding:0 24px}.component-module__variantPrimary___Bk92-{background:linear-gradient(135deg,#00d4ff,#09c);box-shadow:0 2px 8px rgba(0,212,255,.3);color:#fff}.component-module__variantPrimary___Bk92-:hover:not(:disabled){box-shadow:0 4px 12px rgba(0,212,255,.4);transform:translateY(-1px)}.component-module__variantPrimary___Bk92-:active:not(:disabled){transform:translateY(0)}.component-module__variantSecondary___y8OzM{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);color:#fff}.component-module__variantSecondary___y8OzM:hover:not(:disabled){background:hsla(0,0%,100%,.15);border-color:hsla(0,0%,100%,.3)}.component-module__variantOutline___ozyNM{background:transparent;border:1px solid #00d4ff;color:#00d4ff}.component-module__variantOutline___ozyNM:hover:not(:disabled){background:rgba(0,212,255,.1)}.component-module__variantGhost___nLyDj{background:transparent;color:#fff}.component-module__variantGhost___nLyDj:hover:not(:disabled){background:hsla(0,0%,100%,.1)}.component-module__variantDanger___5iQMR{background:linear-gradient(135deg,#ff4d4f,#c33);box-shadow:0 2px 8px rgba(255,77,79,.3);color:#fff}.component-module__variantDanger___5iQMR:hover:not(:disabled){box-shadow:0 4px 12px rgba(255,77,79,.4);transform:translateY(-1px)}.component-module__glow___deXRv{animation:component-module__buttonGlow___xuuYr 2s ease-in-out infinite}@keyframes component-module__buttonGlow___xuuYr{0%,to{box-shadow:0 0 5px currentColor,0 0 10px currentColor}50%{box-shadow:0 0 10px currentColor,0 0 20px currentColor}}");const p=({ref:e,text:n="按钮",variant:p="primary",size:f="medium",disabled:b=!1,glowEnable:x=!1,onClick:y,style:g})=>{const h=t(r,(e=>{switch(e){case"small":return a;case"medium":default:return _;case"large":return d}})(f),(e=>{switch(e){case"primary":default:return i;case"secondary":return l;case"outline":return s;case"ghost":return u;case"danger":return c}})(p),x&&m);return o.jsx("button",{className:h,disabled:b,onClick:y,ref:e,style:g,type:"button",children:n?o.jsx("span",{children:n}):null})};e.Button=p,e.default=p,Object.defineProperty(e,"__esModule",{value:!0})});
-//# sourceMappingURL=component.min.js.map
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsButtonComponent={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";function n(...e){const t=[];for(const o of e)if(o)if("string"==typeof o||"number"==typeof o)t.push(String(o));else if(Array.isArray(o)){const e=n(...o);e&&t.push(e)}else if("object"==typeof o)for(const[e,n]of Object.entries(o))n&&t.push(e);return t.join(" ")}const r=(e,t)=>{if(!t)return e;const o=t.split(".");let n=e;for(const e of o){if(null==n)return;if("object"!=typeof n)return;n=n[e]}return n},a=e=>void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[],i=(e,t)=>{const o=((e,t)=>{if(!e)return[];if("static"===e.sourceType)return Array.isArray(e.staticData)?e.staticData:[];if("global"===e.sourceType&&e.datasourceId){const o=t?.page?.[e.datasourceId];return a(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return a(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:n,sourceField:a}of t)n&&a&&(o[n]=r(e,a));return o}):e)(o,e?.fieldMappings)};const s=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t});s("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]);const l=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}];((e=l)=>{s("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}])})(),s("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var d="component-module__button___Fmad4",u="component-module__sizeSmall___pu9QB",c="component-module__sizeMedium___YP7-2",_="component-module__sizeLarge___VQtJb",p="component-module__variantPrimary___Bk92-",m="component-module__variantSecondary___y8OzM",f="component-module__variantOutline___ozyNM",b="component-module__variantGhost___nLyDj",x="component-module__variantDanger___5iQMR",g="component-module__glow___deXRv";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".component-module__button___Fmad4{align-items:center;border:none;cursor:pointer;display:inline-flex;font-weight:500;gap:8px;height:100%;justify-content:center;transition:all .2s ease;user-select:none;white-space:nowrap;width:100%}.component-module__button___Fmad4:disabled{cursor:not-allowed;opacity:.5}.component-module__sizeSmall___pu9QB{border-radius:4px;font-size:14px;padding:0 12px}.component-module__sizeMedium___YP7-2{border-radius:6px;font-size:14px;padding:0 16px}.component-module__sizeLarge___VQtJb{border-radius:8px;font-size:16px;padding:0 24px}.component-module__variantPrimary___Bk92-{background:linear-gradient(135deg,#00d4ff,#09c);box-shadow:0 2px 8px rgba(0,212,255,.3);color:#fff}.component-module__variantPrimary___Bk92-:hover:not(:disabled){box-shadow:0 4px 12px rgba(0,212,255,.4);transform:translateY(-1px)}.component-module__variantPrimary___Bk92-:active:not(:disabled){transform:translateY(0)}.component-module__variantSecondary___y8OzM{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);color:#fff}.component-module__variantSecondary___y8OzM:hover:not(:disabled){background:hsla(0,0%,100%,.15);border-color:hsla(0,0%,100%,.3)}.component-module__variantOutline___ozyNM{background:transparent;border:1px solid #00d4ff;color:#00d4ff}.component-module__variantOutline___ozyNM:hover:not(:disabled){background:rgba(0,212,255,.1)}.component-module__variantGhost___nLyDj{background:transparent;color:#fff}.component-module__variantGhost___nLyDj:hover:not(:disabled){background:hsla(0,0%,100%,.1)}.component-module__variantDanger___5iQMR{background:linear-gradient(135deg,#ff4d4f,#c33);box-shadow:0 2px 8px rgba(255,77,79,.3);color:#fff}.component-module__variantDanger___5iQMR:hover:not(:disabled){box-shadow:0 4px 12px rgba(255,77,79,.4);transform:translateY(-1px)}.component-module__glow___deXRv{animation:component-module__buttonGlow___xuuYr 2s ease-in-out infinite}@keyframes component-module__buttonGlow___xuuYr{0%,to{box-shadow:0 0 5px currentColor,0 0 10px currentColor}50%{box-shadow:0 0 10px currentColor,0 0 20px currentColor}}");const y=({ref:e,$data:r,__dataSource:a,variant:s="primary",size:l="medium",disabled:y=!1,glowEnable:h=!1,href:v,target:k="_blank",loading:M=!1,loadingText:S="加载中...",rotation:w=0,opacity:P=100,background:C,onClick:V,onDoubleClick:j,onMouseEnter:z,onMouseLeave:E,style:N})=>{const D=function(e,o){return t.useMemo(()=>i(e,o),[e,o])}(r,a),B=t.useMemo(()=>D.length>0&&D[0]?.text?String(D[0].text):"",[D]),T=n(d,(e=>{switch(e){case"small":return u;case"medium":default:return c;case"large":return _}})(l),(e=>{switch(e){case"primary":default:return p;case"secondary":return m;case"outline":return f;case"ghost":return b;case"danger":return x}})(s),h&&g),L=M?S:B,O={transform:0!==w?`rotate(${w}deg)`:void 0,opacity:P/100,backgroundColor:C,...N};return o.jsx("button",{className:T,disabled:y||M,onClick:e=>{y||M||(v&&window.open(v,k),V?.(e))},onDoubleClick:j,onMouseEnter:z,onMouseLeave:E,ref:e,style:O,type:"button",children:L?o.jsx("span",{children:L}):null})};e.Button=y,e.default=y,Object.defineProperty(e,"__esModule",{value:!0})});

package/dist/index.min.js

@@ -1,2 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsButton={},e.jsxRuntime)}(this,function(e,t){"use strict";function o(e){var t,r,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e)){var n=e.length;for(t=0;t<n;t++)e[t]&&(r=o(e[t]))&&(a&&(a+=" "),a+=r)}else for(r in e)e[r]&&(a&&(a+=" "),a+=r);return a}function r(...e){return function(){for(var e,t,r=0,a="",n=arguments.length;r<n;r++)(e=arguments[r])&&(t=o(e))&&(a&&(a+=" "),a+=t);return a}(e)}var a="component-module__button___Fmad4",n="component-module__sizeSmall___pu9QB",l="component-module__sizeMedium___YP7-2",i="component-module__sizeLarge___VQtJb",s="component-module__variantPrimary___Bk92-",p="component-module__variantSecondary___y8OzM",d="component-module__variantOutline___ozyNM",m="component-module__variantGhost___nLyDj",u="component-module__variantDanger___5iQMR",_="component-module__glow___deXRv";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".component-module__button___Fmad4{align-items:center;border:none;cursor:pointer;display:inline-flex;font-weight:500;gap:8px;height:100%;justify-content:center;transition:all .2s ease;user-select:none;white-space:nowrap;width:100%}.component-module__button___Fmad4:disabled{cursor:not-allowed;opacity:.5}.component-module__sizeSmall___pu9QB{border-radius:4px;font-size:14px;padding:0 12px}.component-module__sizeMedium___YP7-2{border-radius:6px;font-size:14px;padding:0 16px}.component-module__sizeLarge___VQtJb{border-radius:8px;font-size:16px;padding:0 24px}.component-module__variantPrimary___Bk92-{background:linear-gradient(135deg,#00d4ff,#09c);box-shadow:0 2px 8px rgba(0,212,255,.3);color:#fff}.component-module__variantPrimary___Bk92-:hover:not(:disabled){box-shadow:0 4px 12px rgba(0,212,255,.4);transform:translateY(-1px)}.component-module__variantPrimary___Bk92-:active:not(:disabled){transform:translateY(0)}.component-module__variantSecondary___y8OzM{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);color:#fff}.component-module__variantSecondary___y8OzM:hover:not(:disabled){background:hsla(0,0%,100%,.15);border-color:hsla(0,0%,100%,.3)}.component-module__variantOutline___ozyNM{background:transparent;border:1px solid #00d4ff;color:#00d4ff}.component-module__variantOutline___ozyNM:hover:not(:disabled){background:rgba(0,212,255,.1)}.component-module__variantGhost___nLyDj{background:transparent;color:#fff}.component-module__variantGhost___nLyDj:hover:not(:disabled){background:hsla(0,0%,100%,.1)}.component-module__variantDanger___5iQMR{background:linear-gradient(135deg,#ff4d4f,#c33);box-shadow:0 2px 8px rgba(255,77,79,.3);color:#fff}.component-module__variantDanger___5iQMR:hover:not(:disabled){box-shadow:0 4px 12px rgba(255,77,79,.4);transform:translateY(-1px)}.component-module__glow___deXRv{animation:component-module__buttonGlow___xuuYr 2s ease-in-out infinite}@keyframes component-module__buttonGlow___xuuYr{0%,to{box-shadow:0 0 5px currentColor,0 0 10px currentColor}50%{box-shadow:0 0 10px currentColor,0 0 20px currentColor}}");const c="EasyEditorMaterialsButton";const f={componentName:c,title:"按钮",group:"interaction",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-button",version:"0.0.1",globalName:c,componentName:c},snippets:[{title:"主要按钮",screenshot:"",schema:{componentName:c,props:{text:"主要按钮",variant:"primary",size:"medium"},$dashboard:{rect:{width:120,height:40}}}},{title:"发光按钮",screenshot:"",schema:{componentName:c,props:{text:"发光按钮",variant:"outline",size:"large",glowEnable:!0},$dashboard:{rect:{width:140,height:48}}}}],configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"id",title:"ID",setter:"NodeIdSetter",extraProps:{label:!1}},{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{type:"group",title:"基础属性",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}}]},{type:"group",title:"内容",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"text",title:"按钮文本",setter:"StringSetter",extraProps:{defaultValue:"按钮"}}]},{type:"group",title:"样式",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"variant",title:"变体",setter:{componentName:"SelectSetter",props:{options:[{label:"主要",value:"primary"},{label:"次要",value:"secondary"},{label:"轮廓",value:"outline"},{label:"幽灵",value:"ghost"},{label:"危险",value:"danger"}]}},extraProps:{defaultValue:"primary"}},{name:"size",title:"尺寸",setter:{componentName:"SelectSetter",props:{options:[{label:"小",value:"small"},{label:"中",value:"medium"},{label:"大",value:"large"}]}},extraProps:{defaultValue:"medium"}},{name:"glowEnable",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!1}}]},{type:"group",title:"链接",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"href",title:"链接地址",setter:"StringSetter"},{name:"target",title:"打开方式",setter:{componentName:"SelectSetter",props:{options:[{label:"新窗口",value:"_blank"},{label:"当前窗口",value:"_self"}]}},extraProps:{defaultValue:"_blank"}}]},{type:"group",title:"行为",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"disabled",title:"禁用",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loading",title:"加载中",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loadingText",title:"加载文本",setter:"StringSetter",extraProps:{defaultValue:"加载中..."}}]}]},{type:"group",key:"data",title:"数据",items:[{name:"dataBinding",title:"数据绑定",setter:"DataBindingSetter"}]},{type:"group",key:"advanced",title:"高级",items:[{name:"condition",title:"显隐控制",setter:"SwitchSetter",extraProps:{defaultValue:!0,supportVariable:!0}}]}]}],component:{},supports:{},advanced:{}}};e.component=({ref:e,text:o="按钮",variant:c="primary",size:f="medium",disabled:g=!1,glowEnable:b=!1,onClick:x,style:h})=>{const y=r(a,(e=>{switch(e){case"small":return n;case"medium":default:return l;case"large":return i}})(f),(e=>{switch(e){case"primary":default:return s;case"secondary":return p;case"outline":return d;case"ghost":return m;case"danger":return u}})(c),b&&_);return t.jsx("button",{className:y,disabled:g,onClick:x,ref:e,style:h,type:"button",children:o?t.jsx("span",{children:o}):null})},e.meta=f});
-//# sourceMappingURL=index.min.js.map
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsButton={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";function r(...e){const t=[];for(const o of e)if(o)if("string"==typeof o||"number"==typeof o)t.push(String(o));else if(Array.isArray(o)){const e=r(...o);e&&t.push(e)}else if("object"==typeof o)for(const[e,r]of Object.entries(o))r&&t.push(e);return t.join(" ")}const a=(e,t)=>{if(!t)return e;const o=t.split(".");let r=e;for(const e of o){if(null==r)return;if("object"!=typeof r)return;r=r[e]}return r},n=e=>void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[],i=(e,t)=>{const o=((e,t)=>{if(!e)return[];if("static"===e.sourceType)return Array.isArray(e.staticData)?e.staticData:[];if("global"===e.sourceType&&e.datasourceId){const o=t?.page?.[e.datasourceId];return n(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return n(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:r,sourceField:n}of t)r&&n&&(o[r]=a(e,n));return o}):e)(o,e?.fieldMappings)};const l=(e,t)=>{const o=Array.isArray(e)?e:[e],r=o[0]||{};return{sourceType:"static",staticData:o,fieldMappings:Object.keys(r).map(e=>({componentField:e,sourceField:e}))}},s=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t}),d={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},p=s("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),u=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],c=((e=u)=>s("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),m=s("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var _="component-module__button___Fmad4",f="component-module__sizeSmall___pu9QB",b="component-module__sizeMedium___YP7-2",g="component-module__sizeLarge___VQtJb",x="component-module__variantPrimary___Bk92-",y="component-module__variantSecondary___y8OzM",h="component-module__variantOutline___ozyNM",v="component-module__variantGhost___nLyDj",S="component-module__variantDanger___5iQMR",k="component-module__glow___deXRv";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".component-module__button___Fmad4{align-items:center;border:none;cursor:pointer;display:inline-flex;font-weight:500;gap:8px;height:100%;justify-content:center;transition:all .2s ease;user-select:none;white-space:nowrap;width:100%}.component-module__button___Fmad4:disabled{cursor:not-allowed;opacity:.5}.component-module__sizeSmall___pu9QB{border-radius:4px;font-size:14px;padding:0 12px}.component-module__sizeMedium___YP7-2{border-radius:6px;font-size:14px;padding:0 16px}.component-module__sizeLarge___VQtJb{border-radius:8px;font-size:16px;padding:0 24px}.component-module__variantPrimary___Bk92-{background:linear-gradient(135deg,#00d4ff,#09c);box-shadow:0 2px 8px rgba(0,212,255,.3);color:#fff}.component-module__variantPrimary___Bk92-:hover:not(:disabled){box-shadow:0 4px 12px rgba(0,212,255,.4);transform:translateY(-1px)}.component-module__variantPrimary___Bk92-:active:not(:disabled){transform:translateY(0)}.component-module__variantSecondary___y8OzM{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);color:#fff}.component-module__variantSecondary___y8OzM:hover:not(:disabled){background:hsla(0,0%,100%,.15);border-color:hsla(0,0%,100%,.3)}.component-module__variantOutline___ozyNM{background:transparent;border:1px solid #00d4ff;color:#00d4ff}.component-module__variantOutline___ozyNM:hover:not(:disabled){background:rgba(0,212,255,.1)}.component-module__variantGhost___nLyDj{background:transparent;color:#fff}.component-module__variantGhost___nLyDj:hover:not(:disabled){background:hsla(0,0%,100%,.1)}.component-module__variantDanger___5iQMR{background:linear-gradient(135deg,#ff4d4f,#c33);box-shadow:0 2px 8px rgba(255,77,79,.3);color:#fff}.component-module__variantDanger___5iQMR:hover:not(:disabled){box-shadow:0 4px 12px rgba(255,77,79,.4);transform:translateY(-1px)}.component-module__glow___deXRv{animation:component-module__buttonGlow___xuuYr 2s ease-in-out infinite}@keyframes component-module__buttonGlow___xuuYr{0%,to{box-shadow:0 0 5px currentColor,0 0 10px currentColor}50%{box-shadow:0 0 10px currentColor,0 0 20px currentColor}}");const w="EasyEditorMaterialsButton";const P=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[d,p,e]},{type:"group",key:"data",title:"数据",items:[d,t]},{type:"group",key:"advanced",title:"高级",items:[d,c,m]}]}],component:{},supports:{},advanced:{}}))(s("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"style",title:"样式",items:[{name:"variant",title:"变体",setter:{componentName:"SelectSetter",props:{options:[{label:"主要",value:"primary"},{label:"次要",value:"secondary"},{label:"轮廓",value:"outline"},{label:"幽灵",value:"ghost"},{label:"危险",value:"danger"}]}},extraProps:{defaultValue:"primary"}},{name:"size",title:"尺寸",setter:{componentName:"SegmentedSetter",props:{options:[{label:"小",value:"small"},{label:"中",value:"medium"},{label:"大",value:"large"}]}},extraProps:{defaultValue:"medium"}},{name:"glowEnable",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!1}}]},{type:"group",key:"behavior",title:"行为",items:[{name:"href",title:"链接地址",setter:"StringSetter"},{name:"target",title:"打开方式",setter:{componentName:"SegmentedSetter",props:{options:[{label:"新窗口",value:"_blank"},{label:"当前窗口",value:"_self"}]}},extraProps:{defaultValue:"_blank"}},{name:"disabled",title:"禁用",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loading",title:"加载中",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loadingText",title:"加载文本",setter:"StringSetter",extraProps:{defaultValue:"加载中..."}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"text",label:"text",type:"string",required:!0,description:"按钮文本"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}});const M={componentName:w,title:"按钮",group:"interaction",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-button",version:"0.0.3",globalName:w,componentName:w},snippets:[{title:"主要按钮",screenshot:"",schema:{componentName:w,title:"主要按钮",props:{$data:l({text:"主要按钮"}),variant:"primary",size:"medium",rotation:0,opacity:100},$dashboard:{rect:{width:120,height:40}}}},{title:"发光按钮",screenshot:"",schema:{componentName:w,title:"发光按钮",props:{$data:l({text:"发光按钮"}),variant:"outline",size:"large",glowEnable:!0,rotation:0,opacity:100},$dashboard:{rect:{width:140,height:48}}}}],configure:P};e.component=({ref:e,$data:a,__dataSource:n,variant:l="primary",size:s="medium",disabled:d=!1,glowEnable:p=!1,href:u,target:c="_blank",loading:m=!1,loadingText:w="加载中...",rotation:P=0,opacity:M=100,background:V,onClick:N,onDoubleClick:z,onMouseEnter:E,onMouseLeave:C,style:j})=>{const D=function(e,o){return t.useMemo(()=>i(e,o),[e,o])}(a,n),T=t.useMemo(()=>D.length>0&&D[0]?.text?String(D[0].text):"",[D]),B=r(_,(e=>{switch(e){case"small":return f;case"medium":default:return b;case"large":return g}})(s),(e=>{switch(e){case"primary":default:return x;case"secondary":return y;case"outline":return h;case"ghost":return v;case"danger":return S}})(l),p&&k),A=m?w:T,L={transform:0!==P?`rotate(${P}deg)`:void 0,opacity:M/100,backgroundColor:V,...j};return o.jsx("button",{className:B,disabled:d||m,onClick:e=>{d||m||(u&&window.open(u,c),N?.(e))},onDoubleClick:z,onMouseEnter:E,onMouseLeave:C,ref:e,style:L,type:"button",children:A?o.jsx("span",{children:A}):null})},e.meta=M});

package/dist/meta.min.js

@@ -1,2 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsButtonMeta={})}(this,function(e){"use strict";const t="EasyEditorMaterialsButton";const a={componentName:t,title:"按钮",group:"interaction",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-button",version:"0.0.1",globalName:t,componentName:t},snippets:[{title:"主要按钮",screenshot:"",schema:{componentName:t,props:{text:"主要按钮",variant:"primary",size:"medium"},$dashboard:{rect:{width:120,height:40}}}},{title:"发光按钮",screenshot:"",schema:{componentName:t,props:{text:"发光按钮",variant:"outline",size:"large",glowEnable:!0},$dashboard:{rect:{width:140,height:48}}}}],configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"id",title:"ID",setter:"NodeIdSetter",extraProps:{label:!1}},{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{type:"group",title:"基础属性",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}}]},{type:"group",title:"内容",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"text",title:"按钮文本",setter:"StringSetter",extraProps:{defaultValue:"按钮"}}]},{type:"group",title:"样式",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"variant",title:"变体",setter:{componentName:"SelectSetter",props:{options:[{label:"主要",value:"primary"},{label:"次要",value:"secondary"},{label:"轮廓",value:"outline"},{label:"幽灵",value:"ghost"},{label:"危险",value:"danger"}]}},extraProps:{defaultValue:"primary"}},{name:"size",title:"尺寸",setter:{componentName:"SelectSetter",props:{options:[{label:"小",value:"small"},{label:"中",value:"medium"},{label:"大",value:"large"}]}},extraProps:{defaultValue:"medium"}},{name:"glowEnable",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!1}}]},{type:"group",title:"链接",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"href",title:"链接地址",setter:"StringSetter"},{name:"target",title:"打开方式",setter:{componentName:"SelectSetter",props:{options:[{label:"新窗口",value:"_blank"},{label:"当前窗口",value:"_self"}]}},extraProps:{defaultValue:"_blank"}}]},{type:"group",title:"行为",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"disabled",title:"禁用",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loading",title:"加载中",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loadingText",title:"加载文本",setter:"StringSetter",extraProps:{defaultValue:"加载中..."}}]}]},{type:"group",key:"data",title:"数据",items:[{name:"dataBinding",title:"数据绑定",setter:"DataBindingSetter"}]},{type:"group",key:"advanced",title:"高级",items:[{name:"condition",title:"显隐控制",setter:"SwitchSetter",extraProps:{defaultValue:!0,supportVariable:!0}}]}]}],component:{},supports:{},advanced:{}}};e.default=a,e.meta=a,Object.defineProperty(e,"__esModule",{value:!0})});
-//# sourceMappingURL=meta.min.js.map
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsButtonMeta={})}(this,function(e){"use strict";const t=(e,t)=>{const a=Array.isArray(e)?e:[e],r=a[0]||{};return{sourceType:"static",staticData:a,fieldMappings:Object.keys(r).map(e=>({componentField:e,sourceField:e}))}},a=(e,t,a)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...a}},items:t}),r={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},o=a("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),l=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],i=((e=l)=>a("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),n=a("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]),s="EasyEditorMaterialsButton";const p=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[r,o,e]},{type:"group",key:"data",title:"数据",items:[r,t]},{type:"group",key:"advanced",title:"高级",items:[r,i,n]}]}],component:{},supports:{},advanced:{}}))(a("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"style",title:"样式",items:[{name:"variant",title:"变体",setter:{componentName:"SelectSetter",props:{options:[{label:"主要",value:"primary"},{label:"次要",value:"secondary"},{label:"轮廓",value:"outline"},{label:"幽灵",value:"ghost"},{label:"危险",value:"danger"}]}},extraProps:{defaultValue:"primary"}},{name:"size",title:"尺寸",setter:{componentName:"SegmentedSetter",props:{options:[{label:"小",value:"small"},{label:"中",value:"medium"},{label:"大",value:"large"}]}},extraProps:{defaultValue:"medium"}},{name:"glowEnable",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!1}}]},{type:"group",key:"behavior",title:"行为",items:[{name:"href",title:"链接地址",setter:"StringSetter"},{name:"target",title:"打开方式",setter:{componentName:"SegmentedSetter",props:{options:[{label:"新窗口",value:"_blank"},{label:"当前窗口",value:"_self"}]}},extraProps:{defaultValue:"_blank"}},{name:"disabled",title:"禁用",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loading",title:"加载中",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"loadingText",title:"加载文本",setter:"StringSetter",extraProps:{defaultValue:"加载中..."}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"text",label:"text",type:"string",required:!0,description:"按钮文本"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}});const u={componentName:s,title:"按钮",group:"interaction",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-button",version:"0.0.3",globalName:s,componentName:s},snippets:[{title:"主要按钮",screenshot:"",schema:{componentName:s,title:"主要按钮",props:{$data:t({text:"主要按钮"}),variant:"primary",size:"medium",rotation:0,opacity:100},$dashboard:{rect:{width:120,height:40}}}},{title:"发光按钮",screenshot:"",schema:{componentName:s,title:"发光按钮",props:{$data:t({text:"发光按钮"}),variant:"outline",size:"large",glowEnable:!0,rotation:0,opacity:100},$dashboard:{rect:{width:140,height:48}}}}],configure:p};e.meta=u});

package/easypack.config.ts

@@ -0,0 +1,10 @@
+/**
+ * @easy-editor/easypack configuration
+ * @type {import('@easy-editor/easypack').EasypackConfig}
+ */
+export default {
+  preset: 'material',
+  dev: {
+    port: 5001,
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easy-editor/materials-dashboard-button",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Button component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -45,19 +45,15 @@
     "@types/react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@easy-editor/materials-shared": "0.0.0"
+    "@easy-editor/materials-shared": "0.0.1"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "easypack dev",
     "format": "biome format --write .",
     "lint": "biome check .",
     "build": "npm-run-all -nl build:*",
     "build:clean": "rimraf dist/",
-    "build:js": "rollup -c",
-    "build:types": "pnpm types",
-    "types": "npm-run-all -nl types:*",
-    "types:src": "tsc --project tsconfig.build.json",
-    "test-types": "tsc --project tsconfig.test.json"
+    "build:js": "easypack build"
   },
   "module": "dist/index.esm.js",
   "unpkg": "dist/index.min.js"

package/src/component.tsx

@@ -1,80 +1,139 @@
-/**
- * Button Component
- * 按钮组件
- */
-
-import type { CSSProperties, Ref, MouseEvent } from 'react'
-import { cn } from '@easy-editor/materials-shared'
-import styles from './component.module.css'
-
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
-export type ButtonSize = 'small' | 'medium' | 'large'
-
-export interface ButtonProps {
-  ref?: Ref<HTMLButtonElement>
-  /** 按钮文本 */
-  text?: string
-  /** 按钮变体 */
-  variant?: ButtonVariant
-  /** 按钮尺寸 */
-  size?: ButtonSize
-  /** 是否禁用 */
-  disabled?: boolean
-  /** 是否显示发光效果 */
-  glowEnable?: boolean
-  /** 点击事件 */
-  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
-  /** 外部样式 */
-  style?: CSSProperties
-}
-
-const getSizeClass = (size: ButtonSize): string => {
-  switch (size) {
-    case 'small':
-      return styles.sizeSmall
-    case 'medium':
-      return styles.sizeMedium
-    case 'large':
-      return styles.sizeLarge
-    default:
-      return styles.sizeMedium
-  }
-}
-
-const getVariantClass = (variant: ButtonVariant): string => {
-  switch (variant) {
-    case 'primary':
-      return styles.variantPrimary
-    case 'secondary':
-      return styles.variantSecondary
-    case 'outline':
-      return styles.variantOutline
-    case 'ghost':
-      return styles.variantGhost
-    case 'danger':
-      return styles.variantDanger
-    default:
-      return styles.variantPrimary
-  }
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  ref,
-  text = '按钮',
-  variant = 'primary',
-  size = 'medium',
-  disabled = false,
-  glowEnable = false,
-  onClick,
-  style: externalStyle,
-}) => {
-  const buttonClass = cn(styles.button, getSizeClass(size), getVariantClass(variant), glowEnable && styles.glow)
-
-  return (
-    <button className={buttonClass} disabled={disabled} onClick={onClick} ref={ref} style={externalStyle} type='button'>
-      {text ? <span>{text}</span> : null}
-    </button>
-  )
-}
-
-export default Button
+/**
+ * Button Component
+ * 按钮组件 - 支持数据源绑定和事件交互
+ */
+
+import { useMemo, type CSSProperties, type MouseEvent } from 'react'
+import { cn, type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
+import styles from './component.module.css'
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+export type ButtonSize = 'small' | 'medium' | 'large'
+
+export interface ButtonProps extends MaterialComponet<HTMLButtonElement> {
+  /** 按钮变体 */
+  variant?: ButtonVariant
+  /** 按钮尺寸 */
+  size?: ButtonSize
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否显示发光效果 */
+  glowEnable?: boolean
+  /** 链接地址 */
+  href?: string
+  /** 链接打开方式 */
+  target?: '_blank' | '_self'
+  /** 是否加载中 */
+  loading?: boolean
+  /** 加载文本 */
+  loadingText?: string
+  /** 点击事件 */
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: MouseEvent<HTMLButtonElement>) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: MouseEvent<HTMLButtonElement>) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: MouseEvent<HTMLButtonElement>) => void
+}
+
+const getSizeClass = (size: ButtonSize): string => {
+  switch (size) {
+    case 'small':
+      return styles.sizeSmall
+    case 'medium':
+      return styles.sizeMedium
+    case 'large':
+      return styles.sizeLarge
+    default:
+      return styles.sizeMedium
+  }
+}
+
+const getVariantClass = (variant: ButtonVariant): string => {
+  switch (variant) {
+    case 'primary':
+      return styles.variantPrimary
+    case 'secondary':
+      return styles.variantSecondary
+    case 'outline':
+      return styles.variantOutline
+    case 'ghost':
+      return styles.variantGhost
+    case 'danger':
+      return styles.variantDanger
+    default:
+      return styles.variantPrimary
+  }
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  ref,
+  $data,
+  __dataSource,
+  variant = 'primary',
+  size = 'medium',
+  disabled = false,
+  glowEnable = false,
+  href,
+  target = '_blank',
+  loading = false,
+  loadingText = '加载中...',
+  rotation = 0,
+  opacity = 100,
+  background,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+  style: externalStyle,
+}) => {
+  const dataSource = useDataSource($data, __dataSource)
+  const data = useMemo<string>(() => {
+    if (dataSource.length > 0 && dataSource[0]?.text) {
+      return String(dataSource[0].text)
+    }
+    return ''
+  }, [dataSource])
+
+  const buttonClass = cn(styles.button, getSizeClass(size), getVariantClass(variant), glowEnable && styles.glow)
+
+  const displayText = loading ? loadingText : data
+
+  const buttonStyle: CSSProperties = {
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+    opacity: opacity / 100,
+    backgroundColor: background,
+    ...externalStyle,
+  }
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    if (disabled || loading) {
+      return
+    }
+
+    if (href) {
+      window.open(href, target)
+    }
+
+    onClick?.(e)
+  }
+
+  return (
+    <button
+      className={buttonClass}
+      disabled={disabled || loading}
+      onClick={handleClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={buttonStyle}
+      type='button'
+    >
+      {displayText ? <span>{displayText}</span> : null}
+    </button>
+  )
+}
+
+export default Button