demos.3825b76a.async.js

"use strict";(self.webpackChunkHDesign=self.webpackChunkHDesign||[]).push([[2433],{57040:function(v,n,e){e.r(n);var l=e(48305),r=e.n(l),t=e(63412),_=e(75271),s=e(52676),u=function(){var c=(0,t.useDebounceState)(0,1e3),o=r()(c,3),E=o[0],d=o[1],h=o[2];return(0,s.jsxs)("div",{className:"flex items-center gap-4",children:[(0,s.jsx)("button",{type:"button",onClick:function(){return d(function(a){return a+1})},children:"+1 \u9632\u6296"}),(0,s.jsx)("button",{type:"button",onClick:function(){return h(function(a){return a+1})},children:"+1 \u4E0D\u9632\u6296"}),(0,s.jsxs)("span",{children:["count: ",E]})]})};n.default=u},38142:function(v,n,e){e.r(n);var l=e(48305),r=e.n(l),t=e(63412),_=e(75271),s=e(52676),u=function(){var c=(0,_.useRef)(null),o=(0,_.useState)(""),E=r()(o,2),d=E[0],h=E[1];(0,t.useMutation)(function(a){var m=a.target;h(m.getAttribute("data-my-attribute")||""),console.log(a.attributeName,a.oldValue)},c,{attributes:!0,attributeOldValue:!0});var f=function(){var m="new-value-"+new Date().getTime();c.current&&c.current.setAttribute("data-my-attribute",m)};return(0,s.jsxs)("div",{children:[(0,s.jsx)("button",{type:"button",onClick:f,children:"\u70B9\u51FB\u83B7\u53D6\u6700\u65B0\u503C"}),(0,s.jsxs)("p",{ref:c,"data-my-attribute":"initial-value",children:["\u5C5E\u6027\u201Cdata my Attribute\u201D\u503C\uFF1A",d]})]})};n.default=u},72003:function(v,n,e){e.r(n);var l=e(63412),r=e(75271),t=e(52676),_=function(){var u=(0,r.useRef)(null),i=(0,r.useRef)(null),c=(0,l.useResize)(function(E){var d=E.contentRect,h=d.width,f=d.height;console.log("\u6211\u662F\u7B2C\u4E00\u4E2A\u76D2\u5B50",h,f)},u),o=(0,l.useResize)(function(E){var d=E.contentRect,h=d.width,f=d.height;console.log("\u6211\u662F\u7B2C\u4E8C\u4E2A\u76D2\u5B50",h,f)},i);return(0,t.jsxs)("div",{className:"flex gap-4",children:[(0,t.jsx)("div",{className:"flex items-center justify-center rounded-xl border h-48 w-48 resize overflow-hidden bg-slate-500",ref:u,children:(0,t.jsx)("button",{className:"border rounded-lg px-2 py-1 hover:bg-slate-400 active:bg-slate-300 transition-all",type:"button",onClick:c,children:"\u5173\u95EDresize\u4E8B\u4EF6"})}),(0,t.jsx)("div",{className:"flex items-center justify-center rounded-xl border h-48 w-48 resize overflow-hidden bg-slate-500",ref:i,children:(0,t.jsx)("button",{className:"border rounded-lg px-2 py-1 hover:bg-slate-600 active:bg-slate-500 transition-all",type:"button",onClick:o,children:"\u5173\u95EDresize\u4E8B\u4EF6"})})]})};n.default=_},13871:function(v,n,e){e.r(n);var l=e(63412),r=e(75271),t=e(52676),_=function(){var u=(0,l.useSticky)({top:20,left:20,direction:"both"}),i=u.stickyElement;return(0,t.jsxs)("div",{className:"flex gap-4 h-80 w-full bg-slate-500 overflow-auto flex-col",children:[(0,t.jsx)("div",{className:"w-full flex-shrink-0",style:{height:200,width:2e3}}),(0,t.jsx)("div",{className:"ml-40 w-40 h-40 bg-slate-200 flex-shrink-0",ref:i}),(0,t.jsx)("div",{className:"w-full flex-shrink-0",style:{height:400,width:2e3}})]})};n.default=_},67766:function(v,n,e){e.r(n);var l=e(63412),r=e(75271),t=e(52676),_=function(){var u=(0,l.useSticky)({left:20,direction:"horizontal"}),i=u.stickyElement;return(0,t.jsxs)("div",{className:"flex gap-4 h-80 w-full bg-slate-500 overflow-auto",children:[(0,t.jsx)("div",{className:"w-full flex-shrink-0",style:{width:200}}),(0,t.jsx)("div",{className:"w-40 h-40 bg-slate-200 flex-shrink-0",ref:i}),(0,t.jsx)("div",{className:"w-full flex-shrink-0",style:{width:1800}})]})};n.default=_},50820:function(v,n,e){e.r(n);var l=e(63412),r=e(75271),t=e(52676),_=function(){var u=(0,l.useSticky)({top:20}),i=u.stickyElement;return(0,t.jsxs)("div",{className:"flex gap-4 h-80 w-full bg-slate-500 overflow-auto flex-col",children:[(0,t.jsx)("div",{className:"w-full flex-shrink-0",style:{height:200}}),(0,t.jsx)("div",{className:"w-40 h-40 bg-slate-200 flex-shrink-0",ref:i}),(0,t.jsx)("div",{className:"w-full flex-shrink-0",style:{height:400}})]})};n.default=_},81060:function(v,n,e){e.r(n);var l=e(48305),r=e.n(l),t=e(63412),_=e(75271),s=e(52676),u=function(){var c=(0,t.useThrottleState)(0,1e3),o=r()(c,3),E=o[0],d=o[1],h=o[2];return(0,s.jsxs)("div",{className:"flex items-center gap-4",children:[(0,s.jsx)("button",{type:"button",onClick:function(){return d(function(a){return a+1})},children:"+1 \u8282\u6D41"}),(0,s.jsx)("button",{type:"button",onClick:function(){return h(function(a){return a+1})},children:"+1 \u4E0D\u8282\u6D41"}),(0,s.jsxs)("span",{children:["count: ",E]})]})};n.default=u}}]);